@antelopejs/dms-frontend 0.7.1 → 0.9.0

package/templates/vue/server-module.ts

@@ -29,8 +29,8 @@ export interface DmsSession {
   refreshToken?: string;
   accountId?: string;
   activeTenantId?: string;
-  /** False when the session ends with the browser. */
-  persistent?: boolean;
+  /** True when the session outlives the browser (30 days), false when it ends with it. */
+  persistent: boolean;
   /** Stamped by the frontend server on every write. */
   updatedAt?: number;
   [key: string]: unknown;
@@ -84,8 +84,8 @@ export interface DmsServerEvent {
      */
     view(): DmsPublicSession;
     /**
-     * Writes the session cookie, stamped with `updatedAt`; it ends with the
-     * browser unless `persistent` is true or unset.
+     * Writes the session cookie, stamped with `updatedAt`. It lasts 30 days
+     * when `persistent` is true and ends with the browser when it is false.
      */
     write(session: DmsSession): void;
     clear(): void;
@@ -112,16 +112,21 @@ export interface DmsServerEvent {
   /**
    * Calls the backend, JSON in and out. A refusal throws an error carrying
    * the status and the backend's public `error.*` message, which the server
-   * answers as is when the handler lets it through.
+   * answers as is when the handler lets it through. A redirect is not
+   * followed: it throws a 502.
    */
   backend<T = unknown>(path: string, init?: DmsBackendRequest): Promise<T>;
   /**
    * The backend URL of an absolute path, for a call `backend` cannot make (a
    * raw response, no relayed header): always on the backend's origin,
-   * whatever the path holds.
+   * whatever the path holds. Fetch it with `redirect: "manual"` to relay a
+   * backend redirect: the browser then follows it.
    */
   backendUrl(path: string): URL;
-  /** The client's address, behind `DMS_TRUSTED_PROXY_HOPS` proxies. */
+  /**
+   * The client's address, from the `DMS_CLIENT_IP_HEADER` header or behind
+   * `DMS_TRUSTED_PROXY_HOPS` proxies.
+   */
   clientIp(): string;
   /** This module, and only this one. */
   module: {
@@ -273,6 +278,13 @@ export interface DmsBackendProxyOptions {
    * needed.
    */
   auth?: "session" | "none";
+  /**
+   * The largest request body, in bytes, the server streams to the backend.
+   * A larger declared `Content-Length` gets a `413` before any byte is read;
+   * a chunked body is cut off with a `413` as soon as it goes over. No limit
+   * by default: the backend applies its own.
+   */
+  maxBodyBytes?: number;
 }
 
 export type DmsServerSetup = (server: DmsServer) => void;

package/templates/vue/server.mjs

@@ -2,8 +2,8 @@ import { existsSync, readFileSync, statSync } from "node:fs";
 import { createServer, maxHeaderSize } from "node:http";
 import { extname, join, resolve, sep } from "node:path";
 import { fileURLToPath } from "node:url";
-import { ofetch } from "ofetch";
 import {
+  CLIENT_HEADERS,
   relayedHeaders,
   RequestBodyError,
   UpstreamError,
@@ -17,7 +17,6 @@ import {
   redirectAccessRefusal,
   UNEXPECTED_ERROR_BODY,
 } from "./server/backend-response.mjs";
-import { fetchWaking } from "./server/backend-wake.mjs";
 import { handleClientError } from "./server/client-error.mjs";
 import {
   reportListenError,
@@ -26,7 +25,10 @@ import {
 } from "./server/cli-report.mjs";
 import { publicBuildFile } from "./server/built-files.mjs";
 import { serveStaticFile } from "./server/static-files.mjs";
-import { productionHtmlTemplate } from "./server/client-manifest.mjs";
+import {
+  localeCatalogPreloadTag,
+  productionHtmlTemplate,
+} from "./server/client-manifest.mjs";
 import { writeContent } from "./server/content.mjs";
 import {
   captureViteErrors,
@@ -37,7 +39,11 @@ import { documentStyleTags } from "./server/dev-styles.mjs";
 import { watchEmailBundle } from "./server/email.mjs";
 import { withFaviconPlaceholder } from "./server/favicon.mjs";
 import { DEV_FS_DENY, denyPrivateFiles } from "./server/dev-private-files.mjs";
-import { ownerLabel, requestOwner } from "./server/request-routing.mjs";
+import {
+  ownerLabel,
+  reachesBackend,
+  requestOwner,
+} from "./server/request-routing.mjs";
 import { routingReport } from "./server/backend-proxies.mjs";
 import { routeRuleFor, ruleHeaders } from "./server/route-rules.mjs";
 import {
@@ -45,7 +51,9 @@ import {
   loadServerModules,
 } from "./server/module-server.mjs";
 import { HOMEPAGE } from "./server/homepage.mjs";
-import { loadPageProps } from "./server/page-props.mjs";
+import { publicOptionsScript } from "./server/public-options.mjs";
+import { renderInPlace, serverReads } from "./server/in-place-render.mjs";
+import { loadPageProps, propsForQuery } from "./server/page-props.mjs";
 import { htmlTag } from "./server/html-tag.mjs";
 import { listenHost } from "./server/listen-host.mjs";
 import * as icons from "./server/icons.mjs";
@@ -55,6 +63,7 @@ import {
   relayAnswer,
 } from "./server/proxy-compression.mjs";
 import { backendUrl, refuseForeignTarget } from "./server/request-target.mjs";
+import { sendWithinLimit, SERVER_OPTIONS } from "./server/proxy-transfers.mjs";
 import {
   createInertiaPage,
   htmlHeaders,
@@ -73,7 +82,12 @@ const SAFE_METHODS = new Set(["GET", "HEAD", "OPTIONS"]);
 const LOCAL_ROUTES = [[icons.isIconRequest, icons.handleIcons]];
 const CLIENT_ROOT = join(PROJECT_ROOT, "dist/client");
 const SOURCE_TEMPLATE_PATH = join(PROJECT_ROOT, "index.html");
-const BUILT_SSR_RENDERER_PATH = join(PROJECT_ROOT, "dist/ssr/ssr-renderer.js");
+// A URL, not a path: on Windows, `import()` reads `C:\...` as a URL whose
+// scheme is `c:` and refuses it.
+const BUILT_SSR_RENDERER_URL = new URL(
+  "dist/ssr/ssr-renderer.js",
+  import.meta.url,
+);
 // The SSR bundle keeps vue-i18n external, so Node loads its esm-bundler build,
 // which reads compile-time flags only a bundler replaces. Vite inlines them in
 // the client bundle; without the same value here, installing vue-i18n under
@@ -94,8 +108,7 @@ async function developmentServer() {
         // The generated secrets and the modules' server code, never served.
         fs: { deny: DEV_FS_DENY },
       };
-      if (frontendHttpServer)
-        serverOptions.hmr = { server: frontendHttpServer };
+      if (frontendHttpServer) serverOptions.ws = { server: frontendHttpServer };
       return createViteServer({
         server: serverOptions,
         appType: "custom",
@@ -127,9 +140,7 @@ function backendHeaders(request, access = { anonymous: false, headers: [] }) {
       "if-match",
       "origin",
       "referer",
-      "user-agent",
-      "x-content-language",
-      "x-realtime-session",
+      ...CLIENT_HEADERS,
       ...access.headers,
     ]),
     ...forwardedHeaders(request),
@@ -141,24 +152,13 @@ function backendHeaders(request, access = { anonymous: false, headers: [] }) {
 }
 
 function serverComponentFetch(request) {
-  return (path, options = {}) => {
-    const headers = new Headers(backendHeaders(request));
-    new Headers(options.headers).forEach((value, name) => {
-      headers.set(name, value);
-    });
-    return ofetch(path, {
-      ...options,
-      baseURL: process.env.DMS_API_BASE_URL,
-      headers,
-    });
-  };
+  return serverReads(() => backendHeaders(request));
 }
 
 async function backendJson(path, request) {
-  const response = await fetchWaking(
-    new URL(path, process.env.DMS_API_BASE_URL),
-    { headers: backendHeaders(request), signal: request.dmsAbandoned },
-  );
+  const response = await fetch(new URL(path, process.env.DMS_API_BASE_URL), {
+    headers: backendHeaders(request),
+  });
   if (!response.ok) {
     throw await backendResponseError(response);
   }
@@ -170,18 +170,18 @@ async function currentAuth() {
   return (await loadServerModules(await developmentServer())).serverAuth;
 }
 
+function pageBackend(request) {
+  return {
+    fetchJson: (path) => backendJson(path, request),
+    isFrontendPage: async (pathname) =>
+      (await ssrRenderer(await developmentServer())).isDmsFrontendPage(
+        pathname,
+      ),
+  };
+}
+
 function pageProps(request, auth) {
-  return loadPageProps(
-    request,
-    {
-      fetchJson: (path) => backendJson(path, request),
-      isFrontendPage: async (pathname) =>
-        (await ssrRenderer(await developmentServer())).isDmsFrontendPage(
-          pathname,
-        ),
-    },
-    auth,
-  );
+  return loadPageProps(request, pageBackend(request), auth);
 }
 
 function redirectToHomepage(request, response, pathname) {
@@ -202,25 +202,45 @@ function redirectSignedOutPrivatePage(request, response, props, auth) {
   return true;
 }
 
-/** Sends a request to the backend through the proxy it reached. */
-async function proxy(request, response, backendProxy) {
+/**
+ * Sends a request to the backend through the proxy it reached.
+ * `isProxiedPath` says which backend paths a relayed `Location` may name on
+ * the frontend's origin.
+ */
+async function proxy(request, response, backendProxy, isProxiedPath) {
   const access = proxyAccess(request, SAFE_METHODS, backendProxy);
   if (access.isRefused) {
     refuseCrossOrigin(response);
     return true;
   }
+  // A client that left while the request was routed closed the response
+  // already, and would never abort the request below.
+  if (response.closed) return;
   // Cancelling the body alone misses a client that leaves before the backend
   // answers: its stream, an SSE feed above all, then stayed open for good.
   const abandoned = new AbortController();
   response.once("close", () => abandoned.abort());
-  const upstream = await fetchWaking(backendUrl(request.url), {
+  const init = {
     signal: abandoned.signal,
     method: request.method,
     headers: { ...backendHeaders(request, access), ...PLAIN_ANSWER_HEADERS },
-    body: ["GET", "HEAD"].includes(request.method) ? undefined : request,
     duplex: "half",
+    // A backend redirect is the browser's to follow: Media sends a file's
+    // link to the storage's signed URL, on the public origin the server
+    // itself may not reach, which turned every download into a 502.
+    redirect: "manual",
+  };
+  const upstream = await sendWithinLimit(
+    request,
+    response,
+    backendProxy.maxBodyBytes,
+    (body) => fetch(backendUrl(request.url), { ...init, body }),
+  );
+  if (!upstream) return true;
+  await relayAnswer(request, response, upstream, {
+    fetched: true,
+    isProxiedPath,
   });
-  await relayAnswer(request, response, upstream, { fetched: true });
 }
 
 /**
@@ -240,7 +260,7 @@ function serveAsset(pathname, request, response) {
 async function ssrRenderer(devServer) {
   const renderer = devServer
     ? await devServer.ssrLoadModule("/ssr-renderer.ts")
-    : await (productionSsrRenderer ??= import(BUILT_SSR_RENDERER_PATH));
+    : await (productionSsrRenderer ??= import(BUILT_SSR_RENDERER_URL.href));
   await icons.provideIconCollections(renderer);
   return renderer;
 }
@@ -250,6 +270,7 @@ function clientRenderedShell(page) {
     body: inertiaAppHtml(page),
     head: { headTags: "", htmlAttrs: "", bodyAttrs: "" },
     overlays: "",
+    modules: [],
   };
 }
 
@@ -290,7 +311,10 @@ export async function renderHtml(
       : await serverRendered(page, serverFetch, requestCookies, devServer);
   if (rendered.redirect)
     return { html: "", status: 200, redirect: rendered.redirect };
-  const preloads = await documentStyleTags(devServer, page, template);
+  const headEnd =
+    (await documentStyleTags(devServer, rendered.modules, template)) +
+    (devServer ? "" : localeCatalogPreloadTag(rendered.catalogLocale)) +
+    publicOptionsScript();
   const html = template
     .replace("<title>Antelope DMS</title>", () =>
       withFaviconPlaceholder(rendered.head.headTags),
@@ -299,7 +323,7 @@ export async function renderHtml(
       htmlTag(attributes, rendered.head.htmlAttrs),
     )
     .replace("<body", `<body ${rendered.head.bodyAttrs}`)
-    .replace("</head>", `${preloads}</head>`)
+    .replace("</head>", `${headEnd}</head>`)
     .replace(
       '<div id="dms-overlays" class="isolate"></div>',
       `<div id="dms-overlays" class="isolate">${rendered.overlays}</div>`,
@@ -308,13 +332,28 @@ export async function renderHtml(
   return { html, status: rendered.error?.statusCode ?? 200 };
 }
 
-function renderRequestHtml(page, request, rule = {}) {
-  const fetch = serverComponentFetch(request);
+function renderRequestHtml(page, request, rule = {}, reads) {
+  const fetch = reads ?? serverComponentFetch(request);
   return renderHtml(page, request.url, fetch, request.headers.cookie, {
     ssr: rule.ssr,
   });
 }
 
+/**
+ * Renders a page document, at the query the page completes as it renders:
+ * see `renderInPlace`.
+ */
+function renderDocument(page, request, rule, auth) {
+  const fetch = serverComponentFetch(request);
+  return renderInPlace(
+    request,
+    page,
+    fetch,
+    (served) => renderRequestHtml(served, request, rule, fetch),
+    (props, url) => propsForQuery(props, url, pageBackend(request), auth),
+  );
+}
+
 async function writeBackendError(error, request, response) {
   const auth = await currentAuth();
   const status = Number.isInteger(error?.status) ? error.status : 502;
@@ -332,9 +371,6 @@ async function writeBackendError(error, request, response) {
   if (await redirectAccessRefusal(error, request, response, loadRenderer))
     return;
   console.error("DMS backend request failed", error);
-  const retryHeaders = error?.retryAfter
-    ? { "retry-after": error.retryAfter }
-    : {};
   if (isFrontendVisit(request)) {
     const props = {
       path: pathname,
@@ -348,24 +384,18 @@ async function writeBackendError(error, request, response) {
         request,
         response,
         status,
-        { ...inertiaHeaders(page.version), ...retryHeaders },
+        inertiaHeaders(page.version),
         JSON.stringify(page),
       );
     }
     const { html } = await renderRequestHtml(page, request);
-    return writeContent(
-      request,
-      response,
-      status,
-      { ...htmlHeaders(), ...retryHeaders },
-      html,
-    );
+    return writeContent(request, response, status, htmlHeaders(), html);
   }
   const payload =
     error instanceof UpstreamError || error instanceof RequestBodyError
       ? { message: error.message }
       : UNEXPECTED_ERROR_BODY;
-  response.writeHead(status, { "content-type": JSON_TYPE, ...retryHeaders });
+  response.writeHead(status, { "content-type": JSON_TYPE });
   response.end(JSON.stringify(payload));
 }
 
@@ -425,15 +455,16 @@ export async function handleRequest(request, response) {
   if (localRoute) return localRoute[1](request, response);
   const devServer = await developmentServer();
   const modules = await loadServerModules(devServer);
-  const owner = requestOwner(request.method, pathname, modules, (path) =>
-    hasRendererFile(devServer, path),
-  );
+  const hasFile = (path) => hasRendererFile(devServer, path);
+  const owner = requestOwner(request.method, pathname, modules, hasFile);
   if (devServer) response.setHeader("x-dms-route-owner", ownerLabel(owner));
   if (owner.kind === "renderer")
     return serveRendererFile(devServer, request, response, pathname);
   if (owner.kind === "module")
     return handleModuleRoute(request, response, pathname, modules);
-  if (owner.kind === "backend") return proxy(request, response, owner.proxy);
+  const isProxiedPath = (path) => reachesBackend(path, modules, hasFile);
+  if (owner.kind === "backend")
+    return proxy(request, response, owner.proxy, isProxiedPath);
   if (owner.kind === "not-found") return writeNotFound(response);
   if (requestFailure.hasMalformedPath(request.url))
     return requestFailure.writeBadRequest(response);
@@ -455,16 +486,17 @@ export async function handleRequest(request, response) {
       JSON.stringify(page),
     );
   }
-  const rendered = await renderRequestHtml(page, request, rule);
+  const { rendered, served } = await renderDocument(page, request, rule, auth);
   if (rendered.redirect) {
     redirectFrontendVisit(request, response, rendered.redirect);
     return;
   }
+  const location = served === page ? {} : { "content-location": served.url };
   return writeContent(
     request,
     response,
     rendered.status,
-    { ...htmlHeaders(), ...headersFor(rendered.status) },
+    { ...htmlHeaders(), ...headersFor(rendered.status), ...location },
     rendered.html,
   );
 }
@@ -487,19 +519,7 @@ async function writeRequestFailure(error, request, response) {
   await writeBackendError(error, request, response);
 }
 
-/**
- * Aborted once the client is gone, ending a wait for a waking backend. An
- * embedder's response that emits no events never aborts it.
- */
-function abandonedSignal(response) {
-  const abandoned = new AbortController();
-  if (typeof response.once === "function")
-    response.once("close", () => abandoned.abort());
-  return abandoned.signal;
-}
-
 export async function handleRequestSafely(request, response) {
-  request.dmsAbandoned = abandonedSignal(response);
   try {
     if (refuseForeignTarget(request, response)) return;
     await handleRequest(request, response);
@@ -515,7 +535,7 @@ if (
   process.argv[1] &&
   import.meta.url === new URL(`file://${process.argv[1]}`).href
 ) {
-  frontendHttpServer = createServer(handleRequestSafely);
+  frontendHttpServer = createServer(SERVER_OPTIONS, handleRequestSafely);
   frontendHttpServer.on("clientError", (error, socket) =>
     handleClientError(error, socket, maxHeaderSize),
   );

package/templates/vue/sfc-global-types.mjs

@@ -0,0 +1,119 @@
+// Vue's SFC compiler turns `defineProps<Props>()` into runtime prop types, and
+// it reads a type from the component's own imports only. A type a module
+// auto-imports (its declared `app/types`, `app/composables`…, and Vue's own
+// `Ref`, `Component`…) is visible to TypeScript through auto-imports.d.ts but
+// not to the compiler, which drops it from the prop without a word:
+// `boolean | RowActionConfig` became `{ type: Boolean }` in a production build.
+//
+// The compiler does read ambient declarations from `script.globalTypeFiles`,
+// but not the `export type { … } from` re-exports auto-imports.d.ts is made
+// of. This writes those types as ambient aliases it can follow, from the same
+// directories and through the same scanner as the auto-imports, before Vite
+// compiles anything, and rewrites them when a dev server sees a module's
+// declared directories change.
+
+import { readFileSync, renameSync, writeFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { pathToFileURL } from "node:url";
+
+// The very unimport the auto-import plugin scans with, so both read the
+// directories the same way. Imported by URL, not by path: on Windows,
+// `import()` reads `C:\...` as a URL whose scheme is `c:` and refuses it.
+const unimportUrl = pathToFileURL(
+  createRequire(
+    createRequire(import.meta.url).resolve("unplugin-auto-import/package.json"),
+  ).resolve("unimport"),
+);
+const { builtinPresets, resolvePreset, scanDirExports } = await import(
+  unimportUrl.href
+);
+
+const HEADER =
+  "// Generated by @antelopejs/dms-frontend from the auto-imported types, for\n" +
+  "// Vue's SFC compiler (script.globalTypeFiles). Not read by TypeScript.\n";
+
+const withoutExtension = (path) => path.replace(/\.[cm]?[jt]sx?$/, "");
+
+/**
+ * The ambient aliases of the auto-imported types: one per name, in the order
+ * the auto-import plugin reads them (Vue's preset, then the scanned
+ * directories), the last one winning, as unimport's own deduplication keeps
+ * the last of two imports of the same name. A module that exports its own
+ * `Component` thus shadows Vue's, for the compiler as for TypeScript.
+ *
+ * @param {(string | { glob: string, types?: boolean })[]} dirs the auto-import
+ *   directories, as handed to the auto-import plugin
+ * @param {string} cwd the workspace
+ */
+export async function sfcGlobalTypes(dirs, cwd) {
+  const vue = await resolvePreset(builtinPresets.vue);
+  const scanned = await scanDirExports(dirs, { cwd, types: true });
+  const aliases = new Map();
+  for (const entry of [...vue, ...scanned]) {
+    if (!entry.type) continue;
+    const name = entry.as ?? entry.name;
+    const source = JSON.stringify(withoutExtension(entry.from));
+    aliases.set(
+      name,
+      `declare type ${name} = import(${source}).${entry.name};`,
+    );
+  }
+  return `${HEADER}${[...aliases.values()].join("\n")}\n`;
+}
+
+function writeIfChanged(file, content) {
+  let current;
+  try {
+    current = readFileSync(file, "utf8");
+  } catch {
+    current = undefined;
+  }
+  if (current === content) return false;
+  // Through a temporary file: a build starting meanwhile reads the previous
+  // declarations or the new ones, never a half-written file the compiler
+  // would then keep in its cache.
+  const temporary = `${file}.${process.pid}.tmp`;
+  writeFileSync(temporary, content);
+  renameSync(temporary, file);
+  return true;
+}
+
+/** Writes the declarations once, before Vite's config is returned. */
+export async function writeSfcGlobalTypes(dirs, cwd, file) {
+  writeIfChanged(file, await sfcGlobalTypes(dirs, cwd));
+}
+
+/**
+ * Keeps the declarations in step on a dev server: a type file added, renamed
+ * or removed rewrites them, and the Vue plugin reloads the components whose
+ * props read the file.
+ */
+export function sfcGlobalTypesWatcher(dirs, cwd, file) {
+  return {
+    name: "dms-sfc-global-types",
+    apply: "serve",
+    configureServer(server) {
+      let pending;
+      const refresh = (path) => {
+        if (!/\.[cm]?[jt]sx?$/.test(path) || path === file) return;
+        clearTimeout(pending);
+        pending = setTimeout(() => {
+          // The file is under the workspace, which Vite watches: rewriting it
+          // is the change the Vue plugin reloads the dependent components on.
+          // A failed scan or write keeps the previous declarations: it must
+          // not end the dev server.
+          sfcGlobalTypes(dirs, cwd)
+            .then((content) => writeIfChanged(file, content))
+            .catch((error) =>
+              server.config.logger.warn(
+                `Could not update ${file}, the types Vue's SFC compiler ` +
+                  `reads: ${error instanceof Error ? error.message : error}`,
+              ),
+            );
+        }, 100);
+      };
+      for (const event of ["add", "change", "unlink"])
+        server.watcher.on(event, refresh);
+    },
+  };
+}

package/templates/vue/ssr-renderer.ts

@@ -28,7 +28,9 @@ import {
   setDmsServerRuntimeResolver,
   setupFrontendModules,
   trackDmsServerScopes,
+  withPublicOptions,
 } from "./frontend-module";
+import { parsePublicOptions } from "./public-options";
 import { frontendModules } from "./frontend-modules.generated";
 import {
   SSR_ICONS_ID,
@@ -53,8 +55,19 @@ export interface DmsSsrResult {
   body: string;
   head: DmsSsrHead;
   overlays: string;
+  /**
+   * The id of every single-file component the render created, its path from
+   * the workspace root as the client manifest keys it: the server links their
+   * stylesheets.
+   */
+  modules: string[];
   error?: DmsErrorData;
   redirect?: string;
+  /**
+   * The locale of the catalog the page was rendered with: the server preloads
+   * that catalog's file, which the browser loads before it hydrates.
+   */
+  catalogLocale?: string;
 }
 
 export interface DmsSsrHead {
@@ -64,6 +77,8 @@ export interface DmsSsrHead {
 }
 
 interface DmsSsrContext {
+  /** Filled by `@vitejs/plugin-vue`: each component adds its id as it sets up. */
+  modules?: Set<string>;
   teleports?: Record<string, string>;
 }
 
@@ -122,7 +137,13 @@ function iconsScript(names: Set<string>): string {
   return `<script id="${SSR_ICONS_ID}" type="application/json">${value}</script>`;
 }
 
-await setupFrontendModules(frontendModules, appConfigs);
+await setupFrontendModules(
+  withPublicOptions(
+    frontendModules,
+    parsePublicOptions(process.env.DMS_PUBLIC_OPTIONS),
+  ),
+  appConfigs,
+);
 
 export function isDmsFrontendPage(path: string): boolean {
   return hasDmsPage(path);
@@ -173,6 +194,7 @@ async function renderDmsPageWithRuntime(
     let icons = new Set<string>();
     let iconSymbols = new Map<string, string>();
     let payload: DmsPayload = { data: {}, errors: {}, state: {} };
+    let catalogLocale: (() => string | undefined) | undefined;
     const inertiaResult = await createInertiaApp({
       page,
       // Read as the HTML is complete: data a run settles afterwards was never
@@ -198,6 +220,7 @@ async function renderDmsPageWithRuntime(
           runtime,
           serverFetch,
         });
+        catalogLocale = configured.catalogLocale;
         return app;
       },
     });
@@ -208,6 +231,7 @@ async function renderDmsPageWithRuntime(
         body: "",
         head: { bodyAttrs: "", headTags: "", htmlAttrs: "" },
         overlays: "",
+        modules: [],
         redirect: runtime.serverRedirect,
       };
     }
@@ -238,6 +262,8 @@ async function renderDmsPageWithRuntime(
         htmlAttrs: renderedHead.htmlAttrs,
       },
       overlays: ssrContext.teleports?.["#dms-overlays"] ?? "",
+      modules: [...(ssrContext.modules ?? [])],
+      catalogLocale: catalogLocale?.(),
     };
   } finally {
     // Only once the head and the async data are serialized: both still read

package/templates/vue/ui-kbd.mjs

@@ -0,0 +1,45 @@
+// Nuxt UI prints the `meta`, `ctrl` and `alt` of a key hint (`UKbd`, the
+// `kbds` of its menus) from a map every hint shares, blank until the first
+// hint mounts: a hint hydrating after that, in an async component, printed
+// "⌘" or "Ctrl" over the server's blank, a hydration mismatch on every
+// platform. Its `useKbd` is routed to the DMS runtime's `useDmsKbd`, which
+// keeps each hint on the server's value until it mounts and lets the
+// application give the platform to the server render
+// (`provideDmsKbdPlatform`). The build fails if Nuxt UI changes the form
+// rewritten here, rather than letting the mismatch come back unnoticed.
+
+/** Nuxt UI's key hint composable. */
+const USE_KBD = /\/@nuxt\/ui\/dist\/runtime\/composables\/useKbd\.js$/;
+/** Its export as Nuxt UI 4 writes it: one composable shared by every hint. */
+const SHARED_EXPORT =
+  /export const useKbd = \/\* @__PURE__ \*\/ createSharedComposable\(_useKbd\);/;
+const ROUTED_EXPORT =
+  'import { useDmsKbd } from "#dms/frontend-module";\n' +
+  "const useSharedKbd = /* @__PURE__ */ createSharedComposable(_useKbd);\n" +
+  "export const useKbd = () => useDmsKbd(useSharedKbd, kbdKeysMap);";
+
+/**
+ * The rewrite, as a Vite plugin.
+ *
+ * @param isNuxtUiFile `(id) => boolean`, whether a module is Nuxt UI's
+ */
+export function uiKbd(isNuxtUiFile) {
+  return {
+    name: "dms-ui-kbd",
+    enforce: "pre",
+    transform(code, id) {
+      const path = id.replaceAll("\\", "/").split("?")[0];
+      if (!isNuxtUiFile(id) || !USE_KBD.test(path)) return null;
+      if (
+        !SHARED_EXPORT.test(code) ||
+        !code.includes("export const kbdKeysMap")
+      )
+        this.error(
+          `${id} defines useKbd in a form the DMS does not rewrite: its key ` +
+            "hints would not hydrate cleanly. Update ui-kbd.mjs for this " +
+            "Nuxt UI release.",
+        );
+      return { code: code.replace(SHARED_EXPORT, ROUTED_EXPORT), map: null };
+    },
+  };
+}