@valbuild/next 0.108.2 → 0.108.4

package/client/dist/valbuild-next-client.cjs.dev.js

@@ -7,7 +7,7 @@ var routeFromVal = require('../../dist/routeFromVal-b48a454a.cjs.dev.js');
 var core = require('@valbuild/core');
 var stega = require('@valbuild/react/stega');
 var React = require('react');
-var ValOverlayContext = require('../../dist/ValOverlayContext-ca3b6ebd.cjs.dev.js');
+var ValOverlayContext = require('../../dist/ValOverlayContext-5bd7628b.cjs.dev.js');
 require('../../dist/createForOfIteratorHelper-0445603c.cjs.dev.js');
 require('../../dist/unsupportedIterableToArray-c8ab77c9.cjs.dev.js');
 require('../../dist/objectSpread2-58024783.cjs.dev.js');

package/client/dist/valbuild-next-client.cjs.prod.js

@@ -7,7 +7,7 @@ var routeFromVal = require('../../dist/routeFromVal-8ac2f984.cjs.prod.js');
 var core = require('@valbuild/core');
 var stega = require('@valbuild/react/stega');
 var React = require('react');
-var ValOverlayContext = require('../../dist/ValOverlayContext-1d019b95.cjs.prod.js');
+var ValOverlayContext = require('../../dist/ValOverlayContext-d690744f.cjs.prod.js');
 require('../../dist/createForOfIteratorHelper-d4afcad8.cjs.prod.js');
 require('../../dist/unsupportedIterableToArray-0d2087a2.cjs.prod.js');
 require('../../dist/objectSpread2-13f847a9.cjs.prod.js');

package/client/dist/valbuild-next-client.esm.js

