@effindomv2/fui-as 0.1.50 → 0.2.0-alpha1

package/README.md

@@ -0,0 +1,36 @@
+# @effindomv2/fui-as
+
+EffinDOM's retained-mode UI SDK for AssemblyScript and the browser.
+
+## Quick start
+
+Create a new application with the official scaffold:
+
+```bash
+npx @effindomv2/create-fui-as-app my-app
+cd my-app
+npm install
+npm run dev
+```
+
+The scaffold includes host-service generation, a routed application option, the EffinDOM browser harness, and a production build.
+
+## Install in an existing application
+
+```bash
+npm install @effindomv2/fui-as
+```
+
+Build an application WASM module with AssemblyScript, then mount it with the generated FUI-AS browser harness. See the package documentation and scaffolded application for the complete setup.
+
+`@effindomv2/fui-as` uses an exact, tested `@effindomv2/runtime` dependency. The runtime first attempts to reuse immutable assets from `https://runtimes.effindom.dev`, then falls back to the runtime assets published with the application.
+
+## Links
+
+- [FUI-AS repository](https://github.com/zion-sati/fui-as)
+- [EffinDOM runtime](https://www.npmjs.com/package/@effindomv2/runtime)
+- [Create FUI-AS App](https://www.npmjs.com/package/@effindomv2/create-fui-as-app)
+
+## License
+
+AGPL-3.0-only or a commercial EffinDOM license. See `LICENSE.md` and `COMMERCIAL.md`.

package/browser/src/assemblyscript-harness.ts

@@ -0,0 +1,39 @@
+import {
+  startHarness as startRuntimeHarness,
+  startManagedHarness as startRuntimeManagedHarness,
+  type HarnessExports,
+  type HarnessOptions,
+  type ManagedHarnessOptions,
+  type WasmAppInstantiator,
+} from '@effindomv2/runtime/managed-harness';
+
+/**
+ * Instantiates an AssemblyScript application with its language-level abort
+ * import. This belongs to FUI-AS rather than the framework-agnostic runtime.
+ */
+export const instantiateAssemblyScriptApp: WasmAppInstantiator = async (module, imports) => {
+  const environment = imports.env;
+  return WebAssembly.instantiate(module, {
+    ...imports,
+    env: {
+      ...environment,
+      abort(_message?: number, _fileName?: number, line?: number, column?: number): never {
+        throw new Error(`AssemblyScript application aborted at ${String(line ?? 0)}:${String(column ?? 0)}.`);
+      },
+    },
+  });
+};
+
+export function startHarness<Exports extends HarnessExports>(options: HarnessOptions<Exports>): void {
+  startRuntimeHarness({
+    ...options,
+    instantiateApp: instantiateAssemblyScriptApp,
+  });
+}
+
+export function startManagedHarness(options: ManagedHarnessOptions): void {
+  startRuntimeManagedHarness({
+    ...options,
+    instantiateApp: instantiateAssemblyScriptApp,
+  });
+}

package/browser/src/index.ts

@@ -1,6 +1,9 @@
 export {
   startHarness,
   startManagedHarness,
+} from './assemblyscript-harness';
+
+export {
   canManagedNavigateBack,
   canManagedNavigateForward,
   pushManagedHistoryEntry,

package/browser/src/routed-harness.ts

@@ -1 +1,25 @@
-export * from './shared-browser';
+import {
+  startRoutedHarness as startRuntimeRoutedHarness,
+} from '@effindomv2/runtime/routed-harness';
+import type { HarnessExports } from '@effindomv2/runtime/managed-harness';
+import type {
+  RoutedHarnessConfig,
+  RoutedHarnessRoute,
+} from '@effindomv2/runtime/routed-harness';
+import { instantiateAssemblyScriptApp } from './assemblyscript-harness';
+
+export type {
+  RoutedHarnessConfig,
+  RoutedHarnessManagerState,
+  RoutedHarnessRoute,
+} from '@effindomv2/runtime/routed-harness';
+
+export function startRoutedHarness<
+  TExports extends HarnessExports,
+  TRoute extends RoutedHarnessRoute = RoutedHarnessRoute,
+>(config: RoutedHarnessConfig<TExports, TRoute>): void {
+  startRuntimeRoutedHarness({
+    ...config,
+    instantiateApp: instantiateAssemblyScriptApp,
+  });
+}

package/browser/src/shared-browser.ts

@@ -1,3 +1,6 @@
+// Preserve the complete runtime browser API for FUI-AS consumers. The two
+// application mount entry points are explicitly replaced below so
+// AssemblyScript apps always receive their language-level imports.
 export * from '@effindomv2/runtime/managed-harness';
 export * from '@effindomv2/runtime/routed-app-conventions';
-export * from '@effindomv2/runtime/routed-harness';
+export { startHarness, startManagedHarness } from './assemblyscript-harness';

package/package.json

@@ -1,9 +1,21 @@
 {
   "name": "@effindomv2/fui-as",
-  "version": "0.1.50",
+  "version": "0.2.0-alpha1",
   "private": false,
   "license": "AGPL-3.0-only OR LicenseRef-EffinDom-Commercial",
   "description": "EffinDom v2 AssemblyScript frontend framework SDK and browser harness",
+  "repository": "https://github.com/zion-sati/fui-as",
+  "keywords": [
+    "effindom",
+    "assemblyscript",
+    "webassembly",
+    "wasm",
+    "retained-mode",
+    "ui-framework",
+    "canvas-ui",
+    "skia",
+    "accessibility"
+  ],
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -70,8 +82,6 @@
     "src",
     "browser/routed-app-conventions.ts",
     "browser/favicon.ico",
-    "browser/loading-overlay-styles.html",
-    "browser/loading-overlay-body.html",
     "browser/src",
     "scripts",
     "LICENSE.md",
@@ -95,8 +105,7 @@
     "typecheck": "npm run guard:runtime-dependency && npm run check:abi && tsc -p tsconfig.json --noEmit"
   },
   "dependencies": {
-    "@assemblyscript/loader": "^0.28.19",
-    "@effindomv2/runtime": "0.1.26"
+    "@effindomv2/runtime": "0.2.2"
   },
   "devDependencies": {
     "@as-pect/assembly": "9.0.0",

package/scripts/build.sh

@@ -20,8 +20,8 @@ HOST_EVENT_GENERATOR_BUILD="${PACKAGE_DIR}/build/generate-host-events.mjs"
 ABI_GENERATOR_BUILD="${PACKAGE_DIR}/build/generate-abi.mjs"
 RUNTIME_CONFIG_FILE="effindom-runtime-config.js"
 DEFAULT_MANIFEST_PATH="./runtime/dist/effindom.v2.manifest.json"
-LOADING_OVERLAY_STYLES_FILE="${PACKAGE_DIR}/browser/loading-overlay-styles.html"
-LOADING_OVERLAY_BODY_FILE="${PACKAGE_DIR}/browser/loading-overlay-body.html"
+LOADING_OVERLAY_STYLES_FILE="${REPO_ROOT}/v2/browser-bridge/src/managed-harness/loading-overlay-styles.css"
+LOADING_OVERLAY_BODY_FILE="${REPO_ROOT}/v2/browser-bridge/src/managed-harness/loading-overlay-body.html"
 RUNTIME_PACKAGE_DIR="${PACKAGE_DIR}/node_modules/@effindomv2/runtime"
 FILE_PROCESSING_WORKER_SOURCE="${REPO_ROOT}/v2/browser-bridge/src/managed-harness/file-processing-worker.ts"
 WORKER_BOOTSTRAP_SOURCE="${REPO_ROOT}/v2/browser-bridge/src/managed-harness/worker-bootstrap.ts"
@@ -29,6 +29,12 @@ WORKER_BOOTSTRAP_SOURCE="${REPO_ROOT}/v2/browser-bridge/src/managed-harness/work
 if [ ! -d "${RUNTIME_PACKAGE_DIR}" ]; then
   RUNTIME_PACKAGE_DIR="${REPO_ROOT}/node_modules/@effindomv2/runtime"
 fi
+if [ ! -f "${LOADING_OVERLAY_STYLES_FILE}" ]; then
+  LOADING_OVERLAY_STYLES_FILE="${RUNTIME_PACKAGE_DIR}/src/managed-harness/loading-overlay-styles.css"
+fi
+if [ ! -f "${LOADING_OVERLAY_BODY_FILE}" ]; then
+  LOADING_OVERLAY_BODY_FILE="${RUNTIME_PACKAGE_DIR}/src/managed-harness/loading-overlay-body.html"
+fi
 if [ ! -f "${FILE_PROCESSING_WORKER_SOURCE}" ]; then
   FILE_PROCESSING_WORKER_SOURCE="${RUNTIME_PACKAGE_DIR}/src/managed-harness/file-processing-worker.ts"
 fi
@@ -192,9 +198,9 @@ resolve_runtime_dist_dir() {
   )
 
   if [ -f "${public_manifest}" ] && [ -f "${package_manifest}" ] && ! cmp -s "${public_manifest}" "${package_manifest}"; then
-    echo "Note: using ${public_runtime_dir} for monorepo runtime assets." >&2
+    echo "Note: using ${public_runtime_dir} for local runtime assets." >&2
     echo "      ${package_runtime_dir} is a staged package copy and may be stale." >&2
-    echo "      For ABI changes, run repo-root ./build.sh (or npm run build:v2:abi)." >&2
+    echo "      Rebuild the local runtime assets before changing the ABI." >&2
   fi
 
   for candidate in "${candidates[@]}"; do
@@ -211,12 +217,13 @@ resolve_runtime_dist_dir() {
   echo "  - ${REPO_ROOT}/node_modules/@effindomv2/runtime/dist" >&2
   echo "  - ${REPO_ROOT}/public/v2/browser-bridge" >&2
   echo "  - ${REPO_ROOT}/v2/browser-bridge/dist" >&2
-  echo "Monorepo note: repo-root ./build.sh (or npm run build:v2:abi) refreshes the runtime assets used here." >&2
+  echo "Build the local runtime assets or install @effindomv2/runtime first." >&2
   echo "Install @effindomv2/runtime or build runtime assets first." >&2
   exit 1
 }
 
 RUNTIME_DIST_DIR="$(resolve_runtime_dist_dir)"
+RUNTIME_SET_HASH="$(node -e 'const fs=require("fs"); const value=JSON.parse(fs.readFileSync(process.argv[1], "utf8")).runtime_set_hash; if (typeof value !== "string" || value.length === 0) process.exit(1); process.stdout.write(value);' "${RUNTIME_DIST_DIR}/effindom.v2.manifest.json")"
 
 write_runtime_config() {
   local destination="$1"
@@ -224,7 +231,11 @@ write_runtime_config() {
 
   cat > "${destination}/${RUNTIME_CONFIG_FILE}" <<EOF
 window.__effindomRuntime = Object.assign({}, window.__effindomRuntime, {
-  manifestUrl: new URL('${manifest_url}', document.currentScript && document.currentScript.src ? document.currentScript.src : document.baseURI).toString(),
+  manifestUrls: [
+    'https://runtimes.effindom.dev/v2/manifests/${RUNTIME_SET_HASH}.json',
+    new URL('${manifest_url}', document.currentScript && document.currentScript.src ? document.currentScript.src : document.baseURI).toString(),
+  ],
+  expectedRuntimeSetHash: '${RUNTIME_SET_HASH}',
   buildMode: 'debug',
 });
 EOF
@@ -264,15 +275,26 @@ copy_runtime_assets() {
   rm -rf "${destination}/runtime"
   mkdir -p "${destination}/runtime/dist"
   cp "${RUNTIME_DIST_DIR}/effindom.v2.manifest.json" "${destination}/runtime/dist/effindom.v2.manifest.json"
+  MANIFEST_PATH="${destination}/runtime/dist/effindom.v2.manifest.json" node <<'NODE'
+const fs = require('node:fs');
+const manifestPath = process.env.MANIFEST_PATH;
+const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
+for (const font of Object.values(manifest.assets?.fonts ?? {})) {
+  if (typeof font.url === 'string' && font.url.startsWith('../fonts/')) {
+    font.url = `./fonts/${font.url.slice('../fonts/'.length)}`;
+  }
+}
+fs.writeFileSync(manifestPath, `${JSON.stringify(manifest, null, 2)}\n`);
+NODE
   if [ -f "${RUNTIME_DIST_DIR}/icu-asset.json" ]; then
     cp "${RUNTIME_DIST_DIR}/icu-asset.json" "${destination}/runtime/dist/icu-asset.json"
   fi
   cp -R "${RUNTIME_DIST_DIR}/runtime" "${destination}/runtime/dist/runtime"
-  mkdir -p "${destination}/runtime/fonts"
+  mkdir -p "${destination}/runtime/dist/fonts"
   if [ -d "${REPO_ROOT}/public/v2/fonts" ]; then
-    cp -R "${REPO_ROOT}/public/v2/fonts/." "${destination}/runtime/fonts/"
+    cp -R "${REPO_ROOT}/public/v2/fonts/." "${destination}/runtime/dist/fonts/"
   elif [ -d "${RUNTIME_DIST_DIR}/fonts" ]; then
-    cp -R "${RUNTIME_DIST_DIR}/fonts/." "${destination}/runtime/fonts/"
+    cp -R "${RUNTIME_DIST_DIR}/fonts/." "${destination}/runtime/dist/fonts/"
   fi
 }
 

package/scripts/framework-host-services.ts

@@ -30,6 +30,18 @@ export const frameworkHostServices = defineHostServices({
       returns: "u32",
       implementation: () => unsupported(),
     }),
+    hostEnvironment: hostService({
+      importName: "fui_get_host_environment",
+      args: [] as const,
+      returns: "u32",
+      implementation: () => unsupported(),
+    }),
+    hostCapabilities: hostService({
+      importName: "fui_get_host_capabilities",
+      args: [] as const,
+      returns: "u32",
+      implementation: () => unsupported(),
+    }),
     isCoarsePointer: hostService({
       importName: "fui_is_coarse_pointer",
       args: [] as const,

package/src/Fui.ts

@@ -173,7 +173,18 @@ export { Worker, WorkerCompletedEventArgs, WorkerErrorEventArgs, WorkerProgressE
 export { Worker as WorkerRuntime } from "./worker/Worker";
 export { WorkerJob } from "./worker/WorkerJob";
 export { currentRoute, navigateTo } from "./core/Navigation";
-export { getPlatformFamily, hasPrimaryShortcutModifier, PlatformFamily, resolvePrimaryShortcutModifier } from "./core/Platform";
+export {
+  getHostContext,
+  getHostEnvironment,
+  getPlatformFamily,
+  hasHostCapability,
+  hasPrimaryShortcutModifier,
+  HostCapability,
+  HostContext,
+  HostEnvironment,
+  PlatformFamily,
+  resolvePrimaryShortcutModifier,
+} from "./core/Platform";
 export {
   Colors,
   ContextMenuItemTheme,

package/src/controls/Button.ts

@@ -74,10 +74,6 @@ export class Button extends FlexBox {
   private readonly disposables: Array<Disposable> = new Array<Disposable>();
   private action: ((event: ClickEventArgs) => void) | null = null;
   private actionBinding: Callback1<ClickEventArgs> | null = null;
-  private doubleAction: ((event: ClickEventArgs) => void) | null = null;
-  private doubleActionBinding: Callback1<ClickEventArgs> | null = null;
-  private tripleAction: ((event: ClickEventArgs) => void) | null = null;
-  private tripleActionBinding: Callback1<ClickEventArgs> | null = null;
   private hoverChanged: ((event: HoverChangedEventArgs) => void) | null = null;
   private hoverChangedBinding: Callback1<HoverChangedEventArgs> | null = null;
   private disposed: bool = false;
@@ -171,40 +167,6 @@ export class Button extends FlexBox {
     return this;
   }
 
-  onDoubleClick(cb: (event: ClickEventArgs) => void): this {
-    this.doubleAction = cb;
-    this.doubleActionBinding = null;
-    return this;
-  }
-
-  bindDoubleClick<Owner>(owner: Owner, handler: Handler1<Owner, ClickEventArgs>): this {
-    this.doubleAction = null;
-    this.doubleActionBinding = bind1<Owner, ClickEventArgs>(owner, handler);
-    return this;
-  }
-
-  onDoubleClickWith<Owner>(owner: Owner, handler: Handler1<Owner, ClickEventArgs>): this {
-    this.bindDoubleClick(owner, handler);
-    return this;
-  }
-
-  onTripleClick(cb: (event: ClickEventArgs) => void): this {
-    this.tripleAction = cb;
-    this.tripleActionBinding = null;
-    return this;
-  }
-
-  bindTripleClick<Owner>(owner: Owner, handler: Handler1<Owner, ClickEventArgs>): this {
-    this.tripleAction = null;
-    this.tripleActionBinding = bind1<Owner, ClickEventArgs>(owner, handler);
-    return this;
-  }
-
-  onTripleClickWith<Owner>(owner: Owner, handler: Handler1<Owner, ClickEventArgs>): this {
-    this.bindTripleClick(owner, handler);
-    return this;
-  }
-
   onHoverChanged(cb: (event: HoverChangedEventArgs) => void): this {
     this.hoverChanged = cb;
     this.hoverChangedBinding = null;
@@ -369,7 +331,7 @@ export class Button extends FlexBox {
     this.pressed.value = true;
   }
 
-  endPress(clickCount: i32 = 1, fireAction: bool = true): void {
+  endPress(fireAction: bool = true): void {
     const wasPressed = this.pressed.value;
     this.pressed.value = false;
     if (!wasPressed || !fireAction) {
@@ -383,26 +345,6 @@ export class Button extends FlexBox {
     if (binding !== null) {
       binding.invoke(ClickEventArgs.Empty);
     }
-    if (clickCount == 2) {
-      const doubleCallback = this.doubleAction;
-      if (doubleCallback !== null) {
-        doubleCallback(ClickEventArgs.Empty);
-      }
-      const doubleBinding = this.doubleActionBinding;
-      if (doubleBinding !== null) {
-        doubleBinding.invoke(ClickEventArgs.Empty);
-      }
-    }
-    if (clickCount == 3) {
-      const tripleCallback = this.tripleAction;
-      if (tripleCallback !== null) {
-        tripleCallback(ClickEventArgs.Empty);
-      }
-      const tripleBinding = this.tripleActionBinding;
-      if (tripleBinding !== null) {
-        tripleBinding.invoke(ClickEventArgs.Empty);
-      }
-    }
   }
 
   cancelPress(): void {
@@ -459,7 +401,7 @@ export class Button extends FlexBox {
       return;
     }
     if (eventType == PointerEventType.Up && this.pressed.value) {
-      this.endPress(event === null || event.clickCount <= 0 ? 1 : event.clickCount, true);
+      this.endPress(true);
     }
   }
 
@@ -497,7 +439,7 @@ export class Button extends FlexBox {
     }
     if (eventType == KeyEventType.Up && this.keyboardArmedKey !== null && changetype<string>(this.keyboardArmedKey) == key) {
       this.keyboardArmedKey = null;
-      this.endPress(1, true);
+      this.endPress(true);
       return true;
     }
     return callbackHandled;

package/src/controls/Checkbox.ts

@@ -1,6 +1,6 @@
 import { Callback1, Handler1 } from "../core/BoundCallback";
 import { SemanticCheckedState, SemanticRole } from "../core/ffi";
-import { CheckboxChangedEventArgs } from "../core/Node";
+import { CheckboxChangedEventArgs, ClickEventArgs } from "../core/Node";
 import { PersistedInt32Codec, PersistedValueState } from "../core/PersistedState";
 import { bind1 } from "../core/bind";
 import { LabeledControlSizing } from "./ControlSizing";
@@ -124,6 +124,21 @@ export class Checkbox extends PressableLabeledControl {
     return this;
   }
 
+  onClick(callback: (event: ClickEventArgs) => void): this {
+    super.onClick(callback);
+    return this;
+  }
+
+  bindClick<Owner>(owner: Owner, handler: Handler1<Owner, ClickEventArgs>): this {
+    super.bindClick(owner, handler);
+    return this;
+  }
+
+  onClickWith<Owner>(owner: Owner, handler: Handler1<Owner, ClickEventArgs>): this {
+    super.onClickWith(owner, handler);
+    return this;
+  }
+
   bindChanged<Owner>(owner: Owner, handler: Handler1<Owner, CheckboxChangedEventArgs>): this {
     this.changedCallback = null;
     this.changedBinding = bind1<Owner, CheckboxChangedEventArgs>(owner, handler);

package/src/controls/ContextMenu.ts

@@ -22,6 +22,7 @@ import { warn } from "../core/Logger";
 import { FontFamily, FontStyle, FontWeight } from "../core/Typography";
 import { Border, FlexBox, Grid, Portal, TextCore } from "../nodes";
 import { PopupPresenter } from "./internal/PopupPresenter";
+import { getHostContext, HostCapability } from "../core/Platform";
 
 const MENU_WIDTH: f32 = 220.0;
 const MENU_SEPARATOR_HEIGHT: f32 = 9.0;
@@ -304,6 +305,17 @@ function commitFocusedTextActionIfNeeded(item: MenuItem): void {
 }
 
 export function runContextMenuAction(item: MenuItem): void {
+  const host = getHostContext();
+  if (
+    ((item.action == ContextMenuAction.NavigateBack || item.action == ContextMenuAction.NavigateForward) && !host.supports(HostCapability.BrowserHistory)) ||
+    (item.action == ContextMenuAction.ReloadPage && !host.supports(HostCapability.Reload)) ||
+    ((item.action == ContextMenuAction.OpenLinkInNewTab || item.action == ContextMenuAction.OpenImageInNewTab) && !host.supports(HostCapability.NewBrowsingContext)) ||
+    ((item.action == ContextMenuAction.OpenLink || item.action == ContextMenuAction.OpenImage) && !host.supports(HostCapability.OpenExternalUri)) ||
+    ((item.action == ContextMenuAction.CopyCurrentSelection || item.action == ContextMenuAction.CutTextSelection) && !host.supports(HostCapability.ClipboardWrite)) ||
+    (item.action == ContextMenuAction.PasteText && !host.supports(HostCapability.ClipboardRead))
+  ) {
+    return;
+  }
   if (item.disabled) {
     const actionNeedsLiveSelection =
       item.targetHandle != <u64>HandleValue.Invalid &&
@@ -512,6 +524,23 @@ export class ContextMenu extends Portal implements GlobalKeyHandler {
     }
   }
 
+  static dismissForOutsidePointerDown(sceneX: f32, sceneY: f32): bool {
+    const menu = ContextMenu.activeInstance;
+    if (menu === null || !menu.isMenuVisible) {
+      return false;
+    }
+    const bounds = menu.panel.getBounds();
+    const left = unchecked(bounds[0]);
+    const top = unchecked(bounds[1]);
+    const right = left + unchecked(bounds[2]);
+    const bottom = top + unchecked(bounds[3]);
+    if (sceneX >= left && sceneX <= right && sceneY >= top && sceneY <= bottom) {
+      return false;
+    }
+    menu.hide();
+    return true;
+  }
+
   static invokeActiveSlot(slot: i32): void {
     const menu = ContextMenu.activeInstance;
     if (menu !== null) {

package/src/controls/RadioButton.ts

@@ -1,6 +1,6 @@
 import { Callback1, Handler1 } from "../core/BoundCallback";
 import { KeyEventType, SemanticCheckedState, SemanticRole } from "../core/ffi";
-import { RadioButtonChangedEventArgs } from "../core/Node";
+import { ClickEventArgs, RadioButtonChangedEventArgs } from "../core/Node";
 import { activeTheme } from "../core/Theme";
 import { bind1 } from "../core/bind";
 import { LabeledControlSizing } from "./ControlSizing";
@@ -87,6 +87,21 @@ export class RadioButton extends PressableLabeledControl {
     return this;
   }
 
+  onClick(callback: (event: ClickEventArgs) => void): this {
+    super.onClick(callback);
+    return this;
+  }
+
+  bindClick<Owner>(owner: Owner, handler: Handler1<Owner, ClickEventArgs>): this {
+    super.bindClick(owner, handler);
+    return this;
+  }
+
+  onClickWith<Owner>(owner: Owner, handler: Handler1<Owner, ClickEventArgs>): this {
+    super.onClickWith(owner, handler);
+    return this;
+  }
+
   bindChanged<Owner>(owner: Owner, handler: Handler1<Owner, RadioButtonChangedEventArgs>): this {
     this.changedCallback = null;
     this.changedBinding = bind1<Owner, RadioButtonChangedEventArgs>(owner, handler);

package/src/controls/Switch.ts

@@ -1,6 +1,6 @@
 import { Callback1, Handler1 } from "../core/BoundCallback";
 import { SemanticCheckedState, SemanticRole } from "../core/ffi";
-import { SwitchChangedEventArgs } from "../core/Node";
+import { ClickEventArgs, SwitchChangedEventArgs } from "../core/Node";
 import { PersistedBoolCodec, PersistedValueState } from "../core/PersistedState";
 import { bind1 } from "../core/bind";
 import { activeTheme } from "../core/Theme";
@@ -92,6 +92,21 @@ export class Switch extends PressableLabeledControl {
     return this;
   }
 
+  onClick(callback: (event: ClickEventArgs) => void): this {
+    super.onClick(callback);
+    return this;
+  }
+
+  bindClick<Owner>(owner: Owner, handler: Handler1<Owner, ClickEventArgs>): this {
+    super.bindClick(owner, handler);
+    return this;
+  }
+
+  onClickWith<Owner>(owner: Owner, handler: Handler1<Owner, ClickEventArgs>): this {
+    super.onClickWith(owner, handler);
+    return this;
+  }
+
   bindChanged<Owner>(owner: Owner, handler: Handler1<Owner, SwitchChangedEventArgs>): this {
     this.changedCallback = null;
     this.changedBinding = bind1<Owner, SwitchChangedEventArgs>(owner, handler);

package/src/controls/internal/PressableLabeledControl.ts

@@ -1,9 +1,11 @@
 import { rgba } from "../../color";
 import { HandlerAction } from "../../core/Action";
+import { Callback1, Handler1 } from "../../core/BoundCallback";
+import { bind1 } from "../../core/bind";
 import { Disposable, disposeAll } from "../../core/Disposable";
 import { FocusAdornerManager } from "../../core/FocusAdornerManager";
 import { keyboardFocusVisible } from "../../core/FocusVisibility";
-import { Node } from "../../core/Node";
+import { ClickEventArgs, Node } from "../../core/Node";
 import {
   AlignItems,
   CursorStyle,
@@ -37,6 +39,8 @@ export class PressableLabeledControl extends FlexBox {
   protected focusedState: bool = false;
   private keyPressedState: bool = false;
   private pointerPressedState: bool = false;
+  private clickCallback: ((event: ClickEventArgs) => void) | null = null;
+  private clickBinding: Callback1<ClickEventArgs> | null = null;
 
   constructor(role: SemanticRole, label: string, indicatorPresenterRoot: FlexBox) {
     super();
@@ -106,6 +110,7 @@ export class PressableLabeledControl extends FlexBox {
       this.pressedState = false;
       this.syncVisualState();
       this.handleActivated();
+      this.fireSemanticClick();
     }
   }
 
@@ -125,6 +130,7 @@ export class PressableLabeledControl extends FlexBox {
       this.pressedState = false;
       this.syncVisualState();
       this.handleActivated();
+      this.fireSemanticClick();
       return true;
     }
     return callbackHandled;
@@ -157,6 +163,23 @@ export class PressableLabeledControl extends FlexBox {
 
   protected handleActivated(): void {}
 
+  onClick(callback: (event: ClickEventArgs) => void): this {
+    this.clickCallback = callback;
+    this.clickBinding = null;
+    return this;
+  }
+
+  bindClick<Owner>(owner: Owner, handler: Handler1<Owner, ClickEventArgs>): this {
+    this.clickCallback = null;
+    this.clickBinding = bind1<Owner, ClickEventArgs>(owner, handler);
+    return this;
+  }
+
+  onClickWith<Owner>(owner: Owner, handler: Handler1<Owner, ClickEventArgs>): this {
+    this.bindClick(owner, handler);
+    return this;
+  }
+
   protected syncVisualState(): void {}
 
   protected replaceIndicatorRoot(nextRoot: FlexBox): void {
@@ -245,4 +268,16 @@ export class PressableLabeledControl extends FlexBox {
     }
     FocusAdornerManager.hideOwner(this);
   }
+
+  private fireSemanticClick(): void {
+    const callback = this.clickCallback;
+    if (callback !== null) {
+      callback(ClickEventArgs.Empty);
+      return;
+    }
+    const binding = this.clickBinding;
+    if (binding !== null) {
+      binding.invoke(ClickEventArgs.Empty);
+    }
+  }
 }

package/src/core/Application.ts

@@ -10,7 +10,7 @@ import { SelectionHandleAdornerManager } from "./SelectionHandleAdornerManager";
 import { ToolTipManager } from "./ToolTipManager";
 import * as ui from "../bindings/ui";
 import { flushCommit, fireLoadedCallbacks, markNeedsCommit, resetCommitState } from "./FrameScheduler";
-import { HandleValue, Unit } from "./ffi";
+import { fui_set_application_caption, HandleValue, Unit } from "./ffi";
 import { Node } from "./Node";
 import { cancelAllTimers } from "./Timers";
 import {
@@ -247,6 +247,11 @@ export class Application<TPage> {
     return root;
   }
 
+  static caption(value: string): void {
+    const bytes = Uint8Array.wrap(String.UTF8.encode(value, false));
+    fui_set_application_caption(bytes.length > 0 ? bytes.dataStart : 0, <u32>bytes.length);
+  }
+
   static unmount(): void {
     const previous = mountedShell;
     if (previous === null) {