@valbuild/tanstack 0.124.0

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

@@ -0,0 +1,2005 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var version = require('./version-5ac70ccf.cjs.prod.js');
+var createForOfIteratorHelper = require('./createForOfIteratorHelper-0324e063.cjs.prod.js');
+var core = require('@valbuild/core');
+var stega = require('@valbuild/react/stega');
+var internal = require('@valbuild/react/internal');
+var ui = require('@valbuild/ui');
+var reactRouter = require('@tanstack/react-router');
+var React = require('react');
+var ValOverlayContext = require('./ValOverlayContext-abd6ab9a.cjs.prod.js');
+var client = require('@valbuild/shared/client');
+var jsxRuntime = require('react/jsx-runtime');
+require('@valbuild/core/patch');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var core__namespace = /*#__PURE__*/_interopNamespace(core);
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+function getUnpatchedUnencodedVal(selector) {
+  // It is weird to use stega encode here since we never actually should stega encode,
+  // however, this is a workaround, since if it is disabled, it will behave as we want
+  return stega.stegaEncode(selector, {
+    disabled: true
+  });
+}
+
+function decodeValPathsOfString(encodedString) {
+  return stega.stegaDecodeStrings(encodedString);
+}
+
+var tanstackRouter = core.Internal.tanstackRouter;
+var externalPageRouter = core.Internal.externalPageRouter;
+
+/**
+ * Returns true if the Val Enable cookie is set. Must be called on the server —
+ * inside a server function, a server route handler, or during SSR — and
+ * returns false anywhere else.
+ *
+ * Not needed for the `suspend` prop on ValProvider, which detects the cookie
+ * client-side; reserve it for advanced server-side conditionals.
+ */
+function isValEnabled() {
+  return _isValEnabled.apply(this, arguments);
+}
+function _isValEnabled() {
+  _isValEnabled = version._asyncToGenerator(/*#__PURE__*/version._regenerator().m(function _callee() {
+    var _yield$import, getCookie;
+    return version._regenerator().w(function (_context) {
+      while (1) switch (_context.p = _context.n) {
+        case 0:
+          _context.p = 0;
+          _context.n = 1;
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@tanstack/react-start/server')); });
+        case 1:
+          _yield$import = _context.v;
+          getCookie = _yield$import.getCookie;
+          return _context.a(2, getCookie(core.Internal.VAL_ENABLE_COOKIE_NAME) === "true");
+        case 2:
+          _context.p = 2;
+          _context.v;
+          return _context.a(2, false);
+      }
+    }, _callee, null, [[0, 2]]);
+  }));
+  return _isValEnabled.apply(this, arguments);
+}
+var initVal = function initVal(config) {
+  var _createValSystem = core.initVal(config),
+    s = _createValSystem.s,
+    c = _createValSystem.c,
+    val = _createValSystem.val,
+    systemConfig = _createValSystem.config;
+  var currentConfig = createForOfIteratorHelper._objectSpread2(createForOfIteratorHelper._objectSpread2({}, systemConfig), config);
+  return {
+    s: s,
+    c: c,
+    isValEnabled: isValEnabled,
+    tanstackRouter: tanstackRouter,
+    externalPageRouter: externalPageRouter,
+    val: createForOfIteratorHelper._objectSpread2(createForOfIteratorHelper._objectSpread2({}, val), {}, {
+      attrs: stega.attrs,
+      unstable_decodeValPathsOfString: decodeValPathsOfString,
+      raw: stega.raw,
+      unstable_getUnpatchedUnencodedVal: getUnpatchedUnencodedVal
+    }),
+    config: currentConfig
+  };
+};
+
+/**
+ * Loads the Studio's ES module bundle.
+ *
+ * `next/script` in the Next package; here it is a `<script>` appended to the
+ * head, because TanStack Start has no script component and React 19's own
+ * script hoisting does not cover `type="module"` — it dedupes `<script async
+ * src>` only, and a module script rendered into the tree would be re-inserted
+ * on every remount.
+ *
+ * Deduped by `src` against the document, so the overlay and the studio page
+ * can both ask for the same bundle (and a remount can ask again) without
+ * loading it twice. Never removed on unmount: the bundle has registered custom
+ * elements and event listeners by then, and re-running it is not free.
+ */
+function ValScript(_ref) {
+  var src = _ref.src;
+  React.useEffect(function () {
+    var existing = document.querySelector("script[data-val-script=\"".concat(CSS.escape(src), "\"]"));
+    if (existing) {
+      return;
+    }
+    var script = document.createElement("script");
+    script.type = "module";
+    script.crossOrigin = "anonymous";
+    script.src = src;
+    script.dataset["valScript"] = src;
+    document.head.appendChild(script);
+  }, [src]);
+  return null;
+}
+
+/*
+ * See the useConfig.tsx where the config is loaded from session storage
+ */
+function useConfigStorageSave(config) {
+  React__default["default"].useEffect(function () {
+    sessionStorage.setItem(client.VAL_CONFIG_SESSION_STORAGE_KEY, JSON.stringify(config));
+  }, [config]);
+}
+
+function initSessionTheme(config) {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  var existingSessionTheme = sessionStorage.getItem(client.VAL_THEME_SESSION_STORAGE_KEY);
+  if (existingSessionTheme && (existingSessionTheme === "dark" || existingSessionTheme === "light")) {
+    return existingSessionTheme;
+  }
+  var storedTheme = localStorage.getItem("val-theme-" + ((config === null || config === void 0 ? void 0 : config.project) || "unknown"));
+  var theme = "dark";
+  if (storedTheme === "light" || storedTheme === "dark") {
+    theme = storedTheme;
+  } else if ((config === null || config === void 0 ? void 0 : config.defaultTheme) === "dark" || (config === null || config === void 0 ? void 0 : config.defaultTheme) === "light") {
+    theme = config.defaultTheme;
+  }
+  sessionStorage.setItem(client.VAL_THEME_SESSION_STORAGE_KEY, theme);
+  return theme;
+}
+
+// All DOM element that are outside the Shadow DOM should use this class name prefix
+var valPrefixedClass = "val-prefix-" + core.Internal.getSHA256Hash(new TextEncoder().encode(ui.VERSION || "")).slice(0, 8) + "-";
+var prefixStyles = function prefixStyles(styles) {
+  return Object.entries(styles).map(function (_ref) {
+    var _ref2 = createForOfIteratorHelper._slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    return ".".concat(valPrefixedClass).concat(key.replace(/\//g, "\\/"), " { ").concat(value, " }");
+  }).join("\n");
+};
+var cn = function cn(className) {
+  return className.map(function (c) {
+    return "".concat(valPrefixedClass).concat(c);
+  }).join(" ");
+};
+
+/**
+ * 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;
+}
+
+/**
+ * Colours for the moments before Val's own stylesheet exists.
+ *
+ * Two of them, and they are not interchangeable. The studio's loading screen
+ * covers the whole viewport and is replaced by the studio's canvas, so it has
+ * to match `--bg-canvas`. The loading pill sits on the customer's page as a
+ * piece of Val's floating chrome, so it has to match `--bg-float`. Getting
+ * them the wrong way round is not invisible: the studio flashes one colour and
+ * repaints in another the moment the stylesheet lands.
+ *
+ * Hardcoded because that is the whole point — these are used exactly when the
+ * variables that define them are not loaded yet. They are copies, so they go
+ * stale silently: if `--bg-canvas` or `--bg-float` changes in
+ * `packages/ui/spa/index.css`, change them here too.
+ */
+
+/** `--bg-canvas`, dark. The studio's own background. */
+var canvasDarkBg = "#08080a";
+/** `--bg-canvas`, light. */
+var canvasLightBg = "#f4f4f5";
+
+/** `--bg-float`, dark. Val's chrome, floating over the customer's page. */
+var floatDarkBg = "#131316";
+/** `--bg-float`, light. */
+var floatLightBg = "#fcfcfc";
+
+var SELECTION = "#079455";
+var SELECTION_SOFT = "rgba(7, 148, 85, 0.4)";
+
+/**
+ * How often the page is re-measured even when nothing said it changed.
+ *
+ * A backstop, not the mechanism — the observers below carry the responsive
+ * case. Slow enough to be free, fast enough that a field which appeared late is
+ * in the list before anyone goes looking for it.
+ */
+var RESCAN_INTERVAL_MS = 5000;
+
+/**
+ * The page's half of the canvas protocol.
+ *
+ * Mounted only in the studio's canvas frame. Its job is to tell the studio
+ * where Val's content is on the page, and to do the two things the studio can
+ * ask of a document it cannot touch: outline an element, and treat a click as a
+ * pick rather than as a click.
+ *
+ * Nothing here is visible on the customer's own site — this component is not
+ * mounted there at all.
+ */
+function ValCanvasBridge(_ref) {
+  var draftMode = _ref.draftMode,
+    isRefreshing = _ref.isRefreshing;
+  var _React$useState = React__default["default"].useState(false),
+    _React$useState2 = createForOfIteratorHelper._slicedToArray(_React$useState, 2),
+    picking = _React$useState2[0],
+    setPicking = _React$useState2[1];
+  var _React$useState3 = React__default["default"].useState(null),
+    _React$useState4 = createForOfIteratorHelper._slicedToArray(_React$useState3, 2),
+    highlighted = _React$useState4[0],
+    setHighlighted = _React$useState4[1];
+  // Kept in a ref as well, because the capture-phase click listener below is
+  // installed once and would otherwise close over the first value forever.
+  var pickingRef = React__default["default"].useRef(false);
+  pickingRef.current = picking;
+  var post = React__default["default"].useCallback(function (message) {
+    // `*` as the target origin: the studio and the page share an origin today,
+    // but the frame does not know the parent's origin for certain and naming
+    // the wrong one silently drops the message. Nothing sent here is
+    // sensitive — it is the positions of elements on a page the parent is
+    // already displaying.
+    window.parent.postMessage(message, "*");
+  }, []);
+
+  /**
+   * The last payload posted, as a string.
+   *
+   * The periodic scan below runs whether or not anything moved, and an
+   * unchanged payload costs the studio a re-render of the fields column for
+   * nothing. Compared as a string because the comparison has to be by value —
+   * every scan builds fresh objects.
+   */
+  var lastPosted = React__default["default"].useRef(null);
+
+  /** Every element Val tagged, with where it is on the page. */
+  var scan = React__default["default"].useCallback(function () {
+    var elements = [];
+    var scrollX = window.scrollX;
+    var scrollY = window.scrollY;
+    document.querySelectorAll("[data-val-path]").forEach(function (el) {
+      if (!(el instanceof HTMLElement) && !(el instanceof SVGElement)) return;
+      var attribute = el.getAttribute("data-val-path");
+      if (!attribute) return;
+      /**
+       * A `<source>` has no box of its own, so its `<video>`/`<picture>` parent
+       * is measured instead — the same substitution the overlay makes, and for
+       * the same reason: an element with a zero-size rect cannot be pointed at.
+       */
+      var measured = el;
+      if (el.tagName === "SOURCE") {
+        var parent = el.parentElement;
+        if (parent && (parent.tagName === "VIDEO" || parent.tagName === "PICTURE")) {
+          measured = parent;
+        }
+      }
+      var rect = measured.getBoundingClientRect();
+      if (rect.width === 0 && rect.height === 0) return;
+      elements.push({
+        // Split by the same helper the rest of Val uses, so the studio gets
+        // the paths back in exactly the form it holds them in.
+        paths: core.Internal.splitJoinedSourcePaths(attribute),
+        // Page coordinates, not viewport: the studio scales and offsets the
+        // whole document, so a viewport-relative box would be wrong the moment
+        // the frame scrolled.
+        rect: {
+          top: rect.top + scrollY,
+          left: rect.left + scrollX,
+          width: rect.width,
+          height: rect.height
+        }
+      });
+    });
+    var message = {
+      val: client.VAL_CANVAS_MESSAGE,
+      type: "elements",
+      elements: elements,
+      pageSize: {
+        width: document.documentElement.scrollWidth,
+        height: document.documentElement.scrollHeight
+      }
+    };
+    var serialized = JSON.stringify(message);
+    if (serialized === lastPosted.current) {
+      return;
+    }
+    lastPosted.current = serialized;
+    post(message);
+  }, [post]);
+
+  // Relayed as it changes, not polled: the studio only has to know the two
+  // edges, and a message per render would be a message per keystroke.
+  React__default["default"].useEffect(function () {
+    post({
+      val: client.VAL_CANVAS_MESSAGE,
+      type: "refreshing",
+      pending: isRefreshing === true
+    });
+  }, [post, isRefreshing]);
+
+  // Announce the frame, and say whether it is actually showing draft content.
+  React__default["default"].useEffect(function () {
+    post({
+      val: client.VAL_CANVAS_MESSAGE,
+      type: "ready",
+      draftMode: draftMode,
+      url: window.location.href
+    });
+  }, [post, draftMode]);
+
+  /**
+   * Re-scan whenever the page could have moved.
+   *
+   * Coalesced into one animation frame: a layout change fires mutation,
+   * resize and scroll events together, and scanning three times produces three
+   * identical messages.
+   */
+  React__default["default"].useEffect(function () {
+    var frame = null;
+    var schedule = function schedule() {
+      if (frame !== null) return;
+      frame = requestAnimationFrame(function () {
+        frame = null;
+        scan();
+      });
+    };
+    schedule();
+    var mutations = new MutationObserver(schedule);
+    mutations.observe(document.body, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: ["data-val-path", "class", "style"]
+    });
+    var resizes = new ResizeObserver(schedule);
+    resizes.observe(document.documentElement);
+    window.addEventListener("scroll", schedule, {
+      passive: true
+    });
+    window.addEventListener("resize", schedule);
+    // Images and fonts land after the first paint and move everything below
+    // them, so the boxes measured before `load` are stale by definition.
+    window.addEventListener("load", schedule);
+    return function () {
+      if (frame !== null) cancelAnimationFrame(frame);
+      mutations.disconnect();
+      resizes.disconnect();
+      window.removeEventListener("scroll", schedule);
+      window.removeEventListener("resize", schedule);
+      window.removeEventListener("load", schedule);
+    };
+  }, [scan]);
+
+  /**
+   * And re-scan every few seconds regardless.
+   *
+   * The event-driven scan above is not enough in practice, and the way it fails
+   * is confusing rather than obviously broken: the fields column shows some of
+   * what is on the page and not the rest, until you happen to edit one of the
+   * missing ones and they appear. Anything that tags content after the observers
+   * are set up but produces no mutation they watch — a streamed-in server
+   * component, an element that measured zero because its image had not decoded,
+   * content revealed by something outside `data-val-path`, `class` and `style` —
+   * is invisible until the next unrelated change. A slow poll costs nothing and
+   * closes all of those at once, without having to guess which one it was.
+   *
+   * Idle-scheduled, and never on the frame's critical path. A scan is a
+   * `querySelectorAll` plus a forced layout per tagged element, which is exactly
+   * the kind of work that should wait for a gap rather than take one — and this
+   * runs inside the customer's own page, where Val is a guest. Skipped entirely
+   * while the frame is hidden, where the boxes cannot have moved and nobody is
+   * looking at them.
+   */
+  React__default["default"].useEffect(function () {
+    var idle = null;
+    var runWhenIdle = function runWhenIdle() {
+      if (document.hidden || idle !== null) return;
+      // `requestIdleCallback` where it exists, a timeout where it does not
+      // (Safari). The timeout option matters: without it a busy page can defer
+      // an idle callback indefinitely, which is the one outcome worse than
+      // scanning at a bad moment.
+      if (typeof window.requestIdleCallback === "function") {
+        idle = window.requestIdleCallback(function () {
+          idle = null;
+          scan();
+        }, {
+          timeout: 1000
+        });
+      } else {
+        idle = window.setTimeout(function () {
+          idle = null;
+          scan();
+        }, 0);
+      }
+    };
+    var interval = window.setInterval(runWhenIdle, RESCAN_INTERVAL_MS);
+    return function () {
+      window.clearInterval(interval);
+      if (idle === null) return;
+      if (typeof window.cancelIdleCallback === "function") {
+        window.cancelIdleCallback(idle);
+      } else {
+        window.clearTimeout(idle);
+      }
+    };
+  }, [scan]);
+
+  // What the studio asks for.
+  React__default["default"].useEffect(function () {
+    var listener = function listener(event) {
+      if (!client.isValCanvasStudioMessage(event.data)) return;
+      var message = event.data;
+      if (message.type === "rescan") {
+        scan();
+        return;
+      }
+      if (message.type === "setPicking") {
+        setPicking(message.picking);
+        return;
+      }
+      if (message.type === "sourceUpdate") {
+        /**
+         * Handed straight to the listener the page already has.
+         *
+         * `ValTanStackProvider` listens for this event on its own window to make an
+         * inline edit visible behind the overlay; the only thing different here
+         * is that the edit was made in another window. Re-dispatching rather
+         * than reaching into the store keeps one path into the page — including
+         * the `router.invalidate()` it throttles behind it, which is what brings a
+         * server component's own re-read across.
+         */
+        window.dispatchEvent(new CustomEvent("val-event", {
+          detail: {
+            type: "source-update",
+            moduleFilePath: message.moduleFilePath,
+            source: message.source
+          }
+        }));
+        return;
+      }
+      if (message.type === "sourcesSynced") {
+        // Relayed the same way and for the same reason as `sourceUpdate`: the
+        // page is listening on its own window, and the studio is in another.
+        window.dispatchEvent(new CustomEvent("val-event", {
+          detail: {
+            type: "sources-synced"
+          }
+        }));
+        return;
+      }
+      setHighlighted(message.path);
+      if (message.path !== null && message.scrollIntoView) {
+        var target = findByPath(message.path);
+        // NOT `scrollIntoView` — see `scrollWithinPage`.
+        if (target !== null) scrollWithinPage(target);
+      }
+    };
+    window.addEventListener("message", listener);
+    return function () {
+      return window.removeEventListener("message", listener);
+    };
+  }, [scan]);
+
+  /**
+   * Picking.
+   *
+   * Capture phase, and the event is stopped: the point of picking mode is that
+   * a click means "this one" rather than what the page would do with it, and a
+   * link that navigates has taken the canvas somewhere else before the studio
+   * hears anything.
+   */
+  React__default["default"].useEffect(function () {
+    var onClick = function onClick(event) {
+      if (!pickingRef.current) return;
+      var target = event.target;
+      if (!(target instanceof Element)) return;
+      var tagged = target.closest("[data-val-path]");
+      var attribute = tagged === null || tagged === void 0 ? void 0 : tagged.getAttribute("data-val-path");
+      if (!attribute) return;
+      event.preventDefault();
+      event.stopPropagation();
+      post({
+        val: client.VAL_CANVAS_MESSAGE,
+        type: "clicked",
+        paths: core.Internal.splitJoinedSourcePaths(attribute)
+      });
+    };
+    document.addEventListener("click", onClick, {
+      capture: true
+    });
+    return function () {
+      return document.removeEventListener("click", onClick, {
+        capture: true
+      });
+    };
+  }, [post]);
+
+  /**
+   * Two-finger gestures, handed to the studio.
+   *
+   * The window around the page is the studio's, and the page is a frame: a
+   * finger that lands here is this document's and the studio never hears about
+   * it. So a pinch on the page could not zoom the window, which on a phone is
+   * the only zoom there is — the toolbar's + and - are a poor substitute for the
+   * gesture everyone already makes.
+   *
+   * Two fingers and only two. One finger is the page's: it scrolls it, taps its
+   * links, drags whatever the page put there. Two are the window's, for zooming
+   * and for moving the page around inside it. Nothing has to be moded, and the
+   * two cannot be confused for one another.
+   *
+   * `passive: false` because both handlers cancel: the default for two fingers
+   * is the browser's own page zoom, which inside a frame the studio is already
+   * scaling produces two zooms fighting over one gesture.
+   */
+  React__default["default"].useEffect(function () {
+    var midpoint = function midpoint(touches) {
+      return {
+        x: (touches[0].clientX + touches[1].clientX) / 2,
+        y: (touches[0].clientY + touches[1].clientY) / 2
+      };
+    };
+    var span = function span(touches) {
+      return Math.hypot(touches[0].clientX - touches[1].clientX, touches[0].clientY - touches[1].clientY);
+    };
+    /**
+     * Whether a gesture is in progress.
+     *
+     * `touchend` fires per finger, so lifting one of two leaves a `touchend`
+     * carrying a single touch — which is the end of the gesture — and the
+     * second leaves one carrying none. Without this the second would post a
+     * second `end` for a gesture that was already over.
+     */
+    var active = false;
+    var onStart = function onStart(event) {
+      if (event.touches.length !== 2) return;
+      event.preventDefault();
+      active = true;
+      post({
+        val: client.VAL_CANVAS_MESSAGE,
+        type: "pinch",
+        phase: "start",
+        span: span(event.touches),
+        center: midpoint(event.touches)
+      });
+    };
+    var onMove = function onMove(event) {
+      if (event.touches.length !== 2 || !active) return;
+      event.preventDefault();
+      post({
+        val: client.VAL_CANVAS_MESSAGE,
+        type: "pinch",
+        phase: "move",
+        span: span(event.touches),
+        center: midpoint(event.touches)
+      });
+    };
+    var onEnd = function onEnd(event) {
+      if (!active || event.touches.length >= 2) return;
+      active = false;
+      post({
+        val: client.VAL_CANVAS_MESSAGE,
+        type: "pinch",
+        phase: "end",
+        span: 0,
+        center: {
+          x: 0,
+          y: 0
+        }
+      });
+    };
+    document.addEventListener("touchstart", onStart, {
+      passive: false
+    });
+    document.addEventListener("touchmove", onMove, {
+      passive: false
+    });
+    document.addEventListener("touchend", onEnd);
+    document.addEventListener("touchcancel", onEnd);
+    return function () {
+      document.removeEventListener("touchstart", onStart);
+      document.removeEventListener("touchmove", onMove);
+      document.removeEventListener("touchend", onEnd);
+      document.removeEventListener("touchcancel", onEnd);
+    };
+  }, [post]);
+
+  /**
+   * And ctrl/cmd + wheel, which is what a trackpad pinch reports as.
+   *
+   * The same problem as touches and the same answer: the wheel event lands on
+   * this document, so without relaying it a trackpad pinch over the page does
+   * nothing while the identical gesture over the canvas background zooms.
+   *
+   * A PLAIN wheel is deliberately left alone — that is the page scrolling
+   * itself, which is exactly what it should do.
+   */
+  React__default["default"].useEffect(function () {
+    var onWheel = function onWheel(event) {
+      if (!event.ctrlKey && !event.metaKey) return;
+      event.preventDefault();
+      post({
+        val: client.VAL_CANVAS_MESSAGE,
+        type: "zoom",
+        // The same response curve the studio uses for a wheel on its own
+        // background, so the gesture feels the same on both sides of the frame.
+        factor: 1 - event.deltaY / 300,
+        center: {
+          x: event.clientX,
+          y: event.clientY
+        }
+      });
+    };
+    document.addEventListener("wheel", onWheel, {
+      passive: false
+    });
+    return function () {
+      return document.removeEventListener("wheel", onWheel);
+    };
+  }, [post]);
+
+  /**
+   * The outlines, as a stylesheet rather than as injected elements.
+   *
+   * A style rule cannot disturb the page's layout, which an absolutely
+   * positioned box on top of it eventually would — and the whole value of
+   * showing the real page is that it is laid out the way the customer built
+   * it. `outline` rather than `border` for the same reason: outlines do not
+   * take up space.
+   */
+  return /*#__PURE__*/jsxRuntime.jsx("style", {
+    // The attribute selector is built from the path, so it is escaped as a
+    // CSS string. A path contains quotes (`?p="/"`) and would otherwise
+    // close the selector early.
+    dangerouslySetInnerHTML: {
+      __html: [picking ? "[data-val-path] { outline: 1px solid ".concat(SELECTION_SOFT, "; outline-offset: 1px; cursor: pointer; }\n[data-val-path]:hover { outline: 2px solid ").concat(SELECTION, "; }") : "", highlighted ? highlightRule(highlighted) : ""].filter(Boolean).join("\n")
+    }
+  });
+}
+
+/**
+ * A rule that outlines exactly the elements carrying `path`.
+ *
+ * The attribute holds a comma-separated list, so this cannot be one `=`
+ * comparison; and it cannot be a `*=` substring test either, because a path is
+ * a prefix of every path below it. `?p="/blogs/blog1"` is contained in
+ * `?p="/blogs/blog1"."title"`, so a substring test on the route would outline
+ * every field on the page — which is what it did.
+ *
+ * Four selectors instead: the whole attribute, the first item, the last item,
+ * and one in the middle. Between them they match the path as a complete list
+ * item and nothing else.
+ */
+function highlightRule(path) {
+  var value = JSON.stringify(path);
+  var inner = JSON.stringify(",".concat(path, ","));
+  var first = JSON.stringify("".concat(path, ","));
+  var last = JSON.stringify(",".concat(path));
+  var selectors = ["[data-val-path=".concat(value, "]"), "[data-val-path^=".concat(first, "]"), "[data-val-path$=".concat(last, "]"), "[data-val-path*=".concat(inner, "]")].join(",\n");
+  return "".concat(selectors, " { outline: 2px solid ").concat(SELECTION, "; outline-offset: 1px; }");
+}
+
+/**
+ * Bring an element into view WITHOUT scrolling anything outside this page.
+ *
+ * `Element.scrollIntoView` would be the obvious thing, and it is the thing that
+ * broke the studio. It scrolls every scroll container between the element and
+ * the viewport, and for a same-origin frame that chain does not stop at the
+ * frame: it continues into the embedder and scrolls the studio's own containers
+ * too. Measured in Chromium — with the studio's phone panes placed on the
+ * editor, a single `scrollIntoView` in here pulls them back onto the canvas, and
+ * because it reveals the element rather than the frame it can leave them
+ * anywhere in between, showing half of each.
+ *
+ * That is not a thing the page has any business doing. It was asked to show one
+ * of its own elements; where the studio is looking is the studio's affair. So
+ * the scrolling is done by hand, one scrollport at a time, and the walk stops at
+ * this document.
+ *
+ * Only the document centres the target vertically — it is being pointed out,
+ * and something flush against the top edge of the fold does not read as pointed
+ * out. Every scrollport inside the page is moved as little as it takes to bring
+ * the target inside it: a carousel, a sticky sidebar or a sideways-scrolling
+ * table is showing what it is showing on purpose, and re-centring one that did
+ * not need moving is the page rearranging itself around a highlight.
+ */
+function scrollWithinPage(target) {
+  var node = target.parentElement;
+  while (node !== null) {
+    var isRoot = node === document.body || node === document.documentElement;
+    if (isRoot) break;
+    if (isScrollable(node)) {
+      var port = node.getBoundingClientRect();
+      var _box = target.getBoundingClientRect();
+      node.scrollTop += delta(_box.top - port.top, _box.height, node.clientHeight, false);
+      node.scrollLeft += delta(_box.left - port.left, _box.width, node.clientWidth, false);
+    }
+    node = node.parentElement;
+  }
+  // And this document, which is the last scrollport there is as far as the page
+  // is concerned. `window`, not `documentElement.scrollIntoView`-by-another-name:
+  // this cannot reach past the frame.
+  var box = target.getBoundingClientRect();
+  window.scrollTo({
+    top: Math.max(0, window.scrollY + delta(box.top, box.height, window.innerHeight, true)),
+    left: Math.max(0, window.scrollX + delta(box.left, box.width, window.innerWidth, false)),
+    behavior: "smooth"
+  });
+}
+
+/**
+ * How far a scrollport has to move for `size` at `offset` to be shown.
+ *
+ * `center` asks for the middle of the port; without it the answer is zero
+ * whenever the thing is already inside, which is what keeps a scrollport that
+ * did not need moving from being disturbed.
+ */
+function delta(offset, size, port, center) {
+  if (center) return offset - (port - size) / 2;
+  if (offset < 0) return offset;
+  if (offset + size > port) return Math.min(offset, offset + size - port);
+  return 0;
+}
+
+/** Whether this element scrolls its own content, rather than growing with it. */
+function isScrollable(el) {
+  var style = getComputedStyle(el);
+  var scrolls = function scrolls(value) {
+    return value === "auto" || value === "scroll" || value === "overlay";
+  };
+  return scrolls(style.overflowY) && el.scrollHeight > el.clientHeight || scrolls(style.overflowX) && el.scrollWidth > el.clientWidth;
+}
+function findByPath(path) {
+  var elements = document.querySelectorAll("[data-val-path]");
+  for (var _i = 0, _Array$from = Array.from(elements); _i < _Array$from.length; _i++) {
+    var el = _Array$from[_i];
+    var attribute = el.getAttribute("data-val-path");
+    if (!attribute) continue;
+    // Compared as strings: the split returns branded `SourcePath`s and what
+    // came back over `postMessage` is a plain string, which is the same value.
+    if (core.Internal.splitJoinedSourcePaths(attribute).some(function (candidate) {
+      return candidate === path;
+    })) {
+      return el;
+    }
+  }
+  return null;
+}
+
+/**
+ * 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.invalidate()` 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.invalidate()` fired on the edit can reach a server
+ * that has not written the patch yet: the loaders come 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 re-runs every loader on the page: in
+ * development that is a server round trip and a recompile, 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";
+
+/**
+ * How often `/draft/stat` is asked when nothing is in progress.
+ *
+ * Draft mode changes when someone toggles it, which the handshake below already
+ * covers — so this is only there to notice it being changed somewhere else.
+ */
+var DRAFT_IDLE_POLL_MS = 20000;
+
+/**
+ * And how often while the enable/disable handshake is in flight.
+ *
+ * Fast on purpose: the hidden iframe redirects through `/draft/enable`, and the
+ * page cannot do anything useful until that has landed.
+ */
+var DRAFT_HANDSHAKE_POLL_MS = 100;
+
+/**
+ * How long that fast phase may last before it gives up.
+ *
+ * Without a deadline it does not end: the only thing that clears `iframeSrc` is
+ * a `val-ready` message posted by the redirect target, so a frame that fails to
+ * load — a 500, an auth redirect, a dev server still compiling — left the page
+ * asking ten times a second, forever. A browser runs about six connections per
+ * origin, so that is enough to push `/stat`, `/patches` and the canvas document
+ * itself into the browser's own queue, where they are indistinguishable from a
+ * slow server.
+ *
+ * Generous enough for a first compile in the dev server, which is the slowest case
+ * that is not a fault.
+ */
+var DRAFT_HANDSHAKE_TIMEOUT_MS = 10000;
+var ValTanStackProvider = function ValTanStackProvider(props) {
+  var _draftModeReady$curre2;
+  // TODO: use config:
+  var route = "/api/val";
+  /**
+   * Loaded on first use, never at import time.
+   *
+   * `createValClient` validates every request and response against the zod
+   * schemas in `@valbuild/shared/internal`'s `ApiRoutes`, and preconstruct
+   * publishes that entrypoint as one module - so importing it statically put
+   * ~113 KB of zod in the bundle of every page of every Val site. The only
+   * caller is the draft-mode poll below, which returns early unless
+   * `mountOverlay` is set, so a visitor without the Val Enable cookie never
+   * triggers this import and never downloads that chunk.
+   */
+  var clientRef = React__default["default"].useRef(null);
+  var configRef = React__default["default"].useRef(props.config);
+  configRef.current = props.config;
+  var getClient = React__default["default"].useCallback(/*#__PURE__*/version._asyncToGenerator(/*#__PURE__*/version._regenerator().m(function _callee() {
+    var _yield$import, createValClient;
+    return version._regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          if (clientRef.current) {
+            _context.n = 2;
+            break;
+          }
+          _context.n = 1;
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@valbuild/shared/internal')); });
+        case 1:
+          _yield$import = _context.v;
+          createValClient = _yield$import.createValClient;
+          clientRef.current = createValClient(route, createForOfIteratorHelper._objectSpread2(createForOfIteratorHelper._objectSpread2({}, configRef.current), {}, {
+            contentHostUrl: core.DEFAULT_CONTENT_HOST
+          }));
+        case 2:
+          return _context.a(2, clientRef.current);
+      }
+    }, _callee);
+  })), [route]);
+
+  // TODO: move below into react package
+  var valStore = React__default["default"].useMemo(function () {
+    return new ValOverlayContext.ValExternalStore();
+  }, []);
+  // 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 = createForOfIteratorHelper._slicedToArray(_React$useState, 2),
+    suspendActive = _React$useState2[0],
+    setSuspendActive = _React$useState2[1];
+  /**
+   * 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 = createForOfIteratorHelper._slicedToArray(_React$useState3, 2),
+    draftSourcesSynced = _React$useState4[0],
+    setDraftSourcesSynced = _React$useState4[1];
+  var _React$useState5 = React__default["default"].useState(),
+    _React$useState6 = createForOfIteratorHelper._slicedToArray(_React$useState5, 2),
+    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 = createForOfIteratorHelper._slicedToArray(_React$useState7, 2),
+    isCanvas = _React$useState8[0],
+    setIsCanvas = _React$useState8[1];
+  var _React$useState9 = React__default["default"].useState(null),
+    _React$useState0 = createForOfIteratorHelper._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 = createForOfIteratorHelper._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 = reactRouter.useRouter();
+  var _React$useTransition = React__default["default"].useTransition(),
+    _React$useTransition2 = createForOfIteratorHelper._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$useState11 = React__default["default"].useState(null),
+    _React$useState12 = createForOfIteratorHelper._slicedToArray(_React$useState11, 2),
+    iframeSrc = _React$useState12[0],
+    setIframeSrc = _React$useState12[1];
+  var pathname = reactRouter.useRouterState({
+    select: function select(state) {
+      return state.location.pathname;
+    }
+  });
+  isRefreshingRef.current = isRefreshing;
+  React.useEffect(function () {
+    window.dispatchEvent(new CustomEvent("val-provider:pathname", {
+      detail: pathname
+    }));
+  }, [pathname]);
+  useConsoleLogEnableVal(mountOverlay);
+  React__default["default"].useEffect(function () {
+    if (location.search === "?message_onready=true") {
+      console.warn("Val is verifying draft mode...");
+      return;
+    }
+    if (isValStudioPath(location.pathname)) {
+      setMountOverlay(false);
+      return;
+    }
+    setIsCanvas(client.isValCanvasFrame(location.search));
+    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).
+    /*
+     * Gated on `mountOverlay`, not on the cookie directly — the ORDER is the
+     * point.
+     *
+     * `useValStega` suspends on `draftModeReady`, and the only thing that ever
+     * resolves that is the `/draft/stat` poll below, which does not start until
+     * `mountOverlay` is set. Activating the gate in the same effect flush that
+     * sets `mountOverlay` means the tree can suspend before that state has
+     * committed, and then it never does: React was left re-rendering a
+     * suspended tree in which `mountOverlay` is forever `undefined`, so the
+     * poll never ran, so the promise never resolved. The page hydrated and then
+     * simply stopped — no overlay, no draft content, no error.
+     *
+     * Reading `mountOverlay` instead makes the dependency explicit: the poll is
+     * running by the time anything is allowed to wait on it.
+     */
+    if (props.suspend && mountOverlay) {
+      startTransition(function () {
+        setSuspendActive(true);
+      });
+    }
+  }, [props.suspend, mountOverlay]);
+
+  /**
+   * 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 || props.disableRefresh) {
+      return;
+    }
+    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 () {
+        /*
+         * Re-run the loaders of every match, then re-render.
+         *
+         * TanStack's equivalent of `router.refresh()`. `invalidate()` marks the
+         * current matches stale and re-runs their loaders — which is where a
+         * TanStack Start app reads Val content on the server — so this is the
+         * round trip that brings an edit across. It resolves when the loaders
+         * have settled, which is what keeps `isRefreshing` honest.
+         */
+        void router.invalidate();
+      });
+    };
+    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);
+      }
+    };
+    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 () {
+    if (!mountOverlay) {
+      return;
+    }
+    if (draftMode === null) {
+      return;
+    }
+    var valProviderOverlayListener = function valProviderOverlayListener(event) {
+      if (event instanceof CustomEvent) {
+        if (!(event !== null && event !== void 0 && event.detail.type)) {
+          console.error("Val: invalid event detail (val-overlay-provider)", event);
+        }
+        if (event.detail.type === "spa-ready") {
+          setSpaReady(true);
+        } else if (event.detail.type === "draftMode" && (typeof event.detail.value === "boolean" || event.detail.value === null)) {
+          var _draftMode = event.detail.value;
+          if (_draftMode === true) {
+            setIframeSrc(function (prev) {
+              if (prev === null) {
+                return "".concat(route, "/draft/enable?redirect_to=").concat(encodeURIComponent(window.location.origin + "/val?message_onready=true"));
+              }
+              return prev;
+            });
+          } else if (_draftMode === false) {
+            setIframeSrc(function (prev) {
+              if (prev === null) {
+                return "".concat(route, "/draft/disable?redirect_to=").concat(encodeURIComponent(window.location.origin + "/val?message_onready=true"));
+              }
+              return prev;
+            });
+          }
+        } else {
+          console.error("Val: invalid event detail (val-overlay-provider)", event.detail);
+        }
+      } else {
+        console.error("Val: invalid event (val-overlay-provider)", event);
+      }
+    };
+    window.addEventListener("val-overlay-provider", valProviderOverlayListener);
+    return function () {
+      window.removeEventListener("val-overlay-provider", valProviderOverlayListener);
+    };
+  }, [mountOverlay, draftMode]);
+  var pollDraftStatIdRef = React__default["default"].useRef(0);
+  React__default["default"].useEffect(function () {
+    // continuous polling to check for updates:
+
+    var timeout;
+    function pollCurrentDraftMode() {
+      if (!mountOverlay) {
+        return;
+      }
+      window.dispatchEvent(new CustomEvent("val-overlay-spa", {
+        detail: {
+          type: "draftModeLoading",
+          value: iframeSrc !== null
+        }
+      }));
+      var pollDraftStatId = ++pollDraftStatIdRef.current;
+      getClient().then(function (client) {
+        return client("/draft/stat", "GET", {});
+      }).then(function (res) {
+        if (pollDraftStatIdRef.current !== pollDraftStatId) {
+          return;
+        }
+        if (res.status === null) {
+          // ignore network errors
+          return;
+        }
+        if (res.status === 401) {
+          // 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) {
+          console.error("Val: could not get draft mode status", res);
+          return;
+        }
+        setDraftMode(function (prev) {
+          if (prev !== res.json.draftMode) {
+            rerenderCounterRef.current++;
+            window.dispatchEvent(new Event(VAL_EDIT_LANDED));
+            return res.json.draftMode;
+          }
+          return prev;
+        });
+      })["catch"](function (err) {
+        console.error("Val: could not get draft mode status", err);
+      })["finally"](function () {
+        if (pollDraftStatIdRef.current !== pollDraftStatId) {
+          return;
+        }
+        pollDraftStatIdRef.current--;
+        var handshaking = iframeSrc !== null;
+        if (handshaking && Date.now() - startedAt > DRAFT_HANDSHAKE_TIMEOUT_MS) {
+          /**
+           * The handshake did not complete, so stop hammering.
+           *
+           * Clearing `iframeSrc` unmounts the hidden frame and takes the poll
+           * back to its idle interval — which is the honest state: nothing is
+           * in progress any more. Leaving it set is what made this
+           * unrecoverable, because the ONLY other thing that clears it is the
+           * `val-ready` message the frame never sent.
+           */
+          console.warn("Val: draft mode did not confirm in time. Falling back to the " + "idle poll — try toggling preview again.");
+          setIframeSrc(null);
+          return;
+        }
+        timeout = setTimeout(pollCurrentDraftMode, handshaking ? DRAFT_HANDSHAKE_POLL_MS : DRAFT_IDLE_POLL_MS);
+      });
+    }
+    /**
+     * When this spell of polling began.
+     *
+     * The effect re-runs when `iframeSrc` changes, so for the fast phase this is
+     * the moment the handshake started — which is what the deadline below is
+     * measured from.
+     */
+    var startedAt = Date.now();
+    pollCurrentDraftMode();
+    return function () {
+      clearTimeout(timeout);
+    };
+  }, [mountOverlay, iframeSrc]);
+  React__default["default"].useEffect(function () {
+    if (!mountOverlay) {
+      return;
+    }
+    window.dispatchEvent(new CustomEvent("val-overlay-spa", {
+      detail: {
+        type: "draftMode",
+        value: draftMode !== null && draftMode !== void 0 ? draftMode : false
+      }
+    }));
+  }, [mountOverlay, draftMode, spaReady]);
+  React__default["default"].useEffect(function () {
+    if (!mountOverlay) {
+      stega.SET_AUTO_TAG_JSX_ENABLED(false);
+    } else {
+      if (draftMode) {
+        stega.SET_AUTO_TAG_JSX_ENABLED(true);
+        var reactServerComponentRefreshListener = function reactServerComponentRefreshListener(event) {
+          if (event instanceof CustomEvent) {
+            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) {
+                var changed = valStore.update(moduleFilePath, source);
+                /**
+                 * Armed by a CHANGE, not by a message.
+                 *
+                 * The editor re-sends everything it holds whenever this page
+                 * becomes a new document — a reload, or the one the dev server does
+                 * when a publish rewrites the `.val.ts` files — and most of that
+                 * snapshot is content this page already has. Counting those
+                 * bought a whole-route request per publish whether or not the
+                 * page was out of date, which with auto-save on is one per pause
+                 * in typing.
+                 *
+                 * The catch-up that MATTERS still refreshes: a page whose server
+                 * render predates the write has no value for that module, so the
+                 * first arrival counts as a change.
+                 */
+                if (changed && !props.disableRefresh) {
+                  rerenderCounterRef.current++;
+                  window.dispatchEvent(new Event(VAL_EDIT_LANDED));
+                }
+              } else {
+                console.error("Val: invalid event detail", event.detail);
+              }
+            } else {
+              console.error("Val: invalid custom event details (val-event)", event.detail);
+            }
+          } else {
+            console.error("Val: invalid custom event (val-event)", event);
+          }
+        };
+        window.addEventListener("val-event", reactServerComponentRefreshListener);
+        return function () {
+          window.removeEventListener("val-event", reactServerComponentRefreshListener);
+        };
+      }
+    }
+  }, [mountOverlay, draftMode, props.disableRefresh]);
+  React__default["default"].useEffect(function () {
+    if (!mountOverlay) {
+      return;
+    }
+    var listener = function listener(event) {
+      if (event.origin === location.origin && event.data.type === "val-ready") {
+        setIframeSrc(null);
+      }
+    };
+    window.addEventListener("message", listener);
+    return function () {
+      window.removeEventListener("message", listener);
+    };
+  }, [mountOverlay]);
+  var container = React__default["default"].useRef(null);
+  React__default["default"].useEffect(function () {
+    var _container$current;
+    if (((_container$current = container.current) === null || _container$current === void 0 ? void 0 : _container$current.childElementCount) === 0) {
+      window.dispatchEvent(new CustomEvent("val-append-overlay"));
+    }
+  });
+  var _React$useState13 = React__default["default"].useState(null),
+    _React$useState14 = createForOfIteratorHelper._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) {
+      setDropZone(storedDropZone);
+    } else {
+      setDropZone("val-menu-right-center");
+    }
+  }, []);
+  useConfigStorageSave(props.config);
+  var initTheme = React__default["default"].useMemo(function () {
+    return initSessionTheme(props.config);
+  }, [props.config]);
+  var _React$useState15 = React__default["default"].useState(false),
+    _React$useState16 = createForOfIteratorHelper._slicedToArray(_React$useState15, 2),
+    spaLoaded = _React$useState16[0],
+    setSpaLoaded = _React$useState16[1];
+  React__default["default"].useEffect(function () {
+    var listener = function listener() {
+      setSpaLoaded(true);
+    };
+    window.addEventListener("val-ui-created", listener);
+    return function () {
+      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 [floatDarkBg, "white"];
+      }
+      return [floatLightBg, "black"];
+    }, [initTheme]),
+    _React$useMemo2 = createForOfIteratorHelper._slicedToArray(_React$useMemo, 2),
+    backgroundColor = _React$useMemo2[0],
+    textColor = _React$useMemo2[1];
+  var commonStyles = React__default["default"].useMemo(function () {
+    return {
+      "backdrop-blur": "backdrop-filter: blur(10px);",
+      "text-text-primary": "color: ".concat(textColor, ";"),
+      "bg-bg-primary": "background: ".concat(backgroundColor, ";"),
+      rounded: "border-radius: 0.25rem;",
+      fixed: "position: fixed;",
+      "bottom-4": "bottom: 1rem;",
+      "right-12": "right: 3rem;",
+      "right-16": "right: 4rem;",
+      "p-4": "padding: 1rem;",
+      "p-2": "padding: 0.5rem;",
+      "p-1": "padding: 0.25rem;",
+      flex: "display: flex;",
+      "items-center": "align-items: center;",
+      "justify-center": "justify-content: center;"
+    };
+  }, [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 &&
+    // 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(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(cn(["p-4"])),
+        children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "".concat(cn(["flex", "justify-center", "items-center", "p-2"]), " ") + "".concat(cn(["text-text-primary", "bg-bg-primary", "rounded", "backdrop-blur"])),
+          children: /*#__PURE__*/jsxRuntime.jsxs("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [/*#__PURE__*/jsxRuntime.jsx("circle", {
+              cx: "12",
+              cy: "12",
+              r: "11"
+            }), /*#__PURE__*/jsxRuntime.jsx("line", {
+              x1: "12",
+              y1: "4",
+              x2: "12",
+              y2: "12",
+              style: {
+                transformOrigin: "center",
+                animation: "rotate-clock 1000ms linear infinite"
+              }
+            }), /*#__PURE__*/jsxRuntime.jsx("line", {
+              x1: "12",
+              y1: "8",
+              x2: "12",
+              y2: "12",
+              style: {
+                transformOrigin: "center",
+                animation: "rotate-clock 12000ms linear infinite"
+              }
+            })]
+          })
+        })
+      })]
+    }), mountOverlay && !isCanvas && /*#__PURE__*/jsxRuntime.jsxs(React__default["default"].Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(ValScript, {
+        src: "".concat(route, "/static").concat(ui.VERSION ? "/".concat(ui.VERSION) : "").concat(ui.VAL_APP_PATH)
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        id: ui.VAL_OVERLAY_ID,
+        ref: container
+      })]
+    }), mountOverlay && isCanvas && /*#__PURE__*/jsxRuntime.jsx(ValCanvasBridge, {
+      draftMode: draftMode === true,
+      isRefreshing: isRefreshing
+    }), mountOverlay && iframeSrc && /*#__PURE__*/jsxRuntime.jsx("iframe", {
+      loading: "eager",
+      style: {
+        top: 10,
+        left: 10,
+        position: "absolute",
+        width: 1000,
+        height: 1000,
+        visibility: "hidden"
+      },
+      src: iframeSrc
+    }, iframeSrc)]
+  });
+};
+function useConsoleLogEnableVal(showOverlay) {
+  React__default["default"].useEffect(function () {
+    if (process.env["NODE_ENV"] === "development" && showOverlay === false && !isValStudioPath(location.pathname)) {
+      console.warn("\n###########\n###########\n###########                           @@@@\n###########                             @@\n###########    @@      @@  @@@@@@ @     @@\n###########     @@    @@  @@     @@     @@\n###########     @@    @@ %@       @     @@\n####  #####      @@  @@  .@      .@     @@\n###    ####       @@@@    @@:   @@@.    @@\n####  #####       @@@@      @@@@  =@@@@@@@@@\n###########\n\nThis page is built with Val Build - the lightweight CMS where content is code.\n\nVal is currently hidden.\n\nTo show Val, go to the following URL:\n".concat(window.location.origin, "/api/val/enable?redirect_to=").concat(encodeURIComponent(window.location.href), "\n        \nYou are seeing this message because you are in development mode."));
+    }
+  }, [showOverlay]);
+}
+var positionStyles = prefixStyles({
+  "left-0": "left: 0;",
+  "top-0": "top: 0;",
+  "left-1/2": "left: 50%;",
+  "top-1/2": "top: 50%;",
+  "-translate-y-1/2": "transform: translateY(-50%);",
+  "-translate-x-1/2": "transform: translateX(-50%);",
+  "right-0": "right: 0;",
+  "bottom-0": "bottom: 0;"
+});
+
+// This is a copy of the function from the ValMenu component.
+function getPositionClassName(dropZone) {
+  var className = cn(["fixed", "transform"]);
+  if (dropZone === "val-menu-left-top") {
+    className += " ".concat(cn(["left-0", "top-0"]));
+  } else if (dropZone === "val-menu-left-center") {
+    className += " ".concat(cn(["left-0", "top-1/2", "-translate-y-1/2"]));
+  } else if (dropZone === "val-menu-left-bottom") {
+    className += " ".concat(cn(["left-0", "bottom-0"]));
+  } else if (dropZone === "val-menu-center-top") {
+    className += " ".concat(cn(["left-1/2", "-translate-x-1/2", "top-0"]));
+  } else if (dropZone === "val-menu-center-bottom") {
+    className += " ".concat(cn(["left-1/2", "-translate-x-1/2", "bottom-0"]));
+  } else if (dropZone === "val-menu-right-top") {
+    className += " ".concat(cn(["right-0", "top-0"]));
+  } else if (dropZone === "val-menu-right-center") {
+    className += " ".concat(cn(["right-0", "top-1/2", "-translate-y-1/2"]));
+  } else if (dropZone === "val-menu-right-bottom") {
+    className += " ".concat(cn(["right-0", "bottom-0"]));
+  } else {
+    className += " ".concat(cn(["right-0", "bottom-0"]));
+  }
+  return className;
+}
+function isValStudioPath(pathname) {
+  return pathname.startsWith("/val");
+}
+
+// function ValIcon() {
+//   return (
+//     <svg
+//       width="32"
+//       height="32"
+//       viewBox="0 0 105 149"
+//       fill="none"
+//       xmlns="http://www.w3.org/2000/svg"
+//     >
+//       <g filter="url(#filter0_d_14_634)">
+//         <path
+//           d="M21.4768 23.3474C21.4768 22.4628 22.1939 21.7457 23.0785 21.7457H77.1357C78.0203 21.7457 78.7374 22.4628 78.7374 23.3474V125.055C78.7374 125.94 78.0203 126.657 77.1357 126.657H23.0785C22.1939 126.657 21.4768 125.94 21.4768 125.055V23.3474Z"
+//           fill="#38CD98"
+//         />
+//       </g>
+//       <g filter="url(#filter1_i_14_634)">
+//         <circle cx="49.9068" cy="104.233" r="9.61017" fill="#1E1F2A" />
+//       </g>
+//       <defs>
+//         <filter
+//           id="filter0_d_14_634"
+//           x="0.0397091"
+//           y="0.30863"
+//           width="100.135"
+//           height="147.785"
+//           filterUnits="userSpaceOnUse"
+//           colorInterpolationFilters="sRGB"
+//         >
+//           <feFlood floodOpacity="0" result="BackgroundImageFix" />
+//           <feColorMatrix
+//             in="SourceAlpha"
+//             type="matrix"
+//             values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+//             result="hardAlpha"
+//           />
+//           <feOffset />
+//           <feGaussianBlur stdDeviation="10.7185" />
+//           <feComposite in2="hardAlpha" operator="out" />
+//           <feColorMatrix
+//             type="matrix"
+//             values="0 0 0 0 0.219608 0 0 0 0 0.803922 0 0 0 0 0.501961 0 0 0 0.3 0"
+//           />
+//           <feBlend
+//             mode="normal"
+//             in2="BackgroundImageFix"
+//             result="effect1_dropShadow_14_634"
+//           />
+//           <feBlend
+//             mode="normal"
+//             in="SourceGraphic"
+//             in2="effect1_dropShadow_14_634"
+//             result="shape"
+//           />
+//         </filter>
+//         <filter
+//           id="filter1_i_14_634"
+//           x="40.2966"
+//           y="94.6229"
+//           width="19.2205"
+//           height="19.2204"
+//           filterUnits="userSpaceOnUse"
+//           colorInterpolationFilters="sRGB"
+//         >
+//           <feFlood floodOpacity="0" result="BackgroundImageFix" />
+//           <feBlend
+//             mode="normal"
+//             in="SourceGraphic"
+//             in2="BackgroundImageFix"
+//             result="shape"
+//           />
+//           <feColorMatrix
+//             in="SourceAlpha"
+//             type="matrix"
+//             values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+//             result="hardAlpha"
+//           />
+//           <feOffset />
+//           <feGaussianBlur stdDeviation="2.40254" />
+//           <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+//           <feColorMatrix
+//             type="matrix"
+//             values="0 0 0 0 0.219608 0 0 0 0 0.803922 0 0 0 0 0.501961 0 0 0 0.3 0"
+//           />
+//           <feBlend
+//             mode="normal"
+//             in2="shape"
+//             result="effect1_innerShadow_14_634"
+//           />
+//         </filter>
+//       </defs>
+//     </svg>
+//   );
+// }
+
+var ValProvider = ValTanStackProvider;
+
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+
+var _excluded = ["src", "alt", "style", "width", "disableHotspot", "height"];
+function ValImage(props) {
+  var src = props.src,
+    alt = props.alt,
+    style = props.style,
+    width = props.width,
+    disableHotspot = props.disableHotspot,
+    height = props.height,
+    rest = _objectWithoutProperties(props, _excluded);
+  var valPathsOfUrl = src !== null && src !== void 0 && src.url ? decodeValPathsOfString(src.url) : undefined;
+  var valPaths = valPathsOfUrl ? valPathsOfUrl : [];
+  var maybeValPathOfAlt = alt ? decodeValPathsOfString(alt) : undefined;
+  if (maybeValPathOfAlt) {
+    var _iterator = createForOfIteratorHelper._createForOfIteratorHelper(maybeValPathOfAlt),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var valPath = _step.value;
+        valPaths.push(valPath);
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  }
+  var hotspot = src === null || src === void 0 ? void 0 : src.hotspot;
+  var imageStyle = hotspot && !disableHotspot ? createForOfIteratorHelper._objectSpread2(createForOfIteratorHelper._objectSpread2({}, style), {}, {
+    objectPosition: "".concat(hotspot.x * 100, "% ").concat(hotspot.y * 100, "%")
+  }) : style;
+  // The authored dimensions are only used when the caller has not said
+  // otherwise: an explicit width/height is the caller sizing the element, and
+  // overriding it with the file's own size would fight them.
+  var preferMetadataDims = ((src === null || src === void 0 ? void 0 : src.width) !== undefined || (src === null || src === void 0 ? void 0 : src.height) !== undefined) && !width && !height;
+  return /*#__PURE__*/jsxRuntime.jsx("img", createForOfIteratorHelper._objectSpread2(createForOfIteratorHelper._objectSpread2({}, rest), {}, {
+    src: valPathsOfUrl && valPathsOfUrl.length > 0 ? stega.raw(src === null || src === void 0 ? void 0 : src.url) : src === null || src === void 0 ? void 0 : src.url,
+    "data-val-path": valPaths.join(","),
+    "data-val-attr-alt": maybeValPathOfAlt,
+    "data-val-attr-src": valPathsOfUrl && valPathsOfUrl.length > 0 ? valPathsOfUrl.join(",") : undefined,
+    style: imageStyle,
+    alt: alt ? stega.raw(alt) : src !== null && src !== void 0 && src.alt ? stega.raw(src === null || src === void 0 ? void 0 : src.alt) : "",
+    width: preferMetadataDims ? src === null || src === void 0 ? void 0 : src.width : width,
+    height: preferMetadataDims ? src === null || src === void 0 ? void 0 : src.height : height
+  }));
+}
+
+var VAL_READY_PING_MS = 100;
+var ValApp = function ValApp(_ref) {
+  var config = _ref.config,
+    children = _ref.children;
+  var route = "/api/val"; // TODO: make configurable
+  var _useState = React.useState(),
+    _useState2 = createForOfIteratorHelper._slicedToArray(_useState, 2),
+    inMessageMode = _useState2[0],
+    setInMessageMode = _useState2[1];
+  var isClientSIde = inMessageMode === undefined;
+  useConfigStorageSave(config);
+  var container = React.useRef(null);
+  React.useEffect(function () {
+    if (location.search === "?message_onready=true") {
+      setInMessageMode(true);
+      var interval = setInterval(function () {
+        window.parent.postMessage({
+          type: "val-ready"
+        }, "*");
+      }, VAL_READY_PING_MS);
+      return function () {
+        clearInterval(interval);
+      };
+    } else {
+      setInMessageMode(false);
+    }
+  }, []);
+  React.useEffect(function () {
+    var _container$current;
+    if (((_container$current = container.current) === null || _container$current === void 0 ? void 0 : _container$current.childElementCount) === 0) {
+      window.dispatchEvent(new CustomEvent("val-append-studio"));
+    }
+  });
+
+  // this theme is used to avoid flickering
+  var _useState3 = React.useState(config.defaultTheme || null),
+    _useState4 = createForOfIteratorHelper._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]);
+  // The studio's canvas, so the loading screen is the same colour as what
+  // replaces it rather than a flash of a different one.
+  var darkBg = canvasDarkBg;
+  var lightBg = canvasLightBg;
+  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%";
+    // A stable reference: `removeEventListener` compares by identity, so a
+    // second arrow function removes nothing and every re-run of this effect
+    // used to leave another listener behind.
+    var onCssLoaded = function onCssLoaded() {
+      // css was loaded, has been loaded, so let app decide what to do
+      setLoadingTheme(null);
+    };
+    window.addEventListener("val-css-loaded", onCssLoaded);
+    return function () {
+      body.style.backgroundColor = prevBodyBg;
+      body.style.minHeight = prevBodyMinHeight;
+      body.style.minWidth = prevBodyMinWidth;
+      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(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__*/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: 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(ValScript, {
+      src: "".concat(route, "/static").concat(ui.VERSION ? "/".concat(ui.VERSION) : "").concat(ui.VAL_APP_PATH)
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      id: ui.VAL_APP_ID,
+      ref: container
+    }), children]
+  });
+};
+
+// Keep in sync with VAL_MODULES_UPDATED_EVENT in @valbuild/ui (useValModules.ts).
+var VAL_MODULES_UPDATED_EVENT = "val-modules-updated";
+
+/**
+ * Registers the user's `val.modules` registry on `window.__VAL_MODULES__` so
+ * the Val editor SPA (both the `/val` app and the on-page overlay) can read it.
+ *
+ * Must be called from a component that statically imports `val.modules`: the
+ * module `def` entries are function closures, so the registry cannot be
+ * serialized through a loader and has to be pulled into the client bundle and
+ * registered via the window global instead.
+ *
+ * Re-runs when the `modules` reference changes (e.g. on HMR) and dispatches
+ * `val-modules-updated` so the SPA picks up the new registry.
+ */
+function useRegisterValModules(modules) {
+  React.useEffect(function () {
+    window.__VAL_MODULES__ = modules;
+    window.dispatchEvent(new CustomEvent(VAL_MODULES_UPDATED_EVENT));
+  }, [modules]);
+}
+
+/**
+ * Registers the user's `val.modules` registry for the Val editor SPA.
+ *
+ * Render this inside both `<ValProvider>` (the root route) and `<ValApp>` (the
+ * `/val` route), passing your `val.modules` default export:
+ *
+ * @example
+ * import { ValModulesClient } from "@valbuild/tanstack";
+ * import valModules from "../val.modules";
+ *
+ * <ValModulesClient modules={valModules} />
+ */
+function ValModulesClient(_ref) {
+  var modules = _ref.modules;
+  useRegisterValModules(modules);
+  return null;
+}
+
+// NOTE! Side effects:
+stega.autoTagJSX();
+
+// Convenience types
+
+/**
+ * Annotated rather than inferred.
+ *
+ * The inferred type of the spread below reaches into @valbuild/core's internal
+ * declaration files for names like `NonEmptyArray` and `createValPathOfItem`,
+ * which the declaration emitter cannot write down portably: `preconstruct
+ * build` fails with a wall of TS2883 "the inferred type of 'Internal' cannot be
+ * named without a reference to ..." while `tsc --noEmit` stays happy, so it only
+ * shows up in the build job. Naming the type in terms of `typeof InternalCore`
+ * keeps everything the emitter needs reachable through the package entry point.
+ */
+
+var Internal = createForOfIteratorHelper._objectSpread2(createForOfIteratorHelper._objectSpread2({}, core.Internal), {}, {
+  VERSION: createForOfIteratorHelper._objectSpread2(createForOfIteratorHelper._objectSpread2({}, core.Internal.VERSION), {}, {
+    tanstack: version.VERSION
+  })
+});
+
+Object.defineProperty(exports, 'GenericSelector', {
+  enumerable: true,
+  get: function () { return core.GenericSelector; }
+});
+Object.defineProperty(exports, 'Schema', {
+  enumerable: true,
+  get: function () { return core.Schema; }
+});
+Object.defineProperty(exports, 'VAL_EXTENSION', {
+  enumerable: true,
+  get: function () { return core.VAL_EXTENSION; }
+});
+Object.defineProperty(exports, 'derefPatch', {
+  enumerable: true,
+  get: function () { return core.derefPatch; }
+});
+exports.expr = core__namespace;
+Object.defineProperty(exports, 'modules', {
+  enumerable: true,
+  get: function () { return core.modules; }
+});
+Object.defineProperty(exports, 'ValRichText', {
+  enumerable: true,
+  get: function () { return internal.ValRichText; }
+});
+exports.Internal = Internal;
+exports.ValApp = ValApp;
+exports.ValImage = ValImage;
+exports.ValModulesClient = ValModulesClient;
+exports.ValProvider = ValProvider;
+exports.initVal = initVal;
+exports.useRegisterValModules = useRegisterValModules;