@nodegx/preview 0.2.7 → 0.2.8

package/dist/noodl-preview.cjs

@@ -13786,7 +13786,7 @@ var require_common2 = __commonJS({
     exports2.ownProp = ownProp;
     exports2.makeAbs = makeAbs;
     exports2.finish = finish2;
-    exports2.mark = mark;
+    exports2.mark = mark2;
     exports2.isIgnored = isIgnored;
     exports2.childrenIgnored = childrenIgnored;
     function ownProp(obj, field) {
@@ -13922,7 +13922,7 @@ var require_common2 = __commonJS({
         });
       self2.found = all;
     }
-    function mark(self2, p) {
+    function mark2(self2, p) {
       var abs = makeAbs(self2, p);
       var c = self2.cache[abs];
       var m = p;
@@ -19380,10 +19380,10 @@ var require_nodescope = __commonJS({
       } else {
         const parameters = nodeModel.parameters;
         var inputNames = Object.keys(parameters);
-        const RUN_ON_CHANGE_PREFIX4 = "runOnChange-";
+        const RUN_ON_CHANGE_PREFIX5 = "runOnChange-";
         const metadata = this.context.nodeRegister.hasNode(node.name) ? this.context.nodeRegister.getNodeMetadata(node.name) : void 0;
         const priorityOf = function(name2) {
-          if (name2.indexOf(RUN_ON_CHANGE_PREFIX4) === 0) return Number.MAX_SAFE_INTEGER;
+          if (name2.indexOf(RUN_ON_CHANGE_PREFIX5) === 0) return Number.MAX_SAFE_INTEGER;
           const input2 = metadata ? metadata.inputs[name2] : void 0;
           return input2 ? input2.inputPriority : 0;
         };
@@ -21345,11 +21345,11 @@ var require_editorconnection = __commonJS({
       });
     };
     var serviceRequests = {};
-    EditorConnection.prototype.sendServiceRequest = function(request, callback) {
-      request.token = guid4();
-      request.clientId = this.clientId;
-      serviceRequests[request.token] = callback;
-      this.send(request);
+    EditorConnection.prototype.sendServiceRequest = function(request2, callback) {
+      request2.token = guid4();
+      request2.clientId = this.clientId;
+      serviceRequests[request2.token] = callback;
+      this.send(request2);
     };
     EditorConnection.prototype.close = function() {
       this.reconnectOnClose = false;
@@ -23328,7 +23328,10 @@ var require_nodedefinition = __commonJS({
             node.registerOutput(name2, {
               getter: function() {
                 return void 0;
-              }
+              },
+              onFirstConnectionAdded: output.onFirstConnectionAdded,
+              onLastConnectionRemoved: output.onLastConnectionRemoved
+              // a signal keeps its wire hooks (P121-TWO003)
             });
           } else {
             node.registerOutput(name2, output);
@@ -24781,12 +24784,12 @@ var require_restnode = __commonJS({
             this.scheduleAfterInputsHaveUpdated(this.doFetch.bind(this));
           }
         },
-        doResponse: function(status, response, request) {
+        doResponse: function(status, response, request2) {
           if (this._internal.responseFunc) {
             this._internal.responseFunc.apply(this._internal.self, [
               this._internal.inputValues,
               this._internal.outputValuesProxy,
-              { status, content: response, request }
+              { status, content: response, request: request2 }
             ]);
           }
           this._internal.inspectData = { status, content: response };
@@ -24796,11 +24799,11 @@ var require_restnode = __commonJS({
             this.sendSignalOnOutput("failure");
           }
         },
-        doExternalFetch: function(request) {
-          let url = request.resource;
-          if (Object.keys(request.parameters).length > 0) {
-            const parameters = Object.keys(request.parameters).map(function(p) {
-              return p + "=" + encodeURIComponent(request.parameters[p]);
+        doExternalFetch: function(request2) {
+          let url = request2.resource;
+          if (Object.keys(request2.parameters).length > 0) {
+            const parameters = Object.keys(request2.parameters).map(function(p) {
+              return p + "=" + encodeURIComponent(request2.parameters[p]);
             });
             url += "?" + parameters.join("&");
           }
@@ -24808,9 +24811,9 @@ var require_restnode = __commonJS({
             const _this = this;
             const xhr = new window.XMLHttpRequest();
             this._xhr = xhr;
-            xhr.open(request.method, url, true);
-            for (const header in request.headers) {
-              xhr.setRequestHeader(header, request.headers[header]);
+            xhr.open(request2.method, url, true);
+            for (const header in request2.headers) {
+              xhr.setRequestHeader(header, request2.headers[header]);
             }
             xhr.onreadystatechange = function() {
               let sentResponse = false;
@@ -24822,11 +24825,11 @@ var require_restnode = __commonJS({
                 if (responseType) {
                   responseType = responseType.toLowerCase();
                   const responseData = responseType.indexOf("json") !== -1 ? JSON.parse(rawResponse) : rawResponse;
-                  _this.doResponse(statusCode, responseData, request);
+                  _this.doResponse(statusCode, responseData, request2);
                   sentResponse = true;
                 }
                 if (sentResponse === false) {
-                  _this.doResponse(statusCode, rawResponse, request);
+                  _this.doResponse(statusCode, rawResponse, request2);
                 }
               }
             };
@@ -24838,30 +24841,30 @@ var require_restnode = __commonJS({
               delete this._xhr;
               _this.sendSignalOnOutput("canceled");
             };
-            if (request.content) {
+            if (request2.content) {
               xhr.setRequestHeader("Content-Type", "application/json");
-              xhr.send(JSON.stringify(request.content));
+              xhr.send(JSON.stringify(request2.content));
             } else {
               xhr.send();
             }
           } else {
             const headers = Object.assign(
               {},
-              request.headers,
-              request.content ? {
+              request2.headers,
+              request2.content ? {
                 "Content-Type": "application/json"
               } : {}
             );
             fetch(url, {
-              method: request.method,
+              method: request2.method,
               headers,
-              body: request.content ? JSON.stringify(request.content) : void 0
+              body: request2.content ? JSON.stringify(request2.content) : void 0
             }).then((response) => {
               const responseType = response.headers.get("content-type");
               if (responseType) {
                 if (responseType.indexOf("/json") !== -1) {
                   response.json().then((json) => {
-                    this.doResponse(response.status, json, request);
+                    this.doResponse(response.status, json, request2);
                   });
                 } else {
                   if (this.context.editorConnection) {
@@ -24877,7 +24880,7 @@ var require_restnode = __commonJS({
                 }
               } else {
                 response.text().then((raw) => {
-                  this.doResponse(response.status, raw, request);
+                  this.doResponse(response.status, raw, request2);
                 });
               }
             }).catch((e) => {
@@ -24895,7 +24898,7 @@ var require_restnode = __commonJS({
               resource = resource.replace("{" + key + "}", this._internal.inputValues[key]);
             }
           }
-          const request = {
+          const request2 = {
             resource,
             headers: {},
             method: this._internal.method !== void 0 ? this._internal.method : "GET",
@@ -24905,10 +24908,10 @@ var require_restnode = __commonJS({
             this._internal.requestFunc.apply(this._internal.self, [
               this._internal.inputValues,
               this._internal.outputValuesProxy,
-              request
+              request2
             ]);
           }
-          this.doExternalFetch(request);
+          this.doExternalFetch(request2);
         },
         cancelFetch: function() {
           if (typeof _noodl_cloud_runtime_version === "undefined") {
@@ -27291,6 +27294,7 @@ var require_simplejavascript = __commonJS({
       return names;
     }
     function publishHeldWrites(node) {
+      sendHeldChanges(node);
       node._internal.heldWrites.forEach((prop) => {
         node.registerOutputIfNeeded("out-" + prop);
         node.flagOutputDirty("out-" + prop);
@@ -27334,7 +27338,7 @@ var require_simplejavascript = __commonJS({
             if (value2 !== this._internal.outputValues[prop]) {
               this.registerOutputIfNeeded("out-" + prop);
               this._internal.outputValues[prop] = value2;
-              this.flagOutputDirty("out-" + prop);
+              holdChange(this, prop);
               this._internal.heldWrites.delete(prop);
             } else {
               this._internal.heldWrites.add(prop);
@@ -27513,7 +27517,7 @@ var require_simplejavascript = __commonJS({
           });
         },
         runScript: async function() {
-          const func = this._internal.func;
+          const func = sendingChangesAfterTheSyncPart(this, this._internal.func);
           const tokens = this._internal.pendingRunOutcomes || [];
           this._internal.pendingRunOutcomes = void 0;
           if (func === void 0) {
@@ -27955,6 +27959,32 @@ var require_simplejavascript = __commonJS({
         });
       }
     };
+    function holdChange(node, prop) {
+      const internal2 = node._internal;
+      if (!internal2.heldChanges) internal2.heldChanges = /* @__PURE__ */ new Set();
+      internal2.heldChanges.add(prop);
+      if (internal2.heldChangesQueued) return;
+      internal2.heldChangesQueued = true;
+      Promise.resolve().then(() => sendHeldChanges(node));
+    }
+    function sendHeldChanges(node) {
+      const internal2 = node._internal;
+      internal2.heldChangesQueued = false;
+      const held = internal2.heldChanges;
+      if (!held || held.size === 0 || node._deleted) return;
+      internal2.heldChanges = /* @__PURE__ */ new Set();
+      held.forEach((prop) => node.flagOutputDirty("out-" + prop));
+    }
+    function sendingChangesAfterTheSyncPart(node, func) {
+      if (func === void 0) return void 0;
+      return function(...args) {
+        try {
+          return func.apply(this, args);
+        } finally {
+          sendHeldChanges(node);
+        }
+      };
+    }
     module2.exports = SimpleJavascriptNodeModule;
   }
 });
@@ -29891,22 +29921,22 @@ function connectionKey(dialect, base, token, where2) {
   const filter2 = filterKey(where2);
   return dialect + " " + base + " " + token + (filter2 ? " #" + filter2 : "");
 }
-function connectionFor(request) {
-  const host = request.host || DEFAULT_HOST2;
+function connectionFor(request2) {
+  const host = request2.host || DEFAULT_HOST2;
   let pool = POOLS.get(host);
   if (!pool) {
     pool = /* @__PURE__ */ new Map();
     POOLS.set(host, pool);
   }
-  const key = connectionKey(request.dialect.name, request.base, request.token, request.where);
+  const key = connectionKey(request2.dialect.name, request2.base, request2.token, request2.where);
   const existing = pool.get(key);
   if (existing) return existing;
   const created = new SharedSseConnection(
-    request.dialect,
-    request.base,
-    request.token,
-    request.EventSourceImpl,
-    request.fetchImpl,
+    request2.dialect,
+    request2.base,
+    request2.token,
+    request2.EventSourceImpl,
+    request2.fetchImpl,
     () => {
       const current = POOLS.get(host);
       if (current && current.get(key) === created) current.delete(key);
@@ -32970,8 +33000,8 @@ var init_probes = __esm({
         const cacheKey = `${backendId}\0${key}`;
         const existing = this._inFlight.get(cacheKey);
         if (existing) return existing;
-        const request = { key, probe: capability.probe, url: url.replace(/\/+$/, ""), type };
-        const pending = this._runner(request).then((outcome) => {
+        const request2 = { key, probe: capability.probe, url: url.replace(/\/+$/, ""), type };
+        const pending = this._runner(request2).then((outcome) => {
           this._record(backendId, key, outcome);
           return outcome;
         }).catch(() => {
@@ -41514,8 +41544,8 @@ var require_dbmodelcrudbase = __commonJS({
         const store = CloudStore7.forBackend(modelScope, backendId);
         return store ? store.currentUserId() : void 0;
       } else {
-        const request = modelScope.get("Request");
-        return request.UserId;
+        const request2 = modelScope.get("Request");
+        return request2.UserId;
       }
     }
     function _addAccessControl(def2) {
@@ -69189,6 +69219,133 @@ var init_tooltips = __esm({
   }
 });
 
+// ../noodl-viewer-react/src/keyboard-click.ts
+function holdsPressable(el) {
+  return el.querySelector(PRESSABLE_INSIDE) !== null;
+}
+function clickIsWired(node) {
+  if (!node.hasOutput("onClick")) return false;
+  return reachesSomething(node.getOutput("onClick"), 0);
+}
+function reachesSomething(output, depth) {
+  if (!output.hasConnections()) return false;
+  if (!Array.isArray(output.connections)) return true;
+  return output.connections.some((c) => !goesNowhere(c, depth));
+}
+function goesNowhere(connection, depth) {
+  const target = connection.node;
+  if (!target || target.name !== "Component Outputs" || typeof connection.inputPortName !== "string") return false;
+  const owner = target.nodeScope?.componentOwner;
+  if (!owner || depth > 16 || owner._internal?.creatorCallbacks) return false;
+  if (typeof owner.hasOutput !== "function" || typeof owner.getOutput !== "function") return false;
+  if (!owner.hasOutput(connection.inputPortName)) return true;
+  return !reachesSomething(owner.getOutput(connection.inputPortName), depth + 1);
+}
+function isNativelyInteractive(el) {
+  const tag = el.tagName;
+  if (tag === "BUTTON" || tag === "INPUT" || tag === "SELECT" || tag === "TEXTAREA" || tag === "SUMMARY") return true;
+  if ((tag === "A" || tag === "AREA") && el.hasAttribute("href")) return true;
+  if ((tag === "VIDEO" || tag === "AUDIO") && el.hasAttribute("controls")) return true;
+  return el.isContentEditable === true;
+}
+function isSpace(e) {
+  return e.key === " " || e.key === "Spacebar";
+}
+function isOwnKey(el, e) {
+  return e.target === el && !e.defaultPrevented && !e.altKey && !e.ctrlKey && !e.metaKey && !e.isComposing;
+}
+function mark(el) {
+  let spaceArmed = false;
+  const onKeyDown2 = (e) => {
+    if (!isOwnKey(el, e)) return;
+    if (e.key === "Enter") {
+      e.preventDefault();
+      if (!e.repeat) el.click();
+    } else if (isSpace(e)) {
+      e.preventDefault();
+      if (!e.repeat) spaceArmed = true;
+    }
+  };
+  const onKeyUp = (e) => {
+    if (!isSpace(e)) return;
+    const armed = spaceArmed;
+    spaceArmed = false;
+    if (armed && e.target === el && !e.defaultPrevented) el.click();
+  };
+  const m = { el, added: [], onKeyDown: onKeyDown2, onKeyUp, observer: null };
+  if (isNativelyInteractive(el)) return m;
+  refresh(m);
+  if (typeof MutationObserver !== "undefined") {
+    m.observer = new MutationObserver(() => refresh(m));
+    m.observer.observe(el, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["tabindex", "contenteditable", "href", "controls", "type"]
+    });
+  }
+  return m;
+}
+function refresh(m) {
+  const { el } = m;
+  const want = !holdsPressable(el);
+  if (want && !m.added.length) {
+    if (!el.hasAttribute("tabindex")) {
+      el.setAttribute("tabindex", "0");
+      m.added.push("tabindex");
+    }
+    if (!el.hasAttribute("role")) {
+      el.setAttribute("role", "button");
+      m.added.push("role");
+    }
+    if (m.added.length) {
+      el.setAttribute(KEYBOARD_CLICK_ATTRIBUTE, "");
+      m.added.push(KEYBOARD_CLICK_ATTRIBUTE);
+      el.addEventListener("keydown", m.onKeyDown);
+      el.addEventListener("keyup", m.onKeyUp);
+    }
+  } else if (!want && m.added.length) {
+    giveBack(m);
+  }
+}
+function giveBack(m) {
+  for (const name2 of m.added) m.el.removeAttribute(name2);
+  m.added = [];
+  m.el.removeEventListener("keydown", m.onKeyDown);
+  m.el.removeEventListener("keyup", m.onKeyUp);
+}
+function unmark(m) {
+  m.observer?.disconnect();
+  giveBack(m);
+}
+function syncKeyboardClick(node) {
+  const el = typeof node.getDOMElement === "function" ? node.getDOMElement() : null;
+  const want = el && clickIsWired(node) ? el : null;
+  const was = marked.get(node);
+  if (was && was.el === want) return;
+  if (was) {
+    unmark(was);
+    marked.delete(node);
+  }
+  if (want) marked.set(node, mark(want));
+}
+var KEYBOARD_CLICK_ATTRIBUTE, PRESSABLE_INSIDE, marked, KEYBOARD_CLICK_HOOKS;
+var init_keyboard_click = __esm({
+  "../noodl-viewer-react/src/keyboard-click.ts"() {
+    KEYBOARD_CLICK_ATTRIBUTE = "data-ndl-keyboard-click";
+    PRESSABLE_INSIDE = 'button, input:not([type="hidden"]), select, textarea, summary, a[href], area[href], video[controls], audio[controls], [contenteditable=""], [contenteditable="true"], [tabindex]:not([tabindex="-1"])';
+    marked = /* @__PURE__ */ new WeakMap();
+    KEYBOARD_CLICK_HOOKS = {
+      onFirstConnectionAdded() {
+        syncKeyboardClick(this);
+      },
+      onLastConnectionRemoved() {
+        syncKeyboardClick(this);
+      }
+    };
+  }
+});
+
 // ../noodl-viewer-react/src/node-shared-port-definitions.ts
 function humanCorner(suffix) {
   return suffix.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
@@ -69456,6 +69613,7 @@ var init_node_shared_port_definitions = __esm({
     init_fontloader();
     init_media_source();
     init_tooltips();
+    init_keyboard_click();
     SIZE_MODES = ["explicit", "contentWidth", "contentHeight", "contentSize"];
     node_shared_port_definitions_default = {
       addInputProps: addInputProps2,
@@ -69963,7 +70121,9 @@ var init_node_shared_port_definitions = __esm({
             description: "Fires when this element is clicked or tapped",
             group: "Events",
             type: "signal",
-            propPath: "pointer"
+            propPath: "pointer",
+            ...KEYBOARD_CLICK_HOOKS
+            // P121-TWO003-GROUPKEYBOARD: wired, the element is a button to Tab and a screen reader
           },
           pointerDown: {
             displayName: "Pointer Down",
@@ -73684,6 +73844,7 @@ function createNodeFromReactComponent(def2) {
         }
         if (element) syncDataAttributesOnElement(this);
         if (element) elementChanged(this, element);
+        syncKeyboardClick(this);
       },
       /**
        * NDA-012 (Visual) check A3 — run an imperative action on the inner React component,
@@ -74110,6 +74271,7 @@ var init_react_component_node = __esm({
     init_mergedeep();
     init_node_shared_port_definitions();
     init_node_transitions();
+    init_keyboard_click();
     ICON_SOURCE_DIAGNOSTIC = "visual/icon-source-not-an-icon";
     DATA_ATTRIBUTE_NAME_PATTERN = "^data-[a-z0-9][a-z0-9._-]*$";
     DATA_ATTRIBUTE_NAME = new RegExp(DATA_ATTRIBUTE_NAME_PATTERN);
@@ -80880,6 +81042,38 @@ function _typeName(t) {
   if (typeof t === "object") return t.name;
   else return t;
 }
+function isInsideRow(node, row) {
+  if (node === row) return true;
+  let owner = (node.parentNodeScope || node.nodeScope)?.componentOwner;
+  for (let depth = 0; owner && depth < 64; depth++) {
+    if (owner === row) return true;
+    const next = (owner.parentNodeScope || owner.nodeScope)?.componentOwner;
+    if (next === owner) return false;
+    owner = next;
+  }
+  return false;
+}
+function settleRow(context, row) {
+  const self2 = row;
+  for (let pass = 0; pass < 10; pass++) {
+    const dirty = context._dirtyNodes;
+    if (!Array.isArray(dirty)) return;
+    const mine = [];
+    for (let i2 = 0; i2 < dirty.length; i2++) {
+      const node = dirty[i2];
+      if (node && node._dirty && !node._deleted && mine.indexOf(node) === -1 && isInsideRow(node, self2))
+        mine.push(node);
+    }
+    if (mine.length === 0) return;
+    for (let i2 = 0; i2 < mine.length; i2++) {
+      try {
+        mine[i2].update();
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }
+}
 var import_react16, import_runtime4, import_collection, import_model5, ITEMS_DIAGNOSTIC, defaultDynamicScript, ForEachDefinition, defaultMapCode, ForEachModule, foreach_default;
 var init_foreach = __esm({
   "../noodl-viewer-react/src/nodes/std-library/data/foreach.tsx"() {
@@ -81253,6 +81447,7 @@ var init_foreach = __esm({
               }
             }
           };
+          settleRow(this.context, itemNode);
           const forEachActions = itemNode.nodeScope.getNodesWithType("For Each Actions");
           for (let j = 0; j < forEachActions.length; j++) {
             forEachActions[j].signalAdded();
@@ -90070,10 +90265,16 @@ function Text(props) {
       ...pointerProps(props),
       style: style2
     },
-    renderableText(props.text)
+    style2.textOverflow === "ellipsis" ? (
+      // P18-S112-FLEXELLIPSIS — the Text is `display: flex` (its default CSS, which Text Vertical Align's `alignItems`
+      // needs), so its words were an anonymous flex item and `text-overflow` on the element drew no "…": Ellipsis
+      // looked the same as Clip. The words go in a block of their own that may shrink to the box and draws the "…";
+      // the element keeps its flex, so both alignments still place them.
+      /* @__PURE__ */ import_react22.default.createElement("span", { style: { ...ELLIPSIS_LINE, overflow: style2.overflow } }, renderableText(props.text))
+    ) : renderableText(props.text)
   );
 }
-var import_react22;
+var import_react22, ELLIPSIS_LINE;
 var init_Text = __esm({
   "../noodl-viewer-react/src/components/visual/Text/Text.tsx"() {
     import_react22 = __toESM(require_react());
@@ -90081,6 +90282,7 @@ var init_Text = __esm({
     init_layout();
     init_pointerlisteners();
     init_noodl_root_ref();
+    ELLIPSIS_LINE = { minWidth: 0, textOverflow: "ellipsis", whiteSpace: "nowrap" };
   }
 });
 
@@ -90454,7 +90656,6 @@ var init_Video = __esm({
             ...videoProps,
             playsInline: true,
             src,
-            ...pointerProps(this.props),
             ref: (video) => {
               this.video = video;
               this.props.innerRef(video);
@@ -90473,7 +90674,7 @@ var init_Video = __esm({
         this.canPlay = false;
       }
       setSourceObject(src) {
-        if (this.video.srcObject !== src) {
+        if (this.video && this.video.srcObject !== src) {
           this.video.srcObject = src;
           this.canPlay = false;
         }
@@ -90579,6 +90780,7 @@ var init_Video = __esm({
           CachedVideo,
           {
             ...props.dom,
+            ...pointerProps(this.props),
             className: withDefaultsClass(props.className, defaultsClass),
             style: style2,
             innerRef: (video) => {
@@ -97687,6 +97889,7 @@ var init_parentcomponentobject = __esm({
        */
       nodeScopeDidInitialize() {
         this.context.scheduleAfterUpdate(() => {
+          if (this._deleted) return;
           this._internal.resolutionIsLoud = true;
           this.onComponentStateNodesChanged();
         });
@@ -102063,7 +102266,7 @@ var init_signinwith = __esm({
           const tokens = [this.beginOutcome()];
           if (state2.succeeded) {
             this._internal.notice = state2.notice;
-            this._internal.error = void 0;
+            this._internal.error = "";
             this.flagOutputDirty("notice");
             this.flagOutputDirty("error");
             reportOutcomes(this, tokens, "done");
@@ -114719,7 +114922,7 @@ var require_package = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "@nodegx/preview",
-      version: "0.2.7",
+      version: "0.2.8",
       description: "Standalone live-preview harness: renders a NodeGX (OpenNoodl) v2 project in a browser with no editor process, and reloads it when the files on disk change.",
       license: "GPL-3.0-only",
       homepage: "https://nodegx.io",
@@ -164665,7 +164868,7 @@ var node_catalog_default = {
           "always: the size it holds now, a bare number read in the unit it held; drawn at the next paint"
         ],
         visible: [
-          "always: shown or hidden at the next paint, its space kept; hidden, a Focus does not reach it"
+          "always: shown or hidden at once, its space kept; hidden, a Focus does not reach it"
         ]
       },
       warnings: {
@@ -166850,7 +167053,7 @@ var node_catalog_default = {
           "always: the page, or the scrolling Group holding it, scrolls until the box can be seen"
         ],
         visible: [
-          "always: shown or hidden at the next paint, its space kept; hidden, a Focus does not reach it"
+          "always: shown or hidden at once, its space kept; hidden, a Focus does not reach it"
         ]
       },
       warnings: {
@@ -169462,7 +169665,7 @@ var node_catalog_default = {
           "always: the size it holds now, a bare number read in the unit it held; drawn at the next paint"
         ],
         visible: [
-          "always: shown or hidden at the next paint, its space kept; hidden, a Focus does not reach it"
+          "always: shown or hidden at once, its space kept; hidden, a Focus does not reach it"
         ]
       },
       warnings: {
@@ -171644,7 +171847,7 @@ var node_catalog_default = {
           "always: the page, or the scrolling Group holding it, scrolls until the button can be seen"
         ],
         visible: [
-          "always: shown or hidden at the next paint, its space kept; hidden, it takes no click and a Focus does not reach it"
+          "always: shown or hidden at once, its space kept; hidden, it takes no click and a Focus does not reach it"
         ]
       },
       warnings: {
@@ -174049,7 +174252,7 @@ var node_catalog_default = {
           "always: the size it holds now, a bare number read in the unit it held; drawn at the next paint"
         ],
         visible: [
-          "always: shown or hidden at the next paint, its space kept; hidden, a Focus does not reach it"
+          "always: shown or hidden at once, its space kept; hidden, a Focus does not reach it"
         ]
       },
       warnings: {
@@ -176919,7 +177122,7 @@ var node_catalog_default = {
           "always: the size it holds now, a bare number read in the unit it held; drawn at the next paint"
         ],
         visible: [
-          "always: shown or hidden at the next paint, its space kept; hidden, a Focus does not reach it"
+          "always: shown or hidden at once, its space kept; hidden, a Focus does not reach it"
         ],
         opacity: [
           "always: how see-through it is; at exactly 0 it takes no pointer, and an act goes to what is behind it"
@@ -181761,7 +181964,7 @@ var node_catalog_default = {
           },
           isSignal: false,
           default: false,
-          description: "Whether a request with no valid session token is allowed to run this function at all"
+          description: "Whether a request with no valid session token is allowed to run this function at all. A run the app starts itself \u2014 a schedule, a row change, a run from Studio \u2014 is always allowed and sees nobody signed in; a webhook is a request like any other"
         },
         {
           name: "params",
@@ -183818,14 +184021,14 @@ var TOKEN_COOKIE = "nodegx_token";
 function mintToken() {
   return (0, import_node_crypto.randomBytes)(32).toString("hex");
 }
-function resolveAccess(request = {}) {
-  const shared = request.share === true;
+function resolveAccess(request2 = {}) {
+  const shared = request2.share === true;
   return {
-    host: shared ? request.host || ALL_INTERFACES : LOOPBACK,
+    host: shared ? request2.host || ALL_INTERFACES : LOOPBACK,
     shared,
     // A shared server always has a token. An unshared one still gets one, so that turning
     // sharing on later cannot find itself without a credential and invent a weaker path.
-    token: request.token || mintToken()
+    token: request2.token || mintToken()
   };
 }
 function tokenMatches(candidate, token) {
@@ -183841,15 +184044,15 @@ function isLoopbackAddress(address) {
   if (addr === "::1") return true;
   return /^127\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(addr);
 }
-function tokenFromRequest(request) {
-  const headers = request.headers || {};
+function tokenFromRequest(request2) {
+  const headers = request2.headers || {};
   const header = headers[TOKEN_HEADER];
   if (typeof header === "string" && header.length > 0) return header;
   const auth = headers["authorization"];
   if (typeof auth === "string" && /^Bearer\s+/i.test(auth)) return auth.replace(/^Bearer\s+/i, "");
-  if (typeof request.url === "string") {
+  if (typeof request2.url === "string") {
     try {
-      const query = new URL(request.url, "http://placeholder.invalid").searchParams.get(TOKEN_QUERY);
+      const query = new URL(request2.url, "http://placeholder.invalid").searchParams.get(TOKEN_QUERY);
       if (query) return query;
     } catch {
     }
@@ -183863,11 +184066,11 @@ function tokenFromRequest(request) {
   }
   return null;
 }
-function authoriseRequest(request, access) {
-  if (!access.shared || isLoopbackAddress(request.remoteAddress)) {
+function authoriseRequest(request2, access) {
+  if (!access.shared || isLoopbackAddress(request2.remoteAddress)) {
     return { ok: true, reason: "loopback", setCookie: null };
   }
-  const presented = tokenFromRequest(request);
+  const presented = tokenFromRequest(request2);
   if (presented === null) {
     return { ok: false, reason: "no-token", status: 401, body: UNAUTHORISED_BODY };
   }
@@ -185708,8 +185911,8 @@ function renderMarkdown(md) {
       continue;
     }
     if (lines.every((l) => /^\s*>\s?/.test(l))) {
-      const quoted = lines.map((l) => l.replace(/^\s*>\s?/, "")).join("\n");
-      html.push(`<blockquote>${renderMarkdown(quoted)}</blockquote>`);
+      const quoted2 = lines.map((l) => l.replace(/^\s*>\s?/, "")).join("\n");
+      html.push(`<blockquote>${renderMarkdown(quoted2)}</blockquote>`);
       continue;
     }
     if (lines.every((l) => /^\s*[-*]\s+/.test(l))) {
@@ -190891,18 +191094,18 @@ function capabilityProbes() {
   if (!instance) instance = new CapabilityProbeCache({ runner: runProbe });
   return instance;
 }
-async function runProbe(request) {
-  switch (request.key) {
+async function runProbe(request2) {
+  switch (request2.key) {
     case "realtime.subscribe":
-      return probeRealtime(request);
+      return probeRealtime(request2);
     case "data.aggregate":
-      return probeAggregate(request);
+      return probeAggregate(request2);
     default:
-      throw new Error(`No probe implemented for ${request.key}`);
+      throw new Error(`No probe implemented for ${request2.key}`);
   }
 }
-function probeRealtime(request) {
-  const url = websocketUrl(request.url, request.probe.path);
+function probeRealtime(request2) {
+  const url = websocketUrl(request2.url, request2.probe.path);
   return new Promise((resolve5) => {
     let settled = false;
     let socket = null;
@@ -190935,8 +191138,8 @@ function probeRealtime(request) {
     socket.onclose = () => settle({ verdict: "unsupported", at: Date.now(), detail: "the websocket closed without upgrading" });
   });
 }
-async function probeAggregate(request) {
-  const response = await fetchWithDeadline(`${request.url}${request.probe.path}`, request.probe.method);
+async function probeAggregate(request2) {
+  const response = await fetchWithDeadline(`${request2.url}${request2.probe.path}`, request2.probe.method);
   if (!response) return { verdict: "unsupported", at: Date.now(), detail: "the server did not answer" };
   if (response.status !== 200) {
     return { verdict: "unsupported", at: Date.now(), detail: `the server answered ${response.status}` };
@@ -194529,6 +194732,55 @@ function cloudPortMeaning(type, plug) {
 init_scriptfiles();
 var FUNCTION_NODE_TYPE = "JavaScriptFunction";
 
+// ../noodl-editor/src/editor/src/models/nodelibrary/cloudDynamicPorts.ts
+init_function_ports();
+function proplist(parameters, name2) {
+  const value2 = parameters[name2];
+  return Array.isArray(value2) ? value2 : [];
+}
+function scriptPortsFromSource(script) {
+  const ports = [];
+  if (typeof script !== "string") return ports;
+  const names = functionScriptPortNames(script);
+  const add = (name2, plug, type, prefix) => {
+    if (ports.some((p) => p.name === prefix + name2 && p.plug === plug)) return;
+    ports.push({ name: prefix + name2, displayName: name2, plug, type, group: plug === "input" ? "Inputs" : "Outputs" });
+  };
+  for (const name2 of names.inputs) add(name2, "input", "*", "in-");
+  for (const name2 of names.signals) add(name2, "output", "signal", "out-");
+  for (const name2 of names.outputs) add(name2, "output", "*", "out-");
+  return ports;
+}
+function scriptPortsForNode(node) {
+  const parameters = node.parameters || {};
+  const ports = [];
+  for (const spec of proplist(parameters, "scriptOutputs")) {
+    if (!spec.label) continue;
+    ports.push({
+      name: "out-" + spec.label,
+      displayName: spec.label,
+      plug: "output",
+      type: parameters["outtype-" + spec.label] || "*",
+      group: "Outputs"
+    });
+  }
+  for (const spec of proplist(parameters, "scriptInputs")) {
+    if (!spec.label) continue;
+    ports.push({
+      name: "in-" + spec.label,
+      displayName: spec.label,
+      plug: "input",
+      type: parameters["intype-" + spec.label] || "string",
+      group: "Inputs"
+    });
+  }
+  for (const port of scriptPortsFromSource(parameters["functionScript"])) {
+    if (ports.some((p) => p.name === port.name && p.plug === port.plug)) continue;
+    ports.push(port);
+  }
+  return ports;
+}
+
 // ../noodl-editor/src/editor/src/validation/functionPorts.ts
 var SCRIPT_NODE_API_MEMBERS = [
   "Inputs",
@@ -194784,7 +195036,11 @@ var AUTHORED_BLOCKING_WARNINGS = /* @__PURE__ */ new Set([
   // Bug P121-TWO003-SCRIPTCOMPILE — the runtime's own compile fails, so every Run fails. No benign
   // reading for a graph an agent just wrote; the write said nothing before, and the first person
   // to run the function got "That could not be done."
-  "function-script-not-compiled" /* FunctionScriptNotCompiled */
+  "function-script-not-compiled" /* FunctionScriptNotCompiled */,
+  // Bug P127-BKO006-RUNONCHANGEGUESS — a `runOnChange-` name a Function does not have is never read
+  // (2,805 right and 5 wrong over 2,718 Functions, all five agent-written); the message names the
+  // right one.
+  "function-run-on-change-unknown" /* FunctionRunOnChangeUnknown */
 ]);
 
 // ../noodl-editor/src/editor/src/validation/diagnosticExamples.ts
@@ -194924,6 +195180,12 @@ var DIAGNOSTIC_EXAMPLES = [
     code: "function-guards-an-open-collection" /* FunctionGuardsAnOpenCollection */,
     examples: ["cloud-members-can-edit-my-records"],
     why: `the records only a function creates, with the collection's create rule "nobody": the function runs as the system`
+  },
+  // P112-OWN018-FANOUT (ruled 2026-10-27 "Teach it and warn") — the warning carries the chained shape.
+  {
+    code: "condition-reads-a-siblings-change" /* ConditionReadsASiblingsChange */,
+    examples: ["score-then-move-on"],
+    why: "the press evaluating the gate that reads, and that gate's Done evaluating the gate that moves on, so the score is decided first"
   }
 ];
 
@@ -196510,6 +196772,156 @@ var functionNeverReruns = {
   }
 };
 
+// ../noodl-editor/src/editor/src/validation/rules/functionRunOnChangeUnknown.ts
+var RUN_ON_CHANGE_PREFIX4 = "runOnChange-";
+var FUNCTION_INPUT_PREFIX = "in-";
+var functionRunOnChangeUnknown = {
+  code: "function-run-on-change-unknown" /* FunctionRunOnChangeUnknown */,
+  description: "A Function has a Run On Value Change setting under a name it does not have (its boxes are runOnChange-in-<input>).",
+  defaultEnabled: true,
+  run(ctx) {
+    const out = [];
+    for (const { component } of ctx.components) {
+      for (const node of component.nodes) {
+        if (node.type !== FUNCTION_NODE_TYPE || !node.parameters) continue;
+        const guessed = Object.keys(node.parameters).filter(
+          (key) => key.startsWith(RUN_ON_CHANGE_PREFIX4) && !key.startsWith(RUN_ON_CHANGE_PREFIX4 + FUNCTION_INPUT_PREFIX)
+        );
+        if (guessed.length === 0) continue;
+        const inputs = scriptPortsForNode(node).filter((p) => p.plug === "input" && p.name.startsWith(FUNCTION_INPUT_PREFIX)).map((p) => p.name.slice(FUNCTION_INPUT_PREFIX.length));
+        const name2 = node.label ? `"${node.label}"` : "This Function";
+        for (const key of guessed) {
+          const wanted = key.slice(RUN_ON_CHANGE_PREFIX4.length);
+          const input2 = inputs.includes(wanted) ? wanted : nearest(wanted, inputs);
+          const right = input2 !== void 0 ? `${RUN_ON_CHANGE_PREFIX4}${FUNCTION_INPUT_PREFIX}${input2}` : void 0;
+          out.push({
+            code: "function-run-on-change-unknown" /* FunctionRunOnChangeUnknown */,
+            severity: "warning",
+            message: `${name2} has no setting "${key}", so nothing reads it` + (input2 === wanted ? ` and a new "${wanted}" still runs it. ` : ". ") + `A Function's Run On Value Change box for an input is "runOnChange-in-<input>"` + (right ? input2 === wanted ? `: write "${right}".` : `; its script reads no "${wanted}" (the nearest input is "${input2}": "${right}").` : `, and its script reads no inputs.`),
+            location: {
+              component: component.name,
+              nodeId: node.id,
+              nodeType: node.type,
+              nodeLabel: node.label,
+              port: key,
+              plug: "input"
+            },
+            ...right ? { suggestion: `${right}: ${JSON.stringify(node.parameters[key])}` } : {}
+          });
+        }
+      }
+    }
+    return out;
+  }
+};
+
+// ../noodl-editor/src/editor/src/validation/rules/conditionReadsASiblingsChange.ts
+var CONDITION = "Condition";
+var conditionReadsASiblingsChange = {
+  code: "condition-reads-a-siblings-change" /* ConditionReadsASiblingsChange */,
+  description: "Two Conditions evaluated by one signal, where one's On True or On False changes what the other reads.",
+  defaultEnabled: true,
+  run(ctx) {
+    const out = [];
+    const { catalog } = ctx;
+    for (const { component, nodeById } of ctx.components) {
+      let exclusiveStates = function(a, b) {
+        const stateOf = (gate) => {
+          const c = (incoming.get(gate) ?? []).find((w) => w.toProperty === "condition");
+          return c && nodeById.get(c.fromId)?.type === "States" && c.fromProperty.startsWith("at-") ? c : void 0;
+        };
+        const sa = stateOf(a);
+        const sb = stateOf(b);
+        return !!sa && !!sb && sa.fromId === sb.fromId && sa.fromProperty !== sb.fromProperty;
+      }, feedingValues = function(gate) {
+        const seen = /* @__PURE__ */ new Set();
+        const stack = (incoming.get(gate) ?? []).filter((c) => c.toProperty === "condition").map((c) => c.fromId);
+        while (stack.length > 0) {
+          const id = stack.pop();
+          if (id === gate || seen.has(id)) continue;
+          seen.add(id);
+          if (!passesThrough(id)) continue;
+          const type = nodeById.get(id)?.type;
+          for (const c of incoming.get(id) ?? []) {
+            if (type && catalog.getPort(type, "input", c.toProperty)?.isSignal) continue;
+            stack.push(c.fromId);
+          }
+        }
+        return seen;
+      }, reaches2 = function(gate, targets) {
+        if (targets.size === 0) return false;
+        const seen = /* @__PURE__ */ new Set([gate]);
+        const stack = (outgoing.get(gate) ?? []).map((c) => c.toId);
+        while (stack.length > 0) {
+          const id = stack.pop();
+          if (targets.has(id)) return true;
+          if (seen.has(id)) continue;
+          seen.add(id);
+          if (!passesThrough(id)) continue;
+          for (const c of outgoing.get(id) ?? []) stack.push(c.toId);
+        }
+        return false;
+      };
+      const outgoing = /* @__PURE__ */ new Map();
+      const incoming = /* @__PURE__ */ new Map();
+      for (const c of component.connections) {
+        (outgoing.get(c.fromId) ?? outgoing.set(c.fromId, []).get(c.fromId)).push(c);
+        (incoming.get(c.toId) ?? incoming.set(c.toId, []).get(c.toId)).push(c);
+      }
+      const isCondition = (id) => nodeById.get(id)?.type === CONDITION;
+      const passesThrough = (id) => {
+        const type = nodeById.get(id)?.type;
+        const known = type ? catalog.getNode(type) : void 0;
+        return !!known && !known.isVisual;
+      };
+      const gatesBySource = /* @__PURE__ */ new Map();
+      for (const c of component.connections) {
+        if (c.toProperty !== "eval" || !isCondition(c.toId)) continue;
+        const key = `${c.fromId}\0${c.fromProperty}`;
+        const gates = gatesBySource.get(key) ?? [];
+        if (!gates.includes(c.toId)) gates.push(c.toId);
+        gatesBySource.set(key, gates);
+      }
+      const reported = /* @__PURE__ */ new Set();
+      for (const [key, gates] of gatesBySource) {
+        if (gates.length < 2) continue;
+        const sourceId = key.split("\0")[0];
+        for (const reader of gates) {
+          if (reported.has(reader)) continue;
+          const feeds = feedingValues(reader);
+          for (const writer of gates) {
+            if (writer === reader) continue;
+            if (exclusiveStates(reader, writer)) continue;
+            if (!reaches2(writer, feeds)) continue;
+            reported.add(reader);
+            const r = nodeById.get(reader);
+            const w = nodeById.get(writer);
+            const rName = r.label ? `"${r.label}"` : "This Condition";
+            const wName = w.label ? `"${w.label}"` : "another Condition";
+            const sName = nodeById.get(sourceId)?.label ? `"${nodeById.get(sourceId).label}"` : "the same signal";
+            out.push({
+              code: "condition-reads-a-siblings-change" /* ConditionReadsASiblingsChange */,
+              severity: "warning",
+              message: `${rName} and ${wName} are both evaluated by ${sName}, and what ${wName} does changes what ${rName} reads. ${rName} reads its Condition after that change, whichever order the two are wired in. If it should decide on the value from before, chain them: ${rName}'s Done into ${wName}'s Evaluate, instead of both from ${sName}.`,
+              location: {
+                component: component.name,
+                nodeId: r.id,
+                nodeType: r.type,
+                nodeLabel: r.label,
+                port: "eval",
+                plug: "input"
+              },
+              suggestion: `${r.id}.done \u2192 ${w.id}.eval`
+            });
+            break;
+          }
+        }
+      }
+    }
+    return out;
+  }
+};
+
 // ../noodl-editor/src/editor/src/validation/rules/layoutFillTraps.ts
 var GROUP = "Group";
 var CONTENT_WIDTH = /* @__PURE__ */ new Set(["contentSize", "contentWidth"]);
@@ -196617,6 +197029,97 @@ var rowOfWordsFillsItsColumn = {
   }
 };
 
+// ../noodl-editor/src/editor/src/validation/rules/clickAreaHoldsAControl.ts
+var CONTROL_TYPES = /* @__PURE__ */ new Map([
+  ["net.noodl.controls.button", "Button"],
+  ["net.noodl.controls.textinput", "Text Input"],
+  ["net.noodl.controls.checkbox", "Checkbox"],
+  ["net.noodl.controls.radiobutton", "Radio Button"],
+  ["net.noodl.controls.options", "Dropdown"],
+  ["net.noodl.controls.range", "Slider"]
+]);
+var CLICK = "onClick";
+var COMPONENT_OUTPUTS = "Component Outputs";
+var clickWired = (component, node) => component.connections.some((c) => c.fromId === node.id && c.fromProperty === CLICK);
+function reaches(component, nodeById, node, port, used) {
+  return component.connections.some((c) => {
+    if (c.fromId !== node.id || c.fromProperty !== port) return false;
+    if (nodeById.get(c.toId)?.type !== COMPONENT_OUTPUTS) return true;
+    return used === "all" || used.has(c.toProperty);
+  });
+}
+var quoted = (node) => node.label ? ` ("${node.label}")` : "";
+var clickAreaHoldsAControl = {
+  code: "click-area-holds-a-control" /* ClickAreaHoldsAControl */,
+  description: "An element whose Click is wired holds a control, so the keyboard reaches the control and not the element.",
+  defaultEnabled: true,
+  run(ctx) {
+    const out = [];
+    const byPath = new Map(ctx.components.map((c) => [refToPath(c.component.name), c]));
+    const memo = /* @__PURE__ */ new Map();
+    const componentHolds = (ref, used) => {
+      const path8 = refToPath(ref);
+      const key = `${path8}|${[...used].sort().join(",")}`;
+      if (memo.has(key)) return memo.get(key) ?? null;
+      memo.set(key, null);
+      const entry = byPath.get(path8);
+      let found = null;
+      if (entry) {
+        for (const node of entry.component.nodes) {
+          found = held(node, entry.component, entry.nodeById, used);
+          if (found) break;
+        }
+      }
+      memo.set(key, found);
+      return found;
+    };
+    function held(node, component, nodeById, used) {
+      const control = CONTROL_TYPES.get(node.type);
+      if (control) return `a ${control}${quoted(node)}`;
+      if (reaches(component, nodeById, node, CLICK, used)) {
+        return `${node.label ? `"${node.label}"` : "an element"}, which answers a click of its own`;
+      }
+      if (isComponentRef(node.type)) {
+        const ports = new Set(component.connections.filter((c) => c.fromId === node.id).map((c) => c.fromProperty));
+        const usedHere = new Set([...ports].filter((port) => reaches(component, nodeById, node, port, used)));
+        const inside = componentHolds(node.type, usedHere);
+        if (inside) return `the component ${node.label ? `"${node.label}"` : `"${refToPath(node.type)}"`}, which holds ${inside}`;
+      }
+      return null;
+    }
+    for (const { component, nodeById } of ctx.components) {
+      for (const area of component.nodes) {
+        if (CONTROL_TYPES.has(area.type) || !clickWired(component, area)) continue;
+        if (!ctx.catalog.getNode(area.type)?.isVisual) continue;
+        let inner = null;
+        const stack = [...area.children ?? []];
+        while (stack.length && !inner) {
+          const node = nodeById.get(stack.shift());
+          if (!node) continue;
+          inner = held(node, component, nodeById, "all");
+          stack.push(...node.children ?? []);
+        }
+        if (!inner) continue;
+        const name2 = area.label ? `"${area.label}"` : `This ${ctx.catalog.getNode(area.type)?.displayName ?? area.type}`;
+        out.push({
+          code: "click-area-holds-a-control" /* ClickAreaHoldsAControl */,
+          severity: "info",
+          message: `${name2} answers a click. It holds ${inner}. The Tab key stops on what it holds instead. A person using a keyboard or a screen reader cannot press ${area.label ? name2 : "it"} itself. If its click does something nothing inside it does, give that its own Button.`,
+          location: {
+            component: component.name,
+            nodeId: area.id,
+            nodeType: area.type,
+            ...area.label ? { nodeLabel: area.label } : {},
+            port: CLICK,
+            plug: "output"
+          }
+        });
+      }
+    }
+    return out;
+  }
+};
+
 // ../noodl-editor/src/editor/src/validation/rules/index.ts
 var ALL_RULES = [
   duplicateNodeId,
@@ -196673,6 +197176,10 @@ var ALL_RULES = [
   // arrangement ones.
   functionScriptNotCompiled,
   functionNeverReruns,
+  functionRunOnChangeUnknown,
+  // P112-OWN018-FANOUT (ruled 2026-10-27 "Teach it and warn") — beside the Function rules: what a graph's signals do in
+  // what order, read from the wires. Two gates off one signal, one changing what the other reads.
+  conditionReadsASiblingsChange,
   repeatedSiblingSubtree,
   // DEF-025 — beside `repeatedSiblingSubtree` because both read the visual
   // tree's arrangement rather than wires: that one asks whether siblings
@@ -196686,6 +197193,9 @@ var ALL_RULES = [
   // against the shipped corpus before they were written — this one is 0 hits
   // on all ten templates.
   dialogWithoutName,
+  // P121-TWO003-NESTEDBUTTON (ruled 2026-10-27) — beside the two above: what a keyboard and a screen reader reach, read
+  // from the arrangement. An info, live, so the Problems panel and an agent's write both say it.
+  clickAreaHoldsAControl,
   // P112-OWN020-PILLWRAP / FILLGROW (ruled 2026-10-26: warn and teach) — a node with no size setting fills its parent,
   // read from the arrangement like the two above, and live so a person sees it while editing.
   contentRowSplitsItsChildren,
@@ -197464,6 +197974,7 @@ function validationWarningLines(state2) {
   if (state2.kind !== "ok" || !state2.report) return [];
   return state2.report.diagnostics.filter((d) => d.severity === "warning").map((d) => `${d.code} in ${d.component}${d.nodeLabel || d.nodeId ? ` (${d.nodeLabel ?? d.nodeId})` : ""}: ${d.message}`);
 }
+var BACKEND_PREFIX = "/__nodegx/backend";
 var MIME = {
   ".html": "text/html; charset=utf-8",
   ".js": "application/javascript; charset=utf-8",
@@ -197577,6 +198088,10 @@ var PreviewServer = class {
     const url = new URL(req.url ?? "/", "http://localhost");
     const pathname = decodeURIComponent(url.pathname);
     if (pathname === "/__preview/events") return this.serveEvents(req, res);
+    const backendPort = this.sharedBackendPort();
+    if (backendPort && (pathname === BACKEND_PREFIX || pathname.startsWith(BACKEND_PREFIX + "/"))) {
+      return this.proxyToBackend(req, res, backendPort);
+    }
     if (pathname === "/__preview/state") {
       const status = {
         state: this.state,
@@ -197600,7 +198115,11 @@ var PreviewServer = class {
       if (!bundle) return this.notFound(res);
       return this.sendDynamic(res, bundle, "application/json; charset=utf-8");
     }
-    if (pathname === "/nodegx-config.json") return this.sendDynamic(res, "{}", "application/json; charset=utf-8");
+    if (pathname === "/nodegx-config.json") {
+      const origin = backendPort ? pageOrigin(req) : null;
+      const config = origin ? { cloudservices: { endpoint: origin + BACKEND_PREFIX } } : {};
+      return this.sendDynamic(res, JSON.stringify(config), "application/json; charset=utf-8");
+    }
     const asset = pathname.slice(1);
     if (DEPLOY_ASSETS.includes(asset)) {
       return this.sendFile(req, res, deployAssetPath(asset));
@@ -197651,6 +198170,46 @@ var PreviewServer = class {
       this.clients.delete(res);
     });
   }
+  /** The backend port a SHARED preview carries, else undefined. */
+  sharedBackendPort() {
+    return this.access.shared && this.options.backendPort ? this.options.backendPort : void 0;
+  }
+  /**
+   * P112-OWN023-PHONEPREVIEW — one request on to the backend on loopback, streamed both ways (its realtime channel is a
+   * long `text/event-stream`). The backend is told where the page reached it (`Host`, `X-Forwarded-Prefix`), so a
+   * File's url it answers with leads back through here; the preview's own token is not passed on.
+   */
+  proxyToBackend(req, res, port) {
+    const raw = req.url ?? "/";
+    const rest2 = raw.slice(BACKEND_PREFIX.length) || "/";
+    const headers = { ...req.headers };
+    delete headers[TOKEN_HEADER];
+    const cookie = withoutCookie(req.headers.cookie, TOKEN_COOKIE);
+    if (cookie) headers.cookie = cookie;
+    else delete headers.cookie;
+    headers["x-forwarded-prefix"] = BACKEND_PREFIX;
+    headers["x-forwarded-proto"] = "http";
+    const peer = req.socket.remoteAddress;
+    if (peer) headers["x-forwarded-for"] = peer;
+    const upstream = http.request(
+      { host: "127.0.0.1", port, method: req.method, path: rest2.startsWith("/") ? rest2 : "/" + rest2, headers },
+      (answer) => {
+        res.writeHead(answer.statusCode ?? 502, answer.headers);
+        answer.pipe(res);
+      }
+    );
+    upstream.on("error", (err) => {
+      if (res.headersSent) {
+        res.destroy(err);
+        return;
+      }
+      res.writeHead(502, { "content-type": "text/plain; charset=utf-8", "cache-control": "no-store" });
+      res.end(`The app's backend on this computer (port ${port}) did not answer: ${err.message}
+`);
+    });
+    res.on("close", () => upstream.destroy());
+    req.pipe(upstream);
+  }
   sendJson(res, body) {
     this.sendDynamic(res, JSON.stringify(body, null, 2), "application/json; charset=utf-8");
   }
@@ -197695,6 +198254,15 @@ var PreviewServer = class {
     res.end("Not found");
   }
 };
+function pageOrigin(req) {
+  const host = String(req.headers.host || "");
+  return /^[A-Za-z0-9.\-[\]:]+$/.test(host) ? `http://${host}` : null;
+}
+function withoutCookie(header, name2) {
+  if (!header) return void 0;
+  const kept = header.split(";").map((part) => part.trim()).filter((part) => part && part.split("=")[0].trim() !== name2);
+  return kept.length ? kept.join("; ") : void 0;
+}
 
 // src/watcher.ts
 var import_chokidar = __toESM(require("chokidar"));
@@ -197747,6 +198315,7 @@ Options:
   --port <n>        Port to listen on (default 8575, 0 for any free port).
   --host <addr>     Address to bind (default 127.0.0.1). Any address but loopback also turns
                     on the token: the printed URL carries it, and without it nothing is served.
+                    A phone on the same Wi-Fi then reaches the app's own backend through it too.
   --token <t>       Use this token rather than minting one.
   --debounce <ms>   Quiet period before rebuilding after a change (default 120).
   --no-watch        Render once and serve; do not watch for changes.
@@ -197860,7 +198429,8 @@ async function main() {
   log(`noodl-preview \u2014 ${dir} (${format}), ${types} node types`);
   const shared = args.host !== "127.0.0.1" && args.host !== "localhost";
   const access = resolveAccess({ share: shared, host: args.host, token: args.token });
-  const server = new PreviewServer({ projectDir: dir, port: args.port, host: args.host, access });
+  const backendPort = format === "v2" ? namedBackend(dir)?.port : void 0;
+  const server = new PreviewServer({ projectDir: dir, port: args.port, host: args.host, access, backendPort });
   let port;
   try {
     port = await server.listen();