@valbuild/next 0.101.1 → 0.103.0

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

@@ -10,11 +10,12 @@ var ui = require('@valbuild/ui');
 var navigation = require('next/navigation');
 var Script = require('next/script');
 var React = require('react');
-var ValOverlayContext = require('./ValOverlayContext-c6f27a6d.cjs.dev.js');
+var ValOverlayContext = require('./ValOverlayContext-ca3b6ebd.cjs.dev.js');
 var stega = require('@valbuild/react/stega');
 var internal = require('@valbuild/shared/internal');
-var cssUtils = require('./cssUtils-9c11102f.cjs.dev.js');
+var fallbackColors = require('./fallbackColors-9a2ac53a.cjs.dev.js');
 var createForOfIteratorHelper = require('./createForOfIteratorHelper-0445603c.cjs.dev.js');
+var ValCanvasBridge = require('./ValCanvasBridge-96f67a41.cjs.dev.js');
 var jsxRuntime = require('react/jsx-runtime');
 require('./unsupportedIterableToArray-c8ab77c9.cjs.dev.js');
 require('./defineProperty-f90345d7.cjs.dev.js');
@@ -76,7 +77,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__default["default"].useMemo(function () {
@@ -102,28 +173,102 @@ var ValNextProvider = function ValNextProvider(props) {
     _React$useState2 = slicedToArray._slicedToArray(_React$useState, 2),
     suspendActive = _React$useState2[0],
     setSuspendActive = _React$useState2[1];
-  var _React$useState3 = React__default["default"].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__default["default"].useState(false),
     _React$useState4 = slicedToArray._slicedToArray(_React$useState3, 2),
-    mountOverlay = _React$useState4[0],
-    setMountOverlay = _React$useState4[1];
-  var _React$useState5 = React__default["default"].useState(null),
+    draftSourcesSynced = _React$useState4[0],
+    setDraftSourcesSynced = _React$useState4[1];
+  var _React$useState5 = React__default["default"].useState(),
     _React$useState6 = slicedToArray._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__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...
+    isCanvas = _React$useState8[0],
+    setIsCanvas = _React$useState8[1];
+  var _React$useState9 = React__default["default"].useState(null),
+    _React$useState0 = slicedToArray._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__default["default"].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__default["default"].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__default["default"].useState(false),
+    _React$useState10 = slicedToArray._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 = navigation.useRouter();
   var _React$useTransition = React__default["default"].useTransition(),
     _React$useTransition2 = slicedToArray._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__default["default"].useRef(false);
   var rerenderCounterRef = React__default["default"].useRef(0);
-  var _React$useState9 = React__default["default"].useState(null),
-    _React$useState0 = slicedToArray._slicedToArray(_React$useState9, 2),
-    iframeSrc = _React$useState0[0],
-    setIframeSrc = _React$useState0[1];
+  var _React$useState11 = React__default["default"].useState(null),
+    _React$useState12 = slicedToArray._slicedToArray(_React$useState11, 2),
+    iframeSrc = _React$useState12[0],
+    setIframeSrc = _React$useState12[1];
   var pathname = navigation.usePathname();
+  isRefreshingRef.current = isRefreshing;
   React.useEffect(function () {
     window.dispatchEvent(new CustomEvent("val-provider:pathname", {
       detail: pathname
@@ -139,6 +284,7 @@ var ValNextProvider = function ValNextProvider(props) {
       setMountOverlay(false);
       return;
     }
+    setIsCanvas(internal.isValCanvasFrame(location.search));
     setMountOverlay(hasValEnableCookie(document.cookie));
   }, []);
   React__default["default"].useEffect(function () {
@@ -154,22 +300,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__default["default"].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__default["default"].useEffect(function () {
@@ -254,6 +479,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;
@@ -292,15 +518,20 @@ var ValNextProvider = function ValNextProvider(props) {
         stega.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);
@@ -340,10 +571,10 @@ var ValNextProvider = function ValNextProvider(props) {
       window.dispatchEvent(new CustomEvent("val-append-overlay"));
     }
   });
-  var _React$useState1 = React__default["default"].useState(null),
-    _React$useState10 = slicedToArray._slicedToArray(_React$useState1, 2),
-    dropZone = _React$useState10[0],
-    setDropZone = _React$useState10[1];
+  var _React$useState13 = React__default["default"].useState(null),
+    _React$useState14 = slicedToArray._slicedToArray(_React$useState13, 2),
+    dropZone = _React$useState14[0],
+    setDropZone = _React$useState14[1];
   React__default["default"].useEffect(function () {
     var storedDropZone = localStorage.getItem("val-menu-drop-zone-default");
     if (storedDropZone) {
@@ -352,14 +583,14 @@ var ValNextProvider = function ValNextProvider(props) {
       setDropZone("val-menu-right-center");
     }
   }, []);
-  cssUtils.useConfigStorageSave(props.config);
+  fallbackColors.useConfigStorageSave(props.config);
   var initTheme = React__default["default"].useMemo(function () {
     return initSessionTheme(props.config);
   }, [props.config]);
-  var _React$useState11 = React__default["default"].useState(false),
-    _React$useState12 = slicedToArray._slicedToArray(_React$useState11, 2),
-    spaLoaded = _React$useState12[0],
-    setSpaLoaded = _React$useState12[1];
+  var _React$useState15 = React__default["default"].useState(false),
+    _React$useState16 = slicedToArray._slicedToArray(_React$useState15, 2),
+    spaLoaded = _React$useState16[0],
+    setSpaLoaded = _React$useState16[1];
   React__default["default"].useEffect(function () {
     var listener = function listener() {
       setSpaLoaded(true);
@@ -369,12 +600,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__default["default"].useMemo(function () {
       if (initTheme !== "light") {
-        return ["#0c111d", "white"];
-      } else {
-        return ["white", "black"];
+        return [fallbackColors.floatDarkBg, "white"];
       }
+      return [fallbackColors.floatLightBg, "black"];
     }, [initTheme]),
     _React$useMemo2 = slicedToArray._slicedToArray(_React$useMemo, 2),
     backgroundColor = _React$useMemo2[0],
@@ -396,18 +628,22 @@ var ValNextProvider = function ValNextProvider(props) {
       "items-center": "align-items: center;",
       "justify-center": "justify-content: center;"
     };
-  }, [cssUtils.valPrefixedClass]);
+  }, [fallbackColors.valPrefixedClass]);
   return /*#__PURE__*/jsxRuntime.jsxs(ValOverlayContext.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__*/jsxRuntime.jsxs(React__default["default"].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__*/jsxRuntime.jsxs(React__default["default"].Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsx("style", {
-        children: "\n".concat(positionStyles, "\n").concat(cssUtils.prefixStyles(commonStyles), "\n@keyframes rotate-clock {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n")
+        children: "\n".concat(positionStyles, "\n").concat(fallbackColors.prefixStyles(commonStyles), "\n@keyframes rotate-clock {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n")
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "".concat(getPositionClassName(dropZone), " ").concat(cssUtils.cn(["p-4"])),
+        className: "".concat(getPositionClassName(dropZone), " ").concat(fallbackColors.cn(["p-4"])),
         children: /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "".concat(cssUtils.cn(["flex", "justify-center", "items-center", "p-2"]), " ") + "".concat(cssUtils.cn(["text-text-primary", "bg-bg-primary", "rounded", "backdrop-blur"])),
+          className: "".concat(fallbackColors.cn(["flex", "justify-center", "items-center", "p-2"]), " ") + "".concat(fallbackColors.cn(["text-text-primary", "bg-bg-primary", "rounded", "backdrop-blur"])),
           children: /*#__PURE__*/jsxRuntime.jsxs("svg", {
             xmlns: "http://www.w3.org/2000/svg",
             width: "16",
@@ -444,7 +680,7 @@ var ValNextProvider = function ValNextProvider(props) {
           })
         })
       })]
-    }), mountOverlay && /*#__PURE__*/jsxRuntime.jsxs(React__default["default"].Fragment, {
+    }), mountOverlay && !isCanvas && /*#__PURE__*/jsxRuntime.jsxs(React__default["default"].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),
@@ -453,6 +689,9 @@ var ValNextProvider = function ValNextProvider(props) {
         id: ui.VAL_OVERLAY_ID,
         ref: container
       })]
+    }), mountOverlay && isCanvas && /*#__PURE__*/jsxRuntime.jsx(ValCanvasBridge.ValCanvasBridge, {
+      draftMode: draftMode === true,
+      isRefreshing: isRefreshing
     }), mountOverlay && iframeSrc && /*#__PURE__*/jsxRuntime.jsx("iframe", {
       loading: "eager",
       style: {
@@ -474,7 +713,7 @@ function useConsoleLogEnableVal(showOverlay) {
     }
   }, [showOverlay]);
 }
-var positionStyles = cssUtils.prefixStyles({
+var positionStyles = fallbackColors.prefixStyles({
   "left-0": "left: 0;",
   "top-0": "top: 0;",
   "left-1/2": "left: 50%;",
@@ -487,25 +726,25 @@ var positionStyles = cssUtils.prefixStyles({
 
 // This is a copy of the function from the ValMenu component.
 function getPositionClassName(dropZone) {
-  var className = cssUtils.cn(["fixed", "transform"]);
+  var className = fallbackColors.cn(["fixed", "transform"]);
   if (dropZone === "val-menu-left-top") {
-    className += " ".concat(cssUtils.cn(["left-0", "top-0"]));
+    className += " ".concat(fallbackColors.cn(["left-0", "top-0"]));
   } else if (dropZone === "val-menu-left-center") {
-    className += " ".concat(cssUtils.cn(["left-0", "top-1/2", "-translate-y-1/2"]));
+    className += " ".concat(fallbackColors.cn(["left-0", "top-1/2", "-translate-y-1/2"]));
   } else if (dropZone === "val-menu-left-bottom") {
-    className += " ".concat(cssUtils.cn(["left-0", "bottom-0"]));
+    className += " ".concat(fallbackColors.cn(["left-0", "bottom-0"]));
   } else if (dropZone === "val-menu-center-top") {
-    className += " ".concat(cssUtils.cn(["left-1/2", "-translate-x-1/2", "top-0"]));
+    className += " ".concat(fallbackColors.cn(["left-1/2", "-translate-x-1/2", "top-0"]));
   } else if (dropZone === "val-menu-center-bottom") {
-    className += " ".concat(cssUtils.cn(["left-1/2", "-translate-x-1/2", "bottom-0"]));
+    className += " ".concat(fallbackColors.cn(["left-1/2", "-translate-x-1/2", "bottom-0"]));
   } else if (dropZone === "val-menu-right-top") {
-    className += " ".concat(cssUtils.cn(["right-0", "top-0"]));
+    className += " ".concat(fallbackColors.cn(["right-0", "top-0"]));
   } else if (dropZone === "val-menu-right-center") {
-    className += " ".concat(cssUtils.cn(["right-0", "top-1/2", "-translate-y-1/2"]));
+    className += " ".concat(fallbackColors.cn(["right-0", "top-1/2", "-translate-y-1/2"]));
   } else if (dropZone === "val-menu-right-bottom") {
-    className += " ".concat(cssUtils.cn(["right-0", "bottom-0"]));
+    className += " ".concat(fallbackColors.cn(["right-0", "bottom-0"]));
   } else {
-    className += " ".concat(cssUtils.cn(["right-0", "bottom-0"]));
+    className += " ".concat(fallbackColors.cn(["right-0", "bottom-0"]));
   }
   return className;
 }

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

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