@valbuild/next 0.84.3 → 0.85.1

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

@@ -7,7 +7,7 @@ var core = require('@valbuild/core');
 var stega = require('@valbuild/react/stega');
 var React = require('react');
 var ValOverlayContext = require('../../dist/ValOverlayContext-c82a4507.cjs.dev.js');
-var initValRouteFromVal = require('../../dist/initValRouteFromVal-65dd1262.cjs.dev.js');
+var routeFromVal = require('../../dist/routeFromVal-a3987ae3.cjs.dev.js');
 require('../../dist/createForOfIteratorHelper-0445603c.cjs.dev.js');
 require('../../dist/unsupportedIterableToArray-c8ab77c9.cjs.dev.js');
 require('../../dist/objectSpread2-792eb2c2.cjs.dev.js');
@@ -41,19 +41,40 @@ function useValStega(selector) {
     }
   });
 }
-function useValRouteStega(selector, params) {
-  var val = useValStega(selector);
+function resolveParams(params) {
+  if (!params) {
+    return null;
+  }
   var resolvedParams = "then" in params ? undefined : params;
   if ("then" in params) {
     if ("use" in React__default["default"]) {
       // This feels fairly safe: use should be possible to use inside if (?) and the if should most likely
       resolvedParams = React__default["default"].use(params);
     } else {
-      console.error("Val: useValRoute params argument was promise, but the React.use hook is available. Please resolve the promise before passing it to useValRoute (or upgrade to React 19+).");
+      console.error("Val: useValRoute params argument was promise, but the React.use hook is unavailable. Please resolve the promise before passing it to useValRoute (or upgrade to React 19+).");
       return null;
     }
   }
-  var route = initValRouteFromVal.initValRouteFromVal(resolvedParams || {}, "useValRoute", selector && core.Internal.getValPath(selector), selector && core.Internal.getSchema(selector), val);
+  return resolvedParams;
+}
+function useValRouteStega(selector, params) {
+  var val = useValStega(selector);
+  var resolvedParams = resolveParams(params);
+  // Careful: null means there was an error - undefined means no params
+  if (resolvedParams === null) {
+    return null;
+  }
+  var route = routeFromVal.initValRouteFromVal(resolvedParams || {}, "useValRoute", selector && core.Internal.getValPath(selector), selector && core.Internal.getSchema(selector), val);
+  return route;
+}
+function useValRouteUrl(selector, params) {
+  var val = useValStega(selector);
+  var resolvedParams = params === undefined ? undefined : resolveParams(params);
+  // Careful: null means there was an error - undefined means no params
+  if (resolvedParams === null) {
+    return null;
+  }
+  var route = routeFromVal.getValRouteUrlFromVal(resolvedParams || {}, "useValRouteUrl", selector && core.Internal.getValPath(selector), selector && core.Internal.getSchema(selector), val);
   return route;
 }
 
@@ -61,7 +82,8 @@ function useValRouteStega(selector, params) {
 function initValClient(config) {
   return {
     useValStega: useValStega,
-    useValRouteStega: useValRouteStega
+    useValRouteStega: useValRouteStega,
+    useValRouteUrl: useValRouteUrl
   };
 }
 

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

@@ -7,7 +7,7 @@ var core = require('@valbuild/core');
 var stega = require('@valbuild/react/stega');
 var React = require('react');
 var ValOverlayContext = require('../../dist/ValOverlayContext-942f1294.cjs.prod.js');
-var initValRouteFromVal = require('../../dist/initValRouteFromVal-0f4f2d39.cjs.prod.js');
+var routeFromVal = require('../../dist/routeFromVal-a317debc.cjs.prod.js');
 require('../../dist/createForOfIteratorHelper-d4afcad8.cjs.prod.js');
 require('../../dist/unsupportedIterableToArray-0d2087a2.cjs.prod.js');
 require('../../dist/objectSpread2-3c87fb4f.cjs.prod.js');
@@ -41,19 +41,40 @@ function useValStega(selector) {
     }
   });
 }
