@effindomv2/create-fui-as-app 0.1.5 → 0.1.7

package/README.md

@@ -0,0 +1,26 @@
+# EffinDom create-fui-as-app
+
+This repository contains the standalone scaffolder package for FUI-AS apps:
+
+- `@effindomv2/create-fui-as-app` (`v2/create-fui-as-app`)
+
+Depends on published `@effindomv2/fui-as` and `@effindomv2/runtime` packages from npm.
+
+## License
+
+MIT. See `LICENSE.md`.
+
+## Build and publish
+
+```bash
+npm install
+npm run build
+npm test
+npm run publish:local
+```
+
+For npm publishing:
+
+```bash
+npm run publish:npm
+```

package/dist/src/templates.js

@@ -2,7 +2,7 @@ import { readdirSync, readFileSync, statSync } from "node:fs";
 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)), "..", "..", "build", "templates");
+const TEMPLATE_ROOT = resolve(dirname(fileURLToPath(import.meta.url)), "..", "..", "templates");
 function collectTemplateFiles(root, relativePath = "") {
     const absolutePath = resolve(root, relativePath);
     const stats = statSync(absolutePath);

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 = "latest";
 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 = "latest";
 export const RUNTIME_VERSION = "0.1.0";

package/dist/tests/scaffold.test.js

@@ -21,6 +21,7 @@ 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);
@@ -44,13 +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, "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 MVC Demo"), 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.5",
+  "version": "0.1.7",
   "private": false,
   "license": "MIT",
   "description": "Scaffold a minimal EffinDom v2 FUI-AS app",
@@ -24,13 +24,14 @@
   "types": "./dist/src/scaffold.d.ts",
   "files": [
     "dist",
-    "build/templates"
+    "templates"
   ],
   "scripts": {
-    "sync:templates": "tsx scripts/sync-templates.ts",
-    "build": "npm run sync:templates && tsc -p tsconfig.json",
+    "build": "tsc -p tsconfig.json",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "test": "npm run build && node --test dist/tests/**/*.test.js",
+    "publish:local": "bash -c 'if [ -f scripts/publish/local/create-fui-as-app.sh ]; then bash scripts/publish/local/create-fui-as-app.sh; elif [ -f ../../scripts/publish/local/create-fui-as-app.sh ]; then bash ../../scripts/publish/local/create-fui-as-app.sh; else echo \"Missing create-fui-as-app publish:local script\" >&2; exit 1; fi'",
+    "publish:npm": "bash -c 'if [ -f scripts/publish/npm/create-fui-as-app.sh ]; then bash scripts/publish/npm/create-fui-as-app.sh; elif [ -f ../../scripts/publish/npm/create-fui-as-app.sh ]; then bash ../../scripts/publish/npm/create-fui-as-app.sh; else echo \"Missing create-fui-as-app publish:npm script\" >&2; exit 1; fi'",
     "prepack": "npm run build"
   },
   "devDependencies": {

package/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 → templates}/hello/package.json

@@ -13,7 +13,7 @@
     "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\" --ignore \"src/host/generated/**\" -c \"npm run build\"",
-    "serve": "http-server public -p 8080 -c-1",
+    "serve": "serve public --listen 8080",
     "dev": "npm run build && concurrently -k -n watch,serve \"npm run watch\" \"npm run serve\"",
     "test": "npm run build && tsx scripts/smoke.ts"
   },
@@ -26,7 +26,7 @@
     "chokidar-cli": "^3.0.0",
     "concurrently": "^9.2.1",
     "esbuild": "^0.27.7",
-    "http-server": "^14.1.1",
+    "serve": "^14.2.5",
     "tsx": "^4.20.6"
   }
 }

package/{build/templates → templates}/hello/src/App.ts

@@ -4,4 +4,4 @@ export * from "./host/generated/HostEvents";
 
 import { createHelloWorldPage } from "./HelloWorld";
 
-Application.register((app) => app.page(createHelloWorldPage));
+Application.register((app) => app.themeSystem().page(createHelloWorldPage));

package/{build/templates → templates}/hello/src/HelloWorld.ts

