@valbuild/next 0.96.3 → 0.97.1

package/dist/{ValNextProvider-26ef0c1c.cjs.dev.js → ValNextProvider-03a9f8fd.cjs.dev.js}

@@ -4,18 +4,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var slicedToArray = require('./slicedToArray-44036a76.cjs.dev.js');
-var objectSpread2 = require('./objectSpread2-792eb2c2.cjs.dev.js');
+var objectSpread2 = require('./objectSpread2-58024783.cjs.dev.js');
 var core = require('@valbuild/core');
 var ui = require('@valbuild/ui');
 var navigation = require('next/navigation');
 var Script = require('next/script');
 var React = require('react');
-var ValOverlayContext = require('./ValOverlayContext-c82a4507.cjs.dev.js');
+var ValOverlayContext = require('./ValOverlayContext-c6f27a6d.cjs.dev.js');
 var stega = require('@valbuild/react/stega');
 var internal = require('@valbuild/shared/internal');
 var cssUtils = require('./cssUtils-9c11102f.cjs.dev.js');
+var createForOfIteratorHelper = require('./createForOfIteratorHelper-0445603c.cjs.dev.js');
 var jsxRuntime = require('react/jsx-runtime');
 require('./unsupportedIterableToArray-c8ab77c9.cjs.dev.js');
+require('./defineProperty-f90345d7.cjs.dev.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -41,6 +43,39 @@ function initSessionTheme(config) {
   return theme;
 }
 
