@valancex/common 0.12.0 → 0.14.0

package/dist/record.d.ts

@@ -0,0 +1,4 @@
+import type * as Valance from "@valancex/valance";
+import type { Redaction, SessionRecorder } from "@valancex/valance/replay";
+/** A recorder for the page of `program`, posting to the development server's `/__vlx/record`; it writes the last tree when the page is hidden. */
+export declare const recording: (program: Valance.Program, redact?: Redaction) => SessionRecorder;

package/dist/record.js

@@ -0,0 +1,14 @@
+import { postTo, recorder } from "@valancex/valance/replay";
+/** A recorder for the page of `program`, posting to the development server's `/__vlx/record`; it writes the last tree when the page is hidden. */
+export const recording = (program, redact) => {
+    const model = program.model;
+    const { root, templates } = program;
+    const record = recorder({
+        write: postTo("/__vlx/record"),
+        warn: (message) => console.warn(`vlx dev --record: ${message}`),
+        ...(redact === undefined ? {} : { redact }),
+        programs: () => ({ root, templates, model: typeof model === "string" ? model : JSON.stringify(model) }),
+    });
+    addEventListener("pagehide", () => void record.flush());
+    return record;
+};

package/dist/scope.d.ts

@@ -1,5 +1,5 @@
 import { Schema } from "effect";
