@valbuild/shared 0.146.4 → 0.147.0

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # @valbuild/shared
 
+## 0.147.0
+
+### Minor Changes
+
+- [#816](https://github.com/valbuild/val/pull/816) [`2f09cd5`](https://github.com/valbuild/val/commit/2f09cd5e2f4fc37f06917899f24f9ad2ee8d3a8b) Thanks [@freekh](https://github.com/freekh)! - Routers can give each route parameter a schema, and a URL can say which language a page is in.
+
+  - **`s.router(router, params, item)`** takes a schema per route parameter, by the name the route file gives it (`$slug`, `[slug]`, `{-$locale}`). Each key's parameters are validated against them, and a name the route does not have is a schema error.
+
+    ```ts
+    s.router(tanstackRouter, { locale: urlLocale, slug: s.string() }, item);
+    ```
+
+  - **`s.enum(...).locales({ ... })`** says which of the project's languages each value means, so `/nb/…` can mean `nb-NO`. The tags are checked against `locales.available` in the settings module, like `s.locale()`. On a nullable enum, a second argument names the language of a URL that leaves the segment out, which only a router parameter may use:
+
+    ```ts
+    const urlLocale = s
+      .enum("nb")
+      .nullable()
+      .locales({ nb: "nb-NO" }, { null: "en-US" });
+    ```
+
+    A router with a locale parameter makes each page a locale scope, so the Studio and validation know which language every page is in.
+
+  - **A route's language segment can no longer be forgotten.** In a project that declares `locales.available`, a page route with a `locale` or `lang` segment (`{-$locale}`, `[lang]`) whose module gives that parameter no schema is reported, saying what to add. Any schema answers it, so a `$lang` that is not a language is silenced with its own, e.g. `{ lang: s.enum("typescript", "python") }`. It is an ordinary validation error: the Studio still opens and `val validate` lists it, but a project that already has such a route will see it after upgrading, and it blocks publishing until the parameter has a schema.
+  - **The Studio's new-page form offers a language as a list.** A route parameter whose schema is a locale is picked from the project's languages, each named in its own language, with "no prefix" where the URL may leave the segment out. Other enum parameters get a list of their values, and every parameter's description is shown under it. The URL row previews what the choice puts there.
+  - **TanStack optional segments (`{-$param}`)** are now understood: route validation, `useValRoute` and the Studio's new-page form accept keys with and without the segment.
+
+- [#876](https://github.com/valbuild/val/pull/876) [`cb04e58`](https://github.com/valbuild/val/commit/cb04e586db1e3ffd20ec1fee744561b1c8f8cffd) Thanks [@freekh](https://github.com/freekh)! - Demo mode: run the Val Studio with no account and no backend (TanStack Start).
+
+  `<ValApp demo>` starts Val's own server in the visitor's browser tab, and the Studio talks to it there instead of to `/api/val`. Edits show up in the page as they are typed and are held in the tab's memory: nothing is sent anywhere, and a reload starts over. Images and videos can be uploaded too: a small service worker, served by `initValDemoServer()`, hands the upload and the unpublished files to the server in the tab, so an uploaded photo or video shows in the page with nothing leaving the browser. Uploads are capped by their size after encoding. Pair `<ValApp demo>` with `<ValProvider demo>` on the site and `initValDemoServer()` from the new `@valbuild/tanstack/demo` entry on the API route. In a demo the Studio opens with a guided tour, Publish explains what it would do instead of publishing, and Preview in a new tab is shown but disabled.
+
+  Also:
+
+  - `@valbuild/server/browser` is a new entry: Val's request handling, bundleable for a browser. The TypeScript compiler, which only publishing and history need, is loaded when they ask for it, so a browser bundle of the server is about 140 KB rather than 3.6 MB.
+  - `s.image({ encode })` now scales an image down in browsers that cannot write WebP (Safari), as a JPEG or PNG in the image's own format, instead of uploading it at full size.
+  - `GET /profiles` answers with no profiles, rather than an error, when edits are stored locally and no project is configured.
+
+### Patch Changes
+
+- [#876](https://github.com/valbuild/val/pull/876) [`cb04e58`](https://github.com/valbuild/val/commit/cb04e586db1e3ffd20ec1fee744561b1c8f8cffd) Thanks [@freekh](https://github.com/freekh)! - `s.image({ encode: { type: "webp" } })` now produces WebP in Safari too, including on iPhone and iPad.
+
+  Safari's canvas cannot write WebP, so the Studio used to fall back to a JPEG (or a PNG) there, or to the original file when `accept` allowed only WebP. Now it encodes those images with libwebp, compiled to WebAssembly, at the same quality and size as everywhere else. The encoder is downloaded only by a browser that needs it, once per page, from `content.val.build`, the same place the Studio's bundler is served from. Browsers that can already write WebP never download it. If it cannot be loaded, uploads still work: the image is scaled down as a JPEG or PNG as before, or the original is uploaded.
+
+  A deployment that cannot reach `content.val.build` can serve the encoder itself and point the Studio at it with `globalThis.__VAL_WEBP_SIMD_WASM_URL__` and `globalThis.__VAL_WEBP_WASM_URL__`, the same way `__VAL_ROLLDOWN_WASM_URL__` works for the bundler.
+
+- Updated dependencies [[`2f09cd5`](https://github.com/valbuild/val/commit/2f09cd5e2f4fc37f06917899f24f9ad2ee8d3a8b)]:
+  - @valbuild/core@0.147.0
+
 ## 0.146.4
 
 ### Patch Changes

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var getSitemapTree = require('../../dist/getSitemapTree-95b00d3f.cjs.dev.js');
+var getSitemapTree = require('../../dist/getSitemapTree-f6254b32.cjs.dev.js');
 require('@valbuild/core');
 
 
@@ -14,6 +14,7 @@ exports.VAL_CANVAS_MESSAGE = getSitemapTree.VAL_CANVAS_MESSAGE;
 exports.VAL_CANVAS_PARAM = getSitemapTree.VAL_CANVAS_PARAM;
 exports.VAL_CONFIG_SESSION_STORAGE_KEY = getSitemapTree.VAL_CONFIG_SESSION_STORAGE_KEY;
 exports.VAL_THEME_SESSION_STORAGE_KEY = getSitemapTree.VAL_THEME_SESSION_STORAGE_KEY;
+exports.formatRoutePattern = getSitemapTree.formatRoutePattern;
 exports.getNextAppRouterSourceFolder = getSitemapTree.getNextAppRouterSourceFolder;
 exports.getPageRouterSitemapTree = getSitemapTree.getPageRouterSitemapTree;
 exports.getPageRouterSourceFolder = getSitemapTree.getPageRouterSourceFolder;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var getSitemapTree = require('../../dist/getSitemapTree-b8dce0e2.cjs.prod.js');
+var getSitemapTree = require('../../dist/getSitemapTree-109be3b8.cjs.prod.js');
 require('@valbuild/core');
 
 
@@ -14,6 +14,7 @@ exports.VAL_CANVAS_MESSAGE = getSitemapTree.VAL_CANVAS_MESSAGE;
 exports.VAL_CANVAS_PARAM = getSitemapTree.VAL_CANVAS_PARAM;
 exports.VAL_CONFIG_SESSION_STORAGE_KEY = getSitemapTree.VAL_CONFIG_SESSION_STORAGE_KEY;
 exports.VAL_THEME_SESSION_STORAGE_KEY = getSitemapTree.VAL_THEME_SESSION_STORAGE_KEY;
+exports.formatRoutePattern = getSitemapTree.formatRoutePattern;
 exports.getNextAppRouterSourceFolder = getSitemapTree.getNextAppRouterSourceFolder;
 exports.getPageRouterSitemapTree = getSitemapTree.getPageRouterSitemapTree;
 exports.getPageRouterSourceFolder = getSitemapTree.getPageRouterSourceFolder;

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

@@ -1,2 +1,2 @@
-export { D as DEFAULT_CANVAS_SELECTION, e as DEFAULT_CANVAS_SELECTION_SOFT, b as VAL_AI_SESSION_STORAGE_KEY, d as VAL_CANVAS_MESSAGE, c as VAL_CANVAS_PARAM, V as VAL_CONFIG_SESSION_STORAGE_KEY, a as VAL_THEME_SESSION_STORAGE_KEY, h as getNextAppRouterSourceFolder, m as getPageRouterSitemapTree, k as getPageRouterSourceFolder, n as getPatternFromModuleFilePath, j as getTanStackRouterSourceFolder, l as isTanStackRoutesFolder, g as isValCanvasFrame, i as isValCanvasPageMessage, f as isValCanvasStudioMessage, p as parseRoutePattern, w as withValCanvasParam } from '../../dist/getSitemapTree-e65acefe.esm.js';
+export { D as DEFAULT_CANVAS_SELECTION, e as DEFAULT_CANVAS_SELECTION_SOFT, b as VAL_AI_SESSION_STORAGE_KEY, d as VAL_CANVAS_MESSAGE, c as VAL_CANVAS_PARAM, V as VAL_CONFIG_SESSION_STORAGE_KEY, a as VAL_THEME_SESSION_STORAGE_KEY, h as formatRoutePattern, j as getNextAppRouterSourceFolder, n as getPageRouterSitemapTree, l as getPageRouterSourceFolder, o as getPatternFromModuleFilePath, k as getTanStackRouterSourceFolder, m as isTanStackRoutesFolder, g as isValCanvasFrame, i as isValCanvasPageMessage, f as isValCanvasStudioMessage, p as parseRoutePattern, w as withValCanvasParam } from '../../dist/getSitemapTree-c70ea145.esm.js';
 import '@valbuild/core';

package/dist/declarations/src/internal/ValClient.d.ts

@@ -1,4 +1,14 @@
 import { Api, ClientOf } from "./ApiRoutes.js";
 import { SharedValConfig } from "./SharedValConfig.js";
 export type ValClient = ClientOf<Api>;
-export declare const createValClient: (host: string, config: SharedValConfig | null) => ValClient;
+export declare const createValClient: (host: string, config: SharedValConfig | null, // We want to use this in the future
+options?: {
+    /**
+     * What sends a request. The network's `fetch` unless given.
+     *
+     * The demo passes one that hands the `Request` to Val's server running in
+     * the same tab (`@valbuild/server/browser`), so everything on both sides
+     * of the call is the real thing and only the network is gone.
+     */
+    fetch?: (input: string, init: RequestInit) => Promise<Response>;
+}) => ValClient;

package/dist/declarations/src/internal/demo.d.ts

@@ -0,0 +1,31 @@
+/**
+ * A Val demo, as the page hands it to the Studio.
+ *
+ * In a demo the Studio talks to Val's own server running in the same tab
+ * (`@valbuild/server/browser`) instead of to an API route, and the page that
+ * starts that server is the app's (`<ValApp demo>`) while the Studio is a
+ * separate bundle loaded by a script tag. A window property is how the two
+ * meet, the same way `window.__VAL_MODULES__` hands the Studio the project's
+ * modules. See `docs/plans/demo-mode.md`.
+ */
+export type ValDemoRuntime = {
+    /**
+     * Sends a Studio request to the in-tab server. Passed to `createValClient`.
+     *
+     * The server holds its edits in memory, so starting the demo over is
+     * reloading the page: there is nothing stored to clear.
+     */
+    fetch: (input: string, init: RequestInit) => Promise<Response>;
+    /**
+     * Whether uploads work here. They need the demo's service worker, which
+     * relays the upload and the unpublished files to this tab's server, and a
+     * service worker needs a secure context. Where it cannot run the Studio
+     * refuses uploads before sending anything, and says why.
+     */
+    uploads: boolean;
+};
+declare global {
+    var __VAL_DEMO__: ValDemoRuntime | undefined;
+}
+/** The demo this page was started with, or null outside a demo. */
+export declare function getValDemo(): ValDemoRuntime | null;

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

@@ -3,6 +3,7 @@ export * from "./richtext/richTextImages.js";
 export * from "./server/types.js";
 export * from "./server/requestScopedMemo.js";
 export * from "./ValClient.js";
+export * from "./demo.js";
 export * from "./ValUrls.js";
 export * from "./ApiRoutes.js";
 export * from "./schema/compatibility.js";

package/dist/declarations/src/internal/localeAt.d.ts

@@ -1,11 +1,12 @@
-import { type SourcePath } from "@valbuild/core";
+import { type SerializedEnumSchema, type SerializedSchema, type SourcePath } from "@valbuild/core";
 import { type SchemaSourceSnapshot } from "./resolveSchemaSourceFixes.js";
 /**
  * Which of the project's languages governs a path, or `null` for none.
  *
  * THE question the whole feature turns on. A locale scope is a subtree in one
  * language, and three things open one: a `locale` field on an object, a record
- * keyed by `s.locale()`, and a locale segment in a segmented key. Once this can
+ * keyed by `s.locale()`, and a locale parameter in a router's key
+ * (`s.router(router, { locale: … }, item)`, where the URL names the language). Once this can
  * be answered from the schema and the source alone, everything downstream falls
  * out of it — the Studio's locale filter, deep links, `<html lang>`, and knowing
  * what to translate from and into.
@@ -17,3 +18,29 @@ import { type SchemaSourceSnapshot } from "./resolveSchemaSourceFixes.js";
  * in most projects, and for every project that has not declared any languages.
  */
 export declare function localeAt(path: SourcePath, snapshot: SchemaSourceSnapshot): string | null;
+/**
+ * The language a locale schema's value MEANS, or `null` if it means none of
+ * the project's.
+ *
+ * `s.locale()` stores the tag itself. An enum with `.locales(...)` stores a
+ * value that stands for one — `nb` for `nb-NO` — and, on a router parameter,
+ * `null` for a URL that left the segment out, which `{ null: tag }` names.
+ * Anything else is not a locale and means nothing here.
+ *
+ * Callers reading a FIELD pass only strings: a field that holds `null` has no
+ * language, whatever its schema says about URLs.
+ */
+export declare function localeMeantBy(schema: SerializedSchema, value: string | null, available: readonly string[]): string | null;
+/**
+ * The tag an enum's `.locales(...)` maps a value to, as written — `null` is
+ * the `{ null }` mapping — or `undefined` where it maps none.
+ *
+ * An own property: a plain object inherits `toString` and the rest, and an
+ * enum value is allowed to be spelled like one.
+ */
+export declare function enumLocaleTag(schema: SerializedEnumSchema, value: string | null): string | undefined;
+/**
+ * Whether a schema is a locale: `s.locale()`, or an enum `.locales(...)` made
+ * one.
+ */
+export declare function isLocaleSchema(schema: SerializedSchema): boolean;

package/dist/declarations/src/internal/media/encodeImageDecisions.d.ts

@@ -65,6 +65,53 @@ export declare function fitWithin(width: number, height: number, maxWidth: numbe
 export declare function isMimeTypeAccepted(mimeType: string, accept: string | undefined): boolean;
 /** Formats left alone: the lossy list, plus the target type when it already fits. */
 export declare function isSkippedSource(sourceMimeType: string, targetMimeType: string, needsDownscale: boolean): boolean;
+/**
+ * The types the Studio can write with WebAssembly when the canvas cannot.
+ *
+ * libwebp, compiled to WebAssembly (`@jsquash/webp`, loaded by
+ * `packages/ui/spa/utils/webpWasm.ts`). One entry because `encode` has one
+ * `type`; a second type is a second encoder to host, not a second string here.
+ */
+export declare const WASM_ENCODED_MIME_TYPES: string[];
+/**
+ * Whether to encode the canvas's pixels with WebAssembly, given what the
+ * canvas's own encoder handed back.
+ *
+ * `canvas.toBlob` answers a type it cannot write with a PNG instead of an error,
+ * and Safari -- the browser people take their photos in -- cannot write WebP.
+ * The pixels on that canvas are already decoded, oriented and scaled, so the
+ * only thing missing is the encoder, and libwebp in WebAssembly is that.
+ *
+ * Only then, and that is what keeps the WebAssembly lazy: a browser whose
+ * canvas wrote the type is never asked to download an encoder, even when its
+ * WebP then loses to the original on size -- a second encoder of the same
+ * format would lose for the same reason.
+ *
+ * `null` -- no blob at all -- is not "cannot write this type" either. It is a
+ * canvas that failed to serialize anything, under memory pressure for instance,
+ * and says nothing about WebP: a Chromium tab that hits it is still a browser
+ * that writes WebP, and must not start downloading an encoder because of it.
+ */
+export declare function shouldEncodeWithWasm(input: {
+    targetMimeType: string;
+    canvasOutputType: string | null;
+}): boolean;
+/**
+ * What to scale an image down to when nothing could write the type asked for:
+ * the source's own format, when it is one every canvas can write.
+ *
+ * The second fallback, after {@link shouldEncodeWithWasm}: it is what a browser
+ * whose canvas cannot write WebP gets when the WebAssembly encoder could not be
+ * loaded either (offline, a blocked host, a failed instantiation). Without it,
+ * `chooseEncoded` would rightly refuse the canvas's PNG and upload the original
+ * -- every photo at the camera's full size, the one case `maxWidth` exists
+ * for. Scaling it down as a JPEG keeps the half of `encode` this browser can do.
+ *
+ * Only when a downscale is needed: re-encoding a JPEG that already fits, as a
+ * JPEG, is a second generation of loss for a few percent. And never into a
+ * type `accept` refuses, for the reason `isMimeTypeAccepted` gives.
+ */
+export declare function fallbackMimeType(sourceMimeType: string, needsDownscale: boolean, accept: string | undefined): string | null;
 /**
  * Whether to upload what the encoder produced, or the file that was picked.
  *

package/dist/declarations/src/internal/parseRoutePattern.d.ts

@@ -11,3 +11,9 @@ export type RoutePattern = {
     optional: boolean;
 };
 export declare function parseRoutePattern(pattern: string): RoutePattern[];
+/**
+ * A parsed pattern written back as segments: the inverse of
+ * {@link parseRoutePattern}, in the vocabulary core's `matchRoutePattern`
+ * reads.
+ */
+export declare function formatRoutePattern(pattern: RoutePattern[]): string[];

package/dist/{getSitemapTree-95b00d3f.cjs.dev.js → getSitemapTree-109be3b8.cjs.prod.js}

@@ -193,6 +193,21 @@ function parseRoutePattern(pattern) {
   });
 }
 
+/**
+ * A parsed pattern written back as segments: the inverse of
+ * {@link parseRoutePattern}, in the vocabulary core's `matchRoutePattern`
+ * reads.
+ */
+function formatRoutePattern(pattern) {
+  return pattern.map(function (part) {
+    if (part.type === "literal") {
+      return part.name;
+    }
+    var inner = part.type === "string-param" ? part.paramName : "...".concat(part.paramName);
+    return part.optional ? "[[".concat(inner, "]]") : "[".concat(inner, "]");
+  });
+}
+
 function getNextAppRouterSourceFolder(moduleFilePath) {
   if (moduleFilePath.startsWith("/app")) {
     return "/app";
@@ -509,6 +524,7 @@ exports._objectSpread2 = _objectSpread2;
 exports._toPropertyKey = _toPropertyKey;
 exports._typeof = _typeof;
 exports._unsupportedIterableToArray = _unsupportedIterableToArray;
+exports.formatRoutePattern = formatRoutePattern;
 exports.getNextAppRouterSourceFolder = getNextAppRouterSourceFolder;
 exports.getPageRouterSitemapTree = getPageRouterSitemapTree;
 exports.getPageRouterSourceFolder = getPageRouterSourceFolder;

package/dist/{getSitemapTree-e65acefe.esm.js → getSitemapTree-c70ea145.esm.js}

@@ -191,6 +191,21 @@ function parseRoutePattern(pattern) {
   });
 }
 
+/**
+ * A parsed pattern written back as segments: the inverse of
+ * {@link parseRoutePattern}, in the vocabulary core's `matchRoutePattern`
+ * reads.
+ */
+function formatRoutePattern(pattern) {
+  return pattern.map(function (part) {
+    if (part.type === "literal") {
+      return part.name;
+    }
+    var inner = part.type === "string-param" ? part.paramName : "...".concat(part.paramName);
+    return part.optional ? "[[".concat(inner, "]]") : "[".concat(inner, "]");
+  });
+}
+
 function getNextAppRouterSourceFolder(moduleFilePath) {
   if (moduleFilePath.startsWith("/app")) {
     return "/app";
@@ -493,4 +508,4 @@ function getPatternFromModuleFilePath(moduleFilePath, srcFolder) {
   .replace("/page.val.ts", "").replace("/page.val.js", "");
 }
 
-export { DEFAULT_CANVAS_SELECTION as D, VAL_CONFIG_SESSION_STORAGE_KEY as V, _createForOfIteratorHelper as _, VAL_THEME_SESSION_STORAGE_KEY as a, VAL_AI_SESSION_STORAGE_KEY as b, VAL_CANVAS_PARAM as c, VAL_CANVAS_MESSAGE as d, DEFAULT_CANVAS_SELECTION_SOFT as e, isValCanvasStudioMessage as f, isValCanvasFrame as g, getNextAppRouterSourceFolder as h, isValCanvasPageMessage as i, getTanStackRouterSourceFolder as j, getPageRouterSourceFolder as k, isTanStackRoutesFolder as l, getPageRouterSitemapTree as m, getPatternFromModuleFilePath as n, _objectSpread2 as o, parseRoutePattern as p, _arrayLikeToArray as q, _unsupportedIterableToArray as r, _typeof as s, _defineProperty as t, _toPropertyKey as u, withValCanvasParam as w };
+export { DEFAULT_CANVAS_SELECTION as D, VAL_CONFIG_SESSION_STORAGE_KEY as V, _createForOfIteratorHelper as _, VAL_THEME_SESSION_STORAGE_KEY as a, VAL_AI_SESSION_STORAGE_KEY as b, VAL_CANVAS_PARAM as c, VAL_CANVAS_MESSAGE as d, DEFAULT_CANVAS_SELECTION_SOFT as e, isValCanvasStudioMessage as f, isValCanvasFrame as g, formatRoutePattern as h, isValCanvasPageMessage as i, getNextAppRouterSourceFolder as j, getTanStackRouterSourceFolder as k, getPageRouterSourceFolder as l, isTanStackRoutesFolder as m, getPageRouterSitemapTree as n, getPatternFromModuleFilePath as o, parseRoutePattern as p, _objectSpread2 as q, _arrayLikeToArray as r, _unsupportedIterableToArray as s, _typeof as t, _defineProperty as u, _toPropertyKey as v, withValCanvasParam as w };

package/dist/{getSitemapTree-b8dce0e2.cjs.prod.js → getSitemapTree-f6254b32.cjs.dev.js}

@@ -193,6 +193,21 @@ function parseRoutePattern(pattern) {
   });
 }
 
+/**
+ * A parsed pattern written back as segments: the inverse of
+ * {@link parseRoutePattern}, in the vocabulary core's `matchRoutePattern`
+ * reads.
+ */
+function formatRoutePattern(pattern) {
+  return pattern.map(function (part) {
+    if (part.type === "literal") {
+      return part.name;
+    }
+    var inner = part.type === "string-param" ? part.paramName : "...".concat(part.paramName);
+    return part.optional ? "[[".concat(inner, "]]") : "[".concat(inner, "]");
+  });
+}
+
 function getNextAppRouterSourceFolder(moduleFilePath) {
   if (moduleFilePath.startsWith("/app")) {
     return "/app";
@@ -509,6 +524,7 @@ exports._objectSpread2 = _objectSpread2;
 exports._toPropertyKey = _toPropertyKey;
 exports._typeof = _typeof;
 exports._unsupportedIterableToArray = _unsupportedIterableToArray;
+exports.formatRoutePattern = formatRoutePattern;
 exports.getNextAppRouterSourceFolder = getNextAppRouterSourceFolder;
 exports.getPageRouterSitemapTree = getPageRouterSitemapTree;
 exports.getPageRouterSourceFolder = getPageRouterSourceFolder;