@@ -1,9 +1,12 @@
 import {
   AlignItems,
+  Action,
   Button,
   Column,
   JustifyContent,
-  rgb,
+  Theme,
+  bindTheme,
+  activeTheme,
   SelectionArea,
   Text,
   TextAlign,
@@ -32,13 +35,20 @@ class HelloWorld {
   private readonly hostServiceLabel: Text = new Text("Host service time: -");
   private readonly hostEventLabel: Text = new Text("Host event tick: -");
   private readonly clockTickHandler: ClockTickHandler = new ClockTickHandler(this);
+  private readonly themeBinding!: Action<Theme>;
+  private readonly root!: SelectionArea;
 
   constructor() {
     this.counterLabel.fontSize(20.0);
-    this.hostServiceLabel.fontSize(14.0).textColor(rgb(191, 219, 254));
-    this.hostEventLabel.fontSize(14.0).textColor(rgb(134, 239, 172));
+    this.hostServiceLabel.fontSize(14.0);
+    this.hostEventLabel.fontSize(14.0);
     this.refreshHostServiceTime();
     onAppClockTick(this.clockTickHandler);
+    this.root = new SelectionArea().fillWidth().fillHeight() as SelectionArea;
+    this.themeBinding = bindTheme(this, (page, theme): void => {
+      page.applyTheme(theme);
+    });
+    this.applyTheme(activeTheme.value);
   }
 
   private refreshHostServiceTime(): void {
@@ -50,6 +60,10 @@ class HelloWorld {
     this.hostEventLabel.text("Host event tick: " + seconds.toString());
   }
 
+  private applyTheme(theme: Theme): void {
+    this.root.bgColor(theme.colors.background);
+  }
+
   buildPage(): SelectionArea {
     
     const title = new Text("Hello world from FUI-AS")
@@ -79,24 +93,21 @@ class HelloWorld {
       .textAlign(TextAlign.Center)
       .width(680.0, Unit.Pixel);
 
-    return new SelectionArea()
-      .fillWidth()
-      .fillHeight()
-      .child(
-        Column(
-          title,
-          subtitle,
-          button,
-          this.counterLabel,
-          this.hostServiceLabel,
-          this.hostEventLabel,
-          note)
-          .fillWidth()
-          .fillHeight()
-          .padding(24.0, 24.0, 24.0, 24.0)
-          .justifyContent(JustifyContent.Center)
-          .alignItems(AlignItems.Center))
-      .bgColor(rgb(0, 0, 0)) as SelectionArea;
+    return this.root.child(
+      Column(
+        title,
+        subtitle,
+        button,
+        this.counterLabel,
+        this.hostServiceLabel,
+        this.hostEventLabel,
+        note)
+        .fillWidth()
+        .fillHeight()
+        .padding(24.0, 24.0, 24.0, 24.0)
+        .justifyContent(JustifyContent.Center)
+        .alignItems(AlignItems.Center),
+    ) as SelectionArea;
   }
 }
 

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

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

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

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

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

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

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

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

package/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 → templates}/mvc/harness.ts

@@ -2,7 +2,7 @@ import { startRoutedHarness, type HarnessExports, type RoutedHarnessRoute } from
 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/templates/mvc/index.html

@@ -0,0 +1,11 @@
+<!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>
+</html>

package/{build/templates → templates}/mvc/package.json

@@ -3,19 +3,19 @@
   "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/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\" --ignore \"src/host/generated/**\" -c \"npm run build\"",
-    "serve": "http-server public -p 8080 -c-1",
+    "serve": "serve public --listen 8080",
     "dev": "npm run build && concurrently -k -n watch,serve \"npm run watch\" \"npm run serve\"",
     "test": "npm run build && tsx scripts/smoke.ts"
   },
@@ -28,7 +28,7 @@
     "chokidar-cli": "^3.0.0",
     "concurrently": "^9.2.1",
     "esbuild": "^0.27.7",
-    "http-server": "^14.1.1",
+    "serve": "^14.2.5",
     "tsx": "^4.20.6"
   }
 }