-function useValRouteStega(selector, params) {
-  var val = useValStega(selector);
+function resolveParams(params) {
+  if (!params) {
+    return null;
+  }
   var resolvedParams = "then" in params ? undefined : params;
   if ("then" in params) {
     if ("use" in React__default["default"]) {
       // This feels fairly safe: use should be possible to use inside if (?) and the if should most likely
       resolvedParams = React__default["default"].use(params);
     } else {
-      console.error("Val: useValRoute params argument was promise, but the React.use hook is available. Please resolve the promise before passing it to useValRoute (or upgrade to React 19+).");
+      console.error("Val: useValRoute params argument was promise, but the React.use hook is unavailable. Please resolve the promise before passing it to useValRoute (or upgrade to React 19+).");
       return null;
     }
   }
-  var route = initValRouteFromVal.initValRouteFromVal(resolvedParams || {}, "useValRoute", selector && core.Internal.getValPath(selector), selector && core.Internal.getSchema(selector), val);
+  return resolvedParams;
+}
+function useValRouteStega(selector, params) {
+  var val = useValStega(selector);
+  var resolvedParams = resolveParams(params);
+  // Careful: null means there was an error - undefined means no params
+  if (resolvedParams === null) {
+    return null;
+  }
+  var route = routeFromVal.initValRouteFromVal(resolvedParams || {}, "useValRoute", selector && core.Internal.getValPath(selector), selector && core.Internal.getSchema(selector), val);
+  return route;
+}
+function useValRouteUrl(selector, params) {
+  var val = useValStega(selector);
+  var resolvedParams = params === undefined ? undefined : resolveParams(params);
+  // Careful: null means there was an error - undefined means no params
+  if (resolvedParams === null) {
+    return null;
+  }
+  var route = routeFromVal.getValRouteUrlFromVal(resolvedParams || {}, "useValRouteUrl", selector && core.Internal.getValPath(selector), selector && core.Internal.getSchema(selector), val);
   return route;
 }
 
@@ -61,7 +82,8 @@ function useValRouteStega(selector, params) {
 function initValClient(config) {
   return {
     useValStega: useValStega,
-    useValRouteStega: useValRouteStega
+    useValRouteStega: useValRouteStega,
+    useValRouteUrl: useValRouteUrl
   };
 }
 

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

@@ -3,7 +3,7 @@ import { Internal } from '@valbuild/core';
 import { getModuleIds, stegaEncode } from '@valbuild/react/stega';
 import React from 'react';
 import { useValOverlayContext } from '../../dist/ValOverlayContext-6635a4d7.esm.js';
-import { i as initValRouteFromVal } from '../../dist/initValRouteFromVal-4e6253bf.esm.js';
+import { i as initValRouteFromVal, g as getValRouteUrlFromVal } from '../../dist/routeFromVal-248c62f1.esm.js';
 import '../../dist/createForOfIteratorHelper-5758a730.esm.js';
 import '../../dist/unsupportedIterableToArray-5baabfdc.esm.js';
 import '../../dist/objectSpread2-c1340c1c.esm.js';
@@ -33,27 +33,49 @@ function useValStega(selector) {
     }
   });
 }
