@aaqu/fromcubes-react 0.0.0-stage → 0.1.0

package/nodes/portal-react.html

@@ -0,0 +1,2539 @@
+<!-- ============================================================
+     Portal Code Workspace — sidebar tab + full-screen editor overlay.
+     Served from nodes/editor/ via the /fromcubes-react/editor admin route.
+     ============================================================ -->
+<link rel="stylesheet" href="fromcubes-react/editor/workspace.css" />
+<script type="text/javascript" src="fromcubes-react/editor/file-tree.js"></script>
+<script type="text/javascript" src="fromcubes-react/editor/workspace.js"></script>
+<script type="text/javascript" src="fromcubes-react/editor/format.js"></script>
+<script type="text/javascript" src="fromcubes-react/editor/provider-settings.js"></script>
+
+<!-- ============================================================
+     Shared: Monaco loader (used by both node editors)
+     ============================================================ -->
+<script type="text/javascript">
+  (function () {
+    const 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 },
+    };
+
+    // className="…" completion list, from the CSS engine in force (Settings →
+    // Fromcubes). Refetched every time a dialog or the React Editor opens and
+    // after the engine changes — the engine can change while the editor is
+    // open, so "load once" would keep offering the old engine's classes.
+    window.__fcCssClasses = null;
+    window.__fcCssClassSet = null;
+    window.__fcCssEngine = null;
+    let cssClassesPending = false;
+    window.__fcRefreshCssClasses = function () {
+      if (cssClassesPending) return;
+      cssClassesPending = true;
+      $.getJSON("fromcubes-react/css-classes", function (data) {
+        if (!data || !Array.isArray(data.classes)) return;
+        window.__fcCssEngine = data.engine;
+        window.__fcCssClasses = data.classes;
+        window.__fcCssClassSet = null;
+      })
+        .fail(function (xhr) {
+          console.error("[FC-Monaco] css-classes FAILED:", xhr.status, xhr.statusText);
+        })
+        .always(function () {
+          cssClassesPending = false;
+        });
+    };
+    let jsxSetupDone = false;
+
+    /**
+     * One-time Monaco setup: compiler opts, diagnostics, extra libs,
+     * completion providers (CSS class — from the engine in force, JSX tag, utility symbol).
+     * Idempotent — safe to call multiple times, only the first call wires
+     * up listeners; subsequent calls just re-apply the compiler/diagnostics
+     * blocks because Node-RED resets them whenever the editor reloads.
+     *
+     * @returns {void}
+     * @private
+     */
+    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;
+
+      const 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
+      const libContent = [
+        "declare const React: any;",
+        "declare const ReactDOM: any;",
+        "declare function useNodeRed(): { data: any; send: (payload: any, topic?: string) => void; user: { userId: string; login?: string; displayName?: string; email?: string; role?: string; groups: string[] } | null; portalClient: string | null; authRequired: boolean };",
+      ].join("\n");
+      console.log(PREFIX, "addExtraLib globals.d.ts");
+      jsDef.addExtraLib(libContent, "file:///globals.d.ts");
+
+      // className completion provider — classes from the CSS engine in force
+      // 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) {
+          const line = model.getLineContent(position.lineNumber);
+          const before = line.substring(0, position.column - 1);
+
+          // 1) className="..." or className={`...`}
+          const isClassName =
+            before.match(/className\s*=\s*["'][^"']*$/) ||
+            before.match(/className\s*=\s*\{`[^`]*$/);
+
+          // 2) Any open string literal: "..., '..., or `...
+          const inString = !isClassName && before.match(/["'`][^"'`]*$/);
+
+          if (!isClassName && !inString) return { suggestions: [] };
+
+          // Extract text inside the string
+          const raw = (isClassName || inString)[0];
+          let inside;
+          if (isClassName) {
+            inside = raw.replace(/^className\s*=\s*(?:\{`|["'])/, "");
+          } else {
+            inside = raw.substring(1); // skip opening quote
+          }
+          inside = inside.replace(/\$\{[^}]*\}/g, " ");
+          const parts = inside.split(/\s+/);
+          const 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) {
+            const classes = window.__fcCssClasses || [];
+            let twSet = window.__fcCssClassSet;
+            if (!twSet && classes.length) {
+              twSet = new Set(classes);
+              window.__fcCssClassSet = twSet;
+              console.log(PREFIX, "CSS: built class lookup Set, size=" + twSet.size);
+            }
+            if (twSet) {
+              let hasTwToken = false;
+              for (let 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 (let j = 0; j < classes.length; j++) {
+                  if (classes[j].indexOf(word) === 0) {
+                    hasTwToken = true;
+                    break;
+                  }
+                }
+              }
+              if (!hasTwToken) return { suggestions: [] };
+            }
+          }
+
+          const range = {
+            startLineNumber: position.lineNumber,
+            endLineNumber: position.lineNumber,
+            startColumn: position.column - word.length,
+            endColumn: position.column,
+          };
+
+          const classes = window.__fcCssClasses || [];
+          const suggestions = [];
+          for (let i = 0; i < classes.length; i++) {
+            const 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,
+            "CSS class 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");
+      const 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",
+      ];
+      const VOID_TAGS = new Set(["br", "hr", "img", "input", "wbr", "source"]);
+
+      monaco.languages.registerCompletionItemProvider("javascript", {
+        triggerCharacters: ["<"],
+        provideCompletionItems: function (model, position) {
+          const line = model.getLineContent(position.lineNumber);
+          const before = line.substring(0, position.column - 1);
+
+          // After "<" — suggest tags
+          const afterBracket = before.match(/<([a-zA-Z]*)$/);
+          // Bare word at line start or after whitespace/{ — Emmet-like (lower or upper)
+          const bareWord =
+            !afterBracket &&
+            before.match(/(?:^|[\s{(,])([a-zA-Z][a-zA-Z0-9]*)$/);
+
+          if (!afterBracket && !bareWord) return { suggestions: [] };
+
+          const typed = (afterBracket ? afterBracket[1] : bareWord[1]) || "";
+          const replaceStart =
+            position.column - typed.length - (afterBracket ? 1 : 0);
+
+          const range = {
+            startLineNumber: position.lineNumber,
+            endLineNumber: position.lineNumber,
+            startColumn: replaceStart,
+            endColumn: position.column,
+          };
+
+          const suggestions = [];
+          const seen = new Set();
+
+          // Monaco filters a suggestion against the text its range replaces.
+          // After "<" that text is "<Rac", so a plain "Rack" label never
+          // matches and the item is dropped before it is ever shown — the
+          // list appears on "<" and empties as soon as you type a letter.
+          // filterText restates the label the way the range sees it.
+          const filterFor = function (label) {
+            return afterBracket ? "<" + label : label;
+          };
+
+          // HTML tags
+          for (let i = 0; i < HTML_TAGS.length; i++) {
+            const 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,
+                filterText: filterFor(tag),
+                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,
+                filterText: filterFor(tag),
+                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,
+                filterText: filterFor(tag),
+                detail: "<" + tag + " />",
+                sortText: "0" + tag + "b",
+              });
+            }
+          }
+
+          // Custom components from registry (PascalCase)
+          const upperMatch =
+            afterBracket && before.match(/<([A-Z][a-zA-Z0-9]*)$/);
+          const bareUpper =
+            !afterBracket && before.match(/(?:^|[\s{(,])([A-Z][a-zA-Z0-9]*)$/);
+          const compTyped = upperMatch
+            ? upperMatch[1]
+            : bareUpper
+              ? bareUpper[1]
+              : "";
+
+          if (compTyped || (!typed && afterBracket)) {
+            // Fetch component names from registry (cached on window)
+            const reg = window.__fcComponentNames || [];
+            for (let c = 0; c < reg.length; c++) {
+              const 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,
+                filterText: filterFor(name),
+                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,
+                filterText: filterFor(name),
+                detail: "<" + name + " />",
+                sortText: "0" + name + "b",
+              });
+            }
+            // Any PascalCase word not in registry — offer generic JSX wrap.
+            // While a name is half-typed this can outrank the real component:
+            // Monaco scores an exact filter match above a prefix one, and
+            // sortText does not override that. It disappears as soon as the
+            // name is complete, because then `seen` already holds it.
+            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,
+                filterText: filterFor(compTyped),
+                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,
+                filterText: filterFor(compTyped),
+                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;
+          const ch = e.changes[0];
+          if (ch.text !== "/") return;
+          const model = editor.getModel();
+          if (!model) return;
+          const lineNum = ch.range.startLineNumber;
+          const line = model.getLineContent(lineNum);
+          // Pattern 1: <tag>/</tag>  (cursor was between > and </)
+          // Pattern 2: <tag/></tag>  (cursor was before > in opening tag)
+          let m = line.match(/^(.*)<([a-zA-Z][a-zA-Z0-9]*)>\/<\/\2>(.*)$/);
+          let 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 + ">";
+          }
+          const startCol = prefix.length + 1;
+          const endCol = startCol + matchStr.length;
+          const replacement = "<" + tag + " />";
+          const 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");
+      };
+
+      /**
+       * Report the JSX context at `offset` in `code`. Client-side mirror of
+       * the JSX-aware scanner in lib/helpers.js (stripComments) — keep the
+       * two in sync.
+       *
+       *   "js"       – plain JS / `{…}` expression  → `//` comments work
+       *   "tag"      – inside an opening `<Tag …>`  → `//` comments work
+       *   "children" – between `<Tag…>` and `</Tag>` → only `{/* … *​/}`
+       *                works; `//` there is literal text that esbuild renders
+       *
+       * @param {string} code
+       * @param {number} offset
+       * @returns {"js"|"tag"|"children"}
+       */
+      window.__fcJsxContextAt = function (code, offset) {
+        const n = Math.min(code.length, offset);
+        const stack = [{ t: "js", depth: 0 }];
+        let prev = "";
+        let prev2 = "";
+        let word = "";
+        let prevIdent = false;
+        const IDENT_CH = /[A-Za-z0-9_$]/;
+        function sig(ch) {
+          prev2 = prev;
+          prev = ch;
+          if (IDENT_CH.test(ch)) {
+            word = prevIdent ? word + ch : ch;
+            prevIdent = true;
+          } else {
+            word = "";
+            prevIdent = false;
+          }
+        }
+        const KW = new Set([
+          "return",
+          "case",
+          "typeof",
+          "do",
+          "else",
+          "void",
+          "yield",
+          "await",
+          "in",
+          "of",
+          "new",
+          "delete",
+          "throw",
+          "instanceof",
+        ]);
+        function startsJsx(next) {
+          if (!/[A-Za-z_$>]/.test(next)) return false;
+          if (prev === "") return true;
+          if (prev === "<") return false;
+          if (/[A-Za-z0-9_$)\]}"'`]/.test(prev)) return KW.has(word);
+          if (prev === ">") return prev2 === "=";
+          return true;
+        }
+        function poppedIntoJs() {
+          if (stack[stack.length - 1].t === "js") {
+            prev = ")";
+            prev2 = "";
+            word = "";
+            prevIdent = false;
+          }
+        }
+        function enterExpr() {
+          stack.push({ t: "js", depth: 0 });
+          prev = "";
+          prev2 = "";
+          word = "";
+          prevIdent = false;
+          i++;
+        }
+        let i = 0;
+        while (i < n) {
+          const top = stack[stack.length - 1];
+          const c = code[i];
+          const d = i + 1 < code.length ? code[i + 1] : "";
+          if (top.t === "children") {
+            if (c === "<" && d === "/") {
+              i += 2;
+              while (i < code.length && code[i] !== ">") i++;
+              i++;
+              stack.pop();
+              poppedIntoJs();
+              continue;
+            }
+            if (c === "<" && /[A-Za-z_$>]/.test(d)) {
+              stack.push({ t: "tag", slash: false });
+              i++;
+              continue;
+            }
+            if (c === "{") {
+              enterExpr();
+              continue;
+            }
+            i++;
+            continue;
+          }
+          if (top.t === "tag") {
+            if (c === '"' || c === "'") {
+              i++;
+              while (i < code.length && code[i] !== c) i++;
+              i++;
+              top.slash = false;
+              continue;
+            }
+            if (c === "/" && d === "/") {
+              i += 2;
+              while (i < code.length && code[i] !== "\n") i++;
+              continue;
+            }
+            if (c === "/" && d === "*") {
+              i += 2;
+              while (
+                i < code.length &&
+                !(code[i] === "*" && code[i + 1] === "/")
+              )
+                i++;
+              i += 2;
+              continue;
+            }
+            if (c === "{") {
+              enterExpr();
+              continue;
+            }
+            if (c === ">") {
+              const selfClose = top.slash;
+              stack.pop();
+              if (selfClose) poppedIntoJs();
+              else stack.push({ t: "children" });
+              i++;
+              continue;
+            }
+            if (!/\s/.test(c)) top.slash = c === "/";
+            i++;
+            continue;
+          }
+          // js frame
+          if (c === '"' || c === "'" || c === "`") {
+            const q = c;
+            i++;
+            while (i < code.length && code[i] !== q) {
+              if (code[i] === "\\") i++;
+              i++;
+            }
+            i++;
+            sig(q);
+            continue;
+          }
+          if (c === "/" && d === "/") {
+            i += 2;
+            while (i < code.length && code[i] !== "\n") i++;
+            continue;
+          }
+          if (c === "/" && d === "*") {
+            i += 2;
+            while (
+              i < code.length &&
+              !(code[i] === "*" && code[i + 1] === "/")
+            )
+              i++;
+            i += 2;
+            continue;
+          }
+          if (c === "{") {
+            top.depth++;
+            sig(c);
+            i++;
+            continue;
+          }
+          if (c === "}") {
+            if (top.depth === 0 && stack.length > 1) {
+              stack.pop();
+              if (stack[stack.length - 1].t === "tag")
+                stack[stack.length - 1].slash = false;
+              i++;
+              continue;
+            }
+            if (top.depth > 0) top.depth--;
+            sig(c);
+            i++;
+            continue;
+          }
+          if (c === "<" && startsJsx(d)) {
+            stack.push({ t: "tag", slash: false });
+            i++;
+            continue;
+          }
+          if (/\s/.test(c)) {
+            prevIdent = false;
+            i++;
+            continue;
+          }
+          sig(c);
+          i++;
+        }
+        return stack[stack.length - 1].t;
+      };
+
+      // Custom keybindings shared by every Monaco instance in this package.
+      //
+      // Ctrl+D (Cmd+D on macOS) duplicates the current line / selection by
+      // delegating to Monaco's built-in copyLinesDownAction (multi-cursor
+      // aware, single undo step). Overrides Monaco's default Ctrl+D
+      // ("Add Selection To Next Find Match") on purpose.
+      //
+      // Ctrl+/ (Cmd+/) toggles comments JSX-aware: Monaco's built-in
+      // commentLine blindly prefixes `//`, which inside JSX children is NOT
+      // a comment — esbuild renders it as literal text and the "commented"
+      // element stays live. The comment style for the whole selection comes
+      // from the FIRST selected line's context via __fcJsxContextAt:
+      // children → wrap each line in `{/* … *​/}`, JS / opening-tag
+      // attributes → `//`. Non-javascript models (the custom-head HTML
+      // editor) fall through to the built-in action.
+      window.__fcAttachKeybindings = function (editor) {
+        editor.addAction({
+          id: "fc-duplicate-line",
+          label: "Duplicate Line/Selection",
+          keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyD],
+          run: function (ed) {
+            const action = ed.getAction("editor.action.copyLinesDownAction");
+            if (action) action.run();
+          },
+        });
+        editor.addAction({
+          id: "fc-jsx-toggle-comment",
+          label: "Toggle Line Comment (JSX-aware)",
+          keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Slash],
+          run: function (ed) {
+            const model = ed.getModel();
+            if (!model) return;
+            if (model.getLanguageId() !== "javascript") {
+              const action = ed.getAction("editor.action.commentLine");
+              if (action) action.run();
+              return;
+            }
+            const lineNums = new Set();
+            (ed.getSelections() || []).forEach(function (sel) {
+              let end = sel.endLineNumber;
+              // a selection ending at column 1 does not include that line
+              if (end > sel.startLineNumber && sel.endColumn === 1) end--;
+              for (let l = sel.startLineNumber; l <= end; l++)
+                lineNums.add(l);
+            });
+            const text = model.getValue();
+            const lines = [];
+            lineNums.forEach(function (l) {
+              const content = model.getLineContent(l);
+              const t = content.trim();
+              if (!t) return;
+              const wrapped = t.startsWith("{/*") && t.endsWith("*/}");
+              const slashed = !wrapped && t.startsWith("//");
+              lines.push({
+                l: l,
+                content: content,
+                t: t,
+                wrapped: wrapped,
+                slashed: slashed,
+              });
+            });
+            if (!lines.length) return;
+            lines.sort(function (a, b) {
+              return a.l - b.l;
+            });
+            const uncomment = lines.every(function (x) {
+              return x.wrapped || x.slashed;
+            });
+            // Comment style comes from the FIRST selected line's context
+            // (VS Code behavior): a selection starting at `return (` is JS,
+            // so the whole block gets `//` — once the outer lines are
+            // commented the inner JSX never parses. Only a selection that
+            // STARTS between live tags needs `{/* … */}`.
+            // Markers are inserted at ONE column for the whole selection —
+            // the minimum indent across the selected lines — so they line
+            // up and each line keeps its own indentation after the marker.
+            let ctx = null;
+            let minIndent = 0;
+            if (!uncomment) {
+              const first = lines[0];
+              const firstIndent =
+                first.content.length - first.content.trimStart().length;
+              ctx = window.__fcJsxContextAt(
+                text,
+                model.getOffsetAt({
+                  lineNumber: first.l,
+                  column: firstIndent + 1,
+                }),
+              );
+              minIndent = Infinity;
+              lines.forEach(function (x) {
+                const ind = x.content.length - x.content.trimStart().length;
+                if (ind < minIndent) minIndent = ind;
+              });
+            }
+            const edits = [];
+            lines.forEach(function (x) {
+              let newText = null;
+              if (uncomment) {
+                const indent = x.content.slice(
+                  0,
+                  x.content.length - x.content.trimStart().length,
+                );
+                let inner;
+                if (x.wrapped) {
+                  inner = x.t.slice(3, -3);
+                  if (inner.startsWith(" ")) inner = inner.slice(1);
+                  if (inner.endsWith(" ")) inner = inner.slice(0, -1);
+                } else {
+                  inner = x.t.slice(2);
+                  if (inner.startsWith(" ")) inner = inner.slice(1);
+                }
+                newText = indent + inner;
+              } else if (!x.wrapped && !x.slashed) {
+                const head = x.content.slice(0, minIndent);
+                const rest = x.content.slice(minIndent);
+                newText =
+                  ctx === "children"
+                    ? head + "{/* " + rest + " */}"
+                    : head + "// " + rest;
+              }
+              if (newText !== null)
+                edits.push({
+                  range: new monaco.Range(
+                    x.l,
+                    1,
+                    x.l,
+                    model.getLineMaxColumn(x.l),
+                  ),
+                  text: newText,
+                  forceMoveMarkers: true,
+                });
+            });
+            if (!edits.length) return;
+            ed.pushUndoStop();
+            ed.executeEdits("fc-jsx-toggle-comment", edits);
+            ed.pushUndoStop();
+          },
+        });
+      };
+
+      /**
+       * Fetch the current component registry from `/fromcubes-react/registry`
+       * and stash the names on `window.__fcComponentNames` so the JSX-tag
+       * completion provider can offer `<Button` etc. Re-fetched on every
+       * editor open so newly-added components show up without an editor
+       * restart.
+       * @returns {void}
+       * @private
+       */
+      function refreshComponentNames() {
+        $.getJSON("fromcubes-react/registry", function (reg) {
+          window.__fcComponentNames = Object.keys(reg);
+          console.log(
+            PREFIX,
+            "component names loaded:",
+            window.__fcComponentNames,
+          );
+        }).fail(function () {
+          window.__fcComponentNames = [];
+        });
+      }
+      refreshComponentNames();
+      // Exposed for the workspace overlay, which reopens files without going
+      // through any node's oneditprepare.
+      window.__fcRefreshComponentNames = refreshComponentNames;
+
+      // Fetch utility nodes + their parsed top-level symbols.
+      // Window cache shape: { byNode: { utilName: [symbol, ...] }, allSymbols: [..] }
+      window.__fcRefreshUtilities = function () {
+        $.getJSON("fromcubes-react/utilities", function (reg) {
+          const byNode = {};
+          const all = new Set();
+          Object.keys(reg).forEach(function (n) {
+            const syms = reg[n].symbols || [];
+            byNode[n] = syms;
+            syms.forEach(function (s) { all.add(s); });
+          });
+          window.__fcUtilities = { byNode: byNode, allSymbols: [...all] };
+          console.log(
+            PREFIX,
+            "utilities loaded: " + Object.keys(byNode).length + " nodes, " + all.size + " symbols",
+          );
+        }).fail(function () {
+          window.__fcUtilities = { byNode: {}, allSymbols: [] };
+        });
+      };
+      window.__fcRefreshUtilities();
+
+      // Utility-symbol completion: suggests bare identifiers anywhere in JS
+      // context EXCEPT after "<" (that's JSX tag completion, handled below).
+      monaco.languages.registerCompletionItemProvider("javascript", {
+        triggerCharacters: ["."], // jQuery-ish — but we mostly fire from word context
+        provideCompletionItems: function (model, position) {
+          const line = model.getLineContent(position.lineNumber);
+          const before = line.substring(0, position.column - 1);
+          // Skip JSX tag context — covered by other providers
+          if (/<[a-zA-Z]*$/.test(before)) return { suggestions: [] };
+          // Skip property access — let Monaco's language service handle it
+          if (/\.\s*\w*$/.test(before)) return { suggestions: [] };
+          // Skip inside strings
+          if (/["'`][^"'`]*$/.test(before)) return { suggestions: [] };
+          const wordMatch = before.match(/([A-Za-z_$][\w$]*)$/);
+          const word = wordMatch ? wordMatch[1] : "";
+          const all = (window.__fcUtilities && window.__fcUtilities.allSymbols) || [];
+          if (!all.length) return { suggestions: [] };
+          const range = {
+            startLineNumber: position.lineNumber,
+            endLineNumber: position.lineNumber,
+            startColumn: position.column - word.length,
+            endColumn: position.column,
+          };
+          const suggestions = [];
+          for (let i = 0; i < all.length; i++) {
+            const sym = all[i];
+            if (word && sym.indexOf(word) !== 0) continue;
+            suggestions.push({
+              label: sym,
+              kind: monaco.languages.CompletionItemKind.Function,
+              insertText: sym,
+              range: range,
+              detail: "fc-portal-utility",
+              sortText: "1" + sym,
+            });
+          }
+          return { suggestions: suggestions };
+        },
+      });
+
+      // Marker listener for debugging
+      monaco.editor.onDidChangeMarkers(function (uris) {
+        uris.forEach(function (uri) {
+          const 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");
+    }
+
+    /**
+     * Push compilerOptions + diagnosticsOptions into Monaco's TS defaults.
+     * Called by `ensureJsxSetup` once and re-applied on every editor open
+     * because Node-RED's outer Monaco initialiser can reset these between
+     * editor sessions. We disable Monaco's TS-side squiggles entirely —
+     * the authoritative syntax check is the server-side esbuild pass at
+     * deploy time, and Monaco's TS parser produces noisy false positives
+     * (1109/1005/1128) on raw JSX.
+     * @returns {void}
+     * @private
+     */
+    function applyCompilerAndDiag() {
+      const jsDef = monaco.typescript.javascriptDefaults;
+      const 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);
+
+      const diagOpts = {
+        noSemanticValidation: true,
+        // Server-side esbuild does the real syntax check at deploy time;
+        // Monaco's TS parser produces noisy false positives on raw JSX
+        // (1109, 1005, 1128 etc.), so we silence its squiggles entirely.
+        noSyntaxValidation: true,
+        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()),
+      );
+    }
+
+    /**
+     * Re-apply JSX defaults before Monaco model creation. Exported for
+     * `oneditprepare` to call. Idempotent — wraps `ensureJsxSetup`.
+     * @returns {void}
+     */
+    window.__fcApplyJsxDefaults = function () {
+      ensureJsxSetup();
+    };
+
+    /**
+     * Lazy-load Monaco from the admin endpoint `/fromcubes-react/vs/` the
+     * first time an editor opens. If Monaco is already on `window`
+     * (Node-RED bundled its own copy, or another node loaded it first),
+     * skip the loader script and run our setup inline.
+     *
+     * The callback signature is `cb(failed)` — `failed === true` when the
+     * loader script threw at load time; editors should fall back to a
+     * plain textarea in that case.
+     *
+     * @param {(failed?: boolean) => void} cb
+     * @returns {void}
+     */
+    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;
+      }
+      const s = document.createElement("script");
+      s.src = "fromcubes-react/vs/loader.js";
+      s.onload = function () {
+        console.log(PREFIX, "loader.js loaded, configuring require paths");
+        require.config({ paths: { vs: "fromcubes-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="margin-bottom:4px;display:flex;align-items:center;">
+    <label style="flex:1"><i class="fa fa-code"></i> JSX Code</label>
+    <button type="button" class="red-ui-button red-ui-button-small" id="fcc-btn-react-editor" title="Open this component in the full-screen React Editor">
+      <i class="fa fa-expand"></i> React Editor
+    </button>
+  </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 () {
+    let compEditorInstance = null;
+
+    const 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");
+
+    // FC_NAME_RE / FC_NAME_MAX / FC_NAME_BLACKLIST mirror lib/helpers.js
+    // isSafeName so the editor flags invalid names before deploy.
+    const FC_NAME_RE = /^[A-Za-z_$][\w$]*$/;
+    const FC_NAME_MAX = 64;
+    const FC_NAME_BLACKLIST = [
+      "__proto__", "constructor", "prototype", "hasOwnProperty",
+      "isPrototypeOf", "propertyIsEnumerable", "toString", "valueOf",
+      "toLocaleString",
+    ];
+    function fcValidateName(v) {
+      return (
+        typeof v === "string" &&
+        v.length > 0 &&
+        v.length <= FC_NAME_MAX &&
+        FC_NAME_RE.test(v) &&
+        FC_NAME_BLACKLIST.indexOf(v) === -1
+      );
+    }
+
+    RED.nodes.registerType("fc-portal-component", {
+      category: "fromcubes",
+      color: "#a8d8ea",
+      defaults: {
+        name: { value: "" },
+        compName: {
+          value: "StatusCard",
+          required: true,
+          validate: fcValidateName,
+        },
+        compCode: {
+          value: COMP_STARTER,
+          validate: function (v) {
+            return typeof v === "string" && v.trim().length > 0;
+          },
+        },
+      },
+      inputs: 0,
+      outputs: 0,
+      icon: "fromcubes-component.svg",
+      paletteLabel: "React Component",
+      inputLabels: [],
+      outputLabels: [],
+      /**
+       * Canvas label resolver — falls back through `name → compName →
+       * "component"` so a freshly-dropped node shows something readable
+       * before the user opens the edit dialog.
+       * @returns {string}
+       */
+      label: function () {
+        return this.name || this.compName || "component";
+      },
+
+      /**
+       * Node-RED editor lifecycle: called every time the user opens the
+       * edit dialog for this node. Loads Monaco lazily, creates a JSX
+       * model with a stable URI (`file:///fc-comp-<nodeId>.jsx`) and
+       * attaches it to the `#fcc-monaco` container. Falls back to a
+       * `<textarea>` if Monaco fails to load.
+       * @returns {void}
+       */
+      oneditprepare: function () {
+        const node = this;
+        const code =
+          typeof node.compCode === "string" ? node.compCode : COMP_STARTER;
+        console.log("[FC-Monaco] COMP oneditprepare, node.id=" + node.id);
+
+        // Hand off to the full-screen React Editor: the dialog saves and
+        // closes itself first (its oneditsave owns the same field).
+        $("#fcc-btn-react-editor").on("click", function () {
+          if (!window.__fcPortalWorkspace) {
+            RED.notify("React Editor is not available", "warning");
+            return;
+          }
+          window.__fcPortalWorkspace.openNodeFile(node.id, "compCode");
+        });
+
+        window.__fcRefreshCssClasses();
+
+        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();
+
+          const compUri = monaco.Uri.parse("file:///fc-comp-" + node.id + ".jsx");
+          console.log("[FC-Monaco] COMP: model URI=" + compUri.toString());
+          const existingModel = monaco.editor.getModel(compUri);
+          if (existingModel) {
+            console.log("[FC-Monaco] COMP: disposing existing model");
+            existingModel.dispose();
+          }
+          const 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),
+          );
+          if (window.__fcAttachKeybindings)
+            window.__fcAttachKeybindings(compEditorInstance);
+          console.log("[FC-Monaco] COMP: editor created");
+
+          // Log markers after a short delay (diagnostics are async)
+          setTimeout(function () {
+            const 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);
+        });
+      },
+
+      /**
+       * Editor → flow: copy Monaco editor contents into the hidden
+       * `#node-input-compCode` input and the node's `compCode` property,
+       * then dispose Monaco's model + editor to free GPU/CPU resources.
+       * @returns {void}
+       */
+      oneditsave: function () {
+        console.log("[FC-Monaco] COMP oneditsave");
+        const 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");
+        }
+      },
+
+      /**
+       * User cancelled the dialog — discard Monaco state without writing
+       * back to the node. Same dispose pattern as oneditsave to avoid
+       * leaking model graphs.
+       * @returns {void}
+       */
+      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");
+        }
+      },
+
+      /**
+       * Resize handler — Monaco doesn't react to container size changes
+       * unless we call `editor.layout()` explicitly. Subtracts ~180 px of
+       * chrome (label, buttons, padding) from the dialog height.
+       * @param {{height: number, width: number}} size
+       * @returns {void}
+       */
+      oneditresize: function (size) {
+        let 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>
+
+<!-- ============================================================
+     fc-portal-utility – canvas node (helpers / hooks / constants)
+     ============================================================ -->
+<script type="text/html" data-template-name="fc-portal-utility">
+  <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-utilName"><i class="fa fa-wrench"></i> Module name</label>
+    <input type="text" id="node-input-utilName" placeholder="mathHelpers" />
+  </div>
+  <div class="form-row" style="margin-bottom:4px;">
+    <div style="display:flex;align-items:center;">
+      <label style="flex:1"><i class="fa fa-code"></i> Code</label>
+      <button type="button" class="red-ui-button red-ui-button-small" id="fcu-btn-react-editor" title="Open this utility in the full-screen React Editor">
+        <i class="fa fa-expand"></i> React Editor
+      </button>
+    </div>
+    <div style="font-size:11px;opacity:.5;margin-top:2px;">
+      Top-level helpers, custom hooks and constants. Available globally to portals
+      that reference any of the symbols declared here.
+    </div>
+  </div>
+  <div class="form-row node-text-editor-row">
+    <div
+      id="fcu-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="fcu-monaco" style="width:100%;height:100%;"></div>
+      <textarea
+        id="fcu-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-utilCode" />
+</script>
+
+<script type="text/javascript">
+  (function () {
+    let utilEditorInstance = null;
+
+    // Local copy of the identifier validator — each editor <script> block is
+    // wrapped in its own IIFE, so the helper defined in the fc-portal-component
+    // block above is out of scope here. Mirrors lib/helpers.js isSafeName.
+    const FC_NAME_RE = /^[A-Za-z_$][\w$]*$/;
+    const FC_NAME_MAX = 64;
+    const FC_NAME_BLACKLIST = [
+      "__proto__", "constructor", "prototype", "hasOwnProperty",
+      "isPrototypeOf", "propertyIsEnumerable", "toString", "valueOf",
+      "toLocaleString",
+    ];
+    /**
+     * Mirror of `lib/helpers.js#isSafeName` — used as `defaults.utilName.validate`
+     * so the editor flags invalid identifiers in red before the user can
+     * deploy a node that the server would later reject. Rules: non-empty
+     * string, ≤ 64 chars, JS identifier syntax, not on the prototype-key
+     * blacklist.
+     * @param {unknown} v
+     * @returns {boolean}
+     */
+    function fcValidateName(v) {
+      return (
+        typeof v === "string" &&
+        v.length > 0 &&
+        v.length <= FC_NAME_MAX &&
+        FC_NAME_RE.test(v) &&
+        FC_NAME_BLACKLIST.indexOf(v) === -1
+      );
+    }
+
+    const UTIL_STARTER = [
+      "// Helpers / custom hooks / constants — top-level, no React component.",
+      "// Each symbol declared here is available globally in any portal that",
+      "// references it (selective inclusion: unused utility nodes are skipped).",
+      "",
+      "const PI2 = Math.PI * 2;",
+      "",
+      "function clamp(n, min, max) {",
+      "  return Math.max(min, Math.min(max, n));",
+      "}",
+      "",
+      "// Custom React hook — call from inside App() or library components",
+      "function useDebounce(value, ms = 300) {",
+      "  const [v, setV] = React.useState(value);",
+      "  React.useEffect(() => {",
+      "    const t = setTimeout(() => setV(value), ms);",
+      "    return () => clearTimeout(t);",
+      "  }, [value, ms]);",
+      "  return v;",
+      "}",
+    ].join("\n");
+
+    RED.nodes.registerType("fc-portal-utility", {
+      category: "fromcubes",
+      color: "#fbbf24",
+      defaults: {
+        name: { value: "" },
+        utilName: {
+          value: "myHelpers",
+          required: true,
+          validate: fcValidateName,
+        },
+        utilCode: {
+          value: UTIL_STARTER,
+          validate: function (v) {
+            return typeof v === "string" && v.trim().length > 0;
+          },
+        },
+      },
+      inputs: 0,
+      outputs: 0,
+      icon: "fromcubes-utility.svg",
+      paletteLabel: "React Utility",
+      inputLabels: [],
+      outputLabels: [],
+      /**
+       * Canvas label — `name → utilName → "utility"`.
+       * @returns {string}
+       */
+      label: function () {
+        return this.name || this.utilName || "utility";
+      },
+
+      /**
+       * Editor lifecycle for `fc-portal-utility`: lazy-load Monaco,
+       * create a JS model with URI `file:///fc-util-<nodeId>.js` (note
+       * `.js` not `.jsx` — utility code is plain JS).
+       * @returns {void}
+       */
+      oneditprepare: function () {
+        const node = this;
+        const code =
+          typeof node.utilCode === "string" ? node.utilCode : UTIL_STARTER;
+        console.log("[FC-Monaco] UTIL oneditprepare, node.id=" + node.id);
+
+        // Hand off to the full-screen React Editor: the dialog saves and
+        // closes itself first (its oneditsave owns the same field).
+        $("#fcu-btn-react-editor").on("click", function () {
+          if (!window.__fcPortalWorkspace) {
+            RED.notify("React Editor is not available", "warning");
+            return;
+          }
+          window.__fcPortalWorkspace.openNodeFile(node.id, "utilCode");
+        });
+
+        window.__fcRefreshCssClasses();
+
+        window.__fcLoadMonaco(function (failed) {
+          if (failed) {
+            $("#fcu-monaco").hide();
+            $("#fcu-fallback").show().val(code);
+            return;
+          }
+          window.__fcApplyJsxDefaults();
+
+          const utilUri = monaco.Uri.parse("file:///fc-util-" + node.id + ".js");
+          const existingModel = monaco.editor.getModel(utilUri);
+          if (existingModel) existingModel.dispose();
+          const utilModel = monaco.editor.createModel(code, "javascript", utilUri);
+
+          utilEditorInstance = monaco.editor.create(
+            document.getElementById("fcu-monaco"),
+            Object.assign({ model: utilModel }, window.__fcEditorOpts),
+          );
+          if (window.__fcAttachKeybindings)
+            window.__fcAttachKeybindings(utilEditorInstance);
+        });
+      },
+
+      /**
+       * Editor → flow: write Monaco contents back to `utilCode`, dispose
+       * model+editor.
+       * @returns {void}
+       */
+      oneditsave: function () {
+        const code = utilEditorInstance
+          ? utilEditorInstance.getValue()
+          : $("#fcu-fallback").val();
+        $("#node-input-utilCode").val(code);
+        this.utilCode = code;
+        if (utilEditorInstance) {
+          utilEditorInstance.getModel().dispose();
+          utilEditorInstance.dispose();
+          utilEditorInstance = null;
+        }
+      },
+
+      /**
+       * Discard Monaco state without writing back.
+       * @returns {void}
+       */
+      oneditcancel: function () {
+        if (utilEditorInstance) {
+          utilEditorInstance.getModel().dispose();
+          utilEditorInstance.dispose();
+          utilEditorInstance = null;
+        }
+      },
+
+      /**
+       * Layout Monaco on dialog resize. -200 px chrome for the utility
+       * dialog (taller because of the symbol-list panel).
+       * @param {{height: number, width: number}} size
+       * @returns {void}
+       */
+      oneditresize: function (size) {
+        let h = size.height - 200;
+        if (h < 150) h = 150;
+        $("#fcu-editor-wrap").css("height", h + "px");
+        if (utilEditorInstance) utilEditorInstance.layout();
+      },
+    });
+  })();
+</script>
+
+<script type="text/html" data-help-name="fc-portal-utility">
+  <p>
+    Defines shared <strong>helpers</strong>, <strong>custom hooks</strong> and
+    <strong>constants</strong> available to all <strong>portal-react</strong>
+    nodes. Unlike <code>fc-portal-component</code>, the code is injected raw at
+    top level (no IIFE wrapper) — a single utility node may declare many symbols.
+  </p>
+  <h3>Properties</h3>
+  <dl>
+    <dt>Module name</dt>
+    <dd>
+      Identifier for this utility node. Shares a namespace with
+      <code>fc-portal-component</code> names — must be unique across all
+      components and utilities.
+    </dd>
+    <dt>Code</dt>
+    <dd>
+      Top-level JavaScript: <code>const</code>, <code>let</code>,
+      <code>function</code>, <code>class</code> declarations. <code>import</code>
+      statements at the top are auto-hoisted into the bundle.
+    </dd>
+  </dl>
+  <h3>Selective inclusion</h3>
+  <p>
+    A utility node is bundled into a portal only when the portal's JSX (or any
+    of its referenced library components) mentions at least one of the symbols
+    declared in the utility. Unused utility nodes are skipped.
+  </p>
+  <p>
+    Group related symbols in one node — referencing any one symbol pulls in the
+    whole node's code. Split unrelated helpers across multiple nodes for finer
+    granularity.
+  </p>
+  <h3>Example</h3>
+  <pre>function clamp(n, min, max) { return Math.max(min, Math.min(max, n)); }
+
+function useDebounce(value, ms = 300) {
+  const [v, setV] = React.useState(value);
+  React.useEffect(() => {
+    const t = setTimeout(() => setV(value), ms);
+    return () => clearTimeout(t);
+  }, [value, ms]);
+  return v;
+}</pre>
+  <p>
+    Then in any <strong>portal-react</strong> node:
+  </p>
+  <pre>function App() {
+  const { data } = useNodeRed();
+  const slow = useDebounce(data?.value);
+  return &lt;div&gt;{clamp(slow ?? 0, 0, 100)}&lt;/div&gt;;
+}</pre>
+</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: JSX ── -->
+    <div id="fc-tab-jsx" class="fc-tab-pane">
+      <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;flex-wrap:wrap;">
+        <button type="button" class="red-ui-button" id="fc-btn-starter">
+          <i class="fa fa-magic"></i> Default
+        </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-utilities">
+          <i class="fa fa-wrench"></i> Utilities
+        </button>
+        <button type="button" class="red-ui-button" id="fc-btn-react-editor" title="Open this file in the full-screen React Editor">
+          <i class="fa fa-expand"></i> React Editor
+        </button>
+        <span style="flex:1"></span>
+        <button type="button" class="red-ui-button" id="fc-btn-preview">
+          <i class="fa fa-eye"></i> Preview
+        </button>
+      </div>
+    </div>
+
+    <!-- ── 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-subPath"
+          ><i class="fa fa-globe"></i> Sub-path</label
+        >
+        <div style="display:inline-flex;align-items:stretch;width:70%;">
+          <span
+            style="display:inline-flex;align-items:center;padding:0 8px;background:var(--red-ui-secondary-background,#f3f3f3);border:1px solid var(--red-ui-form-input-border-color,#ccc);border-right:none;border-radius:4px 0 0 4px;color:var(--red-ui-secondary-text-color,#888);font-family:monospace;user-select:none;"
+            >/fromcubes/</span
+          >
+          <input
+            type="text"
+            id="node-input-subPath"
+            placeholder="sensors"
+            style="flex:1;border-radius:0 4px 4px 0;"
+          />
+        </div>
+        <input type="hidden" id="node-input-endpoint" />
+        <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 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-portalAuth"
+            style="width:auto;margin:0 8px 0 0;vertical-align:middle;"
+          />
+          Enable Portal Auth headers
+        </label>
+        <div style="font-size:11px;opacity:.5;margin-top:4px;margin-left:4px;">
+          Read <code>X-Portal-*</code> headers from reverse proxy.
+        </div>
+      </div>
+      <div class="form-row" style="margin-top:12px;">
+        <label style="width:auto;">
+          <input
+            type="checkbox"
+            id="node-input-authOnly"
+            style="width:auto;margin:0 8px 0 0;vertical-align:middle;"
+          />
+          Authenticated-only delivery
+        </label>
+        <div style="font-size:11px;opacity:.5;margin-top:4px;margin-left:4px;">
+          Messages without <code>msg._client</code> go only to sessions with
+          portal identity headers. Anonymous sessions get an
+          <code>auth_required</code> frame on connect
+          (<code>useNodeRed().authRequired</code>). Force a true broadcast with
+          <code>msg._client = { authenticated: false }</code>.
+        </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: 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. Trusted authors only: scripts and event
+          handlers run in the public portal page.
+        </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 () {
+    let editorInstance = null;
+    let headEditorInstance = null;
+
+    const STARTER = [
+      "// useNodeRed() \u2192 { data, send, portalClient }",
+      "//   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">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>",
+      "      <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: "" },
+        subPath: {
+          value: "",
+          required: true,
+          validate: function (v) {
+            if (typeof v !== "string") return false;
+            const t = v.trim();
+            if (t.length === 0) return false;
+            if (/\s/.test(t)) return false;
+            if (t.charAt(0) === "/" || t.charAt(t.length - 1) === "/") return false;
+            const segs = t.split("/");
+            for (let i = 0; i < segs.length; i++) {
+              const s = segs[i];
+              if (!s || s === "." || s === "..") return false;
+              const lower = s.toLowerCase();
+              if (lower === "public" || lower === "_ws") return false;
+              if (!/^[a-zA-Z0-9][a-zA-Z0-9._-]*$/.test(s)) return false;
+            }
+            return true;
+          },
+        },
+        endpoint: { value: "" },
+        pageTitle: { value: "fromcubes" },
+        componentCode: {
+          value: STARTER,
+          validate: function (v) {
+            return typeof v === "string" && v.trim().length > 0;
+          },
+        },
+        customHead: { value: "" },
+        portalAuth: { value: false },
+        authOnly: { value: false },
+        showWsStatus: { value: false },
+        libs: { value: [] },
+      },
+      inputs: 1,
+      outputs: 1,
+      icon: "fromcubes-react.svg",
+      paletteLabel: "React Portal",
+      // Source AND sink — we keep the default left-aligned input even though
+      // Node-RED appearance docs suggest align: 'right' for nodes that sit at
+      // the end of a flow. This portal is hybrid: the input wire pushes msgs
+      // into the browser, while the output wire forwards UI events out. Left
+      // alignment matches the dominant "msg → render" direction.
+      inputLabels: ["broadcast / unicast msg → page"],
+      outputLabels: ["UI event from page"],
+      /**
+       * Canvas label — shows `name` or the deployed URL (`/fromcubes/<subPath>`).
+       * @returns {string}
+       */
+      label: function () {
+        return this.name || ("/fromcubes/" + (this.subPath || "?"));
+      },
+
+      /**
+       * Editor lifecycle for the portal node. Heaviest of the three —
+       * creates two Monaco editors (JSX + Head HTML), wires up:
+       *   - URL hint that previews `/fromcubes/<subPath>`
+       *   - Legacy `endpoint` field migration warning
+       *   - `RED.tabs` for JSX / Properties / Head HTML panels
+       *   - Component picker dialog (`#fc-btn-components`)
+       *   - Utility picker dialog (`#fc-btn-utilities`)
+       * @returns {void}
+       */
+      oneditprepare: function () {
+        const node = this;
+        const code =
+          typeof node.componentCode === "string" ? node.componentCode : STARTER;
+        const headCode = node.customHead || "";
+        console.log("[FC-Monaco] PORTAL oneditprepare, node.id=" + node.id);
+
+        // Hand off to the full-screen React Editor. Which file opens follows
+        // the tab you were on: JSX → App.jsx, Head HTML → head.html.
+        $("#fc-btn-react-editor").on("click", function () {
+          if (!window.__fcPortalWorkspace) {
+            RED.notify("React Editor is not available", "warning");
+            return;
+          }
+          const field = $("#fc-tab-head").is(":visible")
+            ? "customHead"
+            : "componentCode";
+          window.__fcPortalWorkspace.openNodeFile(node.id, field);
+        });
+
+        window.__fcRefreshCssClasses();
+
+        // Tabs
+        const 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");
+
+        // Legacy endpoint detection + convenience pre-fill
+        if (node.endpoint && typeof node.endpoint === "string") {
+          const legacy = node.endpoint;
+          const prefix = "/fromcubes/";
+          if (legacy.indexOf(prefix) === 0) {
+            if (!node.subPath) {
+              $("#node-input-subPath").val(legacy.slice(prefix.length));
+            }
+          } else if (legacy !== "" && legacy !== "/fromcubes") {
+            $("#fc-url-hint")
+              .css("color", "#c00")
+              .text(
+                "Legacy endpoint detected: '" +
+                  legacy +
+                  "'. Set a Sub-path and redeploy.",
+              );
+          }
+        }
+
+        // URL hint
+        function updateHint() {
+          const sp = ($("#node-input-subPath").val() || "").trim();
+          const root = (RED.settings.httpNodeRoot || "/").replace(/\/$/, "");
+          if (sp) {
+            $("#fc-url-hint")
+              .css("color", "")
+              .text(
+                "Page served at: http://<host>:1880" +
+                  root +
+                  "/fromcubes/" +
+                  sp,
+              );
+          } else if (!node.endpoint || node.endpoint.indexOf("/fromcubes/") === 0) {
+            $("#fc-url-hint")
+              .css("color", "")
+              .text("Sub-path required (will be served under /fromcubes/<sub-path>)");
+          }
+        }
+        $("#node-input-subPath").on("input", updateHint);
+        updateHint();
+
+        // Modules editableList (like function node's libs)
+        const libsList = node.libs || [];
+        $("#node-input-libs-container").css("min-height","68px").editableList({
+          addItem: function(container, i, opt) {
+            const lib = opt || {};
+            const row = $('<div/>',{style:"display:flex;gap:8px;align-items:center;"}).appendTo(container);
+            const modInput = $('<input/>',{type:"text",placeholder:"e.g. chart.js/auto@^4.4.0",style:"flex:1;"}).appendTo(row);
+            const varInput = $('<input/>',{type:"text",placeholder:"Import as (e.g. Chart)",style:"width:140px;"}).appendTo(row);
+            modInput.val(lib.module || "");
+            varInput.val(lib.const || "");
+            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",
+            );
+            $("#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();
+          const opts = window.__fcEditorOpts;
+
+          const jsxUri = monaco.Uri.parse(
+            "file:///fc-portal-" + node.id + ".jsx",
+          );
+          console.log("[FC-Monaco] PORTAL: JSX model URI=" + jsxUri.toString());
+          const existingJsx = monaco.editor.getModel(jsxUri);
+          if (existingJsx) {
+            console.log("[FC-Monaco] PORTAL: disposing existing JSX model");
+            existingJsx.dispose();
+          }
+          const 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);
+          if (window.__fcAttachKeybindings)
+            window.__fcAttachKeybindings(editorInstance);
+
+          const headUri = monaco.Uri.parse(
+            "file:///fc-head-" + node.id + ".html",
+          );
+          const existingHead = monaco.editor.getModel(headUri);
+          if (existingHead) existingHead.dispose();
+          const headModel = monaco.editor.createModel(headCode, "html", headUri);
+          headEditorInstance = monaco.editor.create(
+            document.getElementById("fc-head-monaco"),
+            Object.assign({ model: headModel }, opts),
+          );
+          if (window.__fcAttachKeybindings)
+            window.__fcAttachKeybindings(headEditorInstance);
+          console.log("[FC-Monaco] PORTAL: Head editor created");
+
+          // Log markers after a short delay (diagnostics are async)
+          setTimeout(function () {
+            const 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 () {
+          $("<div>Replace current JSX with default starter code?</div>").dialog({
+            title: "Load Default",
+            modal: true,
+            width: 360,
+            buttons: [
+              { text: "Cancel", click: function () { $(this).dialog("close"); } },
+              { text: "Replace", class: "primary", click: function () {
+                if (editorInstance) editorInstance.setValue(STARTER);
+                else $("#fc-fallback").val(STARTER);
+                $(this).dialog("close");
+              }},
+            ],
+            close: function () { $(this).remove(); },
+          });
+        });
+
+        $("#fc-btn-preview").on("click", function () {
+          const sp = ($("#node-input-subPath").val() || "").trim();
+          const root = (RED.settings.httpNodeRoot || "/").replace(/\/$/, "");
+          if (sp) window.open(root + "/fromcubes/" + sp, "_blank");
+        });
+
+        $("#fc-btn-components").on("click", function () {
+          $.getJSON("fromcubes-react/registry", function (reg) {
+            const names = Object.keys(reg).sort();
+            if (!names.length) {
+              RED.notify("No component nodes on canvas.", "warning");
+              return;
+            }
+
+            function extractProps(code) {
+              if (!code) return [];
+              const m = code.match(/function\s+\w+\s*\(\s*\{([^}]*)\}/);
+              if (!m) return [];
+              return m[1].split(",").map(function (s) { return s.trim().split(/\s*=\s*/)[0]; }).filter(Boolean);
+            }
+
+            let html =
+              '<div style="display:flex;flex-direction:column;height:100%;overflow:hidden;">' +
+              '<input type="text" id="fc-comp-search" placeholder="Search..." ' +
+              'style="width:100%;box-sizing:border-box;margin-bottom:6px;padding:5px 8px;border:1px solid rgba(128,128,128,.4);border-radius:3px;' +
+              'background:var(--red-ui-form-input-background-color,#fff);color:var(--red-ui-form-text-color,#333);font-size:12px;flex-shrink:0;" />' +
+              '<div id="fc-comp-list" style="flex:1;overflow-y:auto;">';
+
+            names.forEach(function (n) {
+              const c = reg[n];
+              const props = extractProps(c.code);
+              const detailParts = [];
+              if (props.length) {
+                detailParts.push('<div style="margin:4px 0 0 0;font-size:11px;opacity:.6;">' +
+                  props.map(function (p) {
+                    return '<code style="background:rgba(128,128,128,.15);padding:0 4px;border-radius:2px;margin-right:3px;">' + p + '</code>';
+                  }).join("") + '</div>');
+              }
+              const hasDetail = detailParts.length > 0;
+
+              html +=
+                '<div class="fc-comp-item" data-name="' + n + '" data-search="' + n.toLowerCase() + '" ' +
+                'style="border-bottom:1px solid rgba(128,128,128,.1);">' +
+                '<div style="display:flex;align-items:center;padding:4px 6px;cursor:pointer;" class="fc-comp-row">' +
+                (hasDetail ? '<i class="fa fa-caret-right fc-comp-arrow" style="width:14px;opacity:.4;font-size:12px;transition:transform .15s;"></i>' : '<span style="width:14px;"></span>') +
+                '<span class="fc-comp-name" data-name="' + n + '" style="font-weight:600;font-size:12px;flex:1;">' + n + '</span>' +
+                '</div>' +
+                (hasDetail ? '<div class="fc-comp-detail" style="display:none;padding:0 6px 4px 20px;">' + detailParts.join("") + '</div>' : '') +
+                '</div>';
+            });
+            html += '</div></div>';
+
+            const $dlg = $("<div></div>").html(html).dialog({
+              title: "Components",
+              modal: true,
+              width: 380,
+              buttons: [
+                { text: "Close", click: function () { $(this).dialog("close"); } },
+              ],
+              close: function () { $(this).remove(); },
+            });
+
+            // Search
+            $dlg.find("#fc-comp-search").on("input", function () {
+              const q = $(this).val().toLowerCase();
+              $dlg.find(".fc-comp-item").each(function () {
+                $(this).toggle($(this).data("search").indexOf(q) !== -1);
+              });
+            }).focus();
+
+            // Hover
+            $dlg.on("mouseenter", ".fc-comp-row", function () {
+              $(this).css("background", "rgba(128,128,128,.1)");
+            }).on("mouseleave", ".fc-comp-row", function () {
+              $(this).css("background", "");
+            });
+
+            // Arrow toggle detail
+            $dlg.on("click", ".fc-comp-arrow", function (e) {
+              e.stopPropagation();
+              const $item = $(this).closest(".fc-comp-item");
+              const $detail = $item.find(".fc-comp-detail");
+              const open = $detail.is(":visible");
+              $detail.slideToggle(100);
+              $(this).css("transform", open ? "" : "rotate(90deg)");
+            });
+
+            // Click name: delete selection, insert <Tag></Tag> in one line, cursor between tags
+            $dlg.on("click", ".fc-comp-name", function () {
+              const name = $(this).data("name");
+              const openTag = "<" + name + ">";
+              const closeTag = "</" + name + ">";
+              const text = openTag + closeTag;
+              $dlg.dialog("close");
+              if (editorInstance) {
+                const sel = editorInstance.getSelection();
+                const startLine = sel.startLineNumber;
+                const startCol = sel.startColumn;
+                editorInstance.executeEdits("fc-components", [{
+                  range: sel,
+                  text: text,
+                }]);
+                setTimeout(function () {
+                  editorInstance.setPosition({ lineNumber: startLine, column: startCol + openTag.length });
+                  editorInstance.focus();
+                }, 50);
+              } else {
+                const ta = $("#fc-fallback")[0];
+                const s = ta.selectionStart, e = ta.selectionEnd, v = ta.value;
+                ta.value = v.slice(0, s) + text + v.slice(e);
+                setTimeout(function () {
+                  ta.selectionStart = ta.selectionEnd = s + openTag.length;
+                  ta.focus();
+                }, 50);
+              }
+            });
+          });
+        });
+
+        $("#fc-btn-utilities").on("click", function () {
+          $.getJSON("fromcubes-react/utilities", function (reg) {
+            // Refresh global cache too so completion provider picks up changes
+            if (window.__fcRefreshUtilities) window.__fcRefreshUtilities();
+            const names = Object.keys(reg).sort();
+            if (!names.length) {
+              RED.notify("No utility nodes on canvas.", "warning");
+              return;
+            }
+
+            let html =
+              '<div style="display:flex;flex-direction:column;height:100%;overflow:hidden;">' +
+              '<input type="text" id="fc-util-search" placeholder="Search..." ' +
+              'style="width:100%;box-sizing:border-box;margin-bottom:6px;padding:5px 8px;border:1px solid rgba(128,128,128,.4);border-radius:3px;' +
+              'background:var(--red-ui-form-input-background-color,#fff);color:var(--red-ui-form-text-color,#333);font-size:12px;flex-shrink:0;" />' +
+              '<div id="fc-util-list" style="flex:1;overflow-y:auto;">';
+
+            names.forEach(function (n) {
+              const u = reg[n];
+              const syms = u.symbols || [];
+              const errBadge = u.error
+                ? '<span style="margin-left:6px;font-size:10px;color:#ef4444;" title="' +
+                  String(u.error).replace(/"/g, "&quot;") + '">syntax error</span>'
+                : "";
+              const symBadges = syms.map(function (s) {
+                return '<span class="fc-util-sym" data-sym="' + s +
+                  '" style="display:inline-block;background:rgba(251,191,36,.15);border:1px solid rgba(251,191,36,.35);' +
+                  'padding:1px 6px;border-radius:3px;margin:2px 4px 2px 0;font-size:11px;font-family:monospace;cursor:pointer;">' +
+                  s + '</span>';
+              }).join("");
+              const detail = syms.length
+                ? '<div style="margin:4px 0 0 0;">' + symBadges + '</div>'
+                : '<div style="margin:4px 0 0 0;font-size:11px;opacity:.5;">(no top-level symbols detected)</div>';
+              const searchKey = (n + " " + syms.join(" ")).toLowerCase();
+
+              html +=
+                '<div class="fc-util-item" data-name="' + n + '" data-search="' + searchKey + '" ' +
+                'style="border-bottom:1px solid rgba(128,128,128,.1);">' +
+                '<div style="display:flex;align-items:center;padding:4px 6px;cursor:pointer;" class="fc-util-row">' +
+                '<i class="fa fa-caret-right fc-util-arrow" style="width:14px;opacity:.4;font-size:12px;transition:transform .15s;"></i>' +
+                '<i class="fa fa-wrench" style="width:14px;color:#fbbf24;font-size:11px;"></i>' +
+                '<span style="font-weight:600;font-size:12px;flex:1;margin-left:4px;">' + n + '</span>' +
+                errBadge +
+                '</div>' +
+                '<div class="fc-util-detail" style="display:none;padding:0 6px 6px 32px;">' + detail + '</div>' +
+                '</div>';
+            });
+            html += '</div></div>';
+
+            const $dlg = $("<div></div>").html(html).dialog({
+              title: "Utilities",
+              modal: true,
+              width: 420,
+              buttons: [
+                { text: "Close", click: function () { $(this).dialog("close"); } },
+              ],
+              close: function () { $(this).remove(); },
+            });
+
+            $dlg.find("#fc-util-search").on("input", function () {
+              const q = $(this).val().toLowerCase();
+              $dlg.find(".fc-util-item").each(function () {
+                $(this).toggle($(this).data("search").indexOf(q) !== -1);
+              });
+            }).focus();
+
+            $dlg.on("mouseenter", ".fc-util-row", function () {
+              $(this).css("background", "rgba(251,191,36,.08)");
+            }).on("mouseleave", ".fc-util-row", function () {
+              $(this).css("background", "");
+            });
+
+            $dlg.on("click", ".fc-util-row", function (e) {
+              if ($(e.target).closest(".fc-util-sym").length) return;
+              const $item = $(this).closest(".fc-util-item");
+              const $detail = $item.find(".fc-util-detail");
+              const $arrow = $item.find(".fc-util-arrow");
+              const open = $detail.is(":visible");
+              $detail.slideToggle(100);
+              $arrow.css("transform", open ? "" : "rotate(90deg)");
+            });
+
+            // Click symbol → insert bare identifier at cursor
+            $dlg.on("click", ".fc-util-sym", function (e) {
+              e.stopPropagation();
+              const sym = $(this).data("sym");
+              $dlg.dialog("close");
+              if (editorInstance) {
+                const sel = editorInstance.getSelection();
+                const startLine = sel.startLineNumber;
+                const startCol = sel.startColumn;
+                editorInstance.executeEdits("fc-utilities", [{
+                  range: sel,
+                  text: sym,
+                }]);
+                setTimeout(function () {
+                  editorInstance.setPosition({ lineNumber: startLine, column: startCol + sym.length });
+                  editorInstance.focus();
+                }, 50);
+              } else {
+                const ta = $("#fc-fallback")[0];
+                const s = ta.selectionStart, en = ta.selectionEnd, v = ta.value;
+                ta.value = v.slice(0, s) + sym + v.slice(en);
+                setTimeout(function () {
+                  ta.selectionStart = ta.selectionEnd = s + sym.length;
+                  ta.focus();
+                }, 50);
+              }
+            });
+          });
+        });
+      },
+
+      /**
+       * Editor → flow. Normalises `subPath` (trim), clears the legacy
+       * `endpoint` field, collects `libs` from the editableList widget,
+       * writes both Monaco editors back to hidden inputs + node props,
+       * then disposes both editors.
+       * @returns {void}
+       */
+      oneditsave: function () {
+        console.log("[FC-Monaco] PORTAL oneditsave");
+
+        // Clear legacy endpoint field + normalize subPath
+        $("#node-input-endpoint").val("");
+        this.endpoint = "";
+        this.subPath = ($("#node-input-subPath").val() || "").trim();
+
+        // Collect libs from editableList
+        const libs = [];
+        const items = $("#node-input-libs-container").editableList("items");
+        items.each(function() {
+          const mod = $(this).data("mod").val().trim();
+          const v = $(this).data("var").val().trim();
+          if (mod) {
+            libs.push({ module: mod, var: v });
+          }
+        });
+        this.libs = libs;
+
+        const code = editorInstance
+          ? editorInstance.getValue()
+          : $("#fc-fallback").val();
+        $("#node-input-componentCode").val(code);
+        this.componentCode = code;
+
+        const 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");
+        }
+      },
+
+      /**
+       * Discard both Monaco editors without writing back to the node.
+       * Identical dispose pattern to oneditsave so we never leak Monaco
+       * graphs even if the user spams Edit / Cancel rapidly.
+       * @returns {void}
+       */
+      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");
+        }
+      },
+
+      /**
+       * Dialog resize → compute available editor height by subtracting
+       * the heights of non-tab form rows + tab strip + 30 px padding,
+       * then re-layout both Monaco editors. Falls back to 200 px minimum.
+       * @param {{height: number, width: number}} size
+       * @returns {void}
+       */
+      oneditresize: function (size) {
+        const tabsH = $("#fc-tabs").outerHeight(true) || 0;
+        const rows = $(
+          "#dialog-form>div:not(#fc-tabs-content):not(:has(#fc-tabs))",
+        );
+        let 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">
+  <h3>Quick Reference</h3>
+  <ul>
+    <li><code>useNodeRed()</code> &rarr; <code>{ data, send, user, portalClient }</code></li>
+    <li>Components from <code>fc-portal-component</code> nodes are auto-imported</li>
+    <li>Must export <code>&lt;App /&gt;</code></li>
+    <li>JSX is transpiled server-side at deploy</li>
+  </ul>
+
+  <p>
+    Renders a React 19 application on a configurable HTTP endpoint with live
+    WebSocket data binding. JSX is transpiled <strong>server-side at deploy
+    time</strong> using esbuild — browsers receive pre-compiled JS with zero
+    runtime compilation. Tailwind CSS 4 utility classes are generated
+    server-side and served as static CSS.
+  </p>
+
+  <h3>Inputs</h3>
+  <p>
+    <code>msg.payload</code> is pushed via WebSocket. Set <code>msg._client</code>
+    to target specific clients, or omit it to broadcast to all.
+  </p>
+  <pre>
+const { data, send, user, portalClient } = useNodeRed();
+// data         = last msg.payload (reactive)
+// send(payload, topic?) — emit msg on output wire
+// user         = portal auth data or null
+// portalClient = unique session/tab ID (assigned by server)</pre
+  >
+
+  <h3>Outputs</h3>
+  <p>
+    <code>send(payload, topic?)</code> emits a <code>msg</code> on the node's
+    output wire via WebSocket.
+  </p>
+
+  <h3>npm Packages</h3>
+  <p>
+    Add npm packages in the <strong>Modules</strong> list (e.g.
+    <code>chart.js/auto@^4.4.0</code>, <code>d3</code>, <code>three</code>).
+    Node-RED auto-installs them at deploy time. All packages are bundled with
+    React into a single vendor IIFE via esbuild, cached by hash of installed
+    versions. Use them in JSX via standard imports.
+  </p>
+
+  <h3>Deploy behavior</h3>
+  <ul>
+    <li>
+      Each deploy re-transpiles JSX via esbuild and rebuilds Tailwind CSS
+      (both cached by content hash — unchanged code is instant)
+    </li>
+    <li>
+      Vendor bundle (React + npm packages) rebuilt only when package versions
+      change
+    </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 — no imports needed.
+  </p>
+
+  <h3>Portal Auth</h3>
+  <p>
+    When enabled in the Auth tab, reads <code>X-Portal-*</code> headers set by
+    a reverse proxy (e.g. Nginx) and exposes user data:
+  </p>
+  <ul>
+    <li><code>useNodeRed()</code> returns <code>{ data, send, user, portalClient }</code></li>
+    <li>
+      All WebSocket messages include <code>msg._client</code> with
+      <code>{ portalClient, ...userFields }</code>
+    </li>
+    <li>
+      To target a specific tab: keep <code>msg._client</code> (or set
+      <code>msg._client = { portalClient: "..." }</code>)
+    </li>
+    <li>
+      To target all tabs of a user: set
+      <code>msg._client = { userId: "..." }</code> (no portalClient)
+    </li>
+    <li>
+      To target every authenticated session (skips anonymous):
+      <code>msg._client = { authenticated: true }</code>
+    </li>
+    <li>
+      To broadcast to all: remove <code>msg._client</code>. With
+      <b>Authenticated-only delivery</b> enabled this defaults to the
+      authenticated sessions instead; force a true broadcast with
+      <code>msg._client = { authenticated: false }</code>
+    </li>
+  </ul>
+
+  <h3>Custom Head HTML</h3>
+  <p>
+    Inject CDN links, fonts, or extra stylesheets into
+    <code>&lt;head&gt;</code>. This is raw trusted-author HTML; scripts and
+    event handlers run in the public portal page. Example:
+  </p>
+  <pre>
+&lt;link href="https://fonts.googleapis.com/css2?family=Inter&amp;display=swap" rel="stylesheet"&gt;</pre
+  >
+
+  <h3>WebSocket Status</h3>
+  <p>
+    Optional <em>fromcubes</em> badge in the bottom-right corner showing
+    connection state. Enable via the <strong>Show WebSocket status
+    indicator</strong> checkbox (off by default).
+  </p>
+</script>
+