@effindomv2/create-fui-as-app 0.1.24 → 0.1.25

package/dist/src/templates.js

@@ -3,6 +3,71 @@ import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import { FUI_AS_VERSION, RUNTIME_VERSION } from "./versions.js";
 const TEMPLATE_ROOT = resolve(dirname(fileURLToPath(import.meta.url)), "..", "..", "templates");
+const SHARED_LOADING_OVERLAY_STYLES = `.effindom-loading-overlay {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  box-sizing: border-box;
+  background: linear-gradient(180deg, rgba(2, 6, 23, 0.72), rgba(10, 20, 34, 0.82));
+  backdrop-filter: blur(10px);
+  z-index: 2;
+}
+
+.effindom-loading-overlay[hidden] {
+  display: none;
+}
+
+.effindom-loading-card {
+  max-width: 420px;
+  padding: 22px 24px;
+  border: 1px solid rgba(148, 163, 184, 0.32);
+  border-radius: 18px;
+  background: rgba(6, 12, 21, 0.80);
+  text-align: center;
+  box-shadow: 0 18px 48px rgba(2, 6, 23, 0.30);
+}
+
+.effindom-loading-overlay[data-state="error"] .effindom-loading-card {
+  border-color: rgba(248, 113, 113, 0.50);
+  background: rgba(69, 10, 10, 0.78);
+}
+
+.effindom-loading-kicker {
+  margin: 0 0 10px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: #7dd3fc;
+}
+
+.effindom-loading-title {
+  margin: 0;
+  font-size: 28px;
+  line-height: 1.15;
+}
+
+.effindom-loading-detail {
+  margin: 12px 0 0;
+  font-size: 14px;
+  line-height: 1.55;
+  color: #cbd5e1;
+}`;
+const SHARED_LOADING_OVERLAY_BODY = `<div
+  class="effindom-loading-overlay"
+  id="effindom-loading-overlay"
+  data-state="loading"
+  aria-live="polite"
+  aria-hidden="true"
+  hidden>
+  <div class="effindom-loading-card">
+    <p class="effindom-loading-kicker">EffinDom backstage</p>
+    <h2 class="effindom-loading-title" id="effindom-loading-title">Teaching the pixels their lines...</h2>
+    <p class="effindom-loading-detail" id="effindom-loading-detail">The runtime orchestra is tuning up behind the canvas.</p>
+  </div>
+</div>`;
 function collectTemplateFiles(root, relativePath = "") {
     const absolutePath = resolve(root, relativePath);
     const stats = statSync(absolutePath);
@@ -32,12 +97,18 @@ function replaceTemplateTokens(value, context) {
         .replaceAll("__FUI_AS_VERSION__", FUI_AS_VERSION)
         .replaceAll("__RUNTIME_VERSION__", RUNTIME_VERSION);
 }
+function expandSharedLoadingOverlay(value) {
+    return value
+        .replaceAll("{{LOADING_OVERLAY_STYLES}}", SHARED_LOADING_OVERLAY_STYLES)
+        .replaceAll("{{LOADING_OVERLAY_BODY}}", SHARED_LOADING_OVERLAY_BODY);
+}
 export function createTemplateFiles(template, context) {
     const templateDirectory = resolve(TEMPLATE_ROOT, template);
     const files = collectTemplateFiles(templateDirectory);
     const output = new Map();
     for (const [filePath, contents] of files) {
-        output.set(filePath, replaceTemplateTokens(contents, context));
+        const replaced = replaceTemplateTokens(contents, context);
+        output.set(filePath, filePath.endsWith(".html") ? expandSharedLoadingOverlay(replaced) : replaced);
     }
     return output;
 }

package/dist/src/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const FUI_AS_VERSION = "0.1.21";
+export declare const FUI_AS_VERSION = "0.1.22";
 export declare const RUNTIME_VERSION = "0.1.8";

package/dist/src/versions.js

@@ -1,2 +1,2 @@
-export const FUI_AS_VERSION = "0.1.21";
+export const FUI_AS_VERSION = "0.1.22";
 export const RUNTIME_VERSION = "0.1.8";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effindomv2/create-fui-as-app",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "private": false,
   "license": "MIT",
   "description": "Scaffold a minimal EffinDom v2 FUI-AS app",

package/templates/hello/favicon.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="FUI-AS">
+  <rect width="64" height="64" rx="16" fill="#0f172a"/>
+  <path
+    d="M8 38C11 20 26 10 36 13C43 15 43 30 34 41C28 49 21 54 17 51C13 48 15 39 23 30C34 18 47 11 57 11M27 42C34 37 42 31 50 28"
+    fill="none"
+    stroke="#f8fafc"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="6.5"
+  />
+</svg>

package/templates/hello/index.html

@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>FUI-AS Hello World</title>
     <style>
@@ -34,62 +35,13 @@
         outline: none;
       }
 