-function useValRouteStega(selector, params) {
-  var val = useValStega(selector);
+function resolveParams(params) {
+  if (!params) {
+    return null;
+  }
   var resolvedParams = "then" in params ? undefined : params;
   if ("then" in params) {
     if ("use" in React) {
       // This feels fairly safe: use should be possible to use inside if (?) and the if should most likely
       resolvedParams = React.use(params);
     } else {
-      console.error("Val: useValRoute params argument was promise, but the React.use hook is available. Please resolve the promise before passing it to useValRoute (or upgrade to React 19+).");
+      console.error("Val: useValRoute params argument was promise, but the React.use hook is unavailable. Please resolve the promise before passing it to useValRoute (or upgrade to React 19+).");
       return null;
     }
   }
+  return resolvedParams;
+}
+function useValRouteStega(selector, params) {
+  var val = useValStega(selector);
+  var resolvedParams = resolveParams(params);
+  // Careful: null means there was an error - undefined means no params
+  if (resolvedParams === null) {
+    return null;
+  }
   var route = initValRouteFromVal(resolvedParams || {}, "useValRoute", selector && Internal.getValPath(selector), selector && Internal.getSchema(selector), val);
   return route;
 }
+function useValRouteUrl(selector, params) {
+  var val = useValStega(selector);
+  var resolvedParams = params === undefined ? undefined : resolveParams(params);
+  // Careful: null means there was an error - undefined means no params
+  if (resolvedParams === null) {
+    return null;
+  }
+  var route = getValRouteUrlFromVal(resolvedParams || {}, "useValRouteUrl", selector && Internal.getValPath(selector), selector && Internal.getSchema(selector), val);
+  return route;
+}
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function initValClient(config) {
   return {
     useValStega: useValStega,
-    useValRouteStega: useValRouteStega
+    useValRouteStega: useValRouteStega,
+    useValRouteUrl: useValRouteUrl
   };
 }
 

package/dist/ValApp-0ded607c.cjs.dev.js

@@ -0,0 +1,133 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var slicedToArray = require('./slicedToArray-44036a76.cjs.dev.js');
+var ui = require('@valbuild/ui');
+var Script = require('next/script');
+var React = require('react');
+var cssUtils = require('./cssUtils-9c11102f.cjs.dev.js');
+var jsxRuntime = require('react/jsx-runtime');
+require('./unsupportedIterableToArray-c8ab77c9.cjs.dev.js');
+require('@valbuild/shared/internal');
+require('@valbuild/core');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var Script__default = /*#__PURE__*/_interopDefault(Script);
+
+var ValApp = function ValApp(_ref) {
+  var config = _ref.config;
+  var route = "/api/val"; // TODO: make configurable
+  var _useState = React.useState(),
+    _useState2 = slicedToArray._slicedToArray(_useState, 2),
+    inMessageMode = _useState2[0],
+    setInMessageMode = _useState2[1];
+  var isClientSIde = inMessageMode === undefined;
+  cssUtils.useConfigStorageSave(config);
+  React.useEffect(function () {
+    if (location.search === "?message_onready=true") {
+      setInMessageMode(true);
+      var interval = setInterval(function () {
+        window.parent.postMessage({
+          type: "val-ready"
+        }, "*");
+      });
+      return function () {
+        clearInterval(interval);
+      };
+    } else {
+      setInMessageMode(false);
+    }
+  }, []);
+
+  // this theme is used to avoid flickering
+  var _useState3 = React.useState(config.defaultTheme || null),
+    _useState4 = slicedToArray._slicedToArray(_useState3, 2),
+    loadingTheme = _useState4[0],
+    setLoadingTheme = _useState4[1];
+  React.useEffect(function () {
+    var theme = localStorage.getItem("val-theme-" + ((config === null || config === void 0 ? void 0 : config.project) || "unknown"));
+    if (theme === "dark") {
+      setLoadingTheme("dark");
+    } else if (theme === "light") {
+      setLoadingTheme("light");
+    } else if (config.defaultTheme) {
+      setLoadingTheme(config.defaultTheme);
+    }
+  }, [config]);
+  var darkBg = "#0c111d";
+  var lightBg = "white";
+  React.useEffect(function () {
+    if (inMessageMode || loadingTheme === null) {
+      return;
+    }
+    var body = document.body;
+    var prevBodyBg = body.style.backgroundColor;
+    var prevBodyMinHeight = body.style.minHeight;
+    var prevBodyMinWidth = body.style.minWidth;
+    body.style.backgroundColor = loadingTheme === "dark" ? darkBg : lightBg;
+    body.style.minHeight = "100vh";
+    body.style.minWidth = "100%";
+    window.addEventListener("val-css-loaded", function () {
+      // css was loaded, has been loaded, so let app decide what to do
+      setLoadingTheme(null);
+    });
+    return function () {
+      body.style.backgroundColor = prevBodyBg;
+      body.style.minHeight = prevBodyMinHeight;
+      body.style.minWidth = prevBodyMinWidth;
+      window.removeEventListener("val-css-loaded", function () {
+        setLoadingTheme(null);
+      });
+    };
+  }, [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(cssUtils.valPrefixedClass, "animate-spin {\n  animation: ").concat(cssUtils.valPrefixedClass, "spin 2s linear infinite;\n}\n@keyframes ").concat(cssUtils.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: cssUtils.cn(["animate-spin"]),
+        children: /*#__PURE__*/jsxRuntime.jsx("path", {
+          d: "M21 12a9 9 0 1 1-6.219-8.56"
+        })
+      })]
+    });
+  }
+  if (inMessageMode) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: "Val Studio is disabled: in message mode"
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__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"
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      id: ui.VAL_APP_ID
+    })]
+  });
+};
+
+exports.ValApp = ValApp;

