@valbuild/next 0.99.1 → 0.101.0

package/README.md

@@ -55,6 +55,9 @@
   - [Image](#image)
   - [keyOf](#keyof)
   - [Route](#route)
+  - [Color](#color)
+  - [Date](#date)
+  - [DateTime](#datetime)
 
 ## Installation
 
@@ -886,6 +889,235 @@ export default c.define("/components/link.val.ts", linkSchema, {
 });
 ```
 
+## Color
+
+The `color` schema represents a color, stored as a CSS color string. Because the value is a plain CSS string, it can be used directly in a `style` attribute or set as a CSS custom property - there is nothing to convert in your components.
+
+### Color Schema
+
+```ts
+s.color(); // <- Schema<string>
+```
+
+### Output format
+
+The `format` option decides which CSS notation the color is stored in. It defaults to `"hsl"`.
+
+```ts
+s.color(); // hsl(217.22 91.22% 59.8%)
+s.color({ format: "hex" }); // #3b82f6
+s.color({ format: "rgb" }); // rgb(59 130 246)
+s.color({ format: "oklch" }); // oklch(0.6231 0.188 259.81)
+```
+
+The Val editor writes the value back in this format, so an editor who pastes `#3b82f6` into a field declared as `s.color()` gets `hsl(217.22 91.22% 59.8%)` stored.
+
+### Transparency
+
+Colors are fully opaque unless you opt into an alpha channel with `alpha: true`. A color with an alpha channel is a validation error in a field that does not allow it, so you can be sure an opaque color stays opaque.
+
+```ts
+s.color({ format: "hsl", alpha: true }); // hsl(217.22 91.22% 59.8% / 0.5)
+```
+
+With `alpha: true` the editor also gets an alpha slider next to the color picker.
+
+### Validation
+
+Validation is lenient about the syntax and strict about the format:
+
+- both the modern and the legacy notation of the declared format are accepted, so `hsl(0 100% 50%)` and `hsl(0, 100%, 50%)` are both valid `hsl` values, and `#f00` is a valid `hex` value
+- a color written in another format is an error which tells you the equivalent value in the right notation:
+  `Expected a color in the 'hsl' format (e.g. 'hsl(217.22 91.22% 59.8%)'), got '#ff0000'. Did you mean 'hsl(0 100% 50%)'?`
+- named colors (`red`), `lab()`, `color()` and `color-mix()` are not supported
+
+Colors can be nullable and can use `.describe()` and `.validate()` like any other schema:
+
+```ts
+s.color().nullable().describe("Optional highlight color");
+
+s.color({ format: "hex" }).validate((color) => {
+  if (color === "#000000") {
+    return "Pure black is too harsh - pick a dark grey instead";
+  }
+  return false;
+});
+```
+
+### Initializing color content
+
+```ts
+import { s, c, type t } from "../val.config";
+
+export const schema = s.object({
+  brand: s.color().describe("Primary brand color"),
+  background: s.color({ format: "hex" }).describe("Page background"),
+  overlay: s.color({ format: "hsl", alpha: true }).describe("Overlay tint"),
+});
+
+export type Theme = t.inferSchema<typeof schema>;
+export default c.define("/content/theme.val.ts", schema, {
+  brand: "hsl(217.22 91.22% 59.8%)",
+  background: "#0b1020",
+  overlay: "hsl(217.22 91.22% 59.8% / 0.15)",
+});
+```
+
+### Using colors
+
+The value is a string, so use it wherever CSS expects a color:
+
+```tsx
+import { fetchVal } from "../val/rsc";
+import themeVal from "../content/theme.val";
+
+export default async function Hero() {
+  const theme = await fetchVal(themeVal);
+  return (
+    <section style={{ background: theme.background, color: theme.brand }}>
+      <h1 style={{ borderBottom: `2px solid ${theme.brand}` }}>Hello</h1>
+    </section>
+  );
+}
+```
+
+To hand a color to a stylesheet instead, set it as a CSS custom property:
+
+```tsx
+<div style={{ "--brand": theme.brand } as React.CSSProperties}>
+```
+
+**NOTE**: colors are not steganographically tagged, since the value ends up in CSS where the invisible characters would break the declaration. Colors therefore do not participate in click-then-edit visual editing (the same is true of dates) - edit them from the studio instead.
+
+## Date
+
+The `date` schema represents a calendar day, with no time and no timezone. It is stored as a `YYYY-MM-DD` string.
+
+### Date Schema
+
+```ts
+s.date(); // <- Schema<string>
+```
+
+### Date bounds
+
+Use `.from()` and `.to()` to constrain which days are valid. Both bounds are inclusive.
+
+```ts
+s.date().from("1900-01-01"); // this day or later
+s.date().to("2024-01-01"); // this day or earlier
+s.date().from("1900-01-01").to("2024-01-01"); // within the range
+```
+
+These are methods, not options - `s.date({ from: "1900-01-01" })` does not type check.
+
+Bounds are compared as strings, which is exactly right for `YYYY-MM-DD` (it sorts chronologically) and wrong for anything else, so write bounds in that format.
+
+**NOTE**: the schema checks the bounds, but not the shape of the string: a value like `"the 3rd of May"` is stored and validated without complaint. The editor always writes `YYYY-MM-DD`, so this only bites hand-written content. Use `.validate()` if you want it enforced:
+
+```ts
+s.date().validate((day) =>
+  /^\d{4}-\d{2}-\d{2}$/.test(day) ? false : "Must be a YYYY-MM-DD date",
+);
+```
+
+### Editing dates
+
+Editors get a calendar. `from` and `to` limit which days can be picked, and a value already outside the bounds is shown clamped to the nearest one.
+
+### Initializing date content
+
+```ts
+import { s, c } from "../val.config";
+
+export const schema = s.object({
+  birthdate: s
+    .date()
+    .from("1900-01-01")
+    .to("2024-01-01")
+    .nullable()
+    .describe("Author's birthdate"),
+});
+
+export default c.define("/content/author.val.ts", schema, {
+  birthdate: "1981-12-30",
+});
+```
+
+### Using dates
+
+The value is a plain string, so it can be compared and sorted as one:
+
+```tsx
+const authors = [...allAuthors].sort((a, b) =>
+  (a.birthdate ?? "").localeCompare(b.birthdate ?? ""),
+);
+```
+
+To format it, hand it to `Date` or a date library. Note that `new Date("2024-05-03")` parses as UTC midnight, so formatting it in a local timezone west of UTC shows the previous day - format from the parts, or use a library that treats the value as a plain day:
+
+```tsx
+const [year, month, day] = author.birthdate.split("-").map(Number);
+const label = new Date(year, month - 1, day).toLocaleDateString();
+```
+
+## DateTime
+
+The `dateTime` schema represents an instant in time. It is stored as an ISO 8601 string in UTC, for example `2023-04-12T09:30:00.000Z`.
+
+### DateTime Schema
+
+```ts
+s.datetime(); // <- Schema<string>
+```
+
+The factory is spelled `datetime`, all lowercase. The schema type it serializes to is `dateTime` - that name shows up in validation output and in the editor, but you never write it yourself.
+
+### DateTime bounds
+
+As with `date`, use the inclusive `.from()` and `.to()` methods. They accept any ISO 8601 datetime that `Date.parse` understands, and are compared as instants rather than as strings, so bounds and values may be written in different notations:
+
+```ts
+s.datetime().from("2020-01-01T00:00:00Z");
+s.datetime().from("2020-01-01T00:00:00Z").to("2030-12-31T23:59:59Z");
+```
+
+Unlike `date`, the value itself is checked: a string that `Date.parse` cannot read is a validation error.
+
+> Value 'yesterday' is not a valid ISO 8601 datetime
+
+### Editing datetimes
+
+The editor shows a calendar, a time input (down to seconds) and a timezone picker. The picker starts on the browser's timezone and remembers the last choice, so an editor in one place can enter a time as it will be experienced somewhere else. Whichever zone is chosen, the value is converted and stored as UTC - the timezone is a property of the editor, never of the content.
+
+### Initializing datetime content
+
+```ts
+import { s, c } from "../val.config";
+
+export const schema = s.object({
+  joinedAt: s.datetime().nullable().describe("When the author joined"),
+});
+
+export default c.define("/content/author.val.ts", schema, {
+  joinedAt: "2023-04-12T09:30:00.000Z",
+});
+```
+
+### Using datetimes
+
+Since the value is an ISO 8601 UTC string, `Date` parses it directly:
+
+```tsx
+<time dateTime={author.joinedAt}>
+  {new Date(author.joinedAt).toLocaleString()}
+</time>
+```
+
+Rendering a UTC instant in the visitor's local timezone means server and client can format it differently. In Next.js that shows up as a hydration mismatch, so format inside a client component (or pass a fixed `timeZone` to `toLocaleString`) when the exact time matters.
+
+**NOTE**: neither `date` nor `dateTime` values are steganographically tagged, so they do not participate in click-then-edit visual editing - edit them from the studio instead. Both support `.nullable()`, `.describe()`, `.validate()`, `.readonly()` and `.hidden()` like any other schema.
+
 # Custom validation
 
 All schema can use the `validate` method to show custom validation errors to editors.

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
   };