-      .effindom-loading-overlay {
-        position: absolute;
-        inset: 0;
-        display: grid;
-        place-items: center;
-        padding: 18px;
-        box-sizing: border-box;
-        background: color-mix(in srgb, Canvas 35%, transparent);
-        backdrop-filter: blur(10px);
-      }
-
-      .effindom-loading-overlay[hidden] {
-        display: none;
-      }
-
-      .effindom-loading-card {
-        max-width: 420px;
-        padding: 20px;
-        border-radius: 14px;
-        border: 1px solid color-mix(in srgb, CanvasText 20%, transparent);
-        background: color-mix(in srgb, Canvas 85%, transparent);
-        text-align: center;
-      }
-
-      .effindom-loading-kicker {
-        margin: 0 0 8px;
-        font-size: 11px;
-        letter-spacing: 0.1em;
-        text-transform: uppercase;
-      }
-
-      .effindom-loading-title {
-        margin: 0;
-      }
-
-      .effindom-loading-detail {
-        margin: 8px 0 0;
-        opacity: 0.85;
-      }
+      {{LOADING_OVERLAY_STYLES}}
     </style>
   </head>
   <body>
     <section class="app-shell" data-effindom-canvas-size-source>
       <canvas id="fui-canvas"></canvas>
-      <div
-        class="effindom-loading-overlay"
-        id="effindom-loading-overlay"
-        data-state="loading"
-        aria-live="polite"
-        aria-hidden="false">
-        <div class="effindom-loading-card">
-          <p class="effindom-loading-kicker">EffinDom backstage</p>
-          <h2 class="effindom-loading-title" id="effindom-loading-title">Teaching the pixels their lines...</h2>
-          <p class="effindom-loading-detail" id="effindom-loading-detail">The runtime orchestra is tuning up behind the canvas.</p>
-        </div>
-      </div>
+      {{LOADING_OVERLAY_BODY}}
     </section>
     <script src="./effindom-runtime-config.js"></script>
     <script src="./bridge.js"></script>

package/templates/hello/scripts/prepare-runtime.ts