package/dist/ValApp-489d97dc.esm.js

@@ -0,0 +1,125 @@
+'use client';
+import { _ as _slicedToArray } from './slicedToArray-aa291011.esm.js';
+import { VERSION, VAL_APP_PATH, VAL_APP_ID } from '@valbuild/ui';
+import Script from 'next/script';
+import { useState, useEffect } from 'react';
+import { u as useConfigStorageSave, v as valPrefixedClass, c as cn } from './cssUtils-b5651c03.esm.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import './unsupportedIterableToArray-5baabfdc.esm.js';
+import '@valbuild/shared/internal';
+import '@valbuild/core';
+
+var ValApp = function ValApp(_ref) {
+  var config = _ref.config;
+  var route = "/api/val"; // TODO: make configurable
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    inMessageMode = _useState2[0],
+    setInMessageMode = _useState2[1];
+  var isClientSIde = inMessageMode === undefined;
+  useConfigStorageSave(config);
+  useEffect(function () {
+    if (location.search === "?message_onready=true") {
+      setInMessageMode(true);
+      var interval = setInterval(function () {
+        window.parent.postMessage({
+          type: "val-ready"
+        }, "*");
+      });
+      return function () {
+        clearInterval(interval);
+      };
+    } else {
+      setInMessageMode(false);
+    }
+  }, []);
+
+  // this theme is used to avoid flickering
+  var _useState3 = useState(config.defaultTheme || null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    loadingTheme = _useState4[0],
+    setLoadingTheme = _useState4[1];
+  useEffect(function () {
+    var theme = localStorage.getItem("val-theme-" + ((config === null || config === void 0 ? void 0 : config.project) || "unknown"));
+    if (theme === "dark") {
+      setLoadingTheme("dark");
+    } else if (theme === "light") {
+      setLoadingTheme("light");
+    } else if (config.defaultTheme) {
+      setLoadingTheme(config.defaultTheme);
+    }
+  }, [config]);
+  var darkBg = "#0c111d";
+  var lightBg = "white";
+  useEffect(function () {
+    if (inMessageMode || loadingTheme === null) {
+      return;
+    }
+    var body = document.body;
+    var prevBodyBg = body.style.backgroundColor;
+    var prevBodyMinHeight = body.style.minHeight;
+    var prevBodyMinWidth = body.style.minWidth;
+    body.style.backgroundColor = loadingTheme === "dark" ? darkBg : lightBg;
+    body.style.minHeight = "100vh";
+    body.style.minWidth = "100%";
+    window.addEventListener("val-css-loaded", function () {
+      // css was loaded, has been loaded, so let app decide what to do
+      setLoadingTheme(null);
+    });
+    return function () {
+      body.style.backgroundColor = prevBodyBg;
+      body.style.minHeight = prevBodyMinHeight;
+      body.style.minWidth = prevBodyMinWidth;
+      window.removeEventListener("val-css-loaded", function () {
+        setLoadingTheme(null);
+      });
+    };
+  }, [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"
+        })
+      })]
+    });
+  }
+  if (inMessageMode) {
+    return /*#__PURE__*/jsx("div", {
+      children: "Val Studio is disabled: in message mode"
+    });
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Script, {
+      type: "module",
+      src: "".concat(route, "/static").concat(VERSION ? "/".concat(VERSION) : "").concat(VAL_APP_PATH),
+      crossOrigin: "anonymous"
+    }), /*#__PURE__*/jsx("div", {
+      id: VAL_APP_ID
+    })]
+  });
+};
+
+export { ValApp };

