@valbuild/next 0.146.2 → 0.146.4

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @valbuild/next
 
+## 0.146.4
+
+### Patch Changes
+
+- [#870](https://github.com/valbuild/val/pull/870) [`81f2e80`](https://github.com/valbuild/val/commit/81f2e803c4cefdf58bbe6856c06e98ace95a8e0b) Thanks [@freekh](https://github.com/freekh)! - The canvas works on a page behind your site's own login.
+
+  A site with its own sign-in (a dashboard, an intranet, a members' area) can be edited in the canvas. The canvas is a frame on the same origin as the Studio, so it sends your site's cookies like any other tab: if you are signed in to the site, the canvas shows the page signed in as you.
+
+  If you were not signed in, the site redirected the canvas to its login page, and the canvas then broke. That page mounted Val's whole overlay inside the canvas, a Studio inside the Studio. The canvas stayed on "Preview is not ready yet" through the sign-in and after it, until you pressed Reload. Now a page shown in the Studio's canvas counts as the canvas wherever it navigated to, so you can sign in inside the canvas and keep editing.
+
+- Updated dependencies [[`81f2e80`](https://github.com/valbuild/val/commit/81f2e803c4cefdf58bbe6856c06e98ace95a8e0b), [`59ff6c3`](https://github.com/valbuild/val/commit/59ff6c367bc313b2bb7718b00c1641aaccab949d), [`c31f609`](https://github.com/valbuild/val/commit/c31f609fdeed79aa0e139fa4f652ba0684e96ea3)]:
+  - @valbuild/shared@0.146.4
+  - @valbuild/ui@0.146.4
+  - @valbuild/server@0.146.4
+  - @valbuild/language-server@0.146.4
+  - @valbuild/mcp@0.146.4
+  - @valbuild/react@0.146.4
+
+## 0.146.3
+
+### Patch Changes
+
+- [#873](https://github.com/valbuild/val/pull/873) [`289b2f3`](https://github.com/valbuild/val/commit/289b2f3dc6503393697d09ba3ed802b569a914c9) Thanks [@freekh](https://github.com/freekh)! - Opening the Studio no longer flashes an empty page. The loading screen now stays
+  up until the Studio is ready to be seen, instead of disappearing as soon as the
+  page loaded and leaving a blank page while the Studio downloaded.
+
 ## 0.146.2
 
 ### Patch Changes

package/dist/{ValApp-3a70afe1.esm.js → ValApp-821536aa.esm.js}

@@ -10,6 +10,20 @@ import '@valbuild/shared/client';
 import '@valbuild/core';
 
 var VAL_READY_PING_MS = 100;
+
+/**
+ * Whether the Studio's stylesheet has loaded in this page. `val-css-loaded`
+ * fires once per page, so a `ValApp` that mounts again after it -- the `/val`
+ * route left and come back to -- must not wait for it a second time.
+ */
+var studioStylesLoaded = false;
+
+/**
+ * The longest the loading screen covers the page. Past it, whatever the Studio
+ * shows -- unstyled, or its own error -- is better than a spinner that never
+ * ends.
+ */
+var LOADING_SCREEN_MAX_MS = 15000;
 var ValApp = function ValApp(_ref) {
   var config = _ref.config,
     children = _ref.children;
@@ -43,11 +57,40 @@ var ValApp = function ValApp(_ref) {
     }
   });
 
-  // this theme is used to avoid flickering
-  var _useState3 = useState(config.defaultTheme || null),
+  /*
+   * Whether the loading screen still covers the page: until the Studio's
+   * stylesheet has loaded, or the wait runs out. Its own state rather than
+   * `loadingTheme`, which a new `config` sets again after the event has fired.
+   */
+  var _useState3 = useState(function () {
+      return !studioStylesLoaded;
+    }),
     _useState4 = _slicedToArray(_useState3, 2),
-    loadingTheme = _useState4[0],
-    setLoadingTheme = _useState4[1];
+    covering = _useState4[0],
+    setCovering = _useState4[1];
+  useEffect(function () {
+    if (!covering) {
+      return;
+    }
+    var onCssLoaded = function onCssLoaded() {
+      studioStylesLoaded = true;
+      setCovering(false);
+    };
+    window.addEventListener("val-css-loaded", onCssLoaded);
+    var timeout = setTimeout(function () {
+      return setCovering(false);
+    }, LOADING_SCREEN_MAX_MS);
+    return function () {
+      window.removeEventListener("val-css-loaded", onCssLoaded);
+      clearTimeout(timeout);
+    };
+  }, [covering]);
+
+  // this theme is used to avoid flickering
+  var _useState5 = useState(config.defaultTheme || null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    loadingTheme = _useState6[0],
+    setLoadingTheme = _useState6[1];
   useEffect(function () {
     var theme = localStorage.getItem("val-theme-" + ((config === null || config === void 0 ? void 0 : config.project) || "unknown"));
     if (theme === "dark") {
@@ -88,36 +131,49 @@ var ValApp = function ValApp(_ref) {
       window.removeEventListener("val-css-loaded", onCssLoaded);
     };
   }, [inMessageMode, loadingTheme]);
-  if (loadingTheme !== null && isClientSIde) {
-    return /*#__PURE__*/jsxs("div", {
-      style: {
-        color: loadingTheme === "dark" ? "white" : "black",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        padding: "1rem",
-        backgroundColor: loadingTheme === "dark" ? darkBg : lightBg,
-        minHeight: "100vh",
-        minWidth: "100%"
-      },
-      children: [/*#__PURE__*/jsx("style", {
-        children: ".".concat(valPrefixedClass, "animate-spin {\n  animation: ").concat(valPrefixedClass, "spin 2s linear infinite;\n}\n@keyframes ").concat(valPrefixedClass, "spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}")
-      }), /*#__PURE__*/jsx("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        className: cn(["animate-spin"]),
-        children: /*#__PURE__*/jsx("path", {
-          d: "M21 12a9 9 0 1 1-6.219-8.56"
-        })
-      })]
-    });
+
+  /*
+   * The loading screen stays up until the Studio's stylesheet has loaded, as
+   * an overlay above the Studio mounting underneath it. It used to be rendered
+   * INSTEAD of the Studio and dropped at hydration, which was before the
+   * Studio's script had even been requested: the spinner went, an empty page
+   * stood there while the Studio downloaded, and then the Studio appeared.
+   * It is the first element both in the server render and after, so hydration
+   * keeps it rather than restarting it. Only with a theme to draw it in --
+   * `config.defaultTheme`, as the templates set -- as before.
+   */
+  var loadingScreen = !covering || loadingTheme === null || inMessageMode ? null : /*#__PURE__*/jsxs("div", {
+    style: {
+      color: loadingTheme === "dark" ? "white" : "black",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      padding: "1rem",
+      backgroundColor: loadingTheme === "dark" ? darkBg : lightBg,
+      position: "fixed",
+      inset: 0,
+      zIndex: 2147483647
+    },
+    children: [/*#__PURE__*/jsx("style", {
+      children: ".".concat(valPrefixedClass, "animate-spin {\n  animation: ").concat(valPrefixedClass, "spin 2s linear infinite;\n}\n@keyframes ").concat(valPrefixedClass, "spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}")
+    }), /*#__PURE__*/jsx("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: cn(["animate-spin"]),
+      children: /*#__PURE__*/jsx("path", {
+        d: "M21 12a9 9 0 1 1-6.219-8.56"
+      })
+    })]
+  });
+  if (isClientSIde && loadingScreen !== null) {
+    return loadingScreen;
   }
   if (inMessageMode) {
     return /*#__PURE__*/jsx("div", {
@@ -125,7 +181,7 @@ var ValApp = function ValApp(_ref) {
     });
   }
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(Script, {
+    children: [loadingScreen, /*#__PURE__*/jsx(Script, {
       type: "module",
       src: "".concat(route, "/static").concat(VERSION ? "/".concat(VERSION) : "").concat(VAL_APP_PATH),
       crossOrigin: "anonymous"

package/dist/ValApp-b17ac306.cjs.js

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

package/dist/{ValApp-ab8a96fd.cjs.prod.js → ValApp-b17ac306.cjs.prod.js}

@@ -18,6 +18,20 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
 var Script__default = /*#__PURE__*/_interopDefault(Script);
 
 var VAL_READY_PING_MS = 100;
+
+/**
+ * Whether the Studio's stylesheet has loaded in this page. `val-css-loaded`
+ * fires once per page, so a `ValApp` that mounts again after it -- the `/val`
+ * route left and come back to -- must not wait for it a second time.
+ */
+var studioStylesLoaded = false;
+
+/**
+ * The longest the loading screen covers the page. Past it, whatever the Studio
+ * shows -- unstyled, or its own error -- is better than a spinner that never
+ * ends.
+ */
+var LOADING_SCREEN_MAX_MS = 15000;
 var ValApp = function ValApp(_ref) {
   var config = _ref.config,
     children = _ref.children;
@@ -51,11 +65,40 @@ var ValApp = function ValApp(_ref) {
     }
   });
 
-  // this theme is used to avoid flickering
-  var _useState3 = React.useState(config.defaultTheme || null),
+  /*
+   * Whether the loading screen still covers the page: until the Studio's
+   * stylesheet has loaded, or the wait runs out. Its own state rather than
+   * `loadingTheme`, which a new `config` sets again after the event has fired.
+   */
+  var _useState3 = React.useState(function () {
+      return !studioStylesLoaded;
+    }),
     _useState4 = slicedToArray._slicedToArray(_useState3, 2),
-    loadingTheme = _useState4[0],
-    setLoadingTheme = _useState4[1];
+    covering = _useState4[0],
+    setCovering = _useState4[1];
+  React.useEffect(function () {
+    if (!covering) {
+      return;
+    }
+    var onCssLoaded = function onCssLoaded() {
+      studioStylesLoaded = true;
+      setCovering(false);
+    };
+    window.addEventListener("val-css-loaded", onCssLoaded);
+    var timeout = setTimeout(function () {
+      return setCovering(false);
+    }, LOADING_SCREEN_MAX_MS);
+    return function () {
+      window.removeEventListener("val-css-loaded", onCssLoaded);
+      clearTimeout(timeout);
+    };
+  }, [covering]);
+
+  // this theme is used to avoid flickering
+  var _useState5 = React.useState(config.defaultTheme || null),
+    _useState6 = slicedToArray._slicedToArray(_useState5, 2),
+    loadingTheme = _useState6[0],
+    setLoadingTheme = _useState6[1];
   React.useEffect(function () {
     var theme = localStorage.getItem("val-theme-" + ((config === null || config === void 0 ? void 0 : config.project) || "unknown"));
     if (theme === "dark") {
@@ -96,36 +139,49 @@ var ValApp = function ValApp(_ref) {
       window.removeEventListener("val-css-loaded", onCssLoaded);
     };
   }, [inMessageMode, loadingTheme]);
-  if (loadingTheme !== null && isClientSIde) {
-    return /*#__PURE__*/jsxRuntime.jsxs("div", {
-      style: {
-        color: loadingTheme === "dark" ? "white" : "black",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        padding: "1rem",
-        backgroundColor: loadingTheme === "dark" ? darkBg : lightBg,
-        minHeight: "100vh",
-        minWidth: "100%"
-      },
-      children: [/*#__PURE__*/jsxRuntime.jsx("style", {
-        children: ".".concat(fallbackColors.valPrefixedClass, "animate-spin {\n  animation: ").concat(fallbackColors.valPrefixedClass, "spin 2s linear infinite;\n}\n@keyframes ").concat(fallbackColors.valPrefixedClass, "spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}")
-      }), /*#__PURE__*/jsxRuntime.jsx("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        className: fallbackColors.cn(["animate-spin"]),
-        children: /*#__PURE__*/jsxRuntime.jsx("path", {
-          d: "M21 12a9 9 0 1 1-6.219-8.56"
-        })
-      })]
-    });
+
+  /*
+   * The loading screen stays up until the Studio's stylesheet has loaded, as
+   * an overlay above the Studio mounting underneath it. It used to be rendered
+   * INSTEAD of the Studio and dropped at hydration, which was before the
+   * Studio's script had even been requested: the spinner went, an empty page
+   * stood there while the Studio downloaded, and then the Studio appeared.
+   * It is the first element both in the server render and after, so hydration
+   * keeps it rather than restarting it. Only with a theme to draw it in --
+   * `config.defaultTheme`, as the templates set -- as before.
+   */
+  var loadingScreen = !covering || loadingTheme === null || inMessageMode ? null : /*#__PURE__*/jsxRuntime.jsxs("div", {
+    style: {
+      color: loadingTheme === "dark" ? "white" : "black",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      padding: "1rem",
+      backgroundColor: loadingTheme === "dark" ? darkBg : lightBg,
+      position: "fixed",
+      inset: 0,
+      zIndex: 2147483647
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx("style", {
+      children: ".".concat(fallbackColors.valPrefixedClass, "animate-spin {\n  animation: ").concat(fallbackColors.valPrefixedClass, "spin 2s linear infinite;\n}\n@keyframes ").concat(fallbackColors.valPrefixedClass, "spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}")
+    }), /*#__PURE__*/jsxRuntime.jsx("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: fallbackColors.cn(["animate-spin"]),
+      children: /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M21 12a9 9 0 1 1-6.219-8.56"
+      })
+    })]
+  });
+  if (isClientSIde && loadingScreen !== null) {
+    return loadingScreen;
   }
   if (inMessageMode) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -133,7 +189,7 @@ var ValApp = function ValApp(_ref) {
     });
   }
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(Script__default["default"], {
+    children: [loadingScreen, /*#__PURE__*/jsxRuntime.jsx(Script__default["default"], {
       type: "module",
       src: "".concat(route, "/static").concat(ui.VERSION ? "/".concat(ui.VERSION) : "").concat(ui.VAL_APP_PATH),
       crossOrigin: "anonymous"

package/dist/{ValApp-294e5b53.cjs.dev.js → ValApp-cd14230d.cjs.dev.js}

@@ -18,6 +18,20 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
 var Script__default = /*#__PURE__*/_interopDefault(Script);
 
 var VAL_READY_PING_MS = 100;
+
+/**
+ * Whether the Studio's stylesheet has loaded in this page. `val-css-loaded`
+ * fires once per page, so a `ValApp` that mounts again after it -- the `/val`
+ * route left and come back to -- must not wait for it a second time.
+ */
+var studioStylesLoaded = false;
+
+/**
+ * The longest the loading screen covers the page. Past it, whatever the Studio
+ * shows -- unstyled, or its own error -- is better than a spinner that never
+ * ends.
+ */
+var LOADING_SCREEN_MAX_MS = 15000;
 var ValApp = function ValApp(_ref) {
   var config = _ref.config,
     children = _ref.children;
@@ -51,11 +65,40 @@ var ValApp = function ValApp(_ref) {
     }
   });
 
-  // this theme is used to avoid flickering
-  var _useState3 = React.useState(config.defaultTheme || null),
+  /*
+   * Whether the loading screen still covers the page: until the Studio's
+   * stylesheet has loaded, or the wait runs out. Its own state rather than
+   * `loadingTheme`, which a new `config` sets again after the event has fired.
+   */
+  var _useState3 = React.useState(function () {
+      return !studioStylesLoaded;
+    }),
     _useState4 = slicedToArray._slicedToArray(_useState3, 2),
-    loadingTheme = _useState4[0],
-    setLoadingTheme = _useState4[1];
+    covering = _useState4[0],
+    setCovering = _useState4[1];
+  React.useEffect(function () {
+    if (!covering) {
+      return;
+    }
+    var onCssLoaded = function onCssLoaded() {
+      studioStylesLoaded = true;
+      setCovering(false);
+    };
+    window.addEventListener("val-css-loaded", onCssLoaded);
+    var timeout = setTimeout(function () {
+      return setCovering(false);
+    }, LOADING_SCREEN_MAX_MS);
+    return function () {
+      window.removeEventListener("val-css-loaded", onCssLoaded);
+      clearTimeout(timeout);
+    };
+  }, [covering]);
+
+  // this theme is used to avoid flickering
+  var _useState5 = React.useState(config.defaultTheme || null),
+    _useState6 = slicedToArray._slicedToArray(_useState5, 2),
+    loadingTheme = _useState6[0],
+    setLoadingTheme = _useState6[1];
   React.useEffect(function () {
     var theme = localStorage.getItem("val-theme-" + ((config === null || config === void 0 ? void 0 : config.project) || "unknown"));
     if (theme === "dark") {
@@ -96,36 +139,49 @@ var ValApp = function ValApp(_ref) {
       window.removeEventListener("val-css-loaded", onCssLoaded);
     };
   }, [inMessageMode, loadingTheme]);
-  if (loadingTheme !== null && isClientSIde) {
-    return /*#__PURE__*/jsxRuntime.jsxs("div", {
-      style: {
-        color: loadingTheme === "dark" ? "white" : "black",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        padding: "1rem",
-        backgroundColor: loadingTheme === "dark" ? darkBg : lightBg,
-        minHeight: "100vh",
-        minWidth: "100%"
-      },
-      children: [/*#__PURE__*/jsxRuntime.jsx("style", {
-        children: ".".concat(fallbackColors.valPrefixedClass, "animate-spin {\n  animation: ").concat(fallbackColors.valPrefixedClass, "spin 2s linear infinite;\n}\n@keyframes ").concat(fallbackColors.valPrefixedClass, "spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}")
-      }), /*#__PURE__*/jsxRuntime.jsx("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        className: fallbackColors.cn(["animate-spin"]),
-        children: /*#__PURE__*/jsxRuntime.jsx("path", {
-          d: "M21 12a9 9 0 1 1-6.219-8.56"
-        })
-      })]
-    });
+
+  /*
+   * The loading screen stays up until the Studio's stylesheet has loaded, as
+   * an overlay above the Studio mounting underneath it. It used to be rendered
+   * INSTEAD of the Studio and dropped at hydration, which was before the
+   * Studio's script had even been requested: the spinner went, an empty page
+   * stood there while the Studio downloaded, and then the Studio appeared.
+   * It is the first element both in the server render and after, so hydration
+   * keeps it rather than restarting it. Only with a theme to draw it in --
+   * `config.defaultTheme`, as the templates set -- as before.
+   */
+  var loadingScreen = !covering || loadingTheme === null || inMessageMode ? null : /*#__PURE__*/jsxRuntime.jsxs("div", {
+    style: {
+      color: loadingTheme === "dark" ? "white" : "black",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      padding: "1rem",
+      backgroundColor: loadingTheme === "dark" ? darkBg : lightBg,
+      position: "fixed",
+      inset: 0,
+      zIndex: 2147483647
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx("style", {
+      children: ".".concat(fallbackColors.valPrefixedClass, "animate-spin {\n  animation: ").concat(fallbackColors.valPrefixedClass, "spin 2s linear infinite;\n}\n@keyframes ").concat(fallbackColors.valPrefixedClass, "spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}")
+    }), /*#__PURE__*/jsxRuntime.jsx("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: fallbackColors.cn(["animate-spin"]),
+      children: /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M21 12a9 9 0 1 1-6.219-8.56"
+      })
+    })]
+  });
+  if (isClientSIde && loadingScreen !== null) {
+    return loadingScreen;
   }
   if (inMessageMode) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -133,7 +189,7 @@ var ValApp = function ValApp(_ref) {
     });
   }
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(Script__default["default"], {
+    children: [loadingScreen, /*#__PURE__*/jsxRuntime.jsx(Script__default["default"], {
       type: "module",
       src: "".concat(route, "/static").concat(ui.VERSION ? "/".concat(ui.VERSION) : "").concat(ui.VAL_APP_PATH),
       crossOrigin: "anonymous"

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

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

package/dist/{ValNextProvider-da189afe.cjs.prod.js → ValNextProvider-3f8bc508.cjs.prod.js}

@@ -366,7 +366,7 @@ var ValNextProvider = function ValNextProvider(props) {
       setMountOverlay(false);
       return;
     }
-    setIsCanvas(client.isValCanvasFrame(location.search));
+    setIsCanvas(client.isValCanvasFrame(location.search, readParentPathname()));
     setMountOverlay(hasValEnableCookie(document.cookie));
   }, []);
   React__default["default"].useEffect(function () {
@@ -874,6 +874,24 @@ function isValStudioPath(pathname) {
   return pathname.startsWith("/val");
 }
 
+/**
+ * The path of the window framing this document, or `null`.
+ *
+ * `null` for a top-level document, and for a parent on another origin: reading
+ * a cross-origin `location` throws, and a page on another origin is not the
+ * studio, whose canvas is always the same app. See `isValCanvasFrame`.
+ */
+function readParentPathname() {
+  try {
+    if (window.parent === window) {
+      return null;
+    }
+    return window.parent.location.pathname;
+  } catch (_unused) {
+    return null;
+  }
+}
+
 // 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() {

package/dist/{ValNextProvider-3d2cd7e4.esm.js → ValNextProvider-9934c628.esm.js}

@@ -339,7 +339,7 @@ var ValNextProvider = function ValNextProvider(props) {
       setMountOverlay(false);
       return;
     }
-    setIsCanvas(isValCanvasFrame(location.search));
+    setIsCanvas(isValCanvasFrame(location.search, readParentPathname()));
     setMountOverlay(hasValEnableCookie(document.cookie));
   }, []);
   React.useEffect(function () {
@@ -847,6 +847,24 @@ function isValStudioPath(pathname) {
   return pathname.startsWith("/val");
 }
 
+/**
+ * The path of the window framing this document, or `null`.
+ *
+ * `null` for a top-level document, and for a parent on another origin: reading
+ * a cross-origin `location` throws, and a page on another origin is not the
+ * studio, whose canvas is always the same app. See `isValCanvasFrame`.
+ */
+function readParentPathname() {
+  try {
+    if (window.parent === window) {
+      return null;
+    }
+    return window.parent.location.pathname;
+  } catch (_unused) {
+    return null;
+  }
+}
+
 // 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() {

package/dist/{ValNextProvider-062a8dc9.cjs.dev.js → ValNextProvider-d6de5d9a.cjs.dev.js}

@@ -366,7 +366,7 @@ var ValNextProvider = function ValNextProvider(props) {
       setMountOverlay(false);
       return;
     }
-    setIsCanvas(client.isValCanvasFrame(location.search));
+    setIsCanvas(client.isValCanvasFrame(location.search, readParentPathname()));
     setMountOverlay(hasValEnableCookie(document.cookie));
   }, []);
   React__default["default"].useEffect(function () {
@@ -874,6 +874,24 @@ function isValStudioPath(pathname) {
   return pathname.startsWith("/val");
 }
 
+/**
+ * The path of the window framing this document, or `null`.
+ *
+ * `null` for a top-level document, and for a parent on another origin: reading
+ * a cross-origin `location` throws, and a page on another origin is not the
+ * studio, whose canvas is always the same app. See `isValCanvasFrame`.
+ */
+function readParentPathname() {
+  try {
+    if (window.parent === window) {
+      return null;
+    }
+    return window.parent.location.pathname;
+  } catch (_unused) {
+    return null;
+  }
+}
+
 // 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() {

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

@@ -8,13 +8,13 @@ var core = require('@valbuild/core');
 var stega = require('@valbuild/react/stega');
 var objectWithoutProperties = require('./objectWithoutProperties-8f93848f.cjs.dev.js');
 var internal = require('@valbuild/react/internal');
-var ValNextProvider = require('./ValNextProvider-062a8dc9.cjs.dev.js');
+var ValNextProvider = require('./ValNextProvider-d6de5d9a.cjs.dev.js');
 var NextImage = require('next/image');
 var jsxRuntime = require('react/jsx-runtime');
 var ValVideo = require('./ValVideo-b8130c1b.cjs.dev.js');
-var ValApp = require('./ValApp-294e5b53.cjs.dev.js');
+var ValApp = require('./ValApp-cd14230d.cjs.dev.js');
 var ValModulesClient = require('./ValModulesClient-4ecabf99.cjs.dev.js');
-var version = require('./version-44c70cfb.cjs.dev.js');
+var version = require('./version-c44f56b0.cjs.dev.js');
 var createForOfIteratorHelper = require('./createForOfIteratorHelper-0445603c.cjs.dev.js');
 require('./defineProperty-f90345d7.cjs.dev.js');
 require('./unsupportedIterableToArray-c8ab77c9.cjs.dev.js');

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

@@ -8,13 +8,13 @@ var core = require('@valbuild/core');
 var stega = require('@valbuild/react/stega');
 var objectWithoutProperties = require('./objectWithoutProperties-107dcb46.cjs.prod.js');
 var internal = require('@valbuild/react/internal');
-var ValNextProvider = require('./ValNextProvider-da189afe.cjs.prod.js');
+var ValNextProvider = require('./ValNextProvider-3f8bc508.cjs.prod.js');
 var NextImage = require('next/image');
 var jsxRuntime = require('react/jsx-runtime');
 var ValVideo = require('./ValVideo-94e5aa28.cjs.prod.js');
-var ValApp = require('./ValApp-ab8a96fd.cjs.prod.js');
+var ValApp = require('./ValApp-b17ac306.cjs.prod.js');
 var ValModulesClient = require('./ValModulesClient-10c0721c.cjs.prod.js');
-var version = require('./version-8893f81b.cjs.prod.js');
+var version = require('./version-f6abce64.cjs.prod.js');
 var createForOfIteratorHelper = require('./createForOfIteratorHelper-d4afcad8.cjs.prod.js');
 require('./defineProperty-8951f469.cjs.prod.js');
 require('./unsupportedIterableToArray-0d2087a2.cjs.prod.js');

package/dist/valbuild-next.esm.js

@@ -7,13 +7,13 @@ export { GenericSelector, Schema, VAL_EXTENSION, derefPatch, modules } from '@va
 import { stegaEncode, attrs, raw, autoTagJSX } from '@valbuild/react/stega';
 import { d as decodeValPathsOfString, _ as _objectWithoutProperties } from './objectWithoutProperties-2daec22c.esm.js';
 export { ValRichText } from '@valbuild/react/internal';
-import { ValNextProvider } from './ValNextProvider-3d2cd7e4.esm.js';
+import { ValNextProvider } from './ValNextProvider-9934c628.esm.js';
 import NextImage from 'next/image';
 import { jsx } from 'react/jsx-runtime';
 export { ValVideo } from './ValVideo-19f2ab05.esm.js';
-export { ValApp } from './ValApp-3a70afe1.esm.js';
+export { ValApp } from './ValApp-821536aa.esm.js';
 export { ValModulesClient, useRegisterValModules } from './ValModulesClient-0dd601a1.esm.js';
-import { V as VERSION } from './version-d10f7db8.esm.js';
+import { V as VERSION } from './version-3032da1e.esm.js';
 import { _ as _createForOfIteratorHelper } from './createForOfIteratorHelper-5758a730.esm.js';
 import './defineProperty-cca5affa.esm.js';
 import './unsupportedIterableToArray-5baabfdc.esm.js';

package/dist/{version-d10f7db8.esm.js → version-3032da1e.esm.js}

@@ -12,7 +12,7 @@ var packageJson = {
 		"next",
 		"react"
 	],
-	version: "0.146.2",
+	version: "0.146.4",
 	scripts: {
 		typecheck: "tsc --noEmit",
 		test: "jest"

package/dist/{version-44c70cfb.cjs.dev.js → version-c44f56b0.cjs.dev.js}

@@ -14,7 +14,7 @@ var packageJson = {
 		"next",
 		"react"
 	],
-	version: "0.146.2",
+	version: "0.146.4",
 	scripts: {
 		typecheck: "tsc --noEmit",
 		test: "jest"

package/dist/{version-8893f81b.cjs.prod.js → version-f6abce64.cjs.prod.js}

@@ -14,7 +14,7 @@ var packageJson = {
 		"next",
 		"react"
 	],
-	version: "0.146.2",
+	version: "0.146.4",
 	scripts: {
 		typecheck: "tsc --noEmit",
 		test: "jest"

package/package.json

@@ -12,7 +12,7 @@
     "next",
     "react"
   ],
-  "version": "0.146.2",
+  "version": "0.146.4",
   "main": "dist/valbuild-next.cjs.js",
   "module": "dist/valbuild-next.esm.js",
   "exports": {
@@ -47,13 +47,13 @@
   "dependencies": {
     "client-only": "^0.0.1",
     "server-only": "^0.0.1",
-    "@valbuild/language-server": "0.146.2",
     "@valbuild/core": "0.146.2",
-    "@valbuild/mcp": "0.146.2",
-    "@valbuild/react": "0.146.2",
-    "@valbuild/server": "0.146.2",
-    "@valbuild/shared": "0.146.2",
-    "@valbuild/ui": "0.146.2"
+    "@valbuild/language-server": "0.146.4",
+    "@valbuild/mcp": "0.146.4",
+    "@valbuild/react": "0.146.4",
+    "@valbuild/server": "0.146.4",
+    "@valbuild/shared": "0.146.4",
+    "@valbuild/ui": "0.146.4"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.3",

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

@@ -12,7 +12,7 @@ var core = require('@valbuild/core');
 var React = require('react');
 var internal = require('@valbuild/shared/internal');
 var server = require('@valbuild/server');
-var version = require('../../dist/version-44c70cfb.cjs.dev.js');
+var version = require('../../dist/version-c44f56b0.cjs.dev.js');
 require('../../dist/createForOfIteratorHelper-0445603c.cjs.dev.js');
 require('../../dist/unsupportedIterableToArray-c8ab77c9.cjs.dev.js');
 require('../../dist/slicedToArray-44036a76.cjs.dev.js');

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

@@ -12,7 +12,7 @@ var core = require('@valbuild/core');
 var React = require('react');
 var internal = require('@valbuild/shared/internal');
 var server = require('@valbuild/server');
-var version = require('../../dist/version-8893f81b.cjs.prod.js');
+var version = require('../../dist/version-f6abce64.cjs.prod.js');
 require('../../dist/createForOfIteratorHelper-d4afcad8.cjs.prod.js');
 require('../../dist/unsupportedIterableToArray-0d2087a2.cjs.prod.js');
 require('../../dist/slicedToArray-ce613de6.cjs.prod.js');

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

@@ -8,7 +8,7 @@ import { Internal } from '@valbuild/core';
 import { cache } from 'react';
 import { VAL_SESSION_COOKIE, memoizePerRequest } from '@valbuild/shared/internal';
 import { createValServer } from '@valbuild/server';
-import { V as VERSION } from '../../dist/version-d10f7db8.esm.js';
+import { V as VERSION } from '../../dist/version-3032da1e.esm.js';
 import '../../dist/createForOfIteratorHelper-5758a730.esm.js';
 import '../../dist/unsupportedIterableToArray-5baabfdc.esm.js';
 import '../../dist/slicedToArray-aa291011.esm.js';

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

@@ -9,7 +9,7 @@ var objectSpread2 = require('../../dist/objectSpread2-58024783.cjs.dev.js');
 var core = require('@valbuild/core');
 var server = require('@valbuild/server');
 var server$1 = require('next/server');
-var version = require('../../dist/version-44c70cfb.cjs.dev.js');
+var version = require('../../dist/version-c44f56b0.cjs.dev.js');
 var mcp = require('@valbuild/mcp');
 require('../../dist/unsupportedIterableToArray-c8ab77c9.cjs.dev.js');
 require('../../dist/defineProperty-f90345d7.cjs.dev.js');

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

@@ -9,7 +9,7 @@ var objectSpread2 = require('../../dist/objectSpread2-13f847a9.cjs.prod.js');
 var core = require('@valbuild/core');
 var server = require('@valbuild/server');
 var server$1 = require('next/server');
-var version = require('../../dist/version-8893f81b.cjs.prod.js');
+var version = require('../../dist/version-f6abce64.cjs.prod.js');
 var mcp = require('@valbuild/mcp');
 require('../../dist/unsupportedIterableToArray-0d2087a2.cjs.prod.js');
 require('../../dist/defineProperty-8951f469.cjs.prod.js');

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

@@ -6,7 +6,7 @@ import { Internal } from '@valbuild/core';
 import { createValApiRouter, createValServer } from '@valbuild/server';
 export { createPrettierFormatter } from '@valbuild/server';
 import { NextResponse } from 'next/server';
-import { V as VERSION } from '../../dist/version-d10f7db8.esm.js';
+import { V as VERSION } from '../../dist/version-3032da1e.esm.js';
 import { initValMcp as initValMcp$1 } from '@valbuild/mcp';
 import '../../dist/unsupportedIterableToArray-5baabfdc.esm.js';
 import '../../dist/defineProperty-cca5affa.esm.js';

package/dist/ValApp-ab8a96fd.cjs.js

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

package/dist/ValNextProvider-da189afe.cjs.js

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