package/{build/templates → 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 → 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 → 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/templates/mvc/src/fui/Fui.ts

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

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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+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());
+app.useSystemTheme();
+
+export function __runApp(): void {
+  app.run();
+}
+
+export function __disposeApp(): void {
+  app.dispose();
+}

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

@@ -0,0 +1,16 @@
+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());
+app.useSystemTheme();
+
+export function __runApp(): void {
+  app.run();
+}
+
+export function __disposeApp(): void {
+  app.dispose();
+}

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

@@ -1,7 +1,7 @@
-import { Application, Node } from "../../../../fui/Fui";
-import { Callback1 } from "../../../../fui/FuiPrimitives";
-import { onAppClockTick } from "../../../../host/generated/HostEvents";
-import { appClockNowUnixSeconds } from "../../../../host/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,9 @@ export class HomeController {
     return this.view.getRoot();
   }
 
-  mount(): void {
-    Application.mount(this.view.getRoot());
-  }
-
   dispose(): void {
     onAppClockTick(null);
-    Application.unmount();
+    this.view.dispose();
+    super.dispose();
   }
 }

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

@@ -1,37 +1,26 @@
-import { Column, FlexBox, JustifyContent, Row, SelectionArea, Text, Unit, rgb } from "../../../../fui/Fui";
-import { MvcNavPill } from "../../shared/design-system/MvcNavPill";
-import { MvcPrimaryButton } from "../../shared/design-system/MvcPrimaryButton";
-import { mvcHomeRoute, mvcSettingsRoute } from "../../shared/routes";
+import { Column, Disposable, FlexBox, SelectionArea, Theme, activeTheme, bindTheme, disposeAll, Text, Unit } 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;
+  private readonly themeBindings: Array<Disposable> = new Array<Disposable>();
+  private themeBindingDisposed: bool = false;
 
   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);
+    const title = new Text(model.title).fontSize(34.0) as Text;
+    const subtitle = new Text(model.subtitle).fontSize(16.0) as Text;
+    this.statusText = new Text("Home counter: 0").fontSize(18.0) as Text;
+    this.hostServiceText = new Text("Host service time: -").fontSize(15.0) as Text;
+    this.hostEventText = new Text("Host event tick: -").fontSize(15.0) as Text;
+    this.actionButton = new PrimaryButton(model.actionLabel);
 
     const content = Column(
       navBar,
@@ -54,14 +43,21 @@ export class HomeView {
     this.root = new SelectionArea()
       .fillWidth()
       .fillHeight()
-      .bgColor(rgb(2, 6, 23))
       .child(content) as SelectionArea;
+    this.trackTheme(bindTheme(this, (view, theme): void => {
+      view.applyTheme(theme);
+    }));
+    this.applyTheme(activeTheme.value);
   }
 
   getRoot(): SelectionArea {
     return this.root;
   }
 
+  dispose(): void {
+    this.disposeThemeBindings();
+  }
+
   setActionCount(count: i32): void {
     this.statusText.text("Home counter: " + count.toString());
   }
@@ -73,4 +69,20 @@ export class HomeView {
   setHostEventSeconds(value: i32): void {
     this.hostEventText.text("Host event tick: " + value.toString());
   }
+
+  private applyTheme(theme: Theme): void {
+    this.root.bgColor(theme.colors.background);
+  }
+
+  private trackTheme(disposable: Disposable): void {
+    this.themeBindings.push(disposable);
+  }
+
+  private disposeThemeBindings(): void {
+    if (this.themeBindingDisposed) {
+      return;
+    }
+    this.themeBindingDisposed = true;
+    disposeAll(this.themeBindings);
+  }
 }

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

@@ -1,12 +1,13 @@
-import { Application, Node } from "../../../../fui/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);
@@ -17,11 +18,8 @@ export class SettingsController {
     return this.view.getRoot();
   }
 
-  mount(): void {
-    Application.mount(this.view.getRoot());
-  }
-
   dispose(): void {
-    Application.unmount();
+    this.view.dispose();
+    super.dispose();
   }
 }