@valbuild/next 0.101.1 → 0.103.0

package/dist/{ValNextProvider-7302b8af.esm.js → ValNextProvider-3209948c.esm.js}

@@ -6,11 +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-3c37e5a7.esm.js';
+import { ValExternalStore, ValOverlayProvider } from './ValOverlayContext-f63e0fc9.esm.js';
 import { SET_AUTO_TAG_JSX_ENABLED } from '@valbuild/react/stega';
-import { VAL_THEME_SESSION_STORAGE_KEY, createValClient } from '@valbuild/shared/internal';
-import { p as prefixStyles, u as useConfigStorageSave, v as valPrefixedClass, c as cn } from './cssUtils-b5651c03.esm.js';
+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-d8713d9d.esm.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import './unsupportedIterableToArray-5baabfdc.esm.js';
 import './defineProperty-cca5affa.esm.js';
@@ -67,7 +68,77 @@ function hasValEnableCookie(cookieString) {
   return false;
 }
 
+/**
+ * Whether the page should re-read the server on its own, right now.
+ *
+ * The page cannot know when its own edit has been persisted. An edit is applied
+ * to the client store immediately and written to the server asynchronously, so
+ * a `router.refresh()` fired on the edit can reach a server that has not saved
+ * the patch yet: the payload comes back with the old content, and nothing
+ * schedules another look. What an editor sees is a canvas that flickered and did
+ * not change — which is indistinguishable from an edit that did not work.
+ *
+ * So the page asks again a little later. This is the "should I bother" half of
+ * that, kept out of the effect and pure so the reasons NOT to are checkable:
+ * every one of them is a whole-route request avoided, and in development Next
+ * re-renders (and sometimes recompiles) the page for each one.
+ */
+function shouldSafetyRefresh(state) {
+  // Never edited: a preview someone is only looking at has nothing to catch up
+  // on, and polling it would cost a route render per tick for nothing.
+  if (state.lastEditAt === 0) return false;
+  // The editing stopped long enough ago that anything in flight has landed.
+  if (state.now - state.lastEditAt > state.windowMs) return false;
+  // Nobody is looking. The caller refreshes once on the way back instead.
+  if (state.hidden) return false;
+  // Already on its way. Stacking whole-route requests makes the slowness this
+  // exists to paper over worse, not better.
+  if (state.isRefreshing) return false;
+  // One just went out — usually the edit-driven refresh, a moment ago.
+  if (state.now - state.lastRefreshAt < state.minIntervalMs) return false;
+  return true;
+}
+
+var REFRESH_INTERVAL_MS = 500;
+
+/**
+ * How often the page re-reads the server on its own, without being told to.
+ *
+ * A safety net for a race no amount of care on this side can close. An edit is
+ * applied to the client store immediately and saved to the server
+ * asynchronously, so `router.refresh()` fired on the edit can reach a server
+ * that has not written the patch yet: the RSC payload comes back with the old
+ * content, the counter has already been cleared, and nothing schedules another
+ * look. What you see is a canvas that flickered and did not change — which is
+ * indistinguishable from an edit that did not work.
+ *
+ * The honest fix would be for the page to know when its patch has been
+ * persisted, and it has no way to ask. So it asks again a little later instead.
+ */
+var SAFETY_REFRESH_MS = 10000;
+
+/**
+ * How long after an edit the safety net keeps looking.
+ *
+ * The reason to stop is that this is a whole-route request: in development Next
+ * re-renders (and sometimes recompiles) the page for every one, and a preview
+ * nobody is editing has nothing to catch up on. So the net is armed by editing
+ * and disarms itself when the editing stops — long enough after the last
+ * keystroke that any write still in flight has certainly landed.
+ */
+var SAFETY_REFRESH_WINDOW_MS = 30000;
+
+/**
+ * Fired on this window when an edit has been applied to the client store.
+ *
+ * The refresh loop listens for it so it can start the round trip immediately
+ * rather than on its next tick. A DOM event rather than state, because the
+ * counter it accompanies is a ref and the loop lives in an effect that must not
+ * be torn down and rebuilt per keystroke.
+ */
+var VAL_EDIT_LANDED = "val-edit-landed";
 var ValNextProvider = function ValNextProvider(props) {
+  var _draftModeReady$curre2;
   // TODO: use config:
   var route = "/api/val";
   var client = React.useMemo(function () {
@@ -93,28 +164,102 @@ var ValNextProvider = function ValNextProvider(props) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     suspendActive = _React$useState2[0],
     setSuspendActive = _React$useState2[1];
-  var _React$useState3 = React.useState(),
+  /**
+   * Whether the studio has said it sent everything it holds.
+   *
+   * Until then, a module missing from the store might still be on its way. After
+   * it, a missing module simply has no draft — see `sourcesSynced` in the canvas
+   * protocol. Without this the page could only wait out `waitForLoad`'s timeout,
+   * ten seconds per module nobody had edited.
+   */
+  var _React$useState3 = React.useState(false),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
-    mountOverlay = _React$useState4[0],
-    setMountOverlay = _React$useState4[1];
-  var _React$useState5 = React.useState(null),
+    draftSourcesSynced = _React$useState4[0],
+    setDraftSourcesSynced = _React$useState4[1];
+  var _React$useState5 = React.useState(),
     _React$useState6 = _slicedToArray(_React$useState5, 2),
-    draftMode = _React$useState6[0],
-    setDraftMode = _React$useState6[1];
+    mountOverlay = _React$useState6[0],
+    setMountOverlay = _React$useState6[1];
+  /**
+   * Whether this document is the studio's canvas frame.
+   *
+   * The canvas needs everything `mountOverlay` turns on — draft content,
+   * `data-val-path` on every tracked element, the refresh loop that brings an
+   * edit across — and none of what it *shows*, because the studio around the
+   * frame is already that UI. So it is a second flag rather than a different
+   * value of the first one: two overlays on one screen, one of them inside the
+   * other, is the thing to avoid.
+   *
+   * Read once, in the same effect as `mountOverlay`: it is a property of how
+   * the document was loaded, and it cannot change without a navigation.
+   */
   var _React$useState7 = React.useState(false),
     _React$useState8 = _slicedToArray(_React$useState7, 2),
-    spaReady = _React$useState8[0],
-    setSpaReady = _React$useState8[1]; // TODO: consider removing spaReady - it is not used? If we remove, clean up the custom events that send the message too...
+    isCanvas = _React$useState8[0],
+    setIsCanvas = _React$useState8[1];
+  var _React$useState9 = React.useState(null),
+    _React$useState0 = _slicedToArray(_React$useState9, 2),
+    draftMode = _React$useState0[0],
+    setDraftMode = _React$useState0[1];
+  /**
+   * Resolves when `draftMode` stops being unknown.
+   *
+   * `null` is the state before `/draft/stat` has answered, and it is NOT a
+   * synonym for "off": the reader that turns a selector into content treats it
+   * as off, so a render that happens while draft mode is still unknown resolves
+   * against committed source. For a route that only exists in an uncommitted
+   * patch that means `notFound()` — terminal, before the answer even arrives.
+   *
+   * So a page that is going to suspend waits for the answer first. A promise
+   * rather than a re-render, because the thing that has to wait is a render.
+   */
+  var draftModeReady = React.useRef(null);
+  // Only for a page that opted in. A visitor with Val off never reads it, and
+  // an object created per mount for nobody is the kind of cost that is invisible
+  // until it is in every page of every app.
+  if (props.suspend && draftModeReady.current === null) {
+    var resolve = function resolve() {
+      return undefined;
+    };
+    var promise = new Promise(function (r) {
+      resolve = r;
+    });
+    draftModeReady.current = {
+      promise: promise,
+      resolve: resolve
+    };
+  }
+  React.useEffect(function () {
+    if (draftMode !== null) {
+      var _draftModeReady$curre;
+      (_draftModeReady$curre = draftModeReady.current) === null || _draftModeReady$curre === void 0 || _draftModeReady$curre.resolve();
+    }
+  }, [draftMode]);
+  var _React$useState1 = React.useState(false),
+    _React$useState10 = _slicedToArray(_React$useState1, 2),
+    spaReady = _React$useState10[0],
+    setSpaReady = _React$useState10[1]; // TODO: consider removing spaReady - it is not used? If we remove, clean up the custom events that send the message too...
   var router = useRouter();
   var _React$useTransition = React.useTransition(),
     _React$useTransition2 = _slicedToArray(_React$useTransition, 2),
+    isRefreshing = _React$useTransition2[0],
     startTransition = _React$useTransition2[1];
+  /**
+   * The same answer as `isRefreshing`, readable from the refresh effect.
+   *
+   * The effect must not be rebuilt every time a refresh starts and ends — it
+   * owns the timers and the "when did we last edit" bookkeeping, and tearing
+   * that down mid-flurry loses it. A ref updated on render is the value without
+   * the dependency.
+   */
+  var isRefreshingRef = React.useRef(false);
   var rerenderCounterRef = React.useRef(0);
-  var _React$useState9 = React.useState(null),
-    _React$useState0 = _slicedToArray(_React$useState9, 2),
-    iframeSrc = _React$useState0[0],
-    setIframeSrc = _React$useState0[1];
+  var _React$useState11 = React.useState(null),
+    _React$useState12 = _slicedToArray(_React$useState11, 2),
+    iframeSrc = _React$useState12[0],
+    setIframeSrc = _React$useState12[1];
   var pathname = usePathname();
+  isRefreshingRef.current = isRefreshing;
   useEffect(function () {
     window.dispatchEvent(new CustomEvent("val-provider:pathname", {
       detail: pathname
@@ -130,6 +275,7 @@ var ValNextProvider = function ValNextProvider(props) {
       setMountOverlay(false);
       return;
     }
+    setIsCanvas(isValCanvasFrame(location.search));
     setMountOverlay(hasValEnableCookie(document.cookie));
   }, []);
   React.useEffect(function () {
@@ -145,22 +291,101 @@ var ValNextProvider = function ValNextProvider(props) {
       });
     }
   }, [props.suspend]);
+
+  /**
+   * Re-render the server tree when an edit lands, then at most every 500ms.
+   *
+   * Leading edge, which is the whole point. This polled every 500ms and only
+   * refreshed on the tick, so a keystroke waited up to half a second before the
+   * round trip even began — pure dead time on top of a request that is already
+   * the slow part in development. Refreshing on arrival and *then* enforcing the
+   * gap keeps the same ceiling on requests while removing the wait.
+   *
+   * Still a counter rather than a boolean: edits that arrive during the gap have
+   * to be picked up by the next refresh, and the count is what says whether
+   * there are any.
+   */
   React.useEffect(function () {
-    if (!mountOverlay) {
+    if (!mountOverlay || props.disableRefresh) {
       return;
     }
-    var interval = setInterval(function () {
-      if (rerenderCounterRef.current > 0) {
-        if (!props.disableRefresh) {
-          rerenderCounterRef.current = 0;
-          startTransition(function () {
-            router.refresh();
-          });
-        }
+    var timer = null;
+    var lastRefreshAt = 0;
+    /** When an edit last landed here. 0 means this page has never been edited. */
+    var lastEditAt = 0;
+    /** Whether a safety tick was skipped because nobody was looking. */
+    var missedWhileHidden = false;
+    var refresh = function refresh() {
+      rerenderCounterRef.current = 0;
+      lastRefreshAt = Date.now();
+      startTransition(function () {
+        router.refresh();
+      });
+    };
+    var _tick = function tick() {
+      timer = null;
+      if (rerenderCounterRef.current === 0) return;
+      var since = Date.now() - lastRefreshAt;
+      if (since >= REFRESH_INTERVAL_MS) {
+        refresh();
+      } else {
+        timer = setTimeout(_tick, REFRESH_INTERVAL_MS - since);
       }
-    }, 500);
+    };
+    var onEdit = function onEdit() {
+      lastEditAt = Date.now();
+      if (timer !== null) return;
+      timer = setTimeout(_tick, 0);
+    };
+    window.addEventListener(VAL_EDIT_LANDED, onEdit);
+    // A backstop for the counter being bumped without the event — the two are
+    // incremented in the same places today, but the poll is what made this
+    // correct regardless of who bumped it.
+    var interval = setInterval(_tick, REFRESH_INTERVAL_MS);
+
+    /**
+     * The safety net: look again, whether or not anything told us to.
+     *
+     * The reasons not to are in `shouldSafetyRefresh`, where they can be tested.
+     * `hidden` is the one this side has to remember something about: a skipped
+     * tick is worth one look when the tab comes back.
+     */
+    var safetyTick = function safetyTick() {
+      if (document.hidden) {
+        missedWhileHidden = true;
+        return;
+      }
+      var go = shouldSafetyRefresh({
+        now: Date.now(),
+        lastEditAt: lastEditAt,
+        lastRefreshAt: lastRefreshAt,
+        hidden: false,
+        isRefreshing: isRefreshingRef.current,
+        windowMs: SAFETY_REFRESH_WINDOW_MS,
+        minIntervalMs: REFRESH_INTERVAL_MS
+      });
+      if (go) refresh();
+    };
+    var safety = setInterval(safetyTick, SAFETY_REFRESH_MS);
+    /**
+     * Coming back to the tab is worth one look.
+     *
+     * Otherwise a background tab skips its ticks and then has to wait out a
+     * whole interval on return — which is exactly the moment someone is looking
+     * at the page to see whether their edit took.
+     */
+    var onVisibilityChange = function onVisibilityChange() {
+      if (document.hidden || !missedWhileHidden) return;
+      missedWhileHidden = false;
+      safetyTick();
+    };
+    document.addEventListener("visibilitychange", onVisibilityChange);
     return function () {
+      window.removeEventListener(VAL_EDIT_LANDED, onEdit);
+      document.removeEventListener("visibilitychange", onVisibilityChange);
       clearInterval(interval);
+      clearInterval(safety);
+      if (timer !== null) clearTimeout(timer);
     };
   }, [mountOverlay, props.disableRefresh]);
   React.useEffect(function () {
@@ -245,6 +470,7 @@ var ValNextProvider = function ValNextProvider(props) {
         setDraftMode(function (prev) {
           if (prev !== res.json.draftMode) {
             rerenderCounterRef.current++;
+            window.dispatchEvent(new Event(VAL_EDIT_LANDED));
             return res.json.draftMode;
           }
           return prev;
@@ -283,15 +509,20 @@ var ValNextProvider = function ValNextProvider(props) {
         SET_AUTO_TAG_JSX_ENABLED(true);
         var reactServerComponentRefreshListener = function reactServerComponentRefreshListener(event) {
           if (event instanceof CustomEvent) {
-            var _event$detail;
-            if (((_event$detail = event.detail) === null || _event$detail === void 0 ? void 0 : _event$detail.type) === "source-update") {
-              var _event$detail2, _event$detail3;
-              var moduleFilePath = (_event$detail2 = event.detail) === null || _event$detail2 === void 0 ? void 0 : _event$detail2.moduleFilePath;
-              var source = (_event$detail3 = event.detail) === null || _event$detail3 === void 0 ? void 0 : _event$detail3.source;
+            var _event$detail, _event$detail2;
+            if (((_event$detail = event.detail) === null || _event$detail === void 0 ? void 0 : _event$detail.type) === "sources-synced") {
+              setDraftSourcesSynced(true);
+              return;
+            }
+            if (((_event$detail2 = event.detail) === null || _event$detail2 === void 0 ? void 0 : _event$detail2.type) === "source-update") {
+              var _event$detail3, _event$detail4;
+              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) {
                   rerenderCounterRef.current++;
+                  window.dispatchEvent(new Event(VAL_EDIT_LANDED));
                 }
               } else {
                 console.error("Val: invalid event detail", event.detail);
@@ -331,10 +562,10 @@ var ValNextProvider = function ValNextProvider(props) {
       window.dispatchEvent(new CustomEvent("val-append-overlay"));
     }
   });
-  var _React$useState1 = React.useState(null),
-    _React$useState10 = _slicedToArray(_React$useState1, 2),
-    dropZone = _React$useState10[0],
-    setDropZone = _React$useState10[1];
+  var _React$useState13 = React.useState(null),
+    _React$useState14 = _slicedToArray(_React$useState13, 2),
+    dropZone = _React$useState14[0],
+    setDropZone = _React$useState14[1];
   React.useEffect(function () {
     var storedDropZone = localStorage.getItem("val-menu-drop-zone-default");
     if (storedDropZone) {
@@ -347,10 +578,10 @@ var ValNextProvider = function ValNextProvider(props) {
   var initTheme = React.useMemo(function () {
     return initSessionTheme(props.config);
   }, [props.config]);
-  var _React$useState11 = React.useState(false),
-    _React$useState12 = _slicedToArray(_React$useState11, 2),
-    spaLoaded = _React$useState12[0],
-    setSpaLoaded = _React$useState12[1];
+  var _React$useState15 = React.useState(false),
+    _React$useState16 = _slicedToArray(_React$useState15, 2),
+    spaLoaded = _React$useState16[0],
+    setSpaLoaded = _React$useState16[1];
   React.useEffect(function () {
     var listener = function listener() {
       setSpaLoaded(true);
@@ -360,12 +591,13 @@ var ValNextProvider = function ValNextProvider(props) {
       window.removeEventListener("val-ui-created", listener);
     };
   }, []);
+  // The pill is Val's chrome floating over the customer's page, so it takes
+  // the float background rather than the studio's canvas.
   var _React$useMemo = React.useMemo(function () {
       if (initTheme !== "light") {
-        return ["#0c111d", "white"];
-      } else {
-        return ["white", "black"];
+        return [floatDarkBg, "white"];
       }
+      return [floatLightBg, "black"];
     }, [initTheme]),
     _React$useMemo2 = _slicedToArray(_React$useMemo, 2),
     backgroundColor = _React$useMemo2[0],
@@ -390,9 +622,13 @@ var ValNextProvider = function ValNextProvider(props) {
   }, [valPrefixedClass]);
   return /*#__PURE__*/jsxs(ValOverlayProvider, {
     draftMode: draftMode,
+    draftModeReady: (_draftModeReady$curre2 = draftModeReady.current) === null || _draftModeReady$curre2 === void 0 ? void 0 : _draftModeReady$curre2.promise,
+    draftSourcesSynced: draftSourcesSynced,
     suspend: suspendActive,
     store: valStore,
-    children: [props.children, dropZone !== null && !spaLoaded && mountOverlay && initTheme !== null && /*#__PURE__*/jsxs(React.Fragment, {
+    children: [props.children, dropZone !== null && !spaLoaded && mountOverlay &&
+    // The canvas frame loads no SPA, so its pill would spin for ever.
+    !isCanvas && initTheme !== null && /*#__PURE__*/jsxs(React.Fragment, {
       children: [/*#__PURE__*/jsx("style", {
         children: "\n".concat(positionStyles, "\n").concat(prefixStyles(commonStyles), "\n@keyframes rotate-clock {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n")
       }), /*#__PURE__*/jsx("div", {
@@ -435,7 +671,7 @@ var ValNextProvider = function ValNextProvider(props) {
           })
         })
       })]
-    }), mountOverlay && /*#__PURE__*/jsxs(React.Fragment, {
+    }), mountOverlay && !isCanvas && /*#__PURE__*/jsxs(React.Fragment, {
       children: [/*#__PURE__*/jsx(Script, {
         type: "module",
         src: "".concat(route, "/static").concat(VERSION ? "/".concat(VERSION) : "").concat(VAL_APP_PATH),
@@ -444,6 +680,9 @@ var ValNextProvider = function ValNextProvider(props) {
         id: VAL_OVERLAY_ID,
         ref: container
       })]
+    }), mountOverlay && isCanvas && /*#__PURE__*/jsx(ValCanvasBridge, {
+      draftMode: draftMode === true,
+      isRefreshing: isRefreshing
     }), mountOverlay && iframeSrc && /*#__PURE__*/jsx("iframe", {
       loading: "eager",
       style: {