-import type { TitleParts, Viewport } from "./index.js";
+import type { ColorScheme, TitleParts, Viewport } from "./index.js";
 import type { Content, Page } from "./model.js";
 export declare const FrameScope: Schema.Struct<{
     /** The application's name (`valance.json`). */
@@ -32,6 +32,12 @@ export declare const FrameScope: Schema.Struct<{
     }>>;
     /** How much room the page has: `"compact"`, `"medium"` or `"expanded"` (see `Viewport`). `{#if viewport == "compact"}` chooses a layout for a phone. The server renders `expanded`; the browser corrects it after it starts. */
     viewport: Schema.Literal<["compact", "medium", "expanded"]>;
+    /** The colors the person's system asks for: `"light"` or `"dark"`. `theme={theme == "system" ? colorScheme : theme}` lets an application offer "follow the system" beside its own choices. The server renders `light`; the page corrects it after it starts. */
+    colorScheme: Schema.Literal<["light", "dark"]>;
+    /** Whether there is a page before this one in the trail (`back()` goes to it). `disabled={!canGoBack}` greys a Back button. */
+    canGoBack: typeof Schema.Boolean;
+    /** Whether there is a page after this one in the trail (`forward()` goes to it), as there is after a `back()`. */
+    canGoForward: typeof Schema.Boolean;
     /** The page's body. Draw it with `<blocks items={blocks} />`, or draw each block yourself. */
     blocks: Schema.Array$<Schema.Struct<{
         id: typeof Schema.String;
@@ -80,4 +86,7 @@ export declare const pageAt: (content: Content, path: string) => Page | undefine
  * (the home page, usually) is that name alone. The author's `title` function may replace the parts; the caller cleans the result (control and direction-override characters out, length limited).
  */
 export declare const documentTitle: (content: Content, page: Page | undefined, parts?: TitleParts) => string;
-export declare const frame: (content: Content, path: string, viewport?: Viewport) => typeof FrameScope.Type;
+export declare const frame: (content: Content, path: string, viewport?: Viewport, colorScheme?: ColorScheme, trail?: {
+    readonly canGoBack: boolean;
+    readonly canGoForward: boolean;
+}) => typeof FrameScope.Type;

package/dist/scope.js

@@ -38,6 +38,12 @@ export const FrameScope = Schema.Struct({
     toc: Schema.Array(Schema.Struct({ id: Schema.String, href: Schema.String, label: Schema.String, level: Schema.Number })),
     /** How much room the page has: `"compact"`, `"medium"` or `"expanded"` (see `Viewport`). `{#if viewport == "compact"}` chooses a layout for a phone. The server renders `expanded`; the browser corrects it after it starts. */
     viewport: Schema.Literal("compact", "medium", "expanded"),
+    /** The colors the person's system asks for: `"light"` or `"dark"`. `theme={theme == "system" ? colorScheme : theme}` lets an application offer "follow the system" beside its own choices. The server renders `light`; the page corrects it after it starts. */
+    colorScheme: Schema.Literal("light", "dark"),
+    /** Whether there is a page before this one in the trail (`back()` goes to it). `disabled={!canGoBack}` greys a Back button. */
+    canGoBack: Schema.Boolean,
+    /** Whether there is a page after this one in the trail (`forward()` goes to it), as there is after a `back()`. */
+    canGoForward: Schema.Boolean,
     /** The page's body. Draw it with `<blocks items={blocks} />`, or draw each block yourself. */
     blocks: Schema.Array(BlockView),
     /** Neighbours in navigation order; `href` is empty when there is none. */
@@ -103,7 +109,7 @@ export const documentTitle = (content, page, parts = {}) => {
     const body = shown === app ? shown : content.site.title.replaceAll("{page}", shown).replaceAll("{site}", app);
     return parts.status === undefined || parts.status === "" ? body : `(${parts.status}) ${body}`;
 };
-export const frame = (content, path, viewport = "expanded") => {
+export const frame = (content, path, viewport = "expanded", colorScheme = "light", trail = { canGoBack: false, canGoForward: false }) => {
     const page = pageAt(content, path);
     const shown = page ?? notFoundPage(content);
     const at = page === undefined ? -1 : content.pages.indexOf(page);
@@ -120,6 +126,9 @@ export const frame = (content, path, viewport = "expanded") => {
     return {
         site: content.site.name,
         viewport,
+        colorScheme,
+        canGoBack: trail.canGoBack,
+        canGoForward: trail.canGoForward,
         home: withBase(content.site.base, "/"),
         title: shown.title,
         description: shown.description,

package/dist/server.js

@@ -1,7 +1,9 @@
 import { renderHead } from "@valancex/valance/web/plugin";
 import { renderToHtml } from "@valancex/valance/web/server";
 import { Effect } from "effect";
-import { application, plugin, stateFor } from "./app.js";
+import { application, stateFor } from "./app.js";
+import { earlyHead } from "./early.js";
+import { plugin } from "./web-app.js";
 import { routes } from "./routes.js";
 export { routes };
 const safe = (json) => json.replaceAll("<", "\\u003c").replaceAll("\u2028", "\\u2028").replaceAll("\u2029", "\\u2029");
@@ -14,7 +16,7 @@ export const createRenderer = ({ content, program, author }) => {
         const boot = safe(JSON.stringify({ state: served.state, built }));
         return {
             status: table.known(pathname) ? 200 : 404,
-            html: `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">${renderHead(served.head)}</head><body><div id="app">${served.html}</div><script id="valance-boot" type="application/json">${boot}</script><script type="module" src="${built.script}"></script></body></html>`,
+            html: `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">${built.wasm === undefined ? "" : `<link rel="modulepreload" href="${built.script}">`}${earlyHead(built)}${renderHead(served.head)}</head><body><div id="app" data-vlx="starting">${served.html}</div><script id="valance-boot" type="application/json">${boot}</script><script type="module" src="${built.script}"></script></body></html>`,
         };
     };
 };

package/dist/store-file.d.ts

@@ -0,0 +1,4 @@
+import type { StoreClient } from "./store.js";
+/** Where an application keeps its data on this machine: `$XDG_DATA_HOME` (else `~/.local/share`) on Linux, `%APPDATA%` on Windows, `~/Library/Application Support` on macOS, then the application's name. */
+export declare const userDataDir: (name: string, env?: NodeJS.ProcessEnv, platform?: NodeJS.Platform) => string;
+export declare const fileStore: (dir: string) => StoreClient;

package/dist/store-file.js

@@ -0,0 +1,49 @@
+// The desktop's store: one JSON file per key in the user's data directory for the application. Node only (the page never loads this). A write goes to a temporary file and is renamed over the
+// real one, so a crash leaves the old value or the new one, never half of one.
+import { Effect } from "effect";
+import { mkdirSync, readFileSync, renameSync, rmSync, writeFileSync } from "node:fs";
+import { homedir } from "node:os";
+import { join } from "node:path";
+import { checkKey, decodeStored, encodeStored, MAX_STORED, StoreError } from "./store.js";
+/** Where an application keeps its data on this machine: `$XDG_DATA_HOME` (else `~/.local/share`) on Linux, `%APPDATA%` on Windows, `~/Library/Application Support` on macOS, then the application's name. */
+export const userDataDir = (name, env = process.env, platform = process.platform) => {
+    const app = name.replace(/[^\w.-]+/g, "-").replace(/^[.-]+/, "") || "app";
+    const base = platform === "win32"
+        ? (env["APPDATA"] ?? join(homedir(), "AppData", "Roaming"))
+        : platform === "darwin"
+            ? join(homedir(), "Library", "Application Support")
+            : (env["XDG_DATA_HOME"] ?? join(homedir(), ".local", "share"));
+    return join(base, app);
+};
+const unavailable = () => new StoreError("Unavailable", "the data directory refused");
+export const fileStore = (dir) => {
+    const file = (key) => join(dir, `${key}.json`);
+    return {
+        get: (key, schema) => Effect.flatMap(checkKey(key), (safe) => Effect.flatMap(Effect.try({
+            try: () => {
+                try {
+                    return readFileSync(file(safe), "utf8");
+                }
+                catch (error) {
+                    if (error.code === "ENOENT") {
+                        return null;
+                    }
+                    throw error;
+                }
+            },
+            catch: unavailable,
+        }), (text) => (text === null ? Effect.succeed(undefined) : decodeStored(text, schema)))),
+        set: (key, schema, value) => Effect.flatMap(checkKey(key), (safe) => Effect.flatMap(encodeStored(value, schema), (text) => text.length > MAX_STORED
+            ? Effect.fail(new StoreError("Full", "the value is larger than a store holds"))
+            : Effect.try({
+                try: () => {
+                    mkdirSync(dir, { recursive: true });
+                    const temporary = `${file(safe)}.${process.pid}.tmp`;
+                    writeFileSync(temporary, text);
+                    renameSync(temporary, file(safe));
+                },
+                catch: unavailable,
+            }))),
+        remove: (key) => Effect.flatMap(checkKey(key), (safe) => Effect.try({ try: () => rmSync(file(safe), { force: true }), catch: unavailable })),
+    };
+};

package/dist/store.d.ts

@@ -0,0 +1,40 @@
+import * as Nexus from "@valancex/nexus";
+import { Effect, Schema } from "effect";
+/** Why a store did not do what was asked, by kind. */
+export declare class StoreError extends Error {
+    readonly kind: "Unavailable" | "Full" | "Decode" | "Unsafe";
+    readonly _tag = "StoreError";
+    constructor(kind: "Unavailable" | "Full" | "Decode" | "Unsafe", message: string);
+}
+export interface StoreClient {
+    /** The value stored under `key`, decoded by `schema`; `undefined` when nothing is stored. */
+    readonly get: <A>(key: string, schema: Schema.Schema<A, any, never>) => Effect.Effect<A | undefined, StoreError>;
+    /** Stores `value` under `key`, encoded by `schema`. */
+    readonly set: <A>(key: string, schema: Schema.Schema<A, any, never>, value: A) => Effect.Effect<void, StoreError>;
+    /** Forgets `key`. */
+    readonly remove: (key: string) => Effect.Effect<void, StoreError>;
+}
+/** The capability: ask for it in a command (`Store.get`), and the platform says whether it has one. */
+export declare const Store: Nexus.Capability.Capability<StoreClient>;
+type Needs = Nexus.Capability.EnvironmentShape;
+type Failure = StoreError | Nexus.Capability.CapabilityUnavailableError;
+export declare const get: <A>(key: string, schema: Schema.Schema<A, any, never>) => Effect.Effect<A | undefined, Failure, Needs>;
+export declare const set: <A>(key: string, schema: Schema.Schema<A, any, never>, value: A) => Effect.Effect<void, Failure, Needs>;
+export declare const remove: (key: string) => Effect.Effect<void, Failure, Needs>;
+export declare const checkKey: (key: string) => Effect.Effect<string, StoreError>;
+/** Decodes stored text with `schema`: text that is not JSON, or does not fit, is `Decode`. */
+export declare const decodeStored: <A>(text: string, schema: Schema.Schema<A, any, never>) => Effect.Effect<A, StoreError>;
+export declare const encodeStored: <A>(value: A, schema: Schema.Schema<A, any, never>) => Effect.Effect<string, StoreError>;
+/** The part of `Storage` the web's store uses (so a test supplies its own). */
+export interface TextStorage {
+    readonly getItem: (key: string) => string | null;
+    readonly setItem: (key: string, value: string) => void;
+    readonly removeItem: (key: string) => void;
+}
+/** The longest value written, in characters: a page's storage is small and shared. */
+export declare const MAX_STORED = 1000000;
+/** The web's store: the page's `localStorage`, under `valance:<namespace>:<key>`. Where storage is off (a private window, blocked site data) every call is `Unavailable`, and the application runs without it. */
+export declare const webStore: (namespace: string, storage?: TextStorage) => StoreClient;
+/** The platform that supplies `store` as the `Store` capability. */
+export declare const storePlatform: (store: StoreClient) => Nexus.Application.Platform;
+export {};

package/dist/store.js

@@ -0,0 +1,60 @@
+// What an application keeps between runs. NEXUS and VALANCE hold no storage (their rule): what an application needs from where it runs is a *capability*, a typed contract the application states
+// and the platform supplies. This is that contract for a small keyed store, and the web's implementation of it (the page's `localStorage`). The desktop's, a file in the user's data directory,
+// is `./store-file` (it needs Node, so the page never loads it).
+//
+//   const saved = yield* Store.get("items", Items);        // Effect<readonly Item[] | undefined, StoreError, the Store capability>
+//   yield* Store.set("items", Items, next);
+//
+// A value goes in as JSON and comes out *decoded by the Schema the caller states*: what is stored by an older version of the application, or by anything else, and no longer fits, is not a
+// value: it is `Decode`, and nothing wrong reaches state. A failure says what kind it was and never what it carried.
+import * as Nexus from "@valancex/nexus";
+import { Effect, Schema } from "effect";
+/** Why a store did not do what was asked, by kind. */
+export class StoreError extends Error {
+    kind;
+    _tag = "StoreError";
+    constructor(kind, message) {
+        super(message);
+        this.kind = kind;
+        this.name = "StoreError";
+    }
+}
+/** The capability: ask for it in a command (`Store.get`), and the platform says whether it has one. */
+export const Store = Nexus.Capability.define("valance/store");
+const client = Nexus.Capability.require(Store);
+export const get = (key, schema) => Effect.flatMap(client, (store) => store.get(key, schema));
+export const set = (key, schema, value) => Effect.flatMap(client, (store) => store.set(key, schema, value));
+export const remove = (key) => Effect.flatMap(client, (store) => store.remove(key));
+/** A key is a word: letters, digits, `.`, `_` and `-`, so it can never name anything but the entry it is. */
+const SAFE_KEY = /^[A-Za-z0-9][A-Za-z0-9._-]{0,79}$/;
+export const checkKey = (key) => SAFE_KEY.test(key) ? Effect.succeed(key) : Effect.fail(new StoreError("Unsafe", `"${key}" cannot be a store key: use letters, digits, . _ - (at most 80 characters)`));
+/** Decodes stored text with `schema`: text that is not JSON, or does not fit, is `Decode`. */
+export const decodeStored = (text, schema) => Effect.try({ try: () => JSON.parse(text), catch: () => new StoreError("Decode", "what is stored is not JSON") }).pipe(Effect.flatMap((json) => Schema.decodeUnknown(schema)(json).pipe(Effect.mapError(() => new StoreError("Decode", "what is stored no longer fits its type")))));
+export const encodeStored = (value, schema) => Schema.encode(schema)(value).pipe(Effect.mapError(() => new StoreError("Decode", "the value does not fit its type")), Effect.map((encoded) => JSON.stringify(encoded)));
+/** The longest value written, in characters: a page's storage is small and shared. */
+export const MAX_STORED = 1_000_000;
+/** The web's store: the page's `localStorage`, under `valance:<namespace>:<key>`. Where storage is off (a private window, blocked site data) every call is `Unavailable`, and the application runs without it. */
+export const webStore = (namespace, storage) => {
+    const prefix = `valance:${namespace}:`;
+    const area = () => Effect.try({
+        try: () => {
+            const found = storage ?? globalThis.localStorage;
+            if (found === undefined) {
+                throw new Error("no storage");
+            }
+            return found;
+        },
+        catch: () => new StoreError("Unavailable", "this page has no storage"),
+    });
+    const guarded = (run) => Effect.flatMap(area(), (found) => Effect.try({
+        try: () => run(found),
+        catch: (error) => new StoreError(error instanceof Error && error.name === "QuotaExceededError" ? "Full" : "Unavailable", "the page's storage refused"),
+    }));
+    return {
+        get: (key, schema) => Effect.flatMap(checkKey(key), (safe) => Effect.flatMap(guarded((found) => found.getItem(`${prefix}${safe}`)), (text) => (text === null ? Effect.succeed(undefined) : decodeStored(text, schema)))),
+        set: (key, schema, value) => Effect.flatMap(checkKey(key), (safe) => Effect.flatMap(encodeStored(value, schema), (text) => text.length > MAX_STORED ? Effect.fail(new StoreError("Full", "the value is larger than a store holds")) : guarded((found) => found.setItem(`${prefix}${safe}`, text)))),
+        remove: (key) => Effect.flatMap(checkKey(key), (safe) => guarded((found) => found.removeItem(`${prefix}${safe}`))),
+    };
+};
+/** The platform that supplies `store` as the `Store` capability. */
+export const storePlatform = (store) => Nexus.Capability.EnvironmentLive(new Map([[Store.id, { _tag: "Available", implementation: store }]]));

package/dist/targets.d.ts

@@ -0,0 +1,8 @@
+import type { DefinedApp } from "./index.js";
+export type TargetName = "web" | "desktop";
+/** On a definition made by `forTarget`: the definition it was made from, so the toolchain can still see every target's templates. */
+export declare const WHOLE: unique symbol;
+/** The definition as `target` sees it: its own layout in place of the top-level one, its components and overrides added. */
+export declare const forTarget: (author: DefinedApp | undefined, target: TargetName) => DefinedApp | undefined;
+/** Every target the definition has templates for. */
+export declare const targetsOf: (author: DefinedApp | undefined) => ReadonlyArray<TargetName>;

package/dist/targets.js

@@ -0,0 +1,22 @@
+/** On a definition made by `forTarget`: the definition it was made from, so the toolchain can still see every target's templates. */
+export const WHOLE = Symbol.for("valancex.common.whole");
+/** The definition as `target` sees it: its own layout in place of the top-level one, its components and overrides added. */
+export const forTarget = (author, target) => {
+    if (author === undefined) {
+        return undefined;
+    }
+    const parts = author.targets?.[target];
+    if (parts === undefined) {
+        return author;
+    }
+    const layout = parts.layout ?? author.layout;
+    return {
+        ...author,
+        ...{ [WHOLE]: author },
+        ...(layout === undefined ? {} : { layout }),
+        components: [...(author.components ?? []), ...(parts.components ?? [])],
+        override: [...(author.override ?? []), ...(parts.override ?? [])],
+    };
+};
+/** Every target the definition has templates for. */
+export const targetsOf = (author) => Object.keys(author?.targets ?? {});

package/dist/vocabulary.d.ts

@@ -1,9 +1,54 @@
 import type { WebPrimitives } from "@valancex/port-web";
-export interface Vocabulary {
+/**
+ * A target's vocabulary has one of two forms. The web's is a table of PORT Web's realizations, from which the manifest is derived (`tags`). Any other target's is a MESH manifest, as data
+ * (`components`): the PORT ships it (the Desktop PORT's `vocabulary.json` and `content.json`), and the build reads it as it is.
+ */
+export interface WebVocabulary {
     /** The target's id (`web`). */
     readonly target: string;
     /** The tags, each with its props and events. */
     readonly tags: WebPrimitives;
+    /**
+     * The props a template may leave out, by tag. PORT Web's table says how a prop is realized, not whether it is required, so the manifest derived from it makes every prop required but a boolean
+     * one; this is the author-facing rule beside it. An absent prop is not in the render tree, and PORT Web realizes an absent prop as no attribute (or the element's own initial value).
+     */
+    readonly optional?: Readonly<Record<string, ReadonlyArray<string>>>;
+    /**
+     * What each tag's props and events are, as a specification states them: the type of a prop and whether a use must write it, which the table alone cannot say. Where present it settles the manifest
+     * entry's props and events (the table still says how they are realized); `optional` then applies to what it does not cover.
+     */
+    /** Tags that were renamed, old to new: a template that writes the old one is told the new one. */
+    readonly renamed?: Readonly<Record<string, string>>;
+    /** Props that were renamed, by tag, old to new: a template that writes the old one is told the new one. */
+    readonly renamedProps?: Readonly<Record<string, Readonly<Record<string, string>>>>;
+    readonly rules?: {
+        readonly named: ReadonlyArray<string>;
+        /** The tags that are a modal layer: none is inside another (`nested-modal`). */
+        readonly modal?: ReadonlyArray<string>;
+        readonly only: Readonly<Record<string, ReadonlyArray<string>>>;
+        readonly within: Readonly<Record<string, ReadonlyArray<string>>>;
+    };
+    readonly declared?: Readonly<Record<string, {
+        readonly props: Readonly<Record<string, {
+            readonly type: Readonly<Record<string, unknown>>;
+            readonly required: boolean;
+        }>>;
+        readonly events: Readonly<Record<string, {
+            readonly payload?: Readonly<Record<string, unknown>>;
+        }>>;
+    }>>;
 }
+export interface ManifestVocabulary {
+    readonly target: string;
+    /** MESH manifest components: each with its props and events. */
+    readonly components: Readonly<Record<string, unknown>>;
+}
+export type Vocabulary = WebVocabulary | ManifestVocabulary;
+/** The names a template may write as a primitive in this vocabulary. */
+export declare const namesOf: (vocabulary: Vocabulary) => ReadonlyArray<string>;
+/** A vocabulary that is a MESH manifest (or several: their components are merged, and a name may not be in two). */
+export declare const fromManifests: (target: string, ...manifests: ReadonlyArray<{
+    readonly components: Readonly<Record<string, unknown>>;
+}>) => ManifestVocabulary;
 /** The web's vocabulary: HTML elements, with `class`, `theme`, `id` and `aria-*` as styling and accessibility hooks. */
-export declare const webVocabulary: Vocabulary;
+export declare const webVocabulary: WebVocabulary;

package/dist/vocabulary.js

@@ -1,3 +1,25 @@
-import { primitives } from "./primitives.js";
+import { declared, primitives, renamed, renamedProps, rules } from "./primitives.js";
+/** The names a template may write as a primitive in this vocabulary. */
+export const namesOf = (vocabulary) => Object.keys("tags" in vocabulary ? vocabulary.tags : vocabulary.components);
+/** A vocabulary that is a MESH manifest (or several: their components are merged, and a name may not be in two). */
+export const fromManifests = (target, ...manifests) => {
+    const components = {};
+    for (const manifest of manifests) {
+        for (const [name, each] of Object.entries(manifest.components)) {
+            if (name in components) {
+                throw new Error(`the ${target} vocabulary declares "${name}" twice`);
+            }
+            components[name] = each;
+        }
+    }
+    return { target, components };
+};
 /** The web's vocabulary: HTML elements, with `class`, `theme`, `id` and `aria-*` as styling and accessibility hooks. */
-export const webVocabulary = { target: "web", tags: primitives };
+export const webVocabulary = {
+    target: "web",
+    tags: primitives,
+    declared,
+    rules,
+    renamed,
+    renamedProps,
+};

package/dist/web-app.d.ts

@@ -0,0 +1,6 @@
+import type { Plugin } from "@valancex/valance/web/plugin";
+import type { AppState, Built } from "./app.js";
+import type { DefinedApp } from "./index.js";
+import type { Content } from "./model.js";
+/** The plugin that makes the application a website: its tags, its URL policy, and its document head. */
+export declare const plugin: (content: Content, built: Built, author?: DefinedApp) => Plugin<AppState>;

package/dist/web-app.js

@@ -0,0 +1,20 @@
+import { titleFor } from "./app.js";
+import { pageAt } from "./scope.js";
+import { primitives } from "./primitives.js";
+import { routes } from "./routes.js";
+/** The plugin that makes the application a website: its tags, its URL policy, and its document head. */
+export const plugin = (content, built, author) => ({
+    name: "valance-app",
+    primitives,
+    routes: routes(content),
+    head: (state) => {
+        const page = pageAt(content, state.page);
+        const shown = page ?? { description: "" };
+        const canonical = content.site.url === "" || page === undefined ? [] : [{ rel: "canonical", href: `${content.site.url}${content.site.base}${page.path.replace(/^\//, "")}` }];
+        return {
+            title: titleFor(content, page, state, author),
+            meta: shown.description === "" ? [] : [{ name: "description", content: shown.description }],
+            links: [...built.styles.map((href) => ({ rel: "stylesheet", href })), ...canonical],
+        };
+    },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@valancex/common",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "description": "The author's side of a VALANCE application (defineApp, component, field) and the runtime the vlx build runs: the browser and server entries. What src/main.ts imports; @valancex/cli builds what it describes.",
   "keywords": [
     "valance",
@@ -32,6 +32,14 @@
       "types": "./dist/client.d.ts",
       "default": "./dist/client.js"
     },
+    "./record": {
+      "types": "./dist/record.d.ts",
+      "default": "./dist/record.js"
+    },
+    "./desktop": {
+      "types": "./dist/desktop.d.ts",
+      "default": "./dist/desktop.js"
+    },
     "./http": {
       "types": "./dist/http.d.ts",
       "default": "./dist/http.js"
@@ -56,10 +64,11 @@
     "provenance": true
   },
   "dependencies": {
-    "@valancex/mesh-runtime": "^0.11.0",
-    "@valancex/nexus": "^0.12.0",
-    "@valancex/port-web": "^0.4.0",
-    "@valancex/valance": "^0.12.0"
+    "@valancex/mesh-runtime": "^0.15.0 || ^0.16.0 || ^0.17.0",
+    "@valancex/nexus": "^0.14.0 || ^0.15.0 || ^0.16.0",
+    "@valancex/port-web": "^0.12.0 || ^0.13.0 || ^0.14.0",
+    "@valancex/router": "^0.14.0",
+    "@valancex/valance": "^0.14.0"
   },
   "peerDependencies": {
     "effect": "^3.10.0"