@antelopejs/dms-frontend 0.7.1 → 0.9.0

package/templates/vue/client-chunking.mjs

@@ -0,0 +1,61 @@
+// How the client bundle is cut into files, and what the build says about it.
+//
+// Kept beside vite.config.ts rather than inside it so the options can be
+// exercised on their own, the way head-order.mjs and client-server-guard.mjs are.
+
+/**
+ * Rolldown's `output.codeSplitting` for the client build.
+ *
+ * By default Rolldown gives every set of dynamic imports that shares a module
+ * its own common chunk. The DMS's pages are hundreds of dynamic imports (a
+ * module's components and pages are `import.meta.glob`ed), so the code the
+ * entry also needs lands in about sixty small common chunks the entry imports
+ * before anything runs: one request each, 55 to 60 more files on every page
+ * than the single entry file Rollup made, for no byte saved.
+ *
+ * The `$initial` tag is every module the entry imports statically, directly or
+ * not. One group over it puts them in the entry file again, and leaves every
+ * lazy chunk to Rolldown's own splitting, which a page only loads when it needs
+ * it: what an anonymous page loads is still what that page's own routes pull.
+ *
+ * Deliberately not here: groups over what the lazy chunks share (the UI
+ * libraries, a chunk per module). They cut a signed-in page's files by a
+ * quarter to four fifths, but every group is loaded whole by each page that
+ * uses any of it, and the anonymous pages pay 70 to 115 KB of Brotli for code
+ * only the signed-in shell uses.
+ */
+export const clientCodeSplitting = {
+  groups: [{ name: "entry", tags: ["$initial"] }],
+};
+
+const MODULE_ENTRY = /[\\/]dms\.frontend\.[cm]?[jt]sx?$/;
+
+/**
+ * Rolldown's `onLog` for every build: drops the
+ * INEFFECTIVE_DYNAMIC_IMPORT notices whose dynamic importer is a module's
+ * `dms.frontend.ts`.
+ *
+ * That file `import.meta.glob`s every component of the module so a page can
+ * resolve one by name. A few of them (StatusPill, MonoCell, IdentityCell: the
+ * table cell renderers) are also imported statically by the entry, which is
+ * what a cell renderer needs at hydration. The glob entry then resolves to the
+ * chunk already loaded: nothing is duplicated and nothing was meant to be
+ * lazy, and nobody can act on the notice. A `import()` a module author
+ * writes by hand for a file that is also imported statically is the same
+ * mistake with a different cause (the lazy load never happens), and still
+ * warns.
+ *
+ * @param {string} level
+ * @param {{ code?: string, ids?: string[] }} log
+ * @param {(level: string, log: object) => void} defaultHandler
+ */
+export function onBuildLog(level, log, defaultHandler) {
+  if (
+    log.code === "INEFFECTIVE_DYNAMIC_IMPORT" &&
+    log.ids?.length &&
+    MODULE_ENTRY.test(log.ids[0])
+  ) {
+    return;
+  }
+  defaultHandler(level, log);
+}

package/templates/vue/email-renderer.ts

@@ -6,6 +6,7 @@ import { appConfigs } from "./app-configs.generated";
 import moduleRegistry from "./generated-frontend-modules.json";
 import { loadEmailLocaleMessages } from "./email-locales";
 import { stripSsrMarkers } from "./email-markup";
