@valbuild/tanstack 0.139.1 → 0.140.0

package/CHANGELOG.md

@@ -1,5 +1,64 @@
 # @valbuild/tanstack
 
+## 0.140.0
+
+### Patch Changes
+
+- [#793](https://github.com/valbuild/val/pull/793) [`092e6a7`](https://github.com/valbuild/val/commit/092e6a7f78bcfcf4c6cecaf34407fdfc580ebbc1) Thanks [@freekh](https://github.com/freekh)! - A draft page on TanStack Start is now rendered as the draft by the server, so it no longer shows the published text first and the draft a moment later — most noticeable when you reload right after publishing.
+
+  Read the request's draft in your site layout's loader and pass it to `ValProvider`:
+
+  ```tsx
+  // src/val/server.ts
+  export const { fetchValDraft /* , fetchVal, ... */ } = initValContent(
+    config,
+    valModules,
+    { draftMode },
+  );
+
+  // src/routes/_site.tsx
+  const getValDraft = createServerFn().handler(() => fetchValDraft());
+
+  export const Route = createFileRoute("/_site")({
+    loader: () => (typeof document === "undefined" ? getValDraft() : null),
+    component: SiteLayout,
+  });
+
+  function SiteLayout() {
+    const draft = Route.useLoaderData();
+    return (
+      <ValProvider config={config} suspend draft={draft}>
+        {/* ... */}
+      </ValProvider>
+    );
+  }
+  ```
+
+  Visitors pay one cookie lookup and nothing else. Without `draft`, pages behave as before. Edited `.jsonValues()` entries are rendered as the draft too; the others render from the build, as they do for visitors.
+
+  Also: a draft's `.jsonValues()` entries now include changes that were published after the build being served, instead of showing the old value until the next build is live.
+
+  Also: a renamed or duplicated `.jsonValues()` entry now has its content in the draft, on the page and when the Studio reads the entry, instead of failing to load until it is published.
+
+- Updated dependencies [[`cb93874`](https://github.com/valbuild/val/commit/cb938748aec15fd0ac3814c1696a2dd78ad63c27), [`092e6a7`](https://github.com/valbuild/val/commit/092e6a7f78bcfcf4c6cecaf34407fdfc580ebbc1)]:
+  - @valbuild/ui@0.140.0
+  - @valbuild/server@0.140.0
+  - @valbuild/shared@0.140.0
+  - @valbuild/react@0.140.0
+  - @valbuild/language-server@0.140.0
+  - @valbuild/mcp@0.140.0
+
+## 0.139.2
+
+### Patch Changes
+
+- Updated dependencies [[`4d9e12c`](https://github.com/valbuild/val/commit/4d9e12c5286f981c7a8a7820db1bf580e327d2ea), [`1c3eb3a`](https://github.com/valbuild/val/commit/1c3eb3af91f6dfeff94a95d80d5291a1acf1baf2)]:
+  - @valbuild/ui@0.139.2
+  - @valbuild/react@0.139.2
+  - @valbuild/server@0.139.2
+  - @valbuild/language-server@0.139.2
+  - @valbuild/mcp@0.139.2
+
 ## 0.139.1
 
 ### Patch Changes

package/README.md

@@ -209,6 +209,9 @@ export const Route = createFileRoute("/_site")({
 });
 ```
 
+Add the `draft` prop from [Preview and draft mode](#preview-and-draft-mode) so a
+draft page is rendered as the draft on the server too.
+
 A pathless layout adds no URL segment: `_site.index.tsx` is still `/`. Val
 modules named after those files follow the same rule, so
 `_site.posts.$postId.val.ts` holds `/posts/...` keys.
@@ -234,9 +237,10 @@ export const {
 ## Reading content
 
 **Prefer the hooks.** They work in both places a component runs: during SSR they
-resolve the published content, and in a browser with the Studio open they
-resolve what the editor currently holds — so an edit appears as it is typed,
-with no round trip and no loader.
+resolve the published content — or, when `ValProvider` is given the request's
+draft (see [Preview and draft mode](#preview-and-draft-mode)), the draft — and in
+a browser with the Studio open they resolve what the editor currently holds, so
+an edit appears as it is typed, with no round trip and no loader.
 
 ```tsx
 function Page() {
@@ -330,10 +334,52 @@ its own, so this package brings a cookie (`val_draft_mode`, `valDraftMode()` in
 read also carries Val's session cookie, which is a signed JWT the server
 verifies, so a forged draft cookie gets published content.
 
+**Render the draft on the server, too.** Without it the server renders the
+PUBLISHED page and the browser swaps the draft in once the overlay has loaded,
+so every draft page load shows the old text first and the new text a moment
+later. Read the request's draft in the site layout's loader and hand it to the
+provider:
+
+```tsx
+// src/val/server.ts: add `fetchValDraft` to what initValContent returns
+export const { fetchValDraft /* , fetchVal, ... */ } = initValContent(
+  config,
+  valModules,
+  { draftMode },
+);
+
+// src/routes/_site.tsx
+const getValDraft = createServerFn().handler(() => fetchValDraft());
+
+export const Route = createFileRoute("/_site")({
+  // On the server only: the overlay keeps the page up to date after that.
+  loader: () => (typeof document === "undefined" ? getValDraft() : null),
+  component: SiteLayout,
+});
+
+function SiteLayout() {
+  const draft = Route.useLoaderData();
+  return (
+    <ValProvider config={config} suspend draft={draft}>
+      {/* ... */}
+    </ValProvider>
+  );
+}
+```
+
+`fetchValDraft` returns `null` — after one cookie lookup, with no read — unless
+the request is in draft mode, so visitors pay nothing. In draft mode it returns
+the modules the draft changes, which the server renders with and the browser
+hydrates from: both produce the same page, showing the draft from the first
+paint. It becomes click-to-editable as each component finishes hydrating, and
+the overlay takes over from there.
+
 `suspend` on `ValProvider` makes `useValStega` / `useValRouteStega` wait for
 draft data before rendering, so a page that exists **only** in an unpublished
 draft renders instead of 404ing. Visitors without the Val Enable cookie pay
-nothing for it. It needs React 19 and a `<Suspense>` boundary (see above).
+nothing for it. It needs React 19 and a `<Suspense>` boundary (see above). With
+`draft` given, the server already has that page's content, so its first render
+does not 404 either.
 
 ## Images
 
@@ -370,6 +416,7 @@ SDK of your choice. See [`@valbuild/mcp`](https://www.npmjs.com/package/@valbuil
 | `valNextAppRouter`                  | `valApiHandler` — a `Request` in, a `Response` out |
 | `ValImage` wraps `next/image`       | `ValImage` is an `<img>`                           |
 | `fetchVal` in a Server Component    | hooks in components; `createServerFn` for loaders  |
+| client hooks render published SSR   | `ValProvider draft` renders the draft during SSR   |
 
 ## Schema reference
 

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

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var routeFromVal = require('../../dist/routeFromVal-a9147ceb.cjs.dev.js');
+var routeFromVal = require('../../dist/routeFromVal-97111bfd.cjs.dev.js');
 var core = require('@valbuild/core');
 var stega = require('@valbuild/react/stega');
 var React = require('react');
-var ValOverlayContext = require('../../dist/ValOverlayContext-3ec15518.cjs.dev.js');
-require('../../dist/createForOfIteratorHelper-e75681d7.cjs.dev.js');
+var ValOverlayContext = require('../../dist/ValOverlayContext-bafe3de9.cjs.dev.js');
+require('../../dist/createForOfIteratorHelper-4497beef.cjs.dev.js');
 require('@valbuild/shared/client');
 require('@valbuild/core/patch');
 require('react/jsx-runtime');
@@ -16,10 +16,55 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
+var subscribeNever = function subscribeNever() {
+  return function () {};
+};
+
+/**
+ * `false` for the server's render and for this component's hydration render,
+ * `true` for every render after.
+ *
+ * Per component, which is the point: React reads `getServerSnapshot` while it
+ * hydrates a component and `getSnapshot` otherwise, and re-renders the
+ * component right after hydrating it when the two differ. So a component that
+ * hydrates late -- a route split out into its own chunk -- still renders its
+ * hydration pass as the server did, however long after the rest of the page.
+ */
+function useHydrated() {
+  return React__default["default"].useSyncExternalStore(subscribeNever, function () {
+    return true;
+  }, function () {
+    return false;
+  });
+}
+
+/**
+ * Whether the content this component renders carries its edit tags.
+ *
+ * Always in draft mode -- except, on a page rendered from a server-read draft,
+ * for the server's render and for this component's own hydration render: then
+ * the draft text goes out without them, and the render React does right after
+ * hydrating the component puts them in.
+ *
+ * Because JSX auto-tagging turns a tagged string into a `data-val-path`
+ * attribute as the element is created, and the switch for it is process-wide.
+ * The server cannot be relied on to tag (whether the patched JSX runtime is
+ * the one it renders with depends on how it was bundled), and no page-wide
+ * moment means "everything has hydrated": a split-out route, or a lazy child
+ * handed a string as a prop, hydrates after the rest of the page. A string
+ * with no tags in it has nothing to tag, wherever it is rendered and whatever
+ * the switch says -- so the server's HTML and every hydration render agree.
+ */
+function useEncodesEditTags(context) {
+  var hydrated = useHydrated();
+  return !!context.draftMode && (!context.serverDraft || hydrated);
+}
+
 /** What `useVal` gives back — see `ResolvedVal` in `@valbuild/react/stega`. */
 
 function useValStega(selector) {
   var valOverlayContext = ValOverlayContext.useValOverlayContext();
+  var encodes = useEncodesEditTags(valOverlayContext);
   var moduleIds = React__default["default"].useMemo(function () {
     return stega.getModuleIds(selector);
   }, [selector]);
@@ -72,7 +117,7 @@ function useValStega(selector) {
     React__default["default"].use(store.waitForLoad(moduleIds));
   }
   return stega.stegaEncode(selector, {
-    disabled: !valOverlayContext.draftMode,
+    disabled: !encodes,
     getModule: function getModule(moduleId) {
       if (moduleMap && valOverlayContext.draftMode) {
         return moduleMap[moduleId];
@@ -159,6 +204,7 @@ var jsonEntryPromiseCache = new Map();
  */
 function useValKeyStega(selector, key) {
   var valOverlayContext = ValOverlayContext.useValOverlayContext();
+  var encodes = useEncodesEditTags(valOverlayContext);
   // A view is a pointer: everything below reads a path, a schema and a source
   // off this, and a pointer has none of them. See `resolveViewedModule`.
   var valModule = core.Internal.resolveViewedModule(selector);
@@ -175,7 +221,7 @@ function useValKeyStega(selector, key) {
     content = readCommittedJsonEntry(valModule, key);
   }
   return stega.stegaEncode(content, {
-    disabled: !valOverlayContext.draftMode,
+    disabled: !encodes,
     root: routeFromVal.getJsonEntryStegaRoot(valModule, key)
   });
 }
@@ -234,6 +280,7 @@ function useValRouteStega(selector, params) {
   // router `val` is unused (we resolve a single entry below instead); for any
   // other router `draftSource` is.
   var val = useValStega(valModule);
+  var encodes = useEncodesEditTags(valOverlayContext);
   var draftSource = useDraftModuleSource(valModule && core.Internal.getValPath(valModule) || undefined);
   var resolvedParams = resolveParams(params);
   // Careful: null means there was an error - undefined means no params
@@ -263,7 +310,7 @@ function useValRouteStega(selector, params) {
       return null;
     }
     return stega.stegaEncode(content, {
-      disabled: !valOverlayContext.draftMode,
+      disabled: !encodes,
       root: routeFromVal.getJsonEntryStegaRoot(valModule, url)
     });
   }

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

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var routeFromVal = require('../../dist/routeFromVal-6693e037.cjs.prod.js');
+var routeFromVal = require('../../dist/routeFromVal-0b39e8e3.cjs.prod.js');
 var core = require('@valbuild/core');
 var stega = require('@valbuild/react/stega');
 var React = require('react');
-var ValOverlayContext = require('../../dist/ValOverlayContext-5f1d8da4.cjs.prod.js');
-require('../../dist/createForOfIteratorHelper-0324e063.cjs.prod.js');
+var ValOverlayContext = require('../../dist/ValOverlayContext-2739cc60.cjs.prod.js');
+require('../../dist/createForOfIteratorHelper-9afd7d2d.cjs.prod.js');
 require('@valbuild/shared/client');
 require('@valbuild/core/patch');
 require('react/jsx-runtime');
@@ -16,10 +16,55 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
+var subscribeNever = function subscribeNever() {
+  return function () {};
+};
+
+/**
+ * `false` for the server's render and for this component's hydration render,
+ * `true` for every render after.
+ *
+ * Per component, which is the point: React reads `getServerSnapshot` while it
+ * hydrates a component and `getSnapshot` otherwise, and re-renders the
+ * component right after hydrating it when the two differ. So a component that
+ * hydrates late -- a route split out into its own chunk -- still renders its
+ * hydration pass as the server did, however long after the rest of the page.
+ */
+function useHydrated() {
+  return React__default["default"].useSyncExternalStore(subscribeNever, function () {
+    return true;
+  }, function () {
+    return false;
+  });
+}
+
+/**
+ * Whether the content this component renders carries its edit tags.
+ *
+ * Always in draft mode -- except, on a page rendered from a server-read draft,
+ * for the server's render and for this component's own hydration render: then
+ * the draft text goes out without them, and the render React does right after
+ * hydrating the component puts them in.
+ *
+ * Because JSX auto-tagging turns a tagged string into a `data-val-path`
+ * attribute as the element is created, and the switch for it is process-wide.
+ * The server cannot be relied on to tag (whether the patched JSX runtime is
+ * the one it renders with depends on how it was bundled), and no page-wide
+ * moment means "everything has hydrated": a split-out route, or a lazy child
+ * handed a string as a prop, hydrates after the rest of the page. A string
+ * with no tags in it has nothing to tag, wherever it is rendered and whatever
+ * the switch says -- so the server's HTML and every hydration render agree.
+ */
+function useEncodesEditTags(context) {
+  var hydrated = useHydrated();
+  return !!context.draftMode && (!context.serverDraft || hydrated);
+}
+
 /** What `useVal` gives back — see `ResolvedVal` in `@valbuild/react/stega`. */
 
 function useValStega(selector) {
   var valOverlayContext = ValOverlayContext.useValOverlayContext();
+  var encodes = useEncodesEditTags(valOverlayContext);
   var moduleIds = React__default["default"].useMemo(function () {
     return stega.getModuleIds(selector);
   }, [selector]);
@@ -72,7 +117,7 @@ function useValStega(selector) {
     React__default["default"].use(store.waitForLoad(moduleIds));
   }
   return stega.stegaEncode(selector, {
-    disabled: !valOverlayContext.draftMode,
+    disabled: !encodes,
     getModule: function getModule(moduleId) {
       if (moduleMap && valOverlayContext.draftMode) {
         return moduleMap[moduleId];
@@ -159,6 +204,7 @@ var jsonEntryPromiseCache = new Map();
  */
 function useValKeyStega(selector, key) {
   var valOverlayContext = ValOverlayContext.useValOverlayContext();
+  var encodes = useEncodesEditTags(valOverlayContext);
   // A view is a pointer: everything below reads a path, a schema and a source
   // off this, and a pointer has none of them. See `resolveViewedModule`.
   var valModule = core.Internal.resolveViewedModule(selector);
@@ -175,7 +221,7 @@ function useValKeyStega(selector, key) {
     content = readCommittedJsonEntry(valModule, key);
   }
   return stega.stegaEncode(content, {
-    disabled: !valOverlayContext.draftMode,
+    disabled: !encodes,
     root: routeFromVal.getJsonEntryStegaRoot(valModule, key)
   });
 }
@@ -234,6 +280,7 @@ function useValRouteStega(selector, params) {
   // router `val` is unused (we resolve a single entry below instead); for any
   // other router `draftSource` is.
   var val = useValStega(valModule);
+  var encodes = useEncodesEditTags(valOverlayContext);
   var draftSource = useDraftModuleSource(valModule && core.Internal.getValPath(valModule) || undefined);
   var resolvedParams = resolveParams(params);
   // Careful: null means there was an error - undefined means no params
@@ -263,7 +310,7 @@ function useValRouteStega(selector, params) {
       return null;
     }
     return stega.stegaEncode(content, {
-      disabled: !valOverlayContext.draftMode,
+      disabled: !encodes,
       root: routeFromVal.getJsonEntryStegaRoot(valModule, url)
     });
   }

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

@@ -1,17 +1,62 @@
-import { g as getJsonEntryStegaRoot, _ as _typeof, i as isJsonValuesRecordSchema, a as getValRouteUrlFromVal, b as initValRouteFromVal } from '../../dist/routeFromVal-728295a0.esm.js';
+import { g as getJsonEntryStegaRoot, _ as _typeof, i as isJsonValuesRecordSchema, a as getValRouteUrlFromVal, b as initValRouteFromVal } from '../../dist/routeFromVal-1221e70d.esm.js';
 import { Internal } from '@valbuild/core';
 import { getModuleIds, stegaEncode } from '@valbuild/react/stega';
 import React from 'react';
-import { u as useValOverlayContext } from '../../dist/ValOverlayContext-5bc3830f.esm.js';
-import '../../dist/createForOfIteratorHelper-485c2ce1.esm.js';
+import { u as useValOverlayContext } from '../../dist/ValOverlayContext-28101df3.esm.js';
+import '../../dist/createForOfIteratorHelper-93a62170.esm.js';
 import '@valbuild/shared/client';
 import '@valbuild/core/patch';
 import 'react/jsx-runtime';
 
+var subscribeNever = function subscribeNever() {
+  return function () {};
+};
+
+/**
+ * `false` for the server's render and for this component's hydration render,
+ * `true` for every render after.
+ *
+ * Per component, which is the point: React reads `getServerSnapshot` while it
+ * hydrates a component and `getSnapshot` otherwise, and re-renders the
+ * component right after hydrating it when the two differ. So a component that
+ * hydrates late -- a route split out into its own chunk -- still renders its
+ * hydration pass as the server did, however long after the rest of the page.
+ */
+function useHydrated() {
+  return React.useSyncExternalStore(subscribeNever, function () {
+    return true;
+  }, function () {
+    return false;
+  });
+}
+
+/**
+ * Whether the content this component renders carries its edit tags.
+ *
+ * Always in draft mode -- except, on a page rendered from a server-read draft,
+ * for the server's render and for this component's own hydration render: then
+ * the draft text goes out without them, and the render React does right after
+ * hydrating the component puts them in.
+ *
+ * Because JSX auto-tagging turns a tagged string into a `data-val-path`
+ * attribute as the element is created, and the switch for it is process-wide.
+ * The server cannot be relied on to tag (whether the patched JSX runtime is
+ * the one it renders with depends on how it was bundled), and no page-wide
+ * moment means "everything has hydrated": a split-out route, or a lazy child
+ * handed a string as a prop, hydrates after the rest of the page. A string
+ * with no tags in it has nothing to tag, wherever it is rendered and whatever
+ * the switch says -- so the server's HTML and every hydration render agree.
+ */
+function useEncodesEditTags(context) {
+  var hydrated = useHydrated();
+  return !!context.draftMode && (!context.serverDraft || hydrated);
+}
+
 /** What `useVal` gives back — see `ResolvedVal` in `@valbuild/react/stega`. */
 
 function useValStega(selector) {
   var valOverlayContext = useValOverlayContext();
+  var encodes = useEncodesEditTags(valOverlayContext);
   var moduleIds = React.useMemo(function () {
     return getModuleIds(selector);
   }, [selector]);
@@ -64,7 +109,7 @@ function useValStega(selector) {
     React.use(store.waitForLoad(moduleIds));
   }
   return stegaEncode(selector, {
-    disabled: !valOverlayContext.draftMode,
+    disabled: !encodes,
     getModule: function getModule(moduleId) {
       if (moduleMap && valOverlayContext.draftMode) {
         return moduleMap[moduleId];
@@ -151,6 +196,7 @@ var jsonEntryPromiseCache = new Map();
  */
 function useValKeyStega(selector, key) {
   var valOverlayContext = useValOverlayContext();
+  var encodes = useEncodesEditTags(valOverlayContext);
   // A view is a pointer: everything below reads a path, a schema and a source
   // off this, and a pointer has none of them. See `resolveViewedModule`.
   var valModule = Internal.resolveViewedModule(selector);
@@ -167,7 +213,7 @@ function useValKeyStega(selector, key) {
     content = readCommittedJsonEntry(valModule, key);
   }
   return stegaEncode(content, {
-    disabled: !valOverlayContext.draftMode,
+    disabled: !encodes,
     root: getJsonEntryStegaRoot(valModule, key)
   });
 }
@@ -226,6 +272,7 @@ function useValRouteStega(selector, params) {
   // router `val` is unused (we resolve a single entry below instead); for any
   // other router `draftSource` is.
   var val = useValStega(valModule);
+  var encodes = useEncodesEditTags(valOverlayContext);
   var draftSource = useDraftModuleSource(valModule && Internal.getValPath(valModule) || undefined);
   var resolvedParams = resolveParams(params);
   // Careful: null means there was an error - undefined means no params
@@ -255,7 +302,7 @@ function useValRouteStega(selector, params) {
       return null;
     }
     return stegaEncode(content, {
-      disabled: !valOverlayContext.draftMode,
+      disabled: !encodes,
       root: getJsonEntryStegaRoot(valModule, url)
     });
   }

package/dist/{ValOverlayContext-5f1d8da4.cjs.prod.js → ValOverlayContext-2739cc60.cjs.prod.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var createForOfIteratorHelper = require('./createForOfIteratorHelper-0324e063.cjs.prod.js');
+var createForOfIteratorHelper = require('./createForOfIteratorHelper-9afd7d2d.cjs.prod.js');
 var patch = require('@valbuild/core/patch');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -273,6 +273,7 @@ function ValOverlayProvider(_ref) {
     suspend = _ref.suspend,
     draftModeReady = _ref.draftModeReady,
     draftSourcesSynced = _ref.draftSourcesSynced,
+    serverDraft = _ref.serverDraft,
     children = _ref.children;
   return /*#__PURE__*/jsxRuntime.jsx(ValOverlayContext.Provider, {
     value: {
@@ -280,7 +281,8 @@ function ValOverlayProvider(_ref) {
       draftMode: draftMode,
       suspend: suspend,
       draftModeReady: draftModeReady,
-      draftSourcesSynced: draftSourcesSynced
+      draftSourcesSynced: draftSourcesSynced,
+      serverDraft: serverDraft
     },
     children: children
   });

package/dist/{ValOverlayContext-5bc3830f.esm.js → ValOverlayContext-28101df3.esm.js}

@@ -1,4 +1,4 @@
-import { c as _toPropertyKey, b as _createForOfIteratorHelper, d as _defineProperty } from './createForOfIteratorHelper-485c2ce1.esm.js';
+import { c as _toPropertyKey, b as _createForOfIteratorHelper, d as _defineProperty } from './createForOfIteratorHelper-93a62170.esm.js';
 import { deepEqual } from '@valbuild/core/patch';
 import React from 'react';
 import { jsx } from 'react/jsx-runtime';
@@ -267,6 +267,7 @@ function ValOverlayProvider(_ref) {
     suspend = _ref.suspend,
     draftModeReady = _ref.draftModeReady,
     draftSourcesSynced = _ref.draftSourcesSynced,
+    serverDraft = _ref.serverDraft,
     children = _ref.children;
   return /*#__PURE__*/jsx(ValOverlayContext.Provider, {
     value: {
@@ -274,7 +275,8 @@ function ValOverlayProvider(_ref) {
       draftMode: draftMode,
       suspend: suspend,
       draftModeReady: draftModeReady,
-      draftSourcesSynced: draftSourcesSynced
+      draftSourcesSynced: draftSourcesSynced,
+      serverDraft: serverDraft
     },
     children: children
   });

package/dist/{ValOverlayContext-3ec15518.cjs.dev.js → ValOverlayContext-bafe3de9.cjs.dev.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var createForOfIteratorHelper = require('./createForOfIteratorHelper-e75681d7.cjs.dev.js');
+var createForOfIteratorHelper = require('./createForOfIteratorHelper-4497beef.cjs.dev.js');
 var patch = require('@valbuild/core/patch');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -273,6 +273,7 @@ function ValOverlayProvider(_ref) {
     suspend = _ref.suspend,
     draftModeReady = _ref.draftModeReady,
     draftSourcesSynced = _ref.draftSourcesSynced,
+    serverDraft = _ref.serverDraft,
     children = _ref.children;
   return /*#__PURE__*/jsxRuntime.jsx(ValOverlayContext.Provider, {
     value: {
@@ -280,7 +281,8 @@ function ValOverlayProvider(_ref) {
       draftMode: draftMode,
       suspend: suspend,
       draftModeReady: draftModeReady,
-      draftSourcesSynced: draftSourcesSynced
+      draftSourcesSynced: draftSourcesSynced,
+      serverDraft: serverDraft
     },
     children: children
   });

package/dist/{createForOfIteratorHelper-e75681d7.cjs.dev.js → createForOfIteratorHelper-4497beef.cjs.dev.js}

@@ -150,8 +150,10 @@ function _createForOfIteratorHelper(r, e) {
   };
 }
 
+exports._arrayLikeToArray = _arrayLikeToArray;
 exports._createForOfIteratorHelper = _createForOfIteratorHelper;
 exports._defineProperty = _defineProperty;
 exports._objectSpread2 = _objectSpread2;
 exports._slicedToArray = _slicedToArray;
 exports._toPropertyKey = _toPropertyKey;
+exports._unsupportedIterableToArray = _unsupportedIterableToArray;

package/dist/{createForOfIteratorHelper-485c2ce1.esm.js → createForOfIteratorHelper-93a62170.esm.js}

@@ -148,4 +148,4 @@ function _createForOfIteratorHelper(r, e) {
   };
 }
 
-export { _objectSpread2 as _, _slicedToArray as a, _createForOfIteratorHelper as b, _toPropertyKey as c, _defineProperty as d };
+export { _objectSpread2 as _, _slicedToArray as a, _createForOfIteratorHelper as b, _toPropertyKey as c, _defineProperty as d, _arrayLikeToArray as e, _unsupportedIterableToArray as f };

package/dist/{createForOfIteratorHelper-0324e063.cjs.prod.js → createForOfIteratorHelper-9afd7d2d.cjs.prod.js}

@@ -150,8 +150,10 @@ function _createForOfIteratorHelper(r, e) {
   };
 }
 
+exports._arrayLikeToArray = _arrayLikeToArray;
 exports._createForOfIteratorHelper = _createForOfIteratorHelper;
 exports._defineProperty = _defineProperty;
 exports._objectSpread2 = _objectSpread2;
 exports._slicedToArray = _slicedToArray;
 exports._toPropertyKey = _toPropertyKey;
+exports._unsupportedIterableToArray = _unsupportedIterableToArray;

package/dist/declarations/src/ValDraft.d.ts

@@ -0,0 +1,21 @@
+import type { Json, ModuleFilePath } from "@valbuild/core";
+/**
+ * What a draft page shows, read by the server for the request that renders it.
+ *
+ * The source of every module the editor's draft CHANGES -- the ones with
+ * patches applied, published-not-yet-built ones included -- and nothing
+ * else: a module without changes is the build's own source, which the page
+ * already has. Handed to `<ValProvider draft>` so the server's render and the
+ * browser's first render resolve the same text, and the page never shows the
+ * published version first and the draft a moment later.
+ *
+ * A `.jsonValues()` module is in the shape the Studio's own store gives it: the
+ * entries the draft edits hold their content, and every other entry is the
+ * thunkless marker the hooks resolve from the bundle.
+ *
+ * Plain JSON, because it travels from a server function to the browser in the
+ * page's loader data. `fetchValDraft` in `@valbuild/tanstack/server` reads it.
+ */
+export type ValDraft = {
+    sources: Record<ModuleFilePath, Json>;
+};

package/dist/declarations/src/ValProvider.d.ts

@@ -3,4 +3,5 @@ export declare const ValProvider: (props: {
     config: import("@valbuild/core").ValConfig;
     disableRefresh?: boolean;
     suspend?: boolean;
+    draft?: import("./ValDraft.js").ValDraft | null;
 }) => import("react").JSX.Element;

package/dist/declarations/src/external_exempt_from_val_quickjs.d.ts

@@ -15,6 +15,7 @@ export { type SelectorSource, type SelectorOf, GenericSelector, } from "@valbuil
 export { ValRichText } from "@valbuild/react/internal";
 export { type ValEncodedString, type File, type Image, type RichText, } from "@valbuild/react/stega";
 export { ValProvider } from "./ValProvider.js";
+export type { ValDraft } from "./ValDraft.js";
 export { ValImage, type ValImageProps } from "./ValImage.js";
 export { ValApp } from "./ValApp.js";
 export { ValModulesClient, useRegisterValModules } from "./ValModulesClient.js";

package/dist/declarations/src/server/index.d.ts

@@ -2,6 +2,7 @@ export { initValServer } from "./initValServer.js";
 export { InMemoryPatchStore, type ValPatchStore } from "@valbuild/server";
 export type { ValHttpMode } from "./initValServer.js";
 export { initValContent } from "./initValContent.js";
+export type { ValDraft } from "../ValDraft.js";
 export { valDraftMode, hasValEnableCookieOnServer, VAL_DRAFT_MODE_COOKIE, type ValDraftMode, } from "./valDraftMode.js";
 export { initValMcp } from "./initValMcp.js";
 export { createPrettierFormatter, type PrettierLike, type ValFormatter, } from "@valbuild/server";