@@ -1,4 +1,4 @@
-import { copyFileSync, cpSync, existsSync, mkdirSync, rmSync, writeFileSync } from "node:fs";
+import { copyFileSync, cpSync, existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
 
 const outputDir = "public";
 rmSync(outputDir, { recursive: true, force: true });
@@ -15,4 +15,14 @@ writeFileSync(
   'window.__effindomRuntime = Object.assign({}, window.__effindomRuntime, { manifestUrl: "./runtime/dist/effindom.v2.manifest.json" });\n',
   "utf8",
 );
-copyFileSync("index.html", `${outputDir}/index.html`);
+const indexTemplate = readFileSync("index.html", "utf8");
+const loadingOverlayStyles = readFileSync("node_modules/@effindomv2/fui-as/browser/loading-overlay-styles.html", "utf8");
+const loadingOverlayBody = readFileSync("node_modules/@effindomv2/fui-as/browser/loading-overlay-body.html", "utf8");
+writeFileSync(
+  `${outputDir}/index.html`,
+  indexTemplate
+    .replace("{{LOADING_OVERLAY_STYLES}}", loadingOverlayStyles)
+    .replace("{{LOADING_OVERLAY_BODY}}", loadingOverlayBody),
+  "utf8",
+);
+copyFileSync("favicon.svg", `${outputDir}/favicon.svg`);

package/templates/mvc/README.md

@@ -2,10 +2,13 @@
 
 This template scaffolds a multi-route FUI-AS app with explicit page-level MVC.
 
+- `src/route-config.ts` is the single route manifest used by wasm builds, runtime prep, smoke checks, and routed harness.
+- Route `title` now drives the browser tab/window title for each shell, and `routeHead("name", "content", ...)` from `@effindomv2/fui-as/browser/routed-app-conventions` can optionally add generic page metadata.
+- `src/routes.ts` holds the route path helpers used by nav/UI code.
 - `src/routes/HomeApp.ts` and `src/routes/SettingsApp.ts` are route app entrypoints.
 - `src/routes/home/*` and `src/routes/settings/*` hold each route's model, view, and controller.
 - `src/routes/shared/*` holds shared route UI primitives (for example nav pills/nav bar) and shared route helpers.
-- `harness.ts` wires routed host boot, route table, and host-services/events registration.
+- `harness.ts` wires routed host boot, route table, and host-services/events registration from the route manifest.
 - `route-shell.html` is the per-route host shell copied for each route path.
 - `src/host/host-services.ts` and `src/host/host-events.ts` are app-owned bridge contracts; `src/host/generated/*` is generated output.
 
@@ -22,7 +25,7 @@ The routed harness is optimized for fast navigation:
 ## Typical workflow
 
 1. Add/modify page behavior inside `home/` or `settings/` controllers/models/views.
-2. Add new routes by creating another `*App.ts` entrypoint plus a new route folder and route record in `harness.ts`.
+2. Add new routes by updating `src/route-config.ts`, then add the matching route folder and `*App.ts` entrypoint.
 3. Keep shared browser bridge capabilities in `src/host/*.ts`, then regenerate with `npm run generate:host`.
 4. Use `npm run dev` for local routed iteration (uses debug AssemblyScript builds for faster rebuilds).
 5. Use `npm run publish` for an optimized release build staged under `published/`.

package/templates/mvc/favicon.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="FUI-AS">
+  <rect width="64" height="64" rx="16" fill="#0f172a"/>
+  <path
+    d="M8 38C11 20 26 10 36 13C43 15 43 30 34 41C28 49 21 54 17 51C13 48 15 39 23 30C34 18 47 11 57 11M27 42C34 37 42 31 50 28"
+    fill="none"
+    stroke="#f8fafc"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="6.5"
+  />
+</svg>

package/templates/mvc/harness.ts

@@ -1,34 +1,21 @@
 import { startRoutedHarness, type HarnessExports, type RoutedHarnessRoute } from './src/fui/FuiBrowser';
 import { appHostEvents } from './src/host/host-events';
 import { appHostServices } from './src/host/host-services';
+import { routeManifest } from './src/route-config';
+import { buildRoutedHarnessRoutes } from '@effindomv2/fui-as/browser/routed-app-conventions';
 
 type RouteExports = HarnessExports & {
   __runApp(): void;
   __disposeApp?(): void;
 };
 
-const routePrefix = window.location.pathname.startsWith('/v2/fui-as/demo-mvc/') ? '/v2/fui-as/demo-mvc' : '';
-const routes: readonly RoutedHarnessRoute[] = [
-  {
-    routePath: `${routePrefix}/home/`,
-    wasmPath: `${routePrefix}/home.wasm`,
-    title: 'Home',
-  },
-  {
-    routePath: `${routePrefix}/settings/`,
-    wasmPath: `${routePrefix}/settings.wasm`,
-    title: 'Settings',
-  },
-];
+const routedRoutes: readonly RoutedHarnessRoute[] = buildRoutedHarnessRoutes(routeManifest, window.location.pathname);
 
 startRoutedHarness<RouteExports>({
   shellId: 'fui-routes',
-  routeBase: routes[0].routePath,
-  routes,
+  routeBase: routedRoutes[0].routePath,
+  routes: routedRoutes,
   recreateRuntimeOnWarmRouteSwap: true,
-  showLoadingOverlay(isWarmRouteSwap): boolean {
-    return !isWarmRouteSwap;
-  },
   run(exports): void {
     exports.__runApp();
   },

package/templates/mvc/index.html

@@ -1,11 +1,174 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="refresh" content="0; url=/home/" />
-    <title>FUI-AS Routed App</title>
-  </head>
-  <body>
-    <p>Redirecting to <a href="/home/">/home/</a>…</p>
-  </body>
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+  {{HEAD}}
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <base href="../" />
+  <style>
+    :root {
+      font-family: system-ui, sans-serif;
+      color-scheme: dark;
+      --page-background:
+        radial-gradient(circle at top left, rgba(56, 189, 248, 0.14), transparent 32%),
+        linear-gradient(180deg, #020611, #060d18 55%, #0a1422);
+      --page-text: #e2e8f0;
+      --canvas-border: #263449;
+      --canvas-background: #0d1424;
+      --canvas-shadow: 0 24px 60px rgba(2, 6, 23, 0.45);
+      --sidebar-border: #18324b;
+      --sidebar-background: rgba(6, 12, 21, 0.94);
+      --sidebar-label: #cbd5e1;
+      --button-background: linear-gradient(180deg, #0f3c66, #0f5e8a);
+      --button-text: #f8fbff;
+      --code-color: #93c5fd;
+    }
+
+    :root[data-demo-theme="light"] {
+      color-scheme: light;
+      --page-background:
+        radial-gradient(circle at top left, rgba(14, 165, 233, 0.10), transparent 30%),
+        linear-gradient(180deg, #f8fbff, #eef4fb 55%, #e5eef8);
+      --page-text: #102033;
+      --canvas-border: #c5d2e2;
+      --canvas-background: #f8fbff;
+      --canvas-shadow: 0 20px 48px rgba(15, 23, 42, 0.12);
+      --sidebar-border: #c5d2e2;
+      --sidebar-background: rgba(255, 255, 255, 0.92);
+      --sidebar-label: #334155;
+      --button-background: linear-gradient(180deg, #2563eb, #1d4ed8);
+      --button-text: #f8fbff;
+      --code-color: #1d4ed8;
+    }
+
+    body {
+      margin: 0;
+      min-height: 100vh;
+      display: grid;
+      grid-template-columns: minmax(320px, 1fr) 340px;
+      gap: 24px;
+      padding: 24px;
+      box-sizing: border-box;
+      background: var(--page-background);
+      color: var(--page-text);
+    }
+
+    .viewport {
+      display: grid;
+      min-width: 0;
+      min-height: 0;
+    }
+
+    .canvas-shell {
+      position: relative;
+      min-width: 0;
+      height: calc(100vh - 48px);
+      border-radius: 16px;
+      overflow: hidden;
+    }
+
+    canvas {
+      box-sizing: border-box;
+      display: block;
+      width: 100%;
+      height: 100%;
+      border: 1px solid var(--canvas-border);
+      border-radius: 16px;
+      background: var(--canvas-background);
+      box-shadow: var(--canvas-shadow);
+      outline: none;
+    }
+
+    canvas:focus,
+    canvas:focus-visible {
+      outline: none;
+    }
+
+    {{LOADING_OVERLAY_STYLES}}
+
+    .sidebar {
+      display: grid;
+      gap: 16px;
+      align-content: start;
+      padding: 20px;
+      border: 1px solid var(--sidebar-border);
+      border-radius: 16px;
+      background: var(--sidebar-background);
+    }
+
+    .control-group {
+      display: grid;
+      gap: 8px;
+    }
+
+    .control-group label {
+      font-size: 14px;
+      color: var(--sidebar-label);
+    }
+
+    input[type="range"] {
+      width: 100%;
+    }
+
+    button {
+      padding: 10px 14px;
+      border: 0;
+      border-radius: 10px;
+      background: var(--button-background);
+      color: var(--button-text);
+      font: inherit;
+      cursor: pointer;
+    }
+
+    code {
+      color: var(--code-color);
+    }
+
+    @media (max-width: 1120px) {
+      body {
+        grid-template-columns: 1fr;
+      }
+
+      .canvas-shell {
+        height: clamp(360px, 60vh, 620px);
+      }
+    }
+  </style>
+</head>
+<body>
+  <section class="viewport">
+    <div class="canvas-shell" data-effindom-canvas-size-source>
+      <canvas id="fui-canvas"></canvas>
+      {{LOADING_OVERLAY_BODY}}
+    </div>
+  </section>
+
+  <aside class="sidebar">
+    <div>
+      <h1>FUI-AS demo</h1>
+      <p>Use this routed demo shell to tweak the dashboard route and jump to the advanced-controls playground without leaving the shared runtime.</p>
+      <p><code>Dashboard route</code></p>
+    </div>
+
+    <div class="control-group">
+      <label for="hue">Accent hue <span id="hue-value">210 deg</span></label>
+      <input id="hue" type="range" min="0" max="359" step="1" value="210" />
+    </div>
+
+    <div class="control-group">
+      <label>Theme mode <span id="theme-mode-value">Dark</span></label>
+      <button id="toggle-theme-mode" type="button">Switch to light mode</button>
+    </div>
+
+    <div class="control-group">
+      <label>Clock tick <span id="tick-value">0 s</span></label>
+      <button id="pulse-hue" type="button">Jump hue</button>
+    </div>
+  </aside>
+
+  <script src="./effindom-runtime-config.js"></script>
+  <script src="./bridge.js"></script>
+  <script type="module" src="./harness.js"></script>
+</body>
 </html>

package/templates/mvc/package.json

@@ -10,14 +10,14 @@
     "publish": "npm run generate:host && npm run build:assets && npm run build:wasm:publish && npm run build:harness && npm run publish:stage",
     "build:assets": "tsx scripts/prepare-runtime.ts",
     "build:wasm": "npm run build:wasm:home && npm run build:wasm:settings",
-    "build:wasm:dev": "npm run build:wasm:dev:home && npm run build:wasm:dev:settings",
-    "build:wasm:publish": "npm run build:wasm:publish:home && npm run build:wasm:publish:settings",
     "build:wasm:home": "asc src/routes/HomeApp.ts --config asconfig.json --target release --outFile public/home.wasm",
     "build:wasm:settings": "asc src/routes/SettingsApp.ts --config asconfig.json --target release --outFile public/settings.wasm",
+    "build:wasm:dev": "npm run build:wasm:dev:home && npm run build:wasm:dev:settings",
     "build:wasm:dev:home": "asc src/routes/HomeApp.ts --config asconfig.json --target debug --outFile public/home.wasm",
     "build:wasm:dev:settings": "asc src/routes/SettingsApp.ts --config asconfig.json --target debug --outFile public/settings.wasm",
-    "build:wasm:publish:home": "asc src/routes/HomeApp.ts --config asconfig.json --target release --outFile public/home.wasm --optimizeLevel 3 --shrinkLevel 2 --noAssert",
-    "build:wasm:publish:settings": "asc src/routes/SettingsApp.ts --config asconfig.json --target release --outFile public/settings.wasm --optimizeLevel 3 --shrinkLevel 2 --noAssert",
+    "build:wasm:publish": "npm run build:wasm:publish:home && npm run build:wasm:publish:settings",
+    "build:wasm:publish:home": "asc src/routes/HomeApp.ts --config asconfig.json --target release --optimizeLevel 3 --shrinkLevel 2 --noAssert --outFile public/home.wasm",
+    "build:wasm:publish:settings": "asc src/routes/SettingsApp.ts --config asconfig.json --target release --optimizeLevel 3 --shrinkLevel 2 --noAssert --outFile public/settings.wasm",
     "build:harness": "esbuild harness.ts --bundle --format=esm --platform=browser --outfile=public/harness.js",
     "generate:host-services": "tsx ./node_modules/@effindomv2/fui-as/scripts/generate-host-services.ts src/host/host-services.ts appHostServices src/host/generated/HostServices.ts ../../fui/FuiPrimitives",
     "generate:host-events": "tsx ./node_modules/@effindomv2/fui-as/scripts/generate-host-events.ts src/host/host-events.ts appHostEvents src/host/generated/HostEvents.ts ../../fui/FuiPrimitives",

package/templates/mvc/route-shell.html

@@ -4,51 +4,168 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <base href="../" />
-  <title>FUI-AS Routed Demo</title>
+  <title>EffinDom FUI AssemblyScript Demo</title>
   <style>
-    html, body {
+    :root {
+      font-family: system-ui, sans-serif;
+      color-scheme: dark;
+      --page-background:
+        radial-gradient(circle at top left, rgba(56, 189, 248, 0.14), transparent 32%),
+        linear-gradient(180deg, #020611, #060d18 55%, #0a1422);
+      --page-text: #e2e8f0;
+      --canvas-border: #263449;
+      --canvas-background: #0d1424;
+      --canvas-shadow: 0 24px 60px rgba(2, 6, 23, 0.45);
+      --sidebar-border: #18324b;
+      --sidebar-background: rgba(6, 12, 21, 0.94);
+      --sidebar-label: #cbd5e1;
+      --button-background: linear-gradient(180deg, #0f3c66, #0f5e8a);
+      --button-text: #f8fbff;
+      --code-color: #93c5fd;
+    }
+
+    :root[data-demo-theme="light"] {
+      color-scheme: light;
+      --page-background:
+        radial-gradient(circle at top left, rgba(14, 165, 233, 0.10), transparent 30%),
+        linear-gradient(180deg, #f8fbff, #eef4fb 55%, #e5eef8);
+      --page-text: #102033;
+      --canvas-border: #c5d2e2;
+      --canvas-background: #f8fbff;
+      --canvas-shadow: 0 20px 48px rgba(15, 23, 42, 0.12);
+      --sidebar-border: #c5d2e2;
+      --sidebar-background: rgba(255, 255, 255, 0.92);
+      --sidebar-label: #334155;
+      --button-background: linear-gradient(180deg, #2563eb, #1d4ed8);
+      --button-text: #f8fbff;
+      --code-color: #1d4ed8;
+    }
+
+    body {
       margin: 0;
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-      background: #020617;
+      min-height: 100vh;
+      display: grid;
+      grid-template-columns: minmax(320px, 1fr) 340px;
+      gap: 24px;
+      padding: 24px;
+      box-sizing: border-box;
+      background: var(--page-background);
+      color: var(--page-text);
     }
 
-    main {
-      width: 100%;
-      height: 100%;
+    .viewport {
+      display: grid;
+      min-width: 0;
+      min-height: 0;
+    }
+
+    .canvas-shell {
+      position: relative;
+      min-width: 0;
+      height: calc(100vh - 48px);
+      border-radius: 16px;
+      overflow: hidden;
     }
 
     canvas {
+      box-sizing: border-box;
       display: block;
       width: 100%;
       height: 100%;
-      background: #020617;
+      border: 1px solid var(--canvas-border);
+      border-radius: 16px;
+      background: var(--canvas-background);
+      box-shadow: var(--canvas-shadow);
+      outline: none;
     }
 
-    .effindom-loading-overlay {
-      position: fixed;
-      inset: 0;
+    canvas:focus,
+    canvas:focus-visible {
+      outline: none;
+    }
+
+    {{LOADING_OVERLAY_STYLES}}
+
+    .sidebar {
       display: grid;
-      place-items: center;
-      color: #e2e8f0;
-      background: rgba(2, 6, 23, 0.75);
-      z-index: 2;
-      font-family: system-ui, sans-serif;
+      gap: 16px;
+      align-content: start;
+      padding: 20px;
+      border: 1px solid var(--sidebar-border);
+      border-radius: 16px;
+      background: var(--sidebar-background);
     }
 
-    .effindom-loading-overlay[hidden] {
-      display: none;
+    .control-group {
+      display: grid;
+      gap: 8px;
+    }
+
+    .control-group label {
+      font-size: 14px;
+      color: var(--sidebar-label);
+    }
+
+    input[type="range"] {
+      width: 100%;
+    }
+
+    button {
+      padding: 10px 14px;
+      border: 0;
+      border-radius: 10px;
+      background: var(--button-background);
+      color: var(--button-text);
+      font: inherit;
+      cursor: pointer;
+    }
+
+    code {
+      color: var(--code-color);
+    }
+
+    @media (max-width: 1120px) {
+      body {
+        grid-template-columns: 1fr;
+      }
+
+      .canvas-shell {
+        height: clamp(360px, 60vh, 620px);
+      }
     }
   </style>
 </head>
 <body>
-  <main data-effindom-canvas-size-source>
-    <canvas id="fui-canvas"></canvas>
-  </main>
-  <div class="effindom-loading-overlay" id="effindom-loading-overlay" data-state="loading">
-    <div>Loading routed demo…</div>
-  </div>
+  <section class="viewport">
+    <div class="canvas-shell" data-effindom-canvas-size-source>
+      <canvas id="fui-canvas"></canvas>
+      {{LOADING_OVERLAY_BODY}}
+    </div>
+  </section>
+
+  <aside class="sidebar">
+    <div>
+      <h1>FUI-AS Routed Demo</h1>
+      <p>The routed demo shell keeps the dashboard, advanced-controls, and templated-controls playgrounds on the same bridge runtime.</p>
+      <p><code>Demo MFE route</code></p>
+    </div>
+
+    <div class="control-group">
+      <label for="hue">Accent hue <span id="hue-value">210 deg</span></label>
+      <input id="hue" type="range" min="0" max="359" step="1" value="210" />
+    </div>
+
+    <div class="control-group">
+      <label>Theme mode <span id="theme-mode-value">Dark</span></label>
+      <button id="toggle-theme-mode" type="button">Switch to light mode</button>
+    </div>
+
+    <div class="control-group">
+      <label>Clock tick <span id="tick-value">0 s</span></label>
+      <button id="pulse-hue" type="button">Jump hue</button>
+    </div>
+  </aside>
+
   <script src="./effindom-runtime-config.js"></script>
   <script src="./bridge.js"></script>
   <script type="module" src="./harness.js"></script>

package/templates/mvc/scripts/build-route-wasm.ts

@@ -0,0 +1,68 @@
+import { spawnSync } from "node:child_process";
+import { mkdirSync } from "node:fs";
+import { routeManifest } from "../src/route-config";
+import { resolveRouteManifest } from "@effindomv2/fui-as/browser/routed-app-conventions";
+
+const args = process.argv.slice(2);
+let target = "release";
+let publish = false;
+let routeKey = "";
+let buildAll = false;
+
+for (let index = 0; index < args.length; index += 1) {
+  const arg = args[index];
+  switch (arg) {
+    case "--all":
+      buildAll = true;
+      break;
+    case "--route":
+      routeKey = args[++index] ?? "";
+      break;
+    case "--target":
+      target = args[++index] ?? "release";
+      break;
+    case "--publish":
+      publish = true;
+      break;
+    default:
+      if (routeKey === "") {
+        routeKey = arg;
+      } else {
+        throw new Error(`Unknown argument: ${arg}`);
+      }
+      break;
+  }
+}
+
+const resolvedManifest = resolveRouteManifest(routeManifest);
+const selectedRoutes = buildAll
+  ? resolvedManifest.routes
+  : resolvedManifest.routes.filter((route): boolean => route.key === routeKey);
+
+if (!buildAll && selectedRoutes.length === 0) {
+  throw new Error(`Unknown route key: ${routeKey}`);
+}
+
+mkdirSync("public", { recursive: true });
+
+for (const route of selectedRoutes) {
+  const ascArgs = [
+    route.entrypoint,
+    "--config",
+    "asconfig.json",
+    "--target",
+    target,
+    "--outFile",
+    `public/${route.wasmFile}`,
+  ];
+
+  if (publish) {
+    ascArgs.push("--optimizeLevel", "3", "--shrinkLevel", "2", "--noAssert");
+  }
+
+  console.log(`Building ${route.title} -> ${route.wasmFile}`);
+  const result = spawnSync("asc", ascArgs, { stdio: "inherit" });
+  if (result.status !== 0) {
+    process.exit(result.status ?? 1);
+  }
+}

package/templates/mvc/scripts/prepare-runtime.ts

@@ -1,10 +1,24 @@
-import { copyFileSync, cpSync, existsSync, mkdirSync, rmSync, writeFileSync } from "node:fs";
+import { copyFileSync, cpSync, existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { renderRoutedPageHead, resolveRouteManifest, routeHead } from "@effindomv2/fui-as/browser/routed-app-conventions";
+import { routeManifest } from "../src/route-config";
 
 const outputDir = "public";
+const resolvedManifest = resolveRouteManifest(routeManifest);
+const indexTemplate = readFileSync("index.html", "utf8");
+const routeShellTemplate = readFileSync("route-shell.html", "utf8");
+const loadingOverlayStyles = readFileSync("node_modules/@effindomv2/fui-as/browser/loading-overlay-styles.html", "utf8");
+const loadingOverlayBody = readFileSync("node_modules/@effindomv2/fui-as/browser/loading-overlay-body.html", "utf8");
+
+function renderLoadingOverlay(template: string): string {
+  return template
+    .replace("{{LOADING_OVERLAY_STYLES}}", loadingOverlayStyles)
+    .replace("{{LOADING_OVERLAY_BODY}}", loadingOverlayBody);
+}
 rmSync(outputDir, { recursive: true, force: true });
 mkdirSync(`${outputDir}/runtime`, { recursive: true });
-mkdirSync(`${outputDir}/home`, { recursive: true });
-mkdirSync(`${outputDir}/settings`, { recursive: true });
+for (const route of resolvedManifest.routes) {
+  mkdirSync(`${outputDir}/${route.shellDir}`, { recursive: true });
+}
 
 cpSync("node_modules/@effindomv2/runtime/dist", `${outputDir}/runtime/dist`, { recursive: true });
 cpSync("node_modules/@effindomv2/runtime/dist/fonts", `${outputDir}/runtime/fonts`, { recursive: true });
@@ -17,6 +31,21 @@ writeFileSync(
   'window.__effindomRuntime = Object.assign({}, window.__effindomRuntime, { manifestUrl: "./runtime/dist/effindom.v2.manifest.json" });\n',
   "utf8",
 );
-copyFileSync("index.html", `${outputDir}/index.html`);
-copyFileSync("route-shell.html", `${outputDir}/home/index.html`);
-copyFileSync("route-shell.html", `${outputDir}/settings/index.html`);
+copyFileSync("favicon.svg", `${outputDir}/favicon.svg`);
+const defaultRoute = resolvedManifest.routes.length == 0 ? undefined : resolvedManifest.routes[0];
+const defaultRouteTitle = defaultRoute == null ? "FUI-AS Routed App" : defaultRoute.title;
+const defaultRouteHref = defaultRoute == null ? "/home/" : defaultRoute.publishedRoutePath;
+writeFileSync(
+  `${outputDir}/index.html`,
+  renderLoadingOverlay(indexTemplate)
+    .replace("{{HEAD}}", renderRoutedPageHead(defaultRouteTitle, defaultRoute == null ? routeHead() : defaultRoute.headTags))
+    .replaceAll("{{REDIRECT_HREF}}", defaultRouteHref),
+  "utf8",
+);
+for (const route of resolvedManifest.routes) {
+  writeFileSync(
+    `${outputDir}/${route.shellDir}/index.html`,
+    renderLoadingOverlay(routeShellTemplate).replace("{{HEAD}}", renderRoutedPageHead(route.title, route.headTags)),
+    "utf8",
+  );
+}

package/templates/mvc/scripts/smoke.ts

@@ -1,18 +1,24 @@
 import { accessSync } from "node:fs";
+import { resolveRouteManifest } from "@effindomv2/fui-as/browser/routed-app-conventions";
+import { routeManifest } from "../src/route-config";
 
+const resolvedManifest = resolveRouteManifest(routeManifest);
 const expectedFiles = [
   "public/index.html",
   "public/harness.js",
-  "public/home/index.html",
-  "public/settings/index.html",
-  "public/home.wasm",
-  "public/settings.wasm",
   "public/bridge.js",
   "public/effindom-runtime-config.js",
   "public/runtime/dist/effindom.v2.manifest.json",
   "public/runtime/fonts/NotoSans-Regular.ttf",
 ];
 
+for (const route of resolvedManifest.routes) {
+  expectedFiles.push(
+    `public/${route.shellDir}/index.html`,
+    `public/${route.wasmFile}`,
+  );
+}
+
 for (const filePath of expectedFiles) {
   accessSync(filePath);
 }

package/templates/mvc/src/route-config.ts

@@ -0,0 +1,16 @@
+import { defineRoutedAppManifest, routeDef, routeHead } from "@effindomv2/fui-as/browser/routed-app-conventions";
+
+export const sourceRouteBase = "";
+
+export const routeManifest = defineRoutedAppManifest(sourceRouteBase, [
+  routeDef("home", "Home", routeHead(
+    "description", "Home page for the routed MVC starter.",
+  )),
+  routeDef("settings", "Settings", routeHead(
+    "description", "Settings page for the routed MVC starter.",
+  )),
+]);
+
+const routes = routeManifest.routes;
+export const homeRouteConfig = routes[0];
+export const settingsRouteConfig = routes[1];

package/templates/mvc/src/routes/shared/design-system/NavBar.ts

@@ -1,6 +1,6 @@
 import { FlexBox, JustifyContent, Row, Unit } from "../../../fui/Fui";
 import { NavPill } from "./NavPill";
-import { homeRoute, settingsRoute } from "../routes";
+import { homeRoute, settingsRoute } from "../../../routes";
 
 function navSpacer(): FlexBox {
   return new FlexBox().width(10.0, Unit.Pixel).height(1.0, Unit.Pixel);

package/templates/mvc/src/routes.ts

@@ -0,0 +1,11 @@
+import { currentRoute } from "./fui/Fui";
+import { routeManifest } from "./route-config";
+import { resolveRoutePath } from "@effindomv2/fui-as/browser/routed-app-conventions";
+
+export function homeRoute(): string {
+  return resolveRoutePath(routeManifest, "home", currentRoute.value);
+}
+
+export function settingsRoute(): string {
+  return resolveRoutePath(routeManifest, "settings", currentRoute.value);
+}

package/templates/mvc/src/routes/shared/routes.ts

@@ -1,22 +0,0 @@
-import { currentRoute } from "../../fui/Fui";
-
-const SOURCE_DEMO_BASE: string = "/v2/fui-as/demo-mvc";
-const SOURCE_HOME_ROUTE: string = "/v2/fui-as/demo-mvc/home/";
-const SOURCE_SETTINGS_ROUTE: string = "/v2/fui-as/demo-mvc/settings/";
-const PUBLISHED_HOME_ROUTE: string = "/home/";
-const PUBLISHED_SETTINGS_ROUTE: string = "/settings/";
-
-function isSourceDemoRoute(route: string): bool {
-  if (route.length == 0) {
-    return true;
-  }
-  return route.startsWith(SOURCE_DEMO_BASE);
-}
-
-export function homeRoute(): string {
-  return isSourceDemoRoute(currentRoute.value) ? SOURCE_HOME_ROUTE : PUBLISHED_HOME_ROUTE;
-}
-
-export function settingsRoute(): string {
-  return isSourceDemoRoute(currentRoute.value) ? SOURCE_SETTINGS_ROUTE : PUBLISHED_SETTINGS_ROUTE;
-}