perf(csr): load component controllers on demand

packages/cli/src/build.ts

@@ -23,7 +23,7 @@ import {
 } from "node:fs";
 import { basename, dirname, extname, join, relative, resolve } from "node:path";
 import { buildRouter, type Route } from "@wrnexus/router";
-import { getReactiveRuntime } from "@wrnexus/csr";
+import { getComponentControllerRuntime, getReactiveRuntime } from "@wrnexus/csr";
 import {
   analyzeRuntimeImports,
   analyzeRuntimeRequirements,
@@ -109,6 +109,7 @@ export async function runBuild(appRoot: string): Promise<void> {
   const compiledDir = join(distDir, "compiled");
   const clientModulesDir = join(distDir, "client");
   const reactivePath = join(distDir, "reactive.js");
+  const controllersPath = join(distDir, "controllers.js");
   const publicDir = join(root, "public");
   const distPublicDir = join(distDir, "public");
   const config = await loadAppConfig(root);
@@ -477,6 +478,13 @@ export async function runBuild(appRoot: string): Promise<void> {
   );
   assetHash.update(reactiveCode);
   console.log(`✓ Runtime: ${reactivePath}`);
+  const controllerCode = await buildBrowserRuntime(
+    getComponentControllerRuntime(),
+    controllersPath,
+    join(compiledDir, "controllers.entry.js"),
+  );
+  assetHash.update(controllerCode);
+  console.log(`✓ Controllers: ${controllersPath}`);
 
   // 1a) Theme tokens + client switcher (always emitted; built-in light/dark).
   const theme = resolveThemeConfig(config.theme);
@@ -693,6 +701,7 @@ await createProductionServer(
   },
   {
     reactivePath: join(import.meta.dir, "reactive.js"),
+    controllersPath: join(import.meta.dir, "controllers.js"),
     clientModulesDir: join(import.meta.dir, "client"),
     themePath: join(import.meta.dir, "theme.css"),
     themeJsPath: join(import.meta.dir, "theme.js"),