@valbuild/next 0.99.0 → 0.100.0

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

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('client-only');
+var routeFromVal = require('../../dist/routeFromVal-b48a454a.cjs.dev.js');
 var core = require('@valbuild/core');
 var stega = require('@valbuild/react/stega');
 var React = require('react');
 var ValOverlayContext = require('../../dist/ValOverlayContext-c6f27a6d.cjs.dev.js');
-var routeFromVal = require('../../dist/routeFromVal-9b610e77.cjs.dev.js');
 require('../../dist/createForOfIteratorHelper-0445603c.cjs.dev.js');
 require('../../dist/unsupportedIterableToArray-c8ab77c9.cjs.dev.js');
 require('../../dist/objectSpread2-58024783.cjs.dev.js');
@@ -58,6 +58,133 @@ function useValStega(selector) {
     }
   });
 }
+
+/**
+ * The module's source as the overlay currently sees it — i.e. WITH the editor's
+ * unpublished changes — or undefined when there is no draft view to be had
+ * (production, draft mode off, or the overlay has not pushed this module yet).
+ *
+ * This is what lets the single-entry readers show drafts. They otherwise resolve
+ * an entry through its local import thunk, which is the content that was bundled:
+ * correct in production, and stale the moment anyone edits in the Studio.
+ */
+function useDraftModuleSource(moduleFilePath) {
+  var valOverlayContext = ValOverlayContext.useValOverlayContext();
+  var store = valOverlayContext.store;
+  var moduleIds = React__default["default"].useMemo(function () {
+    return moduleFilePath ? [moduleFilePath] : [];
+  }, [moduleFilePath]);
+  var moduleMap = React__default["default"].useSyncExternalStore(store ? store.subscribe(moduleIds) : function () {
+    return function () {};
+  }, store ? store.getSnapshot(moduleIds) : function () {
+    return undefined;
+  }, store ? store.getServerSnapshot(moduleIds) : function () {
+    return undefined;
+  });
+  if (!valOverlayContext.draftMode || !moduleFilePath) {
+    return undefined;
+  }
+  return moduleMap === null || moduleMap === void 0 ? void 0 : moduleMap[moduleFilePath];
+}
+
+/**
+ * What the draft view says about one `.jsonValues()` entry.
+ *
+ * Mirrors the server-side rule in `fetchValKey`/`fetchValRoute`: a draft view
+ * that HAS an answer wins, including the answer "this entry is gone", and the
+ * bundled content is used only when there is no draft view.
+ */
+function draftJsonEntry(draftSource, key) {
+  if (draftSource === undefined || draftSource === null || routeFromVal._typeof(draftSource) !== "object" || Array.isArray(draftSource)) {
+    return {
+      status: "unavailable"
+    };
+  }
+  var entry = draftSource[key];
+  if (entry === undefined) {
+    // The module IS in the draft view and this key is not: it was deleted.
+    return {
+      status: "absent"
+    };
+  }
+  if (core.Internal.isJson(entry)) {
+    // An un-loaded marker: the Studio has not fetched this entry's content, so
+    // the draft view cannot answer. (The engine asks for entries that pending
+    // patches touch, so this resolves itself for anything actually edited.)
+    return {
+      status: "unavailable"
+    };
+  }
+  return {
+    status: "content",
+    content: entry
+  };
+}
+
+// The (loosened) content type a single `.jsonValues()` entry resolves to.
+
+// Module-level cache of in-flight/resolved entry loads, so `React.use` gets a
+// stable promise across renders (keyed by module path + entry key).
+var jsonEntryPromiseCache = new Map();
+
+/**
+ * Client counterpart to `fetchValKey`: resolves a SINGLE `.jsonValues()` entry
+ * by key, loading only that entry's backing `*.val.json` (one dynamic import).
+ * Suspends (via `React.use`) until the entry loads, so it must be rendered
+ * inside a `<Suspense>` boundary.
+ *
+ * In draft mode it renders the editor's unpublished content, taken from the
+ * overlay; in production — and whenever there is no draft view — it resolves the
+ * entry's lazy import thunk from the local module.
+ */
+function useValKeyStega(selector, key) {
+  var valOverlayContext = ValOverlayContext.useValOverlayContext();
+  var moduleFilePath = selector && core.Internal.getValPath(selector);
+  var draftSource = useDraftModuleSource(moduleFilePath || undefined);
+  var draft = draftJsonEntry(draftSource, key);
+  if (draft.status === "absent") {
+    // Deleted in the draft state. Falling back to the bundled entry here would
+    // render content the editor has just removed.
+    return undefined;
+  }
+  var content = draft.status === "content" ? draft.content : undefined;
+  if (content === undefined) {
+    content = readCommittedJsonEntry(selector, key);
+  }
+  return stega.stegaEncode(content, {
+    disabled: !valOverlayContext.draftMode,
+    root: routeFromVal.getJsonEntryStegaRoot(selector, key)
+  });
+}
+
+/**
+ * The entry's content as bundled: its lazy import thunk, resolved through
+ * `React.use` so the caller suspends until it lands.
+ *
+ * Deliberately not named `use*`: it is called conditionally, which is fine
+ * because `React.use` is not a hook, but a `use*` name would read like one.
+ */
+function readCommittedJsonEntry(selector, key) {
+  var _Internal$getValPath;
+  var source = selector && core.Internal.getSource(selector);
+  var marker = source && routeFromVal._typeof(source) === "object" ? source[key] : undefined;
+  if (!core.Internal.isJson(marker)) {
+    return undefined;
+  }
+  var thunk = core.Internal.getJsonImport(marker);
+  if (!thunk) {
+    return undefined;
+  }
+  var cacheKey = "".concat((_Internal$getValPath = core.Internal.getValPath(selector)) !== null && _Internal$getValPath !== void 0 ? _Internal$getValPath : "", " ").concat(key);
+  var promise = jsonEntryPromiseCache.get(cacheKey);
+  if (!promise) {
+    promise = thunk().then(function (mod) {
+      return mod["default"];
+    });
+    jsonEntryPromiseCache.set(cacheKey, promise);
+  }
+  return React__default["default"].use(promise);
+}
 function resolveParams(params) {
   if (!params) {
     return null;
@@ -76,13 +203,45 @@ function resolveParams(params) {
   return params;
 }
 function useValRouteStega(selector, params) {
+  var valOverlayContext = ValOverlayContext.useValOverlayContext();
+  // Both called unconditionally to keep hook order stable. For a `.jsonValues()`
+  // router `val` is unused (we resolve a single entry below instead); for any
+  // other router `draftSource` is.
   var val = useValStega(selector);
+  var draftSource = useDraftModuleSource(selector && core.Internal.getValPath(selector) || undefined);
   var resolvedParams = resolveParams(params);
   // Careful: null means there was an error - undefined means no params
   if (resolvedParams === null) {
     return null;
   }
-  var route = routeFromVal.initValRouteFromVal(resolvedParams || {}, "useValRoute", selector && core.Internal.getValPath(selector), selector && core.Internal.getSchema(selector), val);
+  var path = selector && core.Internal.getValPath(selector);
+  var schema = selector && core.Internal.getSchema(selector);
+  // `.jsonValues()` router: map params → the entry key and load ONLY that
+  // entry's backing `*.val.json` (one dynamic import), like `useValKey`.
+  if (routeFromVal.isJsonValuesRecordSchema(schema)) {
+    var source = selector && core.Internal.getSource(selector);
+    var url = routeFromVal.getValRouteUrlFromVal(resolvedParams || {}, "useValRoute", path, schema, source);
+    if (!url) {
+      return null;
+    }
+    var draft = draftJsonEntry(draftSource, url);
+    if (draft.status === "absent") {
+      // The draft state says this route is gone — see useValKeyStega.
+      return null;
+    }
+    var content = draft.status === "content" ? draft.content : undefined;
+    if (content === undefined) {
+      content = readCommittedJsonEntry(selector, url);
+    }
+    if (content === undefined) {
+      return null;
+    }
+    return stega.stegaEncode(content, {
+      disabled: !valOverlayContext.draftMode,
+      root: routeFromVal.getJsonEntryStegaRoot(selector, url)
+    });
+  }
+  var route = routeFromVal.initValRouteFromVal(resolvedParams || {}, "useValRoute", path, schema, val);
   return route;
 }
 function useValRouteUrl(selector, params) {
@@ -100,6 +259,7 @@ function useValRouteUrl(selector, params) {
 function initValClient(config) {
   return {
     useValStega: useValStega,
+    useValKeyStega: useValKeyStega,
     useValRouteStega: useValRouteStega,
     useValRouteUrl: useValRouteUrl
   };

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

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('client-only');
+var routeFromVal = require('../../dist/routeFromVal-8ac2f984.cjs.prod.js');
 var core = require('@valbuild/core');
 var stega = require('@valbuild/react/stega');
 var React = require('react');
 var ValOverlayContext = require('../../dist/ValOverlayContext-f7f45bc7.cjs.prod.js');
-var routeFromVal = require('../../dist/routeFromVal-13c832b2.cjs.prod.js');
 require('../../dist/createForOfIteratorHelper-d4afcad8.cjs.prod.js');
 require('../../dist/unsupportedIterableToArray-0d2087a2.cjs.prod.js');
 require('../../dist/objectSpread2-13f847a9.cjs.prod.js');
@@ -58,6 +58,133 @@ function useValStega(selector) {
     }
   });
 }
+
+/**
+ * The module's source as the overlay currently sees it — i.e. WITH the editor's
+ * unpublished changes — or undefined when there is no draft view to be had
+ * (production, draft mode off, or the overlay has not pushed this module yet).
+ *
+ * This is what lets the single-entry readers show drafts. They otherwise resolve
+ * an entry through its local import thunk, which is the content that was bundled:
+ * correct in production, and stale the moment anyone edits in the Studio.
+ */
+function useDraftModuleSource(moduleFilePath) {
+  var valOverlayContext = ValOverlayContext.useValOverlayContext();
+  var store = valOverlayContext.store;
+  var moduleIds = React__default["default"].useMemo(function () {
+    return moduleFilePath ? [moduleFilePath] : [];
+  }, [moduleFilePath]);
+  var moduleMap = React__default["default"].useSyncExternalStore(store ? store.subscribe(moduleIds) : function () {
+    return function () {};
+  }, store ? store.getSnapshot(moduleIds) : function () {
+    return undefined;
+  }, store ? store.getServerSnapshot(moduleIds) : function () {
+    return undefined;
+  });
+  if (!valOverlayContext.draftMode || !moduleFilePath) {
+    return undefined;
+  }
+  return moduleMap === null || moduleMap === void 0 ? void 0 : moduleMap[moduleFilePath];
+}
+
+/**
+ * What the draft view says about one `.jsonValues()` entry.
+ *
+ * Mirrors the server-side rule in `fetchValKey`/`fetchValRoute`: a draft view
+ * that HAS an answer wins, including the answer "this entry is gone", and the
+ * bundled content is used only when there is no draft view.
+ */
+function draftJsonEntry(draftSource, key) {
+  if (draftSource === undefined || draftSource === null || routeFromVal._typeof(draftSource) !== "object" || Array.isArray(draftSource)) {
+    return {
+      status: "unavailable"
+    };
+  }
+  var entry = draftSource[key];
+  if (entry === undefined) {
+    // The module IS in the draft view and this key is not: it was deleted.
+    return {
+      status: "absent"
+    };
+  }
+  if (core.Internal.isJson(entry)) {
+    // An un-loaded marker: the Studio has not fetched this entry's content, so
+    // the draft view cannot answer. (The engine asks for entries that pending
+    // patches touch, so this resolves itself for anything actually edited.)
+    return {
+      status: "unavailable"
+    };
+  }
+  return {
+    status: "content",
+    content: entry
+  };
+}
+
+// The (loosened) content type a single `.jsonValues()` entry resolves to.
+
+// Module-level cache of in-flight/resolved entry loads, so `React.use` gets a
+// stable promise across renders (keyed by module path + entry key).
+var jsonEntryPromiseCache = new Map();
+
+/**
+ * Client counterpart to `fetchValKey`: resolves a SINGLE `.jsonValues()` entry
+ * by key, loading only that entry's backing `*.val.json` (one dynamic import).
+ * Suspends (via `React.use`) until the entry loads, so it must be rendered
+ * inside a `<Suspense>` boundary.
+ *
+ * In draft mode it renders the editor's unpublished content, taken from the
+ * overlay; in production — and whenever there is no draft view — it resolves the
+ * entry's lazy import thunk from the local module.
+ */
+function useValKeyStega(selector, key) {
+  var valOverlayContext = ValOverlayContext.useValOverlayContext();
+  var moduleFilePath = selector && core.Internal.getValPath(selector);
+  var draftSource = useDraftModuleSource(moduleFilePath || undefined);
+  var draft = draftJsonEntry(draftSource, key);
+  if (draft.status === "absent") {
+    // Deleted in the draft state. Falling back to the bundled entry here would
+    // render content the editor has just removed.
+    return undefined;
+  }
+  var content = draft.status === "content" ? draft.content : undefined;
+  if (content === undefined) {
+    content = readCommittedJsonEntry(selector, key);
+  }
+  return stega.stegaEncode(content, {
+    disabled: !valOverlayContext.draftMode,
+    root: routeFromVal.getJsonEntryStegaRoot(selector, key)
+  });
+}
+
+/**
+ * The entry's content as bundled: its lazy import thunk, resolved through
+ * `React.use` so the caller suspends until it lands.
+ *
+ * Deliberately not named `use*`: it is called conditionally, which is fine
+ * because `React.use` is not a hook, but a `use*` name would read like one.
+ */
+function readCommittedJsonEntry(selector, key) {
+  var _Internal$getValPath;
+  var source = selector && core.Internal.getSource(selector);
+  var marker = source && routeFromVal._typeof(source) === "object" ? source[key] : undefined;
+  if (!core.Internal.isJson(marker)) {
+    return undefined;
+  }
+  var thunk = core.Internal.getJsonImport(marker);
+  if (!thunk) {
+    return undefined;
+  }
+  var cacheKey = "".concat((_Internal$getValPath = core.Internal.getValPath(selector)) !== null && _Internal$getValPath !== void 0 ? _Internal$getValPath : "", " ").concat(key);
+  var promise = jsonEntryPromiseCache.get(cacheKey);
+  if (!promise) {
+    promise = thunk().then(function (mod) {
+      return mod["default"];
+    });
+    jsonEntryPromiseCache.set(cacheKey, promise);
+  }
+  return React__default["default"].use(promise);
+}
 function resolveParams(params) {
   if (!params) {
     return null;
@@ -76,13 +203,45 @@ function resolveParams(params) {
   return params;
 }
 function useValRouteStega(selector, params) {
+  var valOverlayContext = ValOverlayContext.useValOverlayContext();
+  // Both called unconditionally to keep hook order stable. For a `.jsonValues()`
+  // router `val` is unused (we resolve a single entry below instead); for any
+  // other router `draftSource` is.
   var val = useValStega(selector);
+  var draftSource = useDraftModuleSource(selector && core.Internal.getValPath(selector) || undefined);
   var resolvedParams = resolveParams(params);
   // Careful: null means there was an error - undefined means no params
   if (resolvedParams === null) {
     return null;
   }
-  var route = routeFromVal.initValRouteFromVal(resolvedParams || {}, "useValRoute", selector && core.Internal.getValPath(selector), selector && core.Internal.getSchema(selector), val);
+  var path = selector && core.Internal.getValPath(selector);
+  var schema = selector && core.Internal.getSchema(selector);
+  // `.jsonValues()` router: map params → the entry key and load ONLY that
+  // entry's backing `*.val.json` (one dynamic import), like `useValKey`.
+  if (routeFromVal.isJsonValuesRecordSchema(schema)) {
+    var source = selector && core.Internal.getSource(selector);
+    var url = routeFromVal.getValRouteUrlFromVal(resolvedParams || {}, "useValRoute", path, schema, source);
+    if (!url) {
+      return null;
+    }
+    var draft = draftJsonEntry(draftSource, url);
+    if (draft.status === "absent") {
+      // The draft state says this route is gone — see useValKeyStega.
+      return null;
+    }
+    var content = draft.status === "content" ? draft.content : undefined;
+    if (content === undefined) {
+      content = readCommittedJsonEntry(selector, url);
+    }
+    if (content === undefined) {
+      return null;
+    }
+    return stega.stegaEncode(content, {
+      disabled: !valOverlayContext.draftMode,
+      root: routeFromVal.getJsonEntryStegaRoot(selector, url)
+    });
+  }
+  var route = routeFromVal.initValRouteFromVal(resolvedParams || {}, "useValRoute", path, schema, val);
   return route;
 }
 function useValRouteUrl(selector, params) {
@@ -100,6 +259,7 @@ function useValRouteUrl(selector, params) {
 function initValClient(config) {
   return {
     useValStega: useValStega,
+    useValKeyStega: useValKeyStega,
     useValRouteStega: useValRouteStega,
     useValRouteUrl: useValRouteUrl
   };

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

@@ -1,9 +1,9 @@
 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 { Internal } from '@valbuild/core';
 import { getModuleIds, stegaEncode } from '@valbuild/react/stega';
 import React from 'react';
 import { useValOverlayContext } from '../../dist/ValOverlayContext-3c37e5a7.esm.js';
-import { i as initValRouteFromVal, g as getValRouteUrlFromVal } from '../../dist/routeFromVal-8855a5cc.esm.js';
 import '../../dist/createForOfIteratorHelper-5758a730.esm.js';
 import '../../dist/unsupportedIterableToArray-5baabfdc.esm.js';
 import '../../dist/objectSpread2-60d1bd93.esm.js';
@@ -50,6 +50,133 @@ function useValStega(selector) {
     }
   });
 }
+
+/**
+ * The module's source as the overlay currently sees it — i.e. WITH the editor's
+ * unpublished changes — or undefined when there is no draft view to be had
+ * (production, draft mode off, or the overlay has not pushed this module yet).
+ *
+ * This is what lets the single-entry readers show drafts. They otherwise resolve
+ * an entry through its local import thunk, which is the content that was bundled:
+ * correct in production, and stale the moment anyone edits in the Studio.
+ */
+function useDraftModuleSource(moduleFilePath) {
+  var valOverlayContext = useValOverlayContext();
+  var store = valOverlayContext.store;
+  var moduleIds = React.useMemo(function () {
+    return moduleFilePath ? [moduleFilePath] : [];
+  }, [moduleFilePath]);
+  var moduleMap = React.useSyncExternalStore(store ? store.subscribe(moduleIds) : function () {
+    return function () {};
+  }, store ? store.getSnapshot(moduleIds) : function () {
+    return undefined;
+  }, store ? store.getServerSnapshot(moduleIds) : function () {
+    return undefined;
+  });
+  if (!valOverlayContext.draftMode || !moduleFilePath) {
+    return undefined;
+  }
+  return moduleMap === null || moduleMap === void 0 ? void 0 : moduleMap[moduleFilePath];
+}
+
+/**
+ * What the draft view says about one `.jsonValues()` entry.
+ *
+ * Mirrors the server-side rule in `fetchValKey`/`fetchValRoute`: a draft view
+ * that HAS an answer wins, including the answer "this entry is gone", and the
+ * bundled content is used only when there is no draft view.
+ */
+function draftJsonEntry(draftSource, key) {
+  if (draftSource === undefined || draftSource === null || _typeof(draftSource) !== "object" || Array.isArray(draftSource)) {
+    return {
+      status: "unavailable"
+    };
+  }
+  var entry = draftSource[key];
+  if (entry === undefined) {
+    // The module IS in the draft view and this key is not: it was deleted.
+    return {
+      status: "absent"
+    };
+  }
+  if (Internal.isJson(entry)) {
+    // An un-loaded marker: the Studio has not fetched this entry's content, so
+    // the draft view cannot answer. (The engine asks for entries that pending
+    // patches touch, so this resolves itself for anything actually edited.)
+    return {
+      status: "unavailable"
+    };
+  }
+  return {
+    status: "content",
+    content: entry
+  };
+}
+
+// The (loosened) content type a single `.jsonValues()` entry resolves to.
+
+// Module-level cache of in-flight/resolved entry loads, so `React.use` gets a
+// stable promise across renders (keyed by module path + entry key).
+var jsonEntryPromiseCache = new Map();
+
+/**
+ * Client counterpart to `fetchValKey`: resolves a SINGLE `.jsonValues()` entry
+ * by key, loading only that entry's backing `*.val.json` (one dynamic import).
+ * Suspends (via `React.use`) until the entry loads, so it must be rendered
+ * inside a `<Suspense>` boundary.
+ *
+ * In draft mode it renders the editor's unpublished content, taken from the
+ * overlay; in production — and whenever there is no draft view — it resolves the
+ * entry's lazy import thunk from the local module.
+ */
+function useValKeyStega(selector, key) {
+  var valOverlayContext = useValOverlayContext();
+  var moduleFilePath = selector && Internal.getValPath(selector);
+  var draftSource = useDraftModuleSource(moduleFilePath || undefined);
+  var draft = draftJsonEntry(draftSource, key);
+  if (draft.status === "absent") {
+    // Deleted in the draft state. Falling back to the bundled entry here would
+    // render content the editor has just removed.
+    return undefined;
+  }
+  var content = draft.status === "content" ? draft.content : undefined;
+  if (content === undefined) {
+    content = readCommittedJsonEntry(selector, key);
+  }
+  return stegaEncode(content, {
+    disabled: !valOverlayContext.draftMode,
+    root: getJsonEntryStegaRoot(selector, key)
+  });
+}
+
+/**
+ * The entry's content as bundled: its lazy import thunk, resolved through
+ * `React.use` so the caller suspends until it lands.
+ *
+ * Deliberately not named `use*`: it is called conditionally, which is fine
+ * because `React.use` is not a hook, but a `use*` name would read like one.
+ */
+function readCommittedJsonEntry(selector, key) {
+  var _Internal$getValPath;
+  var source = selector && Internal.getSource(selector);
+  var marker = source && _typeof(source) === "object" ? source[key] : undefined;
+  if (!Internal.isJson(marker)) {
+    return undefined;
+  }
+  var thunk = Internal.getJsonImport(marker);
+  if (!thunk) {
+    return undefined;
+  }
+  var cacheKey = "".concat((_Internal$getValPath = Internal.getValPath(selector)) !== null && _Internal$getValPath !== void 0 ? _Internal$getValPath : "", " ").concat(key);
+  var promise = jsonEntryPromiseCache.get(cacheKey);
+  if (!promise) {
+    promise = thunk().then(function (mod) {
+      return mod["default"];
+    });
+    jsonEntryPromiseCache.set(cacheKey, promise);
+  }
+  return React.use(promise);
+}
 function resolveParams(params) {
   if (!params) {
     return null;
@@ -68,13 +195,45 @@ function resolveParams(params) {
   return params;
 }
 function useValRouteStega(selector, params) {
+  var valOverlayContext = useValOverlayContext();
+  // Both called unconditionally to keep hook order stable. For a `.jsonValues()`
+  // router `val` is unused (we resolve a single entry below instead); for any
+  // other router `draftSource` is.
   var val = useValStega(selector);
+  var draftSource = useDraftModuleSource(selector && Internal.getValPath(selector) || undefined);
   var resolvedParams = resolveParams(params);
   // Careful: null means there was an error - undefined means no params
   if (resolvedParams === null) {
     return null;
   }
-  var route = initValRouteFromVal(resolvedParams || {}, "useValRoute", selector && Internal.getValPath(selector), selector && Internal.getSchema(selector), val);
+  var path = selector && Internal.getValPath(selector);
+  var schema = selector && Internal.getSchema(selector);
+  // `.jsonValues()` router: map params → the entry key and load ONLY that
+  // entry's backing `*.val.json` (one dynamic import), like `useValKey`.
+  if (isJsonValuesRecordSchema(schema)) {
+    var source = selector && Internal.getSource(selector);
+    var url = getValRouteUrlFromVal(resolvedParams || {}, "useValRoute", path, schema, source);
+    if (!url) {
+      return null;
+    }
+    var draft = draftJsonEntry(draftSource, url);
+    if (draft.status === "absent") {
+      // The draft state says this route is gone — see useValKeyStega.
+      return null;
+    }
+    var content = draft.status === "content" ? draft.content : undefined;
+    if (content === undefined) {
+      content = readCommittedJsonEntry(selector, url);
+    }
+    if (content === undefined) {
+      return null;
+    }
+    return stegaEncode(content, {
+      disabled: !valOverlayContext.draftMode,
+      root: getJsonEntryStegaRoot(selector, url)
+    });
+  }
+  var route = initValRouteFromVal(resolvedParams || {}, "useValRoute", path, schema, val);
   return route;
 }
 function useValRouteUrl(selector, params) {
@@ -92,6 +251,7 @@ function useValRouteUrl(selector, params) {
 function initValClient(config) {
   return {
     useValStega: useValStega,
+    useValKeyStega: useValKeyStega,
     useValRouteStega: useValRouteStega,
     useValRouteUrl: useValRouteUrl
   };

package/dist/declarations/src/client/initValClient.d.ts

@@ -1,13 +1,26 @@
-import { GenericSelector, SelectorOf, SelectorSource, SourceObject, ValModule } from "@valbuild/core";
+import { GenericSelector, JsonSource, SelectorOf, SelectorSource, SourceObject, ValModule } from "@valbuild/core";
 import { StegaOfSource } from "@valbuild/react/stega";
 import { ValConfig } from "@valbuild/core";
 export type UseValType<T extends SelectorSource> = SelectorOf<T> extends GenericSelector<infer S> ? StegaOfSource<S> : never;
 declare function useValStega<T extends SelectorSource>(selector: T): UseValType<T>;
-type UseValRouteReturnType<T extends ValModule<GenericSelector<SourceObject>>> = T extends ValModule<infer S> ? S extends SourceObject ? StegaOfSource<NonNullable<S>[string]> | null : never : never;
+type JsonEntryContentOf<T extends ValModule<GenericSelector<SourceObject>>> = T extends ValModule<infer S> ? S extends Record<string, infer V> ? V extends JsonSource<infer C> ? C : never : never : never;
+/**
+ * Client counterpart to `fetchValKey`: resolves a SINGLE `.jsonValues()` entry
+ * by key, loading only that entry's backing `*.val.json` (one dynamic import).
+ * Suspends (via `React.use`) until the entry loads, so it must be rendered
+ * inside a `<Suspense>` boundary.
+ *
+ * In draft mode it renders the editor's unpublished content, taken from the
+ * overlay; in production — and whenever there is no draft view — it resolves the
+ * entry's lazy import thunk from the local module.
+ */
+declare function useValKeyStega<T extends ValModule<GenericSelector<SourceObject>>>(selector: T, key: string): JsonEntryContentOf<T> | undefined;
+type UseValRouteReturnType<T extends ValModule<GenericSelector<SourceObject>>> = T extends ValModule<infer S> ? S extends SourceObject ? NonNullable<S>[string] extends JsonSource<infer C> ? C | null : StegaOfSource<NonNullable<S>[string]> | null : never : never;
 declare function useValRouteStega<T extends ValModule<GenericSelector<SourceObject>>>(selector: T, params: Record<string, string | string[]> | Promise<Record<string, string | string[]>>): UseValRouteReturnType<T>;
 declare function useValRouteUrl<T extends ValModule<GenericSelector<SourceObject>>>(selector: T, params?: Record<string, string | string[]> | Promise<Record<string, string | string[]>>): string | null;
 export declare function initValClient(config: ValConfig): {
     useValStega: typeof useValStega;
+    useValKeyStega: typeof useValKeyStega;
     useValRouteStega: typeof useValRouteStega;
     useValRouteUrl: typeof useValRouteUrl;
 };

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

@@ -48,6 +48,9 @@ export declare const Internal: {
     validate: (val: import("@valbuild/core").ValModule<import("@valbuild/core").SelectorSource>, path: import("@valbuild/core").SourcePath, src: unknown) => import("@valbuild/core").ValidationErrors | undefined;
     isVal: typeof import("@valbuild/core/dist/declarations/src/val").isVal;
     isFile: typeof import("@valbuild/core/dist/declarations/src/source/file").isFile;
+    isJson: typeof import("@valbuild/core/dist/declarations/src/source/json").isJson;
+    getJsonImport: typeof import("@valbuild/core/dist/declarations/src/source/json").getJsonImport;
+    resolveJsonValues: typeof import("@valbuild/core/dist/declarations/src/source/json").resolveJsonValues;
     createValPathOfItem: typeof import("@valbuild/core/dist/declarations/src/selector/SelectorProxy").createValPathOfItem;
     getSHA256Hash: (bits: Uint8Array) => string;
     initSchema: typeof import("@valbuild/core/dist/declarations/src/initSchema").initSchema;