@effindomv2/create-fui-as-app 0.1.4 → 0.1.6

package/build/templates/hello/README.md

@@ -0,0 +1,20 @@
+# Hello World scaffold guide
+
+This template is the smallest FUI-AS app shape:
+
+- `src/App.ts` is the app entrypoint (`__runApp`) and where you compose your root retained UI tree.
+- `src/HelloWorld.ts` is a simple feature module you can replace with your own screens/components.
+- `harness.ts` boots the browser runtime and mounts the wasm app.
+- `src/host/host-services.ts` and `src/host/host-events.ts` define app-owned JS bridge contracts.
+- `src/host/generated/*` is generated from those host definition files.
+
+## Typical workflow
+
+1. Build UI from `src/App.ts` with controls/nodes from `./fui/Fui`.
+2. Split real features into more files under `src/` and compose them in `App.ts`.
+3. If browser-owned capabilities are needed (for example shell APIs), add definitions in `src/host/*.ts` and run `npm run generate:host`.
+4. Run `npm run dev` while iterating.
+
+## Architecture intent
+
+Use this template as a single-app baseline: one wasm, one harness, one mounted root tree. Keep UI composition in AssemblyScript and keep browser glue inside `harness.ts` + host bridge definitions.

package/build/templates/hello/harness.ts

@@ -1,4 +1,4 @@
-import { startHarness } from './src/FuiBrowser';
+import { startHarness } from './src/fui/FuiBrowser';
 import { appHostEvents } from './src/host/host-events';
 import { appHostServices } from './src/host/host-services';
 

package/build/templates/hello/package.json

@@ -9,10 +9,10 @@
     "build:assets": "tsx scripts/prepare-runtime.ts",
     "build:wasm": "asc src/App.ts --config asconfig.json --target release",
     "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/generated/HostServices.ts ../FuiPrimitives",
-    "generate:host-events": "tsx ./node_modules/@effindomv2/fui-as/scripts/generate-host-events.ts src/host/host-events.ts appHostEvents src/generated/HostEvents.ts ../FuiPrimitives",
+    "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",
     "generate:host": "npm run generate:host-services && npm run generate:host-events",
-    "watch": "chokidar \"src/**/*.ts\" \"harness.ts\" \"index.html\" \"asconfig.json\" -c \"npm run build\"",
+    "watch": "chokidar \"src/**/*.ts\" \"harness.ts\" \"index.html\" \"asconfig.json\" --ignore \"src/host/generated/**\" -c \"npm run build\"",
     "serve": "http-server public -p 8080 -c-1",
     "dev": "npm run build && concurrently -k -n watch,serve \"npm run watch\" \"npm run serve\"",
     "test": "npm run build && tsx scripts/smoke.ts"

package/build/templates/hello/src/App.ts

@@ -1,6 +1,6 @@
-import { Application } from "./Fui";
-export * from "./FuiExports";
-export * from "./generated/HostEvents";
+import { Application } from "./fui/Fui";
+export * from "./fui/FuiExports";
+export * from "./host/generated/HostEvents";
 
 import { createHelloWorldPage } from "./HelloWorld";
 

package/build/templates/hello/src/HelloWorld.ts