+/**
+ * Returns true if the Val Enable cookie is set to "true" in the given cookie
+ * string (typically `document.cookie`).
+ *
+ * Exact-token match: a naive `includes("val_enable=true")` would also match
+ * unrelated cookies like `xval_enable=true`. The server sets the cookie to
+ * "false" (rather than deleting it) on disable, so the value must be checked
+ * too.
+ */
+function hasValEnableCookie(cookieString) {
+  var _iterator = createForOfIteratorHelper._createForOfIteratorHelper(cookieString.split(";")),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var part = _step.value;
+      var eq = part.indexOf("=");
+      if (eq === -1) {
+        continue;
+      }
+      var name = part.slice(0, eq).trim();
+      var value = part.slice(eq + 1).trim();
+      if (name === core.Internal.VAL_ENABLE_COOKIE_NAME && value === "true") {
+        return true;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return false;
+}
+
 var ValNextProvider = function ValNextProvider(props) {
   // TODO: use config:
   var route = "/api/val";
@@ -54,27 +89,40 @@ var ValNextProvider = function ValNextProvider(props) {
   var valStore = React__default["default"].useMemo(function () {
     return new ValOverlayContext.ValExternalStore();
   }, []);
-  var _React$useState = React__default["default"].useState(),
+  // Whether useValStega should actually suspend. False during SSR and the
+  // hydration render — the server store is never populated (draft data
+  // arrives via browser CustomEvents only), so suspending there would just
+  // stall into the waitForLoad timeout, and hydration must render the static
+  // source so it matches the server HTML exactly. Activated post-hydration
+  // (in an effect, only when the Val Enable cookie is present) inside a
+  // transition: React keeps the static content visible while hooks suspend
+  // and then swaps to draft data as a normal update — no Suspense fallback
+  // flash and no hydration mismatch.
+  var _React$useState = React__default["default"].useState(false),
     _React$useState2 = slicedToArray._slicedToArray(_React$useState, 2),
-    mountOverlay = _React$useState2[0],
-    setMountOverlay = _React$useState2[1];
-  var _React$useState3 = React__default["default"].useState(null),
+    suspendActive = _React$useState2[0],
+    setSuspendActive = _React$useState2[1];
+  var _React$useState3 = React__default["default"].useState(),
     _React$useState4 = slicedToArray._slicedToArray(_React$useState3, 2),
-    draftMode = _React$useState4[0],
-    setDraftMode = _React$useState4[1];
-  var _React$useState5 = React__default["default"].useState(false),
+    mountOverlay = _React$useState4[0],
+    setMountOverlay = _React$useState4[1];
+  var _React$useState5 = React__default["default"].useState(null),
     _React$useState6 = slicedToArray._slicedToArray(_React$useState5, 2),
-    spaReady = _React$useState6[0],
-    setSpaReady = _React$useState6[1]; // TODO: consider removing spaReady - it is not used? If we remove, clean up the custom events that send the message too...
+    draftMode = _React$useState6[0],
+    setDraftMode = _React$useState6[1];
+  var _React$useState7 = React__default["default"].useState(false),
+    _React$useState8 = slicedToArray._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...
   var router = navigation.useRouter();
   var _React$useTransition = React__default["default"].useTransition(),
     _React$useTransition2 = slicedToArray._slicedToArray(_React$useTransition, 2),
     startTransition = _React$useTransition2[1];
   var rerenderCounterRef = React__default["default"].useRef(0);
-  var _React$useState7 = React__default["default"].useState(null),
-    _React$useState8 = slicedToArray._slicedToArray(_React$useState7, 2),
-    iframeSrc = _React$useState8[0],
-    setIframeSrc = _React$useState8[1];
+  var _React$useState9 = React__default["default"].useState(null),
+    _React$useState0 = slicedToArray._slicedToArray(_React$useState9, 2),
+    iframeSrc = _React$useState0[0],
+    setIframeSrc = _React$useState0[1];
   var pathname = navigation.usePathname();
   React.useEffect(function () {
     window.dispatchEvent(new CustomEvent("val-provider:pathname", {
@@ -91,8 +139,21 @@ var ValNextProvider = function ValNextProvider(props) {
       setMountOverlay(false);
       return;
     }
-    setMountOverlay(document.cookie.includes("".concat(core.Internal.VAL_ENABLE_COOKIE_NAME, "=true")));
+    setMountOverlay(hasValEnableCookie(document.cookie));
   }, []);
+  React__default["default"].useEffect(function () {
+    // Activate the Suspense gate after hydration. Inside a transition so
+    // already-visible (static) content stays on screen while useValStega
+    // suspends — no fallback flash — and the swap to draft data commits as a
+    // normal update instead of a hydration mismatch. Never deactivated:
+    // components must not stop suspending across renders (the draft-mode-off
+    // release valve lives in useValStega instead).
+    if (props.suspend && shouldEnableVal()) {
+      startTransition(function () {
+        setSuspendActive(true);
+      });
+    }
+  }, [props.suspend]);
   React__default["default"].useEffect(function () {
     if (!mountOverlay) {
       return;
@@ -179,7 +240,11 @@ var ValNextProvider = function ValNextProvider(props) {
           return;
         }
         if (res.status === 401) {
-          // ignore when not authorized
+          // Not authorized (e.g. stale Val Enable cookie after the session
+          // expired): treat draft mode as off so useValStega's Suspense gate
+          // is released instead of leaving draftMode stuck at null and
+          // re-suspending into the waitForLoad timeout.
+          setDraftMode(false);
           return;
         }
         if (res.status !== 200) {
@@ -275,10 +340,10 @@ var ValNextProvider = function ValNextProvider(props) {
       window.dispatchEvent(new CustomEvent("val-append-overlay"));
     }
   });
-  var _React$useState9 = React__default["default"].useState(null),
-    _React$useState0 = slicedToArray._slicedToArray(_React$useState9, 2),
-    dropZone = _React$useState0[0],
-    setDropZone = _React$useState0[1];
+  var _React$useState1 = React__default["default"].useState(null),
+    _React$useState10 = slicedToArray._slicedToArray(_React$useState1, 2),
+    dropZone = _React$useState10[0],
+    setDropZone = _React$useState10[1];
   React__default["default"].useEffect(function () {
     var storedDropZone = localStorage.getItem("val-menu-drop-zone-default");
     if (storedDropZone) {
@@ -291,10 +356,10 @@ var ValNextProvider = function ValNextProvider(props) {
   var initTheme = React__default["default"].useMemo(function () {
     return initSessionTheme(props.config);
   }, [props.config]);
-  var _React$useState1 = React__default["default"].useState(false),
-    _React$useState10 = slicedToArray._slicedToArray(_React$useState1, 2),
-    spaLoaded = _React$useState10[0],
-    setSpaLoaded = _React$useState10[1];
+  var _React$useState11 = React__default["default"].useState(false),
+    _React$useState12 = slicedToArray._slicedToArray(_React$useState11, 2),
+    spaLoaded = _React$useState12[0],
+    setSpaLoaded = _React$useState12[1];
   React__default["default"].useEffect(function () {
     var listener = function listener() {
       setSpaLoaded(true);
@@ -334,6 +399,7 @@ var ValNextProvider = function ValNextProvider(props) {
   }, [cssUtils.valPrefixedClass]);
   return /*#__PURE__*/jsxRuntime.jsxs(ValOverlayContext.ValOverlayProvider, {
     draftMode: draftMode,
+    suspend: suspendActive,
     store: valStore,
     children: [props.children, dropZone !== null && !spaLoaded && mountOverlay && initTheme !== null && /*#__PURE__*/jsxRuntime.jsxs(React__default["default"].Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsx("style", {
@@ -447,6 +513,18 @@ function isValStudioPath(pathname) {
   return pathname.startsWith("/val");
 }
 
+// Same guards as the mountOverlay effect: suspending where the overlay can't
+// mount would only ever stall into the waitForLoad timeout. Browser-only.
+function shouldEnableVal() {
+  if (location.search === "?message_onready=true") {
+    return false;
+  }
+  if (isValStudioPath(location.pathname)) {
+    return false;
+  }
+  return hasValEnableCookie(document.cookie);
+}
+
 // function ValIcon() {
 //   return (
 //     <svg

package/dist/ValNextProvider-6103cb74.cjs.js

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

package/dist/{ValNextProvider-b0d9fa24.cjs.prod.js → ValNextProvider-6103cb74.cjs.prod.js}

@@ -4,18 +4,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var slicedToArray = require('./slicedToArray-ce613de6.cjs.prod.js');
-var objectSpread2 = require('./objectSpread2-3c87fb4f.cjs.prod.js');
+var objectSpread2 = require('./objectSpread2-13f847a9.cjs.prod.js');
 var core = require('@valbuild/core');
 var ui = require('@valbuild/ui');
 var navigation = require('next/navigation');
 var Script = require('next/script');
 var React = require('react');
-var ValOverlayContext = require('./ValOverlayContext-942f1294.cjs.prod.js');
+var ValOverlayContext = require('./ValOverlayContext-f7f45bc7.cjs.prod.js');
 var stega = require('@valbuild/react/stega');
 var internal = require('@valbuild/shared/internal');
 var cssUtils = require('./cssUtils-d97a757c.cjs.prod.js');
+var createForOfIteratorHelper = require('./createForOfIteratorHelper-d4afcad8.cjs.prod.js');
 var jsxRuntime = require('react/jsx-runtime');
 require('./unsupportedIterableToArray-0d2087a2.cjs.prod.js');
+require('./defineProperty-8951f469.cjs.prod.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -41,6 +43,39 @@ function initSessionTheme(config) {
   return theme;
 }
 
+/**
+ * Returns true if the Val Enable cookie is set to "true" in the given cookie
+ * string (typically `document.cookie`).
+ *
+ * Exact-token match: a naive `includes("val_enable=true")` would also match
+ * unrelated cookies like `xval_enable=true`. The server sets the cookie to
+ * "false" (rather than deleting it) on disable, so the value must be checked
+ * too.
+ */
+function hasValEnableCookie(cookieString) {
+  var _iterator = createForOfIteratorHelper._createForOfIteratorHelper(cookieString.split(";")),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var part = _step.value;
+      var eq = part.indexOf("=");
+      if (eq === -1) {
+        continue;
+      }
+      var name = part.slice(0, eq).trim();
+      var value = part.slice(eq + 1).trim();
+      if (name === core.Internal.VAL_ENABLE_COOKIE_NAME && value === "true") {
+        return true;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return false;
+}
+
 var ValNextProvider = function ValNextProvider(props) {
   // TODO: use config:
   var route = "/api/val";
@@ -54,27 +89,40 @@ var ValNextProvider = function ValNextProvider(props) {
   var valStore = React__default["default"].useMemo(function () {
     return new ValOverlayContext.ValExternalStore();
   }, []);
-  var _React$useState = React__default["default"].useState(),
+  // Whether useValStega should actually suspend. False during SSR and the
+  // hydration render — the server store is never populated (draft data
+  // arrives via browser CustomEvents only), so suspending there would just
+  // stall into the waitForLoad timeout, and hydration must render the static
+  // source so it matches the server HTML exactly. Activated post-hydration
+  // (in an effect, only when the Val Enable cookie is present) inside a
+  // transition: React keeps the static content visible while hooks suspend
+  // and then swaps to draft data as a normal update — no Suspense fallback
+  // flash and no hydration mismatch.
+  var _React$useState = React__default["default"].useState(false),
     _React$useState2 = slicedToArray._slicedToArray(_React$useState, 2),
-    mountOverlay = _React$useState2[0],
-    setMountOverlay = _React$useState2[1];
-  var _React$useState3 = React__default["default"].useState(null),
+    suspendActive = _React$useState2[0],
+    setSuspendActive = _React$useState2[1];
+  var _React$useState3 = React__default["default"].useState(),
     _React$useState4 = slicedToArray._slicedToArray(_React$useState3, 2),
-    draftMode = _React$useState4[0],
-    setDraftMode = _React$useState4[1];
-  var _React$useState5 = React__default["default"].useState(false),
+    mountOverlay = _React$useState4[0],
+    setMountOverlay = _React$useState4[1];
+  var _React$useState5 = React__default["default"].useState(null),
     _React$useState6 = slicedToArray._slicedToArray(_React$useState5, 2),
-    spaReady = _React$useState6[0],
-    setSpaReady = _React$useState6[1]; // TODO: consider removing spaReady - it is not used? If we remove, clean up the custom events that send the message too...
+    draftMode = _React$useState6[0],
+    setDraftMode = _React$useState6[1];
+  var _React$useState7 = React__default["default"].useState(false),
+    _React$useState8 = slicedToArray._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...
   var router = navigation.useRouter();
   var _React$useTransition = React__default["default"].useTransition(),
     _React$useTransition2 = slicedToArray._slicedToArray(_React$useTransition, 2),
     startTransition = _React$useTransition2[1];
   var rerenderCounterRef = React__default["default"].useRef(0);
-  var _React$useState7 = React__default["default"].useState(null),
-    _React$useState8 = slicedToArray._slicedToArray(_React$useState7, 2),
-    iframeSrc = _React$useState8[0],
-    setIframeSrc = _React$useState8[1];
+  var _React$useState9 = React__default["default"].useState(null),
+    _React$useState0 = slicedToArray._slicedToArray(_React$useState9, 2),
+    iframeSrc = _React$useState0[0],
+    setIframeSrc = _React$useState0[1];
   var pathname = navigation.usePathname();
   React.useEffect(function () {
     window.dispatchEvent(new CustomEvent("val-provider:pathname", {
@@ -91,8 +139,21 @@ var ValNextProvider = function ValNextProvider(props) {
       setMountOverlay(false);
       return;
     }
-    setMountOverlay(document.cookie.includes("".concat(core.Internal.VAL_ENABLE_COOKIE_NAME, "=true")));
+    setMountOverlay(hasValEnableCookie(document.cookie));
   }, []);
+  React__default["default"].useEffect(function () {
+    // Activate the Suspense gate after hydration. Inside a transition so
+    // already-visible (static) content stays on screen while useValStega
+    // suspends — no fallback flash — and the swap to draft data commits as a
+    // normal update instead of a hydration mismatch. Never deactivated:
+    // components must not stop suspending across renders (the draft-mode-off
+    // release valve lives in useValStega instead).
+    if (props.suspend && shouldEnableVal()) {
+      startTransition(function () {
+        setSuspendActive(true);
+      });
+    }
+  }, [props.suspend]);
   React__default["default"].useEffect(function () {
     if (!mountOverlay) {
       return;
@@ -179,7 +240,11 @@ var ValNextProvider = function ValNextProvider(props) {
           return;
         }
         if (res.status === 401) {
-          // ignore when not authorized
+          // Not authorized (e.g. stale Val Enable cookie after the session
+          // expired): treat draft mode as off so useValStega's Suspense gate
+          // is released instead of leaving draftMode stuck at null and
+          // re-suspending into the waitForLoad timeout.
+          setDraftMode(false);
           return;
         }
         if (res.status !== 200) {
@@ -275,10 +340,10 @@ var ValNextProvider = function ValNextProvider(props) {
       window.dispatchEvent(new CustomEvent("val-append-overlay"));
     }
   });
-  var _React$useState9 = React__default["default"].useState(null),
-    _React$useState0 = slicedToArray._slicedToArray(_React$useState9, 2),
-    dropZone = _React$useState0[0],
-    setDropZone = _React$useState0[1];
+  var _React$useState1 = React__default["default"].useState(null),
+    _React$useState10 = slicedToArray._slicedToArray(_React$useState1, 2),
+    dropZone = _React$useState10[0],
+    setDropZone = _React$useState10[1];
   React__default["default"].useEffect(function () {
     var storedDropZone = localStorage.getItem("val-menu-drop-zone-default");
     if (storedDropZone) {
@@ -291,10 +356,10 @@ var ValNextProvider = function ValNextProvider(props) {
   var initTheme = React__default["default"].useMemo(function () {
     return initSessionTheme(props.config);
   }, [props.config]);
-  var _React$useState1 = React__default["default"].useState(false),
-    _React$useState10 = slicedToArray._slicedToArray(_React$useState1, 2),
-    spaLoaded = _React$useState10[0],
-    setSpaLoaded = _React$useState10[1];
+  var _React$useState11 = React__default["default"].useState(false),
+    _React$useState12 = slicedToArray._slicedToArray(_React$useState11, 2),
+    spaLoaded = _React$useState12[0],
+    setSpaLoaded = _React$useState12[1];
   React__default["default"].useEffect(function () {
     var listener = function listener() {
       setSpaLoaded(true);
@@ -334,6 +399,7 @@ var ValNextProvider = function ValNextProvider(props) {
   }, [cssUtils.valPrefixedClass]);
   return /*#__PURE__*/jsxRuntime.jsxs(ValOverlayContext.ValOverlayProvider, {
     draftMode: draftMode,
+    suspend: suspendActive,
     store: valStore,
     children: [props.children, dropZone !== null && !spaLoaded && mountOverlay && initTheme !== null && /*#__PURE__*/jsxRuntime.jsxs(React__default["default"].Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsx("style", {
@@ -447,6 +513,18 @@ function isValStudioPath(pathname) {
   return pathname.startsWith("/val");
 }
 
+// Same guards as the mountOverlay effect: suspending where the overlay can't
+// mount would only ever stall into the waitForLoad timeout. Browser-only.
+function shouldEnableVal() {
+  if (location.search === "?message_onready=true") {
+    return false;
+  }
+  if (isValStudioPath(location.pathname)) {
+    return false;
+  }
+  return hasValEnableCookie(document.cookie);
+}
+
 // function ValIcon() {
 //   return (
 //     <svg

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

@@ -1,17 +1,19 @@
 'use client';
 import { _ as _slicedToArray } from './slicedToArray-aa291011.esm.js';
-import { _ as _objectSpread2 } from './objectSpread2-c1340c1c.esm.js';
-import { DEFAULT_CONTENT_HOST, Internal } from '@valbuild/core';
+import { _ as _objectSpread2 } from './objectSpread2-60d1bd93.esm.js';
+import { Internal, DEFAULT_CONTENT_HOST } from '@valbuild/core';
 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-6635a4d7.esm.js';
+import { ValExternalStore, ValOverlayProvider } from './ValOverlayContext-3c37e5a7.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 { _ as _createForOfIteratorHelper } from './createForOfIteratorHelper-5758a730.esm.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import './unsupportedIterableToArray-5baabfdc.esm.js';
+import './defineProperty-cca5affa.esm.js';
 
 function initSessionTheme(config) {
   if (typeof window === "undefined") {
@@ -32,6 +34,39 @@ function initSessionTheme(config) {
   return theme;
 }
 
+/**
+ * Returns true if the Val Enable cookie is set to "true" in the given cookie
+ * string (typically `document.cookie`).
+ *
+ * Exact-token match: a naive `includes("val_enable=true")` would also match
+ * unrelated cookies like `xval_enable=true`. The server sets the cookie to
+ * "false" (rather than deleting it) on disable, so the value must be checked
+ * too.
+ */
+function hasValEnableCookie(cookieString) {
+  var _iterator = _createForOfIteratorHelper(cookieString.split(";")),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var part = _step.value;
+      var eq = part.indexOf("=");
+      if (eq === -1) {
+        continue;
+      }
+      var name = part.slice(0, eq).trim();
+      var value = part.slice(eq + 1).trim();
+      if (name === Internal.VAL_ENABLE_COOKIE_NAME && value === "true") {
+        return true;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return false;
+}
+
 var ValNextProvider = function ValNextProvider(props) {
   // TODO: use config:
   var route = "/api/val";
@@ -45,27 +80,40 @@ var ValNextProvider = function ValNextProvider(props) {
   var valStore = React.useMemo(function () {
     return new ValExternalStore();
   }, []);
-  var _React$useState = React.useState(),
+  // Whether useValStega should actually suspend. False during SSR and the
+  // hydration render — the server store is never populated (draft data
+  // arrives via browser CustomEvents only), so suspending there would just
+  // stall into the waitForLoad timeout, and hydration must render the static
+  // source so it matches the server HTML exactly. Activated post-hydration
+  // (in an effect, only when the Val Enable cookie is present) inside a
+  // transition: React keeps the static content visible while hooks suspend
+  // and then swaps to draft data as a normal update — no Suspense fallback
+  // flash and no hydration mismatch.
+  var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    mountOverlay = _React$useState2[0],
-    setMountOverlay = _React$useState2[1];
-  var _React$useState3 = React.useState(null),
+    suspendActive = _React$useState2[0],
+    setSuspendActive = _React$useState2[1];
+  var _React$useState3 = React.useState(),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
-    draftMode = _React$useState4[0],
-    setDraftMode = _React$useState4[1];
-  var _React$useState5 = React.useState(false),
+    mountOverlay = _React$useState4[0],
+    setMountOverlay = _React$useState4[1];
+  var _React$useState5 = React.useState(null),
     _React$useState6 = _slicedToArray(_React$useState5, 2),
-    spaReady = _React$useState6[0],
-    setSpaReady = _React$useState6[1]; // TODO: consider removing spaReady - it is not used? If we remove, clean up the custom events that send the message too...
+    draftMode = _React$useState6[0],
+    setDraftMode = _React$useState6[1];
+  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...
   var router = useRouter();
   var _React$useTransition = React.useTransition(),
     _React$useTransition2 = _slicedToArray(_React$useTransition, 2),
     startTransition = _React$useTransition2[1];
   var rerenderCounterRef = React.useRef(0);
-  var _React$useState7 = React.useState(null),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    iframeSrc = _React$useState8[0],
-    setIframeSrc = _React$useState8[1];
+  var _React$useState9 = React.useState(null),
+    _React$useState0 = _slicedToArray(_React$useState9, 2),
+    iframeSrc = _React$useState0[0],
+    setIframeSrc = _React$useState0[1];
   var pathname = usePathname();
   useEffect(function () {
     window.dispatchEvent(new CustomEvent("val-provider:pathname", {
@@ -82,8 +130,21 @@ var ValNextProvider = function ValNextProvider(props) {
       setMountOverlay(false);
       return;
     }
-    setMountOverlay(document.cookie.includes("".concat(Internal.VAL_ENABLE_COOKIE_NAME, "=true")));
+    setMountOverlay(hasValEnableCookie(document.cookie));
   }, []);
+  React.useEffect(function () {
+    // Activate the Suspense gate after hydration. Inside a transition so
+    // already-visible (static) content stays on screen while useValStega
+    // suspends — no fallback flash — and the swap to draft data commits as a
+    // normal update instead of a hydration mismatch. Never deactivated:
+    // components must not stop suspending across renders (the draft-mode-off
+    // release valve lives in useValStega instead).
+    if (props.suspend && shouldEnableVal()) {
+      startTransition(function () {
+        setSuspendActive(true);
+      });
+    }
+  }, [props.suspend]);
   React.useEffect(function () {
     if (!mountOverlay) {
       return;
@@ -170,7 +231,11 @@ var ValNextProvider = function ValNextProvider(props) {
           return;
         }
         if (res.status === 401) {
-          // ignore when not authorized
+          // Not authorized (e.g. stale Val Enable cookie after the session
+          // expired): treat draft mode as off so useValStega's Suspense gate
+          // is released instead of leaving draftMode stuck at null and
+          // re-suspending into the waitForLoad timeout.
+          setDraftMode(false);
           return;
         }
         if (res.status !== 200) {
@@ -266,10 +331,10 @@ var ValNextProvider = function ValNextProvider(props) {
       window.dispatchEvent(new CustomEvent("val-append-overlay"));
     }
   });
-  var _React$useState9 = React.useState(null),
-    _React$useState0 = _slicedToArray(_React$useState9, 2),
-    dropZone = _React$useState0[0],
-    setDropZone = _React$useState0[1];
+  var _React$useState1 = React.useState(null),
+    _React$useState10 = _slicedToArray(_React$useState1, 2),
+    dropZone = _React$useState10[0],
+    setDropZone = _React$useState10[1];
   React.useEffect(function () {
     var storedDropZone = localStorage.getItem("val-menu-drop-zone-default");
     if (storedDropZone) {
@@ -282,10 +347,10 @@ var ValNextProvider = function ValNextProvider(props) {
   var initTheme = React.useMemo(function () {
     return initSessionTheme(props.config);
   }, [props.config]);
-  var _React$useState1 = React.useState(false),
-    _React$useState10 = _slicedToArray(_React$useState1, 2),
-    spaLoaded = _React$useState10[0],
-    setSpaLoaded = _React$useState10[1];
+  var _React$useState11 = React.useState(false),
+    _React$useState12 = _slicedToArray(_React$useState11, 2),
+    spaLoaded = _React$useState12[0],
+    setSpaLoaded = _React$useState12[1];
   React.useEffect(function () {
     var listener = function listener() {
       setSpaLoaded(true);
@@ -325,6 +390,7 @@ var ValNextProvider = function ValNextProvider(props) {
   }, [valPrefixedClass]);
   return /*#__PURE__*/jsxs(ValOverlayProvider, {
     draftMode: draftMode,
+    suspend: suspendActive,
     store: valStore,
     children: [props.children, dropZone !== null && !spaLoaded && mountOverlay && initTheme !== null && /*#__PURE__*/jsxs(React.Fragment, {
       children: [/*#__PURE__*/jsx("style", {
@@ -438,6 +504,18 @@ function isValStudioPath(pathname) {
   return pathname.startsWith("/val");
 }
 
+// Same guards as the mountOverlay effect: suspending where the overlay can't
+// mount would only ever stall into the waitForLoad timeout. Browser-only.
+function shouldEnableVal() {
+  if (location.search === "?message_onready=true") {
+    return false;
+  }
+  if (isValStudioPath(location.pathname)) {
+    return false;
+  }
+  return hasValEnableCookie(document.cookie);
+}
+
 // function ValIcon() {
 //   return (
 //     <svg