package/dist/ValApp-b10c2084.cjs.js

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

package/dist/ValApp-b10c2084.cjs.prod.js

@@ -0,0 +1,133 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var slicedToArray = require('./slicedToArray-ce613de6.cjs.prod.js');
+var ui = require('@valbuild/ui');
+var Script = require('next/script');
+var React = require('react');
+var cssUtils = require('./cssUtils-d97a757c.cjs.prod.js');
+var jsxRuntime = require('react/jsx-runtime');
+require('./unsupportedIterableToArray-0d2087a2.cjs.prod.js');
+require('@valbuild/shared/internal');
+require('@valbuild/core');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var Script__default = /*#__PURE__*/_interopDefault(Script);
+
+var ValApp = function ValApp(_ref) {
+  var config = _ref.config;
+  var route = "/api/val"; // TODO: make configurable
+  var _useState = React.useState(),
+    _useState2 = slicedToArray._slicedToArray(_useState, 2),
+    inMessageMode = _useState2[0],
+    setInMessageMode = _useState2[1];
+  var isClientSIde = inMessageMode === undefined;
+  cssUtils.useConfigStorageSave(config);
+  React.useEffect(function () {
+    if (location.search === "?message_onready=true") {
+      setInMessageMode(true);
+      var interval = setInterval(function () {
+        window.parent.postMessage({
+          type: "val-ready"
+        }, "*");
+      });
+      return function () {
+        clearInterval(interval);
+      };
+    } else {
+      setInMessageMode(false);
+    }
+  }, []);
+
+  // this theme is used to avoid flickering
+  var _useState3 = React.useState(config.defaultTheme || null),
+    _useState4 = slicedToArray._slicedToArray(_useState3, 2),
+    loadingTheme = _useState4[0],
+    setLoadingTheme = _useState4[1];
+  React.useEffect(function () {
+    var theme = localStorage.getItem("val-theme-" + ((config === null || config === void 0 ? void 0 : config.project) || "unknown"));
+    if (theme === "dark") {
+      setLoadingTheme("dark");
+    } else if (theme === "light") {
+      setLoadingTheme("light");
+    } else if (config.defaultTheme) {
+      setLoadingTheme(config.defaultTheme);
+    }
+  }, [config]);
+  var darkBg = "#0c111d";
+  var lightBg = "white";
+  React.useEffect(function () {
+    if (inMessageMode || loadingTheme === null) {
+      return;
+    }
+    var body = document.body;
+    var prevBodyBg = body.style.backgroundColor;
+    var prevBodyMinHeight = body.style.minHeight;
+    var prevBodyMinWidth = body.style.minWidth;
+    body.style.backgroundColor = loadingTheme === "dark" ? darkBg : lightBg;
+    body.style.minHeight = "100vh";
+    body.style.minWidth = "100%";
+    window.addEventListener("val-css-loaded", function () {
+      // css was loaded, has been loaded, so let app decide what to do
+      setLoadingTheme(null);
+    });
+    return function () {
+      body.style.backgroundColor = prevBodyBg;
+      body.style.minHeight = prevBodyMinHeight;
+      body.style.minWidth = prevBodyMinWidth;
+      window.removeEventListener("val-css-loaded", function () {
+        setLoadingTheme(null);
+      });
+    };
+  }, [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(cssUtils.valPrefixedClass, "animate-spin {\n  animation: ").concat(cssUtils.valPrefixedClass, "spin 2s linear infinite;\n}\n@keyframes ").concat(cssUtils.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: cssUtils.cn(["animate-spin"]),
+        children: /*#__PURE__*/jsxRuntime.jsx("path", {
+          d: "M21 12a9 9 0 1 1-6.219-8.56"
+        })
+      })]
+    });
+  }
+  if (inMessageMode) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: "Val Studio is disabled: in message mode"
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__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"
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      id: ui.VAL_APP_ID
+    })]
+  });
+};
+
+exports.ValApp = ValApp;