feat: close application architecture gaps

packages/dev-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/dev-server",
-  "version": "0.8.48",
+  "version": "0.8.50",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/dev-server/src/runtime.ts

@@ -1,4 +1,5 @@
 import { brotliCompressSync, constants as zlibConstants } from "node:zlib";
+import { Buffer } from "node:buffer";
 /**
  * Shared request runtime used by BOTH the dev server and the production server.
  *
@@ -1667,6 +1668,34 @@ export function createHandlers(deps: RuntimeDeps): Handlers {
     language?: string,
     depth = 0,
   ): Promise<string> {
+    // Control definitions are inert base64 JSON. Resolve component mounts in
+    // their branch templates too, otherwise a component first selected by
+    // client state would materialize only an empty data-component placeholder.
+    const controlPattern = /data-wrn-(?:if|each)="([A-Za-z0-9+/=]+)"/g;
+    const replacements: Array<{ from: string; to: string }> = [];
+    for (const match of body.matchAll(controlPattern)) {
+      try {
+        const definition = JSON.parse(Buffer.from(match[1]!, "base64").toString("utf8")) as
+          Array<{ body?: string }> | { body?: string; empty?: string };
+        const entries = Array.isArray(definition) ? definition : [definition];
+        for (const entry of entries) {
+          if (typeof entry.body === "string" && entry.body.includes("data-component="))
+            entry.body = await renderComponents(entry.body, translate, language, depth + 1);
+          if (
+            "empty" in entry &&
+            typeof entry.empty === "string" &&
+            entry.empty.includes("data-component=")
+          )
+            entry.empty = await renderComponents(entry.empty, translate, language, depth + 1);
+        }
+        const encoded = Buffer.from(JSON.stringify(definition), "utf8").toString("base64");
+        replacements.push({ from: match[0], to: match[0].replace(match[1]!, encoded) });
+      } catch {
+        // The client reports malformed control metadata with source context.
+      }
+    }
+    for (const replacement of replacements) body = body.replace(replacement.from, replacement.to);
+
     if (depth > 15 || router.components.length === 0 || !body.includes("data-component=")) {
       return body;
     }