@@ -8,10 +8,10 @@ import {
   Text,
   TextAlign,
   Unit,
-} from "./Fui";
-import { Callback1 } from "./FuiPrimitives";
-import { onAppClockTick } from "./generated/HostEvents";
-import { appClockNowUnixSeconds } from "./generated/HostServices";
+} from "./fui/Fui";
+import { Callback1 } from "./fui/FuiPrimitives";
+import { onAppClockTick } from "./host/generated/HostEvents";
+import { appClockNowUnixSeconds } from "./host/generated/HostServices";
 
 class ClockTickHandler extends Callback1<i32> {
   private readonly owner: HelloWorld;

package/build/templates/hello/src/fui/Fui.ts

@@ -0,0 +1 @@
+export * from "../../node_modules/@effindomv2/fui-as/src/Fui";

package/build/templates/hello/src/fui/FuiBrowser.ts

@@ -0,0 +1 @@
+export * from "../../node_modules/@effindomv2/fui-as/browser/src/index";

package/build/templates/hello/src/fui/FuiExports.ts

@@ -0,0 +1 @@
+export * from "../../node_modules/@effindomv2/fui-as/src/FuiExports";

package/build/templates/hello/src/fui/FuiPrimitives.ts

@@ -0,0 +1 @@
+export * from "../../node_modules/@effindomv2/fui-as/src/FuiPrimitives";

package/build/templates/hello/src/{generated → host/generated}/HostEvents.ts

@@ -1,5 +1,5 @@
 // Generated from the scaffold host-events definition.
-import { Callback0, Callback1, Callback2 } from "../FuiPrimitives";
+import { Callback0, Callback1, Callback2 } from "../../fui/FuiPrimitives";
 
 let __appClockTickHandler: Callback1<i32> | null = null;
 

package/build/templates/hello/src/host/host-events.ts

@@ -1,4 +1,4 @@
-import { defineHostEvents, hostEvent } from "../FuiBrowser";
+import { defineHostEvents, hostEvent } from "../fui/FuiBrowser";
 
 function nowUnixSeconds(): number {
   return Math.floor(Date.now() / 1000);

package/build/templates/hello/src/host/host-services.ts

@@ -1,4 +1,4 @@
-import { defineHostServices, hostService } from "../FuiBrowser";
+import { defineHostServices, hostService } from "../fui/FuiBrowser";
 
 function nowUnixSeconds(): number {
   return Math.floor(Date.now() / 1000);

package/build/templates/mvc/README.md

@@ -0,0 +1,27 @@
+# MVC scaffold guide
+
+This template scaffolds a multi-route FUI-AS app with explicit page-level MVC.
+
+- `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.
+- `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.
+
+## Routing + deployment model
+
+Each route builds to its own wasm (`home.wasm`, `settings.wasm`) and is mounted by routed harness config. This is designed for true MFE slices: each route app can evolve and deploy independently while still sharing the same browser host/runtime contract.
+
+The routed harness is optimized for fast navigation:
+
+- route shells stay stable while route wasm swaps,
+- warm route transitions can avoid full loading overlays,
+- host bridge wiring is reused consistently across route apps.
+
+## 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`.
+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.

package/build/templates/mvc/harness.ts

@@ -1,8 +1,8 @@
-import { startRoutedHarness, type HarnessExports, type RoutedHarnessRoute } from './src/FuiBrowser';
+import { startRoutedHarness, type HarnessExports, type RoutedHarnessRoute } from './src/fui/FuiBrowser';
 import { appHostEvents } from './src/host/host-events';
 import { appHostServices } from './src/host/host-services';
 
-type MvcRouteExports = HarnessExports & {
+type RouteExports = HarnessExports & {
   __runApp(): void;
   __disposeApp?(): void;
 };
@@ -10,19 +10,19 @@ type MvcRouteExports = HarnessExports & {
 const routePrefix = window.location.pathname.startsWith('/v2/fui-as/demo-mvc/') ? '/v2/fui-as/demo-mvc' : '';
 const routes: readonly RoutedHarnessRoute[] = [
   {
-    routePath: `${routePrefix}/mvc-home/`,
-    wasmPath: `${routePrefix}/mvc-home.wasm`,
-    title: 'MVC Home',
+    routePath: `${routePrefix}/home/`,
+    wasmPath: `${routePrefix}/home.wasm`,
+    title: 'Home',
   },
   {
-    routePath: `${routePrefix}/mvc-settings/`,
-    wasmPath: `${routePrefix}/mvc-settings.wasm`,
-    title: 'MVC Settings',
+    routePath: `${routePrefix}/settings/`,
+    wasmPath: `${routePrefix}/settings.wasm`,
+    title: 'Settings',
   },
 ];
 
-startRoutedHarness<MvcRouteExports>({
-  shellId: 'fui-mvc',
+startRoutedHarness<RouteExports>({
+  shellId: 'fui-routes',
   routeBase: routes[0].routePath,
   routes,
   recreateRuntimeOnWarmRouteSwap: true,

package/build/templates/mvc/index.html

@@ -2,10 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta http-equiv="refresh" content="0; url=/mvc-home/" />
-    <title>FUI-AS MVC App</title>
+    <meta http-equiv="refresh" content="0; url=/home/" />
+    <title>FUI-AS Routed App</title>
   </head>
   <body>
-    <p>Redirecting to <a href="/mvc-home/">/mvc-home/</a>…</p>
+    <p>Redirecting to <a href="/home/">/home/</a>…</p>
   </body>
 </html>

package/build/templates/mvc/package.json

@@ -3,18 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "type": "module",
-  "description": "Scaffolded FUI-AS MVC app",
+  "description": "Scaffolded FUI-AS routed app",
   "scripts": {
     "build": "npm run generate:host && npm run build:assets && npm run build:wasm && npm run build:harness",
     "build:assets": "tsx scripts/prepare-runtime.ts",
     "build:wasm": "npm run build:wasm:home && npm run build:wasm:settings",
-    "build:wasm:home": "asc src/routes/mvc_home.ts --config asconfig.json --target release --outFile public/mvc-home.wasm",
-    "build:wasm:settings": "asc src/routes/mvc_settings.ts --config asconfig.json --target release --outFile public/mvc-settings.wasm",
+    "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: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/generated/HostServices.ts ../FuiPrimitives",
-    "generate:host-events": "tsx ./node_modules/@effindomv2/fui-as/scripts/generate-host-events.ts src/host/host-events.ts appHostEvents src/generated/HostEvents.ts ../FuiPrimitives",
+    "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",
     "generate:host": "npm run generate:host-services && npm run generate:host-events",
-    "watch": "chokidar \"src/**/*.ts\" \"harness.ts\" \"route-shell.html\" \"index.html\" \"asconfig.json\" -c \"npm run build\"",
+    "watch": "chokidar \"src/**/*.ts\" \"harness.ts\" \"route-shell.html\" \"index.html\" \"asconfig.json\" --ignore \"src/host/generated/**\" -c \"npm run build\"",
     "serve": "http-server public -p 8080 -c-1",
     "dev": "npm run build && concurrently -k -n watch,serve \"npm run watch\" \"npm run serve\"",
     "test": "npm run build && tsx scripts/smoke.ts"

package/build/templates/mvc/route-shell.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <base href="../" />
-  <title>FUI-AS MVC Demo</title>
+  <title>FUI-AS Routed Demo</title>
   <style>
     html, body {
       margin: 0;
@@ -47,7 +47,7 @@
     <canvas id="fui-canvas"></canvas>
   </main>
   <div class="effindom-loading-overlay" id="effindom-loading-overlay" data-state="loading">
-    <div>Loading MVC demo…</div>
+    <div>Loading routed demo…</div>
   </div>
   <script src="./effindom-runtime-config.js"></script>
   <script src="./bridge.js"></script>

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

@@ -3,8 +3,8 @@ import { copyFileSync, cpSync, existsSync, mkdirSync, rmSync, writeFileSync } fr
 const outputDir = "public";
 rmSync(outputDir, { recursive: true, force: true });
 mkdirSync(`${outputDir}/runtime`, { recursive: true });
-mkdirSync(`${outputDir}/mvc-home`, { recursive: true });
-mkdirSync(`${outputDir}/mvc-settings`, { recursive: true });
+mkdirSync(`${outputDir}/home`, { recursive: true });
+mkdirSync(`${outputDir}/settings`, { 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 });
@@ -18,5 +18,5 @@ writeFileSync(
   "utf8",
 );
 copyFileSync("index.html", `${outputDir}/index.html`);
-copyFileSync("route-shell.html", `${outputDir}/mvc-home/index.html`);
-copyFileSync("route-shell.html", `${outputDir}/mvc-settings/index.html`);
+copyFileSync("route-shell.html", `${outputDir}/home/index.html`);
+copyFileSync("route-shell.html", `${outputDir}/settings/index.html`);

package/build/templates/mvc/scripts/smoke.ts

@@ -3,10 +3,10 @@ import { accessSync } from "node:fs";
 const expectedFiles = [
   "public/index.html",
   "public/harness.js",
-  "public/mvc-home/index.html",
-  "public/mvc-settings/index.html",
-  "public/mvc-home.wasm",
-  "public/mvc-settings.wasm",
+  "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",

package/build/templates/mvc/src/fui/Fui.ts

@@ -0,0 +1 @@
+export * from "../../node_modules/@effindomv2/fui-as/src/Fui";

package/build/templates/mvc/src/fui/FuiBrowser.ts

@@ -0,0 +1 @@
+export * from "../../node_modules/@effindomv2/fui-as/browser/src/index";

package/build/templates/mvc/src/fui/FuiExports.ts

@@ -0,0 +1 @@
+export * from "../../node_modules/@effindomv2/fui-as/src/FuiExports";

package/build/templates/mvc/src/fui/FuiPrimitives.ts

@@ -0,0 +1 @@
+export * from "../../node_modules/@effindomv2/fui-as/src/FuiPrimitives";

package/build/templates/mvc/src/{generated → host/generated}/HostEvents.ts

@@ -1,5 +1,5 @@
 // Generated from the scaffold host-events definition.
-import { Callback0, Callback1, Callback2 } from "../FuiPrimitives";
+import { Callback0, Callback1, Callback2 } from "../../fui/FuiPrimitives";
 
 let __appClockTickHandler: Callback1<i32> | null = null;
 

package/build/templates/mvc/src/host/host-events.ts

@@ -1,4 +1,4 @@
-import { defineHostEvents, hostEvent } from "../FuiBrowser";
+import { defineHostEvents, hostEvent } from "../fui/FuiBrowser";
 
 function nowUnixSeconds(): number {
   return Math.floor(Date.now() / 1000);

package/build/templates/mvc/src/host/host-services.ts

@@ -1,4 +1,4 @@
-import { defineHostServices, hostService } from "../FuiBrowser";
+import { defineHostServices, hostService } from "../fui/FuiBrowser";
 
 function nowUnixSeconds(): number {
   return Math.floor(Date.now() / 1000);

package/build/templates/mvc/src/routes/HomeApp.ts

@@ -0,0 +1,15 @@
+export * from "../fui/FuiExports";
+export * from "../host/generated/HostEvents";
+
+import { createManagedApplication } from "../fui/Fui";
+import { HomeController } from "./home/HomeController";
+
+const app = createManagedApplication<HomeController>(() => new HomeController());
+
+export function __runApp(): void {
+  app.run();
+}
+
+export function __disposeApp(): void {
+  app.dispose();
+}

package/build/templates/mvc/src/routes/SettingsApp.ts

@@ -0,0 +1,15 @@
+export * from "../fui/FuiExports";
+export * from "../host/generated/HostEvents";
+
+import { createManagedApplication } from "../fui/Fui";
+import { SettingsController } from "./settings/SettingsController";
+
+const app = createManagedApplication<SettingsController>(() => new SettingsController());
+
+export function __runApp(): void {
+  app.run();
+}
+
+export function __disposeApp(): void {
+  app.dispose();
+}

package/build/templates/mvc/src/routes/{mvc/pages/home → home}/HomeController.ts

@@ -1,7 +1,7 @@
-import { Application, Node } from "../../../../Fui";
-import { Callback1 } from "../../../../FuiPrimitives";
-import { onAppClockTick } from "../../../../generated/HostEvents";
-import { appClockNowUnixSeconds } from "../../../../generated/HostServices";
+import { ManagedApplicationController, Node } from "../../fui/Fui";
+import { Callback1 } from "../../fui/FuiPrimitives";
+import { onAppClockTick } from "../../host/generated/HostEvents";
+import { appClockNowUnixSeconds } from "../../host/generated/HostServices";
 import { HomeModel } from "./HomeModel";
 import { HomeView } from "./HomeView";
 
@@ -19,12 +19,13 @@ class ClockTickHandler extends Callback1<i32> {
   }
 }
 
-export class HomeController {
+export class HomeController extends ManagedApplicationController {
   readonly model: HomeModel = new HomeModel();
   readonly view: HomeView = new HomeView(this.model);
   private readonly clockTickHandler: ClockTickHandler = new ClockTickHandler(this);
 
   constructor() {
+    super();
     this.view.actionButton.onClickWith(this, (controller) => {
       controller.model.actionCount += 1;
       controller.view.setActionCount(controller.model.actionCount);
@@ -44,12 +45,8 @@ export class HomeController {
     return this.view.getRoot();
   }
 
-  mount(): void {
-    Application.mount(this.view.getRoot());
-  }
-
   dispose(): void {
     onAppClockTick(null);
-    Application.unmount();
+    super.dispose();
   }
 }

package/build/templates/mvc/src/routes/{mvc/pages/home → home}/HomeView.ts

@@ -1,37 +1,24 @@
-import { Column, FlexBox, JustifyContent, Row, SelectionArea, Text, Unit, rgb } from "../../../../Fui";
-import { MvcNavPill } from "../../shared/design-system/MvcNavPill";
-import { MvcPrimaryButton } from "../../shared/design-system/MvcPrimaryButton";
-import { mvcHomeRoute, mvcSettingsRoute } from "../../shared/routes";
+import { Column, FlexBox, SelectionArea, Text, Unit, rgb } from "../../fui/Fui";
+import { createNavBar } from "../shared/design-system/NavBar";
+import { PrimaryButton } from "../shared/design-system/PrimaryButton";
 import { HomeModel } from "./HomeModel";
 
-function navSpacer(): FlexBox {
-  return new FlexBox().width(10.0, Unit.Pixel).height(1.0, Unit.Pixel);
-}
-
 export class HomeView {
-  readonly actionButton: MvcPrimaryButton;
+  readonly actionButton: PrimaryButton;
   private readonly statusText: Text;
   private readonly hostServiceText: Text;
   private readonly hostEventText: Text;
   private readonly root!: SelectionArea;
 
   constructor(model: HomeModel) {
-    const homePill = new MvcNavPill(mvcHomeRoute(), "Home").active(true);
-    const settingsPill = new MvcNavPill(mvcSettingsRoute(), "Settings").active(false);
-
-    const navBar = Row()
-      .width(100.0, Unit.Percent)
-      .justifyContent(JustifyContent.End)
-      .child(homePill)
-      .child(navSpacer())
-      .child(settingsPill);
+    const navBar = createNavBar(true);
 
     const title = new Text(model.title).fontSize(34.0).textColor(rgb(241, 245, 249)) as Text;
     const subtitle = new Text(model.subtitle).fontSize(16.0).textColor(rgb(148, 163, 184)) as Text;
     this.statusText = new Text("Home counter: 0").fontSize(18.0).textColor(rgb(147, 197, 253)) as Text;
     this.hostServiceText = new Text("Host service time: -").fontSize(15.0).textColor(rgb(191, 219, 254)) as Text;
     this.hostEventText = new Text("Host event tick: -").fontSize(15.0).textColor(rgb(134, 239, 172)) as Text;
-    this.actionButton = new MvcPrimaryButton(model.actionLabel);
+    this.actionButton = new PrimaryButton(model.actionLabel);
 
     const content = Column(
       navBar,

package/build/templates/mvc/src/routes/{mvc/pages/settings → settings}/SettingsController.ts

@@ -1,12 +1,13 @@
-import { Application, Node } from "../../../../Fui";
+import { ManagedApplicationController, Node } from "../../fui/Fui";
 import { SettingsModel } from "./SettingsModel";
 import { SettingsView } from "./SettingsView";
 
-export class SettingsController {
+export class SettingsController extends ManagedApplicationController {
   readonly model: SettingsModel = new SettingsModel();
   readonly view: SettingsView = new SettingsView(this.model);
 
   constructor() {
+    super();
     this.view.actionButton.onClickWith(this, (controller) => {
       controller.model.saveCount += 1;
       controller.view.setSaveCount(controller.model.saveCount);
@@ -16,12 +17,4 @@ export class SettingsController {
   getRoot(): Node {
     return this.view.getRoot();
   }
-
-  mount(): void {
-    Application.mount(this.view.getRoot());
-  }
-
-  dispose(): void {
-    Application.unmount();
-  }
 }

package/build/templates/mvc/src/routes/{mvc/pages/settings → settings}/SettingsView.ts

@@ -1,33 +1,20 @@
-import { Column, FlexBox, JustifyContent, Row, SelectionArea, Text, Unit, rgb } from "../../../../Fui";
-import { MvcNavPill } from "../../shared/design-system/MvcNavPill";
-import { MvcPrimaryButton } from "../../shared/design-system/MvcPrimaryButton";
-import { mvcHomeRoute, mvcSettingsRoute } from "../../shared/routes";
+import { Column, FlexBox, SelectionArea, Text, Unit, rgb } from "../../fui/Fui";
+import { createNavBar } from "../shared/design-system/NavBar";
+import { PrimaryButton } from "../shared/design-system/PrimaryButton";
 import { SettingsModel } from "./SettingsModel";
 
-function navSpacer(): FlexBox {
-  return new FlexBox().width(10.0, Unit.Pixel).height(1.0, Unit.Pixel);
-}
-
 export class SettingsView {
-  readonly actionButton: MvcPrimaryButton;
+  readonly actionButton: PrimaryButton;
   private readonly statusText: Text;
   private readonly root!: SelectionArea;
 
   constructor(model: SettingsModel) {
-    const homePill = new MvcNavPill(mvcHomeRoute(), "Home").active(false);
-    const settingsPill = new MvcNavPill(mvcSettingsRoute(), "Settings").active(true);
-
-    const navBar = Row()
-      .width(100.0, Unit.Percent)
-      .justifyContent(JustifyContent.End)
-      .child(homePill)
-      .child(navSpacer())
-      .child(settingsPill);
+    const navBar = createNavBar(false);
 
     const title = new Text(model.title).fontSize(34.0).textColor(rgb(241, 245, 249)) as Text;
     const subtitle = new Text(model.subtitle).fontSize(16.0).textColor(rgb(148, 163, 184)) as Text;
     this.statusText = new Text("Settings saved: 0").fontSize(18.0).textColor(rgb(134, 239, 172)) as Text;
-    this.actionButton = new MvcPrimaryButton(model.actionLabel);
+    this.actionButton = new PrimaryButton(model.actionLabel);
 
     const content = Column(
       navBar,

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

@@ -0,0 +1,18 @@
+import { FlexBox, JustifyContent, Row, Unit } from "../../../fui/Fui";
+import { NavPill } from "./NavPill";
+import { homeRoute, settingsRoute } from "../routes";
+
+function navSpacer(): FlexBox {
+  return new FlexBox().width(10.0, Unit.Pixel).height(1.0, Unit.Pixel);
+}
+
+export function createNavBar(homeIsActive: bool): FlexBox {
+  const homePill = new NavPill(homeRoute(), "Home").active(homeIsActive);
+  const settingsPill = new NavPill(settingsRoute(), "Settings").active(!homeIsActive);
+  return Row()
+    .width(100.0, Unit.Percent)
+    .justifyContent(JustifyContent.End)
+    .child(homePill)
+    .child(navSpacer())
+    .child(settingsPill);
+}

package/build/templates/mvc/src/routes/{mvc/shared/design-system/MvcNavPill.ts → shared/design-system/NavPill.ts}

@@ -1,4 +1,4 @@
-import { NavLink, Text, rgb } from "../../../../Fui";
+import { NavLink, Text, rgb } from "../../../fui/Fui";
 
 const PILL_RADIUS: f32 = 999.0;
 const PILL_PADDING_X: f32 = 16.0;
@@ -8,7 +8,7 @@ const PILL_ACTIVE_BG: u32 = rgb(34, 197, 94);
 const PILL_INACTIVE_TEXT: u32 = rgb(226, 232, 240);
 const PILL_ACTIVE_TEXT: u32 = rgb(12, 16, 24);
 
-export class MvcNavPill extends NavLink {
+export class NavPill extends NavLink {
   private readonly labelNode: Text;
   private activeValue: bool = false;
 

package/build/templates/mvc/src/routes/{mvc/shared/design-system/MvcPrimaryButton.ts → shared/design-system/PrimaryButton.ts}

@@ -1,4 +1,4 @@
-import { Button, rgb } from "../../../../Fui";
+import { Button, rgb } from "../../../fui/Fui";
 
 const BUTTON_RADIUS: f32 = 12.0;
 const BUTTON_PADDING_X: f32 = 18.0;
@@ -6,7 +6,7 @@ const BUTTON_PADDING_Y: f32 = 10.0;
 const BUTTON_BG: u32 = rgb(59, 130, 246);
 const BUTTON_TEXT: u32 = rgb(241, 245, 249);
 
-export class MvcPrimaryButton extends Button {
+export class PrimaryButton extends Button {
   constructor(label: string) {
     super(label);
     this

package/build/templates/mvc/src/routes/{mvc/shared → shared}/routes.ts

@@ -1,10 +1,10 @@
-import { currentRoute } from "../../../Fui";
+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/mvc-home/";
-const SOURCE_SETTINGS_ROUTE: string = "/v2/fui-as/demo-mvc/mvc-settings/";
-const PUBLISHED_HOME_ROUTE: string = "/mvc-home/";
-const PUBLISHED_SETTINGS_ROUTE: string = "/mvc-settings/";
+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) {
@@ -13,10 +13,10 @@ function isSourceDemoRoute(route: string): bool {
   return route.startsWith(SOURCE_DEMO_BASE);
 }
 
-export function mvcHomeRoute(): string {
+export function homeRoute(): string {
   return isSourceDemoRoute(currentRoute.value) ? SOURCE_HOME_ROUTE : PUBLISHED_HOME_ROUTE;
 }
 
-export function mvcSettingsRoute(): string {
+export function settingsRoute(): string {
   return isSourceDemoRoute(currentRoute.value) ? SOURCE_SETTINGS_ROUTE : PUBLISHED_SETTINGS_ROUTE;
 }

package/dist/scripts/sync-templates.js

@@ -26,7 +26,7 @@ function rewriteSdkImportsInFile(filePath, templateSrcRoot) {
     const original = readFileSync(filePath, "utf8");
     const rewritten = original
         .replace(/(['"])(?:\.\.\/)+src\/(Fui|FuiExports|FuiPrimitives|FuiBrowser)\1/g, (_full, quote, symbolName) => {
-        const targetPath = join(templateSrcRoot, `${symbolName}.ts`);
+        const targetPath = join(templateSrcRoot, "fui", `${symbolName}.ts`);
         const relativeSpecifier = posixRelativeImport(filePath, targetPath);
         return `${quote}${relativeSpecifier}${quote}`;
     })
@@ -47,11 +47,11 @@ function walkFiles(root, callback) {
     }
 }
 function writeSharedSdkShims(templateRoot) {
-    const srcRoot = join(templateRoot, "src");
-    writeTextFile(join(srcRoot, "Fui.ts"), 'export * from "../node_modules/@effindomv2/fui-as/src/Fui";\n');
-    writeTextFile(join(srcRoot, "FuiExports.ts"), 'export * from "../node_modules/@effindomv2/fui-as/src/FuiExports";\n');
-    writeTextFile(join(srcRoot, "FuiPrimitives.ts"), 'export * from "../node_modules/@effindomv2/fui-as/src/FuiPrimitives";\n');
-    writeTextFile(join(srcRoot, "FuiBrowser.ts"), 'export * from "../node_modules/@effindomv2/fui-as/browser/src/index";\n');
+    const fuiRoot = join(templateRoot, "src", "fui");
+    writeTextFile(join(fuiRoot, "Fui.ts"), 'export * from "../../node_modules/@effindomv2/fui-as/src/Fui";\n');
+    writeTextFile(join(fuiRoot, "FuiExports.ts"), 'export * from "../../node_modules/@effindomv2/fui-as/src/FuiExports";\n');
+    writeTextFile(join(fuiRoot, "FuiPrimitives.ts"), 'export * from "../../node_modules/@effindomv2/fui-as/src/FuiPrimitives";\n');
+    writeTextFile(join(fuiRoot, "FuiBrowser.ts"), 'export * from "../../node_modules/@effindomv2/fui-as/browser/src/index";\n');
 }
 function writeAsconfig(templateRoot) {
     writeTextFile(join(templateRoot, "asconfig.json"), JSON.stringify({
@@ -151,10 +151,10 @@ for (const filePath of expectedFiles) {
         "build:assets": "tsx scripts/prepare-runtime.ts",
         "build:wasm": "asc src/App.ts --config asconfig.json --target release",
         "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/generated/HostServices.ts ../FuiPrimitives",
-        "generate:host-events": "tsx ./node_modules/@effindomv2/fui-as/scripts/generate-host-events.ts src/host/host-events.ts appHostEvents src/generated/HostEvents.ts ../FuiPrimitives",
+        "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",
         "generate:host": "npm run generate:host-services && npm run generate:host-events",
-        watch: 'chokidar "src/**/*.ts" "harness.ts" "index.html" "asconfig.json" -c "npm run build"',
+        watch: 'chokidar "src/**/*.ts" "harness.ts" "index.html" "asconfig.json" --ignore "src/host/generated/**" -c "npm run build"',
         serve: "http-server public -p 8080 -c-1",
         dev: 'npm run build && concurrently -k -n watch,serve "npm run watch" "npm run serve"',
         test: "npm run build && tsx scripts/smoke.ts",
@@ -165,11 +165,11 @@ function writeMvcSupportFiles(templateRoot) {
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta http-equiv="refresh" content="0; url=/mvc-home/" />
-    <title>FUI-AS MVC App</title>
+    <meta http-equiv="refresh" content="0; url=/home/" />
+    <title>FUI-AS Routed App</title>
   </head>
   <body>
-    <p>Redirecting to <a href="/mvc-home/">/mvc-home/</a>…</p>
+    <p>Redirecting to <a href="/home/">/home/</a>…</p>
   </body>
 </html>
 `);
@@ -178,8 +178,8 @@ function writeMvcSupportFiles(templateRoot) {
 const outputDir = "public";
 rmSync(outputDir, { recursive: true, force: true });
 mkdirSync(\`\${outputDir}/runtime\`, { recursive: true });
-mkdirSync(\`\${outputDir}/mvc-home\`, { recursive: true });
-mkdirSync(\`\${outputDir}/mvc-settings\`, { recursive: true });
+mkdirSync(\`\${outputDir}/home\`, { recursive: true });
+mkdirSync(\`\${outputDir}/settings\`, { 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 });
@@ -193,18 +193,18 @@ writeFileSync(
   "utf8",
 );
 copyFileSync("index.html", \`\${outputDir}/index.html\`);
-copyFileSync("route-shell.html", \`\${outputDir}/mvc-home/index.html\`);
-copyFileSync("route-shell.html", \`\${outputDir}/mvc-settings/index.html\`);
+copyFileSync("route-shell.html", \`\${outputDir}/home/index.html\`);
+copyFileSync("route-shell.html", \`\${outputDir}/settings/index.html\`);
 `);
     writeTextFile(join(templateRoot, "scripts", "smoke.ts"), `import { accessSync } from "node:fs";
 
 const expectedFiles = [
   "public/index.html",
   "public/harness.js",
-  "public/mvc-home/index.html",
-  "public/mvc-settings/index.html",
-  "public/mvc-home.wasm",
-  "public/mvc-settings.wasm",
+  "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",
@@ -219,17 +219,17 @@ for (const filePath of expectedFiles) {
         build: "npm run generate:host && npm run build:assets && npm run build:wasm && npm run build:harness",
         "build:assets": "tsx scripts/prepare-runtime.ts",
         "build:wasm": "npm run build:wasm:home && npm run build:wasm:settings",
-        "build:wasm:home": "asc src/routes/mvc_home.ts --config asconfig.json --target release --outFile public/mvc-home.wasm",
-        "build:wasm:settings": "asc src/routes/mvc_settings.ts --config asconfig.json --target release --outFile public/mvc-settings.wasm",
+        "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: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/generated/HostServices.ts ../FuiPrimitives",
-        "generate:host-events": "tsx ./node_modules/@effindomv2/fui-as/scripts/generate-host-events.ts src/host/host-events.ts appHostEvents src/generated/HostEvents.ts ../FuiPrimitives",
+        "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",
         "generate:host": "npm run generate:host-services && npm run generate:host-events",
-        watch: 'chokidar "src/**/*.ts" "harness.ts" "route-shell.html" "index.html" "asconfig.json" -c "npm run build"',
+        watch: 'chokidar "src/**/*.ts" "harness.ts" "route-shell.html" "index.html" "asconfig.json" --ignore "src/host/generated/**" -c "npm run build"',
         serve: "http-server public -p 8080 -c-1",
         dev: 'npm run build && concurrently -k -n watch,serve "npm run watch" "npm run serve"',
         test: "npm run build && tsx scripts/smoke.ts",
-    }, "Scaffolded FUI-AS MVC app");
+    }, "Scaffolded FUI-AS routed app");
 }
 function rewriteHarnessImports(filePath) {
     const original = readFileSync(filePath, "utf8");
@@ -256,6 +256,7 @@ function syncHelloTemplate() {
     cpSync(join(sourceRoot, "src"), templateSrcRoot, { recursive: true });
     cpSync(join(sourceRoot, "harness.ts"), join(templateRoot, "harness.ts"));
     cpSync(join(sourceRoot, "index.html"), join(templateRoot, "index.html"));
+    cpSync(join(sourceRoot, "README.md"), join(templateRoot, "README.md"));
     writeSharedSdkShims(templateRoot);
     writeAsconfig(templateRoot);
     writeTsconfig(templateRoot);
@@ -266,8 +267,8 @@ function syncHelloTemplate() {
         }
     });
     rewriteHarnessImports(join(templateRoot, "harness.ts"));
-    normalizeGeneratedHeader(join(templateSrcRoot, "generated", "HostEvents.ts"), "the scaffold host-events definition");
-    normalizeGeneratedHeader(join(templateSrcRoot, "generated", "HostServices.ts"), "the scaffold host-services definition");
+    normalizeGeneratedHeader(join(templateSrcRoot, "host", "generated", "HostEvents.ts"), "the scaffold host-events definition");
+    normalizeGeneratedHeader(join(templateSrcRoot, "host", "generated", "HostServices.ts"), "the scaffold host-services definition");
 }
 function syncMvcTemplate() {
     const templateRoot = join(TEMPLATES_ROOT, "mvc");
@@ -277,6 +278,7 @@ function syncMvcTemplate() {
     cpSync(join(sourceRoot, "src"), templateSrcRoot, { recursive: true });
     cpSync(join(sourceRoot, "harness.ts"), join(templateRoot, "harness.ts"));
     cpSync(join(sourceRoot, "route-shell.html"), join(templateRoot, "route-shell.html"));
+    cpSync(join(sourceRoot, "README.md"), join(templateRoot, "README.md"));
     writeSharedSdkShims(templateRoot);
     writeAsconfig(templateRoot);
     writeTsconfig(templateRoot);
@@ -287,8 +289,8 @@ function syncMvcTemplate() {
         }
     });
     rewriteHarnessImports(join(templateRoot, "harness.ts"));
-    normalizeGeneratedHeader(join(templateSrcRoot, "generated", "HostEvents.ts"), "the scaffold host-events definition");
-    normalizeGeneratedHeader(join(templateSrcRoot, "generated", "HostServices.ts"), "the scaffold host-services definition");
+    normalizeGeneratedHeader(join(templateSrcRoot, "host", "generated", "HostEvents.ts"), "the scaffold host-events definition");
+    normalizeGeneratedHeader(join(templateSrcRoot, "host", "generated", "HostServices.ts"), "the scaffold host-services definition");
 }
 rmSync(TEMPLATES_ROOT, { recursive: true, force: true });
 rmSync(LEGACY_TEMPLATES_ROOT, { recursive: true, force: true });

package/dist/src/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const FUI_AS_VERSION = "0.1.2";
+export declare const FUI_AS_VERSION = "0.1.4";
 export declare const RUNTIME_VERSION = "0.1.0";

package/dist/src/versions.js

@@ -1,2 +1,2 @@
-export const FUI_AS_VERSION = "0.1.2";
+export const FUI_AS_VERSION = "0.1.4";
 export const RUNTIME_VERSION = "0.1.0";

package/dist/tests/scaffold.test.js

@@ -21,8 +21,12 @@ test("createProject writes hello-world scaffold including AssemblyScript tsconfi
         assert.equal(typeof packageJson.scripts.test, "string");
         assert.equal(typeof packageJson.scripts["generate:host"], "string");
         assert.equal(readFileSync(join(target, "src", "HelloWorld.ts"), "utf8").includes("Hello world"), true);
+        assert.equal(readFileSync(join(target, "README.md"), "utf8").includes("Hello World scaffold guide"), true);
+        assert.equal(readFileSync(join(target, "src", "fui", "Fui.ts"), "utf8").includes("@effindomv2/fui-as/src/Fui"), true);
         assert.equal(readFileSync(join(target, "src", "host", "host-events.ts"), "utf8").includes("appHostEvents"), true);
         assert.equal(readFileSync(join(target, "src", "host", "host-services.ts"), "utf8").includes("appHostServices"), true);
+        assert.equal(readFileSync(join(target, "src", "host", "generated", "HostEvents.ts"), "utf8").includes("onAppClockTick"), true);
+        assert.equal(readFileSync(join(target, "src", "host", "generated", "HostServices.ts"), "utf8").includes("appClockNowUnixSeconds"), true);
     }
     finally {
         rmSync(root, { recursive: true, force: true });
@@ -41,10 +45,15 @@ test("createProject writes mvc scaffold when template is mvc", () => {
         assert.equal(typeof packageJson.scripts["build:wasm:home"], "string");
         assert.equal(typeof packageJson.scripts["build:wasm:settings"], "string");
         assert.equal(typeof packageJson.scripts["generate:host"], "string");
-        assert.equal(readFileSync(join(target, "src", "routes", "mvc", "pages", "home", "HomeController.ts"), "utf8").includes("HomeController"), true);
+        assert.equal(readFileSync(join(target, "src", "routes", "home", "HomeController.ts"), "utf8").includes("HomeController"), true);
+        assert.equal(readFileSync(join(target, "src", "routes", "HomeApp.ts"), "utf8").includes("createManagedApplication"), true);
+        assert.equal(readFileSync(join(target, "README.md"), "utf8").includes("MVC scaffold guide"), true);
         assert.equal(readFileSync(join(target, "src", "host", "host-events.ts"), "utf8").includes("appHostEvents"), true);
         assert.equal(readFileSync(join(target, "src", "host", "host-services.ts"), "utf8").includes("appHostServices"), true);
-        assert.equal(readFileSync(join(target, "route-shell.html"), "utf8").includes("FUI-AS MVC Demo"), true);
+        assert.equal(readFileSync(join(target, "src", "fui", "Fui.ts"), "utf8").includes("@effindomv2/fui-as/src/Fui"), true);
+        assert.equal(readFileSync(join(target, "src", "host", "generated", "HostEvents.ts"), "utf8").includes("onAppClockTick"), true);
+        assert.equal(readFileSync(join(target, "src", "host", "generated", "HostServices.ts"), "utf8").includes("appClockNowUnixSeconds"), true);
+        assert.equal(readFileSync(join(target, "route-shell.html"), "utf8").includes("FUI-AS Routed Demo"), true);
     }
     finally {
         rmSync(root, { recursive: true, force: true });

package/package.json

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

package/build/templates/hello/src/Fui.ts

@@ -1 +0,0 @@
-export * from "../node_modules/@effindomv2/fui-as/src/Fui";

package/build/templates/hello/src/FuiBrowser.ts

@@ -1 +0,0 @@
-export * from "../node_modules/@effindomv2/fui-as/browser/src/index";

package/build/templates/hello/src/FuiExports.ts

@@ -1 +0,0 @@
-export * from "../node_modules/@effindomv2/fui-as/src/FuiExports";

package/build/templates/hello/src/FuiPrimitives.ts

@@ -1 +0,0 @@
-export * from "../node_modules/@effindomv2/fui-as/src/FuiPrimitives";

package/build/templates/mvc/src/Fui.ts

@@ -1 +0,0 @@
-export * from "../node_modules/@effindomv2/fui-as/src/Fui";

package/build/templates/mvc/src/FuiBrowser.ts

@@ -1 +0,0 @@
-export * from "../node_modules/@effindomv2/fui-as/browser/src/index";

package/build/templates/mvc/src/FuiExports.ts

@@ -1 +0,0 @@
-export * from "../node_modules/@effindomv2/fui-as/src/FuiExports";

package/build/templates/mvc/src/FuiPrimitives.ts

@@ -1 +0,0 @@
-export * from "../node_modules/@effindomv2/fui-as/src/FuiPrimitives";

package/build/templates/mvc/src/routes/mvc_home.ts

@@ -1,20 +0,0 @@
-export * from "../FuiExports";
-export * from "../generated/HostEvents";
-
-import { Node, createManagedApplication } from "../Fui";
-import { HomeController } from "./mvc/pages/home/HomeController";
-
-const app = createManagedApplication<HomeController>(
-  () => new HomeController(),
-  (controller): Node => controller.getRoot(),
-  (controller): void => controller.mount(),
-  (controller): void => controller.dispose(),
-);
-
-export function __runApp(): void {
-  app.run();
-}
-
-export function __disposeApp(): void {
-  app.dispose();
-}

package/build/templates/mvc/src/routes/mvc_settings.ts

@@ -1,20 +0,0 @@
-export * from "../FuiExports";
-export * from "../generated/HostEvents";
-
-import { Node, createManagedApplication } from "../Fui";
-import { SettingsController } from "./mvc/pages/settings/SettingsController";
-
-const app = createManagedApplication<SettingsController>(
-  () => new SettingsController(),
-  (controller): Node => controller.getRoot(),
-  (controller): void => controller.mount(),
-  (controller): void => controller.dispose(),
-);
-
-export function __runApp(): void {
-  app.run();
-}
-
-export function __disposeApp(): void {
-  app.dispose();
-}