@@ -3,7 +3,7 @@ import { g as getJsonEntryStegaRoot, _ as _typeof, a as isJsonValuesRecordSchema
 import { Internal } from '@valbuild/core';
 import { getModuleIds, stegaEncode } from '@valbuild/react/stega';
 import React from 'react';
-import { useValOverlayContext } from '../../dist/ValOverlayContext-f63e0fc9.esm.js';
+import { useValOverlayContext } from '../../dist/ValOverlayContext-e42a2e14.esm.js';
 import '../../dist/createForOfIteratorHelper-5758a730.esm.js';
 import '../../dist/unsupportedIterableToArray-5baabfdc.esm.js';
 import '../../dist/objectSpread2-60d1bd93.esm.js';

package/dist/{ValCanvasBridge-cb2d9112.cjs.dev.js → ValCanvasBridge-9d148bdd.cjs.dev.js}

@@ -289,10 +289,8 @@ function ValCanvasBridge(_ref) {
       setHighlighted(message.path);
       if (message.path !== null && message.scrollIntoView) {
         var target = findByPath(message.path);
-        target === null || target === void 0 || target.scrollIntoView({
-          block: "center",
-          behavior: "smooth"
-        });
+        // NOT `scrollIntoView` — see `scrollWithinPage`.
+        if (target !== null) scrollWithinPage(target);
       }
     };
     window.addEventListener("message", listener);
@@ -499,6 +497,77 @@ function highlightRule(path) {
   var selectors = ["[data-val-path=".concat(value, "]"), "[data-val-path^=".concat(first, "]"), "[data-val-path$=".concat(last, "]"), "[data-val-path*=".concat(inner, "]")].join(",\n");
   return "".concat(selectors, " { outline: 2px solid ").concat(SELECTION, "; outline-offset: 1px; }");
 }
+
+/**
+ * Bring an element into view WITHOUT scrolling anything outside this page.
+ *
+ * `Element.scrollIntoView` would be the obvious thing, and it is the thing that
+ * broke the studio. It scrolls every scroll container between the element and
+ * the viewport, and for a same-origin frame that chain does not stop at the
+ * frame: it continues into the embedder and scrolls the studio's own containers
+ * too. Measured in Chromium — with the studio's phone panes placed on the
+ * editor, a single `scrollIntoView` in here pulls them back onto the canvas, and
+ * because it reveals the element rather than the frame it can leave them
+ * anywhere in between, showing half of each.
+ *
+ * That is not a thing the page has any business doing. It was asked to show one
+ * of its own elements; where the studio is looking is the studio's affair. So
+ * the scrolling is done by hand, one scrollport at a time, and the walk stops at
+ * this document.
+ *
+ * Only the document centres the target vertically — it is being pointed out,
+ * and something flush against the top edge of the fold does not read as pointed
+ * out. Every scrollport inside the page is moved as little as it takes to bring
+ * the target inside it: a carousel, a sticky sidebar or a sideways-scrolling
+ * table is showing what it is showing on purpose, and re-centring one that did
+ * not need moving is the page rearranging itself around a highlight.
+ */
+function scrollWithinPage(target) {
+  var node = target.parentElement;
+  while (node !== null) {
+    var isRoot = node === document.body || node === document.documentElement;
+    if (isRoot) break;
+    if (isScrollable(node)) {
+      var port = node.getBoundingClientRect();
+      var _box = target.getBoundingClientRect();
+      node.scrollTop += delta(_box.top - port.top, _box.height, node.clientHeight, false);
+      node.scrollLeft += delta(_box.left - port.left, _box.width, node.clientWidth, false);
+    }
+    node = node.parentElement;
+  }
+  // And this document, which is the last scrollport there is as far as the page
+  // is concerned. `window`, not `documentElement.scrollIntoView`-by-another-name:
+  // this cannot reach past the frame.
+  var box = target.getBoundingClientRect();
+  window.scrollTo({
+    top: Math.max(0, window.scrollY + delta(box.top, box.height, window.innerHeight, true)),
+    left: Math.max(0, window.scrollX + delta(box.left, box.width, window.innerWidth, false)),
+    behavior: "smooth"
+  });
+}
+
+/**
+ * How far a scrollport has to move for `size` at `offset` to be shown.
+ *
+ * `center` asks for the middle of the port; without it the answer is zero
+ * whenever the thing is already inside, which is what keeps a scrollport that
+ * did not need moving from being disturbed.
+ */
+function delta(offset, size, port, center) {
+  if (center) return offset - (port - size) / 2;
+  if (offset < 0) return offset;
+  if (offset + size > port) return Math.min(offset, offset + size - port);
+  return 0;
+}
+
+/** Whether this element scrolls its own content, rather than growing with it. */
+function isScrollable(el) {
+  var style = getComputedStyle(el);
+  var scrolls = function scrolls(value) {
+    return value === "auto" || value === "scroll" || value === "overlay";
+  };
+  return scrolls(style.overflowY) && el.scrollHeight > el.clientHeight || scrolls(style.overflowX) && el.scrollWidth > el.clientWidth;
+}
 function findByPath(path) {
   var elements = document.querySelectorAll("[data-val-path]");
   for (var _i = 0, _Array$from = Array.from(elements); _i < _Array$from.length; _i++) {

package/dist/{ValCanvasBridge-1310aaeb.esm.js → ValCanvasBridge-d9948526.esm.js}

@@ -281,10 +281,8 @@ function ValCanvasBridge(_ref) {
       setHighlighted(message.path);
       if (message.path !== null && message.scrollIntoView) {
         var target = findByPath(message.path);
-        target === null || target === void 0 || target.scrollIntoView({
-          block: "center",
-          behavior: "smooth"
-        });
+        // NOT `scrollIntoView` — see `scrollWithinPage`.
+        if (target !== null) scrollWithinPage(target);
       }
     };
     window.addEventListener("message", listener);
@@ -491,6 +489,77 @@ function highlightRule(path) {
   var selectors = ["[data-val-path=".concat(value, "]"), "[data-val-path^=".concat(first, "]"), "[data-val-path$=".concat(last, "]"), "[data-val-path*=".concat(inner, "]")].join(",\n");
   return "".concat(selectors, " { outline: 2px solid ").concat(SELECTION, "; outline-offset: 1px; }");
 }
+
+/**
+ * Bring an element into view WITHOUT scrolling anything outside this page.
+ *
+ * `Element.scrollIntoView` would be the obvious thing, and it is the thing that
+ * broke the studio. It scrolls every scroll container between the element and
+ * the viewport, and for a same-origin frame that chain does not stop at the
+ * frame: it continues into the embedder and scrolls the studio's own containers
+ * too. Measured in Chromium — with the studio's phone panes placed on the
+ * editor, a single `scrollIntoView` in here pulls them back onto the canvas, and
+ * because it reveals the element rather than the frame it can leave them
+ * anywhere in between, showing half of each.
+ *
+ * That is not a thing the page has any business doing. It was asked to show one
+ * of its own elements; where the studio is looking is the studio's affair. So
+ * the scrolling is done by hand, one scrollport at a time, and the walk stops at
+ * this document.
+ *
+ * Only the document centres the target vertically — it is being pointed out,
+ * and something flush against the top edge of the fold does not read as pointed
+ * out. Every scrollport inside the page is moved as little as it takes to bring
+ * the target inside it: a carousel, a sticky sidebar or a sideways-scrolling
+ * table is showing what it is showing on purpose, and re-centring one that did
+ * not need moving is the page rearranging itself around a highlight.
+ */
+function scrollWithinPage(target) {
+  var node = target.parentElement;
+  while (node !== null) {
+    var isRoot = node === document.body || node === document.documentElement;
+    if (isRoot) break;
+    if (isScrollable(node)) {
+      var port = node.getBoundingClientRect();
+      var _box = target.getBoundingClientRect();
+      node.scrollTop += delta(_box.top - port.top, _box.height, node.clientHeight, false);
+      node.scrollLeft += delta(_box.left - port.left, _box.width, node.clientWidth, false);
+    }
+    node = node.parentElement;
+  }
+  // And this document, which is the last scrollport there is as far as the page
+  // is concerned. `window`, not `documentElement.scrollIntoView`-by-another-name:
+  // this cannot reach past the frame.
+  var box = target.getBoundingClientRect();
+  window.scrollTo({
+    top: Math.max(0, window.scrollY + delta(box.top, box.height, window.innerHeight, true)),
+    left: Math.max(0, window.scrollX + delta(box.left, box.width, window.innerWidth, false)),
+    behavior: "smooth"
+  });
+}
+
+/**
+ * How far a scrollport has to move for `size` at `offset` to be shown.
+ *
+ * `center` asks for the middle of the port; without it the answer is zero
+ * whenever the thing is already inside, which is what keeps a scrollport that
+ * did not need moving from being disturbed.
+ */
+function delta(offset, size, port, center) {
+  if (center) return offset - (port - size) / 2;
+  if (offset < 0) return offset;
+  if (offset + size > port) return Math.min(offset, offset + size - port);
+  return 0;
+}
+
+/** Whether this element scrolls its own content, rather than growing with it. */
+function isScrollable(el) {
+  var style = getComputedStyle(el);
+  var scrolls = function scrolls(value) {
+    return value === "auto" || value === "scroll" || value === "overlay";
+  };
+  return scrolls(style.overflowY) && el.scrollHeight > el.clientHeight || scrolls(style.overflowX) && el.scrollWidth > el.clientWidth;
+}
 function findByPath(path) {
   var elements = document.querySelectorAll("[data-val-path]");
   for (var _i = 0, _Array$from = Array.from(elements); _i < _Array$from.length; _i++) {

package/dist/ValCanvasBridge-e62125f8.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./ValCanvasBridge-e62125f8.cjs.prod.js");
+} else {
+  module.exports = require("./ValCanvasBridge-e62125f8.cjs.dev.js");
+}

package/dist/{ValCanvasBridge-32299c6e.cjs.prod.js → ValCanvasBridge-e62125f8.cjs.prod.js}

@@ -289,10 +289,8 @@ function ValCanvasBridge(_ref) {
       setHighlighted(message.path);
       if (message.path !== null && message.scrollIntoView) {
         var target = findByPath(message.path);
-        target === null || target === void 0 || target.scrollIntoView({
-          block: "center",
-          behavior: "smooth"
-        });
+        // NOT `scrollIntoView` — see `scrollWithinPage`.
+        if (target !== null) scrollWithinPage(target);
       }
     };
     window.addEventListener("message", listener);
@@ -499,6 +497,77 @@ function highlightRule(path) {
   var selectors = ["[data-val-path=".concat(value, "]"), "[data-val-path^=".concat(first, "]"), "[data-val-path$=".concat(last, "]"), "[data-val-path*=".concat(inner, "]")].join(",\n");
   return "".concat(selectors, " { outline: 2px solid ").concat(SELECTION, "; outline-offset: 1px; }");
 }
+
+/**
+ * Bring an element into view WITHOUT scrolling anything outside this page.
+ *
+ * `Element.scrollIntoView` would be the obvious thing, and it is the thing that
+ * broke the studio. It scrolls every scroll container between the element and
+ * the viewport, and for a same-origin frame that chain does not stop at the
+ * frame: it continues into the embedder and scrolls the studio's own containers
+ * too. Measured in Chromium — with the studio's phone panes placed on the
+ * editor, a single `scrollIntoView` in here pulls them back onto the canvas, and
+ * because it reveals the element rather than the frame it can leave them
+ * anywhere in between, showing half of each.
+ *
+ * That is not a thing the page has any business doing. It was asked to show one
+ * of its own elements; where the studio is looking is the studio's affair. So
+ * the scrolling is done by hand, one scrollport at a time, and the walk stops at
+ * this document.
+ *
+ * Only the document centres the target vertically — it is being pointed out,
+ * and something flush against the top edge of the fold does not read as pointed
+ * out. Every scrollport inside the page is moved as little as it takes to bring
+ * the target inside it: a carousel, a sticky sidebar or a sideways-scrolling
+ * table is showing what it is showing on purpose, and re-centring one that did
+ * not need moving is the page rearranging itself around a highlight.
+ */
+function scrollWithinPage(target) {
+  var node = target.parentElement;
+  while (node !== null) {
+    var isRoot = node === document.body || node === document.documentElement;
+    if (isRoot) break;
+    if (isScrollable(node)) {
+      var port = node.getBoundingClientRect();
+      var _box = target.getBoundingClientRect();
+      node.scrollTop += delta(_box.top - port.top, _box.height, node.clientHeight, false);
+      node.scrollLeft += delta(_box.left - port.left, _box.width, node.clientWidth, false);
+    }
+    node = node.parentElement;
+  }
+  // And this document, which is the last scrollport there is as far as the page
+  // is concerned. `window`, not `documentElement.scrollIntoView`-by-another-name:
+  // this cannot reach past the frame.
+  var box = target.getBoundingClientRect();
+  window.scrollTo({
+    top: Math.max(0, window.scrollY + delta(box.top, box.height, window.innerHeight, true)),
+    left: Math.max(0, window.scrollX + delta(box.left, box.width, window.innerWidth, false)),
+    behavior: "smooth"
+  });
+}
+
+/**
+ * How far a scrollport has to move for `size` at `offset` to be shown.
+ *
+ * `center` asks for the middle of the port; without it the answer is zero
+ * whenever the thing is already inside, which is what keeps a scrollport that
+ * did not need moving from being disturbed.
+ */
+function delta(offset, size, port, center) {
+  if (center) return offset - (port - size) / 2;
+  if (offset < 0) return offset;
+  if (offset + size > port) return Math.min(offset, offset + size - port);
+  return 0;
+}
+
+/** Whether this element scrolls its own content, rather than growing with it. */
+function isScrollable(el) {
+  var style = getComputedStyle(el);
+  var scrolls = function scrolls(value) {
+    return value === "auto" || value === "scroll" || value === "overlay";
+  };
+  return scrolls(style.overflowY) && el.scrollHeight > el.clientHeight || scrolls(style.overflowX) && el.scrollWidth > el.clientWidth;
+}
 function findByPath(path) {
   var elements = document.querySelectorAll("[data-val-path]");
   for (var _i = 0, _Array$from = Array.from(elements); _i < _Array$from.length; _i++) {

package/dist/{ValNextProvider-3209948c.esm.js → ValNextProvider-588f2ff0.esm.js}

@@ -6,12 +6,12 @@ import { VERSION, VAL_APP_PATH, VAL_OVERLAY_ID } from '@valbuild/ui';
 import { useRouter, usePathname } from 'next/navigation';
 import Script from 'next/script';
 import React, { useEffect } from 'react';
-import { ValExternalStore, ValOverlayProvider } from './ValOverlayContext-f63e0fc9.esm.js';
+import { ValExternalStore, ValOverlayProvider } from './ValOverlayContext-e42a2e14.esm.js';
 import { SET_AUTO_TAG_JSX_ENABLED } from '@valbuild/react/stega';
 import { VAL_THEME_SESSION_STORAGE_KEY, createValClient, isValCanvasFrame } from '@valbuild/shared/internal';
 import { p as prefixStyles, u as useConfigStorageSave, f as floatDarkBg, d as floatLightBg, v as valPrefixedClass, c as cn } from './fallbackColors-5ead2c26.esm.js';
 import { _ as _createForOfIteratorHelper } from './createForOfIteratorHelper-5758a730.esm.js';
-import { ValCanvasBridge } from './ValCanvasBridge-1310aaeb.esm.js';
+import { ValCanvasBridge } from './ValCanvasBridge-d9948526.esm.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import './unsupportedIterableToArray-5baabfdc.esm.js';
 import './defineProperty-cca5affa.esm.js';
@@ -137,6 +137,38 @@ var SAFETY_REFRESH_WINDOW_MS = 30000;
  * be torn down and rebuilt per keystroke.
  */
 var VAL_EDIT_LANDED = "val-edit-landed";
+
+/**
+ * How often `/draft/stat` is asked when nothing is in progress.
+ *
+ * Draft mode changes when someone toggles it, which the handshake below already
+ * covers — so this is only there to notice it being changed somewhere else.
+ */
+var DRAFT_IDLE_POLL_MS = 20000;
+
+/**
+ * And how often while the enable/disable handshake is in flight.
+ *
+ * Fast on purpose: the hidden iframe redirects through `/draft/enable`, and the
+ * page cannot do anything useful until that has landed.
+ */
+var DRAFT_HANDSHAKE_POLL_MS = 100;
+
+/**
+ * How long that fast phase may last before it gives up.
+ *
+ * Without a deadline it does not end: the only thing that clears `iframeSrc` is
+ * a `val-ready` message posted by the redirect target, so a frame that fails to
+ * load — a 500, an auth redirect, a dev server still compiling — left the page
+ * asking ten times a second, forever. A browser runs about six connections per
+ * origin, so that is enough to push `/stat`, `/patches` and the canvas document
+ * itself into the browser's own queue, where they are indistinguishable from a
+ * slow server.
+ *
+ * Generous enough for a first compile in `next dev`, which is the slowest case
+ * that is not a fault.
+ */
+var DRAFT_HANDSHAKE_TIMEOUT_MS = 10000;
 var ValNextProvider = function ValNextProvider(props) {
   var _draftModeReady$curre2;
   // TODO: use config:
@@ -482,9 +514,32 @@ var ValNextProvider = function ValNextProvider(props) {
           return;
         }
         pollDraftStatIdRef.current--;
-        timeout = setTimeout(pollCurrentDraftMode, iframeSrc === null ? 20000 : 100);
+        var handshaking = iframeSrc !== null;
+        if (handshaking && Date.now() - startedAt > DRAFT_HANDSHAKE_TIMEOUT_MS) {
+          /**
+           * The handshake did not complete, so stop hammering.
+           *
+           * Clearing `iframeSrc` unmounts the hidden frame and takes the poll
+           * back to its idle interval — which is the honest state: nothing is
+           * in progress any more. Leaving it set is what made this
+           * unrecoverable, because the ONLY other thing that clears it is the
+           * `val-ready` message the frame never sent.
+           */
+          console.warn("Val: draft mode did not confirm in time. Falling back to the " + "idle poll — try toggling preview again.");
+          setIframeSrc(null);
+          return;
+        }
+        timeout = setTimeout(pollCurrentDraftMode, handshaking ? DRAFT_HANDSHAKE_POLL_MS : DRAFT_IDLE_POLL_MS);
       });
     }
+    /**
+     * When this spell of polling began.
+     *
+     * The effect re-runs when `iframeSrc` changes, so for the fast phase this is
+     * the moment the handshake started — which is what the deadline below is
+     * measured from.
+     */
+    var startedAt = Date.now();
     pollCurrentDraftMode();
     return function () {
       clearTimeout(timeout);
@@ -519,8 +574,23 @@ var ValNextProvider = function ValNextProvider(props) {
               var moduleFilePath = (_event$detail3 = event.detail) === null || _event$detail3 === void 0 ? void 0 : _event$detail3.moduleFilePath;
               var source = (_event$detail4 = event.detail) === null || _event$detail4 === void 0 ? void 0 : _event$detail4.source;
               if (typeof moduleFilePath === "string" && source !== undefined) {
-                valStore.update(moduleFilePath, source);
-                if (!props.disableRefresh) {
+                var changed = valStore.update(moduleFilePath, source);
+                /**
+                 * Armed by a CHANGE, not by a message.
+                 *
+                 * The editor re-sends everything it holds whenever this page
+                 * becomes a new document — a reload, or the one `next dev` does
+                 * when a publish rewrites the `.val.ts` files — and most of that
+                 * snapshot is content this page already has. Counting those
+                 * bought a whole-route request per publish whether or not the
+                 * page was out of date, which with auto-save on is one per pause
+                 * in typing.
+                 *
+                 * The catch-up that MATTERS still refreshes: a page whose server
+                 * render predates the write has no value for that module, so the
+                 * first arrival counts as a change.
+                 */
+                if (changed && !props.disableRefresh) {
                   rerenderCounterRef.current++;
                   window.dispatchEvent(new Event(VAL_EDIT_LANDED));
                 }

package/dist/ValNextProvider-bd3f89d3.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./ValNextProvider-bd3f89d3.cjs.prod.js");
+} else {
+  module.exports = require("./ValNextProvider-bd3f89d3.cjs.dev.js");
+}

package/dist/{ValNextProvider-3fdf8756.cjs.prod.js → ValNextProvider-bd3f89d3.cjs.prod.js}

@@ -10,12 +10,12 @@ var ui = require('@valbuild/ui');
 var navigation = require('next/navigation');
 var Script = require('next/script');
 var React = require('react');
-var ValOverlayContext = require('./ValOverlayContext-1d019b95.cjs.prod.js');
+var ValOverlayContext = require('./ValOverlayContext-d690744f.cjs.prod.js');
 var stega = require('@valbuild/react/stega');
 var internal = require('@valbuild/shared/internal');
 var fallbackColors = require('./fallbackColors-d4a5b0da.cjs.prod.js');
 var createForOfIteratorHelper = require('./createForOfIteratorHelper-d4afcad8.cjs.prod.js');
-var ValCanvasBridge = require('./ValCanvasBridge-32299c6e.cjs.prod.js');
+var ValCanvasBridge = require('./ValCanvasBridge-e62125f8.cjs.prod.js');
 var jsxRuntime = require('react/jsx-runtime');
 require('./unsupportedIterableToArray-0d2087a2.cjs.prod.js');
 require('./defineProperty-8951f469.cjs.prod.js');
@@ -146,6 +146,38 @@ var SAFETY_REFRESH_WINDOW_MS = 30000;
  * be torn down and rebuilt per keystroke.
  */
 var VAL_EDIT_LANDED = "val-edit-landed";
+
+/**
+ * How often `/draft/stat` is asked when nothing is in progress.
+ *
+ * Draft mode changes when someone toggles it, which the handshake below already
+ * covers — so this is only there to notice it being changed somewhere else.
+ */
+var DRAFT_IDLE_POLL_MS = 20000;
+
+/**
+ * And how often while the enable/disable handshake is in flight.
+ *
+ * Fast on purpose: the hidden iframe redirects through `/draft/enable`, and the
+ * page cannot do anything useful until that has landed.
+ */
+var DRAFT_HANDSHAKE_POLL_MS = 100;
+
+/**
+ * How long that fast phase may last before it gives up.
+ *
+ * Without a deadline it does not end: the only thing that clears `iframeSrc` is
+ * a `val-ready` message posted by the redirect target, so a frame that fails to
+ * load — a 500, an auth redirect, a dev server still compiling — left the page
+ * asking ten times a second, forever. A browser runs about six connections per
+ * origin, so that is enough to push `/stat`, `/patches` and the canvas document
+ * itself into the browser's own queue, where they are indistinguishable from a
+ * slow server.
+ *
+ * Generous enough for a first compile in `next dev`, which is the slowest case
+ * that is not a fault.
+ */
+var DRAFT_HANDSHAKE_TIMEOUT_MS = 10000;
 var ValNextProvider = function ValNextProvider(props) {
   var _draftModeReady$curre2;
   // TODO: use config:
@@ -491,9 +523,32 @@ var ValNextProvider = function ValNextProvider(props) {
           return;
         }
         pollDraftStatIdRef.current--;
-        timeout = setTimeout(pollCurrentDraftMode, iframeSrc === null ? 20000 : 100);
+        var handshaking = iframeSrc !== null;
+        if (handshaking && Date.now() - startedAt > DRAFT_HANDSHAKE_TIMEOUT_MS) {
+          /**
+           * The handshake did not complete, so stop hammering.
+           *
+           * Clearing `iframeSrc` unmounts the hidden frame and takes the poll
+           * back to its idle interval — which is the honest state: nothing is
+           * in progress any more. Leaving it set is what made this
+           * unrecoverable, because the ONLY other thing that clears it is the
+           * `val-ready` message the frame never sent.
+           */
+          console.warn("Val: draft mode did not confirm in time. Falling back to the " + "idle poll — try toggling preview again.");
+          setIframeSrc(null);
+          return;
+        }
+        timeout = setTimeout(pollCurrentDraftMode, handshaking ? DRAFT_HANDSHAKE_POLL_MS : DRAFT_IDLE_POLL_MS);
       });
     }
+    /**
+     * When this spell of polling began.
+     *
+     * The effect re-runs when `iframeSrc` changes, so for the fast phase this is
+     * the moment the handshake started — which is what the deadline below is
+     * measured from.
+     */
+    var startedAt = Date.now();
     pollCurrentDraftMode();
     return function () {
       clearTimeout(timeout);
@@ -528,8 +583,23 @@ var ValNextProvider = function ValNextProvider(props) {
               var moduleFilePath = (_event$detail3 = event.detail) === null || _event$detail3 === void 0 ? void 0 : _event$detail3.moduleFilePath;
               var source = (_event$detail4 = event.detail) === null || _event$detail4 === void 0 ? void 0 : _event$detail4.source;
               if (typeof moduleFilePath === "string" && source !== undefined) {
-                valStore.update(moduleFilePath, source);
-                if (!props.disableRefresh) {
+                var changed = valStore.update(moduleFilePath, source);
+                /**
+                 * Armed by a CHANGE, not by a message.
+                 *
+                 * The editor re-sends everything it holds whenever this page
+                 * becomes a new document — a reload, or the one `next dev` does
+                 * when a publish rewrites the `.val.ts` files — and most of that
+                 * snapshot is content this page already has. Counting those
+                 * bought a whole-route request per publish whether or not the
+                 * page was out of date, which with auto-save on is one per pause
+                 * in typing.
+                 *
+                 * The catch-up that MATTERS still refreshes: a page whose server
+                 * render predates the write has no value for that module, so the
+                 * first arrival counts as a change.
+                 */
+                if (changed && !props.disableRefresh) {
                   rerenderCounterRef.current++;
                   window.dispatchEvent(new Event(VAL_EDIT_LANDED));
                 }

package/dist/{ValNextProvider-3d8ebfec.cjs.dev.js → ValNextProvider-f206d2ea.cjs.dev.js}

@@ -10,12 +10,12 @@ var ui = require('@valbuild/ui');
 var navigation = require('next/navigation');
 var Script = require('next/script');
 var React = require('react');
-var ValOverlayContext = require('./ValOverlayContext-ca3b6ebd.cjs.dev.js');
+var ValOverlayContext = require('./ValOverlayContext-5bd7628b.cjs.dev.js');
 var stega = require('@valbuild/react/stega');
 var internal = require('@valbuild/shared/internal');
 var fallbackColors = require('./fallbackColors-9a2ac53a.cjs.dev.js');
 var createForOfIteratorHelper = require('./createForOfIteratorHelper-0445603c.cjs.dev.js');
-var ValCanvasBridge = require('./ValCanvasBridge-cb2d9112.cjs.dev.js');
+var ValCanvasBridge = require('./ValCanvasBridge-9d148bdd.cjs.dev.js');
 var jsxRuntime = require('react/jsx-runtime');
 require('./unsupportedIterableToArray-c8ab77c9.cjs.dev.js');
 require('./defineProperty-f90345d7.cjs.dev.js');
@@ -146,6 +146,38 @@ var SAFETY_REFRESH_WINDOW_MS = 30000;
  * be torn down and rebuilt per keystroke.
  */
 var VAL_EDIT_LANDED = "val-edit-landed";
+
+/**
+ * How often `/draft/stat` is asked when nothing is in progress.
+ *
+ * Draft mode changes when someone toggles it, which the handshake below already
+ * covers — so this is only there to notice it being changed somewhere else.
+ */
+var DRAFT_IDLE_POLL_MS = 20000;
+
+/**
+ * And how often while the enable/disable handshake is in flight.
+ *
+ * Fast on purpose: the hidden iframe redirects through `/draft/enable`, and the
+ * page cannot do anything useful until that has landed.
+ */
+var DRAFT_HANDSHAKE_POLL_MS = 100;
+
+/**
+ * How long that fast phase may last before it gives up.
+ *
+ * Without a deadline it does not end: the only thing that clears `iframeSrc` is
+ * a `val-ready` message posted by the redirect target, so a frame that fails to
+ * load — a 500, an auth redirect, a dev server still compiling — left the page
+ * asking ten times a second, forever. A browser runs about six connections per
+ * origin, so that is enough to push `/stat`, `/patches` and the canvas document
+ * itself into the browser's own queue, where they are indistinguishable from a
+ * slow server.
+ *
+ * Generous enough for a first compile in `next dev`, which is the slowest case
+ * that is not a fault.
+ */
+var DRAFT_HANDSHAKE_TIMEOUT_MS = 10000;
 var ValNextProvider = function ValNextProvider(props) {
   var _draftModeReady$curre2;
   // TODO: use config:
@@ -491,9 +523,32 @@ var ValNextProvider = function ValNextProvider(props) {
           return;
         }
         pollDraftStatIdRef.current--;
-        timeout = setTimeout(pollCurrentDraftMode, iframeSrc === null ? 20000 : 100);
+        var handshaking = iframeSrc !== null;
+        if (handshaking && Date.now() - startedAt > DRAFT_HANDSHAKE_TIMEOUT_MS) {
+          /**
+           * The handshake did not complete, so stop hammering.
+           *
+           * Clearing `iframeSrc` unmounts the hidden frame and takes the poll
+           * back to its idle interval — which is the honest state: nothing is
+           * in progress any more. Leaving it set is what made this
+           * unrecoverable, because the ONLY other thing that clears it is the
+           * `val-ready` message the frame never sent.
+           */
+          console.warn("Val: draft mode did not confirm in time. Falling back to the " + "idle poll — try toggling preview again.");
+          setIframeSrc(null);
+          return;
+        }
+        timeout = setTimeout(pollCurrentDraftMode, handshaking ? DRAFT_HANDSHAKE_POLL_MS : DRAFT_IDLE_POLL_MS);
       });
     }
+    /**
+     * When this spell of polling began.
+     *
+     * The effect re-runs when `iframeSrc` changes, so for the fast phase this is
+     * the moment the handshake started — which is what the deadline below is
+     * measured from.
+     */
+    var startedAt = Date.now();
     pollCurrentDraftMode();
     return function () {
       clearTimeout(timeout);
@@ -528,8 +583,23 @@ var ValNextProvider = function ValNextProvider(props) {
               var moduleFilePath = (_event$detail3 = event.detail) === null || _event$detail3 === void 0 ? void 0 : _event$detail3.moduleFilePath;
               var source = (_event$detail4 = event.detail) === null || _event$detail4 === void 0 ? void 0 : _event$detail4.source;
               if (typeof moduleFilePath === "string" && source !== undefined) {
-                valStore.update(moduleFilePath, source);
-                if (!props.disableRefresh) {
+                var changed = valStore.update(moduleFilePath, source);
+                /**
+                 * Armed by a CHANGE, not by a message.
+                 *
+                 * The editor re-sends everything it holds whenever this page
+                 * becomes a new document — a reload, or the one `next dev` does
+                 * when a publish rewrites the `.val.ts` files — and most of that
+                 * snapshot is content this page already has. Counting those
+                 * bought a whole-route request per publish whether or not the
+                 * page was out of date, which with auto-save on is one per pause
+                 * in typing.
+                 *
+                 * The catch-up that MATTERS still refreshes: a page whose server
+                 * render predates the write has no value for that module, so the
+                 * first arrival counts as a change.
+                 */
+                if (changed && !props.disableRefresh) {
                   rerenderCounterRef.current++;
                   window.dispatchEvent(new Event(VAL_EDIT_LANDED));
                 }

package/dist/{ValOverlayContext-ca3b6ebd.cjs.dev.js → ValOverlayContext-5bd7628b.cjs.dev.js}

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var createForOfIteratorHelper = require('./createForOfIteratorHelper-0445603c.cjs.dev.js');
 var defineProperty = require('./defineProperty-f90345d7.cjs.dev.js');
+var patch = require('@valbuild/core/patch');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 require('./unsupportedIterableToArray-c8ab77c9.cjs.dev.js');
@@ -181,8 +182,36 @@ var ValExternalStore = /*#__PURE__*/function () {
   }
   return _createClass(ValExternalStore, [{
     key: "update",
-    value: function update(path, source) {
+    value:
+    /**
+     * Take a module's source from the editor.
+     *
+     * Returns whether this actually MOVED the value, which the caller needs and
+     * cannot work out for itself: the same source arrives more than once by
+     * design. The editor sends a catch-up snapshot of everything it holds every
+     * time the page becomes a new document — a reload, or the one `next dev` does
+     * when a publish rewrites the `.val.ts` files — and most of that snapshot is
+     * content this page already has.
+     *
+     * Without the answer, `ValNextProvider` armed its `router.refresh()` loop on
+     * the arrival rather than on the change, so every publish bought a whole-route
+     * request whether or not the page was out of date. With auto-save on that is
+     * one per pause in typing, which in development is a re-render (and sometimes
+     * a recompile) of the page — and it is what leaves the canvas looking
+     * permanently busy.
+     */
+    function update(path, source) {
+      // `Json` has no `undefined`, so absent and "stored as undefined" cannot be
+      // confused: a miss here means this page has never been given this module.
+      var before = this.loadedSources.get(path);
+      var changed = before === undefined || !patch.deepEqual(before, source);
       this.loadedSources.set(path, source);
+      if (!changed) {
+        // Nothing downstream to do: every subscriber's snapshot still answers
+        // with the same value, so invalidating them would be a re-render that
+        // shows exactly what is already on screen.
+        return false;
+      }
       // Invalidate cached snapshots that include this path so the next get()
       // rebuilds a fresh (new-reference) record, then notify their listeners.
       for (var _i = 0, _Array$from = Array.from(this.snapshots.keys()); _i < _Array$from.length; _i++) {
@@ -210,6 +239,7 @@ var ValExternalStore = /*#__PURE__*/function () {
         var listener = _Array$from2[_i2];
         listener();
       }
+      return true;
     }
   }, {
     key: "emitChange",

package/dist/ValOverlayContext-d690744f.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./ValOverlayContext-d690744f.cjs.prod.js");
+} else {
+  module.exports = require("./ValOverlayContext-d690744f.cjs.dev.js");
+}

package/dist/{ValOverlayContext-1d019b95.cjs.prod.js → ValOverlayContext-d690744f.cjs.prod.js}

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var createForOfIteratorHelper = require('./createForOfIteratorHelper-d4afcad8.cjs.prod.js');
 var defineProperty = require('./defineProperty-8951f469.cjs.prod.js');
+var patch = require('@valbuild/core/patch');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 require('./unsupportedIterableToArray-0d2087a2.cjs.prod.js');
@@ -181,8 +182,36 @@ var ValExternalStore = /*#__PURE__*/function () {
   }
   return _createClass(ValExternalStore, [{
     key: "update",
-    value: function update(path, source) {
+    value:
+    /**
+     * Take a module's source from the editor.
+     *
+     * Returns whether this actually MOVED the value, which the caller needs and
+     * cannot work out for itself: the same source arrives more than once by
+     * design. The editor sends a catch-up snapshot of everything it holds every
+     * time the page becomes a new document — a reload, or the one `next dev` does
+     * when a publish rewrites the `.val.ts` files — and most of that snapshot is
+     * content this page already has.
+     *
+     * Without the answer, `ValNextProvider` armed its `router.refresh()` loop on
+     * the arrival rather than on the change, so every publish bought a whole-route
+     * request whether or not the page was out of date. With auto-save on that is
+     * one per pause in typing, which in development is a re-render (and sometimes
+     * a recompile) of the page — and it is what leaves the canvas looking
+     * permanently busy.
+     */
+    function update(path, source) {
+      // `Json` has no `undefined`, so absent and "stored as undefined" cannot be
+      // confused: a miss here means this page has never been given this module.
+      var before = this.loadedSources.get(path);
+      var changed = before === undefined || !patch.deepEqual(before, source);
       this.loadedSources.set(path, source);
+      if (!changed) {
+        // Nothing downstream to do: every subscriber's snapshot still answers
+        // with the same value, so invalidating them would be a re-render that
+        // shows exactly what is already on screen.
+        return false;
+      }
       // Invalidate cached snapshots that include this path so the next get()
       // rebuilds a fresh (new-reference) record, then notify their listeners.
       for (var _i = 0, _Array$from = Array.from(this.snapshots.keys()); _i < _Array$from.length; _i++) {
@@ -210,6 +239,7 @@ var ValExternalStore = /*#__PURE__*/function () {
         var listener = _Array$from2[_i2];
         listener();
       }
+      return true;
     }
   }, {
     key: "emitChange",

package/dist/{ValOverlayContext-f63e0fc9.esm.js → ValOverlayContext-e42a2e14.esm.js}

@@ -1,6 +1,7 @@
 'use client';
 import { _ as _createForOfIteratorHelper } from './createForOfIteratorHelper-5758a730.esm.js';
 import { a as _toPropertyKey, _ as _defineProperty } from './defineProperty-cca5affa.esm.js';
+import { deepEqual } from '@valbuild/core/patch';
 import React from 'react';
 import { jsx } from 'react/jsx-runtime';
 import './unsupportedIterableToArray-5baabfdc.esm.js';
@@ -173,8 +174,36 @@ var ValExternalStore = /*#__PURE__*/function () {
   }
   return _createClass(ValExternalStore, [{
     key: "update",
-    value: function update(path, source) {
+    value:
+    /**
+     * Take a module's source from the editor.
+     *
+     * Returns whether this actually MOVED the value, which the caller needs and
+     * cannot work out for itself: the same source arrives more than once by
+     * design. The editor sends a catch-up snapshot of everything it holds every
+     * time the page becomes a new document — a reload, or the one `next dev` does
+     * when a publish rewrites the `.val.ts` files — and most of that snapshot is
+     * content this page already has.
+     *
+     * Without the answer, `ValNextProvider` armed its `router.refresh()` loop on
+     * the arrival rather than on the change, so every publish bought a whole-route
+     * request whether or not the page was out of date. With auto-save on that is
+     * one per pause in typing, which in development is a re-render (and sometimes
+     * a recompile) of the page — and it is what leaves the canvas looking
+     * permanently busy.
+     */
+    function update(path, source) {
+      // `Json` has no `undefined`, so absent and "stored as undefined" cannot be
+      // confused: a miss here means this page has never been given this module.
+      var before = this.loadedSources.get(path);
+      var changed = before === undefined || !deepEqual(before, source);
       this.loadedSources.set(path, source);
+      if (!changed) {
+        // Nothing downstream to do: every subscriber's snapshot still answers
+        // with the same value, so invalidating them would be a re-render that
+        // shows exactly what is already on screen.
+        return false;
+      }
       // Invalidate cached snapshots that include this path so the next get()
       // rebuilds a fresh (new-reference) record, then notify their listeners.
       for (var _i = 0, _Array$from = Array.from(this.snapshots.keys()); _i < _Array$from.length; _i++) {
@@ -202,6 +231,7 @@ var ValExternalStore = /*#__PURE__*/function () {
         var listener = _Array$from2[_i2];
         listener();
       }
+      return true;
     }
   }, {
     key: "emitChange",

package/dist/valbuild-next.cjs.dev.js

@@ -7,7 +7,7 @@ var objectSpread2 = require('./objectSpread2-58024783.cjs.dev.js');
 var core = require('@valbuild/core');
 var stega = require('@valbuild/react/stega');
 var internal = require('@valbuild/react/internal');
-var ValNextProvider = require('./ValNextProvider-3d8ebfec.cjs.dev.js');
+var ValNextProvider = require('./ValNextProvider-f206d2ea.cjs.dev.js');
 var NextImage = require('next/image');
 var jsxRuntime = require('react/jsx-runtime');
 var ValApp = require('./ValApp-c1c3ef55.cjs.dev.js');

package/dist/valbuild-next.cjs.prod.js

@@ -7,7 +7,7 @@ var objectSpread2 = require('./objectSpread2-13f847a9.cjs.prod.js');
 var core = require('@valbuild/core');
 var stega = require('@valbuild/react/stega');
 var internal = require('@valbuild/react/internal');
-var ValNextProvider = require('./ValNextProvider-3fdf8756.cjs.prod.js');
+var ValNextProvider = require('./ValNextProvider-bd3f89d3.cjs.prod.js');
 var NextImage = require('next/image');
 var jsxRuntime = require('react/jsx-runtime');
 var ValApp = require('./ValApp-90c4171d.cjs.prod.js');

package/dist/valbuild-next.esm.js

@@ -6,7 +6,7 @@ export { core as expr };
 export { GenericSelector, Schema, VAL_EXTENSION, derefPatch, modules } from '@valbuild/core';
 import { stegaEncode, stegaDecodeStrings, attrs, raw, autoTagJSX } from '@valbuild/react/stega';
 export { ValRichText } from '@valbuild/react/internal';
-import { ValNextProvider } from './ValNextProvider-3209948c.esm.js';
+import { ValNextProvider } from './ValNextProvider-588f2ff0.esm.js';
 import NextImage from 'next/image';
 import { jsx } from 'react/jsx-runtime';
 export { ValApp } from './ValApp-e17eb734.esm.js';

package/package.json

@@ -12,7 +12,7 @@
     "next",
     "react"
   ],
-  "version": "0.108.2",
+  "version": "0.108.4",
   "main": "dist/valbuild-next.cjs.js",
   "module": "dist/valbuild-next.esm.js",
   "exports": {
@@ -48,11 +48,11 @@
     "client-only": "^0.0.1",
     "server-only": "^0.0.1",
     "@valbuild/core": "0.106.0",
-    "@valbuild/language-server": "0.108.2",
-    "@valbuild/react": "0.108.2",
-    "@valbuild/ui": "0.108.2",
+    "@valbuild/language-server": "0.108.4",
+    "@valbuild/react": "0.108.4",
+    "@valbuild/server": "0.108.4",
     "@valbuild/shared": "0.108.0",
-    "@valbuild/server": "0.108.2"
+    "@valbuild/ui": "0.108.4"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.3",

package/dist/ValCanvasBridge-32299c6e.cjs.js

@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === "production") {
-  module.exports = require("./ValCanvasBridge-32299c6e.cjs.prod.js");
-} else {
-  module.exports = require("./ValCanvasBridge-32299c6e.cjs.dev.js");
-}

package/dist/ValNextProvider-3fdf8756.cjs.js

@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === "production") {
-  module.exports = require("./ValNextProvider-3fdf8756.cjs.prod.js");
-} else {
-  module.exports = require("./ValNextProvider-3fdf8756.cjs.dev.js");
-}

package/dist/ValOverlayContext-1d019b95.cjs.js

@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === "production") {
-  module.exports = require("./ValOverlayContext-1d019b95.cjs.prod.js");
-} else {
-  module.exports = require("./ValOverlayContext-1d019b95.cjs.dev.js");
-}