@valbuild/next 0.121.0 → 0.123.0

package/CHANGELOG.md

@@ -1,5 +1,166 @@
 # @valbuild/next
 
+## 0.123.0
+
+### Minor Changes
+
+- [#613](https://github.com/valbuild/val/pull/613) [`c5e7dfd`](https://github.com/valbuild/val/commit/c5e7dfd12aa1371195be642e1c2fb72b6f3e3ce2) Thanks [@freekh](https://github.com/freekh)! - Val's MCP endpoint moves to its own package, and can now upload images
+
+  Everything that serves Val's content tools over MCP — the tool registry, the
+  write path behind it, the request guards and the access-token verification —
+  now lives in **`@valbuild/mcp`** instead of being split between
+  `@valbuild/server` and `@valbuild/next`.
+
+  **Nothing changes for an app that already mounts it.** `initValMcp` is still
+  exported from `@valbuild/next/server` and behaves exactly as before; it is now a
+  ten-line binding over `@valbuild/mcp`, supplying the Next version that
+  `initHandlerOptions` asks for. A host that is not Next can call
+  `initValMcp` from `@valbuild/mcp` directly.
+
+  If you built your own host on `createValTools`, import it from `@valbuild/mcp`
+  rather than `@valbuild/server`; the tool types moved with it.
+
+  ## Image uploads
+
+  An agent can now add an image, with a new `upload_image` tool. It takes a path
+  to a file on the machine your app runs on, or the image inline as base64, and
+  puts it in an `s.image()` field or an `s.images()` gallery.
+
+  Uploads are converted **only where the Studio would convert them**: `encode` is
+  off unless the schema asks for it (`s.image({ encode: { type: "webp" } })`), and
+  when it does, which images are converted, how far they are scaled and when the
+  original wins are the same decisions the browser makes — the same code, now
+  shared. An upload to a schema without `encode` is stored exactly as it arrived,
+  whatever its size.
+
+  One thing the tool does that the Studio does not: it refuses an image the
+  schema's `accept` does not cover, checked on the bytes that would actually be
+  stored. The Studio does not need to — its file picker carries `accept` — and
+  validation reports a mismatch as server-repairable, so nothing downstream would
+  stop it. An agent has no picker. Note the ordering:
+  `s.image({ accept: "image/webp", encode: { type: "webp" } })` still takes a PNG,
+  because the conversion happens first and it is the result that is checked.
+
+  It is the one tool you construct yourself, because it needs an image library
+  and `sharp` ships a compiled binary per platform. Val does not put one in every
+  project that installs it, so you decide:
+
+  ```sh
+  npm install sharp
+  ```
+
+  ```ts
+  import sharp from "sharp";
+  import { createValImageTools } from "@valbuild/mcp";
+  import { sharpImageProcessor } from "@valbuild/mcp/sharp";
+
+  const { valMcpAuthorize, valMcpTools } = initValMcp(valModules, config, {
+    extraTools: createValImageTools(sharpImageProcessor(sharp)),
+  });
+  ```
+
+  Leave `extraTools` out and everything else works as before — the agent can read,
+  validate and edit content, it just cannot add an image. `sharp` is passed in
+  rather than imported, so you can supply another encoder: `ValImageProcessor` is
+  two functions, `read` and `encode`.
+
+  Remotely stored images work too — `s.image().remote()` and
+  `s.images({ remote: true })` — and they need nothing extra from the MCP client.
+  Adding one does not upload anything to Val's content host: the bytes go into the
+  patch store like any other unpublished change, and the push to
+  `remote.val.build` happens when you publish, exactly as it does for an image
+  added through the Studio. All the tool has to do first is ask the project which
+  bucket to name in the ref, and the credential for that is the one your app
+  already has — its API key when it has one, and in local development the
+  `val login` token in your project, the same one `val validate --fix` uses. If
+  you have not logged in, it says so and writes nothing.
+
+  ## `npm create @valbuild` asks
+
+  The starter template now ships the MCP endpoint, and `npm create @valbuild`
+  asks whether you want it — and, if you do, whether agents should be able to
+  upload images, saying that this adds `sharp`. Both default to yes, and both can
+  be answered up front for a scripted setup:
+
+  ```sh
+  pnpm create @valbuild my-app --mcp --no-image-uploads
+  ```
+
+### Patch Changes
+
+- Updated dependencies [[`c5e7dfd`](https://github.com/valbuild/val/commit/c5e7dfd12aa1371195be642e1c2fb72b6f3e3ce2), [`53f670c`](https://github.com/valbuild/val/commit/53f670c0cf2d7a03a6d068c78b7874ce77652c2a)]:
+  - @valbuild/mcp@0.123.0
+  - @valbuild/server@0.123.0
+  - @valbuild/shared@0.123.0
+  - @valbuild/ui@0.123.0
+  - @valbuild/language-server@0.123.0
+  - @valbuild/react@0.123.0
+
+## 0.122.0
+
+### Minor Changes
+
+- [#597](https://github.com/valbuild/val/pull/597) [`5d14612`](https://github.com/valbuild/val/commit/5d14612f612d657a37338136188f2b3c02b28fe7) Thanks [@freekh](https://github.com/freekh)! - MCP: remove personal access token auth. The endpoint now needs an `oauth`
+  config, or local filesystem mode.
+
+  Until now, an MCP endpoint with no `oauth` config accepted whatever bearer token
+  a caller presented and relayed it to the Val content backend unread. The
+  reasoning was that without an issuer the app has no key to check a token
+  against, so it should not pretend to be the authority on what that token may
+  do — and that much was right. The shape was not: a credential the app cannot
+  check is one it cannot refuse either, so "a deployed endpoint that authenticates
+  nobody" was a supported configuration, and an app could serve content-rewriting
+  tools without ever being told where its callers should authorize.
+
+  **If you run Val in proxy mode**, MCP now requires the `oauth` config that
+  shipped in `0.120.0`. Callers authorize as themselves against the Val
+  authorization server, this app verifies the token's signature, issuer, audience
+  and expiry itself, and patches carry the verified profile as their author:
+
+  ```ts
+  initValMcp(valModules, config, {
+    oauth: {
+      issuer: "https://admin.val.build",
+      resource: "https://your-app.com/api/mcp",
+    },
+  });
+  ```
+
+  Leave it out and the endpoint answers `500` naming the missing config, rather
+  than serving the request.
+
+  **If you run Val in local filesystem mode**, nothing changes. Local development
+  still needs no `oauth` config and no authorization server: there is no backend
+  to authenticate to, and patches are written with no author. A token presented
+  to such a project is still refused rather than ignored — the endpoint answers
+  `400` and says to take the credential out of the client's configuration, since
+  what it reached was a working tree with no permission check in front of it.
+
+  Two API changes if you built your own host on `createValTools`:
+
+  - `ValToolContext.auth` no longer has a `{ type: "pat", pat }` variant.
+    `{ type: "verified-profile", profileId, scopes }` is the only credential the
+    registry accepts, and `null` still means local filesystem mode.
+  - `createValOps` no longer takes an `auth` argument. `ValOpsHttp` still accepts
+    a personal access token directly — that is how `val debug` uses the token from
+    `val login` — but no server request builds one.
+
+  Proxy mode also stops keeping one data layer per credential. Each personal
+  access token needed its own `ValOpsHttp` to hold it, each of those cached the
+  project's evaluated modules, and the bounded cache that kept the memory in
+  check turned an eviction into a re-evaluation of every module on the next call.
+  Verified callers all share one instance, because they all reach the backend
+  under the app's own API key.
+
+### Patch Changes
+
+- Updated dependencies [[`be32261`](https://github.com/valbuild/val/commit/be32261af19db8018bc37b180d903416018c0b79), [`5d14612`](https://github.com/valbuild/val/commit/5d14612f612d657a37338136188f2b3c02b28fe7), [`da6794f`](https://github.com/valbuild/val/commit/da6794f3dbd77d49ccfe780b359bab1689ee1b11), [`1c8b7fd`](https://github.com/valbuild/val/commit/1c8b7fda1e84cd8bd32a03a85d2789598b98c3fb)]:
+  - @valbuild/server@0.122.0
+  - @valbuild/shared@0.122.0
+  - @valbuild/ui@0.122.0
+  - @valbuild/language-server@0.122.0
+  - @valbuild/react@0.122.0
+
 ## 0.121.0
 
 ### Minor Changes

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

@@ -3,12 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('client-only');
-var _typeof = require('../../dist/typeof-b568f48f.cjs.dev.js');
+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-5bd7628b.cjs.dev.js');
-var routeFromVal = require('../../dist/routeFromVal-7df20dfe.cjs.dev.js');
 require('../../dist/createForOfIteratorHelper-0445603c.cjs.dev.js');
 require('../../dist/unsupportedIterableToArray-c8ab77c9.cjs.dev.js');
 require('../../dist/objectSpread2-58024783.cjs.dev.js');
@@ -119,7 +118,7 @@ function useDraftModuleSource(moduleFilePath) {
  * bundled content is used only when there is no draft view.
  */
 function draftJsonEntry(draftSource, key) {
-  if (draftSource === undefined || draftSource === null || _typeof._typeof(draftSource) !== "object" || Array.isArray(draftSource)) {
+  if (draftSource === undefined || draftSource === null || routeFromVal._typeof(draftSource) !== "object" || Array.isArray(draftSource)) {
     return {
       status: "unavailable"
     };
@@ -191,7 +190,7 @@ function useValKeyStega(selector, key) {
 function readCommittedJsonEntry(selector, key) {
   var _Internal$getValPath;
   var source = selector && core.Internal.getSource(selector);
-  var marker = source && _typeof._typeof(source) === "object" ? source[key] : undefined;
+  var marker = source && routeFromVal._typeof(source) === "object" ? source[key] : undefined;
   if (!core.Internal.isJson(marker)) {
     return undefined;
   }

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

@@ -3,12 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('client-only');
-var _typeof = require('../../dist/typeof-16428c61.cjs.prod.js');
+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-d690744f.cjs.prod.js');
-var routeFromVal = require('../../dist/routeFromVal-8032f5f7.cjs.prod.js');
 require('../../dist/createForOfIteratorHelper-d4afcad8.cjs.prod.js');
 require('../../dist/unsupportedIterableToArray-0d2087a2.cjs.prod.js');
 require('../../dist/objectSpread2-13f847a9.cjs.prod.js');
@@ -119,7 +118,7 @@ function useDraftModuleSource(moduleFilePath) {
  * bundled content is used only when there is no draft view.
  */
 function draftJsonEntry(draftSource, key) {
-  if (draftSource === undefined || draftSource === null || _typeof._typeof(draftSource) !== "object" || Array.isArray(draftSource)) {
+  if (draftSource === undefined || draftSource === null || routeFromVal._typeof(draftSource) !== "object" || Array.isArray(draftSource)) {
     return {
       status: "unavailable"
     };
@@ -191,7 +190,7 @@ function useValKeyStega(selector, key) {
 function readCommittedJsonEntry(selector, key) {
   var _Internal$getValPath;
   var source = selector && core.Internal.getSource(selector);
-  var marker = source && _typeof._typeof(source) === "object" ? source[key] : undefined;
+  var marker = source && routeFromVal._typeof(source) === "object" ? source[key] : undefined;
   if (!core.Internal.isJson(marker)) {
     return undefined;
   }

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

@@ -1,10 +1,9 @@
 import 'client-only';
-import { _ as _typeof } from '../../dist/typeof-a1531d8f.esm.js';
+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-e42a2e14.esm.js';
-import { g as getJsonEntryStegaRoot, a as isJsonValuesRecordSchema, b as getValRouteUrlFromVal, i as initValRouteFromVal } from '../../dist/routeFromVal-bd69625f.esm.js';
 import '../../dist/createForOfIteratorHelper-5758a730.esm.js';
 import '../../dist/unsupportedIterableToArray-5baabfdc.esm.js';
 import '../../dist/objectSpread2-60d1bd93.esm.js';

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

@@ -3,7 +3,7 @@ import { _ as _slicedToArray } from './slicedToArray-aa291011.esm.js';
 import { VERSION, VAL_APP_PATH, VAL_APP_ID } from '@valbuild/ui';
 import Script from 'next/script';
 import { useState, useRef, useEffect } from 'react';
-import { u as useConfigStorageSave, v as valPrefixedClass, c as cn, a as canvasDarkBg, b as canvasLightBg } from './fallbackColors-5ead2c26.esm.js';
+import { u as useConfigStorageSave, v as valPrefixedClass, c as cn, a as canvasDarkBg, b as canvasLightBg } from './fallbackColors-77aeedf8.esm.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import './unsupportedIterableToArray-5baabfdc.esm.js';
 import '@valbuild/shared/internal';

package/dist/ValApp-17eb6e93.cjs.js

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

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

@@ -7,7 +7,7 @@ var slicedToArray = require('./slicedToArray-ce613de6.cjs.prod.js');
 var ui = require('@valbuild/ui');
 var Script = require('next/script');
 var React = require('react');
-var fallbackColors = require('./fallbackColors-d4a5b0da.cjs.prod.js');
+var fallbackColors = require('./fallbackColors-8842243c.cjs.prod.js');
 var jsxRuntime = require('react/jsx-runtime');
 require('./unsupportedIterableToArray-0d2087a2.cjs.prod.js');
 require('@valbuild/shared/internal');

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

@@ -7,7 +7,7 @@ var slicedToArray = require('./slicedToArray-44036a76.cjs.dev.js');
 var ui = require('@valbuild/ui');
 var Script = require('next/script');
 var React = require('react');
-var fallbackColors = require('./fallbackColors-9a2ac53a.cjs.dev.js');
+var fallbackColors = require('./fallbackColors-a491e700.cjs.dev.js');
 var jsxRuntime = require('react/jsx-runtime');
 require('./unsupportedIterableToArray-c8ab77c9.cjs.dev.js');
 require('@valbuild/shared/internal');

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

@@ -13,7 +13,7 @@ var React = require('react');
 var ValOverlayContext = require('./ValOverlayContext-5bd7628b.cjs.dev.js');
 var stega = require('@valbuild/react/stega');
 var internal = require('@valbuild/shared/internal');
-var fallbackColors = require('./fallbackColors-9a2ac53a.cjs.dev.js');
+var fallbackColors = require('./fallbackColors-a491e700.cjs.dev.js');
 var createForOfIteratorHelper = require('./createForOfIteratorHelper-0445603c.cjs.dev.js');
 var ValCanvasBridge = require('./ValCanvasBridge-9d148bdd.cjs.dev.js');
 var jsxRuntime = require('react/jsx-runtime');

package/dist/{ValNextProvider-588f2ff0.esm.js → ValNextProvider-32156acd.esm.js}

@@ -9,7 +9,7 @@ import React, { useEffect } from 'react';
 import { ValExternalStore, ValOverlayProvider } from './ValOverlayContext-e42a2e14.esm.js';
 import { SET_AUTO_TAG_JSX_ENABLED } from '@valbuild/react/stega';
 import { VAL_THEME_SESSION_STORAGE_KEY, createValClient, isValCanvasFrame } from '@valbuild/shared/internal';
-import { p as prefixStyles, u as useConfigStorageSave, f as floatDarkBg, d as floatLightBg, v as valPrefixedClass, c as cn } from './fallbackColors-5ead2c26.esm.js';
+import { p as prefixStyles, u as useConfigStorageSave, f as floatDarkBg, d as floatLightBg, v as valPrefixedClass, c as cn } from './fallbackColors-77aeedf8.esm.js';
 import { _ as _createForOfIteratorHelper } from './createForOfIteratorHelper-5758a730.esm.js';
 import { ValCanvasBridge } from './ValCanvasBridge-d9948526.esm.js';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/ValNextProvider-72d3561b.cjs.js

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

package/dist/{ValNextProvider-bd3f89d3.cjs.prod.js → ValNextProvider-72d3561b.cjs.prod.js}

@@ -13,7 +13,7 @@ var React = require('react');
 var ValOverlayContext = require('./ValOverlayContext-d690744f.cjs.prod.js');
 var stega = require('@valbuild/react/stega');
 var internal = require('@valbuild/shared/internal');
-var fallbackColors = require('./fallbackColors-d4a5b0da.cjs.prod.js');
+var fallbackColors = require('./fallbackColors-8842243c.cjs.prod.js');
 var createForOfIteratorHelper = require('./createForOfIteratorHelper-d4afcad8.cjs.prod.js');
 var ValCanvasBridge = require('./ValCanvasBridge-e62125f8.cjs.prod.js');
 var jsxRuntime = require('react/jsx-runtime');

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

@@ -1,4 +1,4 @@
 import "server-only";
 export { initValServer } from "./initValServer.js";
 export { initValMcp } from "./initValMcp.js";
-export type { ValMcp, ValMcpAuthorizationResult } from "./initValMcp.js";
+export type { ValMcp, ValMcpAuthorizationResult, ValMcpMetadataHandlers, ValOAuthConfig, ValToolImpl, } from "@valbuild/mcp";

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

@@ -1,63 +1,28 @@
-import { ValConfig, ValModules } from "@valbuild/core";
-import { type ValToolContext, type ValTools } from "@valbuild/server";
-import { type ValOAuthConfig } from "./valAccessToken.js";
-import { type ValMcpMetadataHandlers } from "./valMcpMetadata.js";
+import type { ValConfig, ValModules } from "@valbuild/core";
+import { type ValMcp, type ValToolImpl, type ValOAuthConfig } from "@valbuild/mcp";
 /**
- * Val's tools over MCP, and the two checks that have to happen before a request
- * gets to them.
+ * Val's tools over MCP, bound to Next.
  *
- * Nothing here imports an MCP SDK. The app owns the transport — which SDK, which
- * route, which framework — and this owns the parts that must not be re-decided
- * per app: whether the request is allowed to reach the tools at all, and whose
- * credential it carries. `docs/plans/mcp.md` Part A has the reasoning; the short
- * version is that the SDK reorganised itself once already, and the security
- * checks should not move when it does again.
+ * The MCP endpoint itself — the tools, the request guards, the access-token
+ * verification — lives in `@valbuild/mcp`, which knows nothing about Next. All
+ * that is left here is the one thing this package can answer and that one
+ * cannot: which version of `@valbuild/next` is running, which
+ * `initHandlerOptions` insists on before it will build a proxy-mode config.
+ *
+ * Kept exported from `@valbuild/next/server` because that is where it has
+ * always been. New code can import `initValMcp` from `@valbuild/mcp` directly
+ * and pass `versions: { next }` itself; there is no difference in behaviour.
  */
-export type ValMcpAuthorizationResult = {
-    status: "ok";
-    tools: ValTools;
-    ctx: ValToolContext;
-} | {
-    status: "refused";
-    response: Response;
-};
-export type ValMcp = {
-    /**
-     * Check a request and, if it is allowed, hand back the tools and the context
-     * to call them with.
-     *
-     * Call this per request — both halves are per request. Refusing early is the
-     * point: a refused request must not reach the protocol layer, let alone a
-     * tool.
-     */
-    valMcpAuthorize: (request: Request | undefined) => Promise<ValMcpAuthorizationResult>;
-    /**
-     * The registry itself, for listing tools at startup.
-     *
-     * Listing needs no credential — it reads no content — so registering tools
-     * with an MCP server can happen once rather than per request.
-     */
-    valMcpTools: () => Promise<ValTools>;
-    /**
-     * The RFC 9728 protected-resource document, for mounting at
-     * `/.well-known/oauth-protected-resource`.
-     *
-     * `null` when no `oauth` config was given: a project that has not been told
-     * where to authorize must not publish a document claiming it knows.
-     */
-    valMcpMetadata: ValMcpMetadataHandlers | null;
-};
 export declare function initValMcp(valModules: ValModules, config: ValConfig, opts?: {
     formatter?: (code: string, filePath: string) => string | Promise<string>;
     /**
-     * Where to authorize, and what audience to expect.
-     *
-     * Omit it and nothing changes: the endpoint behaves exactly as it did
-     * before OAuth existed, which keeps local development a one-liner and keeps
-     * an app that has not been reconfigured working. Provide it and every call
-     * needs a verified access token — including in fs mode, where a token is
-     * refused rather than ignored, because a host that thinks it is
-     * authenticating should never silently get unauthenticated local access.
+     * Where to authorize, and what audience to expect. Required for proxy
+     * mode; see `initValMcp` in `@valbuild/mcp` for what omitting it means.
      */
     oauth?: ValOAuthConfig;
+    /**
+     * Tools to serve alongside the built-in ones — the image tool arrives this
+     * way. See `createValImageTools` in `@valbuild/mcp`.
+     */
+    extraTools?: ValToolImpl[];
 }): ValMcp;

package/dist/{fallbackColors-5ead2c26.esm.js → fallbackColors-77aeedf8.esm.js}

@@ -48,11 +48,11 @@ var cn = function cn(className) {
 /** `--bg-canvas`, dark. The studio's own background. */
 var canvasDarkBg = "#08080a";
 /** `--bg-canvas`, light. */
-var canvasLightBg = "#fafafa";
+var canvasLightBg = "#f4f4f5";
 
 /** `--bg-float`, dark. Val's chrome, floating over the customer's page. */
 var floatDarkBg = "#131316";
 /** `--bg-float`, light. */
-var floatLightBg = "#ffffff";
+var floatLightBg = "#fcfcfc";
 
 export { canvasDarkBg as a, canvasLightBg as b, cn as c, floatLightBg as d, floatDarkBg as f, prefixStyles as p, useConfigStorageSave as u, valPrefixedClass as v };

package/dist/{fallbackColors-d4a5b0da.cjs.prod.js → fallbackColors-8842243c.cjs.prod.js}

@@ -54,12 +54,12 @@ var cn = function cn(className) {
 /** `--bg-canvas`, dark. The studio's own background. */
 var canvasDarkBg = "#08080a";
 /** `--bg-canvas`, light. */
-var canvasLightBg = "#fafafa";
+var canvasLightBg = "#f4f4f5";
 
 /** `--bg-float`, dark. Val's chrome, floating over the customer's page. */
 var floatDarkBg = "#131316";
 /** `--bg-float`, light. */
-var floatLightBg = "#ffffff";
+var floatLightBg = "#fcfcfc";
 
 exports.canvasDarkBg = canvasDarkBg;
 exports.canvasLightBg = canvasLightBg;

package/dist/{fallbackColors-9a2ac53a.cjs.dev.js → fallbackColors-a491e700.cjs.dev.js}

@@ -54,12 +54,12 @@ var cn = function cn(className) {
 /** `--bg-canvas`, dark. The studio's own background. */
 var canvasDarkBg = "#08080a";
 /** `--bg-canvas`, light. */
-var canvasLightBg = "#fafafa";
+var canvasLightBg = "#f4f4f5";
 
 /** `--bg-float`, dark. Val's chrome, floating over the customer's page. */
 var floatDarkBg = "#131316";
 /** `--bg-float`, light. */
-var floatLightBg = "#ffffff";
+var floatLightBg = "#fcfcfc";
 
 exports.canvasDarkBg = canvasDarkBg;
 exports.canvasLightBg = canvasLightBg;

package/dist/{routeFromVal-bd69625f.esm.js → routeFromVal-263eec96.esm.js}

@@ -1,10 +1,19 @@
 import { _ as _createForOfIteratorHelper } from './createForOfIteratorHelper-5758a730.esm.js';
 import { _ as _objectSpread2 } from './objectSpread2-60d1bd93.esm.js';
 import { _ as _slicedToArray } from './slicedToArray-aa291011.esm.js';
-import { _ as _typeof } from './typeof-a1531d8f.esm.js';
 import { RecordSchema, Internal } from '@valbuild/core';
 import { getNextAppRouterSourceFolder, getPatternFromModuleFilePath, parseRoutePattern } from '@valbuild/shared/internal';
 
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+
 /**
  * True when the module's schema is a `.jsonValues()` record/router — i.e. each
  * entry value is a lazily-loaded `c.json(() => import(...))` marker. Used by the
@@ -184,4 +193,4 @@ val) {
   return actualRoute;
 }
 
-export { isJsonValuesRecordSchema as a, getValRouteUrlFromVal as b, getJsonEntryStegaRoot as g, initValRouteFromVal as i };
+export { _typeof as _, isJsonValuesRecordSchema as a, getValRouteUrlFromVal as b, getJsonEntryStegaRoot as g, initValRouteFromVal as i };

package/dist/{routeFromVal-8032f5f7.cjs.prod.js → routeFromVal-8ac2f984.cjs.prod.js}

@@ -3,10 +3,19 @@
 var createForOfIteratorHelper = require('./createForOfIteratorHelper-d4afcad8.cjs.prod.js');
 var objectSpread2 = require('./objectSpread2-13f847a9.cjs.prod.js');
 var slicedToArray = require('./slicedToArray-ce613de6.cjs.prod.js');
-var _typeof = require('./typeof-16428c61.cjs.prod.js');
 var core = require('@valbuild/core');
 var internal = require('@valbuild/shared/internal');
 
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+
 /**
  * True when the module's schema is a `.jsonValues()` record/router — i.e. each
  * entry value is a lazily-loaded `c.json(() => import(...))` marker. Used by the
@@ -61,8 +70,8 @@ val) {
   if (val === null) {
     return null;
   }
-  if (_typeof._typeof(val) !== "object") {
-    console.error("Val: ".concat(methodName, " must be used with a Val Module that is a s.record().router(...) (details: expected type object, found ").concat(_typeof._typeof(val), " instead)."));
+  if (_typeof(val) !== "object") {
+    console.error("Val: ".concat(methodName, " must be used with a Val Module that is a s.record().router(...) (details: expected type object, found ").concat(_typeof(val), " instead)."));
     return null;
   }
   if (Array.isArray(val)) {
@@ -81,7 +90,7 @@ val) {
     console.error("Val: ".concat(methodName, " must be used with a Val Module that is a s.record().router(...) (details: router is not the Next.js App Router or External URL Page Router)."));
     return null;
   }
-  if (_typeof._typeof(resolvedParams) !== "object") {
+  if (_typeof(resolvedParams) !== "object") {
     console.error("Val: ".concat(methodName, " must be used with a Val Module that is a s.record().router(...) (details: params is not an object)."));
     return null;
   }
@@ -101,7 +110,7 @@ val) {
   var parsedPattern = internal.parseRoutePattern(pattern);
   var missingPatterns = [];
   var fullPathParts = [];
-  var missingParamKeys = _typeof._typeof(resolvedParams) === "object" && resolvedParams !== null && !Array.isArray(resolvedParams) ? objectSpread2._objectSpread2({}, resolvedParams) : {};
+  var missingParamKeys = _typeof(resolvedParams) === "object" && resolvedParams !== null && !Array.isArray(resolvedParams) ? objectSpread2._objectSpread2({}, resolvedParams) : {};
   var _iterator = createForOfIteratorHelper._createForOfIteratorHelper(parsedPattern !== null && parsedPattern !== void 0 ? parsedPattern : []),
     _step;
   try {
@@ -186,6 +195,7 @@ val) {
   return actualRoute;
 }
 
+exports._typeof = _typeof;
 exports.getJsonEntryStegaRoot = getJsonEntryStegaRoot;
 exports.getValRouteUrlFromVal = getValRouteUrlFromVal;
 exports.initValRouteFromVal = initValRouteFromVal;

package/dist/{routeFromVal-7df20dfe.cjs.dev.js → routeFromVal-b48a454a.cjs.dev.js}

@@ -3,10 +3,19 @@
 var createForOfIteratorHelper = require('./createForOfIteratorHelper-0445603c.cjs.dev.js');
 var objectSpread2 = require('./objectSpread2-58024783.cjs.dev.js');
 var slicedToArray = require('./slicedToArray-44036a76.cjs.dev.js');
-var _typeof = require('./typeof-b568f48f.cjs.dev.js');
 var core = require('@valbuild/core');
 var internal = require('@valbuild/shared/internal');
 
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+
 /**
  * True when the module's schema is a `.jsonValues()` record/router — i.e. each
  * entry value is a lazily-loaded `c.json(() => import(...))` marker. Used by the
@@ -61,8 +70,8 @@ val) {
   if (val === null) {
     return null;
   }
-  if (_typeof._typeof(val) !== "object") {
-    console.error("Val: ".concat(methodName, " must be used with a Val Module that is a s.record().router(...) (details: expected type object, found ").concat(_typeof._typeof(val), " instead)."));
+  if (_typeof(val) !== "object") {
+    console.error("Val: ".concat(methodName, " must be used with a Val Module that is a s.record().router(...) (details: expected type object, found ").concat(_typeof(val), " instead)."));
     return null;
   }
   if (Array.isArray(val)) {
@@ -81,7 +90,7 @@ val) {
     console.error("Val: ".concat(methodName, " must be used with a Val Module that is a s.record().router(...) (details: router is not the Next.js App Router or External URL Page Router)."));
     return null;
   }
-  if (_typeof._typeof(resolvedParams) !== "object") {
+  if (_typeof(resolvedParams) !== "object") {
     console.error("Val: ".concat(methodName, " must be used with a Val Module that is a s.record().router(...) (details: params is not an object)."));
     return null;
   }
@@ -101,7 +110,7 @@ val) {
   var parsedPattern = internal.parseRoutePattern(pattern);
   var missingPatterns = [];
   var fullPathParts = [];
-  var missingParamKeys = _typeof._typeof(resolvedParams) === "object" && resolvedParams !== null && !Array.isArray(resolvedParams) ? objectSpread2._objectSpread2({}, resolvedParams) : {};
+  var missingParamKeys = _typeof(resolvedParams) === "object" && resolvedParams !== null && !Array.isArray(resolvedParams) ? objectSpread2._objectSpread2({}, resolvedParams) : {};
   var _iterator = createForOfIteratorHelper._createForOfIteratorHelper(parsedPattern !== null && parsedPattern !== void 0 ? parsedPattern : []),
     _step;
   try {
@@ -186,6 +195,7 @@ val) {
   return actualRoute;
 }
 
+exports._typeof = _typeof;
 exports.getJsonEntryStegaRoot = getJsonEntryStegaRoot;
 exports.getValRouteUrlFromVal = getValRouteUrlFromVal;
 exports.initValRouteFromVal = initValRouteFromVal;

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

@@ -7,10 +7,10 @@ var objectSpread2 = require('./objectSpread2-58024783.cjs.dev.js');
 var core = require('@valbuild/core');
 var stega = require('@valbuild/react/stega');
 var internal = require('@valbuild/react/internal');
-var ValNextProvider = require('./ValNextProvider-f206d2ea.cjs.dev.js');
+var ValNextProvider = require('./ValNextProvider-016a494b.cjs.dev.js');
 var NextImage = require('next/image');
 var jsxRuntime = require('react/jsx-runtime');
-var ValApp = require('./ValApp-c1c3ef55.cjs.dev.js');
+var ValApp = require('./ValApp-2bdb460a.cjs.dev.js');
 var ValModulesClient = require('./ValModulesClient-4ecabf99.cjs.dev.js');
 var createForOfIteratorHelper = require('./createForOfIteratorHelper-0445603c.cjs.dev.js');
 require('./defineProperty-f90345d7.cjs.dev.js');

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

@@ -7,10 +7,10 @@ var objectSpread2 = require('./objectSpread2-13f847a9.cjs.prod.js');
 var core = require('@valbuild/core');
 var stega = require('@valbuild/react/stega');
 var internal = require('@valbuild/react/internal');
-var ValNextProvider = require('./ValNextProvider-bd3f89d3.cjs.prod.js');
+var ValNextProvider = require('./ValNextProvider-72d3561b.cjs.prod.js');
 var NextImage = require('next/image');
 var jsxRuntime = require('react/jsx-runtime');
-var ValApp = require('./ValApp-90c4171d.cjs.prod.js');
+var ValApp = require('./ValApp-17eb6e93.cjs.prod.js');
 var ValModulesClient = require('./ValModulesClient-10c0721c.cjs.prod.js');
 var createForOfIteratorHelper = require('./createForOfIteratorHelper-d4afcad8.cjs.prod.js');
 require('./defineProperty-8951f469.cjs.prod.js');