@effindomv2/fui-as 0.1.51 → 0.2.0

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.51",
+  "version": "0.2.0",
   "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,7 +217,7 @@ 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
 }
@@ -269,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/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/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) {

package/src/core/ContextMenuManager.ts

@@ -11,7 +11,10 @@ import {
   formatRedoShortcutLabel,
   formatShortcutLabel,
   formatUndoShortcutLabel,
+  getHostContext,
   getPlatformFamily,
+  HostCapability,
+  HostContext,
   PlatformFamily,
 } from "./Platform";
 import { ContextMenuEventArgs, Node, VisibilityChangedEventArgs } from "./Node";
@@ -101,18 +104,21 @@ export class ContextMenuManager {
     if (this.invokeCustomContextMenuHandler(targetNode, x, y)) {
       return;
     }
-    const items = this.buildBuiltInItems(handle, x, y, true);
+    const host = getHostContext();
+    const items = this.buildBuiltInItemsForHost(handle, x, y, true, host);
 
     const navigationItems = new Array<MenuItem>();
-    if (ffi.fui_can_navigate_back()) {
+    if (host.supports(HostCapability.BrowserHistory) && ffi.fui_can_navigate_back()) {
       navigationItems.push(new MenuItem("Back", ContextMenuAction.NavigateBack, null, 0, resolveHistoryShortcutLabel(false)));
     }
-    if (ffi.fui_can_navigate_forward()) {
+    if (host.supports(HostCapability.BrowserHistory) && ffi.fui_can_navigate_forward()) {
       navigationItems.push(new MenuItem("Forward", ContextMenuAction.NavigateForward, null, 0, resolveHistoryShortcutLabel(true)));
     }
-    navigationItems.push(
-      new MenuItem("Reload Page", ContextMenuAction.ReloadPage, null, 0, formatPrimaryShortcutLabel("r")),
-    );
+    if (host.supports(HostCapability.Reload)) {
+      navigationItems.push(
+        new MenuItem("Reload Page", ContextMenuAction.ReloadPage, null, 0, formatPrimaryShortcutLabel("r")),
+      );
+    }
     appendMenuSection(items, navigationItems);
     if (items.length == 0) {
       this.releaseActiveMenuLinkPreview();
@@ -123,7 +129,7 @@ export class ContextMenuManager {
   }
 
   static showForLongPress(handle: u64, x: f32, y: f32): bool {
-    const items = this.buildBuiltInItems(handle, x, y, false);
+    const items = this.buildBuiltInItemsForHost(handle, x, y, false, getHostContext());
     if (items.length == 0) {
       this.releaseActiveMenuLinkPreview();
       return false;
@@ -169,7 +175,7 @@ export class ContextMenuManager {
       }
       const handler = contextNode.contextMenuHandler;
       if (handler !== null) {
-        handler(new ContextMenuEventArgs(targetNode, x, y));
+        handler(new ContextMenuEventArgs(targetNode, x, y, getHostContext()));
         return true;
       }
       contextNode = contextNode.parentNode;
@@ -177,7 +183,14 @@ export class ContextMenuManager {
     return false;
   }
 
-  private static buildBuiltInItems(handle: u64, x: f32, y: f32, clearSelectionOnBackgroundMiss: bool): Array<MenuItem> {
+  /** @internal Exposed for deterministic host-policy tests; not part of the FUI public barrel. */
+  static buildBuiltInItemsForHost(
+    handle: u64,
+    x: f32,
+    y: f32,
+    clearSelectionOnBackgroundMiss: bool,
+    host: HostContext,
+  ): Array<MenuItem> {
     this.releaseActiveMenuLinkPreview();
     const targetNode = EventRouter.getRegisteredNode(handle);
     let contextNode = targetNode;
@@ -194,26 +207,34 @@ export class ContextMenuManager {
       link.pinPreviewForContextMenu();
       this.activeMenuLink = link;
       const linkItems = new Array<MenuItem>();
-      linkItems.push(new MenuItem("New Tab", ContextMenuAction.OpenLinkInNewTab, link.href));
-      linkItems.push(new MenuItem("Open", ContextMenuAction.OpenLink, link.href));
+      if (host.supports(HostCapability.NewBrowsingContext)) {
+        linkItems.push(new MenuItem("New Tab", ContextMenuAction.OpenLinkInNewTab, link.href));
+      }
+      if (host.supports(HostCapability.OpenExternalUri)) {
+        linkItems.push(new MenuItem("Open", ContextMenuAction.OpenLink, link.href));
+      }
       appendMenuSection(items, linkItems);
     }
 
     const textTarget = this.resolveTextTarget(targetNode);
     const selectionHit = ui.isPointInSelection(x, y) || this.selectionHintContainsHandle(handle);
     if (textTarget !== null) {
-      appendMenuSection(items, this.buildTextSection(textTarget, selectionHit ? this.currentSelectionText : ""));
+      appendMenuSection(items, this.buildTextSection(textTarget, selectionHit ? this.currentSelectionText : "", host));
     }
 
     const imageUrl = this.resolveImageUrl(targetNode, x, y);
     if (imageUrl !== null && imageUrl.length > 0) {
       const imageItems = new Array<MenuItem>();
-      imageItems.push(new MenuItem("New Tab", ContextMenuAction.OpenImageInNewTab, imageUrl));
-      imageItems.push(new MenuItem("Open", ContextMenuAction.OpenImage, imageUrl));
+      if (host.supports(HostCapability.NewBrowsingContext)) {
+        imageItems.push(new MenuItem("New Tab", ContextMenuAction.OpenImageInNewTab, imageUrl));
+      }
+      if (host.supports(HostCapability.OpenExternalUri)) {
+        imageItems.push(new MenuItem("Open", ContextMenuAction.OpenImage, imageUrl));
+      }
       appendMenuSection(items, imageItems);
     }
 
-    if (selectionHit && textTarget === null && this.currentSelectionText.length > 0) {
+    if (selectionHit && textTarget === null && this.currentSelectionText.length > 0 && host.supports(HostCapability.ClipboardWrite)) {
       const selectionItems = new Array<MenuItem>();
       selectionItems.push(new MenuItem("Copy", ContextMenuAction.CopyCurrentSelection, this.currentSelectionText));
       appendMenuSection(items, selectionItems);
@@ -266,7 +287,7 @@ export class ContextMenuManager {
     return null;
   }
 
-  private static buildTextSection(target: TextCore, currentSelectionText: string = ""): Array<MenuItem> {
+  private static buildTextSection(target: TextCore, currentSelectionText: string, host: HostContext): Array<MenuItem> {
     const items = new Array<MenuItem>();
     const handle = target.builtHandle;
     if (handle == <u64>HandleValue.Invalid || !target.isSelectableText) {
@@ -313,48 +334,52 @@ export class ContextMenuManager {
         ),
       );
       items.push(MenuItem.separator());
-      items.push(
-        new MenuItem(
-          "Cut",
-          ContextMenuAction.CutTextSelection,
-          selectedPayload,
-          0,
-          formatPrimaryShortcutLabel("x"),
-          !hasSelection,
-          handle,
-          0,
-          0,
-          true,
-        ).withSelectionRange(selectionStartByte, selectionEndByte),
-      );
-      items.push(
-        new MenuItem(
-          "Copy",
-          ContextMenuAction.CopyCurrentSelection,
-          selectedPayload,
-          0,
-          formatPrimaryShortcutLabel("c"),
-          !hasSelection,
-          handle,
-          0,
-          0,
-          true,
-        ),
-      );
-      items.push(
-        new MenuItem(
-          "Paste",
-          ContextMenuAction.PasteText,
-          null,
-          0,
-          formatPrimaryShortcutLabel("v"),
-          false,
-          handle,
-          0,
-          0,
-          true,
-        ),
-      );
+      if (host.supports(HostCapability.ClipboardWrite)) {
+        items.push(
+          new MenuItem(
+            "Cut",
+            ContextMenuAction.CutTextSelection,
+            selectedPayload,
+            0,
+            formatPrimaryShortcutLabel("x"),
+            !hasSelection,
+            handle,
+            0,
+            0,
+            true,
+          ).withSelectionRange(selectionStartByte, selectionEndByte),
+        );
+        items.push(
+          new MenuItem(
+            "Copy",
+            ContextMenuAction.CopyCurrentSelection,
+            selectedPayload,
+            0,
+            formatPrimaryShortcutLabel("c"),
+            !hasSelection,
+            handle,
+            0,
+            0,
+            true,
+          ),
+        );
+      }
+      if (host.supports(HostCapability.ClipboardRead)) {
+        items.push(
+          new MenuItem(
+            "Paste",
+            ContextMenuAction.PasteText,
+            null,
+            0,
+            formatPrimaryShortcutLabel("v"),
+            false,
+            handle,
+            0,
+            0,
+            true,
+          ),
+        );
+      }
       items.push(
         new MenuItem(
           "Select All",
@@ -372,6 +397,12 @@ export class ContextMenuManager {
       return items;
     }
 
+    if (!host.supports(HostCapability.ClipboardWrite)) {
+      items.push(
+        new MenuItem("Select All", ContextMenuAction.SelectAllText, null, 0, formatPrimaryShortcutLabel("a"), !hasText, handle),
+      );
+      return items;
+    }
     if (currentSelectionText.length > 0) {
       items.push(
         new MenuItem(

package/src/core/EventRouter.ts

@@ -24,6 +24,7 @@ import { NavLink } from "../controls/NavLink";
 import { TextInputCore } from "../controls/internal/TextInputCore";
 import { Image } from "../nodes/Image";
 import { Svg } from "../nodes/Svg";
+import { ContextMenu } from "../controls/ContextMenu";
 
 export interface GlobalKeyHandler {
   handleGlobalKeyEvent(eventType: KeyEventType, key: string, modifiers: u32): bool;
@@ -44,6 +45,7 @@ export class EventRouter {
   private static readonly keyFilterHandlers: Array<GlobalKeyHandler> = new Array<GlobalKeyHandler>();
   private static readonly keyFilterTokens: Array<u32> = new Array<u32>();
   private static capturedPointerHandle: u64 = <u64>HandleValue.Invalid;
+  private static selectionCursorHandle: u64 = <u64>HandleValue.Invalid;
   private static currentCursorStyle: CursorStyle = CursorStyle.Default;
   private static nextKeyFilterToken: u32 = 1;
   private static focusedNode: Node | null = null;
@@ -70,6 +72,9 @@ export class EventRouter {
     if (this.capturedPointerHandle == handle) {
       this.capturedPointerHandle = <u64>HandleValue.Invalid;
     }
+    if (this.selectionCursorHandle == handle) {
+      this.selectionCursorHandle = <u64>HandleValue.Invalid;
+    }
     const index = getHandleIndex(handle);
     this.nodes.delete(index);
     this.generations.delete(index);
@@ -94,6 +99,15 @@ export class EventRouter {
     showKeyboardFocusForPointerEvent(eventType);
     SelectionHandleAdornerManager.recordPointerEvent(eventType, pointerType);
     const pointedNode = this.resolveNode(handle);
+    if (
+      eventType == PointerEventType.Down &&
+      (button == 0 || pointerType == PointerType.Touch || pointerType == PointerType.Pen) &&
+      ContextMenu.dismissForOutsidePointerDown(x, y)
+    ) {
+      DragDropManager.handlePointerEvent(null, eventType, x, y, modifiers);
+      this.applyCurrentCursor();
+      return true;
+    }
     if (
       eventType == PointerEventType.Down &&
       !this.preservesSelectionOnPointerDownForRouting(pointedNode) &&
@@ -103,6 +117,14 @@ export class EventRouter {
       this.applyCurrentCursor();
       return true;
     }
+    if (eventType == PointerEventType.Down && button == 0 && pointerType != PointerType.Touch) {
+      const selectionCursorNode = this.resolveSelectionCursorNode(pointedNode);
+      this.selectionCursorHandle = selectionCursorNode === null
+        ? <u64>HandleValue.Invalid
+        : changetype<Node>(selectionCursorNode).builtHandle;
+    } else if (eventType == PointerEventType.Up || eventType == PointerEventType.Cancel) {
+      this.selectionCursorHandle = <u64>HandleValue.Invalid;
+    }
     if (eventType == PointerEventType.Up) {
       trackKeyboardScrollPointerUp(pointedNode, x, y);
     }
@@ -553,6 +575,7 @@ export class EventRouter {
     this.nodes.clear();
     this.generations.clear();
     this.capturedPointerHandle = <u64>HandleValue.Invalid;
+    this.selectionCursorHandle = <u64>HandleValue.Invalid;
     this.hoverStack.length = 0;
     this.focusedNode = null;
     this.keyFilterHandlers.length = 0;
@@ -687,6 +710,22 @@ export class EventRouter {
     return this.resolveNode(this.capturedPointerHandle);
   }
 
+  private static resolveSelectionCursorNode(node: Node | null): Node | null {
+    if (node === null || !node.isEnabled || !node.isVisible) {
+      return null;
+    }
+    if (node.isSelectableText || node.isEditableText) {
+      return node;
+    }
+    if (node instanceof TextInputCore) {
+      const editor = changetype<TextInputCore>(node).editorNode;
+      if (editor.isEnabled && editor.isVisible && (editor.isSelectableText || editor.isEditableText)) {
+        return editor;
+      }
+    }
+    return null;
+  }
+
   private static applyCurrentCursor(): void {
     const dragCursor = DragDropManager.cursorOverrideStyle();
     if (dragCursor != CursorStyle.Default) {
@@ -698,6 +737,11 @@ export class EventRouter {
       this.applyCursor(captured.cursorStyle);
       return;
     }
+    const selectionCursorNode = this.resolveNode(this.selectionCursorHandle);
+    if (selectionCursorNode !== null) {
+      this.applyCursor(changetype<Node>(selectionCursorNode).cursorStyle);
+      return;
+    }
     if (this.hoverStack.length == 0) {
       this.applyCursor(CursorStyle.Default);
       return;

package/src/core/Node.ts

@@ -23,6 +23,7 @@ import { storePersistedTextState, tryLoadPersistedTextState } from "./PersistedU
 import { ToolTip } from "./ToolTip";
 import { ToolTipManager } from "./ToolTipManager";
 import { throwNullArgument } from "./Errors";
+import { HostContext } from "./Platform";
 import { bind0, bind1, bind2, bindResult0, bindResult1 } from "./bind";
 import {
   CursorStyle,
@@ -435,11 +436,13 @@ export class ContextMenuEventArgs {
   readonly target: Node | null;
   readonly x: f32;
   readonly y: f32;
+  readonly host: HostContext;
 
-  constructor(target: Node | null, x: f32, y: f32) {
+  constructor(target: Node | null, x: f32, y: f32, host: HostContext) {
     this.target = target;
     this.x = x;
     this.y = y;
+    this.host = host;
   }
 }
 

package/src/core/Platform.ts

@@ -1,13 +1,58 @@
-import { fui_get_platform_family, fui_is_coarse_pointer, KeyModifier } from "./ffi";
+import {
+  fui_get_host_capabilities,
+  fui_get_host_environment,
+  fui_get_platform_family,
+  fui_is_coarse_pointer,
+  HostCapability,
+  HostEnvironment,
+  KeyModifier,
+  PlatformFamily,
+} from "./ffi";
 
-export enum PlatformFamily {
-  Unknown = 0,
-  Apple = 1,
-  Windows = 2,
-  Linux = 3,
+export { HostCapability, HostEnvironment, PlatformFamily } from "./ffi";
+
+const KNOWN_HOST_CAPABILITIES: u32 =
+  HostCapability.BrowserHistory |
+  HostCapability.Reload |
+  HostCapability.NewBrowsingContext |
+  HostCapability.OpenExternalUri |
+  HostCapability.ClipboardRead |
+  HostCapability.ClipboardWrite |
+  HostCapability.FileDialogs;
+
+function resolvePlatformFamily(value: u32): PlatformFamily {
+  if (value <= <u32>PlatformFamily.Linux) {
+    return <PlatformFamily>value;
+  }
+  return PlatformFamily.Unknown;
 }
 
-const detectedPlatformFamily = <PlatformFamily>fui_get_platform_family();
+function resolveHostEnvironment(value: u32): HostEnvironment {
+  if (value <= <u32>HostEnvironment.Headless) {
+    return <HostEnvironment>value;
+  }
+  return HostEnvironment.Unknown;
+}
+
+const detectedPlatformFamily = resolvePlatformFamily(fui_get_platform_family());
+const detectedHostEnvironment = resolveHostEnvironment(fui_get_host_environment());
+const detectedHostCapabilities = fui_get_host_capabilities() & KNOWN_HOST_CAPABILITIES;
+
+export class HostContext {
+  readonly platformFamily: PlatformFamily;
+  readonly environment: HostEnvironment;
+  private readonly capabilities: u32;
+
+  constructor(platformFamily: PlatformFamily, environment: HostEnvironment, capabilities: u32) {
+    this.platformFamily = resolvePlatformFamily(<u32>platformFamily);
+    this.environment = resolveHostEnvironment(<u32>environment);
+    this.capabilities = capabilities & KNOWN_HOST_CAPABILITIES;
+  }
+
+  supports(capability: HostCapability): bool {
+    return (this.capabilities & <u32>capability) != 0;
+  }
+}
 
 class KeyboardPolicy {
   constructor(
@@ -108,6 +153,18 @@ export function getPlatformFamily(): PlatformFamily {
   return detectedPlatformFamily;
 }
 
+export function getHostEnvironment(): HostEnvironment {
+  return detectedHostEnvironment;
+}
+
+export function getHostContext(): HostContext {
+  return new HostContext(detectedPlatformFamily, detectedHostEnvironment, detectedHostCapabilities);
+}
+
+export function hasHostCapability(capability: HostCapability): bool {
+  return (detectedHostCapabilities & <u32>capability) != 0;
+}
+
 export function isCoarsePointer(): bool {
   return fui_is_coarse_pointer();
 }

package/src/core/ffi.ts

@@ -1,5 +1,7 @@
 export {
   fui_get_accent_color,
+  fui_get_host_capabilities,
+  fui_get_host_environment,
   fui_get_platform_family,
   fui_is_coarse_pointer,
   fui_is_dark_mode,

package/src/core/generated/FrameworkHostServices.ts

@@ -8,6 +8,20 @@ export function fui_get_accent_color(): u32 {
   return __host_fui_get_accent_color();
 }
 
+@external("fui_host", "fui_get_host_capabilities")
+declare function __host_fui_get_host_capabilities(): u32;
+
+export function fui_get_host_capabilities(): u32 {
+  return __host_fui_get_host_capabilities();
+}
+
+@external("fui_host", "fui_get_host_environment")
+declare function __host_fui_get_host_environment(): u32;
+
+export function fui_get_host_environment(): u32 {
+  return __host_fui_get_host_environment();
+}
+
 @external("fui_host", "fui_get_platform_family")
 declare function __host_fui_get_platform_family(): u32;
 

package/src/core/generated/HostAbi.ts

@@ -15,6 +15,9 @@ export declare function get_viewport_height(): f32;
 @external("fui_host", "get_device_pixel_ratio")
 export declare function get_device_pixel_ratio(): f32;
 
+@external("fui_host", "fui_set_application_caption")
+export declare function fui_set_application_caption(captionPtr: usize, captionLen: u32): void;
+
 @external("fui_host", "fui_set_pointer_capture")
 export declare function fui_set_pointer_capture(handle: u64): void;
 
@@ -108,6 +111,12 @@ export declare function fui_get_accent_color(): u32;
 @external("fui_host", "fui_get_platform_family")
 export declare function fui_get_platform_family(): u32;
 
+@external("fui_host", "fui_get_host_environment")
+export declare function fui_get_host_environment(): u32;
+
+@external("fui_host", "fui_get_host_capabilities")
+export declare function fui_get_host_capabilities(): u32;
+
 @external("fui_host", "fui_is_coarse_pointer")
 export declare function fui_is_coarse_pointer(): bool;
 

package/src/core/generated/UiEnums.ts

@@ -166,6 +166,30 @@ export enum SemanticRole {
   ComboBox = 16,
 }
 
+export enum PlatformFamily {
+  Unknown = 0,
+  Apple = 1,
+  Windows = 2,
+  Linux = 3,
+}
+
+export enum HostEnvironment {
+  Unknown = 0,
+  Browser = 1,
+  Desktop = 2,
+  Headless = 3,
+}
+
+export enum HostCapability {
+  BrowserHistory = 1,
+  Reload = 2,
+  NewBrowsingContext = 4,
+  OpenExternalUri = 8,
+  ClipboardRead = 16,
+  ClipboardWrite = 32,
+  FileDialogs = 64,
+}
+
 export enum CursorStyle {
   Default = 0,
   Pointer = 1,

package/browser/loading-overlay-body.html

@@ -1,13 +0,0 @@
-<div
-  class="effindom-loading-overlay"
-  id="effindom-loading-overlay"
-  data-state="loading"
-  aria-live="polite"
-  aria-hidden="true"
-  hidden>
-  <div class="effindom-loading-card">
-    <p class="effindom-loading-kicker">EffinDom backstage</p>
-    <h2 class="effindom-loading-title" id="effindom-loading-title">Teaching the pixels their lines...</h2>
-    <p class="effindom-loading-detail" id="effindom-loading-detail">The runtime orchestra is tuning up behind the canvas.</p>
-  </div>
-</div>

package/browser/loading-overlay-styles.html

@@ -1,52 +0,0 @@
-.effindom-loading-overlay {
-  position: absolute;
-  inset: 0;
-  display: grid;
-  place-items: center;
-  padding: 24px;
-  box-sizing: border-box;
-  background: linear-gradient(180deg, rgba(2, 6, 23, 0.72), rgba(10, 20, 34, 0.82));
-  backdrop-filter: blur(10px);
-  z-index: 2;
-}
-
-.effindom-loading-overlay[hidden] {
-  display: none;
-}
-
-.effindom-loading-card {
-  max-width: 420px;
-  padding: 22px 24px;
-  border: 1px solid rgba(148, 163, 184, 0.32);
-  border-radius: 18px;
-  background: rgba(6, 12, 21, 0.80);
-  text-align: center;
-  box-shadow: 0 18px 48px rgba(2, 6, 23, 0.30);
-}
-
-.effindom-loading-overlay[data-state="error"] .effindom-loading-card {
-  border-color: rgba(248, 113, 113, 0.50);
-  background: rgba(69, 10, 10, 0.78);
-}
-
-.effindom-loading-kicker {
-  margin: 0 0 10px;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: #7dd3fc;
-}
-
-.effindom-loading-title {
-  margin: 0;
-  font-size: 28px;
-  line-height: 1.15;
-}
-
-.effindom-loading-detail {
-  margin: 12px 0 0;
-  font-size: 14px;
-  line-height: 1.55;
-  color: #cbd5e1;
-}