@valbuild/next 0.123.0 → 0.123.2

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # @valbuild/next
 
+## 0.123.2
+
+### Patch Changes
+
+- [#629](https://github.com/valbuild/val/pull/629) [`04b6d4c`](https://github.com/valbuild/val/commit/04b6d4cbbecc131bbaf3c20633af9dad8c857310) Thanks [@freekh](https://github.com/freekh)! - Stop shipping zod to every visitor of a Val site (~113 KB)
+
+  `@valbuild/next`'s client code needed five things from
+  `@valbuild/shared/internal`, three of which are string constants like
+  `VAL_THEME_SESSION_STORAGE_KEY`. But preconstruct publishes each entrypoint as
+  a single bundled module, so importing a string constant pulled in the whole
+  entrypoint — including `ApiRoutes.ts` and its zod schemas. Measured on
+  val.build, that was 113 KB of zod in the initial JS of every page, for
+  visitors who never open the Studio.
+
+  Two changes:
+
+  - New `@valbuild/shared/client` entrypoint carrying the parts that are safe in
+    a browser bundle: the session-storage keys, the canvas protocol, and the
+    route-pattern helpers. Nothing reachable from it may import zod, and
+    `noZodInClientEntrypoint.test.ts` walks the source graph to enforce that —
+    one careless re-export would silently put the 113 KB back.
+  - `ValNextProvider` now imports `createValClient` on first use rather than at
+    module scope. It genuinely needs zod (it `safeParse`s every request and
+    response), but its only caller is the draft-mode poll, which returns early
+    unless the overlay is mounted. A visitor without the Val Enable cookie never
+    triggers the import.
+
+  No API change. `@valbuild/shared/internal` still exports everything it did.
+
+- Updated dependencies [[`04b6d4c`](https://github.com/valbuild/val/commit/04b6d4cbbecc131bbaf3c20633af9dad8c857310), [`8e58c34`](https://github.com/valbuild/val/commit/8e58c3495d1bf0f221a57082cb0a3045929722a1), [`3e93508`](https://github.com/valbuild/val/commit/3e93508b05d08b0c24947a97c6141a9ad8a3931e)]:
+  - @valbuild/shared@0.123.2
+  - @valbuild/server@0.123.2
+  - @valbuild/ui@0.123.2
+  - @valbuild/language-server@0.123.2
+  - @valbuild/mcp@0.123.2
+  - @valbuild/react@0.123.2
+
+## 0.123.1
+
+### Patch Changes
+
+- Updated dependencies [[`468f147`](https://github.com/valbuild/val/commit/468f147e62d1a96585890208921341959f118b6d)]:
+  - @valbuild/mcp@0.123.1
+
 ## 0.123.0
 
 ### Minor Changes

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('client-only');
-var routeFromVal = require('../../dist/routeFromVal-b48a454a.cjs.dev.js');
+var routeFromVal = require('../../dist/routeFromVal-d53d5ffb.cjs.dev.js');
 var core = require('@valbuild/core');
 var stega = require('@valbuild/react/stega');
 var React = require('react');
@@ -13,7 +13,7 @@ require('../../dist/unsupportedIterableToArray-c8ab77c9.cjs.dev.js');
 require('../../dist/objectSpread2-58024783.cjs.dev.js');
 require('../../dist/defineProperty-f90345d7.cjs.dev.js');
 require('../../dist/slicedToArray-44036a76.cjs.dev.js');
-require('@valbuild/shared/internal');
+require('@valbuild/shared/client');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('client-only');
-var routeFromVal = require('../../dist/routeFromVal-8ac2f984.cjs.prod.js');
+var routeFromVal = require('../../dist/routeFromVal-e0995830.cjs.prod.js');
 var core = require('@valbuild/core');
 var stega = require('@valbuild/react/stega');
 var React = require('react');
@@ -13,7 +13,7 @@ require('../../dist/unsupportedIterableToArray-0d2087a2.cjs.prod.js');
 require('../../dist/objectSpread2-13f847a9.cjs.prod.js');
 require('../../dist/defineProperty-8951f469.cjs.prod.js');
 require('../../dist/slicedToArray-ce613de6.cjs.prod.js');
-require('@valbuild/shared/internal');
+require('@valbuild/shared/client');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

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

@@ -1,5 +1,5 @@
 import 'client-only';
-import { g as getJsonEntryStegaRoot, _ as _typeof, a as isJsonValuesRecordSchema, b as getValRouteUrlFromVal, i as initValRouteFromVal } from '../../dist/routeFromVal-263eec96.esm.js';
+import { g as getJsonEntryStegaRoot, _ as _typeof, a as isJsonValuesRecordSchema, b as getValRouteUrlFromVal, i as initValRouteFromVal } from '../../dist/routeFromVal-544e8318.esm.js';
 import { Internal } from '@valbuild/core';
 import { getModuleIds, stegaEncode } from '@valbuild/react/stega';
 import React from 'react';
@@ -9,7 +9,7 @@ import '../../dist/unsupportedIterableToArray-5baabfdc.esm.js';
 import '../../dist/objectSpread2-60d1bd93.esm.js';
 import '../../dist/defineProperty-cca5affa.esm.js';
 import '../../dist/slicedToArray-aa291011.esm.js';
-import '@valbuild/shared/internal';
+import '@valbuild/shared/client';
 
 function useValStega(selector) {
   var valOverlayContext = useValOverlayContext();

package/dist/{ValApp-2bdb460a.cjs.dev.js → ValApp-18ec7215.cjs.dev.js}

@@ -7,10 +7,10 @@ var slicedToArray = require('./slicedToArray-44036a76.cjs.dev.js');
 var ui = require('@valbuild/ui');
 var Script = require('next/script');
 var React = require('react');
-var fallbackColors = require('./fallbackColors-a491e700.cjs.dev.js');
+var fallbackColors = require('./fallbackColors-080c1bbc.cjs.dev.js');
 var jsxRuntime = require('react/jsx-runtime');
 require('./unsupportedIterableToArray-c8ab77c9.cjs.dev.js');
-require('@valbuild/shared/internal');
+require('@valbuild/shared/client');
 require('@valbuild/core');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/dist/{ValApp-074c8289.esm.js → ValApp-6d5f5c82.esm.js}

@@ -3,10 +3,10 @@ import { _ as _slicedToArray } from './slicedToArray-aa291011.esm.js';
 import { VERSION, VAL_APP_PATH, VAL_APP_ID } from '@valbuild/ui';
 import Script from 'next/script';
 import { useState, useRef, useEffect } from 'react';
-import { u as useConfigStorageSave, v as valPrefixedClass, c as cn, a as canvasDarkBg, b as canvasLightBg } from './fallbackColors-77aeedf8.esm.js';
+import { u as useConfigStorageSave, v as valPrefixedClass, c as cn, a as canvasDarkBg, b as canvasLightBg } from './fallbackColors-149dfbc9.esm.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import './unsupportedIterableToArray-5baabfdc.esm.js';
-import '@valbuild/shared/internal';
+import '@valbuild/shared/client';
 import '@valbuild/core';
 
 var ValApp = function ValApp(_ref) {

package/dist/ValApp-b852b147.cjs.js

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

package/dist/{ValApp-17eb6e93.cjs.prod.js → ValApp-b852b147.cjs.prod.js}

@@ -7,10 +7,10 @@ var slicedToArray = require('./slicedToArray-ce613de6.cjs.prod.js');
 var ui = require('@valbuild/ui');
 var Script = require('next/script');
 var React = require('react');
-var fallbackColors = require('./fallbackColors-8842243c.cjs.prod.js');
+var fallbackColors = require('./fallbackColors-e1d73b36.cjs.prod.js');
 var jsxRuntime = require('react/jsx-runtime');
 require('./unsupportedIterableToArray-0d2087a2.cjs.prod.js');
-require('@valbuild/shared/internal');
+require('@valbuild/shared/client');
 require('@valbuild/core');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/dist/ValCanvasBridge-5fc49440.cjs.js

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

package/dist/{ValCanvasBridge-e62125f8.cjs.prod.js → ValCanvasBridge-5fc49440.cjs.prod.js}

@@ -6,7 +6,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var slicedToArray = require('./slicedToArray-ce613de6.cjs.prod.js');
 var React = require('react');
 var core = require('@valbuild/core');
-var internal = require('@valbuild/shared/internal');
+var client = require('@valbuild/shared/client');
 var jsxRuntime = require('react/jsx-runtime');
 require('./unsupportedIterableToArray-0d2087a2.cjs.prod.js');
 
@@ -110,7 +110,7 @@ function ValCanvasBridge(_ref) {
       });
     });
     var message = {
-      val: internal.VAL_CANVAS_MESSAGE,
+      val: client.VAL_CANVAS_MESSAGE,
       type: "elements",
       elements: elements,
       pageSize: {
@@ -130,7 +130,7 @@ function ValCanvasBridge(_ref) {
   // edges, and a message per render would be a message per keystroke.
   React__default["default"].useEffect(function () {
     post({
-      val: internal.VAL_CANVAS_MESSAGE,
+      val: client.VAL_CANVAS_MESSAGE,
       type: "refreshing",
       pending: isRefreshing === true
     });
@@ -139,7 +139,7 @@ function ValCanvasBridge(_ref) {
   // Announce the frame, and say whether it is actually showing draft content.
   React__default["default"].useEffect(function () {
     post({
-      val: internal.VAL_CANVAS_MESSAGE,
+      val: client.VAL_CANVAS_MESSAGE,
       type: "ready",
       draftMode: draftMode,
       url: window.location.href
@@ -246,7 +246,7 @@ function ValCanvasBridge(_ref) {
   // What the studio asks for.
   React__default["default"].useEffect(function () {
     var listener = function listener(event) {
-      if (!internal.isValCanvasStudioMessage(event.data)) return;
+      if (!client.isValCanvasStudioMessage(event.data)) return;
       var message = event.data;
       if (message.type === "rescan") {
         scan();
@@ -318,7 +318,7 @@ function ValCanvasBridge(_ref) {
       event.preventDefault();
       event.stopPropagation();
       post({
-        val: internal.VAL_CANVAS_MESSAGE,
+        val: client.VAL_CANVAS_MESSAGE,
         type: "clicked",
         paths: core.Internal.splitJoinedSourcePaths(attribute)
       });
@@ -375,7 +375,7 @@ function ValCanvasBridge(_ref) {
       event.preventDefault();
       active = true;
       post({
-        val: internal.VAL_CANVAS_MESSAGE,
+        val: client.VAL_CANVAS_MESSAGE,
         type: "pinch",
         phase: "start",
         span: span(event.touches),
@@ -386,7 +386,7 @@ function ValCanvasBridge(_ref) {
       if (event.touches.length !== 2 || !active) return;
       event.preventDefault();
       post({
-        val: internal.VAL_CANVAS_MESSAGE,
+        val: client.VAL_CANVAS_MESSAGE,
         type: "pinch",
         phase: "move",
         span: span(event.touches),
@@ -397,7 +397,7 @@ function ValCanvasBridge(_ref) {
       if (!active || event.touches.length >= 2) return;
       active = false;
       post({
-        val: internal.VAL_CANVAS_MESSAGE,
+        val: client.VAL_CANVAS_MESSAGE,
         type: "pinch",
         phase: "end",
         span: 0,
@@ -438,7 +438,7 @@ function ValCanvasBridge(_ref) {
       if (!event.ctrlKey && !event.metaKey) return;
       event.preventDefault();
       post({
-        val: internal.VAL_CANVAS_MESSAGE,
+        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.

package/dist/{ValCanvasBridge-9d148bdd.cjs.dev.js → ValCanvasBridge-b918d991.cjs.dev.js}

@@ -6,7 +6,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var slicedToArray = require('./slicedToArray-44036a76.cjs.dev.js');
 var React = require('react');
 var core = require('@valbuild/core');
-var internal = require('@valbuild/shared/internal');
+var client = require('@valbuild/shared/client');
 var jsxRuntime = require('react/jsx-runtime');
 require('./unsupportedIterableToArray-c8ab77c9.cjs.dev.js');
 
@@ -110,7 +110,7 @@ function ValCanvasBridge(_ref) {
       });
     });
     var message = {
-      val: internal.VAL_CANVAS_MESSAGE,
+      val: client.VAL_CANVAS_MESSAGE,
       type: "elements",
       elements: elements,
       pageSize: {
@@ -130,7 +130,7 @@ function ValCanvasBridge(_ref) {
   // edges, and a message per render would be a message per keystroke.
   React__default["default"].useEffect(function () {
     post({
-      val: internal.VAL_CANVAS_MESSAGE,
+      val: client.VAL_CANVAS_MESSAGE,
       type: "refreshing",
       pending: isRefreshing === true
     });
@@ -139,7 +139,7 @@ function ValCanvasBridge(_ref) {
   // Announce the frame, and say whether it is actually showing draft content.
   React__default["default"].useEffect(function () {
     post({
-      val: internal.VAL_CANVAS_MESSAGE,
+      val: client.VAL_CANVAS_MESSAGE,
       type: "ready",
       draftMode: draftMode,
       url: window.location.href
@@ -246,7 +246,7 @@ function ValCanvasBridge(_ref) {
   // What the studio asks for.
   React__default["default"].useEffect(function () {
     var listener = function listener(event) {
-      if (!internal.isValCanvasStudioMessage(event.data)) return;
+      if (!client.isValCanvasStudioMessage(event.data)) return;
       var message = event.data;
       if (message.type === "rescan") {
         scan();
@@ -318,7 +318,7 @@ function ValCanvasBridge(_ref) {
       event.preventDefault();
       event.stopPropagation();
       post({
-        val: internal.VAL_CANVAS_MESSAGE,
+        val: client.VAL_CANVAS_MESSAGE,
         type: "clicked",
         paths: core.Internal.splitJoinedSourcePaths(attribute)
       });
@@ -375,7 +375,7 @@ function ValCanvasBridge(_ref) {
       event.preventDefault();
       active = true;
       post({
-        val: internal.VAL_CANVAS_MESSAGE,
+        val: client.VAL_CANVAS_MESSAGE,
         type: "pinch",
         phase: "start",
         span: span(event.touches),
@@ -386,7 +386,7 @@ function ValCanvasBridge(_ref) {
       if (event.touches.length !== 2 || !active) return;
       event.preventDefault();
       post({
-        val: internal.VAL_CANVAS_MESSAGE,
+        val: client.VAL_CANVAS_MESSAGE,
         type: "pinch",
         phase: "move",
         span: span(event.touches),
@@ -397,7 +397,7 @@ function ValCanvasBridge(_ref) {
       if (!active || event.touches.length >= 2) return;
       active = false;
       post({
-        val: internal.VAL_CANVAS_MESSAGE,
+        val: client.VAL_CANVAS_MESSAGE,
         type: "pinch",
         phase: "end",
         span: 0,
@@ -438,7 +438,7 @@ function ValCanvasBridge(_ref) {
       if (!event.ctrlKey && !event.metaKey) return;
       event.preventDefault();
       post({
-        val: internal.VAL_CANVAS_MESSAGE,
+        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.

package/dist/{ValCanvasBridge-d9948526.esm.js → ValCanvasBridge-e5931ea4.esm.js}

@@ -2,7 +2,7 @@
 import { _ as _slicedToArray } from './slicedToArray-aa291011.esm.js';
 import React from 'react';
 import { Internal } from '@valbuild/core';
-import { VAL_CANVAS_MESSAGE, isValCanvasStudioMessage } from '@valbuild/shared/internal';
+import { VAL_CANVAS_MESSAGE, isValCanvasStudioMessage } from '@valbuild/shared/client';
 import { jsx } from 'react/jsx-runtime';
 import './unsupportedIterableToArray-5baabfdc.esm.js';
 

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

@@ -4,6 +4,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var slicedToArray = require('./slicedToArray-44036a76.cjs.dev.js');
+var asyncToGenerator = require('./asyncToGenerator-c3823d62.cjs.dev.js');
 var objectSpread2 = require('./objectSpread2-58024783.cjs.dev.js');
 var core = require('@valbuild/core');
 var ui = require('@valbuild/ui');
@@ -12,16 +13,34 @@ var Script = require('next/script');
 var React = require('react');
 var ValOverlayContext = require('./ValOverlayContext-5bd7628b.cjs.dev.js');
 var stega = require('@valbuild/react/stega');
-var internal = require('@valbuild/shared/internal');
-var fallbackColors = require('./fallbackColors-a491e700.cjs.dev.js');
+var fallbackColors = require('./fallbackColors-080c1bbc.cjs.dev.js');
+var client = require('@valbuild/shared/client');
 var createForOfIteratorHelper = require('./createForOfIteratorHelper-0445603c.cjs.dev.js');
-var ValCanvasBridge = require('./ValCanvasBridge-9d148bdd.cjs.dev.js');
+var ValCanvasBridge = require('./ValCanvasBridge-b918d991.cjs.dev.js');
 var jsxRuntime = require('react/jsx-runtime');
 require('./unsupportedIterableToArray-c8ab77c9.cjs.dev.js');
 require('./defineProperty-f90345d7.cjs.dev.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
+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 Script__default = /*#__PURE__*/_interopDefault(Script);
 var React__default = /*#__PURE__*/_interopDefault(React);
 
@@ -29,7 +48,7 @@ function initSessionTheme(config) {
   if (typeof window === "undefined") {
     return null;
   }
-  var existingSessionTheme = sessionStorage.getItem(internal.VAL_THEME_SESSION_STORAGE_KEY);
+  var existingSessionTheme = sessionStorage.getItem(client.VAL_THEME_SESSION_STORAGE_KEY);
   if (existingSessionTheme && (existingSessionTheme === "dark" || existingSessionTheme === "light")) {
     return existingSessionTheme;
   }
@@ -40,7 +59,7 @@ function initSessionTheme(config) {
   } 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(internal.VAL_THEME_SESSION_STORAGE_KEY, theme);
+  sessionStorage.setItem(client.VAL_THEME_SESSION_STORAGE_KEY, theme);
   return theme;
 }
 
@@ -182,11 +201,42 @@ var ValNextProvider = function ValNextProvider(props) {
   var _draftModeReady$curre2;
   // TODO: use config:
   var route = "/api/val";
-  var client = React__default["default"].useMemo(function () {
-    return internal.createValClient(route, objectSpread2._objectSpread2(objectSpread2._objectSpread2({}, props.config), {}, {
-      contentHostUrl: core.DEFAULT_CONTENT_HOST
-    }));
-  }, [route, props.config]);
+  /**
+   * 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__*/asyncToGenerator._asyncToGenerator(/*#__PURE__*/asyncToGenerator._regenerator().m(function _callee() {
+    var _yield$import, createValClient;
+    return asyncToGenerator._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, objectSpread2._objectSpread2(objectSpread2._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 () {
@@ -316,7 +366,7 @@ var ValNextProvider = function ValNextProvider(props) {
       setMountOverlay(false);
       return;
     }
-    setIsCanvas(internal.isValCanvasFrame(location.search));
+    setIsCanvas(client.isValCanvasFrame(location.search));
     setMountOverlay(hasValEnableCookie(document.cookie));
   }, []);
   React__default["default"].useEffect(function () {
@@ -488,7 +538,9 @@ var ValNextProvider = function ValNextProvider(props) {
         }
       }));
       var pollDraftStatId = ++pollDraftStatIdRef.current;
-      client("/draft/stat", "GET", {}).then(function (res) {
+      getClient().then(function (client) {
+        return client("/draft/stat", "GET", {});
+      }).then(function (res) {
         if (pollDraftStatIdRef.current !== pollDraftStatId) {
           return;
         }

package/dist/{ValNextProvider-32156acd.esm.js → ValNextProvider-3d2cd7e4.esm.js}

@@ -1,5 +1,6 @@
 'use client';
 import { _ as _slicedToArray } from './slicedToArray-aa291011.esm.js';
+import { _ as _asyncToGenerator, a as _regenerator } from './asyncToGenerator-500f022f.esm.js';
 import { _ as _objectSpread2 } from './objectSpread2-60d1bd93.esm.js';
 import { Internal, DEFAULT_CONTENT_HOST } from '@valbuild/core';
 import { VERSION, VAL_APP_PATH, VAL_OVERLAY_ID } from '@valbuild/ui';
@@ -8,10 +9,10 @@ import Script from 'next/script';
 import React, { useEffect } from 'react';
 import { ValExternalStore, ValOverlayProvider } from './ValOverlayContext-e42a2e14.esm.js';
 import { SET_AUTO_TAG_JSX_ENABLED } from '@valbuild/react/stega';
-import { VAL_THEME_SESSION_STORAGE_KEY, createValClient, isValCanvasFrame } from '@valbuild/shared/internal';
-import { p as prefixStyles, u as useConfigStorageSave, f as floatDarkBg, d as floatLightBg, v as valPrefixedClass, c as cn } from './fallbackColors-77aeedf8.esm.js';
+import { p as prefixStyles, u as useConfigStorageSave, f as floatDarkBg, d as floatLightBg, v as valPrefixedClass, c as cn } from './fallbackColors-149dfbc9.esm.js';
+import { VAL_THEME_SESSION_STORAGE_KEY, isValCanvasFrame } from '@valbuild/shared/client';
 import { _ as _createForOfIteratorHelper } from './createForOfIteratorHelper-5758a730.esm.js';
-import { ValCanvasBridge } from './ValCanvasBridge-d9948526.esm.js';
+import { ValCanvasBridge } from './ValCanvasBridge-e5931ea4.esm.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import './unsupportedIterableToArray-5baabfdc.esm.js';
 import './defineProperty-cca5affa.esm.js';
@@ -173,11 +174,42 @@ var ValNextProvider = function ValNextProvider(props) {
   var _draftModeReady$curre2;
   // TODO: use config:
   var route = "/api/val";
-  var client = React.useMemo(function () {
-    return createValClient(route, _objectSpread2(_objectSpread2({}, props.config), {}, {
-      contentHostUrl: DEFAULT_CONTENT_HOST
-    }));
-  }, [route, props.config]);
+  /**
+   * 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.useRef(null);
+  var configRef = React.useRef(props.config);
+  configRef.current = props.config;
+  var getClient = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+    var _yield$import, createValClient;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          if (clientRef.current) {
+            _context.n = 2;
+            break;
+          }
+          _context.n = 1;
+          return import('@valbuild/shared/internal');
+        case 1:
+          _yield$import = _context.v;
+          createValClient = _yield$import.createValClient;
+          clientRef.current = createValClient(route, _objectSpread2(_objectSpread2({}, configRef.current), {}, {
+            contentHostUrl: DEFAULT_CONTENT_HOST
+          }));
+        case 2:
+          return _context.a(2, clientRef.current);
+      }
+    }, _callee);
+  })), [route]);
 
   // TODO: move below into react package
   var valStore = React.useMemo(function () {
@@ -479,7 +511,9 @@ var ValNextProvider = function ValNextProvider(props) {
         }
       }));
       var pollDraftStatId = ++pollDraftStatIdRef.current;
-      client("/draft/stat", "GET", {}).then(function (res) {
+      getClient().then(function (client) {
+        return client("/draft/stat", "GET", {});
+      }).then(function (res) {
         if (pollDraftStatIdRef.current !== pollDraftStatId) {
           return;
         }

package/dist/ValNextProvider-da189afe.cjs.js

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