@effindomv2/fui-as 0.2.0 → 0.2.2-alpha1

package/browser/src/index.ts

@@ -33,7 +33,6 @@ export {
 export {
   BuildMode,
   DevToolsDomMirrorMode,
-  PageZoomMode,
 } from '@effindomv2/runtime';
 
 export type {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effindomv2/fui-as",
-  "version": "0.2.0",
+  "version": "0.2.2-alpha1",
   "private": false,
   "license": "AGPL-3.0-only OR LicenseRef-EffinDom-Commercial",
   "description": "EffinDom v2 AssemblyScript frontend framework SDK and browser harness",
@@ -89,6 +89,7 @@
     "LICENSES"
   ],
   "scripts": {
+    "update:upstream": "node scripts/update-upstream-versions.mjs",
     "guard:runtime-dependency": "bash scripts/check-runtime-dependency.sh",
     "generate:abi": "mkdir -p build && esbuild ../abi/generate.ts --bundle --format=esm --platform=node --target=node20 --packages=external --outfile=build/generate-abi.mjs && node build/generate-abi.mjs fui-as-ui && node build/generate-abi.mjs fui-as-host && node build/generate-abi.mjs fui-as-enums",
     "check:abi": "mkdir -p build && esbuild ../abi/generate.ts --bundle --format=esm --platform=node --target=node20 --packages=external --outfile=build/generate-abi.mjs && node build/generate-abi.mjs fui-as-ui --check && node build/generate-abi.mjs fui-as-host --check && node build/generate-abi.mjs fui-as-enums --check",
@@ -105,7 +106,7 @@
     "typecheck": "npm run guard:runtime-dependency && npm run check:abi && tsc -p tsconfig.json --noEmit"
   },
   "dependencies": {
-    "@effindomv2/runtime": "0.2.2"
+    "@effindomv2/runtime": "0.2.10"
   },
   "devDependencies": {
     "@as-pect/assembly": "9.0.0",

package/scripts/update-upstream-versions.mjs

@@ -0,0 +1,27 @@
+import { execFileSync } from 'node:child_process';
+import { readFileSync, writeFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const packageDirectory = dirname(dirname(fileURLToPath(import.meta.url)));
+const packagePath = join(packageDirectory, 'package.json');
+const npm = process.platform === 'win32' ? 'npm.cmd' : 'npm';
+const versionPattern = /^\d+\.\d+\.\d+(?:-[0-9A-Za-z.-]+)?$/;
+
+const runtimeVersion = execFileSync(
+  npm,
+  ['view', '@effindomv2/runtime', 'dist-tags.latest'],
+  { encoding: 'utf8' },
+).trim();
+if (!versionPattern.test(runtimeVersion)) {
+  throw new Error(`npm returned an invalid EffinDOM runtime version: ${JSON.stringify(runtimeVersion)}`);
+}
+
+const packageJson = JSON.parse(readFileSync(packagePath, 'utf8'));
+packageJson.dependencies['@effindomv2/runtime'] = runtimeVersion;
+writeFileSync(packagePath, `${JSON.stringify(packageJson, null, 2)}\n`);
+execFileSync(npm, ['install', '--package-lock-only', '--ignore-scripts'], {
+  cwd: packageDirectory,
+  stdio: 'inherit',
+});
+console.log(`Pinned @effindomv2/runtime@${runtimeVersion}.`);

package/src/Fui.ts

@@ -1,6 +1,7 @@
 export {
   Application,
   ApplicationRegistration,
+  PageZoomMode,
   ManagedApplicationController,
   createApplication,
   createManagedApplication,
@@ -44,6 +45,7 @@ export {
 export { Fetch, FetchErrorEventArgs, FetchRequest, FetchResponse } from "./core/Fetch";
 export { log } from "./core/Logger";
 export { disposeAll, Disposable } from "./core/Disposable";
+export { retainedView, RetainedView, RetainedViewLifecycleHandler } from "./core/RetainedView";
 export { cancelAllTimers, cancelTimer, hasTimer, scheduleTimer } from "./core/Timers";
 export { LoadedEventArgs, LoadedHandler, onLoaded, onLoadedWith } from "./core/FrameScheduler";
 export { SetBackgroundAction, SetTextAction } from "./core/Actions";
@@ -217,12 +219,10 @@ export {
   CheckboxIndicatorTemplate,
   CheckboxIndicatorVisualState,
   Checkbox,
-  clearControlTemplates,
   ComboBox,
   ComboBoxCommitMode,
   ComboBoxFilterMode,
   ComboBoxItem,
-  ControlTemplateSet,
   ContextMenu,
   Dialog,
   DropdownSizing,
@@ -241,7 +241,6 @@ export {
   DropdownOptionRowTemplate,
   DropdownOptionRowVisualState,
   Form,
-  getControlTemplates,
   MenuItem,
   NavLink,
   LabeledControlSizing,
@@ -265,13 +264,16 @@ export {
   SwitchIndicatorTemplate,
   SwitchIndicatorVisualState,
   Switch,
+  TabContentFactory,
+  TabItem,
+  TabSelectionChangedEventArgs,
+  TabView,
   TextArea,
   TextInputPresenter,
   TextInput,
   TextInputTemplate,
   TextInputColors,
   TextInputVisualState,
-  useControlTemplates,
 } from "./controls";
 export {
   Border,

package/src/FuiExports.ts

@@ -26,6 +26,7 @@ export {
   __fui_on_cross_selection_changed,
   __fui_on_focus_changed,
   __fui_on_frame,
+  __fui_needs_animation_frame,
   __fui_get_gesture_intent,
   __fui_get_long_press_minimum_duration_ms,
   __fui_get_long_press_movement_tolerance,

package/src/controls/Button.ts

@@ -22,7 +22,6 @@ import { FontFamily, FontStyle, FontWeight } from "../core/Typography";
 import { Border, FlexBox, TextCore } from "../nodes";
 import { ClickEventArgs, HoverChangedEventArgs, PointerEventArgs } from "../core/Node";
 import { ButtonColors } from "./ButtonColors";
-import { getControlTemplates } from "./ControlTemplateSet";
 import {
   ButtonPresenter,
   ButtonTemplate,
@@ -642,9 +641,7 @@ export class Button extends FlexBox {
     if (template !== null) {
       return template.create();
     }
-    const templateSet = getControlTemplates();
-    const appTemplate = templateSet !== null ? templateSet.button : null;
-    return (appTemplate === null ? defaultButtonTemplate : appTemplate).create();
+    return defaultButtonTemplate.create();
   }
 
   private replacePresenter(nextPresenter: ButtonPresenter): void {

package/src/controls/Checkbox.ts

@@ -4,7 +4,6 @@ import { CheckboxChangedEventArgs, ClickEventArgs } from "../core/Node";
 import { PersistedInt32Codec, PersistedValueState } from "../core/PersistedState";
 import { bind1 } from "../core/bind";
 import { LabeledControlSizing } from "./ControlSizing";
-import { getControlTemplates } from "./ControlTemplateSet";
 import { activeTheme } from "../core/Theme";
 import { PressableLabeledControl } from "./internal/PressableLabeledControl";
 import {
@@ -45,11 +44,7 @@ function createIndicatorPresenter(template: CheckboxIndicatorTemplate | null, si
   if (template !== null) {
     return template.create(sizing);
   }
-  const templateSet = getControlTemplates();
-  const appTemplate = templateSet !== null ? templateSet.checkboxIndicator : null;
-  return appTemplate === null
-    ? createDefaultCheckboxIndicatorPresenter(sizing)
-    : appTemplate.create(sizing);
+  return createDefaultCheckboxIndicatorPresenter(sizing);
 }
 
 export class Checkbox extends PressableLabeledControl {
@@ -214,11 +209,7 @@ export class Checkbox extends PressableLabeledControl {
   }
 
   private usesDefaultIndicatorPresenter(): bool {
-    if (this.templateOverride !== null) {
-      return false;
-    }
-    const templateSet = getControlTemplates();
-    return templateSet === null || templateSet.checkboxIndicator === null;
+    return this.templateOverride === null;
   }
 
 }

package/src/controls/Dropdown.ts

@@ -23,7 +23,6 @@ import { FlexBox, ScrollView } from "../nodes";
 import { bind1 } from "../core/bind";
 import { DropdownSizing } from "./ControlSizing";
 import { DropdownColors } from "./DropdownColors";
-import { getControlTemplates } from "./ControlTemplateSet";
 import {
   createDefaultDropdownChevronPresenter,
   DropdownChevronPresenter,
@@ -74,22 +73,14 @@ function createFieldPresenter(template: DropdownFieldTemplate | null, sizing: Dr
   if (template !== null) {
     return template.create(sizing);
   }
-  const templateSet = getControlTemplates();
-  const appTemplate = templateSet !== null ? templateSet.dropdownField : null;
-  return appTemplate === null
-    ? createDefaultDropdownFieldPresenter(sizing)
-    : appTemplate.create(sizing);
+  return createDefaultDropdownFieldPresenter(sizing);
 }
 
 function createChevronPresenter(template: DropdownChevronTemplate | null, sizing: DropdownSizing | null = null): DropdownChevronPresenter {
   if (template !== null) {
     return template.create(sizing);
   }
-  const templateSet = getControlTemplates();
-  const appTemplate = templateSet !== null ? templateSet.dropdownChevron : null;
-  return appTemplate === null
-    ? createDefaultDropdownChevronPresenter(sizing)
-    : appTemplate.create(sizing);
+  return createDefaultDropdownChevronPresenter(sizing);
 }
 
 export class DropdownItem {
@@ -722,19 +713,11 @@ export class Dropdown extends FlexBox implements GlobalKeyHandler, SelectablePop
   }
 
   private usesDefaultFieldPresenter(): bool {
-    if (this.fieldTemplateValue !== null) {
-      return false;
-    }
-    const templateSet = getControlTemplates();
-    return templateSet === null || templateSet.dropdownField === null;
+    return this.fieldTemplateValue === null;
   }
 
   private usesDefaultChevronPresenter(): bool {
-    if (this.chevronTemplateValue !== null) {
-      return false;
-    }
-    const templateSet = getControlTemplates();
-    return templateSet === null || templateSet.dropdownChevron === null;
+    return this.chevronTemplateValue === null;
   }
 
   getPopupListItemCount(): i32 {

package/src/controls/RadioButton.ts

@@ -5,7 +5,6 @@ import { activeTheme } from "../core/Theme";
 import { bind1 } from "../core/bind";
 import { LabeledControlSizing } from "./ControlSizing";
 import { PressableLabeledControl } from "./internal/PressableLabeledControl";
-import { getControlTemplates } from "./ControlTemplateSet";
 import { RadioGroup } from "./RadioGroup";
 import {
   createDefaultRadioIndicatorPresenter,
@@ -18,11 +17,7 @@ function createIndicatorPresenter(template: RadioIndicatorTemplate | null, sizin
   if (template !== null) {
     return template.create(sizing);
   }
-  const templateSet = getControlTemplates();
-  const appTemplate = templateSet !== null ? templateSet.radioIndicator : null;
-  return appTemplate === null
-    ? createDefaultRadioIndicatorPresenter(sizing)
-    : appTemplate.create(sizing);
+  return createDefaultRadioIndicatorPresenter(sizing);
 }
 
 export class RadioButton extends PressableLabeledControl {
@@ -188,10 +183,6 @@ export class RadioButton extends PressableLabeledControl {
   }
 
   private usesDefaultIndicatorPresenter(): bool {
-    if (this.templateOverride !== null) {
-      return false;
-    }
-    const templateSet = getControlTemplates();
-    return templateSet === null || templateSet.radioIndicator === null;
+    return this.templateOverride === null;
   }
 }

package/src/controls/Slider.ts

@@ -21,7 +21,6 @@ import { FlexBox } from "../nodes";
 import { bind1 } from "../core/bind";
 import { SliderSizing } from "./ControlSizing";
 import { SliderColors } from "./SliderColors";
-import { getControlTemplates } from "./ControlTemplateSet";
 import {
   createDefaultSliderPresenter,
   SliderPresenter,
@@ -68,11 +67,7 @@ function createSliderPresenter(template: SliderTemplate | null, sizing: SliderSi
   if (template !== null) {
     return template.create(sizing);
   }
-  const templateSet = getControlTemplates();
-  const appTemplate = templateSet !== null ? templateSet.slider : null;
-  return appTemplate === null
-    ? createDefaultSliderPresenter(sizing)
-    : appTemplate.create(sizing);
+  return createDefaultSliderPresenter(sizing);
 }
 
 export class Slider extends FlexBox implements DragGestureHost {
@@ -472,11 +467,7 @@ export class Slider extends FlexBox implements DragGestureHost {
   }
 
   private usesDefaultPresenter(): bool {
-    if (this.templateOverride !== null) {
-      return false;
-    }
-    const templateSet = getControlTemplates();
-    return templateSet === null || templateSet.slider === null;
+    return this.templateOverride === null;
   }
 
   private track(disposable: Disposable): void {

package/src/controls/Switch.ts

@@ -5,7 +5,6 @@ import { PersistedBoolCodec, PersistedValueState } from "../core/PersistedState"
 import { bind1 } from "../core/bind";
 import { activeTheme } from "../core/Theme";
 import { LabeledControlSizing } from "./ControlSizing";
-import { getControlTemplates } from "./ControlTemplateSet";
 import { PressableLabeledControl } from "./internal/PressableLabeledControl";
 import {
   defaultSwitchIndicatorTemplate,
@@ -36,9 +35,7 @@ function createIndicatorPresenter(template: SwitchIndicatorTemplate | null, sizi
   if (template !== null) {
     return template.create(sizing);
   }
-  const templateSet = getControlTemplates();
-  const appTemplate = templateSet !== null ? templateSet.switchIndicator : null;
-  return (appTemplate === null ? defaultSwitchIndicatorTemplate : appTemplate).create(sizing);
+  return defaultSwitchIndicatorTemplate.create(sizing);
 }
 
 export class Switch extends PressableLabeledControl {

package/src/controls/TabView.ts

@@ -0,0 +1,345 @@
+import { Callback1, Handler1 } from "../core/BoundCallback";
+import { throwNullArgument } from "../core/Errors";
+import { FlexDirection, SemanticRole } from "../core/ffi";
+import { warn } from "../core/Logger";
+import { retainedView, RetainedView } from "../core/RetainedView";
+import { bind1 } from "../core/bind";
+import { FlexBox } from "../nodes";
+
+const NO_PENDING_SELECTION: i32 = -2;
+
+export type TabContentFactory = () => RetainedView;
+
+export class TabSelectionChangedEventArgs {
+  constructor(
+    readonly previousIndex: i32,
+    readonly selectedIndex: i32,
+    readonly previousItem: TabItem | null,
+    readonly selectedItem: TabItem | null,
+  ) {}
+}
+
+export class TabItem {
+  private labelValue: string;
+  private descriptionValue: string = "";
+  private enabledValue: bool = true;
+  private factoryValue: TabContentFactory | null;
+  private preparedViewValue: RetainedView | null = null;
+  private retainedViewValue: RetainedView | null = null;
+  private ownerValue: TabView | null = null;
+
+  constructor(label: string, content: TabContentFactory | null = null) {
+    this.labelValue = label;
+    this.factoryValue = content;
+  }
+
+  get labelText(): string { return this.labelValue; }
+  get descriptionText(): string { return this.descriptionValue; }
+  get isEnabled(): bool { return this.enabledValue; }
+  get isMaterialized(): bool { return this.retainedViewValue !== null; }
+
+  label(value: string): this {
+    this.labelValue = value;
+    const owner = this.ownerValue;
+    if (owner !== null) changetype<TabView>(owner)._itemMetadataChanged(this);
+    return this;
+  }
+
+  description(value: string): this {
+    this.descriptionValue = value;
+    const owner = this.ownerValue;
+    if (owner !== null) changetype<TabView>(owner)._itemMetadataChanged(this);
+    return this;
+  }
+
+  enabled(flag: bool): this {
+    if (this.enabledValue == flag) return this;
+    this.enabledValue = flag;
+    const owner = this.ownerValue;
+    if (owner !== null) changetype<TabView>(owner)._itemEnabledChanged(this);
+    return this;
+  }
+
+  content(factory: TabContentFactory): this {
+    if (this.isMaterialized) {
+      warn("Lifecycle", "TabItem.content() cannot replace content after the tab has been materialized.");
+      return this;
+    }
+    this.preparedViewValue = null;
+    this.factoryValue = factory;
+    return this;
+  }
+
+  contentView(view: RetainedView): this {
+    if (this.isMaterialized) {
+      warn("Lifecycle", "TabItem.contentView() cannot replace content after the tab has been materialized.");
+      return this;
+    }
+    this.preparedViewValue = view;
+    this.factoryValue = null;
+    return this;
+  }
+
+  _bindOwner(owner: TabView | null): void { this.ownerValue = owner; }
+
+  _resolveView(): RetainedView {
+    const retained = this.retainedViewValue;
+    if (retained !== null) return changetype<RetainedView>(retained);
+    const prepared = this.preparedViewValue;
+    let resolved: RetainedView;
+    if (prepared !== null) {
+      resolved = changetype<RetainedView>(prepared);
+    } else {
+      const factory = this.factoryValue;
+      resolved = factory === null
+        ? retainedView(new FlexBox().fillSize())
+        : changetype<TabContentFactory>(factory)();
+    }
+    this.preparedViewValue = null;
+    this.retainedViewValue = resolved;
+    return resolved;
+  }
+
+  _existingView(): RetainedView | null { return this.retainedViewValue; }
+
+  _disposeContent(): void {
+    const retained = this.retainedViewValue;
+    if (retained !== null) changetype<RetainedView>(retained).dispose();
+    const prepared = this.preparedViewValue;
+    if (prepared !== null && prepared !== retained) changetype<RetainedView>(prepared).dispose();
+    this.retainedViewValue = null;
+    this.preparedViewValue = null;
+  }
+}
+
+export class TabView extends FlexBox {
+  private readonly itemsValue: Array<TabItem> = new Array<TabItem>();
+  private selectedIndexValue: i32 = -1;
+  private selectingValue: bool = false;
+  private pendingSelectionValue: i32 = NO_PENDING_SELECTION;
+  private pendingEmitValue: bool = false;
+  private changedCallback: ((event: TabSelectionChangedEventArgs) => void) | null = null;
+  private changedBinding: Callback1<TabSelectionChangedEventArgs> | null = null;
+  readonly contentPresenter: FlexBox;
+
+  constructor(items: Array<TabItem> = new Array<TabItem>()) {
+    super();
+    this.contentPresenter = new FlexBox().fillSize() as FlexBox;
+    this.contentPresenter.semanticRole(SemanticRole.TabPanel);
+    this.contentPresenter.semanticLabel("Tab panel");
+    this.flexDirection(FlexDirection.Column);
+    this.addChildNode(this.contentPresenter);
+    this.items(items);
+  }
+
+  get selectedIndex(): i32 { return this.selectedIndexValue; }
+  get selectedItem(): TabItem | null {
+    return this.selectedIndexValue >= 0 && this.selectedIndexValue < this.itemsValue.length
+      ? unchecked(this.itemsValue[this.selectedIndexValue])
+      : null;
+  }
+  get itemCount(): i32 { return this.itemsValue.length; }
+
+  itemAt(index: i32): TabItem | null {
+    return index >= 0 && index < this.itemsValue.length ? unchecked(this.itemsValue[index]) : null;
+  }
+
+  items(items: Array<TabItem>): this {
+    this.clearItems();
+    for (let index = 0; index < items.length; ++index) this.addItem(unchecked(items[index]));
+    return this;
+  }
+
+  addItem(item: TabItem): this {
+    if (item == null) throwNullArgument("TabView.addItem", "item");
+    if (this.indexOfItem(item) >= 0) return this;
+    item._bindOwner(this);
+    const index = this.itemsValue.length;
+    this.itemsValue.push(item);
+    if (this.selectedIndexValue < 0 && item.isEnabled) this.selectIndexInternal(index, false, null);
+    return this;
+  }
+
+  removeItem(item: TabItem): this {
+    const index = this.indexOfItem(item);
+    if (index >= 0) this.removeItemAt(index);
+    return this;
+  }
+
+  removeItemAt(index: i32): this {
+    if (index < 0 || index >= this.itemsValue.length) return this;
+    const removed = unchecked(this.itemsValue[index]);
+    const wasSelected = index == this.selectedIndexValue;
+    if (wasSelected) this.detachActiveView();
+    removed._bindOwner(null);
+    for (let cursor = index; cursor < this.itemsValue.length - 1; ++cursor) {
+      unchecked(this.itemsValue[cursor] = unchecked(this.itemsValue[cursor + 1]));
+    }
+    this.itemsValue.length -= 1;
+    if (wasSelected) {
+      const previousIndex = this.selectedIndexValue;
+      this.selectedIndexValue = -1;
+      const replacement = this.findReplacementIndex(index);
+      if (replacement >= 0) this.selectIndexInternal(replacement, true, removed, previousIndex);
+      else this.emitChanged(previousIndex, -1, removed, null);
+    } else if (this.selectedIndexValue > index) {
+      this.selectedIndexValue -= 1;
+    }
+    removed._disposeContent();
+    return this;
+  }
+
+  clearItems(): this {
+    const previousIndex = this.selectedIndexValue;
+    const previousItem = this.selectedItem;
+    this.detachActiveView();
+    for (let index = 0; index < this.itemsValue.length; ++index) {
+      const item = unchecked(this.itemsValue[index]);
+      item._bindOwner(null);
+      item._disposeContent();
+    }
+    this.itemsValue.length = 0;
+    this.selectedIndexValue = -1;
+    if (previousItem !== null) this.emitChanged(previousIndex, -1, previousItem, null);
+    return this;
+  }
+
+  selectIndex(index: i32): this {
+    this.selectIndexInternal(index, true, null);
+    return this;
+  }
+
+  onSelectionChanged(callback: ((event: TabSelectionChangedEventArgs) => void) | null): this {
+    this.changedCallback = callback;
+    this.changedBinding = null;
+    return this;
+  }
+
+  bindSelectionChanged<Owner>(owner: Owner, handler: Handler1<Owner, TabSelectionChangedEventArgs>): this {
+    this.changedCallback = null;
+    this.changedBinding = bind1<Owner, TabSelectionChangedEventArgs>(owner, handler);
+    return this;
+  }
+
+  onSelectionChangedWith<Owner>(owner: Owner, handler: Handler1<Owner, TabSelectionChangedEventArgs>): this {
+    return this.bindSelectionChanged(owner, handler);
+  }
+
+  _itemEnabledChanged(item: TabItem): void {
+    const index = this.indexOfItem(item);
+    if (index < 0) return;
+    if (!item.isEnabled && index == this.selectedIndexValue) {
+      const previousIndex = this.selectedIndexValue;
+      this.detachActiveView();
+      this.selectedIndexValue = -1;
+      const replacement = this.findReplacementIndex(index);
+      if (replacement >= 0) this.selectIndexInternal(replacement, true, item, previousIndex);
+      else this.emitChanged(previousIndex, -1, item, null);
+    } else if (item.isEnabled && this.selectedIndexValue < 0) {
+      this.selectIndexInternal(index, true, null);
+    }
+  }
+
+  _itemMetadataChanged(item: TabItem): void {
+    const index = this.indexOfItem(item);
+    if (index < 0) return;
+    if (index == this.selectedIndexValue) this.contentPresenter.semanticLabel(item.labelText + " tab panel");
+  }
+
+  dispose(): void {
+    this.detachActiveView();
+    for (let index = 0; index < this.itemsValue.length; ++index) {
+      const item = unchecked(this.itemsValue[index]);
+      item._bindOwner(null);
+      item._disposeContent();
+    }
+    super.dispose();
+  }
+
+  private selectIndexInternal(
+    index: i32,
+    emit: bool,
+    previousItemOverride: TabItem | null,
+    previousIndexOverride: i32 = -1,
+  ): void {
+    if (!this.isEnabledIndex(index)) return;
+    if (this.selectingValue) {
+      this.pendingSelectionValue = index;
+      this.pendingEmitValue = emit;
+      return;
+    }
+    this.selectingValue = true;
+    let requestedIndex = index;
+    let requestedEmit = emit;
+    let overrideItem = previousItemOverride;
+    let overrideIndex = previousIndexOverride;
+    let iterations = 0;
+    while (requestedIndex >= 0 && this.isEnabledIndex(requestedIndex)) {
+      const previousIndex = overrideItem !== null ? overrideIndex : this.selectedIndexValue;
+      const previousItem = overrideItem !== null ? overrideItem : this.selectedItem;
+      overrideItem = null;
+      overrideIndex = -1;
+      if (this.selectedIndexValue != requestedIndex) {
+        this.detachActiveView();
+        this.selectedIndexValue = requestedIndex;
+        const item = unchecked(this.itemsValue[requestedIndex]);
+        const view = item._resolveView();
+        this.contentPresenter.addChildNode(view.root);
+        this.contentPresenter.semanticLabel(item.labelText + " tab panel");
+        view.activate();
+        if (requestedEmit) this.emitChanged(previousIndex, requestedIndex, previousItem, item);
+      }
+      if (this.pendingSelectionValue == NO_PENDING_SELECTION) break;
+      requestedIndex = this.pendingSelectionValue;
+      requestedEmit = this.pendingEmitValue;
+      this.pendingSelectionValue = NO_PENDING_SELECTION;
+      iterations += 1;
+      if (iterations > this.itemsValue.length + 8) {
+        warn("Lifecycle", "TabView stopped a re-entrant selection loop.");
+        break;
+      }
+    }
+    this.pendingSelectionValue = NO_PENDING_SELECTION;
+    this.selectingValue = false;
+  }
+
+  private detachActiveView(): void {
+    const item = this.selectedItem;
+    if (item === null) return;
+    const view = changetype<TabItem>(item)._existingView();
+    if (view === null) return;
+    const retained = changetype<RetainedView>(view);
+    retained.deactivate();
+    this.contentPresenter.removeChildNode(retained.root);
+  }
+
+  private emitChanged(
+    previousIndex: i32,
+    selectedIndex: i32,
+    previousItem: TabItem | null,
+    selectedItem: TabItem | null,
+  ): void {
+    const event = new TabSelectionChangedEventArgs(previousIndex, selectedIndex, previousItem, selectedItem);
+    const callback = this.changedCallback;
+    if (callback !== null) callback(event);
+    const binding = this.changedBinding;
+    if (binding !== null) binding.invoke(event);
+  }
+
+  private indexOfItem(item: TabItem): i32 {
+    for (let index = 0; index < this.itemsValue.length; ++index) {
+      if (unchecked(this.itemsValue[index]) === item) return index;
+    }
+    return -1;
+  }
+
+  private isEnabledIndex(index: i32): bool {
+    return index >= 0 && index < this.itemsValue.length && unchecked(this.itemsValue[index]).isEnabled;
+  }
+
+  private findReplacementIndex(index: i32): i32 {
+    for (let cursor = index; cursor < this.itemsValue.length; ++cursor) if (this.isEnabledIndex(cursor)) return cursor;
+    for (let cursor = index - 1; cursor >= 0; --cursor) if (this.isEnabledIndex(cursor)) return cursor;
+    return -1;
+  }
+}

package/src/controls/index.ts

@@ -20,6 +20,12 @@ export { AntiSelectionArea } from "./AntiSelectionArea";
 export { SelectionArea } from "./SelectionArea";
 export { Slider } from "./Slider";
 export { Switch } from "./Switch";
+export {
+  TabContentFactory,
+  TabItem,
+  TabSelectionChangedEventArgs,
+  TabView,
+} from "./TabView";
 export { TextArea } from "./TextArea";
 export { TextInput } from "./TextInput";
 export * from "./templating";

package/src/controls/internal/SelectablePopupList.ts

@@ -6,7 +6,6 @@ import { Theme, activeTheme } from "../../core/Theme";
 import { FlexBox, Portal, ScrollBarVisibility, ScrollBox } from "../../nodes";
 import { DropdownSizing } from "../ControlSizing";
 import { DropdownColors } from "../DropdownColors";
-import { getControlTemplates } from "../ControlTemplateSet";
 import {
   createDefaultDropdownOptionRowPresenter,
   DropdownOptionRowPresenter,
@@ -35,11 +34,7 @@ function createOptionRowPresenter(template: DropdownOptionRowTemplate | null, si
   if (template !== null) {
     return template.create(sizing);
   }
-  const templateSet = getControlTemplates();
-  const appTemplate = templateSet !== null ? templateSet.dropdownOptionRow : null;
-  return appTemplate === null
-    ? createDefaultDropdownOptionRowPresenter(sizing)
-    : appTemplate.create(sizing);
+  return createDefaultDropdownOptionRowPresenter(sizing);
 }
 
 class SelectablePopupListOptionNode extends FlexBox {

package/src/controls/internal/TextInputCore.ts

@@ -22,7 +22,6 @@ import { FlexBox, ScrollBarVisibility, ScrollBox, TextCore } from "../../nodes";
 import { bind1 } from "../../core/bind";
 import { ScrollState } from "../../nodes/ScrollState";
 import { ScrollView } from "../../nodes/ScrollView";
-import { getControlTemplates } from "../ControlTemplateSet";
 import { TextInputColors } from "../TextInputColors";
 import {
   defaultTextInputTemplate,
@@ -973,11 +972,7 @@ export class TextInputCore extends FlexBox {
     if (template !== null) {
       return template.create();
     }
-    const templateSet = getControlTemplates();
-    const appTemplate = templateSet !== null
-      ? (this.profile.multiline ? templateSet.textArea : templateSet.textInput)
-      : null;
-    return (appTemplate === null ? defaultTextInputTemplate : appTemplate).create();
+    return defaultTextInputTemplate.create();
   }
 
   private editorHostNode(): Node {

package/src/controls/templating.ts

@@ -5,12 +5,6 @@ export {
   createDefaultButtonPresenter,
   defaultButtonTemplate,
 } from "./internal/ButtonPresenter";
-export {
-  ControlTemplateSet,
-  clearControlTemplates,
-  getControlTemplates,
-  useControlTemplates,
-} from "./ControlTemplateSet";
 export { PressableIndicatorMetrics } from "./internal/PressableIndicatorPresenter";
 export {
   CheckboxIndicatorPresenter,

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 { fui_set_application_caption, HandleValue, Unit } from "./ffi";
+import { fui_set_application_caption, fui_set_page_zoom_enabled, HandleValue, Unit } from "./ffi";
 import { Node } from "./Node";
 import { cancelAllTimers } from "./Timers";
 import {
@@ -23,12 +23,16 @@ import {
   useSystemTheme,
 } from "./Theme";
 import { disposeAllWorkers } from "./Worker";
-import { ControlTemplateSet, clearControlTemplates, getControlTemplates, useControlTemplates } from "../controls/ControlTemplateSet";
 
 let mountedRoot: Node | null = null;
 let mountedShell: FlexBox | null = null;
 let exportedApplication: Application<Node> | null = null;
 
+export enum PageZoomMode {
+  Disabled = 0,
+  Enabled = 1,
+}
+
 function createEmptyPage(): Node {
   return new FlexBox().width(100.0, Unit.Percent).height(100.0, Unit.Percent);
 }
@@ -78,8 +82,6 @@ export class ApplicationRegistration {
   private customThemeOnRegister: Theme | null = null;
   private accentColorOnRegister: u32 = 0;
   private hasAccentColorOnRegister: bool = false;
-  private controlTemplatesOnRegister: ControlTemplateSet | null = null;
-  private hasControlTemplatesOnRegister: bool = false;
 
   page(buildPage: () => Node): this {
     this.buildPageFn = buildPage;
@@ -108,15 +110,8 @@ export class ApplicationRegistration {
     return this;
   }
 
-  controlTemplates(templates: ControlTemplateSet | null): this {
-    this.controlTemplatesOnRegister = templates;
-    this.hasControlTemplatesOnRegister = true;
-    return this;
-  }
-
   register(): Application<Node> {
     const app = createApplication(this.buildPageFn);
-    app.useControlTemplates(this.hasControlTemplatesOnRegister ? this.controlTemplatesOnRegister : null);
     if (this.useSystemThemeOnRegister) {
       app.useSystemTheme();
       return app;
@@ -208,18 +203,6 @@ export class Application<TPage> {
     return activeTheme.value;
   }
 
-  useControlTemplates(templates: ControlTemplateSet | null): ControlTemplateSet | null {
-    return useControlTemplates(templates);
-  }
-
-  clearControlTemplates(): void {
-    clearControlTemplates();
-  }
-
-  getControlTemplates(): ControlTemplateSet | null {
-    return getControlTemplates();
-  }
-
   static mount(root: Node): Node {
     const previousShell = mountedShell;
     if (previousShell !== null) {
@@ -252,6 +235,10 @@ export class Application<TPage> {
     fui_set_application_caption(bytes.length > 0 ? bytes.dataStart : 0, <u32>bytes.length);
   }
 
+  static pageZoom(value: PageZoomMode): void {
+    fui_set_page_zoom_enabled(value === PageZoomMode.Enabled);
+  }
+
   static unmount(): void {
     const previous = mountedShell;
     if (previous === null) {

package/src/core/Bitmap.ts

@@ -147,20 +147,20 @@ export class Bitmap implements Disposable {
    *
    * @param node  A built Text or RichText node sized to match this bitmap's dimensions.
    */
-  render(node: Node, x: f32 = 0.0, y: f32 = 0.0, scale: f32 = 1.0): void {
+  render(node: Node, x: f32 = 0.0, y: f32 = 0.0, scale: f32 = 1.0): bool {
     this.ensureNotDisposed("Bitmap.render");
     const handle = node.builtHandle;
-    if (handle == <u64>0) return;
-    ui.renderNodeToRgba(handle, this.width, this.height, this.pixelPtr(), <u32>this.pixelBytes.length, scale, x, y);
+    if (handle == <u64>0) return false;
+    return ui.renderNodeToRgba(handle, this.width, this.height, this.pixelPtr(), <u32>this.pixelBytes.length, scale, x, y) != 0;
   }
 
-  renderTextLayout(layout: TextLayout, x: f32 = 0.0, y: f32 = 0.0, scale: f32 = 1.0): void {
+  renderTextLayout(layout: TextLayout, x: f32 = 0.0, y: f32 = 0.0, scale: f32 = 1.0): bool {
     this.ensureNotDisposed("Bitmap.renderTextLayout");
     if (!layout.isReady) {
       error("TextLayout", "Bitmap.renderTextLayout() called before the TextLayout was ready; register onReady/onReadyWith and render after the callback.");
-      return;
+      return false;
     }
-    this.render(layout._drawNode(), x, y, scale);
+    return this.render(layout._drawNode(), x, y, scale);
   }
 
   /** Queue text shaping for a built text node before the next CommitFrame. */

package/src/core/DebugApi.ts

@@ -21,6 +21,11 @@ export function __fui_debug_pointer_event(eventType: u32, handle: u64, x: f32, y
     0.0,
     0.0,
     0,
+    true,
+    0.0,
+    0.0,
+    0.0,
+    0.0,
   );
 }
 

package/src/core/EventRouter.ts

@@ -95,6 +95,11 @@ export class EventRouter {
     width: f32 = 0.0,
     height: f32 = 0.0,
     clickCount: i32 = 0,
+    isPrimary: bool = true,
+    tangentialPressure: f32 = 0.0,
+    tiltX: f32 = 0.0,
+    tiltY: f32 = 0.0,
+    twist: f32 = 0.0,
   ): bool {
     showKeyboardFocusForPointerEvent(eventType);
     SelectionHandleAdornerManager.recordPointerEvent(eventType, pointerType);
@@ -145,6 +150,11 @@ export class EventRouter {
           width,
           height,
           clickCount,
+          isPrimary,
+          tangentialPressure,
+          tiltX,
+          tiltY,
+          twist,
         );
         Node._dispatchPointerEventWithArgs(capturedNode, event);
         this.bubblePointerEvent(changetype<Node>(capturedNode).parentNode, event);
@@ -174,6 +184,11 @@ export class EventRouter {
         width,
         height,
         clickCount,
+        isPrimary,
+        tangentialPressure,
+        tiltX,
+        tiltY,
+        twist,
       );
       if (SelectionHandleAdornerManager.routeActiveHandleDragEvent(handleDragEvent)) {
         DragDropManager.handlePointerEvent(pointedNode, eventType, x, y, modifiers);
@@ -218,6 +233,11 @@ export class EventRouter {
       width,
       height,
       clickCount,
+      isPrimary,
+      tangentialPressure,
+      tiltX,
+      tiltY,
+      twist,
     );
     Node._dispatchPointerEventWithArgs(node, event);
     this.bubblePointerEvent(changetype<Node>(node).parentNode, event);
@@ -571,6 +591,37 @@ export class EventRouter {
     }
   }
 
+  static deactivateSubtree(root: Node): void {
+    const captured = this.resolveNode(this.capturedPointerHandle);
+    if (captured !== null && this.belongsToSubtree(changetype<Node>(captured), root)) {
+      this.capturedPointerHandle = <u64>HandleValue.Invalid;
+    }
+    if (this.focusedNode !== null && this.belongsToSubtree(changetype<Node>(this.focusedNode), root)) {
+      this.focusedNode = null;
+      ui.requestFocus(<u64>HandleValue.Invalid);
+    }
+    for (let index = this.hoverStack.length - 1; index >= 0; --index) {
+      if (this.belongsToSubtree(unchecked(this.hoverStack[index]), root)) this.removeHoverAt(index);
+    }
+    this.selectionCursorHandle = <u64>HandleValue.Invalid;
+    DragDropManager.reset();
+    ExternalDropManager.reset();
+    ContextMenuManager.hideActiveMenu();
+    ToolTipManager.clear();
+    SelectionHandleAdornerManager.clear();
+    MobileTextSelectionToolbarManager.clear();
+    this.applyCurrentCursor();
+  }
+
+  private static belongsToSubtree(node: Node, root: Node): bool {
+    let current: Node | null = node;
+    while (current !== null) {
+      if (current === root) return true;
+      current = changetype<Node>(current).parentNode;
+    }
+    return false;
+  }
+
   static reset(): void {
     this.nodes.clear();
     this.generations.clear();

package/src/core/Node.ts

@@ -239,6 +239,11 @@ export class PointerEventArgs {
   readonly width: f32;
   readonly height: f32;
   readonly clickCount: i32;
+  readonly isPrimary: bool;
+  readonly tangentialPressure: f32;
+  readonly tiltX: f32;
+  readonly tiltY: f32;
+  readonly twist: f32;
   x: f32;
   y: f32;
   handled: bool = false;
@@ -256,6 +261,11 @@ export class PointerEventArgs {
     width: f32 = 0.0,
     height: f32 = 0.0,
     clickCount: i32 = 0,
+    isPrimary: bool = true,
+    tangentialPressure: f32 = 0.0,
+    tiltX: f32 = 0.0,
+    tiltY: f32 = 0.0,
+    twist: f32 = 0.0,
   ) {
     this.eventType = eventType;
     this.sceneX = sceneX;
@@ -271,6 +281,11 @@ export class PointerEventArgs {
     this.width = width;
     this.height = height;
     this.clickCount = clickCount;
+    this.isPrimary = isPrimary;
+    this.tangentialPressure = tangentialPressure;
+    this.tiltX = tiltX;
+    this.tiltY = tiltY;
+    this.twist = twist;
   }
 }
 

package/src/core/RetainedView.ts

@@ -0,0 +1,72 @@
+import { Disposable, disposeAll } from "./Disposable";
+import { EventRouter } from "./EventRouter";
+import { Node } from "./Node";
+
+export type RetainedViewLifecycleHandler = (view: RetainedView) => void;
+
+export class RetainedView implements Disposable {
+  private readonly retainedResources: Array<Disposable> = new Array<Disposable>();
+  private readonly activationHandlers: Array<RetainedViewLifecycleHandler> = new Array<RetainedViewLifecycleHandler>();
+  private readonly deactivationHandlers: Array<RetainedViewLifecycleHandler> = new Array<RetainedViewLifecycleHandler>();
+  private readonly disposalHandlers: Array<RetainedViewLifecycleHandler> = new Array<RetainedViewLifecycleHandler>();
+  private activeValue: bool = false;
+  private disposedValue: bool = false;
+
+  constructor(readonly root: Node) {}
+
+  retain(resource: Disposable): this {
+    if (this.disposedValue) {
+      resource.dispose();
+      return this;
+    }
+    this.retainedResources.push(resource);
+    return this;
+  }
+
+  onActivate(handler: RetainedViewLifecycleHandler): this {
+    this.activationHandlers.push(handler);
+    return this;
+  }
+
+  onDeactivate(handler: RetainedViewLifecycleHandler): this {
+    this.deactivationHandlers.push(handler);
+    return this;
+  }
+
+  onDispose(handler: RetainedViewLifecycleHandler): this {
+    this.disposalHandlers.push(handler);
+    return this;
+  }
+
+  get isActive(): bool { return this.activeValue; }
+  get isDisposed(): bool { return this.disposedValue; }
+
+  activate(): void {
+    if (this.disposedValue || this.activeValue) return;
+    this.activeValue = true;
+    for (let i = 0; i < this.activationHandlers.length; ++i) unchecked(this.activationHandlers[i])(this);
+  }
+
+  deactivate(): void {
+    if (this.disposedValue || !this.activeValue) return;
+    EventRouter.deactivateSubtree(this.root);
+    this.activeValue = false;
+    for (let i = 0; i < this.deactivationHandlers.length; ++i) unchecked(this.deactivationHandlers[i])(this);
+  }
+
+  dispose(): void {
+    if (this.disposedValue) return;
+    this.deactivate();
+    this.disposedValue = true;
+    for (let i = 0; i < this.disposalHandlers.length; ++i) unchecked(this.disposalHandlers[i])(this);
+    disposeAll(this.retainedResources);
+    this.root.dispose();
+    this.activationHandlers.length = 0;
+    this.deactivationHandlers.length = 0;
+    this.disposalHandlers.length = 0;
+  }
+}
+
+export function retainedView(root: Node): RetainedView {
+  return new RetainedView(root);
+}

package/src/core/event_exports.ts

@@ -28,7 +28,7 @@ import { handleRouteChanged } from "./Navigation";
 import { handleSystemAccentColorChanged, handleSystemDarkModeChanged } from "./Theme";
 import { handleTimer } from "./Timers";
 import { handleWorkerComplete, handleWorkerError, handleWorkerProgress } from "./Worker";
-import { tickAnimations } from "./Animation";
+import { getAnimationManager, tickAnimations } from "./Animation";
 import { ExternalDragEventType } from "./ExternalDropManager";
 import {
   describeHandle,
@@ -74,6 +74,11 @@ export function __fui_on_pointer_event_with_metadata(
   width: f32,
   height: f32,
   clickCount: i32,
+  isPrimary: bool,
+  tangentialPressure: f32,
+  tiltX: f32,
+  tiltY: f32,
+  twist: f32,
 ): bool {
   log(
     "Event",
@@ -106,6 +111,11 @@ export function __fui_on_pointer_event_with_metadata(
     width,
     height,
     clickCount,
+    isPrimary,
+    tangentialPressure,
+    tiltX,
+    tiltY,
+    twist,
   );
 }
 
@@ -191,6 +201,10 @@ export function __fui_on_frame(timestampMs: f64): void {
   tickAnimations(timestampMs);
 }
 
+export function __fui_needs_animation_frame(): bool {
+  return getAnimationManager().hasActiveAnimations();
+}
+
 export function __fui_on_timer(timerId: u32): void {
   log("Event", "timer fired id=" + timerId.toString());
   handleTimer(timerId);

package/src/core/generated/HostAbi.ts

@@ -18,6 +18,9 @@ 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_page_zoom_enabled")
+export declare function fui_set_page_zoom_enabled(enabled: bool): void;
+
 @external("fui_host", "fui_set_pointer_capture")
 export declare function fui_set_pointer_capture(handle: u64): void;
 

package/src/core/generated/UiEnums.ts

@@ -164,6 +164,9 @@ export enum SemanticRole {
   Switch = 14,
   Slider = 15,
   ComboBox = 16,
+  TabList = 17,
+  Tab = 18,
+  TabPanel = 19,
 }
 
 export enum PlatformFamily {

package/src/controls/ControlTemplateSet.ts

@@ -1,37 +0,0 @@
-import { ButtonTemplate } from "./internal/ButtonPresenter";
-import { CheckboxIndicatorTemplate } from "./internal/CheckboxIndicatorPresenter";
-import { RadioIndicatorTemplate } from "./internal/RadioIndicatorPresenter";
-import { SwitchIndicatorTemplate } from "./internal/SwitchIndicatorPresenter";
-import { SliderTemplate } from "./internal/SliderPresenter";
-import { DropdownFieldTemplate } from "./internal/DropdownFieldPresenter";
-import { DropdownChevronTemplate } from "./internal/DropdownChevronPresenter";
-import { DropdownOptionRowTemplate } from "./internal/DropdownOptionRowPresenter";
-import { TextInputTemplate } from "./internal/TextInputPresenter";
-
-export class ControlTemplateSet {
-  button: ButtonTemplate | null = null;
-  checkboxIndicator: CheckboxIndicatorTemplate | null = null;
-  radioIndicator: RadioIndicatorTemplate | null = null;
-  switchIndicator: SwitchIndicatorTemplate | null = null;
-  slider: SliderTemplate | null = null;
-  dropdownField: DropdownFieldTemplate | null = null;
-  dropdownChevron: DropdownChevronTemplate | null = null;
-  dropdownOptionRow: DropdownOptionRowTemplate | null = null;
-  textInput: TextInputTemplate | null = null;
-  textArea: TextInputTemplate | null = null;
-}
-
-let activeControlTemplatesValue: ControlTemplateSet | null = null;
-
-export function getControlTemplates(): ControlTemplateSet | null {
-  return activeControlTemplatesValue;
-}
-
-export function useControlTemplates(templates: ControlTemplateSet | null): ControlTemplateSet | null {
-  activeControlTemplatesValue = templates;
-  return activeControlTemplatesValue;
-}
-
-export function clearControlTemplates(): void {
-  activeControlTemplatesValue = null;
-}