+import { parsePublicOptions } from "./public-options";
 
 interface EmailModule {
   default: Component;
@@ -20,6 +21,8 @@ interface EmailRenderOptions {
   locale?: string;
 }
 
+const runtimeOptions = parsePublicOptions(process.env.DMS_PUBLIC_OPTIONS);
+
 const registries = import.meta.glob<EmailRegistry>(
   "/frontend-modules/*/dms.email.ts",
   { eager: true },
@@ -157,7 +160,9 @@ export async function renderEmail(
   app.provide("dmsEmailAppConfig", defu({}, ...emailAppConfigs));
   const publicConfig = defu(
     {},
-    ...moduleRegistry.modules.map((module) => module.options),
+    ...moduleRegistry.modules.map(
+      (module) => runtimeOptions?.[module.id] ?? module.options,
+    ),
   );
   app.provide("dmsEmailRuntimeConfig", {
     public: defu(

package/templates/vue/entry-weight.mjs

@@ -0,0 +1,132 @@
+// What each frontend module adds to the client entry.
+//
+// Every page loads the entry, and everything it imports statically, before it
+// runs anything: a module's `dms.frontend.ts`, its plugins and whatever they
+// import land there, on every page of every application that loads the
+// module. The client build records, from the bundle's own metadata, how much
+// of the entry each module's sources make up; `ajs dms build` reports it and
+// warns about a module above its threshold.
+//
+// Kept beside vite.config.ts rather than inside it so the plugin can be
+// exercised on its own, the way client-chunking.mjs is.
+
+import { mkdirSync, writeFileSync } from "node:fs";
+import { dirname, join, relative, sep } from "node:path";
+
+/** Where the client build writes the attribution, under `dist/client`. */
+export const ENTRY_WEIGHT_FILE = ".vite/entry-weight.json";
+
+/** Owners of the entry's bytes that are no frontend module. */
+export const SHARED_OWNER = "shared";
+export const TRANSLATIONS_OWNER = "translations";
+
+const LOCALE_CATALOG = /[\\/]locales\.generated[\\/]/;
+
+function stripQuery(id) {
+  const query = id.indexOf("?");
+  return query === -1 ? id : id.slice(0, query);
+}
+
+function isInside(root, file) {
+  const path = relative(root, file);
+  return Boolean(path) && !path.startsWith("..") && !path.startsWith(sep);
+}
+
+/**
+ * The owner of a module id of the bundle: the frontend module whose sources
+ * hold the file, by its manifest name; the merged translation catalogs; else
+ * what every page shares (the renderer's runtime, the UI and icon libraries,
+ * an installed package).
+ *
+ * @param {{ root: string, name?: string, packageName?: string, id: string }[]} modules
+ */
+export function entryOwner(id, modules) {
+  if (id.startsWith("\0")) return SHARED_OWNER;
+  const file = stripQuery(id);
+  if (/[\\/]node_modules[\\/]/.test(file)) return SHARED_OWNER;
+  if (LOCALE_CATALOG.test(file)) return TRANSLATIONS_OWNER;
+  const module = modules.find(({ root }) => isInside(root, file));
+  return module
+    ? (module.name ?? module.packageName ?? module.id)
+    : SHARED_OWNER;
+}
+
+/**
+ * The files a page loads before its first line runs: the entry chunks and
+ * their static imports, transitively, by file name.
+ */
+function entryClosure(bundle) {
+  const chunks = Object.values(bundle).filter(
+    (output) => output.type === "chunk",
+  );
+  const byName = new Map(chunks.map((chunk) => [chunk.fileName, chunk]));
+  const seen = new Set();
+  const visit = (chunk) => {
+    if (!chunk || seen.has(chunk.fileName)) return;
+    seen.add(chunk.fileName);
+    for (const file of chunk.imports ?? []) visit(byName.get(file));
+  };
+  for (const chunk of chunks) if (chunk.isEntry) visit(chunk);
+  return [...seen].map((file) => byName.get(file));
+}
+
+/**
+ * The bytes of the entry each owner accounts for. Each chunk's bytes are
+ * shared out among the modules it holds in proportion to the code Rolldown
+ * rendered for each (`renderedLength`, before minification): an estimate that
+ * needs nothing the bundle does not already hold.
+ *
+ * @returns {{ files: string[], bytes: number, owners: Record<string, number> }}
+ */
+export function attributeEntry(bundle, modules) {
+  const files = entryClosure(bundle);
+  const owners = {};
+  let bytes = 0;
+  for (const chunk of files) {
+    const size = Buffer.byteLength(chunk.code);
+    bytes += size;
+    const rendered = Object.entries(chunk.modules ?? {});
+    const total = rendered.reduce(
+      (sum, [, info]) => sum + info.renderedLength,
+      0,
+    );
+    if (!total) {
+      owners[SHARED_OWNER] = (owners[SHARED_OWNER] ?? 0) + size;
+      continue;
+    }
+    for (const [id, info] of rendered) {
+      const owner = entryOwner(id, modules);
+      owners[owner] =
+        (owners[owner] ?? 0) + (size * info.renderedLength) / total;
+    }
+  }
+  for (const owner of Object.keys(owners))
+    owners[owner] = Math.round(owners[owner]);
+  return { files: files.map((chunk) => chunk.fileName), bytes, owners };
+}
+
+/**
+ * Records, in the client build, what each frontend module adds to the entry
+ * (`ENTRY_WEIGHT_FILE`). Server builds are left alone: their bundle is no
+ * page's entry.
+ */
+export function recordEntryWeight(modules) {
+  let ssrBuild = false;
+  return {
+    name: "dms-entry-weight",
+    configResolved(config) {
+      ssrBuild = Boolean(config.build.ssr);
+    },
+    // Once the bundle is written: plugins that generate the bundle after this
+    // one still rewrite the chunks' code.
+    writeBundle(options, bundle) {
+      if (ssrBuild || !options.dir) return;
+      const file = join(options.dir, ENTRY_WEIGHT_FILE);
+      mkdirSync(dirname(file), { recursive: true });
+      writeFileSync(
+        file,
+        `${JSON.stringify(attributeEntry(bundle, modules), null, 2)}\n`,
+      );
+    },
+  };
+}

package/templates/vue/frontend-build-loader.ts

@@ -1,6 +1,6 @@
 import { isAbsolute, posix, resolve } from "node:path";
 import { normalizePath } from "vite";
-import type { DmsFrontendBuildSetup } from "./frontend-build";
+import type { DmsFrontendBuildSetup } from "./frontend-build.ts";
 
 /** A module's `dms.frontend.build.ts`, as the generated loader imports it. */
 export interface FrontendBuildDeclaration {

package/templates/vue/frontend-module.ts

@@ -12,7 +12,9 @@ import { defu } from "defu";
 import { type FetchOptions, ofetch } from "ofetch";
 import {
   type App,
+  type AppConfig,
   type Component,
+  type ComponentInternalInstance,
   type ComponentPublicInstance,
   type ComputedRef,
   camelize,
@@ -55,6 +57,7 @@ import {
   mergeLayerAppConfigs,
   withAppConfigChanges,
 } from "./layer-app-config";
+import type { DmsPublicOptionsById } from "./public-options";
 
 export interface DmsPageRoute {
   displayName?: string;
@@ -457,11 +460,34 @@ export interface DmsFrontendModule {
   setup(sdk: DmsFrontendSdk): void | Promise<void>;
 }
 export interface DmsFrontendModuleRegistration {
+  /** The module's id in the generated module registry. */
+  id?: string;
   /** The module's manifest name, which collision warnings name it by. */
   name?: string;
   module: DmsFrontendModule;
   options: DmsModuleOptions;
 }
+
+/**
+ * The registrations with the public options the server runs with in place of
+ * the build's: `ajs dms start` computes them from the project's configuration
+ * and the deployment's variables. Unset, the build's options stand.
+ */
+export function withPublicOptions(
+  registrations: DmsFrontendModuleRegistration[],
+  byId: DmsPublicOptionsById | undefined,
+): DmsFrontendModuleRegistration[] {
+  if (!byId) return registrations;
+  return registrations.map((registration) => {
+    const options = registration.id ? byId[registration.id] : undefined;
+    return options
+      ? {
+          ...registration,
+          options: { ...registration.options, public: options },
+        }
+      : registration;
+  });
+}
 /** A layer's `app/app.config.ts`, as `app-configs.generated.ts` lists them. */
 export interface DmsLayerAppConfig {
   /** The id of the frontend module the layer belongs to. */
@@ -1829,6 +1855,9 @@ function startAsyncData<T>(
   const idle = entry.result.status.value === "idle";
   if (runtime.isServer) {
     if (!immediate || !onServer) return undefined;
+    // A render that already answers a redirect throws its HTML away: what it
+    // still has to read would reach nobody.
+    if (runtime.serverRedirect) return undefined;
     if (idle && options.lazy) entry.schedule();
     else if (idle) void entry.load();
     const settled = entry.settled();
@@ -2464,6 +2493,35 @@ export function defineDmsPageMeta(meta: Record<string, unknown>): void {
     onServerPrefetch(() => navigation.then(ignoreSettlement, ignoreSettlement));
 }
 function ignoreSettlement(): void {}
+/**
+ * What Vue's development build passes `errorHandler` for an error thrown by a
+ * component's `setup`, sync or async (production passes a link instead; it has
+ * no warnings to scope either).
+ */
+const SETUP_FUNCTION_ERROR = "setup function";
+/**
+ * Whether a Vue warning comes from a component whose `setup` failed, or from
+ * under it. Vue still renders such a component, against the setup state that
+ * never came: in development, where a single-file component's template is
+ * compiled apart from its setup, the template reads the missing bindings, and
+ * every component it uses becomes `undefined` ("Invalid vnode type when
+ * creating vnode: undefined", then "Component <Anonymous> is missing template
+ * or render function" for the comment Vue renders in its place). The error
+ * page replaces that output (a server renders the page again, the browser
+ * swaps it), and the failure itself is already reported.
+ *
+ * Walks internal instances: a `<script setup>` component exposes itself, so
+ * its children's `$parent` is an expose proxy, not the proxy `errorHandler`
+ * received.
+ */
+function withinFailedSetup(
+  instance: ComponentInternalInstance | null,
+  failedSetups: WeakSet<ComponentInternalInstance>,
+): boolean {
+  for (let current = instance; current; current = current.parent)
+    if (failedSetups.has(current)) return true;
+  return false;
+}
 /** Shows the error page in place of the page, keeping the first failure. */
 function failPage(runtime: DmsFrontendRuntime, reason: unknown): void {
   runtime.currentError.value ??=
@@ -2554,6 +2612,80 @@ export const DmsLink: Component = defineComponent({
   },
 });
 
+/** How a keyboard hint prints its modifiers: macOS symbols, or PC key names. */
+export type DmsKbdPlatform = "mac" | "other";
+/**
+ * Where Nuxt UI's key hints read the platform: called in the setup of each
+ * component that prints one, it returns the platform that component renders.
+ * It must read on the server the platform it renders there, and keep it while
+ * its caller hydrates, so the browser's first render matches the server's.
+ */
+export type DmsKbdPlatformSource = () => Readonly<Ref<DmsKbdPlatform>>;
+
+const KBD_PLATFORM_KEY: InjectionKey<DmsKbdPlatformSource> =
+  Symbol("dms:kbd-platform");
+const MODIFIER_KBD_KEYS: Record<
+  DmsKbdPlatform,
+  Record<"meta" | "ctrl" | "alt", string>
+> = {
+  mac: { meta: "⌘", ctrl: "⌃", alt: "⌥" },
+  other: { meta: "Ctrl", ctrl: "Ctrl", alt: "Alt" },
+};
+const isModifierKbdKey = (value: string): value is "meta" | "ctrl" | "alt" =>
+  value === "meta" || value === "ctrl" || value === "alt";
+
+/**
+ * Gives Nuxt UI's key hints (`UKbd`, the `kbds` of its menus, the dashboard
+ * search button) the application's keyboard platform, so the server prints
+ * `meta` as "⌘" or "Ctrl" from the first render instead of a blank the
+ * browser fills in after mounting.
+ */
+export function provideDmsKbdPlatform(
+  app: App,
+  source: DmsKbdPlatformSource,
+): void {
+  app.provide(KBD_PLATFORM_KEY, source);
+}
+
+interface NuxtUiKbd {
+  macOS: ComputedRef<unknown>;
+  getKbdKey: (value?: string) => string | undefined;
+}
+
+/**
+ * Nuxt UI's `useKbd` as the DMS runs it (`ui-kbd.mjs` routes it here): a hint
+ * renders the same on the server and in the hydrating browser. Nuxt UI prints
+ * `meta`, `ctrl` and `alt` from a map shared by every hint and filled by the
+ * first one's `onMounted`, so a hint hydrating after that (in an async
+ * component) printed "⌘" over the server's blank. Each hint now keeps the
+ * server's value until its own `onMounted`; with a platform provided
+ * (`provideDmsKbdPlatform`), that value is the platform's from the start.
+ *
+ * @internal
+ */
+export function useDmsKbd(
+  shared: () => NuxtUiKbd,
+  keys: Readonly<Record<string, string>>,
+): NuxtUiKbd {
+  const { macOS } = shared();
+  const instance = getCurrentInstance();
+  const source = instance ? inject(KBD_PLATFORM_KEY, null) : null;
+  const platform = source ? source() : null;
+  // A hydrating component's vnode is bound to its server node before setup.
+  const hydrating = ref(!!instance?.vnode.el);
+  if (hydrating.value) onMounted(() => (hydrating.value = false));
+  return {
+    macOS,
+    getKbdKey(value) {
+      if (!value) return undefined;
+      if (!isModifierKbdKey(value)) return keys[value] || value;
+      if (platform) return MODIFIER_KBD_KEYS[platform.value][value];
+      if (typeof window === "undefined" || hydrating.value) return " ";
+      return MODIFIER_KBD_KEYS[macOS.value ? "mac" : "other"][value];
+    },
+  };
+}
+
 export const DmsClientOnly = defineComponent({
   name: "DmsClientOnly",
   setup(_, { slots }) {
@@ -2793,6 +2925,17 @@ export function useDmsPageLoading(): Readonly<Ref<boolean>> {
   return readonly(useDmsRuntime().pageLoading);
 }
 
+/**
+ * Whether the browser is hydrating the page the server rendered, whose first
+ * render must match the server's HTML: from the start of the application to
+ * the tick the page's `<Suspense>` resolves. False on the server, in a page
+ * the server did not render, and after a client navigation. As Nuxt's
+ * `nuxtApp.isHydrating`; read once, it is not reactive.
+ */
+export function isDmsHydrating(): boolean {
+  return useDmsRuntime().hydrating;
+}
+
 /**
  * The props of the `<Suspense>` around the page that keep `useDmsPageLoading`
  * in step with it. Cleared before the boundary unmounts, so a page left while
@@ -3344,7 +3487,31 @@ export async function installDmsPlugins(
       if (browserRuntime === runtime) browserRuntime = undefined;
     });
   }
-  app.config.errorHandler = (reason) => failPage(runtime, reason);
+  const failedSetups = new WeakSet<ComponentInternalInstance>();
+  const warnOutsideFailedSetups: AppConfig["warnHandler"] = (
+    message,
+    instance,
+    trace,
+  ) => {
+    // The comment Vue renders in place of an `undefined` component has no
+    // public instance: the template rendering it is the one that failed.
+    const source = instance?.$ ?? getCurrentInstance();
+    if (!withinFailedSetup(source, failedSetups))
+      console.warn(`[Vue warn]: ${message}${trace ? `\n${trace}` : ""}`);
+  };
+  app.config.errorHandler = (reason, instance, info) => {
+    if (instance && info === SETUP_FUNCTION_ERROR) {
+      failedSetups.add(instance.$);
+      // From the first failure on only: until then Vue keeps its own output,
+      // whose component trace shows the props. An app that already has a
+      // handler keeps it. A server renders a single page per app; in the
+      // browser the app outlives Inertia visits, so once a page has failed
+      // the handler stays for the session and later warnings print as plain
+      // text (no inspectable objects), still all of them.
+      app.config.warnHandler ??= warnOutsideFailedSetups;
+    }
+    failPage(runtime, reason);
+  };
   app.config.globalProperties.$dms = appContext;
   Reflect.set(app, "$dms", appContext);
   Reflect.set(app, "$i18n", i18n);

package/templates/vue/gitignore

@@ -10,6 +10,7 @@ frontend-modules/**/i18n/locales/
 # CSS hot update on plain navigation.
 auto-imports.d.ts
 components.d.ts
+sfc-global-types.generated.d.ts
 # Build output, which the email bundle watcher rewrites during development:
 # read as Tailwind sources, each rebuild would push a burst of CSS updates.
 dist/

package/templates/vue/main.ts

@@ -9,11 +9,14 @@ import {
   configureDmsApp,
   resolveDmsInertiaPage,
 } from "./app-runtime";
-import { setupFrontendModules } from "./frontend-module";
+import { setupFrontendModules, withPublicOptions } from "./frontend-module";
+import { parsePublicOptions } from "./public-options";
 import { frontendModules } from "./frontend-modules.generated";
 import { sameOriginIconProvider } from "./icon-api.mjs";
 
 const DEV_STYLE_ATTRIBUTE = "data-dms-dev-style";
+/** Mirrors `PUBLIC_OPTIONS_ELEMENT_ID` in `server/public-options.mjs`. */
+const PUBLIC_OPTIONS_ELEMENT_ID = "dms-public-options";
 
 /**
  * Hand each development stylesheet over to Vite.
@@ -57,6 +60,26 @@ if (import.meta.env.DEV) adoptViteDevStyles();
 // the generated server answers those queries from the installed collections.
 addAPIProvider("", sameOriginIconProvider(location.origin));
 
+/**
+ * Shows the URL of the page the server sent, when it rendered a query the page
+ * completed in place of the one requested (`renderDocument` in server.mjs).
+ * Replaced before Inertia starts: Inertia records a first page whose URL is
+ * not the address bar's as a new history entry, and Back would then lead to
+ * the URL the page completes again.
+ */
+function showServedUrl(url: string): void {
+  const served = new URL(url, location.href);
+  if (
+    served.pathname === location.pathname &&
+    served.search !== location.search
+  )
+    history.replaceState(
+      history.state,
+      "",
+      `${served.pathname}${served.search}${location.hash}`,
+    );
+}
+
 /**
  * Sets the modules up, then starts the app.
  *
@@ -67,7 +90,13 @@ addAPIProvider("", sameOriginIconProvider(location.origin));
  * browser requested one by one.
  */
 async function startDmsApp(): Promise<void> {
-  await setupFrontendModules(frontendModules, appConfigs);
+  const runtimeOptions = parsePublicOptions(
+    document.getElementById(PUBLIC_OPTIONS_ELEMENT_ID)?.textContent,
+  );
+  await setupFrontendModules(
+    withPublicOptions(frontendModules, runtimeOptions),
+    appConfigs,
+  );
   // A layer's app config edited during development reaches the page without a
   // reload. A server render imports the new configs instead.
   syncAppConfigs(applyLayerAppConfigs);
@@ -75,6 +104,7 @@ async function startDmsApp(): Promise<void> {
   createInertiaApp({
     resolve: resolveDmsInertiaPage,
     async setup({ App, el, props, plugin }) {
+      showServedUrl(props.initialPage.url);
       const root = { render: () => h(App, props) };
       const app = el.hasAttribute("data-server-rendered")
         ? createSSRApp(root)

package/templates/vue/network-error.ts

@@ -18,7 +18,9 @@ const NETWORK_ERROR_KEY = "error.network";
 const DEFAULT_LOCALE = "en";
 // Shipped with the renderer, since no module is guaranteed to translate the
 // case; a module overrides them with `error.network.title` and
-// `error.network.description` in its own locale files.
+// `error.network.description` in its own locale files. `te()` reads the
+// visitor's locale alone, and the generated catalogs leave these keys out of
+// their English fill, so only that locale's own message replaces them.
 const NETWORK_ERROR_MESSAGES: Record<
   string,
   Record<"title" | "description", string>

package/templates/vue/package.json

@@ -23,9 +23,9 @@
     "@nuxt/ui": "4.10.0",
     "@tailwindcss/typography": "^0.5.19",
     "@unhead/vue": "^2.0.14",
-    "@vitejs/plugin-vue": "^6.0.0",
+    "@vitejs/plugin-vue": "^6.0.6",
     "@vue/server-renderer": "^3.5.0",
-    "@vueuse/core": "^14.3.0",
+    "@vueuse/core": "14.4.0",
     "defu": "^6.1.4",
     "devalue": "^5.9.4",
     "ofetch": "^1.4.1",
@@ -34,7 +34,7 @@
     "ufo": "^1.6.1",
     "unplugin-auto-import": "^20.2.0",
     "unplugin-vue-components": "^29.0.0",
-    "vite": "^7.0.0",
+    "vite": "^8.3.0",
     "vue": "^3.5.0",
     "vue-i18n": "^11.1.12"
   },

package/templates/vue/patches/@vueuse__core@14.4.0.patch

@@ -0,0 +1,24 @@
+diff --git a/dist/index.js b/dist/index.js
+index 772a5e9..d433a57 100644
+--- a/dist/index.js
++++ b/dist/index.js
+@@ -2047,11 +2047,16 @@ function useColorMode(options = {}) {
+ 		let attributeToChange = null;
+ 		if (attribute === "class") {
+ 			const current = value.split(/\s/g);
++			// Patched by @antelopejs/dms-frontend until vueuse ships the fix: only
++			// the classes `el` lacks or still carries count as a change, so a mode
++			// already applied (by the server render, another instance or the
++			// mount re-run) skips the forced style recalculation below.
+ 			Object.values(modes).flatMap((i) => (i || "").split(/\s/g)).filter(Boolean).forEach((v) => {
+-				if (current.includes(v)) classesToAdd.add(v);
+-				else classesToRemove.add(v);
++				if (current.includes(v)) {
++					if (!el.classList.contains(v)) classesToAdd.add(v);
++				} else if (el.classList.contains(v)) classesToRemove.add(v);
+ 			});
+-		} else attributeToChange = {
++		} else if (el.getAttribute(attribute) !== value) attributeToChange = {
+ 			key: attribute,
+ 			value
+ 		};

package/templates/vue/pnpm-workspace.yaml

@@ -9,3 +9,8 @@ patchedDependencies:
   # Menu and breadcrumb links active on a sibling route (`/test` on `/test-a`):
   # nuxt/ui#6803, fixed by nuxt/ui#6809.
   "@nuxt/ui@4.10.0": patches/@nuxt__ui@4.10.0.patch
+  # useColorMode re-applies a color mode `<html>` already carries, forcing a
+  # full style recalculation on every call (6 on the dashboard home, 216 ms of
+  # main thread at 4x CPU): the guard of vueuse#4001 compares the modes with the
+  # requested value instead of the element. vueuse 15.0.0 still ships it.
+  "@vueuse/core@14.4.0": patches/@vueuse__core@14.4.0.patch

package/templates/vue/prepare-types.mjs

@@ -23,12 +23,7 @@ await build({
   build: {
     write: false,
     emptyOutDir: false,
-    rollupOptions: {
-      input: ENTRY,
-      // The entry is empty on purpose.
-      onwarn: (warning, warn) => {
-        if (warning.code !== "EMPTY_BUNDLE") warn(warning);
-      },
-    },
+    // The entry is empty on purpose; Rolldown does not warn about it.
+    rolldownOptions: { input: ENTRY },
   },
 });

package/templates/vue/public-options.ts

@@ -0,0 +1,19 @@
+/** Public options by module id, as `ajs dms start` computes them. */
+export type DmsPublicOptionsById = Record<string, Record<string, unknown>>;
+
+/** `DMS_PUBLIC_OPTIONS` as options by module id, undefined when unset. */
+export function parsePublicOptions(
+  raw: string | null | undefined,
+): DmsPublicOptionsById | undefined {
+  if (!raw) return undefined;
+  try {
+    const parsed: unknown = JSON.parse(raw);
+    return typeof parsed === "object" &&
+      parsed !== null &&
+      !Array.isArray(parsed)
+      ? (parsed as DmsPublicOptionsById)
+      : undefined;
+  } catch {
+    return undefined;
+  }
+}