@valbuild/react 0.133.0 → 0.134.0

package/CHANGELOG.md

@@ -1,5 +1,84 @@
 # @valbuild/react
 
+## 0.134.0
+
+### Minor Changes
+
+- [#690](https://github.com/valbuild/val/pull/690) [`16c49ea`](https://github.com/valbuild/val/commit/16c49ea6dd97c7a96bbfdf211af9bab5884579e2) Thanks [@freekh](https://github.com/freekh)! - Read a view with `useVal` / `fetchVal`.
+
+  A `s.view()` field reads as a pointer with no properties on it. It can now be handed to a reader, which resolves it to the module it names:
+
+  ```tsx
+  const page = useVal(pageVal);
+  const header = useVal(page.header); // the header module's content, typed
+  ```
+
+  The point is single source of truth rather than a new capability: the page declares which module it shows, and a component follows that declaration instead of importing the target a second time. Change `s.view(headerVal)` to `s.view(navVal)` and the reader follows; an import would have kept reading the header.
+
+  The readers that take a MODULE rather than a value follow the same rule — `useValKey`, `useValRoute`, `useValRouteUrl` and the `fetchVal*` counterparts, in both the Next and TanStack packages:
+
+  ```tsx
+  const page = useVal(pageVal);
+  const note = useValRoute(page.notes, params); // the router module the view names
+  ```
+
+  Works in draft mode, including when the page itself has a pending edit. Two things to know:
+
+  - **Resolve a handle in the component that read the module containing it.** A handle carries the module it points at, and that cannot survive serialization — so one passed from a server component to a client component as a prop arrives empty. It throws with an explanation rather than handing back the pointer. This is why it throws rather than returning nothing: every one of the route and key readers already uses `null` / `undefined` to mean "no such entry", so a quiet answer would be indistinguishable from a 404.
+  - **`ValView<Source>` is now a member of `SelectorSource`**, since a reader accepts one.
+
+- [#680](https://github.com/valbuild/val/pull/680) [`eaa265e`](https://github.com/valbuild/val/commit/eaa265e78d9f6d2a1b685c38901612b8a3704eed) Thanks [@freekh](https://github.com/freekh)! - Add `s.view()`: point at another module, so editors can reach it from the page it belongs to.
+
+  Content that has to live in its own module — a `keyOf` target, shared settings, a route-keyed record — is invisible from the page an editor thinks of it as part of. A view field puts a row on that page's screen that leads to it:
+
+  ```ts
+  import employeesVal from "../data/employees.val";
+
+  const schema = s.object({
+    title: s.string(),
+    employees: s.view(employeesVal),
+  });
+
+  export default c.define("/app/menneskene/page.val.ts", schema, {
+    title: "Våre folk",
+    employees: { view: "/data/employees.val.ts" },
+  });
+  ```
+
+  The source is a pointer and nothing else. The module it names keeps its own source, patches, validation and address, and an editor who follows the row lands on that module's own screen — so it is clear they are changing something other pages use too.
+
+  A few things worth knowing:
+
+  - **The path autocompletes, and a wrong one does not compile.** A module now carries its own id in its type, so the source type of the field above is the literal `{ view: "/data/employees.val.ts" }`.
+  - **It is not readable in code.** `useVal(pageVal).employees` is a `ValView<…>` — an opaque pointer with no fields on it. Read the module it names directly, as before.
+  - **`view` is now a reserved object key**, like `_type` and `patch_id`: `s.object({ view: ... })` no longer compiles. A single `view: string` key is what a view pointer looks like, and an ordinary object with that shape would be indistinguishable from one.
+  - **Views may not form a cycle.** `A → B → A`, and a module viewing itself, are reported as module errors by `val validate` and in the Studio.
+  - **A pointer that disagrees with its schema is repaired automatically.** It can only happen in hand-written JSON, and the schema is the authority, so `val validate --fix` and saving in the Studio both write the module the schema names.
+  - **A view's `hidden` and `readonly` are its own, never the module's it points at.** A view whose target is hidden is still shown, and still leads there.
+
+  That last one comes with a change to what `hidden()` means on a **module's own schema**, which is the other half of making a shared module usable:
+
+  ```ts
+  // Not in the nav, and on exactly one page.
+  export default c.define("/data/employees.val.ts", s.record(...).hidden(), { ... });
+  ```
+
+  It now means the nav does not list the module — the Explorer for an ordinary module, Media for a gallery — and nothing more. Previously it also blanked the module's own page, so a module you had hidden was still in the nav and showed nothing when opened. A hidden module is now reached from an `s.view()` row, from search or from a validation error, and renders in full when you get there.
+
+  One gap worth naming rather than leaving to be discovered: a view pointing at a
+  module the project does not have is reported by the FIELD — the row says the
+  target is missing — but not by `val validate`. The schema check compares the
+  pointer against the schema, and the cycle check deliberately skips a target that
+  is not a module of the project, so neither catches it. A project-level check
+  belongs with them and is not here yet.
+
+### Patch Changes
+
+- Updated dependencies [[`1c31dcc`](https://github.com/valbuild/val/commit/1c31dcca7f1bb0199350567fd579de29f48bb26d), [`688b9e3`](https://github.com/valbuild/val/commit/688b9e36b821323cda6870cdff03dd36ec3e782f), [`16c49ea`](https://github.com/valbuild/val/commit/16c49ea6dd97c7a96bbfdf211af9bab5884579e2), [`eaa265e`](https://github.com/valbuild/val/commit/eaa265e78d9f6d2a1b685c38901612b8a3704eed)]:
+  - @valbuild/ui@0.134.0
+  - @valbuild/core@0.134.0
+  - @valbuild/shared@0.134.0
+
 ## 0.133.0
 
 ### Patch Changes

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

@@ -1,5 +1,5 @@
 export { autoTagJSX } from "./autoTagJSX.js";
-export { stegaEncode, getModuleIds, stegaClean, type ValEncodedString, type StegaOfSource, type StegaOfRichTextSource, type File, type Image, type RichText, } from "./stegaEncode.js";
+export { stegaEncode, getModuleIds, stegaClean, type ValEncodedString, type StegaOfSource, type ResolvedVal, type Resolvable, type JsonEntryContentOf, type RouteValueOf, type StegaOfRichTextSource, type File, type Image, type RichText, } from "./stegaEncode.js";
 export { stegaDecodeStrings } from "./stegaDecodeStrings.js";
 export { attrs } from "./attrs.js";
 export { raw, type DecodeVal } from "./raw.js";

package/dist/declarations/src/stega/stegaEncode.d.ts

@@ -1,8 +1,10 @@
 import { Json, RichTextSource, MediaHotspot, RichTextOptions, ImageSource } from "@valbuild/core";
 import { FileSource, Source, SourceObject } from "@valbuild/core";
+import type { ValView, ValViewSource } from "@valbuild/core";
 import { JsonPrimitive } from "@valbuild/core";
 import { SourceArray } from "@valbuild/core";
 import { RawString } from "@valbuild/core";
+import type { GenericSelector, JsonSource, SelectorOf, SelectorSource } from "@valbuild/core";
 declare const brand: unique symbol;
 /**
  * ValEncodedString is a string that is encoded using steganography.
@@ -175,9 +177,53 @@ export type StegaOfRichTextSource<T extends Source> = Json extends T ? Json : T
 export type RichText<O extends RichTextOptions> = StegaOfRichTextSource<RichTextSource<O>> & {
     readonly __brand?: "RichText";
 };
-export type StegaOfSource<T extends Source> = Json extends T ? Json : T extends RichTextSource<infer O> ? RichText<O> : T extends ImageSource ? Image : T extends FileSource ? File : T extends SourceObject ? {
+export type StegaOfSource<T extends Source> = Json extends T ? Json : T extends RichTextSource<infer O> ? RichText<O> : T extends ImageSource ? Image : T extends FileSource ? File : T extends ValViewSource<string, infer Target> ? ValView<Target> : T extends SourceObject ? {
     [key in keyof T]: StegaOfSource<T[key]>;
 } : T extends SourceArray ? StegaOfSource<T[number]>[] : T extends RawString ? string : string extends T ? ValEncodedString : T extends JsonPrimitive ? T : never;
+/**
+ * What resolving `T` gives back — the one definition the framework readers
+ * share.
+ *
+ * Two shapes go in. A module or selector resolves as it always has. A
+ * {@link ValView}, which is what a `s.view()` field reads as, resolves to the
+ * module it points at: the page declares what it shows, and a reader follows
+ * that declaration instead of importing the target a second time.
+ *
+ * One definition rather than one per reader — `useVal`, `fetchVal`,
+ * `initValContent` and the TanStack client each had their own copy of the
+ * selector half, which is four places for the view half to be forgotten in.
+ *
+ * `Target extends Source` is checked HERE rather than on `ValView` itself:
+ * `ValView` is built from `ValViewSource`, which is a member of the `Source`
+ * union, so a constraint there is a circular type reference.
+ *
+ * The outer arms are wrapped in tuples so the conditional does not DISTRIBUTE
+ * over a union: distributing it re-entered `StegaOfSource` per member and the
+ * async readers hit "Type instantiation is excessively deep and possibly
+ * infinite" — `useVal` did not, because a `Promise<...>` around it is one more
+ * level than the checker had left.
+ */
+export type ResolvedVal<T extends SelectorSource> = [T] extends [
+    ValView<infer Target>
+] ? [Target] extends [Source] ? StegaOfSource<Target> : never : SelectorOf<T> extends GenericSelector<infer S> ? StegaOfSource<S> : never;
+/** What a reader accepts. A view handle is a `SelectorSource`, so this is it. */
+export type Resolvable = SelectorSource;
+/**
+ * The source of whichever arm of `ResolvableModule` a reader was given — the
+ * module's own, or that of the module a view points at.
+ */
+type SourceOfResolvable<T> = [T] extends [ValView<infer Target>] ? Target : T extends GenericSelector<infer S> ? S : never;
+/**
+ * The (loosened) content type a single `.jsonValues()` entry resolves to.
+ *
+ * Here rather than in the framework packages because there were four identical
+ * copies of it — next's client and rsc readers, tanstack's client and server —
+ * and the view arm would have had to be added to each. Same reason
+ * {@link ResolvedVal} lives here.
+ */
+export type JsonEntryContentOf<T> = SourceOfResolvable<T> extends Record<string, infer V> ? V extends JsonSource<infer C> ? C : never : never;
+/** What a route reader gives back for the entry the params matched. */
+export type RouteValueOf<T> = SourceOfResolvable<T> extends SourceObject ? NonNullable<SourceOfResolvable<T>>[string] extends JsonSource<infer C> ? C | null : StegaOfSource<NonNullable<SourceOfResolvable<T>>[string]> | null : never;
 export declare function stegaEncode(input: any, opts: {
     getModule?: (modulePath: string) => any;
     disabled?: boolean;

package/dist/{raw-eede220f.worker.esm.js → raw-1280c322.worker.esm.js}

@@ -1,5 +1,5 @@
 import { b as _unsupportedIterableToArray, a as _typeof, _ as _slicedToArray } from './slicedToArray-7d0170b6.worker.esm.js';
-import { Internal } from '@valbuild/core';
+import { Internal, isValViewSource } from '@valbuild/core';
 import { vercelStegaDecodeAll, vercelStegaSplit, vercelStegaCombine } from '@vercel/stega';
 
 function _createForOfIteratorHelper(r, e) {
@@ -142,6 +142,48 @@ function _objectSpread2(e) {
  * RichText is accessible by users (after conversion via useVal / fetchVal)
  **/
 
+/**
+ * What resolving `T` gives back — the one definition the framework readers
+ * share.
+ *
+ * Two shapes go in. A module or selector resolves as it always has. A
+ * {@link ValView}, which is what a `s.view()` field reads as, resolves to the
+ * module it points at: the page declares what it shows, and a reader follows
+ * that declaration instead of importing the target a second time.
+ *
+ * One definition rather than one per reader — `useVal`, `fetchVal`,
+ * `initValContent` and the TanStack client each had their own copy of the
+ * selector half, which is four places for the view half to be forgotten in.
+ *
+ * `Target extends Source` is checked HERE rather than on `ValView` itself:
+ * `ValView` is built from `ValViewSource`, which is a member of the `Source`
+ * union, so a constraint there is a circular type reference.
+ *
+ * The outer arms are wrapped in tuples so the conditional does not DISTRIBUTE
+ * over a union: distributing it re-entered `StegaOfSource` per member and the
+ * async readers hit "Type instantiation is excessively deep and possibly
+ * infinite" — `useVal` did not, because a `Promise<...>` around it is one more
+ * level than the checker had left.
+ */
+
+/** What a reader accepts. A view handle is a `SelectorSource`, so this is it. */
+
+/**
+ * The source of whichever arm of `ResolvableModule` a reader was given — the
+ * module's own, or that of the module a view points at.
+ */
+
+/**
+ * The (loosened) content type a single `.jsonValues()` entry resolves to.
+ *
+ * Here rather than in the framework packages because there were four identical
+ * copies of it — next's client and rsc readers, tanstack's client and server —
+ * and the view arm would have had to be added to each. Same reason
+ * {@link ResolvedVal} lives here.
+ */
+
+/** What a route reader gives back for the entry the params matched. */
+
 /**
  * Resolves the matching variant of a discriminated union from the value's tag.
  * Returns the matching schema or null if no match is found.
@@ -241,7 +283,55 @@ function handleRichTextSchema(sourceOrSelector, recOpts, rec) {
   return sourceOrSelector;
 }
 function stegaEncode(input, opts) {
+  var viewModules = new Map();
+  // Handed a view handle rather than a module: resolve it and encode what it
+  // points at. This is what makes `useVal(page.header)` read the header.
+  var resolved = Internal.viewHandleModule(input);
+  if (resolved !== undefined) {
+    return stegaEncode(resolved, opts);
+  }
+  // A view pointer with no module on it. The module rides on a symbol, and
+  // symbols do not survive serialization — so this is a handle that crossed the
+  // server/client boundary as a prop, or one read out of raw JSON. Resolving it
+  // would hand back the pointer itself, which looks like content and is not, so
+  // say what happened instead.
+  if (isValViewSource(input)) {
+    throw Error("Cannot resolve the view of '".concat(input.view, "': it carries no module. ") + "Either it crossed a server/client boundary, which drops the module because it rides on a symbol, " + "or it points at a different module than its schema declares \u2014 which `val validate --fix` repairs. " + "Resolve it in the same component that read the module containing it, or read '".concat(input.view, "' directly."));
+  }
   function rec(sourceOrSelector, recOpts) {
+    // A view is a pointer at another module. Weaving an edit tag into it would
+    // corrupt the path it holds, and there is nothing of the target here to
+    // encode — the target is its own module, encoded when it is read.
+    //
+    // The module it names rides along on a symbol, so `useVal(page.header)` can
+    // resolve it without a path-to-module registry the app does not have. The
+    // pointer itself is unchanged: symbols do not serialize, so this is still
+    // `{ view: "/foo.val.ts" }` to anything that looks at it as data.
+    if (recOpts !== null && recOpts !== void 0 && recOpts.schema && recOpts.schema.type === "view") {
+      var valModule = viewModules.get(recOpts.schema.moduleFilePath);
+      if (valModule === undefined || !isValViewSource(sourceOrSelector)) {
+        return sourceOrSelector;
+      }
+      /*
+       * The POINTER decides what may be attached, not the schema alone.
+       *
+       * The two can disagree: a `.val.ts` cannot express it (the source type is
+       * the literal path), but hand-written JSON and a patch can, which is the
+       * whole reason `view:check-module` exists as a fix. Keying only on the
+       * schema attached the schema's module to a pointer naming a different one,
+       * so `useVal(page.field)` read a module the value does not name — silently,
+       * and looking exactly like a correct read.
+       *
+       * So a mismatch gets no handle: the value stays the bare pointer, and
+       * reading it throws rather than answering with the wrong module. The
+       * Studio still renders the field and still offers the repair; nothing here
+       * refuses to encode the page over it.
+       */
+      if (sourceOrSelector.view !== recOpts.schema.moduleFilePath) {
+        return sourceOrSelector;
+      }
+      return Internal.createViewHandle(sourceOrSelector, valModule);
+    }
     if (recOpts !== null && recOpts !== void 0 && recOpts.schema && isKeyOfSchema(recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema)) {
       return sourceOrSelector;
     }
@@ -304,6 +394,25 @@ function stegaEncode(input, opts) {
       var selectorPath = Internal.getValPath(sourceOrSelector);
       if (selectorPath) {
         var newSchema = Internal.getSchema(sourceOrSelector);
+        // The modules this module's views point at. Collected HERE because this
+        // is the only place with the schema INSTANCE — everything below walks
+        // the serialized schema, which carries a path and not a module. Merged
+        // rather than replaced: a handle resolved by `useVal` re-enters here as
+        // its own module, and its parent's views must stay resolvable.
+        var _iterator = _createForOfIteratorHelper(Internal.viewModulesOf(newSchema)),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var _step$value = _slicedToArray(_step.value, 2),
+              path = _step$value[0],
+              _valModule = _step$value[1];
+            viewModules.set(path, _valModule);
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
         return rec(opts.getModule && opts.getModule(selectorPath) !== undefined ? opts.getModule(selectorPath) : Internal.getSource(sourceOrSelector), {
           path: selectorPath,
           schema: newSchema === null || newSchema === void 0 ? void 0 : newSchema["executeSerialize"]()
@@ -421,24 +530,65 @@ function collectReferencedModulesFromSchema(schema, acc) {
   } else if (schema.type === "array" || schema.type === "record") {
     collectReferencedModulesFromSchema(schema.item, acc);
   } else if (schema.type === "discriminated-union") {
-    var _iterator = _createForOfIteratorHelper(schema.items),
-      _step;
+    var _iterator2 = _createForOfIteratorHelper(schema.items),
+      _step2;
     try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var item = _step.value;
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var item = _step2.value;
         collectReferencedModulesFromSchema(item, acc);
       }
     } catch (err) {
-      _iterator.e(err);
+      _iterator2.e(err);
     } finally {
-      _iterator.f();
+      _iterator2.f();
     }
   }
 }
 function stegaClean(source) {
   return vercelStegaSplit(source).cleaned;
 }
+
+/**
+ * Answers already computed, keyed by the selector they were computed from.
+ *
+ * `getModuleIds` is not cheap: it calls `executeSerialize()`, which rebuilds the
+ * whole serialized schema tree on every call — ~31us for a 40-field schema with
+ * a nested array, against ~4us for a small one. It is called from `useValStega`
+ * on every render whose `useMemo` misses.
+ *
+ * That memo misses on every render for a VIEW, and cannot be fixed there: the
+ * handle is built by `createViewHandle` inside `stegaEncode`, so `page.authors`
+ * is a fresh object each time the page is encoded, and `[selector]` is a new
+ * dependency every render. Caching here rather than in the hooks fixes it for
+ * both copies of the hook at once, and for any other caller.
+ *
+ * Keyed on the selector, which is the module itself for the case that matters —
+ * a view resolves to it on the line below, and a module is a module-level
+ * constant, so the entry is hit for the life of the process. A fresh nested
+ * selector misses, as it did before; a `WeakMap` lets those entries go.
+ *
+ * The array is shared, so it is frozen: nothing may sort or splice it in place.
+ * Every consumer today copies first (`createSubscriberId` does `paths.slice()`),
+ * and freezing is what keeps that true.
+ */
+var moduleIdsCache = new WeakMap();
 function getModuleIds(input) {
+  // A view handle names one module: the one it points at. Resolved first so a
+  // `useVal(page.header)` subscribes to the header rather than to nothing — and
+  // so the recursive call lands on the module, which is what the cache above
+  // can actually key on.
+  var resolved = Internal.viewHandleModule(input);
+  if (resolved !== undefined) {
+    return getModuleIds(resolved);
+  }
+  var cacheable = _typeof(input) === "object" && input !== null;
+  if (cacheable) {
+    var cached = moduleIdsCache.get(input);
+    if (cached) {
+      // Frozen, so handing the same array to every caller is safe.
+      return cached;
+    }
+  }
   var modules = new Set();
   function rec(sourceOrSelector) {
     if (_typeof(sourceOrSelector) === "object") {
@@ -482,7 +632,14 @@ function getModuleIds(input) {
     return;
   }
   rec(input);
-  return Array.from(modules);
+  var moduleIds = Array.from(modules);
+  // Frozen before it is shared, not after: a consumer that sorts in place would
+  // otherwise corrupt every later caller's answer, and silently.
+  Object.freeze(moduleIds);
+  if (cacheable) {
+    moduleIdsCache.set(input, moduleIds);
+  }
+  return moduleIds;
 }
 
 function attrs(target) {

package/dist/{raw-fe78b046.cjs.prod.js → raw-3ae44ab5.cjs.prod.js}

@@ -144,6 +144,48 @@ function _objectSpread2(e) {
  * RichText is accessible by users (after conversion via useVal / fetchVal)
  **/
 
+/**
+ * What resolving `T` gives back — the one definition the framework readers
+ * share.
+ *
+ * Two shapes go in. A module or selector resolves as it always has. A
+ * {@link ValView}, which is what a `s.view()` field reads as, resolves to the
+ * module it points at: the page declares what it shows, and a reader follows
+ * that declaration instead of importing the target a second time.
+ *
+ * One definition rather than one per reader — `useVal`, `fetchVal`,
+ * `initValContent` and the TanStack client each had their own copy of the
+ * selector half, which is four places for the view half to be forgotten in.
+ *
+ * `Target extends Source` is checked HERE rather than on `ValView` itself:
+ * `ValView` is built from `ValViewSource`, which is a member of the `Source`
+ * union, so a constraint there is a circular type reference.
+ *
+ * The outer arms are wrapped in tuples so the conditional does not DISTRIBUTE
+ * over a union: distributing it re-entered `StegaOfSource` per member and the
+ * async readers hit "Type instantiation is excessively deep and possibly
+ * infinite" — `useVal` did not, because a `Promise<...>` around it is one more
+ * level than the checker had left.
+ */
+
+/** What a reader accepts. A view handle is a `SelectorSource`, so this is it. */
+
+/**
+ * The source of whichever arm of `ResolvableModule` a reader was given — the
+ * module's own, or that of the module a view points at.
+ */
+
+/**
+ * The (loosened) content type a single `.jsonValues()` entry resolves to.
+ *
+ * Here rather than in the framework packages because there were four identical
+ * copies of it — next's client and rsc readers, tanstack's client and server —
+ * and the view arm would have had to be added to each. Same reason
+ * {@link ResolvedVal} lives here.
+ */
+
+/** What a route reader gives back for the entry the params matched. */
+
 /**
  * Resolves the matching variant of a discriminated union from the value's tag.
  * Returns the matching schema or null if no match is found.
@@ -243,7 +285,55 @@ function handleRichTextSchema(sourceOrSelector, recOpts, rec) {
   return sourceOrSelector;
 }
 function stegaEncode(input, opts) {
+  var viewModules = new Map();
+  // Handed a view handle rather than a module: resolve it and encode what it
+  // points at. This is what makes `useVal(page.header)` read the header.
+  var resolved = core.Internal.viewHandleModule(input);
+  if (resolved !== undefined) {
+    return stegaEncode(resolved, opts);
+  }
+  // A view pointer with no module on it. The module rides on a symbol, and
+  // symbols do not survive serialization — so this is a handle that crossed the
+  // server/client boundary as a prop, or one read out of raw JSON. Resolving it
+  // would hand back the pointer itself, which looks like content and is not, so
+  // say what happened instead.
+  if (core.isValViewSource(input)) {
+    throw Error("Cannot resolve the view of '".concat(input.view, "': it carries no module. ") + "Either it crossed a server/client boundary, which drops the module because it rides on a symbol, " + "or it points at a different module than its schema declares \u2014 which `val validate --fix` repairs. " + "Resolve it in the same component that read the module containing it, or read '".concat(input.view, "' directly."));
+  }
   function rec(sourceOrSelector, recOpts) {
+    // A view is a pointer at another module. Weaving an edit tag into it would
+    // corrupt the path it holds, and there is nothing of the target here to
+    // encode — the target is its own module, encoded when it is read.
+    //
+    // The module it names rides along on a symbol, so `useVal(page.header)` can
+    // resolve it without a path-to-module registry the app does not have. The
+    // pointer itself is unchanged: symbols do not serialize, so this is still
+    // `{ view: "/foo.val.ts" }` to anything that looks at it as data.
+    if (recOpts !== null && recOpts !== void 0 && recOpts.schema && recOpts.schema.type === "view") {
+      var valModule = viewModules.get(recOpts.schema.moduleFilePath);
+      if (valModule === undefined || !core.isValViewSource(sourceOrSelector)) {
+        return sourceOrSelector;
+      }
+      /*
+       * The POINTER decides what may be attached, not the schema alone.
+       *
+       * The two can disagree: a `.val.ts` cannot express it (the source type is
+       * the literal path), but hand-written JSON and a patch can, which is the
+       * whole reason `view:check-module` exists as a fix. Keying only on the
+       * schema attached the schema's module to a pointer naming a different one,
+       * so `useVal(page.field)` read a module the value does not name — silently,
+       * and looking exactly like a correct read.
+       *
+       * So a mismatch gets no handle: the value stays the bare pointer, and
+       * reading it throws rather than answering with the wrong module. The
+       * Studio still renders the field and still offers the repair; nothing here
+       * refuses to encode the page over it.
+       */
+      if (sourceOrSelector.view !== recOpts.schema.moduleFilePath) {
+        return sourceOrSelector;
+      }
+      return core.Internal.createViewHandle(sourceOrSelector, valModule);
+    }
     if (recOpts !== null && recOpts !== void 0 && recOpts.schema && isKeyOfSchema(recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema)) {
       return sourceOrSelector;
     }
@@ -306,6 +396,25 @@ function stegaEncode(input, opts) {
       var selectorPath = core.Internal.getValPath(sourceOrSelector);
       if (selectorPath) {
         var newSchema = core.Internal.getSchema(sourceOrSelector);
+        // The modules this module's views point at. Collected HERE because this
+        // is the only place with the schema INSTANCE — everything below walks
+        // the serialized schema, which carries a path and not a module. Merged
+        // rather than replaced: a handle resolved by `useVal` re-enters here as
+        // its own module, and its parent's views must stay resolvable.
+        var _iterator = _createForOfIteratorHelper(core.Internal.viewModulesOf(newSchema)),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var _step$value = slicedToArray._slicedToArray(_step.value, 2),
+              path = _step$value[0],
+              _valModule = _step$value[1];
+            viewModules.set(path, _valModule);
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
         return rec(opts.getModule && opts.getModule(selectorPath) !== undefined ? opts.getModule(selectorPath) : core.Internal.getSource(sourceOrSelector), {
           path: selectorPath,
           schema: newSchema === null || newSchema === void 0 ? void 0 : newSchema["executeSerialize"]()
@@ -423,24 +532,65 @@ function collectReferencedModulesFromSchema(schema, acc) {
   } else if (schema.type === "array" || schema.type === "record") {
     collectReferencedModulesFromSchema(schema.item, acc);
   } else if (schema.type === "discriminated-union") {
-    var _iterator = _createForOfIteratorHelper(schema.items),
-      _step;
+    var _iterator2 = _createForOfIteratorHelper(schema.items),
+      _step2;
     try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var item = _step.value;
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var item = _step2.value;
         collectReferencedModulesFromSchema(item, acc);
       }
     } catch (err) {
-      _iterator.e(err);
+      _iterator2.e(err);
     } finally {
-      _iterator.f();
+      _iterator2.f();
     }
   }
 }
 function stegaClean(source) {
   return stega.vercelStegaSplit(source).cleaned;
 }
+
+/**
+ * Answers already computed, keyed by the selector they were computed from.
+ *
+ * `getModuleIds` is not cheap: it calls `executeSerialize()`, which rebuilds the
+ * whole serialized schema tree on every call — ~31us for a 40-field schema with
+ * a nested array, against ~4us for a small one. It is called from `useValStega`
+ * on every render whose `useMemo` misses.
+ *
+ * That memo misses on every render for a VIEW, and cannot be fixed there: the
+ * handle is built by `createViewHandle` inside `stegaEncode`, so `page.authors`
+ * is a fresh object each time the page is encoded, and `[selector]` is a new
+ * dependency every render. Caching here rather than in the hooks fixes it for
+ * both copies of the hook at once, and for any other caller.
+ *
+ * Keyed on the selector, which is the module itself for the case that matters —
+ * a view resolves to it on the line below, and a module is a module-level
+ * constant, so the entry is hit for the life of the process. A fresh nested
+ * selector misses, as it did before; a `WeakMap` lets those entries go.
+ *
+ * The array is shared, so it is frozen: nothing may sort or splice it in place.
+ * Every consumer today copies first (`createSubscriberId` does `paths.slice()`),
+ * and freezing is what keeps that true.
+ */
+var moduleIdsCache = new WeakMap();
 function getModuleIds(input) {
+  // A view handle names one module: the one it points at. Resolved first so a
+  // `useVal(page.header)` subscribes to the header rather than to nothing — and
+  // so the recursive call lands on the module, which is what the cache above
+  // can actually key on.
+  var resolved = core.Internal.viewHandleModule(input);
+  if (resolved !== undefined) {
+    return getModuleIds(resolved);
+  }
+  var cacheable = slicedToArray._typeof(input) === "object" && input !== null;
+  if (cacheable) {
+    var cached = moduleIdsCache.get(input);
+    if (cached) {
+      // Frozen, so handing the same array to every caller is safe.
+      return cached;
+    }
+  }
   var modules = new Set();
   function rec(sourceOrSelector) {
     if (slicedToArray._typeof(sourceOrSelector) === "object") {
@@ -484,7 +634,14 @@ function getModuleIds(input) {
     return;
   }
   rec(input);
-  return Array.from(modules);
+  var moduleIds = Array.from(modules);
+  // Frozen before it is shared, not after: a consumer that sorts in place would
+  // otherwise corrupt every later caller's answer, and silently.
+  Object.freeze(moduleIds);
+  if (cacheable) {
+    moduleIdsCache.set(input, moduleIds);
+  }
+  return moduleIds;
 }
 
 function attrs(target) {