@reckona/mreact-router 0.0.65 → 0.0.67

package/src/client.ts

@@ -0,0 +1,3398 @@
+import { createHash } from "node:crypto";
+import { readFile, stat } from "node:fs/promises";
+import { builtinModules } from "node:module";
+import { dirname, extname, join, relative, sep } from "node:path";
+import {
+  collectClientRouteModuleAnalysis,
+  formatDiagnostic,
+  type ComponentMetadata,
+  type ClientRouteModuleAnalysis,
+  type ClientRouteStaticImportReference,
+  type ClientReferenceMetadata,
+  type StaticImportReference,
+  type TopLevelExportRenderInfo,
+} from "@reckona/mreact-compiler";
+import {
+  collectClientRouteModuleAnalysisFromContext,
+  createCompilerModuleContext,
+  stripTypeScriptWithOxc,
+  transformCompilerModuleContext,
+  type CompilerModuleContext,
+} from "@reckona/mreact-compiler/internal";
+import { assetPath } from "./assets.js";
+import {
+  bundleRouterModule,
+  bundleRouterModules,
+  type RouterCompatBuildApi,
+  type RouterBundleAssetOutput,
+  type RouterBundleChunkOutput,
+} from "./bundle-pipeline.js";
+import type { AppRoute } from "./routes.js";
+import { existingRouteShellCandidates } from "./route-shells.js";
+import { stripRouteClientOnlyExports } from "./route-source.js";
+import { hasJsxSyntax } from "./source-jsx.js";
+import { sourceModuleCandidates } from "./source-modules.js";
+import { escapeHtmlQuotedAttribute as escapeHtmlAttribute } from "@reckona/mreact-shared/html-escape";
+import { workspacePackageFile } from "./workspace-packages.js";
+import type { Plugin, PluginOption } from "vite";
+
+const nodeBuiltinPackages = new Set(builtinModules.flatMap((name) => [name, `node:${name}`]));
+
+export interface ClientRouteManifestEntry {
+  bytes?: number;
+  css?: readonly string[];
+  path: string;
+  kind: AppRoute["kind"];
+  client: boolean;
+  devScript?: string;
+  imports?: readonly string[];
+  navigation?: boolean;
+  navigationScript?: string;
+  routeId?: string;
+  script?: string;
+  sourceMap?: string;
+}
+
+export interface BuildClientRouteOutputOptions {
+  code: string;
+  clientBoundaryImports?: readonly string[] | undefined;
+  clientReferenceImports?: readonly ClientReferenceImport[] | undefined;
+  clientReferenceManifest?: readonly ClientReferenceMetadata[] | undefined;
+  filename: string;
+  minify?: boolean | undefined;
+  routePath: string;
+  sourceMap?: boolean | undefined;
+  vitePlugins?: readonly PluginOption[] | undefined;
+  clientNavigation?: boolean | undefined;
+}
+
+export interface BuildClientRouteBatchOutput {
+  assets?: RouterBundleAssetOutput[] | undefined;
+  chunks: readonly RouterBundleChunkOutput[];
+  routes: readonly BuildClientRouteBatchRouteOutput[];
+}
+
+export interface BuildClientRouteBatchRouteOutput {
+  chunk: RouterBundleChunkOutput;
+  routeId: string;
+  routePath: string;
+}
+
+export interface ClientRouteInferenceCache {
+  moduleAnalysisByFile: Map<string, Promise<ClientRouteModuleAnalysis>>;
+  moduleContextByFile: Map<string, Promise<CompilerModuleContext>>;
+  resolvedByImport: Map<string, Promise<string | undefined>>;
+  sourceByFile: Map<string, Promise<CachedClientRouteSource>>;
+  transformedSourceByFile: Map<string, Promise<CachedClientRouteSource>>;
+}
+
+interface CachedClientRouteSource {
+  signature: string;
+  source: string;
+}
+
+interface ClientRouteSourceTransform {
+  cacheKey: string;
+  transform(filename: string, code: string): Promise<string>;
+}
+
+export interface ClientRouteInferenceResult {
+  client: boolean;
+  clientBoundaryImports: string[];
+  diagnostics: ClientRouteInferenceDiagnostic[];
+}
+
+interface ClientRouteModuleInferenceResult extends ClientRouteInferenceResult {
+  clientBoundaryExportNames: string[];
+  clientBoundaryModule: boolean;
+  nestedClientExportNames: string[];
+  clientReferenceSourceFiles: string[];
+  serverOnly: boolean;
+  serverOnlyClientRuntime: boolean;
+}
+
+export interface ClientReferenceImport {
+  exportName: string;
+  importSource: string;
+  name: string;
+}
+
+export interface ClientRouteReferenceResult extends ClientRouteInferenceResult {
+  clientReferenceImports: ClientReferenceImport[];
+  clientReferenceManifest: ClientReferenceMetadata[];
+}
+
+export interface ClientRouteInferenceDiagnostic {
+  code:
+    | typeof clientBoundaryInferenceServerOnlyReferenceCode
+    | typeof clientBoundaryInferenceUnsupportedReferenceCode;
+  filename: string;
+  level: "warn";
+  localNames: string[];
+  message: string;
+  source: string;
+}
+
+const clientBoundaryInferenceServerOnlyReferenceCode =
+  "MR_CLIENT_BOUNDARY_INFERENCE_SERVER_ONLY_REFERENCE";
+const clientBoundaryInferenceUnsupportedReferenceCode =
+  "MR_CLIENT_BOUNDARY_INFERENCE_UNSUPPORTED_REFERENCE";
+
+export async function routeToClientManifestEntry(
+  route: AppRoute,
+): Promise<ClientRouteManifestEntry> {
+  if (route.kind !== "page") {
+    return { path: route.path, kind: route.kind, client: false };
+  }
+
+  const code = await readFile(route.file, "utf8");
+  const inference = await inferClientRouteModule({
+    code: stripRouteClientOnlyExports(code),
+    filename: route.file,
+    routePath: route.path,
+  });
+
+  return inference.client
+    ? {
+        path: route.path,
+        kind: route.kind,
+        client: true,
+        routeId: routeIdForPath(route.path),
+        script: clientScriptForPath(route.path),
+      }
+    : { path: route.path, kind: route.kind, client: false };
+}
+
+export function createClientRouteInferenceCache(): ClientRouteInferenceCache {
+  return {
+    moduleAnalysisByFile: new Map(),
+    moduleContextByFile: new Map(),
+    resolvedByImport: new Map(),
+    sourceByFile: new Map(),
+    transformedSourceByFile: new Map(),
+  };
+}
+
+export async function isClientRouteModule(options: {
+  appDir?: string | undefined;
+  cache?: ClientRouteInferenceCache | undefined;
+  code: string;
+  filename: string;
+  routePath?: string | undefined;
+  vitePlugins?: readonly PluginOption[] | undefined;
+}): Promise<boolean> {
+  return (await inferClientRouteModule(options)).client;
+}
+
+export async function inferClientRouteModule(options: {
+  appDir?: string | undefined;
+  cache?: ClientRouteInferenceCache | undefined;
+  code: string;
+  filename: string;
+  moduleContext?: CompilerModuleContext | undefined;
+  routePath?: string | undefined;
+  vitePlugins?: readonly PluginOption[] | undefined;
+}): Promise<ClientRouteInferenceResult> {
+  const cache = options.cache ?? createClientRouteInferenceCache();
+  const sourceTransform = clientRouteSourceTransformForVitePlugins(options.vitePlugins);
+  const code = await transformClientRouteSource({
+    code: options.code,
+    filename: options.filename,
+    sourceTransform,
+  });
+
+  try {
+    const routeInference = await inferClientRouteModuleSource({
+      cache,
+      code,
+      filename: options.filename,
+      ...(sourceTransform === undefined ? { moduleContext: options.moduleContext } : {}),
+      root: true,
+      seen: new Set(),
+      sourceTransform,
+    });
+
+    if (options.appDir === undefined) {
+      return routeInference;
+    }
+
+    const shellInferences = await inferClientRouteShellModules({
+      appDir: options.appDir,
+      cache,
+      filename: options.filename,
+      sourceTransform,
+    });
+
+    return {
+      client: routeInference.client || shellInferences.some((inference) => inference.client),
+      clientBoundaryImports: routeInference.clientBoundaryImports,
+      diagnostics: [
+        ...routeInference.diagnostics,
+        ...shellInferences.flatMap((inference) => inference.diagnostics),
+      ],
+    };
+  } catch (error) {
+    throw new Error(
+      `Failed to infer client route for ${options.routePath ?? "<unknown>"} (${options.filename}).\n${errorMessage(error)}`,
+      { cause: error },
+    );
+  }
+}
+
+export async function collectClientRouteReferences(options: {
+  appDir?: string | undefined;
+  cache?: ClientRouteInferenceCache | undefined;
+  code: string;
+  filename: string;
+  vitePlugins?: readonly PluginOption[] | undefined;
+}): Promise<ClientRouteReferenceResult> {
+  const cache = options.cache ?? createClientRouteInferenceCache();
+  const sourceTransform = clientRouteSourceTransformForVitePlugins(options.vitePlugins);
+  const code = await transformClientRouteSource({
+    code: options.code,
+    filename: options.filename,
+    sourceTransform,
+  });
+  const routeModuleContext = await compilerModuleContextForSource({
+    cache,
+    code,
+    filename: options.filename,
+  });
+  const routeInference = await inferClientRouteModuleSource({
+    cache,
+    code,
+    filename: options.filename,
+    moduleContext: routeModuleContext,
+    root: true,
+    seen: new Set(),
+    sourceTransform,
+  });
+  const sources: Array<{
+    code: string;
+    filename: string;
+    inference: ClientRouteModuleInferenceResult;
+    moduleContext: CompilerModuleContext;
+  }> = [];
+  const seenSourceFiles = new Set<string>();
+  const addSource = async (sourceOptions: {
+    code: string;
+    filename: string;
+    inference?: ClientRouteModuleInferenceResult | undefined;
+    moduleContext?: CompilerModuleContext | undefined;
+  }) => {
+    if (seenSourceFiles.has(sourceOptions.filename)) {
+      return;
+    }
+
+    seenSourceFiles.add(sourceOptions.filename);
+    const moduleContext =
+      sourceOptions.moduleContext ??
+      (await compilerModuleContextForSource({
+        cache,
+        code: sourceOptions.code,
+        filename: sourceOptions.filename,
+      }));
+    const inference =
+      sourceOptions.inference ??
+      (await inferClientRouteModuleSource({
+        cache,
+        code: sourceOptions.code,
+        filename: sourceOptions.filename,
+        moduleContext,
+        root: true,
+        seen: new Set(),
+        sourceTransform,
+      }));
+    sources.push({
+      code: sourceOptions.code,
+      filename: sourceOptions.filename,
+      inference,
+      moduleContext,
+    });
+
+    for (const referenceFile of inference.clientReferenceSourceFiles) {
+      const code = stripRouteClientOnlyExports(
+        await readClientRouteSource({ cache, filename: referenceFile, sourceTransform }),
+      );
+      await addSource({ code, filename: referenceFile });
+    }
+  };
+
+  await addSource({
+    code,
+    filename: options.filename,
+    inference: routeInference,
+    moduleContext: routeModuleContext,
+  });
+
+  if (options.appDir !== undefined) {
+    for (const shell of await clientShellFilesForPage(options.appDir, options.filename)) {
+      const code = stripRouteClientOnlyExports(
+        await readClientRouteSource({ cache, filename: shell, sourceTransform }),
+      );
+      const moduleContext = await compilerModuleContextForSource({
+        cache,
+        code,
+        filename: shell,
+      });
+      await addSource({
+        code,
+        filename: shell,
+        inference: await inferClientRouteModuleSource({
+          cache,
+          code,
+          filename: shell,
+          moduleContext,
+          root: true,
+          seen: new Set(),
+          sourceTransform,
+        }),
+        moduleContext,
+      });
+    }
+  }
+
+  const clientReferenceManifest: ClientReferenceMetadata[] = [];
+  const clientReferenceImports: ClientReferenceImport[] = [];
+  const seenReferences = new Set<string>();
+
+  for (const source of sources) {
+    const output = transformCompilerModuleContext({
+      code: source.code,
+      clientBoundaryImports: source.inference.clientBoundaryImports,
+      dev: false,
+      filename: source.filename,
+      moduleContext: source.moduleContext,
+      target: "server",
+    });
+    const fatalDiagnostics = output.diagnostics.filter(
+      (diagnostic) =>
+        diagnostic.code !== "MR_UNSUPPORTED_SERVER_EVENT_HANDLER" &&
+        diagnostic.code !== "MR_UNSUPPORTED_AWAIT_INNER_COMPONENT",
+    );
+
+    if (fatalDiagnostics.length > 0) {
+      throw new Error(
+        fatalDiagnostics
+          .map((diagnostic) => formatDiagnostic(source.filename, diagnostic))
+          .join("\n"),
+      );
+    }
+
+    for (const reference of output.metadata.clientReferenceManifest ?? []) {
+      const key = `${reference.name}\0${reference.moduleId}\0${reference.exportName}`;
+
+      if (seenReferences.has(key)) {
+        continue;
+      }
+
+      seenReferences.add(key);
+      clientReferenceManifest.push(reference);
+      clientReferenceImports.push({
+        exportName: reference.exportName,
+        importSource: clientReferenceImportSource({
+          moduleId: reference.moduleId,
+          routeFile: options.filename,
+          sourceFile: source.filename,
+        }),
+        name: reference.name,
+      });
+    }
+  }
+
+  return {
+    client:
+      routeInference.client ||
+      sources.some((source) => source.filename !== options.filename && source.inference.client),
+    clientBoundaryImports: routeInference.clientBoundaryImports,
+    clientReferenceImports,
+    clientReferenceManifest,
+    diagnostics: sources.flatMap((source) => source.inference.diagnostics),
+  };
+}
+
+async function inferClientRouteShellModules(options: {
+  appDir: string;
+  cache: ClientRouteInferenceCache;
+  filename: string;
+  sourceTransform?: ClientRouteSourceTransform | undefined;
+}): Promise<ClientRouteInferenceResult[]> {
+  return Promise.all(
+    (await clientShellFilesForPage(options.appDir, options.filename)).map(async (shell) => {
+      const code = stripRouteClientOnlyExports(
+        await readClientRouteSource({
+          cache: options.cache,
+          filename: shell,
+          sourceTransform: options.sourceTransform,
+        }),
+      );
+      return await inferClientRouteModuleSource({
+        cache: options.cache,
+        code,
+        filename: shell,
+        root: true,
+        seen: new Set(),
+        sourceTransform: options.sourceTransform,
+      });
+    }),
+  );
+}
+
+async function clientShellFilesForPage(appDir: string, pageFile: string): Promise<string[]> {
+  const existing = await existingRouteShellCandidates(
+    appDir,
+    pageFile,
+    async (file) => file !== pageFile && (await isFile(file)),
+  );
+
+  return existing.map((candidate) => candidate.file);
+}
+
+function clientReferenceImportSource(options: {
+  moduleId: string;
+  routeFile: string;
+  sourceFile: string;
+}): string {
+  if (!options.moduleId.startsWith(".")) {
+    return options.moduleId;
+  }
+
+  const absolute = join(dirname(options.sourceFile), options.moduleId);
+  const relativeImport = relative(dirname(options.routeFile), absolute).replaceAll(sep, "/");
+
+  return relativeImport.startsWith(".") ? relativeImport : `./${relativeImport}`;
+}
+
+export function isClientRouteSource(code: string): boolean {
+  const analysis = collectClientRouteModuleAnalysis({ code });
+
+  return (
+    analysis.hasUseClientDirective || (!analysis.hasUseServerDirective && analysis.clientRuntime)
+  );
+}
+
+function isExplicitClientRouteSource(
+  analysis: ClientRouteModuleAnalysis,
+  filename: string,
+): boolean {
+  return analysis.hasUseClientDirective || isClientBoundaryFilename(filename);
+}
+
+function isClientBoundaryFilename(filename: string): boolean {
+  return /\.(?:client|compat)(?:\.mreact)?\.[cm]?[jt]sx?$/.test(filename);
+}
+
+function isServerOnlyClientRouteSource(analysis: ClientRouteModuleAnalysis): boolean {
+  return analysis.hasUseServerDirective;
+}
+
+function isServerOnlyImportSource(source: string): boolean {
+  return nodeBuiltinPackages.has(source);
+}
+
+function hasServerOnlyImports(analysis: ClientRouteModuleAnalysis): boolean {
+  return analysis.staticImports.some((reference) => isServerOnlyImportSource(reference.source));
+}
+
+async function inferClientRouteModuleSource(options: {
+  cache: ClientRouteInferenceCache;
+  code: string;
+  filename: string;
+  moduleContext?: CompilerModuleContext | undefined;
+  root: boolean;
+  seen: Set<string>;
+  sourceTransform?: ClientRouteSourceTransform | undefined;
+}): Promise<ClientRouteModuleInferenceResult> {
+  const analysis = await clientRouteModuleAnalysisForSource(options);
+
+  if (isServerOnlyClientRouteSource(analysis)) {
+    return emptyClientRouteModuleInferenceResult({
+      serverOnly: true,
+      serverOnlyClientRuntime: analysis.clientRuntime,
+    });
+  }
+
+  if (isExplicitClientRouteSource(analysis, options.filename)) {
+    return emptyClientRouteModuleInferenceResult({
+      client: true,
+      clientBoundaryModule: true,
+    });
+  }
+
+  if (options.seen.has(options.filename)) {
+    return emptyClientRouteModuleInferenceResult();
+  }
+
+  options.seen.add(options.filename);
+
+  try {
+    const clientBoundaryImports: string[] = [];
+    const clientBoundaryExportNames = new Set<string>();
+    const nestedClientExportNames = new Set<string>();
+    const clientReferenceSourceFiles: string[] = [];
+    const diagnostics: ClientRouteInferenceDiagnostic[] = [];
+    let clientProxy = false;
+    let nestedClient = false;
+    const exportInfo = analysis.topLevelExportRenderInfo;
+    const implicitModuleClient = exportInfo.length === 0 && analysis.clientRuntime;
+    for (const info of exportInfo) {
+      if (info.clientRuntime) {
+        clientBoundaryExportNames.add(info.name);
+      }
+    }
+    if (
+      hasServerOnlyImports(analysis) &&
+      (implicitModuleClient || clientBoundaryExportNames.size > 0)
+    ) {
+      return emptyClientRouteModuleInferenceResult({
+        serverOnly: true,
+        serverOnlyClientRuntime: true,
+      });
+    }
+    const jsxComponentRoots = new Set(analysis.jsxComponentRoots);
+    const componentCallRoots = new Set(analysis.componentCallRoots);
+    const renderedComponentRoots = unionSets(jsxComponentRoots, componentCallRoots);
+    const identifierReferences = new Set(analysis.identifierReferences);
+
+    for (const reference of analysis.staticImports) {
+      const renderedByJsx = isRenderedImportReference(reference, jsxComponentRoots);
+      const renderedByCall = isRenderedImportReference(reference, componentCallRoots);
+      const rendered = isRenderedImportReference(reference, renderedComponentRoots);
+      const referenced = isReferencedImportReference(reference, identifierReferences);
+
+      if (
+        !rendered &&
+        (!referenced || !hasPotentialClientBoundaryReference(reference, identifierReferences))
+      ) {
+        continue;
+      }
+      if (reference.sideEffect && isStyleModuleSpecifier(reference.source)) {
+        continue;
+      }
+
+      const resolved = await resolveAppLocalModule({
+        allowExplicitNonSource: options.sourceTransform !== undefined,
+        cache: options.cache,
+        importer: options.filename,
+        specifier: reference.source,
+      });
+
+      if (resolved === undefined) {
+        continue;
+      }
+
+      const source = await readClientRouteSource({
+        cache: options.cache,
+        filename: resolved,
+        sourceTransform: options.sourceTransform,
+      });
+      const imported = await inferClientRouteModuleSource({
+        cache: options.cache,
+        code: source,
+        filename: resolved,
+        moduleContext: await compilerModuleContextForSource({
+          cache: options.cache,
+          code: source,
+          filename: resolved,
+        }),
+        root: false,
+        seen: options.seen,
+        sourceTransform: options.sourceTransform,
+      });
+      diagnostics.push(...imported.diagnostics);
+
+      if (!imported.client) {
+        if (imported.serverOnlyClientRuntime && rendered) {
+          diagnostics.push(
+            serverOnlyClientImportReferenceDiagnostic({
+              filename: options.filename,
+              reference,
+            }),
+          );
+        }
+        continue;
+      }
+
+      if (rendered) {
+        const importedExportNames = renderedImportedExportNames(reference, renderedComponentRoots);
+        const renderedExportNames = renderedLocalExportNames(reference, exportInfo);
+        const importedBoundary =
+          imported.clientBoundaryModule ||
+          matchesInferredExportNames(importedExportNames, imported.clientBoundaryExportNames);
+        const importedNested = matchesInferredExportNames(
+          importedExportNames,
+          imported.nestedClientExportNames,
+        );
+        if (!importedBoundary && !importedNested) {
+          continue;
+        }
+
+        nestedClient = true;
+
+        for (const exportName of renderedExportNames) {
+          if (importedBoundary || importedNested || renderedByCall) {
+            nestedClientExportNames.add(exportName);
+          }
+        }
+
+        if (renderedByCall && !renderedByJsx) {
+          continue;
+        }
+
+        if (!importedBoundary) {
+          clientReferenceSourceFiles.push(resolved);
+          continue;
+        }
+
+        clientBoundaryImports.push(reference.source);
+        continue;
+      }
+
+      const diagnostic = unsupportedClientImportReferenceDiagnostic({
+        filename: options.filename,
+        identifierReferences,
+        reference,
+      });
+
+      if (diagnostic !== undefined) {
+        diagnostics.push(diagnostic);
+      }
+    }
+
+    if (!options.root) {
+      for (const reference of analysis.staticExports) {
+        const resolved = await resolveAppLocalModule({
+          allowExplicitNonSource: options.sourceTransform !== undefined,
+          cache: options.cache,
+          importer: options.filename,
+          specifier: reference.source,
+        });
+
+        if (resolved === undefined) {
+          continue;
+        }
+
+        const source = await readClientRouteSource({
+          cache: options.cache,
+          filename: resolved,
+          sourceTransform: options.sourceTransform,
+        });
+        const exported = await inferClientRouteModuleSource({
+          cache: options.cache,
+          code: source,
+          filename: resolved,
+          moduleContext: await compilerModuleContextForSource({
+            cache: options.cache,
+            code: source,
+            filename: resolved,
+          }),
+          root: false,
+          seen: options.seen,
+          sourceTransform: options.sourceTransform,
+        });
+        diagnostics.push(...exported.diagnostics);
+
+        if (exported.clientBoundaryModule) {
+          clientProxy = true;
+        } else if (exported.clientBoundaryExportNames.length > 0) {
+          for (const exportName of reference.exportedNames) {
+            if (exported.clientBoundaryExportNames.includes(exportName)) {
+              clientBoundaryExportNames.add(exportName);
+            }
+          }
+        } else if (exported.client) {
+          nestedClient = true;
+          clientReferenceSourceFiles.push(resolved);
+        }
+      }
+    }
+
+    return {
+      client:
+        clientBoundaryImports.length > 0 ||
+        clientBoundaryExportNames.size > 0 ||
+        implicitModuleClient ||
+        clientProxy ||
+        nestedClient,
+      clientBoundaryImports,
+      clientBoundaryExportNames: Array.from(clientBoundaryExportNames),
+      clientBoundaryModule: clientProxy || implicitModuleClient,
+      nestedClientExportNames: Array.from(nestedClientExportNames),
+      clientReferenceSourceFiles: Array.from(new Set(clientReferenceSourceFiles)),
+      diagnostics,
+      serverOnly: false,
+      serverOnlyClientRuntime: false,
+    };
+  } finally {
+    options.seen.delete(options.filename);
+  }
+}
+
+function emptyClientRouteModuleInferenceResult(
+  overrides: Partial<ClientRouteModuleInferenceResult> = {},
+): ClientRouteModuleInferenceResult {
+  return {
+    client: false,
+    clientBoundaryImports: [],
+    clientBoundaryExportNames: [],
+    clientBoundaryModule: false,
+    nestedClientExportNames: [],
+    clientReferenceSourceFiles: [],
+    diagnostics: [],
+    serverOnly: false,
+    serverOnlyClientRuntime: false,
+    ...overrides,
+  };
+}
+
+async function clientRouteModuleAnalysisForSource(options: {
+  cache: ClientRouteInferenceCache;
+  code: string;
+  filename: string;
+  moduleContext?: CompilerModuleContext | undefined;
+}): Promise<ClientRouteModuleAnalysis> {
+  const cacheKey = sourceAnalysisCacheKey(options.filename, options.code);
+  const cached = options.cache.moduleAnalysisByFile.get(cacheKey);
+
+  if (cached !== undefined) {
+    return cached;
+  }
+
+  const analysis = Promise.resolve().then(async () =>
+    collectClientRouteModuleAnalysisFromContext(
+      options.moduleContext ??
+        (await compilerModuleContextForSource({
+          cache: options.cache,
+          code: options.code,
+          filename: options.filename,
+        })),
+    ),
+  );
+  options.cache.moduleAnalysisByFile.set(cacheKey, analysis);
+  return analysis;
+}
+
+export async function compilerModuleContextForSource(options: {
+  cache: ClientRouteInferenceCache;
+  code: string;
+  filename: string;
+}): Promise<CompilerModuleContext> {
+  const cacheKey = sourceAnalysisCacheKey(options.filename, options.code);
+  const cached = options.cache.moduleContextByFile.get(cacheKey);
+
+  if (cached !== undefined) {
+    return cached;
+  }
+
+  const context = Promise.resolve().then(() =>
+    createCompilerModuleContext({
+      code: options.code,
+      filename: options.filename,
+    }),
+  );
+  options.cache.moduleContextByFile.set(cacheKey, context);
+  return context;
+}
+
+function sourceAnalysisCacheKey(filename: string, code: string): string {
+  return `${filename}\0${hashSourceText(code)}`;
+}
+
+function hashSourceText(text: string): string {
+  return createHash("sha256").update(text).digest("hex");
+}
+
+function isRenderedImportReference(
+  reference: StaticImportReference,
+  componentRoots: ReadonlySet<string>,
+): boolean {
+  return (
+    reference.sideEffect || reference.localNames.some((localName) => componentRoots.has(localName))
+  );
+}
+
+function isReferencedImportReference(
+  reference: StaticImportReference,
+  identifierReferences: ReadonlySet<string>,
+): boolean {
+  return (
+    reference.sideEffect ||
+    reference.localNames.some((localName) => identifierReferences.has(localName))
+  );
+}
+
+function hasPotentialClientBoundaryReference(
+  reference: ClientRouteStaticImportReference,
+  identifierReferences: ReadonlySet<string>,
+): boolean {
+  return (
+    reference.sideEffect ||
+    reference.specifiers.some(
+      (specifier) =>
+        specifier.kind === "namespace" && identifierReferences.has(specifier.localName),
+    ) ||
+    reference.localNames.some(
+      (localName) => identifierReferences.has(localName) && startsUppercase(localName),
+    )
+  );
+}
+
+function isStyleModuleSpecifier(source: string): boolean {
+  const pathname = source.split(/[?#]/u, 1)[0] ?? source;
+  return styleModuleExtensions.has(extname(pathname));
+}
+
+const styleModuleExtensions = new Set([
+  ".css",
+  ".less",
+  ".sass",
+  ".scss",
+  ".styl",
+  ".stylus",
+]);
+
+function renderedImportedExportNames(
+  reference: ClientRouteStaticImportReference,
+  componentRoots: ReadonlySet<string>,
+): string[] | undefined {
+  if (reference.sideEffect) {
+    return undefined;
+  }
+
+  const names = new Set<string>();
+
+  for (const specifier of reference.specifiers) {
+    if (!componentRoots.has(specifier.localName)) {
+      continue;
+    }
+
+    if (specifier.kind === "namespace") {
+      return undefined;
+    }
+
+    names.add(specifier.importedName);
+  }
+
+  return Array.from(names);
+}
+
+function renderedLocalExportNames(
+  reference: StaticImportReference,
+  exportInfo: readonly TopLevelExportRenderInfo[],
+): string[] {
+  const localNames = new Set(reference.localNames);
+  const rendered = exportInfo
+    .filter((info) => renderedComponentRootNames(info).some((root) => localNames.has(root)))
+    .map((info) => info.name);
+
+  return rendered.length === 0 ? ["default"] : rendered;
+}
+
+function renderedComponentRootNames(info: TopLevelExportRenderInfo): string[] {
+  return [...info.renderedComponentRoots, ...info.calledComponentRoots];
+}
+
+function unionSets<T>(left: ReadonlySet<T>, right: ReadonlySet<T>): ReadonlySet<T> {
+  return new Set([...left, ...right]);
+}
+
+function matchesInferredExportNames(
+  importedExportNames: readonly string[] | undefined,
+  inferredExportNames: readonly string[],
+): boolean {
+  if (importedExportNames === undefined) {
+    return inferredExportNames.length > 0;
+  }
+
+  return importedExportNames.some((name) => inferredExportNames.includes(name));
+}
+
+function serverOnlyClientImportReferenceDiagnostic(options: {
+  filename: string;
+  reference: StaticImportReference;
+}): ClientRouteInferenceDiagnostic {
+  return {
+    code: clientBoundaryInferenceServerOnlyReferenceCode,
+    filename: options.filename,
+    level: "warn",
+    localNames: options.reference.localNames,
+    message:
+      `${options.filename}: server-only component import ${JSON.stringify(options.reference.source)} ` +
+      "uses client runtime syntax but is marked with server-only semantics. Automatic client " +
+      "boundary detection skipped it. Move the interactive UI behind a .client module or add an " +
+      "explicit clientBoundaryImports entry.",
+    source: options.reference.source,
+  };
+}
+
+function unsupportedClientImportReferenceDiagnostic(options: {
+  filename: string;
+  identifierReferences: ReadonlySet<string>;
+  reference: StaticImportReference;
+}): ClientRouteInferenceDiagnostic | undefined {
+  if (options.reference.sideEffect) {
+    return undefined;
+  }
+
+  const localNames = options.reference.localNames.filter((name) =>
+    options.identifierReferences.has(name),
+  );
+
+  if (localNames.length === 0) {
+    return undefined;
+  }
+
+  return {
+    code: clientBoundaryInferenceUnsupportedReferenceCode,
+    filename: options.filename,
+    level: "warn",
+    localNames,
+    message:
+      `${options.filename}: client component import ${JSON.stringify(options.reference.source)} ` +
+      `is referenced as ${localNames.map((name) => JSON.stringify(name)).join(", ")} but ` +
+      "was not rendered through a supported static JSX pattern. Automatic client boundary " +
+      "detection supports direct JSX such as <Counter />, JSX member roots such as " +
+      "<components.Counter />, and simple aliases such as const Alias = Counter. For dynamic " +
+      `registries or computed component selection, add ${JSON.stringify(options.reference.source)} ` +
+      "to clientBoundaryImports.",
+    source: options.reference.source,
+  };
+}
+
+function startsUppercase(value: string): boolean {
+  return /^[A-Z]/.test(value);
+}
+
+export function formatClientRouteInferenceDiagnostic(
+  diagnostic: ClientRouteInferenceDiagnostic,
+): string {
+  return `${diagnostic.code}: ${diagnostic.message}`;
+}
+
+async function resolveAppLocalModule(options: {
+  allowExplicitNonSource?: boolean | undefined;
+  cache: ClientRouteInferenceCache;
+  importer: string;
+  specifier: string;
+}): Promise<string | undefined> {
+  if (!options.specifier.startsWith(".")) {
+    return undefined;
+  }
+
+  const cacheKey = `${options.importer}\0${options.specifier}\0${
+    options.allowExplicitNonSource === true ? "explicit" : "source"
+  }`;
+  const cached = options.cache.resolvedByImport.get(cacheKey);
+
+  if (cached !== undefined) {
+    return cached;
+  }
+
+  const resolved = resolveAppLocalModuleUncached({
+    allowExplicitNonSource: options.allowExplicitNonSource === true,
+    importer: options.importer,
+    specifier: options.specifier,
+  });
+  options.cache.resolvedByImport.set(cacheKey, resolved);
+  return resolved;
+}
+
+async function resolveAppLocalModuleUncached(options: {
+  allowExplicitNonSource: boolean;
+  importer: string;
+  specifier: string;
+}): Promise<string | undefined> {
+  const { importer, specifier } = options;
+  const base = join(dirname(importer), specifier);
+  const candidates = sourceModuleCandidates(base);
+
+  if (candidates.length === 0) {
+    if (options.allowExplicitNonSource && extname(base) !== "" && (await isFile(base))) {
+      return base;
+    }
+
+    return undefined;
+  }
+
+  for (const candidate of candidates) {
+    if (await isFile(candidate)) {
+      return candidate;
+    }
+  }
+
+  throw new Error(`${importer}: could not resolve app-local import ${JSON.stringify(specifier)}.`);
+}
+
+async function isFile(path: string): Promise<boolean> {
+  try {
+    return (await stat(path)).isFile();
+  } catch {
+    return false;
+  }
+}
+
+async function readCachedFile(cache: ClientRouteInferenceCache, filename: string): Promise<string> {
+  const signature = await sourceFileSignature(filename);
+  const cached = cache.sourceByFile.get(filename);
+
+  if (cached !== undefined) {
+    const source = await cached;
+
+    if (source.signature === signature) {
+      return source.source;
+    }
+  }
+
+  const source = readFile(filename, "utf8").then((value) => ({
+    signature,
+    source: value,
+  }));
+  cache.sourceByFile.set(filename, source);
+  return (await source).source;
+}
+
+async function readClientRouteSource(options: {
+  cache: ClientRouteInferenceCache;
+  filename: string;
+  sourceTransform?: ClientRouteSourceTransform | undefined;
+}): Promise<string> {
+  if (options.sourceTransform === undefined) {
+    return readCachedFile(options.cache, options.filename);
+  }
+
+  const signature = await sourceFileSignature(options.filename);
+  const cacheKey = `${options.filename}\0${options.sourceTransform.cacheKey}`;
+  const cached = options.cache.transformedSourceByFile.get(cacheKey);
+
+  if (cached !== undefined) {
+    const source = await cached;
+
+    if (source.signature === signature) {
+      return source.source;
+    }
+  }
+
+  const source = readCachedFile(options.cache, options.filename).then(async (code) => ({
+    signature,
+    source: await options.sourceTransform!.transform(options.filename, code),
+  }));
+  options.cache.transformedSourceByFile.set(cacheKey, source);
+  return (await source).source;
+}
+
+async function transformClientRouteSource(options: {
+  code: string;
+  filename: string;
+  sourceTransform?: ClientRouteSourceTransform | undefined;
+}): Promise<string> {
+  return options.sourceTransform === undefined
+    ? options.code
+    : await options.sourceTransform.transform(options.filename, options.code);
+}
+
+function clientRouteSourceTransformForVitePlugins(
+  pluginOptions: readonly PluginOption[] | undefined,
+): ClientRouteSourceTransform | undefined {
+  const plugins = orderVitePlugins(flattenVitePlugins(pluginOptions)).filter((plugin) =>
+    hasViteTransformHook(plugin),
+  );
+
+  if (plugins.length === 0) {
+    return undefined;
+  }
+
+  return {
+    cacheKey: plugins.map((plugin, index) => `${index}:${plugin.name}`).join("\0"),
+    async transform(filename, code) {
+      let nextCode = code;
+
+      for (const plugin of plugins) {
+        const handler = viteTransformHookHandler(plugin);
+
+        if (handler === undefined) {
+          continue;
+        }
+
+        const result = await handler.call(
+          createClientRouteViteTransformContext(plugin.name),
+          nextCode,
+          filename,
+          { ssr: false },
+        );
+
+        if (typeof result === "string") {
+          nextCode = result;
+        } else if (result !== null && result !== undefined && typeof result === "object") {
+          const codeResult = (result as { code?: unknown }).code;
+
+          if (typeof codeResult === "string") {
+            nextCode = codeResult;
+          }
+        }
+      }
+
+      return nextCode;
+    },
+  };
+}
+
+function flattenVitePlugins(pluginOptions: readonly PluginOption[] | undefined): Plugin[] {
+  const plugins: Plugin[] = [];
+  const visit = (option: PluginOption | null | false | undefined): void => {
+    if (option === false || option === null || option === undefined) {
+      return;
+    }
+
+    if (Array.isArray(option)) {
+      for (const child of option) {
+        visit(child);
+      }
+      return;
+    }
+
+    if (typeof option === "object" && "then" in option) {
+      return;
+    }
+
+    plugins.push(option as Plugin);
+  };
+
+  for (const option of pluginOptions ?? []) {
+    visit(option);
+  }
+
+  return plugins;
+}
+
+function orderVitePlugins(plugins: readonly Plugin[]): Plugin[] {
+  return [
+    ...plugins.filter((plugin) => plugin.enforce === "pre"),
+    ...plugins.filter((plugin) => plugin.enforce !== "pre" && plugin.enforce !== "post"),
+    ...plugins.filter((plugin) => plugin.enforce === "post"),
+  ];
+}
+
+function hasViteTransformHook(plugin: Plugin): boolean {
+  return viteTransformHookHandler(plugin) !== undefined;
+}
+
+function viteTransformHookHandler(plugin: Plugin):
+  | ((
+      this: unknown,
+      code: string,
+      id: string,
+      options?: { ssr?: boolean | undefined },
+    ) => unknown)
+  | undefined {
+  const transform = plugin.transform as unknown;
+
+  if (typeof transform === "function") {
+    return transform as (
+      this: unknown,
+      code: string,
+      id: string,
+      options?: { ssr?: boolean | undefined },
+    ) => unknown;
+  }
+
+  if (transform !== null && typeof transform === "object") {
+    const handler = (transform as { handler?: unknown }).handler;
+
+    if (typeof handler === "function") {
+      return handler as (
+        this: unknown,
+        code: string,
+        id: string,
+        options?: { ssr?: boolean | undefined },
+      ) => unknown;
+    }
+  }
+
+  return undefined;
+}
+
+function createClientRouteViteTransformContext(pluginName: string): unknown {
+  return {
+    addWatchFile() {},
+    async resolve() {
+      return null;
+    },
+    error(error: unknown): never {
+      if (error instanceof Error) {
+        throw error;
+      }
+
+      throw new Error(String(error));
+    },
+    warn() {},
+    getCombinedSourcemap() {
+      return null;
+    },
+    parse() {
+      throw new Error(
+        `${pluginName}: client route import analysis cannot provide Rollup parser context.`,
+      );
+    },
+  };
+}
+
+async function sourceFileSignature(filename: string): Promise<string> {
+  const stats = await stat(filename);
+
+  return `${stats.mtimeMs}\0${stats.size}`;
+}
+
+export function routeIdForPath(path: string): string {
+  if (path === "/") {
+    return "index";
+  }
+
+  return path
+    .slice(1)
+    .replaceAll("/", "_")
+    .replaceAll(":", "_")
+    .replace(/[^A-Za-z0-9_$-]/g, "_");
+}
+
+export function clientScriptForPath(path: string): string {
+  return `routes/${routeIdForPath(path)}.js`;
+}
+
+export function navigationRuntimeScriptForDev(): string {
+  return "navigation.js";
+}
+
+export function withHydrationMarkers(options: {
+  assetBaseUrl?: string | undefined;
+  clientReferenceManifest?: readonly ClientReferenceMetadata[] | undefined;
+  html: string;
+  props: unknown;
+  routePath: string;
+  script?: string | undefined;
+}): string {
+  const marker = hydrationMarkerParts({
+    assetBaseUrl: options.assetBaseUrl,
+    clientReferenceManifest: options.clientReferenceManifest,
+    props: options.props,
+    routePath: options.routePath,
+    script: options.script,
+  });
+
+  return `${marker.prefix}${options.html}${marker.suffix}`;
+}
+
+export function withRouteMarkers(options: { html: string; routePath: string }): string {
+  const routeId = routeIdForPath(options.routePath);
+
+  return `<div data-mreact-route-id="${escapeHtmlAttribute(routeId)}">${options.html}</div>`;
+}
+
+export function hydrationMarkerParts(options: {
+  assetBaseUrl?: string | undefined;
+  clientReferenceManifest?: readonly ClientReferenceMetadata[] | undefined;
+  props: unknown;
+  routePath: string;
+  script?: string | undefined;
+}): { prefix: string; suffix: string } {
+  const routeId = routeIdForPath(options.routePath);
+  const escapedRouteId = escapeHtmlAttribute(routeId);
+  const propsJson = escapeScriptJson(JSON.stringify(options.props));
+  const script = options.script ?? clientScriptForPath(options.routePath);
+  const scriptSrc = assetPath(script, options.assetBaseUrl ?? "/_mreact/client/");
+  const clientReferencesJson =
+    options.clientReferenceManifest === undefined || options.clientReferenceManifest.length === 0
+      ? undefined
+      : escapeScriptJson(JSON.stringify(options.clientReferenceManifest));
+
+  return {
+    prefix: `<div data-mreact-route-id="${escapedRouteId}">`,
+    suffix: [
+      "</div>",
+      `<script type="application/json" id="mreact-props-${escapedRouteId}">${propsJson}</script>`,
+      clientReferencesJson === undefined
+        ? undefined
+        : `<script type="application/json" id="mreact-client-references-${escapedRouteId}">${clientReferencesJson}</script>`,
+      `<script type="module" src="${escapeHtmlAttribute(scriptSrc)}"></script>`,
+    ]
+      .filter((part): part is string => part !== undefined)
+      .join(""),
+  };
+}
+
+export async function buildClientRouteBundle(options: {
+  code: string;
+  clientBoundaryImports?: readonly string[] | undefined;
+  clientReferenceImports?: readonly ClientReferenceImport[] | undefined;
+  clientReferenceManifest?: readonly ClientReferenceMetadata[] | undefined;
+  filename: string;
+  routePath: string;
+  vitePlugins?: readonly PluginOption[] | undefined;
+}): Promise<string> {
+  return (await buildClientRouteOutput(options)).code;
+}
+
+export async function buildNavigationRuntimeBundle(
+  options: {
+    minify?: boolean;
+    sourceMap?: boolean;
+  } = {},
+): Promise<{ code: string; map?: string }> {
+  return buildClientRouteOutput({
+    code: "export default undefined;",
+    filename: "__mreact_navigation_runtime.tsx",
+    routePath: "/__mreact_navigation_runtime",
+    clientNavigation: true,
+    ...(options.minify === undefined ? {} : { minify: options.minify }),
+    ...(options.sourceMap === undefined ? {} : { sourceMap: options.sourceMap }),
+  });
+}
+
+export async function buildClientRouteOutput(
+  options: BuildClientRouteOutputOptions,
+): Promise<{ code: string; map?: string }> {
+  const entry = await buildClientRouteEntrySource(options);
+  const bundled = await bundleRouterModule({
+    code: entry.code,
+    define: {
+      __MREACT_CLIENT_DEVTOOLS__: "false",
+    },
+    filename: options.filename,
+    minify: options.minify === true,
+    platform: "browser",
+    preserveExports: true,
+    plugins: [workspaceRuntimePlugin({ routeFiles: [options.filename] })],
+    sourceMap: options.sourceMap,
+    vitePlugins: options.vitePlugins,
+  });
+
+  return {
+    code: bundled.code,
+    ...(bundled.map === undefined ? {} : { map: bundled.map }),
+  };
+}
+
+export async function buildClientRouteBatchOutput(options: {
+  assetBaseUrl?: string | undefined;
+  minify?: boolean;
+  projectRoot?: string | undefined;
+  routes: readonly BuildClientRouteOutputOptions[];
+  sourceMap?: boolean;
+  vitePlugins?: readonly PluginOption[] | undefined;
+}): Promise<BuildClientRouteBatchOutput> {
+  const entries = await Promise.all(
+    options.routes.map(async (route) => ({
+      filename: route.filename,
+      name: routeIdForPath(route.routePath),
+      routePath: route.routePath,
+      source: await buildClientRouteEntrySource({
+        ...route,
+        minify: options.minify ?? route.minify,
+        sourceMap: options.sourceMap ?? route.sourceMap,
+        vitePlugins: options.vitePlugins ?? route.vitePlugins,
+      }),
+    })),
+  );
+  const bundled = await bundleRouterModules({
+    base: options.assetBaseUrl ?? "/_mreact/client/",
+    define: {
+      __MREACT_CLIENT_DEVTOOLS__: "false",
+    },
+    entries: entries.map((entry) => ({
+      code: entry.source.code,
+      filename: entry.filename,
+      name: entry.name,
+    })),
+    minify: options.minify === true,
+    platform: "browser",
+    plugins: [workspaceRuntimePlugin({ routeFiles: entries.map((entry) => entry.filename) })],
+    root: options.projectRoot,
+    sourceMap: options.sourceMap,
+    vitePlugins: options.vitePlugins,
+  });
+  const entryChunks = new Map(
+    bundled.chunks.filter((chunk) => chunk.isEntry).map((chunk) => [chunk.name, chunk]),
+  );
+
+  return {
+    ...(bundled.assets === undefined ? {} : { assets: bundled.assets }),
+    chunks: bundled.chunks,
+    routes: entries.map((entry) => {
+      const chunk = entryChunks.get(entry.name);
+
+      if (chunk === undefined) {
+        throw new Error(`Failed to bundle client route ${entry.routePath}: missing entry chunk.`);
+      }
+
+      return {
+        chunk,
+        routeId: entry.name,
+        routePath: entry.routePath,
+      };
+    }),
+  };
+}
+
+export async function buildClientRouteEntrySource(
+  options: BuildClientRouteOutputOptions,
+): Promise<{ code: string }> {
+  const moduleContext = createCompilerModuleContext({
+    code: options.code,
+    filename: options.filename,
+  });
+  const compiled = transformCompilerModuleContext({
+    code: options.code,
+    clientBoundaryImports: options.clientBoundaryImports ?? [],
+    filename: options.filename,
+    moduleContext,
+    target: "client",
+    dev: options.minify !== true,
+  });
+
+  if (compiled.diagnostics.length > 0) {
+    throw new Error(
+      compiled.diagnostics
+        .map((diagnostic) => formatDiagnostic(options.filename, diagnostic))
+        .join("\n"),
+    );
+  }
+
+  const clientNavigation = options.clientNavigation ?? detectClientNavigationHint(options.code);
+  const clientReferenceManifest =
+    options.clientReferenceManifest ?? (await inferClientReferenceManifestForBundle(options));
+  const compatClientReferenceNames = compatClientReferenceComponentNames(clientReferenceManifest);
+  const clientReferenceImportBlock = emitClientReferenceImportBlock(
+    options.clientReferenceImports ?? [],
+  );
+  const clientReferenceRegistry = emitClientReferenceRegistry(
+    clientReferenceManifest,
+    options.clientReferenceImports ?? [],
+    compatClientReferenceNames,
+  );
+  const routeComponentExpression = routeComponentExpressionForComponents(
+    compiled.metadata.components,
+  );
+
+  const routeId = routeIdForPath(options.routePath);
+  const routeUsesCells = detectRouteCellStateHint(compiled.code);
+  const routeUsesReactiveEffect = detectRouteReactiveEffectHint(compiled.code);
+  const routeUsesCleanupScope = routeUsesCells || routeUsesReactiveEffect;
+  const routeHasEventBindings =
+    (compiled.metadata.eventHydrationManifest?.events.length ?? 0) > 0;
+  const routeRequiresFullHydration =
+    routeUsesCells || routeUsesReactiveEffect || routeHasEventBindings;
+  const routeUsesOnlyClientReferenceBoundaries =
+    !routeRequiresFullHydration &&
+    clientReferenceManifest.length > 0 &&
+    (options.clientReferenceImports?.length ?? 0) > 0;
+  const routeHydrationCode = routeUsesOnlyClientReferenceBoundaries ? "" : compiled.code;
+  const hydratedRouteComponentExpression = routeUsesOnlyClientReferenceBoundaries
+    ? "undefined"
+    : routeComponentExpression;
+  const routeStateSignature = routeUsesCells ? routeStateSignatureForSource(compiled.code) : "";
+  const routeCellEffectImport = routeUsesCells
+    ? `import { effect as __mreactRouteEffect } from "@reckona/mreact-reactive-core";\n`
+    : "";
+  const routeCleanupScopeImport = routeUsesCleanupScope
+    ? `import { withCleanupScope as __mreactWithCleanupScope } from "@reckona/mreact-reactive-core/internal";\n`
+    : "";
+  const navigationStateDeclaration = clientNavigation
+    ? `const __mreactNavigationState = __mreactGlobal.__mreactNavigationState ??= {
+  cache: new Map(),
+  current: {
+    from: null,
+    pending: false,
+    to: null,
+    type: null,
+  },
+  installed: false,
+  prefetchedScripts: new Set(),
+  routePrefetchManifest: undefined,
+  routePrefetchManifestText: undefined,
+  viewportAnchors: new WeakSet(),
+  viewportObserver: undefined,
+};`
+    : "";
+  const routeCellStateDeclaration = routeUsesCells
+    ? `const __mreactRouteStates = __mreactGlobal.__mreactRouteStates ??= new Map();
+let __mreactActiveCellRecords = undefined;
+let __mreactActiveCellIndex = 0;`
+    : "";
+  const routeCleanupStateDeclaration = routeUsesCleanupScope
+    ? `const __mreactRouteDisposers = __mreactGlobal.__mreactRouteDisposers ??= new Map();`
+    : "";
+  const routeCellHook = routeUsesCells
+    ? `
+__mreactGlobal.__mreactRouteCell = (nativeCell, initial) => {
+  if (__mreactActiveCellRecords === undefined) {
+    return nativeCell(initial);
+  }
+
+  const cellKey = String(__mreactActiveCellIndex);
+  __mreactActiveCellIndex += 1;
+  const existingRecord = __mreactActiveCellRecords.get(cellKey);
+  const record = existingRecord ?? { value: initial };
+  const stateCell = nativeCell(record.value);
+  const setStateCell = stateCell.set;
+
+  stateCell.set = (next) => {
+    setStateCell((previous) => {
+      const resolved = typeof next === "function" ? next(previous) : next;
+      record.value = resolved;
+      return resolved;
+    });
+  };
+
+  __mreactActiveCellRecords.set(cellKey, record);
+  return stateCell;
+};`
+    : "";
+  const routeCellHydrationStart = routeUsesCells
+    ? `  const __mreactPreviousState = __mreactRouteStates.get(__mreactRouteId);
+  const __mreactState = __mreactPreviousState?.marker === __mreactMarker &&
+    __mreactPreviousState?.signature === __mreactRouteStateSignature
+    ? __mreactPreviousState
+    : {
+        cells: new Map(),
+        marker: __mreactMarker,
+        signature: __mreactRouteStateSignature,
+      };
+  __mreactDropMismatchedRouteState(__mreactPreviousState, __mreactState);
+  __mreactRouteStates.set(__mreactRouteId, __mreactState);
+  __mreactState.dispose?.();
+
+  __mreactState.dispose = __mreactRouteEffect(() => {
+    const __mreactRouteEffectDisposers = new Set();
+    __mreactActiveCellRecords = __mreactState.cells;
+    __mreactActiveCellIndex = 0;
+    __mreactRouteDisposers.set(__mreactRouteId, () => __mreactState.dispose?.());
+
+    try {
+`
+    : "";
+  const routeCellHydrationEnd = routeUsesCells
+    ? `    } finally {
+      __mreactActiveCellRecords = undefined;
+      __mreactActiveCellIndex = 0;
+    }
+    return () => {
+      for (const __mreactDispose of Array.from(__mreactRouteEffectDisposers)) {
+        __mreactDispose();
+      }
+      __mreactRouteEffectDisposers.clear();
+    };
+  });
+`
+    : "";
+  const routeCellHydrationIndent = routeUsesCells ? "      " : "  ";
+  const routeCleanupHydrationStart = routeUsesCleanupScope && !routeUsesCells
+    ? `  __mreactDisposeRoute(__mreactRouteId);
+  const __mreactRouteEffectDisposers = new Set();
+  __mreactRouteDisposers.set(__mreactRouteId, () => {
+    for (const __mreactDispose of Array.from(__mreactRouteEffectDisposers)) {
+      __mreactDispose();
+    }
+    __mreactRouteEffectDisposers.clear();
+  });
+`
+    : "";
+  const routeCellDropFunction = routeUsesCells
+    ? `
+function __mreactDropMismatchedRouteState(previousState, nextState) {
+  if (previousState === undefined || previousState === nextState) {
+    return;
+  }
+
+  if (previousState.signature !== nextState.signature && typeof console !== "undefined") {
+    console.warn("mreact: dropping stale route state after route cell signature changed");
+  }
+}
+`
+    : "";
+  const routeCleanupFunction = routeUsesCleanupScope
+    ? `
+function __mreactDisposeRoute(routeId) {
+  const __mreactDispose = __mreactRouteDisposers.get(routeId);
+  if (__mreactDispose === undefined) {
+    return;
+  }
+  __mreactRouteDisposers.delete(routeId);
+  __mreactDispose();
+}
+`
+    : "";
+  const routeCleanupNavigationDispose = routeUsesCleanupScope
+    ? `  if (currentRouteId !== nextRouteId) {
+    __mreactDisposeRoute(currentRouteId);
+  }
+`
+    : "";
+  const routeNodeResolver = routeUsesCells
+    ? `
+function __mreactResolveRouteNode(value) {
+  if (
+    value !== null &&
+    typeof value === "object" &&
+    value.$$typeof === Symbol.for("modular.react.element") &&
+    typeof value.type === "function"
+  ) {
+    return __mreactResolveRouteNode(value.type(value.props ?? {}));
+  }
+
+  if (value !== null && typeof value === "object" && value.nodeType !== undefined) {
+    return value;
+  }
+
+  const fragment = document.createDocumentFragment();
+  if (value !== null && value !== undefined && value !== false && value !== true) {
+    fragment.append(document.createTextNode(String(value)));
+  }
+  return fragment;
+}
+`
+    : "";
+  const routeComponentCallExpression = routeUsesCleanupScope
+    ? "__mreactWithCleanupScope((__mreactDispose) => __mreactRouteEffectDisposers.add(__mreactDispose), () => __mreactComponent(__mreactProps))"
+    : "__mreactComponent(__mreactProps)";
+  const routeNodeExpression = routeUsesCells
+    ? `__mreactResolveRouteNode(${routeComponentCallExpression})`
+    : routeComponentCallExpression;
+  const boundaryOnlyHydrationBlock = routeRequiresFullHydration
+    ? ""
+    : `${routeCellHydrationIndent}if (!__mreactHasNonSerializableClientBoundaries(__mreactMarker) && __mreactHydrateClientBoundaries(document, __mreactClientReferences, __mreactClientReferenceComponents)) {
+${routeCellHydrationIndent}  __mreactMarker.setAttribute("data-mreact-hydrated", "true");
+${routeCellHydrationIndent}  return;
+${routeCellHydrationIndent}}
+`;
+  const routeComponentGuard = `${routeCellHydrationIndent}if (__mreactComponent === undefined) {
+${routeCellHydrationIndent}  return;
+${routeCellHydrationIndent}}
+`;
+  const entry = `${routeCellEffectImport}${routeCleanupScopeImport}${emitCompatClientReferenceImportBlock(compatClientReferenceNames)}${clientReferenceImportBlock}${routeHydrationCode}
+
+const __mreactRouteId = ${JSON.stringify(routeId)};
+const __mreactRouteStateSignature = ${JSON.stringify(routeStateSignature)};
+const __mreactGlobal = globalThis;
+${navigationStateDeclaration}
+${routeCellStateDeclaration}
+${routeCleanupStateDeclaration}
+${routeCellHook}
+${clientReferenceRegistry}
+${routeNodeResolver}
+
+export function __mreactHydrateRoute() {
+  __mreactApplyOutOfOrderFragments(document);
+  const __mreactMarker = document.querySelector(\`[data-mreact-route-id="\${__mreactRouteId}"]\`);
+  const __mreactPropsElement = document.getElementById(\`mreact-props-\${__mreactRouteId}\`);
+  const __mreactClientReferencesElement = document.getElementById(\`mreact-client-references-\${__mreactRouteId}\`);
+  const __mreactProps = __mreactPropsElement?.textContent === undefined
+    ? {}
+    : JSON.parse(__mreactPropsElement.textContent);
+  const __mreactClientReferences = __mreactClientReferencesElement?.textContent === undefined
+    ? []
+    : JSON.parse(__mreactClientReferencesElement.textContent);
+  const __mreactClientReferenceManifests = __mreactGlobal.__mreactClientReferenceManifests ??= new Map();
+  __mreactClientReferenceManifests.set(__mreactRouteId, __mreactClientReferences);
+  const __mreactComponent = ${hydratedRouteComponentExpression};
+
+  if (__mreactMarker === null) {
+    return;
+  }
+${routeCellHydrationStart}${routeCleanupHydrationStart}${boundaryOnlyHydrationBlock}${routeComponentGuard}${routeCellHydrationIndent}const __mreactNode = ${routeNodeExpression};
+${routeCellHydrationIndent}__mreactResumeRoute(__mreactMarker, __mreactNode);
+${routeCellHydrationIndent}__mreactHydrateClientBoundaries(__mreactMarker, __mreactClientReferences, __mreactClientReferenceComponents);
+${routeCellHydrationIndent}__mreactMarker.setAttribute("data-mreact-hydrated", "true");
+${routeCellHydrationEnd}}
+${routeCellDropFunction}
+${routeCleanupFunction}
+
+__mreactHydrateRoute();
+${clientNavigation ? "__mreactInstallNavigation();" : ""}
+
+${
+  clientNavigation
+    ? `export function __mreactNavigateToHtml(html, url, options = {}) {
+  __mreactSaveCurrentHistoryState();
+  const applied = __mreactApplyNavigationHtml(html, url);
+
+  if (!applied) {
+    return false;
+  }
+
+  __mreactPushHistoryState(url);
+  if (options.scroll !== "preserve") {
+    __mreactScrollTo(0, 0);
+  }
+  __mreactResetNavigationFocus();
+  __mreactAnnounceNavigation();
+  return true;
+}
+
+function __mreactResetNavigationFocus() {
+  if (typeof document === "undefined") {
+    return;
+  }
+
+  const focusTarget =
+    document.querySelector("[data-mreact-focus-target]") ??
+    document.querySelector("main") ??
+    document.querySelector("h1") ??
+    document.body;
+
+  if (!(focusTarget instanceof HTMLElement)) {
+    return;
+  }
+
+  const hadTabIndex = focusTarget.hasAttribute("tabindex");
+
+  if (!hadTabIndex) {
+    focusTarget.setAttribute("tabindex", "-1");
+  }
+
+  try {
+    focusTarget.focus({ preventScroll: true });
+  } catch {
+    focusTarget.focus();
+  }
+
+  if (!hadTabIndex) {
+    focusTarget.addEventListener(
+      "blur",
+      () => focusTarget.removeAttribute("tabindex"),
+      { once: true },
+    );
+  }
+}
+
+function __mreactAnnounceNavigation() {
+  if (typeof document === "undefined" || document.body === null) {
+    return;
+  }
+
+  const announcement = __mreactRouteAnnouncementElement();
+  announcement.textContent = \`Loaded \${document.title || "page"}\`;
+}
+
+function __mreactRouteAnnouncementElement() {
+  const existing = document.getElementById("mreact-route-announcement");
+
+  if (existing instanceof HTMLElement) {
+    return existing;
+  }
+
+  const announcement = document.createElement("div");
+  announcement.id = "mreact-route-announcement";
+  announcement.setAttribute("role", "status");
+  announcement.setAttribute("aria-live", "polite");
+  announcement.setAttribute("aria-atomic", "true");
+  announcement.setAttribute(
+    "style",
+    "position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden",
+  );
+  document.body.appendChild(announcement);
+  return announcement;
+}
+
+export async function __mreactPrefetch(url) {
+  if (!__mreactCanPrefetch()) {
+    return false;
+  }
+
+  const href = __mreactNormalizeNavigationUrl(url);
+
+  if (href === undefined) {
+    return false;
+  }
+
+  const script = __mreactRouteScriptForNavigationUrl(href);
+
+  if (script === undefined) {
+    return __mreactPrefetchNavigationHtml(href);
+  }
+
+  return __mreactPrefetchRouteScript(script);
+}
+
+function __mreactPrefetchNavigationHtml(href) {
+  if (__mreactNavigationState.cache.has(href)) {
+    return true;
+  }
+
+  return __mreactFetchNavigationHtml(href).then((html) => {
+    if (typeof html !== "string") {
+      return false;
+    }
+
+    __mreactNavigationState.cache.set(href, html);
+    return true;
+  }).catch(() => false);
+}
+
+function __mreactPrefetchRouteScript(script) {
+  if (typeof document === "undefined") {
+    return false;
+  }
+
+  const href = __mreactNormalizeAssetUrl(script);
+
+  if (href === undefined) {
+    return false;
+  }
+
+  if (__mreactNavigationState.prefetchedScripts.has(href)) {
+    return true;
+  }
+
+  for (const link of Array.from(document.querySelectorAll('link[rel="modulepreload"][href]'))) {
+    if (link.href === href) {
+      __mreactNavigationState.prefetchedScripts.add(href);
+      return true;
+    }
+  }
+
+  const link = document.createElement("link");
+  link.rel = "modulepreload";
+  link.href = href;
+  document.head.appendChild(link);
+  __mreactNavigationState.prefetchedScripts.add(href);
+  return true;
+}
+
+export async function __mreactNavigate(url, options = {}) {
+  const href = __mreactNormalizeNavigationUrl(url);
+
+  if (href === undefined) {
+    return false;
+  }
+
+  __mreactSetNavigationState(__mreactPendingNavigationState(href, options.type ?? "push"));
+
+  try {
+    const cachedHtml = __mreactNavigationState.cache.get(href);
+    const html = cachedHtml ?? await __mreactFetchNavigationHtml(href);
+
+    if (typeof html !== "string") {
+      return false;
+    }
+
+    __mreactNavigationState.cache.set(href, html);
+    return await __mreactApplyNavigationHtmlWithOptionalTransition(html, href, options);
+  } finally {
+    __mreactSetNavigationState(__mreactIdleNavigationState());
+  }
+}
+
+export function __mreactGetNavigationState() {
+  return __mreactNavigationStateSnapshot(__mreactNavigationState.current);
+}
+
+function __mreactPendingNavigationState(to, type) {
+  return {
+    from: typeof location === "undefined" ? null : location.href,
+    pending: true,
+    to,
+    type: __mreactNavigationType(type),
+  };
+}
+
+function __mreactIdleNavigationState() {
+  return {
+    from: null,
+    pending: false,
+    to: null,
+    type: null,
+  };
+}
+
+function __mreactSetNavigationState(state) {
+  const snapshot = __mreactNavigationStateSnapshot(state);
+  __mreactNavigationState.current = snapshot;
+  __mreactApplyNavigationStateAttributes(snapshot);
+  __mreactDispatchNavigationStateChange(snapshot);
+}
+
+function __mreactNavigationStateSnapshot(state) {
+  return {
+    from: typeof state?.from === "string" ? state.from : null,
+    pending: state?.pending === true,
+    to: typeof state?.to === "string" ? state.to : null,
+    type: __mreactNavigationType(state?.type),
+  };
+}
+
+function __mreactNavigationType(type) {
+  return type === "push" || type === "replace" || type === "pop" || type === "refresh"
+    ? type
+    : null;
+}
+
+function __mreactApplyNavigationStateAttributes(state) {
+  if (typeof document === "undefined") {
+    return;
+  }
+
+  const root = document.documentElement;
+
+  if (state.pending !== true) {
+    root.removeAttribute("data-mreact-navigation-pending");
+    root.removeAttribute("data-mreact-navigation-from");
+    root.removeAttribute("data-mreact-navigation-to");
+    root.removeAttribute("data-mreact-navigation-type");
+    return;
+  }
+
+  root.setAttribute("data-mreact-navigation-pending", "true");
+
+  if (state.from === null) {
+    root.removeAttribute("data-mreact-navigation-from");
+  } else {
+    root.setAttribute("data-mreact-navigation-from", state.from);
+  }
+
+  if (state.to === null) {
+    root.removeAttribute("data-mreact-navigation-to");
+  } else {
+    root.setAttribute("data-mreact-navigation-to", state.to);
+  }
+
+  if (state.type === null) {
+    root.removeAttribute("data-mreact-navigation-type");
+  } else {
+    root.setAttribute("data-mreact-navigation-type", state.type);
+  }
+}
+
+function __mreactDispatchNavigationStateChange(state) {
+  if (typeof window === "undefined" || typeof CustomEvent !== "function") {
+    return;
+  }
+
+  window.dispatchEvent(new CustomEvent("mreact:navigation-state-change", {
+    detail: state,
+  }));
+}
+
+async function __mreactApplyNavigationHtmlWithOptionalTransition(html, href, options) {
+  if (!__mreactViewTransitionsAllowed(options.transition)) {
+    return __mreactNavigateToHtml(html, href, options);
+  }
+
+  let navigated = false;
+  const transition = document.startViewTransition(() => {
+    navigated = __mreactNavigateToHtml(html, href, options);
+  });
+
+  try {
+    await transition.updateCallbackDone;
+  } catch {
+    return navigated;
+  }
+
+  return navigated;
+}
+
+function __mreactViewTransitionsAllowed(transition) {
+  if (
+    transition !== "auto" ||
+    typeof document === "undefined" ||
+    typeof document.startViewTransition !== "function"
+  ) {
+    return false;
+  }
+
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return true;
+  }
+
+  try {
+    return !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  } catch {
+    return true;
+  }
+}
+
+export function __mreactInvalidateNavigationCache(path) {
+  const normalizedPath = __mreactNormalizeNavigationPath(path);
+
+  if (normalizedPath === undefined) {
+    return;
+  }
+
+  for (const href of Array.from(__mreactNavigationState.cache.keys())) {
+    if (__mreactNormalizeNavigationPath(href) === normalizedPath) {
+      __mreactNavigationState.cache.delete(href);
+    }
+  }
+}
+
+function __mreactFetchNavigationHtml(href) {
+  return fetch(href, {
+    headers: { "x-mreact-navigation": "1" },
+  }).then((response) => {
+    __mreactApplyRevalidationHeader(response);
+    if (__mreactNavigationResponseRequiresDocumentReload(response)) {
+      return undefined;
+    }
+
+    return response.text();
+  });
+}
+
+function __mreactNavigationResponseRequiresDocumentReload(response) {
+  return response.status === 204 || response.headers.get("x-mreact-navigation") === "reload";
+}
+
+function __mreactApplyRevalidationHeader(response) {
+  const header = response.headers.get("x-mreact-revalidate");
+
+  if (header === null || header.trim() === "") {
+    return;
+  }
+
+  for (const path of header.split(",")) {
+    __mreactInvalidateNavigationCache(path.trim());
+  }
+}
+
+function __mreactNormalizeNavigationPath(path) {
+  if (typeof location === "undefined") {
+    return typeof path === "string" && path.length > 0 ? path : undefined;
+  }
+
+  try {
+    const url = new URL(path, location.href);
+    const pathname = url.pathname.replace(/\\/+$/, "");
+
+    return pathname === "" ? "/" : pathname;
+  } catch {
+    return undefined;
+  }
+}
+
+export function __mreactRestoreHistoryState(state) {
+  if (state === null || state === undefined || state.__mreact !== true || typeof state.html !== "string") {
+    return false;
+  }
+
+  const applied = __mreactApplyNavigationHtml(state.html, state.url);
+
+  if (!applied) {
+    return false;
+  }
+
+  __mreactScrollTo(Number(state.scrollX ?? 0), Number(state.scrollY ?? 0));
+  return true;
+}
+
+function __mreactApplyNavigationHtml(html, url) {
+  const template = document.createElement("template");
+  template.innerHTML = html.replace(/^\\s*<!doctype html>/i, "");
+  __mreactApplyOutOfOrderFragments(template.content);
+  const nextMarker = template.content.querySelector("[data-mreact-route-id]");
+  const currentMarker = document.querySelector("[data-mreact-route-id]");
+
+  if (nextMarker === null || currentMarker === null) {
+    return false;
+  }
+
+  const currentRouteId = currentMarker.getAttribute("data-mreact-route-id");
+  const nextRouteId = nextMarker.getAttribute("data-mreact-route-id");
+
+  __mreactSyncHeadMetadata(template.content, html);
+  __mreactResumeNode(currentMarker, nextMarker);
+${routeCleanupNavigationDispose}  __mreactSyncRouteDataScripts(template.content, currentRouteId, nextRouteId);
+
+  const script = template.content.querySelector('script[type="module"][src]')?.getAttribute("src");
+  if (script !== null && script !== undefined) {
+    void import(/* @vite-ignore */ script).then((module) => module.__mreactHydrateRoute?.());
+  }
+
+  __mreactApplyOutOfOrderFragments(document);
+  __mreactObserveViewportPrefetchAnchors(document);
+
+  return true;
+}
+
+function __mreactSyncHeadMetadata(root, html) {
+  __mreactSyncHtmlLang(root, html);
+
+  const nextHead = root.querySelector("head");
+
+  if ((nextHead === null && !/<head(?:\\s[^>]*)?>/i.test(html)) || document.head === null) {
+    return;
+  }
+
+  const metadataRoot = nextHead ?? root;
+  const selector = __mreactManagedHeadMetadataSelector();
+
+  for (const element of Array.from(document.head.querySelectorAll(selector))) {
+    element.remove();
+  }
+
+  for (const element of Array.from(metadataRoot.querySelectorAll(selector))) {
+    document.head.appendChild(element);
+  }
+}
+
+function __mreactSyncHtmlLang(root, html) {
+  const nextHtml = root.querySelector("html");
+  const nextLang = nextHtml?.getAttribute("lang") ?? __mreactHtmlLangFromSource(html);
+
+  if (nextLang === null) {
+    return;
+  }
+
+  if (document.documentElement.lang !== nextLang) {
+    document.documentElement.lang = nextLang;
+  }
+}
+
+function __mreactHtmlLangFromSource(html) {
+  const match = /<html\\b[^>]*\\slang=(?:"([^"]*)"|'([^']*)'|([^\\s>]+))/i.exec(html);
+
+  return match === null ? null : match[1] ?? match[2] ?? match[3] ?? null;
+}
+
+function __mreactManagedHeadMetadataSelector() {
+  return [
+    "title",
+    'meta[name="description"]',
+    'link[rel="canonical"]',
+    'meta[property="og:title"]',
+    'meta[property="og:description"]',
+    'meta[property="og:image"]',
+    'link[rel="icon"]',
+    'link[rel="apple-touch-icon"]',
+    'meta[name="robots"]',
+    'meta[name="theme-color"]',
+    'meta[name="viewport"]',
+  ].join(",");
+}
+
+function __mreactSyncRouteDataScripts(root, currentRouteId, nextRouteId) {
+  const managedIds = __mreactRouteDataScriptIds(currentRouteId, nextRouteId);
+
+  if (managedIds.size === 0) {
+    return;
+  }
+
+  for (const element of Array.from(document.querySelectorAll(__mreactRouteDataScriptSelector()))) {
+    if (managedIds.has(element.id)) {
+      element.remove();
+    }
+  }
+
+  for (const element of Array.from(root.querySelectorAll(__mreactRouteDataScriptSelector()))) {
+    if (managedIds.has(element.id)) {
+      document.body.appendChild(element);
+    }
+  }
+}
+
+function __mreactRouteDataScriptIds(...routeIds) {
+  const ids = new Set();
+
+  for (const routeId of routeIds) {
+    if (typeof routeId !== "string" || routeId === "") {
+      continue;
+    }
+
+    ids.add(\`mreact-props-\${routeId}\`);
+    ids.add(\`mreact-client-references-\${routeId}\`);
+  }
+
+  return ids;
+}
+
+function __mreactRouteDataScriptSelector() {
+  return 'script[type="application/json"][id^="mreact-props-"], script[type="application/json"][id^="mreact-client-references-"]';
+}
+
+function __mreactCurrentHistoryState(url) {
+  return {
+    __mreact: true,
+    html: document.body.innerHTML,
+    scrollX: Number(globalThis.scrollX ?? 0),
+    scrollY: Number(globalThis.scrollY ?? 0),
+    url,
+  };
+}
+
+function __mreactPushHistoryState(url) {
+  if (typeof history === "undefined" || url === undefined) {
+    return;
+  }
+
+  try {
+    history.pushState(__mreactCurrentHistoryState(url), "", url);
+  } catch {
+    // Ignore invalid URLs in non-browser test environments.
+  }
+}
+
+function __mreactSaveCurrentHistoryState() {
+  if (typeof history === "undefined" || typeof location === "undefined") {
+    return;
+  }
+
+  try {
+    history.replaceState(__mreactCurrentHistoryState(location.href), "", location.href);
+  } catch {
+    // Ignore invalid URLs in non-browser test environments.
+  }
+}
+
+function __mreactEnableManualScrollRestoration() {
+  if (typeof history === "undefined" || !("scrollRestoration" in history)) {
+    return;
+  }
+
+  try {
+    history.scrollRestoration = "manual";
+  } catch {
+    // Ignore read-only history implementations in non-browser runtimes.
+  }
+}
+
+function __mreactNormalizeNavigationUrl(url) {
+  if (typeof location === "undefined") {
+    return typeof url === "string" ? url : undefined;
+  }
+
+  try {
+    return new URL(url, location.href).href;
+  } catch {
+    return undefined;
+  }
+}
+
+function __mreactNormalizeAssetUrl(url) {
+  if (typeof location === "undefined") {
+    return typeof url === "string" ? url : undefined;
+  }
+
+  try {
+    return new URL(url, location.href).href;
+  } catch {
+    return undefined;
+  }
+}
+
+function __mreactRouteScriptForNavigationUrl(url) {
+  const href = __mreactNormalizeNavigationUrl(url);
+
+  if (href === undefined || typeof location === "undefined") {
+    return undefined;
+  }
+
+  let nextUrl;
+
+  try {
+    nextUrl = new URL(href, location.href);
+  } catch {
+    return undefined;
+  }
+
+  if (nextUrl.origin !== location.origin) {
+    return undefined;
+  }
+
+  for (const route of __mreactClientRoutePrefetchManifest()) {
+    if (__mreactRoutePathMatches(route.path, nextUrl.pathname)) {
+      return route.script;
+    }
+  }
+
+  return undefined;
+}
+
+function __mreactClientRoutePrefetchManifest() {
+  const element = typeof document === "undefined"
+    ? null
+    : document.getElementById("mreact-route-prefetch-manifest");
+  const text = element?.textContent ?? "";
+
+  if (
+    __mreactNavigationState.routePrefetchManifest !== undefined &&
+    __mreactNavigationState.routePrefetchManifestText === text
+  ) {
+    return __mreactNavigationState.routePrefetchManifest;
+  }
+
+  __mreactNavigationState.routePrefetchManifestText = text;
+
+  if (element === null) {
+    __mreactNavigationState.routePrefetchManifest = [];
+    return __mreactNavigationState.routePrefetchManifest;
+  }
+
+  try {
+    const parsed = JSON.parse(text);
+    __mreactNavigationState.routePrefetchManifest = Array.isArray(parsed)
+      ? parsed.filter((route) =>
+          route !== null &&
+          typeof route === "object" &&
+          typeof route.path === "string" &&
+          typeof route.script === "string"
+        )
+      : [];
+  } catch {
+    __mreactNavigationState.routePrefetchManifest = [];
+  }
+
+  return __mreactNavigationState.routePrefetchManifest;
+}
+
+function __mreactRoutePathMatches(routePath, pathname) {
+  const routeSegments = __mreactNormalizeRoutePath(routePath);
+  const pathSegments = __mreactNormalizeRoutePath(pathname);
+
+  if (routeSegments.length === 0) {
+    return pathSegments.length === 0;
+  }
+
+  for (const [index, segment] of routeSegments.entries()) {
+    const value = pathSegments[index];
+
+    if (segment.startsWith(":...")) {
+      return pathSegments.length >= index + 1;
+    }
+
+    if (value === undefined) {
+      return false;
+    }
+
+    if (!segment.startsWith(":") && segment !== value) {
+      return false;
+    }
+  }
+
+  return routeSegments.length === pathSegments.length;
+}
+
+function __mreactNormalizeRoutePath(path) {
+  const normalized = path.length > 1 ? path.replace(/\\/+$/, "") : path;
+  return normalized === "/" || normalized === "" ? [] : normalized.replace(/^\\/+/, "").split("/");
+}
+
+function __mreactCanPrefetch() {
+  if (typeof navigator === "undefined") {
+    return true;
+  }
+
+  const connection = navigator.connection ?? navigator.mozConnection ?? navigator.webkitConnection;
+  const effectiveType = typeof connection?.effectiveType === "string"
+    ? connection.effectiveType.toLowerCase()
+    : "";
+
+  return connection?.saveData !== true && effectiveType !== "slow-2g" && effectiveType !== "2g";
+}
+
+function __mreactScrollTo(x, y) {
+  if (typeof scrollTo === "function") {
+    scrollTo(x, y);
+  }
+}
+
+function __mreactIsHashOnlyNavigation(nextUrl) {
+  if (typeof location === "undefined") {
+    return false;
+  }
+
+  return nextUrl.origin === location.origin &&
+    nextUrl.pathname === location.pathname &&
+    nextUrl.search === location.search &&
+    nextUrl.hash !== "" &&
+    nextUrl.hash !== location.hash;
+}
+
+function __mreactInstallNavigation() {
+  if (__mreactNavigationState.installed || typeof document === "undefined") {
+    return;
+  }
+
+  __mreactNavigationState.installed = true;
+  __mreactEnableManualScrollRestoration();
+  __mreactSaveCurrentHistoryState();
+  addEventListener("popstate", (event) => {
+    __mreactSaveCurrentHistoryState();
+    if (!__mreactRestoreHistoryState(event.state)) {
+      location.reload();
+    }
+  });
+  document.addEventListener("pointerenter", (event) => {
+    const anchor = __mreactAnchorFromEvent(event);
+
+    if (anchor !== null && __mreactAnchorPrefetchMode(anchor) === "intent") {
+      void __mreactPrefetch(anchor.href);
+    }
+  }, true);
+  document.addEventListener("pointerdown", (event) => {
+    const anchor = __mreactAnchorFromEvent(event);
+
+    if (anchor !== null && __mreactAnchorPrefetchMode(anchor) === "intent") {
+      void __mreactPrefetch(anchor.href);
+    }
+  }, true);
+  document.addEventListener("focusin", (event) => {
+    const anchor = __mreactAnchorFromEvent(event);
+
+    if (anchor !== null && __mreactAnchorPrefetchMode(anchor) === "intent") {
+      void __mreactPrefetch(anchor.href);
+    }
+  });
+  __mreactObserveViewportPrefetchAnchors(document);
+  document.addEventListener("click", (event) => {
+    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+      return;
+    }
+
+    const anchor = __mreactAnchorFromEvent(event);
+
+    if (anchor === null) {
+      return;
+    }
+
+    if (anchor.dataset.mreactReload === "true") {
+      return;
+    }
+
+    const nextUrl = new URL(anchor.href, location.href);
+
+    if (nextUrl.origin !== location.origin) {
+      return;
+    }
+
+    if (__mreactIsHashOnlyNavigation(nextUrl)) {
+      return;
+    }
+
+    event.preventDefault();
+    void __mreactNavigate(nextUrl.href, {
+      scroll: __mreactAnchorScrollMode(anchor),
+      transition: __mreactAnchorTransitionMode(anchor),
+    })
+      .then((navigated) => {
+        if (!navigated) {
+          location.href = nextUrl.href;
+        }
+      }).catch(() => {
+        location.href = nextUrl.href;
+      });
+  });
+}
+
+function __mreactAnchorFromEvent(event) {
+  const target = event.target;
+  const anchor = target instanceof Element ? target.closest("a[href]") : null;
+
+  if (!(anchor instanceof HTMLAnchorElement) || anchor.target !== "" || anchor.hasAttribute("download")) {
+    return null;
+  }
+
+  return anchor;
+}
+
+function __mreactAnchorPrefetchMode(anchor) {
+  const value = anchor.dataset.mreactPrefetch;
+
+  if (value === "false" || value === "none") {
+    return "none";
+  }
+
+  return value === "viewport" ? "viewport" : "intent";
+}
+
+function __mreactAnchorScrollMode(anchor) {
+  return anchor.dataset.mreactScroll === "preserve" ? "preserve" : "top";
+}
+
+function __mreactAnchorTransitionMode(anchor) {
+  return anchor.dataset.mreactTransition === "auto" ? "auto" : "none";
+}
+
+function __mreactObserveViewportPrefetchAnchors(root) {
+  if (typeof IntersectionObserver === "undefined") {
+    return;
+  }
+
+  if (__mreactNavigationState.viewportObserver === undefined) {
+    __mreactNavigationState.viewportObserver = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (!entry.isIntersecting || !(entry.target instanceof HTMLAnchorElement)) {
+          continue;
+        }
+
+        __mreactNavigationState.viewportObserver?.unobserve(entry.target);
+        void __mreactPrefetch(entry.target.href);
+      }
+    });
+  }
+
+  for (const anchor of Array.from(root.querySelectorAll('a[href][data-mreact-prefetch="viewport"]'))) {
+    if (!(anchor instanceof HTMLAnchorElement) || __mreactNavigationState.viewportAnchors.has(anchor)) {
+      continue;
+    }
+
+    __mreactNavigationState.viewportAnchors.add(anchor);
+    __mreactNavigationState.viewportObserver.observe(anchor);
+  }
+}
+`
+    : ""
+}
+
+function __mreactApplyOutOfOrderFragments(root) {
+  const fragments = Array.from(root.querySelectorAll("template[data-mreact-oob-fragment]"));
+
+  for (const fragment of fragments) {
+    const id = fragment.getAttribute("data-mreact-oob-fragment");
+
+    if (id === null) {
+      continue;
+    }
+
+    const placeholder = Array.from(root.querySelectorAll("[data-mreact-oob-placeholder]"))
+      .find((candidate) => candidate.getAttribute("data-mreact-oob-placeholder") === id);
+
+    if (placeholder === undefined) {
+      continue;
+    }
+
+    placeholder.replaceWith(fragment.content.cloneNode(true));
+    fragment.remove();
+  }
+}
+
+function __mreactHydrateClientBoundaries(marker, references, components) {
+  if (components.size === 0 && (!Array.isArray(references) || references.length === 0)) {
+    return false;
+  }
+
+  const placeholders = Array.from(marker.querySelectorAll("template[data-mreact-client-boundary]"));
+
+  if (placeholders.length === 0) {
+    return false;
+  }
+
+  for (const placeholder of placeholders) {
+    const name = placeholder.getAttribute("data-mreact-client-boundary");
+    const entry = name === null ? undefined : components.get(name);
+    const component = typeof entry === "function" ? entry : entry?.component;
+    const compat = entry?.compat === true;
+
+    if (typeof component !== "function") {
+      return false;
+    }
+
+    const propsElement = __mreactClientBoundaryPropsElement(placeholder, name);
+    const props = propsElement?.textContent === undefined || propsElement.textContent === ""
+      ? {}
+      : JSON.parse(propsElement.textContent);
+
+    if (compat) {
+      const container = document.createElement("span");
+      container.setAttribute("data-mreact-compat-boundary", name ?? "");
+      container.style.display = "contents";
+      placeholder.replaceWith(container);
+      __mreactCompatCreateRoot(container).render(__mreactCompatCreateElement(component, props));
+      propsElement?.remove();
+      continue;
+    }
+
+    const node = component(props);
+
+    placeholder.replaceWith(node);
+    propsElement?.remove();
+  }
+
+  return true;
+}
+
+function __mreactHasNonSerializableClientBoundaries(marker) {
+  return marker.querySelector(
+    'template[data-mreact-client-boundary][data-mreact-client-boundary-nonserializable="true"]',
+  ) !== null;
+}
+
+function __mreactClientBoundaryPropsElement(placeholder, name) {
+  let next = placeholder.nextSibling;
+
+  while (next !== null) {
+    if (
+      next.nodeType === Node.ELEMENT_NODE &&
+      next.tagName === "SCRIPT" &&
+      next.getAttribute("type") === "application/json" &&
+      next.getAttribute("data-mreact-client-boundary-props") === name
+    ) {
+      return next;
+    }
+
+    if (next.nodeType === Node.ELEMENT_NODE) {
+      return undefined;
+    }
+
+    next = next.nextSibling;
+  }
+
+  return undefined;
+}
+
+function __mreactResumeRoute(marker, nextNode) {
+  if (nextNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+    marker.replaceChildren(nextNode);
+    return;
+  }
+
+  const current = __mreactRouteResumeTarget(marker, nextNode);
+
+  if (current === null) {
+    marker.appendChild(nextNode);
+    return;
+  }
+
+  __mreactResumeNode(current, nextNode);
+
+  if (current.parentNode !== marker) {
+    return;
+  }
+
+  while (marker.childNodes.length > 1) {
+    marker.lastChild?.remove();
+  }
+}
+
+function __mreactRouteResumeTarget(marker, nextNode) {
+  const current = marker.firstChild;
+
+  if (
+    current === null ||
+    current.nodeType !== Node.ELEMENT_NODE ||
+    nextNode.nodeType !== Node.ELEMENT_NODE ||
+    current.tagName === nextNode.tagName ||
+    !current.hasAttribute("data-mreact-layout-boundary")
+  ) {
+    return current;
+  }
+
+  return __mreactFindLayoutPageTarget(current, nextNode) ?? current;
+}
+
+function __mreactFindLayoutPageTarget(current, nextNode) {
+  for (const child of Array.from(current.childNodes)) {
+    if (child.nodeType !== Node.ELEMENT_NODE) {
+      continue;
+    }
+
+    if (
+      child.tagName === nextNode.tagName &&
+      !child.hasAttribute("data-mreact-layout-boundary") &&
+      !child.hasAttribute("data-mreact-template-boundary")
+    ) {
+      return child;
+    }
+
+    if (child.hasAttribute("data-mreact-layout-boundary")) {
+      const nested = __mreactFindLayoutPageTarget(child, nextNode);
+
+      if (nested !== null) {
+        return nested;
+      }
+    }
+  }
+
+  return null;
+}
+
+function __mreactResumeNode(current, next) {
+  if (
+    next.nodeType === Node.COMMENT_NODE &&
+    next.nodeValue === "mreact-async-boundary"
+  ) {
+    // Server stream emits the resolved <Await> content; preserve the existing
+    // DOM instead of replacing it with the client placeholder comment.
+    return;
+  }
+
+  if (__mreactShouldReplaceNode(current, next)) {
+    current.replaceWith(next);
+    return;
+  }
+
+  if (current.nodeType === Node.TEXT_NODE && next.nodeType === Node.TEXT_NODE) {
+    if (current.nodeValue !== next.nodeValue) {
+      current.nodeValue = next.nodeValue;
+    }
+    return;
+  }
+
+  if (current.nodeType !== Node.ELEMENT_NODE || next.nodeType !== Node.ELEMENT_NODE) {
+    current.replaceWith(next);
+    return;
+  }
+
+  __mreactSyncEventBindings(current, next);
+  __mreactSyncAttributes(current, next);
+  __mreactSyncPropBindings(current, next);
+  __mreactResumeChildren(current, next);
+}
+
+function __mreactShouldReplaceNode(current, next) {
+  if (
+    next.nodeType === Node.ELEMENT_NODE &&
+    next.hasAttribute("data-mreact-template-boundary")
+  ) {
+    return true;
+  }
+
+  if (current.nodeType !== next.nodeType) {
+    return true;
+  }
+
+  return current.nodeType === Node.ELEMENT_NODE &&
+    current.tagName !== next.tagName;
+}
+
+function __mreactSyncEventBindings(current, next) {
+  const previousDisposers = current.__mreactEventDisposers;
+
+  if (Array.isArray(previousDisposers)) {
+    for (const dispose of previousDisposers) {
+      dispose();
+    }
+  }
+
+  const bindings = next.__mreactEventBindings;
+
+  if (!Array.isArray(bindings) || bindings.length === 0) {
+    current.__mreactEventDisposers = [];
+    current.__mreactHasEvents = false;
+    return;
+  }
+
+  const disposers = [];
+
+  for (const binding of bindings) {
+    if (binding.delegated === true && __mreactIsDelegatedEventType(binding.type)) {
+      disposers.push(__mreactAddDelegatedEventListener(current, binding.type, binding.listener));
+    } else {
+      current.addEventListener(binding.type, binding.listener);
+      disposers.push(() => current.removeEventListener(binding.type, binding.listener));
+    }
+  }
+
+  current.__mreactEventDisposers = disposers;
+  current.__mreactHasEvents = true;
+}
+
+function __mreactIsDelegatedEventType(type) {
+  return type === "change" ||
+    type === "click" ||
+    type === "input" ||
+    type === "keydown" ||
+    type === "keyup" ||
+    type === "pointerdown" ||
+    type === "pointermove" ||
+    type === "pointerup" ||
+    type === "submit";
+}
+
+function __mreactDelegatedEventState() {
+  globalThis.__mreactDelegatedEventState ??= {
+    elements: new WeakMap(),
+    roots: new WeakMap(),
+  };
+  return globalThis.__mreactDelegatedEventState;
+}
+
+function __mreactAddDelegatedEventListener(element, type, listener) {
+  const root = element.ownerDocument;
+  const state = __mreactDelegatedEventState();
+  let listenersByType = state.elements.get(element);
+
+  if (listenersByType === undefined) {
+    listenersByType = new Map();
+    state.elements.set(element, listenersByType);
+  }
+
+  let listeners = listenersByType.get(type);
+
+  if (listeners === undefined) {
+    listeners = [];
+    listenersByType.set(type, listeners);
+  }
+
+  listeners.push(listener);
+  __mreactRetainDelegatedEventRoot(root, type);
+
+  return () => {
+    const state = __mreactDelegatedEventState();
+    const currentListeners = state.elements.get(element)?.get(type);
+    const index = currentListeners?.indexOf(listener) ?? -1;
+
+    if (index !== -1) {
+      currentListeners?.splice(index, 1);
+    }
+
+    if (currentListeners?.length === 0) {
+      state.elements.get(element)?.delete(type);
+    }
+
+    __mreactReleaseDelegatedEventRoot(root, type);
+  };
+}
+
+function __mreactRetainDelegatedEventRoot(root, type) {
+  const state = __mreactDelegatedEventState();
+  let rootsByType = state.roots.get(root);
+
+  if (rootsByType === undefined) {
+    rootsByType = new Map();
+    state.roots.set(root, rootsByType);
+  }
+
+  const current = rootsByType.get(type);
+
+  if (current !== undefined) {
+    current.count += 1;
+    return;
+  }
+
+  const listener = (event) => __mreactDispatchDelegatedEvent(root, type, event);
+  rootsByType.set(type, { count: 1, listener });
+  root.addEventListener(type, listener);
+}
+
+function __mreactReleaseDelegatedEventRoot(root, type) {
+  const rootsByType = __mreactDelegatedEventState().roots.get(root);
+  const current = rootsByType?.get(type);
+
+  if (rootsByType === undefined || current === undefined) {
+    return;
+  }
+
+  current.count -= 1;
+
+  if (current.count > 0) {
+    return;
+  }
+
+  root.removeEventListener(type, current.listener);
+  rootsByType.delete(type);
+}
+
+function __mreactDispatchDelegatedEvent(root, type, event) {
+  const state = __mreactDelegatedEventState();
+
+  for (const target of event.composedPath()) {
+    if (target === root) {
+      break;
+    }
+
+    if (!(target instanceof HTMLElement)) {
+      continue;
+    }
+
+    const listeners = state.elements.get(target)?.get(type);
+
+    if (listeners === undefined || listeners.length === 0) {
+      continue;
+    }
+
+    const activeListeners = listeners.slice();
+
+    for (const listener of activeListeners) {
+      __mreactCallWithCurrentTarget(listener, event, target);
+    }
+
+    if (event.cancelBubble) {
+      break;
+    }
+  }
+}
+
+function __mreactCallWithCurrentTarget(listener, event, currentTarget) {
+  const descriptor = Object.getOwnPropertyDescriptor(event, "currentTarget");
+
+  Object.defineProperty(event, "currentTarget", {
+    configurable: true,
+    value: currentTarget,
+  });
+
+  try {
+    listener.call(currentTarget, event);
+  } finally {
+    if (descriptor === undefined) {
+      delete event.currentTarget;
+    } else {
+      Object.defineProperty(event, "currentTarget", descriptor);
+    }
+  }
+}
+
+function __mreactSyncAttributes(current, next) {
+  for (const attribute of Array.from(current.attributes)) {
+    if (!next.hasAttribute(attribute.name)) {
+      current.removeAttribute(attribute.name);
+    }
+  }
+
+  for (const attribute of Array.from(next.attributes)) {
+    if (current.getAttribute(attribute.name) !== attribute.value) {
+      current.setAttribute(attribute.name, attribute.value);
+    }
+  }
+}
+
+function __mreactSyncPropBindings(current, next) {
+  const previousBindings = current.__mreactPropBindings;
+
+  if (Array.isArray(previousBindings)) {
+    for (const binding of previousBindings) {
+      binding.dispose?.();
+    }
+  }
+
+  const bindings = next.__mreactPropBindings;
+
+  if (!Array.isArray(bindings) || bindings.length === 0) {
+    current.__mreactPropBindings = [];
+    current.__mreactHasReactiveProps = false;
+    return;
+  }
+
+  current.__mreactPropBindings = bindings;
+  current.__mreactHasReactiveProps = true;
+  next.__mreactPropBindings = [];
+  next.__mreactHasReactiveProps = false;
+
+  for (const binding of bindings) {
+    binding.retarget?.(current);
+  }
+}
+
+function __mreactResumeChildren(current, next) {
+  const nextChildren = Array.from(next.childNodes);
+  const refreshTextBindings = next.__mreactHasEvents === true;
+  let index = 0;
+
+  while (index < nextChildren.length) {
+    const currentChild = current.childNodes[index];
+    const nextChild = nextChildren[index];
+
+    if (currentChild === undefined) {
+      current.appendChild(nextChild);
+      index += 1;
+      continue;
+    }
+
+    // Nodes owned by insertDynamic/bindText must replace the matching server
+    // DOM so subsequent reactive updates mutate the live node/range instead of
+    // appending beside stale SSR fallback content.
+    const isDynamicNode = nextChild.__mreactDynamicNode === true;
+    const isReactiveText = nextChild.__mreactReactiveText === true;
+
+    if (isDynamicNode) {
+      currentChild.replaceWith(nextChild);
+    } else if (
+      (refreshTextBindings || isReactiveText) &&
+      currentChild.nodeType === Node.TEXT_NODE &&
+      nextChild.nodeType === Node.TEXT_NODE
+    ) {
+      currentChild.replaceWith(nextChild);
+    } else {
+      __mreactResumeNode(currentChild, nextChild);
+    }
+    index += 1;
+  }
+
+  while (current.childNodes.length > nextChildren.length) {
+    current.lastChild?.remove();
+  }
+}
+`;
+  return {
+    code: stripTypeScriptWithOxc(entry),
+  };
+}
+
+function workspaceRuntimePlugin(options: { routeFiles: readonly string[] }) {
+  const routeFiles = new Set(options.routeFiles);
+  const packageFile = (monorepoDir: string, packageName: string, entry: string): string =>
+    workspacePackageFile({
+      currentFileUrl: import.meta.url,
+      entry,
+      monorepoDir,
+      packageName,
+    });
+  const reactiveCorePath = packageFile("reactive-core", "@reckona/mreact-reactive-core", "index");
+  const reactiveCoreDir = dirname(reactiveCorePath);
+  const runtimePaths = new Map([
+    [
+      "@reckona/mreact-reactive-core/internal",
+      packageFile("reactive-core", "@reckona/mreact-reactive-core", "internal"),
+    ],
+    ["@reckona/mreact-compat", packageFile("react-compat", "@reckona/mreact-compat", "index")],
+    [
+      "@reckona/mreact-compat/event-priority",
+      packageFile("react-compat", "@reckona/mreact-compat", "event-priority"),
+    ],
+    [
+      "@reckona/mreact-compat/flight",
+      packageFile("react-compat", "@reckona/mreact-compat", "flight"),
+    ],
+    [
+      "@reckona/mreact-compat/internal",
+      packageFile("react-compat", "@reckona/mreact-compat", "internal"),
+    ],
+    [
+      "@reckona/mreact-compat/jsx-dev-runtime",
+      packageFile("react-compat", "@reckona/mreact-compat", "jsx-dev-runtime"),
+    ],
+    [
+      "@reckona/mreact-compat/jsx-runtime",
+      packageFile("react-compat", "@reckona/mreact-compat", "jsx-runtime"),
+    ],
+    [
+      "@reckona/mreact-compat/scheduler",
+      packageFile("react-compat", "@reckona/mreact-compat", "scheduler"),
+    ],
+    [
+      "@reckona/mreact-reactive-dom",
+      packageFile("reactive-dom", "@reckona/mreact-reactive-dom", "index"),
+    ],
+  ]);
+
+  return {
+    name: "mreact-workspace-runtime",
+    setup(buildApi: RouterCompatBuildApi) {
+      buildApi.onResolve({ filter: /^\.\/devtools\.js$/ }, (args) =>
+        args.importer?.startsWith(reactiveCoreDir) === true
+          ? { namespace: "mreact-devtools-stub", path: "devtools" }
+          : undefined,
+      );
+      buildApi.onResolve({ filter: /^@reckona\/mreact-reactive-core$/ }, () => ({
+        namespace: "mreact-hot-runtime",
+        path: "reactive-core",
+      }));
+      buildApi.onResolve(
+        {
+          filter:
+            /^@reckona\/mreact-(?:compat|reactive-core|reactive-dom)(?:\/(?:event-priority|flight|internal|jsx-dev-runtime|jsx-runtime|scheduler))?$/,
+        },
+        (args) => {
+          const path = runtimePaths.get(args.path);
+
+          return path === undefined ? undefined : { path };
+        },
+      );
+      buildApi.onLoad({ filter: /^reactive-core$/, namespace: "mreact-hot-runtime" }, () => ({
+        contents: `import { cell as nativeCell } from ${JSON.stringify(reactiveCorePath)};
+export * from ${JSON.stringify(reactiveCorePath)};
+export function cell(initial) {
+  const routeCell = globalThis.__mreactRouteCell;
+  return typeof routeCell === "function" ? routeCell(nativeCell, initial) : nativeCell(initial);
+}`,
+        loader: "ts",
+        resolveDir: reactiveCoreDir,
+      }));
+      buildApi.onLoad({ filter: /^devtools$/, namespace: "mreact-devtools-stub" }, () => ({
+        contents: `export function emitReactiveDevtoolsEvent() {}
+export function hasReactiveDevtoolsEmitter() { return false; }
+export function currentDevtoolsEmitter() { return undefined; }`,
+        loader: "ts",
+      }));
+      buildApi.onLoad({ filter: /\.(?:mreact\.)?[cm]?[jt]sx$/ }, async (args) => {
+        if (!isRouteClientDependencySourcePath(args.path, routeFiles)) {
+          return undefined;
+        }
+
+        const source = await readFile(args.path, "utf8");
+        const moduleContext = createCompilerModuleContext({
+          code: source,
+          filename: args.path,
+        });
+
+        if (!hasJsxSyntax(moduleContext.program)) {
+          return undefined;
+        }
+
+        const output = transformCompilerModuleContext({
+          code: source,
+          dev: true,
+          filename: args.path,
+          mode: isCompatSourcePath(args.path) ? "compat" : "reactive",
+          moduleContext,
+          target: "client",
+        });
+
+        if (output.diagnostics.length > 0) {
+          throw new Error(
+            output.diagnostics
+              .map((diagnostic) => formatDiagnostic(args.path, diagnostic))
+              .join("\n"),
+          );
+        }
+
+        return {
+          contents: output.code,
+          loader: "tsx",
+          resolveDir: dirname(args.path),
+        };
+      });
+    },
+  };
+}
+
+function isRouteClientDependencySourcePath(path: string, routeFiles: ReadonlySet<string>): boolean {
+  return !routeFiles.has(path) && !path.includes(`${sep}node_modules${sep}`);
+}
+
+function isCompatSourcePath(path: string): boolean {
+  return /\.compat(?:\.mreact)?(?:\.[cm]?[jt]sx?)?$/.test(path);
+}
+
+/**
+ * Detects the `export const clientNavigation = false` hint in a page module
+ * source. Returns the hinted value, or `true` when no hint is present (i.e.,
+ * preserve the historical "navigation runtime is always present" behavior).
+ *
+ * Regex-based to avoid pulling the JS parser into the build path. The pattern
+ * accepts the common formatting variants:
+ *   export const clientNavigation = false
+ *   export const   clientNavigation   =  false ;
+ *   export const clientNavigation: boolean = false
+ */
+export function detectClientNavigationHint(source: string): boolean {
+  const match = source.match(
+    /export\s+const\s+clientNavigation\s*(?::\s*[^=]+)?=\s*(true|false)\s*;?/,
+  );
+  return match === null ? true : match[1] === "true";
+}
+
+export function detectNavigationRuntimeHint(source: string): boolean {
+  const match = source.match(
+    /export\s+const\s+navigationRuntime\s*(?::\s*[^=]+)?=\s*(true|false)\s*;?/,
+  );
+  return match !== null && match[1] === "true";
+}
+
+function detectRouteCellStateHint(code: string): boolean {
+  const callExpression = routeCellCallExpressionSource(code);
+
+  return callExpression === undefined
+    ? /\bcell\d*\s*\(/.test(code)
+    : new RegExp(`(?:${callExpression})\\s*\\(`).test(code);
+}
+
+function detectRouteReactiveEffectHint(code: string): boolean {
+  return (
+    /from\s+["']@reckona\/mreact-reactive-core["']/.test(code) &&
+    /\beffect\s*\(/.test(code)
+  );
+}
+
+async function inferClientReferenceManifestForBundle(options: {
+  code: string;
+  filename: string;
+  routePath: string;
+}): Promise<readonly ClientReferenceMetadata[]> {
+  const cache = createClientRouteInferenceCache();
+  const moduleContext = await compilerModuleContextForSource({
+    cache,
+    code: options.code,
+    filename: options.filename,
+  });
+  const inference = await inferClientRouteModule({
+    cache,
+    code: options.code,
+    filename: options.filename,
+    moduleContext,
+    routePath: options.routePath,
+  });
+
+  if (inference.clientBoundaryImports.length === 0) {
+    return [];
+  }
+
+  const output = transformCompilerModuleContext({
+    code: options.code,
+    clientBoundaryImports: inference.clientBoundaryImports,
+    dev: true,
+    filename: options.filename,
+    moduleContext,
+    target: "server",
+  });
+
+  return output.metadata.clientReferenceManifest ?? [];
+}
+
+function emitClientReferenceImportBlock(imports: readonly ClientReferenceImport[]): string {
+  if (imports.length === 0) {
+    return "";
+  }
+
+  return `${imports
+    .map((reference, index) => {
+      const localName = clientReferenceLocalName(index);
+
+      return isIdentifierName(reference.exportName)
+        ? `import { ${reference.exportName} as ${localName} } from ${JSON.stringify(reference.importSource)};`
+        : `import * as ${localName} from ${JSON.stringify(reference.importSource)};`;
+    })
+    .join("\n")}\n`;
+}
+
+function emitClientReferenceRegistry(
+  manifest: readonly ClientReferenceMetadata[],
+  imports: readonly ClientReferenceImport[],
+  compatNames: ReadonlySet<string>,
+): string {
+  const importedExpressions = new Map(
+    imports.map((reference, index) => [
+      reference.name,
+      isIdentifierName(reference.exportName)
+        ? clientReferenceLocalName(index)
+        : `${clientReferenceLocalName(index)}[${JSON.stringify(reference.exportName)}]`,
+    ]),
+  );
+  const entries = manifest.flatMap((reference) => {
+    const expression =
+      importedExpressions.get(reference.name) ?? clientReferenceExpression(reference.name);
+
+    return expression === undefined
+      ? []
+      : [
+          compatNames.has(reference.name)
+            ? `  [${JSON.stringify(reference.name)}, { component: ${expression}, compat: true }],`
+            : `  [${JSON.stringify(reference.name)}, ${expression}],`,
+        ];
+  });
+
+  return ["const __mreactClientReferenceComponents = new Map([", ...entries, "]);"].join("\n");
+}
+
+function compatClientReferenceComponentNames(
+  manifest: readonly ClientReferenceMetadata[],
+): ReadonlySet<string> {
+  return new Set(
+    manifest
+      .filter((reference) => isCompatSourcePath(reference.moduleId))
+      .map((reference) => reference.name),
+  );
+}
+
+function emitCompatClientReferenceImportBlock(compatNames: ReadonlySet<string>): string {
+  return compatNames.size === 0
+    ? ""
+    : 'import { createElement as __mreactCompatCreateElement, createRoot as __mreactCompatCreateRoot } from "@reckona/mreact-compat";\n';
+}
+
+function clientReferenceLocalName(index: number): string {
+  return `__mreactClientReference${index}`;
+}
+
+function clientReferenceExpression(name: string): string | undefined {
+  return /^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*)*$/.test(name) ? name : undefined;
+}
+
+function routeComponentExpressionForComponents(components: readonly ComponentMetadata[]): string {
+  const candidates = uniqueStrings([
+    ...components
+      .filter((component) => component.exportName === "default")
+      .map((component) => component.name),
+    "Page",
+    "DefaultExport",
+  ]).filter(isIdentifierName);
+
+  return candidates.reduceRight(
+    (next, name) => `typeof ${name} === "function" ? ${name} : ${next}`,
+    "undefined",
+  );
+}
+
+function uniqueStrings(values: readonly string[]): string[] {
+  return Array.from(new Set(values));
+}
+
+function isIdentifierName(value: string): boolean {
+  return /^[A-Za-z_$][\w$]*$/.test(value);
+}
+
+function routeStateSignatureForSource(code: string): string {
+  const callExpression = routeCellCallExpressionSource(code);
+  const callsitePattern =
+    callExpression === undefined
+      ? /\b(?:const|let|var)\s+([A-Za-z_$][\w$]*)\s*=\s*(cell\d*|cell)\s*\(/g
+      : new RegExp(
+          `\\b(?:const|let|var)\\s+([A-Za-z_$][\\w$]*)\\s*=\\s*(${callExpression})\\s*\\(`,
+          "g",
+        );
+  const cellCallsites = Array.from(
+    code.matchAll(callsitePattern),
+    (match) => `${match[1]}:${match[2]}`,
+  );
+  const countPattern =
+    callExpression === undefined
+      ? /\bcell\d*\s*\(/g
+      : new RegExp(`(?:${callExpression})\\s*\\(`, "g");
+  const signature =
+    cellCallsites.length > 0
+      ? cellCallsites.join("\n")
+      : `cell-count:${(code.match(countPattern) ?? []).length}`;
+
+  return createHash("sha256").update(signature).digest("hex").slice(0, 16);
+}
+
+function routeCellCallExpressionSource(code: string): string | undefined {
+  const namedImports = new Set<string>();
+  const namespaceImports = new Set<string>();
+  const namedImportPattern =
+    /import\s+\{(?<imports>[^}]*)\}\s+from\s+["']@reckona\/mreact-reactive-core["']/g;
+
+  for (const match of code.matchAll(namedImportPattern)) {
+    const imports = match.groups?.imports;
+
+    if (imports === undefined) {
+      continue;
+    }
+
+    for (const part of imports.split(",")) {
+      const specifier = part.trim();
+      const alias = /^cell\s+as\s+([A-Za-z_$][\w$]*)$/.exec(specifier);
+
+      if (specifier === "cell") {
+        namedImports.add("cell");
+      } else if (alias?.[1] !== undefined) {
+        namedImports.add(alias[1]);
+      }
+    }
+  }
+
+  const namespaceImportPattern =
+    /import\s+\*\s+as\s+([A-Za-z_$][\w$]*)\s+from\s+["']@reckona\/mreact-reactive-core["']/g;
+
+  for (const match of code.matchAll(namespaceImportPattern)) {
+    if (match[1] !== undefined) {
+      namespaceImports.add(match[1]);
+    }
+  }
+
+  const alternatives = [
+    ...Array.from(namedImports, (name) => `\\b${escapeRegExp(name)}`),
+    ...Array.from(namespaceImports, (name) => `\\b${escapeRegExp(name)}\\.cell`),
+  ];
+
+  return alternatives.length === 0 ? undefined : `(?:${alternatives.join("|")})`;
+}
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+function errorMessage(error: unknown): string {
+  return error instanceof Error ? error.message : String(error);
+}
+
+function escapeScriptJson(value: string): string {
+  return value.replaceAll("<", "\\u003c");
+}