@ccheever/exact-renderer 0.1.0

package/src/host-ops.ts

@@ -0,0 +1,3167 @@
+/**
+ * Host Operations - Shared Infrastructure
+ *
+ * This module provides framework-agnostic operations for the Exact renderer.
+ * It is used by React, Solid, and Vue adapters to:
+ * - Encode protocol messages to native
+ * - Manage event handler registry
+ * - Create and manipulate nodes
+ *
+ * Design Principles:
+ * - Framework-agnostic: no React/Solid/Vue dependencies
+ * - Single source of truth for protocol encoding
+ * - Shared event handler registry across all frameworks
+ */
+
+import type { ElementNode, TextNode, RootNode } from './nodes/node.js';
+import type { ParagraphSpec } from '@exact/text';
+import {
+  EventType,
+  NodeType,
+} from '@exact/core/protocol/opcodes';
+import {
+  clearFocusedTarget,
+  setFocusedTarget,
+} from '@exact/core/agent/interaction-state';
+import { recordInboundProtocolEvent, resetProtocolTapForTests } from '@exact/core/agent';
+import {
+  detectTextDirection,
+} from '@exact/core/i18n/helpers';
+import {
+  getExactAccessibilitySnapshot,
+  subscribeExactAccessibilityChanges,
+} from '@exact/core/runtime/accessibility-state';
+import {
+  getExactLocaleSnapshot,
+  subscribeExactLocaleChanges,
+} from '@exact/core/runtime/locale-state';
+import type {
+  CanonicalTagType,
+  FullStyle,
+  CanonicalStyle,
+  CanonicalProps,
+  CanonicalTransitionMap,
+  FlexDirection,
+  Direction,
+  ResolvedDirection,
+  SafeAreaPropagationState,
+  WritingMode,
+} from './types.js';
+
+import {
+  DirtyFlags,
+  NodeKind,
+  clearDirtyFlags,
+  createElementNode,
+  createTextNode,
+  createRootNode,
+  hasDirtyFlag,
+  appendChild as nodeAppendChild,
+  insertBefore as nodeInsertBefore,
+  removeChild as nodeRemoveChild,
+  clearChildren as nodeClearChildren,
+} from './nodes/node.js';
+
+import { getTagConfig, defaultTagConfig, type TagConfig } from './tags/index.js';
+import {
+  registerNativeViewEventHandler,
+  unregisterNativeViewEventHandler,
+} from './native-view-events.js';
+import {
+  resolveClassNameStyle,
+  type ClassNameResolutionContext,
+} from './classname-runtime.js';
+import { normalizeStyle, normalizeTransition, stylesEqual, transitionsEqual } from './style/index.js';
+import { normalizeProps, propsEqual } from './props/index.js';
+import { createRootSafeAreaPropagation, resolveSafeAreaForElement } from './safe-area.js';
+import {
+  clearFocusedInput,
+  noteFocusedInput,
+  resetKeyboardAvoidanceState,
+  syncKeyboardAvoidanceAfterCommit,
+} from './keyboard-avoidance.js';
+import {
+  type ProtocolEncoder,
+  createProtocolEncoder,
+  setStyle,
+  setTransform,
+  setOpacity,
+  setBackgroundColor,
+  setTransition,
+  setLang,
+  setTextContent,
+  dispatchProtocol,
+  getScreenDimensions,
+  encodeCreateElement,
+  encodeCreateText,
+  encodeProps,
+  encodeEvents,
+  encodeChildren,
+  encodeDestroy,
+} from './protocol/index.js';
+import { notifyCommit, registerRoot, unregisterRoot } from './inspector-runtime.js';
+import { lowerTextPropsToParagraphSpec } from './text/paragraph-lowering.js';
+
+// =============================================================================
+// Development Mode Flag
+// =============================================================================
+
+/**
+ * Development mode flag - gate verbose logging.
+ * In production builds, bundlers should replace this with false.
+ */
+const __DEV__ = process.env.NODE_ENV !== 'production';
+const warnedAutoDirectionTags = new Set<string>();
+const liveRoots = new Map<number, RootNode>();
+const rootOwners = new Map<number, string>();
+const committedRootViewportSizes = new Map<number, { width: number; height: number }>();
+const pendingCommitStateByRoot = new Map<number, PendingCommitState>();
+let accessibilityChangeUnsubscribe: (() => void) | null = null;
+let localeChangeUnsubscribe: (() => void) | null = null;
+
+interface InheritedElementState {
+  rootId: number;
+  direction: ResolvedDirection;
+  writingMode: WritingMode;
+  lang: string;
+  safeArea: SafeAreaPropagationState;
+}
+
+interface ResolvedElementState {
+  props: CanonicalProps;
+  paragraphSpec: ParagraphSpec | null;
+  paragraphKey: string | null;
+  style: CanonicalStyle;
+  transitions: CanonicalTransitionMap;
+  resolvedDirection: ResolvedDirection;
+  resolvedWritingMode: WritingMode;
+  resolvedLang: string;
+  safeAreaState: ElementNode['safeAreaState'];
+  propagatedSafeArea: ElementNode['propagatedSafeArea'];
+}
+
+interface PendingCommitState {
+  layoutDirty: boolean;
+  warningAnalysisDirty: boolean;
+  dirtyChildren: Set<RootNode | ElementNode>;
+  changedViews: Set<number>;
+}
+
+const SINGLE_LINE_INPUT_MIN_HEIGHT = 36;
+const TOGGLE_NATIVE_VIEW_MIN_WIDTH = 46;
+const TOGGLE_NATIVE_VIEW_MIN_HEIGHT = 28;
+
+function applyPropDrivenStyleOverrides(
+  tagType: CanonicalTagType,
+  style: CanonicalStyle,
+  props: CanonicalProps,
+  originalProps: Props,
+): CanonicalStyle {
+  let next = style;
+
+  if ((tagType === 'image' || tagType === 'svg') && props.resizeMode !== undefined) {
+    next = {
+      ...next,
+      resizeMode: props.resizeMode,
+    };
+  }
+
+  if (tagType === 'input' && props.multiline === true) {
+    const lifted = normalizeStyle(
+      { numberOfLines: originalProps.numberOfLines ?? 2 } as FullStyle,
+      'row',
+    );
+    if (lifted.numberOfLines !== undefined) {
+      next = {
+        ...next,
+        numberOfLines: lifted.numberOfLines,
+      };
+    }
+  }
+
+  if (
+    tagType === 'input' &&
+    props.multiline !== true &&
+    next.height === undefined &&
+    next.minHeight === undefined
+  ) {
+    next = {
+      ...next,
+      minHeight: { type: 'points', value: SINGLE_LINE_INPUT_MIN_HEIGHT },
+    };
+  }
+
+  if (tagType === 'nativeView' && props.nativeViewModuleName === 'exact.toggle') {
+    if (next.width === undefined && next.minWidth === undefined) {
+      next = {
+        ...next,
+        minWidth: { type: 'points', value: TOGGLE_NATIVE_VIEW_MIN_WIDTH },
+      };
+    }
+    if (next.height === undefined && next.minHeight === undefined) {
+      next = {
+        ...next,
+        minHeight: { type: 'points', value: TOGGLE_NATIVE_VIEW_MIN_HEIGHT },
+      };
+    }
+  }
+
+  return next;
+}
+
+function applyTextLayoutPropStyleOverrides(
+  tagType: CanonicalTagType,
+  style: CanonicalStyle,
+  props: Props,
+): CanonicalStyle {
+  if (tagType !== 'text') {
+    return style;
+  }
+
+  let next = style;
+  if (props.numberOfLines !== undefined) {
+    const lifted = normalizeStyle(
+      { numberOfLines: props.numberOfLines } as FullStyle,
+      'row',
+    );
+    if (lifted.numberOfLines !== undefined) {
+      next = { ...next, numberOfLines: lifted.numberOfLines };
+    }
+  }
+  if (props.ellipsizeMode !== undefined) {
+    const lifted = normalizeStyle(
+      { ellipsizeMode: props.ellipsizeMode } as FullStyle,
+      'row',
+    );
+    if (lifted.ellipsizeMode !== undefined) {
+      next = { ...next, ellipsizeMode: lifted.ellipsizeMode };
+    }
+  }
+  return next;
+}
+
+function applyAccessibilityDrivenStyleOverrides(
+  style: CanonicalStyle,
+  props: CanonicalProps,
+): CanonicalStyle {
+  if (style.fontSize === undefined || props.allowFontScaling === false) {
+    return style;
+  }
+
+  const accessibility = getExactAccessibilitySnapshot();
+  const rawScale = accessibility.fontScale > 0 ? accessibility.fontScale : 1;
+  const maxScale =
+    typeof props.maxFontSizeMultiplier === 'number' &&
+    Number.isFinite(props.maxFontSizeMultiplier) &&
+    props.maxFontSizeMultiplier > 0
+      ? props.maxFontSizeMultiplier
+      : Number.POSITIVE_INFINITY;
+  const fontScale = Math.min(rawScale, maxScale);
+  const minimumFontSize =
+    typeof props.minimumFontSize === 'number' &&
+    Number.isFinite(props.minimumFontSize) &&
+    props.minimumFontSize > 0
+      ? props.minimumFontSize
+      : undefined;
+  const scaledFontSize =
+    minimumFontSize == null
+      ? style.fontSize * fontScale
+      : Math.max(style.fontSize * fontScale, minimumFontSize);
+
+  return {
+    ...style,
+    // Accessibility preferences affect layout, so text scaling is resolved
+    // before protocol encoding and Taffy measurement rather than as a paint-only
+    // native tweak.
+    fontSize: scaledFontSize,
+    lineHeight:
+      typeof style.lineHeight === 'number' && Number.isFinite(style.lineHeight) && style.lineHeight > 0
+        ? style.lineHeight * fontScale
+        : style.lineHeight,
+  };
+}
+
+function isPercentMinHeight(value: CanonicalStyle['minHeight']): boolean {
+  return (
+    typeof value === 'object' &&
+      value !== null &&
+      'type' in value &&
+      value.type === 'percent' &&
+      value.value === 100
+  );
+}
+
+function applyRootScrollViewportDefaults(
+  instance: ElementNode,
+  style: CanonicalStyle,
+): CanonicalStyle {
+  if (instance.tagType !== 'scroll' || instance.parent?.kind !== NodeKind.Root) {
+    return style;
+  }
+
+  if (style.height !== undefined) {
+    return style;
+  }
+
+  const next: CanonicalStyle = { ...style };
+
+  // Percent min-height makes a root scroll grow with its content instead of
+  // staying viewport-bound; flex children need minHeight 0 to shrink and scroll.
+  if (isPercentMinHeight(next.minHeight)) {
+    delete next.minHeight;
+  }
+
+  if (next.flexGrow === undefined) {
+    next.flexGrow = 1;
+    next.flexShrink = 1;
+    next.flexBasis = { type: 'points', value: 0 };
+  }
+
+  return next;
+}
+
+function buildDefaultCanonicalStyle(
+  defaultFlexDirection: FlexDirection,
+  isRNStyle = false,
+): CanonicalStyle {
+  const style: CanonicalStyle = defaultFlexDirection === 'row'
+    ? {}
+    : { flexDirection: defaultFlexDirection };
+
+  if (isRNStyle) {
+    style.flexShrink = 0;
+  }
+
+  return style;
+}
+
+function safeAreaInsetsEqual(
+  left: SafeAreaPropagationState['regions']['container'],
+  right: SafeAreaPropagationState['regions']['container'],
+): boolean {
+  return (
+    left.top === right.top &&
+    left.right === right.right &&
+    left.bottom === right.bottom &&
+    left.left === right.left
+  );
+}
+
+function keyboardStateEqual(
+  left: SafeAreaPropagationState['keyboard'],
+  right: SafeAreaPropagationState['keyboard'],
+): boolean {
+  return (
+    left.visible === right.visible &&
+    left.occlusion.x === right.occlusion.x &&
+    left.occlusion.y === right.occlusion.y &&
+    left.occlusion.width === right.occlusion.width &&
+    left.occlusion.height === right.occlusion.height &&
+    left.progress === right.progress &&
+    left.animating === right.animating &&
+    left.mode === right.mode &&
+    left.animationCurve === right.animationCurve &&
+    left.animationDurationMs === right.animationDurationMs &&
+    left.interactive === right.interactive &&
+    left.accessoryHeight === right.accessoryHeight &&
+    left.source === right.source
+  );
+}
+
+function safeAreaPropagationEqual(
+  left: SafeAreaPropagationState | null,
+  right: SafeAreaPropagationState | null,
+): boolean {
+  if (left === right) {
+    return true;
+  }
+  if (!left || !right) {
+    return false;
+  }
+  return (
+    left.rootId === right.rootId &&
+    safeAreaInsetsEqual(left.regions.container, right.regions.container) &&
+    safeAreaInsetsEqual(left.regions.displayCutout, right.regions.displayCutout) &&
+    safeAreaInsetsEqual(left.regions.gestures, right.regions.gestures) &&
+    keyboardStateEqual(left.keyboard, right.keyboard)
+  );
+}
+
+const LAYOUT_AFFECTING_STYLE_KEYS =
+  '|width|height|minWidth|minHeight|maxWidth|maxHeight|paddingTop|paddingRight|paddingBottom|paddingLeft|marginTop|marginRight|marginBottom|marginLeft|flexDirection|flexWrap|justifyContent|alignItems|alignSelf|flexGrow|flexShrink|flexBasis|rowGap|columnGap|positionType|top|right|bottom|left|display|overflow|aspectRatio|direction|writingMode|fontFamily|fontSize|fontWeight|fontStyle|fontVariantNumeric|lineHeight|letterSpacing|numberOfLines|ellipsizeMode|';
+
+const TRANSPARENT_COLOR: NonNullable<CanonicalStyle['backgroundColor']> = Object.freeze({
+  r: 0,
+  g: 0,
+  b: 0,
+  a: 0,
+});
+
+function canonicalStyleValuesEqual(left: unknown, right: unknown): boolean {
+  if (left === right) {
+    return true;
+  }
+
+  if (
+    typeof left === 'object' &&
+    left !== null &&
+    typeof right === 'object' &&
+    right !== null
+  ) {
+    const leftRecord = left as Record<string, unknown>;
+    const rightRecord = right as Record<string, unknown>;
+
+    if ('type' in leftRecord || 'type' in rightRecord) {
+      return leftRecord.type === rightRecord.type && leftRecord.value === rightRecord.value;
+    }
+
+    if ('r' in leftRecord || 'r' in rightRecord) {
+      return (
+        leftRecord.r === rightRecord.r &&
+        leftRecord.g === rightRecord.g &&
+        leftRecord.b === rightRecord.b &&
+        leftRecord.a === rightRecord.a
+      );
+    }
+  }
+
+  return false;
+}
+
+function collectChangedStyleKeys(
+  previousStyle: CanonicalStyle,
+  nextStyle: CanonicalStyle,
+): Array<keyof CanonicalStyle> {
+  if (previousStyle === nextStyle) {
+    return [];
+  }
+
+  const changed: Array<keyof CanonicalStyle> = [];
+
+  for (const key of Object.keys(previousStyle) as Array<keyof CanonicalStyle>) {
+    if (!canonicalStyleValuesEqual(previousStyle[key], nextStyle[key])) {
+      changed.push(key);
+    }
+  }
+
+  for (const key of Object.keys(nextStyle) as Array<keyof CanonicalStyle>) {
+    if (
+      !(key in previousStyle) &&
+      !canonicalStyleValuesEqual(previousStyle[key], nextStyle[key])
+    ) {
+      changed.push(key);
+    }
+  }
+
+  return changed;
+}
+
+function styleKeyListIncludes(list: string, key: keyof CanonicalStyle): boolean {
+  return list.includes(`|${key}|`);
+}
+
+function isTransformPatchStyleKey(key: keyof CanonicalStyle): boolean {
+  return (
+    key === 'transformX' ||
+    key === 'transformY' ||
+    key === 'transformScale' ||
+    key === 'transformRotate'
+  );
+}
+
+function isPaintPatchStyleKey(key: keyof CanonicalStyle): boolean {
+  return key === 'backgroundColor' || key === 'opacity';
+}
+
+function styleKeysAffectLayout(changedKeys: readonly (keyof CanonicalStyle)[]): boolean {
+  for (const key of changedKeys) {
+    if (styleKeyListIncludes(LAYOUT_AFFECTING_STYLE_KEYS, key)) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+function encodeStyleUpdate(
+  encoder: ProtocolEncoder,
+  nodeId: number,
+  changedKeys: readonly (keyof CanonicalStyle)[],
+  nextStyle: CanonicalStyle,
+): void {
+  const canPatch = changedKeys.every(
+    (key) => isTransformPatchStyleKey(key) || isPaintPatchStyleKey(key),
+  );
+
+  if (!canPatch) {
+    setStyle(encoder, nodeId, nextStyle);
+    return;
+  }
+
+  const transformChanged = changedKeys.some(isTransformPatchStyleKey);
+  if (transformChanged) {
+    setTransform(
+      encoder,
+      nodeId,
+      nextStyle.transformX ?? 0,
+      nextStyle.transformY ?? 0,
+      nextStyle.transformScale ?? 1,
+      nextStyle.transformRotate ?? 0,
+    );
+  }
+
+  if (changedKeys.includes('opacity')) {
+    setOpacity(encoder, nodeId, nextStyle.opacity ?? 1);
+  }
+
+  if (changedKeys.includes('backgroundColor')) {
+    setBackgroundColor(encoder, nodeId, nextStyle.backgroundColor ?? TRANSPARENT_COLOR);
+  }
+}
+
+/**
+ * Merge native defaults, className styles, and explicit inline style into a
+ * single canonical style object.
+ *
+ * The ordering matters:
+ * - renderer defaults are the lowest-priority baseline
+ * - `className` should be able to override those defaults
+ * - inline `style` must still beat `className`
+ *
+ * To preserve that ordering, inline styles are normalized without injecting the
+ * renderer defaults. We add the defaults as a separate first layer instead.
+ */
+export function resolveCanonicalStyleFromProps(
+  props: Record<string, unknown>,
+  defaultFlexDirection: FlexDirection,
+  classNameContext?: ClassNameResolutionContext,
+  isRNStyle = false,
+): CanonicalStyle {
+  return {
+    ...buildDefaultCanonicalStyle(defaultFlexDirection, isRNStyle),
+    ...resolveClassNameStyle(props.className, classNameContext ?? { props }),
+    ...normalizeStyle(props.style as FullStyle | undefined, 'row'),
+  };
+}
+
+// =============================================================================
+// Protocol Encoder Instances (Multi-Root)
+// =============================================================================
+
+/**
+ * Per-root protocol encoders.
+ * Each root gets its own encoder that targets a specific root_id.
+ */
+const encoders = new Map<number, ProtocolEncoder>();
+
+/**
+ * Claim a root ID for a public adapter surface.
+ *
+ * Multiple roots can be owned by the same adapter name, but a single root ID
+ * cannot be shared across adapters or handles at the same time.
+ */
+export function claimRoot(rootId: number, owner: string): void {
+  const existingOwner = rootOwners.get(rootId);
+  if (existingOwner && existingOwner !== owner) {
+    throw new Error(
+      `Root ${rootId} is already in use by ${existingOwner}; ${owner} cannot claim it.`,
+    );
+  }
+
+  rootOwners.set(rootId, owner);
+}
+
+/**
+ * Release a previously claimed root ID.
+ *
+ * The owner check is intentionally strict so one adapter cannot accidentally
+ * release another adapter's root claim during teardown.
+ */
+export function releaseRoot(rootId: number, owner: string): void {
+  const existingOwner = rootOwners.get(rootId);
+  if (!existingOwner) {
+    return;
+  }
+
+  if (existingOwner !== owner) {
+    throw new Error(
+      `Root ${rootId} is owned by ${existingOwner}; ${owner} cannot release it.`,
+    );
+  }
+
+  rootOwners.delete(rootId);
+}
+
+/**
+ * Read the current root owner for diagnostics and tests.
+ */
+export function getRootOwner(rootId: number): string | undefined {
+  return rootOwners.get(rootId);
+}
+
+/**
+ * Get or create the encoder for a given root ID.
+ */
+export function getEncoderForRoot(rootId: number): ProtocolEncoder {
+  let enc = encoders.get(rootId);
+  if (!enc) {
+    enc = createProtocolEncoder(1024 * 1024, rootId);
+    encoders.set(rootId, enc);
+  }
+  return enc;
+}
+
+/**
+ * Get the default encoder (root 0) for backwards compatibility.
+ */
+export function getEncoder(): ProtocolEncoder {
+  return getEncoderForRoot(0);
+}
+
+/**
+ * Get the shared encoder instance.
+ * @internal For testing only.
+ * @deprecated Use getEncoder() instead
+ */
+export function _getEncoder(): ProtocolEncoder {
+  return getEncoderForRoot(0);
+}
+
+/**
+ * Get the rootId for a node by walking up to the root.
+ * Falls back to 0 if no root is found.
+ */
+function getRootIdForNode(node: ElementNode | TextNode | RootNode): number {
+  let current: ElementNode | TextNode | RootNode | null = node;
+  while (current) {
+    if (current.kind === NodeKind.Root) {
+      return (current as RootNode).rootId;
+    }
+    current = current.parent as ElementNode | TextNode | RootNode | null;
+  }
+  return 0;
+}
+
+/**
+ * Walk up to the root container for a node.
+ *
+ * The DOM shim and adapter tests need the actual root object, not just the
+ * numeric root ID, so host-ops exposes the full lookup helper as part of the
+ * shared adapter contract.
+ */
+export function getRootContainerForNode(
+  node: ElementNode | TextNode | RootNode | null | undefined,
+): RootNode | null {
+  let current = node;
+  while (current) {
+    if (current.kind === NodeKind.Root) {
+      return current;
+    }
+    current = current.parent as ElementNode | TextNode | RootNode | null;
+  }
+  return null;
+}
+
+/**
+ * Get the encoder for a node based on its root.
+ */
+function getEncoderForNode(node: ElementNode | TextNode | RootNode): ProtocolEncoder {
+  return getEncoderForRoot(getRootIdForNode(node));
+}
+
+function getPendingCommitState(rootId: number): PendingCommitState {
+  let state = pendingCommitStateByRoot.get(rootId);
+  if (!state) {
+    state = {
+      layoutDirty: false,
+      warningAnalysisDirty: false,
+      dirtyChildren: new Set<RootNode | ElementNode>(),
+      changedViews: new Set<number>(),
+    };
+    pendingCommitStateByRoot.set(rootId, state);
+  }
+  return state;
+}
+
+function markLayoutDirtyForRoot(rootId: number): void {
+  getPendingCommitState(rootId).layoutDirty = true;
+}
+
+function markLayoutDirtyForNode(node: ElementNode | TextNode | RootNode): void {
+  markLayoutDirtyForRoot(getRootIdForNode(node));
+}
+
+function markViewChanged(node: ElementNode | TextNode | RootNode): void {
+  getPendingCommitState(getRootIdForNode(node)).changedViews.add(node.id);
+}
+
+function markChildrenDirty(parent: RootNode | ElementNode): void {
+  const state = getPendingCommitState(getRootIdForNode(parent));
+  state.dirtyChildren.add(parent);
+  state.layoutDirty = true;
+  state.warningAnalysisDirty = true;
+  state.changedViews.add(parent.id);
+}
+
+function flushDirtyChildren(
+  encoder: ProtocolEncoder,
+  state: PendingCommitState | undefined,
+): void {
+  if (!state || state.dirtyChildren.size === 0) {
+    return;
+  }
+
+  for (const node of state.dirtyChildren) {
+    if (node.kind !== NodeKind.Root && node.parent === null) {
+      continue;
+    }
+    encodeChildren(encoder, node);
+    node.dirtyFlags = (node.dirtyFlags & ~DirtyFlags.Children) as DirtyFlags;
+  }
+
+  state.dirtyChildren.clear();
+}
+
+function ensureLocaleRootSync(): void {
+  if (localeChangeUnsubscribe) {
+    return;
+  }
+
+  localeChangeUnsubscribe = subscribeExactLocaleChanges(syncLiveRootInheritedState);
+}
+
+function ensureAccessibilityRootSync(): void {
+  if (accessibilityChangeUnsubscribe) {
+    return;
+  }
+
+  accessibilityChangeUnsubscribe = subscribeExactAccessibilityChanges(syncLiveRootInheritedState);
+}
+
+function maybeDisposeLocaleRootSync(): void {
+  if (liveRoots.size > 0 || !localeChangeUnsubscribe) {
+    return;
+  }
+
+  localeChangeUnsubscribe();
+  localeChangeUnsubscribe = null;
+}
+
+function maybeDisposeAccessibilityRootSync(): void {
+  if (liveRoots.size > 0 || !accessibilityChangeUnsubscribe) {
+    return;
+  }
+
+  accessibilityChangeUnsubscribe();
+  accessibilityChangeUnsubscribe = null;
+}
+
+// =============================================================================
+// Event Handler Registry
+// =============================================================================
+
+/**
+ * Global event handler registry.
+ * Maps handler IDs to handler functions.
+ * Shared across all frameworks (React, Solid, Vue).
+ */
+interface HostEventRegistry {
+  handlers: Map<number, Function>;
+  nextHandlerId: number;
+}
+
+const HOST_EVENT_REGISTRY_KEY = '__exactHostEventRegistry';
+
+function getHostEventRegistry(): HostEventRegistry {
+  const scope = globalThis as Record<string, unknown>;
+  const existing = scope[HOST_EVENT_REGISTRY_KEY];
+  if (
+    existing &&
+    typeof existing === 'object' &&
+    (existing as Partial<HostEventRegistry>).handlers instanceof Map &&
+    typeof (existing as Partial<HostEventRegistry>).nextHandlerId === 'number'
+  ) {
+    return existing as HostEventRegistry;
+  }
+
+  const registry: HostEventRegistry = {
+    handlers: new Map<number, Function>(),
+    nextHandlerId: 1,
+  };
+  scope[HOST_EVENT_REGISTRY_KEY] = registry;
+  return registry;
+}
+
+const eventRegistry = getHostEventRegistry();
+const eventHandlers = eventRegistry.handlers;
+type NativeEventBatcher = (callback: () => void) => void;
+let nativeEventBatcher: NativeEventBatcher | null = null;
+
+export function setNativeEventBatcher(batcher: NativeEventBatcher | null): void {
+  nativeEventBatcher = batcher;
+}
+
+
+/**
+ * Register an event handler and return its ID.
+ */
+export function registerHandler(fn: Function): number {
+  const id = eventRegistry.nextHandlerId++;
+  eventHandlers.set(id, fn);
+  return id;
+}
+
+/**
+ * Unregister an event handler by ID and notify native.
+ *
+ * @param id - The handler ID to unregister
+ * @param nodeId - The node ID to unbind from (optional, for native unbinding)
+ * @param eventType - The event type to unbind (optional, for native unbinding)
+ * @param rootId - The owning root for the node/event pair. Multi-root adapters
+ *   must supply the real root so unbind ops land on the correct encoder.
+ */
+export function unregisterHandler(
+  id: number,
+  nodeId?: number,
+  eventType?: EventType,
+  rootId: number = 0,
+): void {
+  eventHandlers.delete(id);
+
+  // Send unbind to native if we have the node and event info
+  if (nodeId !== undefined && eventType !== undefined) {
+    getEncoderForRoot(rootId).unbindEvent(nodeId, eventType);
+  }
+}
+
+/**
+ * Get an event handler by ID.
+ */
+export function getHandler(id: number): Function | undefined {
+  return eventHandlers.get(id);
+}
+
+/**
+ * Update an existing handler's function without changing its ID.
+ * Used when a framework updates a callback prop.
+ */
+export function updateHandler(id: number, fn: Function): void {
+  if (eventHandlers.has(id)) {
+    eventHandlers.set(id, fn);
+  }
+}
+
+/**
+ * Clear all registered handlers.
+ * @internal For testing only.
+ */
+export function _clearHandlers(): void {
+  eventHandlers.clear();
+  eventRegistry.nextHandlerId = 1;
+}
+
+// =============================================================================
+// Event Dispatch (called from native)
+// =============================================================================
+
+/**
+ * Handle an event dispatched from native.
+ * Looks up the handler and calls it with the payload.
+ * Framework reactivity and the renderer commit lifecycle handle any
+ * subsequent updates.
+ */
+function handleNativeEvent(handlerId: number, payload: unknown): void {
+  const handler = getHandler(handlerId);
+  if (!handler) {
+    return;
+  }
+
+  if (process.env.NODE_ENV !== 'production') {
+    recordInboundProtocolEvent(handlerId, payload);
+  }
+  invokeHandler(handlerId, handler, payload);
+}
+
+function invokeHandler(handlerId: number, handler: Function, payload: unknown): void {
+  const invoke = (): void => {
+    try {
+      handler(payload);
+    } catch (error) {
+      console.error(`[HostOps] Error in event handler ${handlerId}:`, error);
+    }
+  };
+
+  if (nativeEventBatcher) {
+    try {
+      nativeEventBatcher(invoke);
+    } catch (error) {
+      console.error(`[HostOps] Error in native event batcher for handler ${handlerId}:`, error);
+    }
+    return;
+  }
+
+  invoke();
+}
+
+export function dispatchSyntheticEvent(
+  instance: ElementNode,
+  eventType: EventType,
+  payload: unknown,
+): boolean {
+  const binding = instance.events.get(eventType);
+  if (!binding) {
+    return false;
+  }
+
+  invokeHandler(binding.handlerId, binding.handler, payload);
+  return true;
+}
+
+// Install the global event handler (shared across all frameworks)
+// Always overwrite to ensure we have the correct handler
+(globalThis as Record<string, unknown>).__exactDispatchEvent = handleNativeEvent;
+
+// =============================================================================
+// Node Operations
+// =============================================================================
+
+// Re-export node operations for convenience
+export {
+  NodeKind,
+  createElementNode,
+  createTextNode,
+  createRootNode,
+  nodeAppendChild,
+  nodeInsertBefore,
+  nodeRemoveChild,
+  nodeClearChildren,
+};
+
+// Re-export types
+export type { ElementNode, TextNode, RootNode };
+
+// =============================================================================
+// Tag Configuration
+// =============================================================================
+
+export { getTagConfig, defaultTagConfig };
+export type { TagConfig };
+
+// =============================================================================
+// Style and Props Utilities
+// =============================================================================
+
+export { normalizeStyle, normalizeTransition, stylesEqual, transitionsEqual };
+export { normalizeProps, propsEqual };
+
+// =============================================================================
+// Protocol Encoding
+// =============================================================================
+
+export {
+  encodeCreateElement,
+  encodeCreateText,
+  encodeProps,
+  encodeEvents,
+  encodeChildren,
+  encodeDestroy,
+};
+
+export { EventType, NodeType };
+
+// =============================================================================
+// Event Processing Helper
+// =============================================================================
+
+type Props = Record<string, unknown>;
+
+const PRESS_EVENT_BINDINGS = [
+  { eventType: EventType.Press, propName: 'onPress' },
+  { eventType: EventType.PressIn, propName: 'onPressIn' },
+  { eventType: EventType.PressOut, propName: 'onPressOut' },
+  { eventType: EventType.LongPress, propName: 'onLongPress' },
+] as const;
+
+const FOCUS_AND_KEYBOARD_BINDINGS = [
+  { eventType: EventType.Focus, propName: 'onFocus', normalize: normalizeFocusChangePayload },
+  { eventType: EventType.Blur, propName: 'onBlur', normalize: normalizeFocusChangePayload },
+  { eventType: EventType.KeyDown, propName: 'onKeyDown', normalize: normalizeKeyPayload },
+  { eventType: EventType.KeyUp, propName: 'onKeyUp', normalize: normalizeKeyPayload },
+  { eventType: EventType.FocusIn, propName: 'onFocusIn', normalize: normalizeFocusChangePayload },
+  { eventType: EventType.FocusOut, propName: 'onFocusOut', normalize: normalizeFocusChangePayload },
+  {
+    eventType: EventType.AccessibilityAction,
+    propName: 'onAccessibilityAction',
+    normalize: normalizeAccessibilityActionPayload,
+  },
+] as const;
+
+const EVENT_PROP_NAMES = [
+  'onPress',
+  'onPressIn',
+  'onPressOut',
+  'onLongPress',
+  'onValueChange',
+  'onChangeText',
+  'onChange',
+  'onSelectionChange',
+  'onFocus',
+  'onBlur',
+  'onKeyDown',
+  'onKeyUp',
+  'onSubmitEditing',
+  'onFocusIn',
+  'onFocusOut',
+  'onAccessibilityAction',
+  'onTransitionEnd',
+  'onScroll',
+  'scrollEventThrottle',
+  'onLoadStart',
+  'onLoad',
+  'onError',
+  'onDisplay',
+] as const;
+
+function parseRequestedDirection(value: unknown): Direction | undefined {
+  return value === 'ltr' || value === 'rtl' || value === 'auto'
+    ? value
+    : undefined;
+}
+
+function parseRequestedWritingMode(value: unknown): WritingMode | undefined {
+  return value === 'horizontal-tb' || value === 'vertical-rl' || value === 'vertical-lr'
+    ? value
+    : undefined;
+}
+
+function getRootInheritedState(rootId: number = 0): InheritedElementState {
+  const locale = getExactLocaleSnapshot();
+  return {
+    rootId,
+    direction: locale.direction,
+    writingMode: 'horizontal-tb',
+    lang: locale.tag,
+    safeArea: createRootSafeAreaPropagation(rootId),
+  };
+}
+
+function getInheritedState(
+  parent: ElementNode | RootNode | null | undefined,
+): InheritedElementState {
+  if (parent?.kind === NodeKind.Element) {
+    return {
+      rootId: parent.propagatedSafeArea?.rootId ?? getRootIdForNode(parent),
+      direction: parent.resolvedDirection,
+      writingMode: parent.resolvedWritingMode,
+      lang: parent.resolvedLang,
+      safeArea: parent.propagatedSafeArea ?? createRootSafeAreaPropagation(getRootIdForNode(parent)),
+    };
+  }
+
+  return getRootInheritedState(parent?.kind === NodeKind.Root ? parent.rootId : 0);
+}
+
+function readInlineStyleValue(props: Props, key: string): unknown {
+  const style = props.style;
+  if (!style || typeof style !== 'object') {
+    return undefined;
+  }
+
+  return (style as Record<string, unknown>)[key];
+}
+
+function getRequestedDirection(
+  props: Props,
+  classNameStyle: CanonicalStyle,
+): Direction | undefined {
+  return parseRequestedDirection(readInlineStyleValue(props, 'direction')) ?? classNameStyle.direction;
+}
+
+function getRequestedWritingMode(
+  props: Props,
+  classNameStyle: CanonicalStyle,
+): WritingMode | undefined {
+  return parseRequestedWritingMode(readInlineStyleValue(props, 'writingMode')) ?? classNameStyle.writingMode;
+}
+
+function getAutoDirectionText(props: CanonicalProps): string | undefined {
+  return props.textContent ?? props.value;
+}
+
+function hasStableTextLayoutHint(props: Props): boolean {
+  return props.__exactTextLayoutStable === true;
+}
+
+function hasFixedPointTextLayout(style: CanonicalStyle): boolean {
+  return (
+    style.width?.type === 'points' &&
+    isFinite(style.width.value) &&
+    style.height?.type === 'points' &&
+    isFinite(style.height.value)
+  );
+}
+
+function canPatchElementTextWithoutLayout(instance: ElementNode, props: Props): boolean {
+  return (
+    instance.tagType === 'text' &&
+    hasStableTextLayoutHint(props) &&
+    hasFixedPointTextLayout(instance.style)
+  );
+}
+
+/**
+ * Style fields the kernel reads when measuring a raw text leaf (the
+ * TextMeasureCallback in kernel ffi.rs). A raw text leaf is a separate
+ * kernel node from its styled parent <Text> element and the kernel does not
+ * inherit styles across nodes, so this subset must be encoded onto the leaf
+ * explicitly or the leaf measures with the default font while the host
+ * renders the parent's — adapters that mount text as child leaves (Contract,
+ * Solid) get boxes sized for the wrong font.
+ */
+const TEXT_LEAF_MEASURE_STYLE_KEYS = [
+  'fontSize',
+  'fontWeight',
+  'fontStyle',
+  'fontFamily',
+  'lineHeight',
+  'letterSpacing',
+  'fontVariantNumeric',
+  'direction',
+  'numberOfLines',
+] as const satisfies readonly (keyof CanonicalStyle)[];
+
+function textMeasureStyleSubset(style: CanonicalStyle): CanonicalStyle | null {
+  let subset: Record<string, unknown> | null = null;
+  for (const key of TEXT_LEAF_MEASURE_STYLE_KEYS) {
+    const value = style[key];
+    if (value !== undefined) {
+      (subset ??= {})[key] = value;
+    }
+  }
+  return subset as CanonicalStyle | null;
+}
+
+function mergeTextMeasureStyles(
+  inheritedStyle: CanonicalStyle | null,
+  ownStyle: CanonicalStyle | null,
+): CanonicalStyle | null {
+  if (!inheritedStyle) {
+    return ownStyle;
+  }
+  if (!ownStyle) {
+    return inheritedStyle;
+  }
+  return {
+    ...inheritedStyle,
+    ...ownStyle,
+  };
+}
+
+function inheritedTextMeasureStyleForNode(node: ElementNode): CanonicalStyle | null {
+  const ancestors: ElementNode[] = [];
+  let cursor: ElementNode | RootNode | TextNode | null = node.parent as
+    | ElementNode
+    | RootNode
+    | TextNode
+    | null;
+  while (cursor?.kind === NodeKind.Element) {
+    const ancestor = cursor as ElementNode;
+    ancestors.unshift(ancestor);
+    cursor = ancestor.parent as ElementNode | RootNode | TextNode | null;
+  }
+
+  let inheritedStyle: CanonicalStyle | null = null;
+  let inInlineTextContext = false;
+  for (const ancestor of ancestors) {
+    if (ancestor.tagType === 'text') {
+      inheritedStyle = mergeTextMeasureStyles(
+        inheritedStyle,
+        textMeasureStyleSubset(ancestor.style),
+      );
+      inInlineTextContext = true;
+    } else if (inInlineTextContext && ancestor.tagType === 'pressable') {
+      continue;
+    } else {
+      inheritedStyle = null;
+      inInlineTextContext = false;
+    }
+  }
+
+  return inheritedStyle;
+}
+
+function effectiveTextMeasureStyleForNode(
+  node: ElementNode,
+  inheritedStyle: CanonicalStyle | null,
+): CanonicalStyle | null {
+  return mergeTextMeasureStyles(inheritedStyle, textMeasureStyleSubset(node.style));
+}
+
+function inheritedTextMeasureStyleForChild(
+  child: ElementNode | TextNode,
+  inheritedStyle: CanonicalStyle | null,
+): CanonicalStyle | null {
+  if (child.kind !== NodeKind.Element) {
+    return inheritedStyle;
+  }
+
+  if (child.tagType === 'text') {
+    return effectiveTextMeasureStyleForNode(child, inheritedStyle);
+  }
+
+  return inheritedStyle && child.tagType === 'pressable' ? inheritedStyle : null;
+}
+
+function inheritedTextMeasureStyleForInsertedChildren(
+  parent: ElementNode | RootNode,
+): CanonicalStyle | null {
+  if (parent.kind !== NodeKind.Element) {
+    return null;
+  }
+
+  const inheritedStyle = inheritedTextMeasureStyleForNode(parent);
+  if (parent.tagType === 'text') {
+    return effectiveTextMeasureStyleForNode(parent, inheritedStyle);
+  }
+
+  return inheritedStyle && parent.tagType === 'pressable' ? inheritedStyle : null;
+}
+
+function styleKeysAffectTextLeafMeasure(
+  changedKeys: readonly (keyof CanonicalStyle)[],
+): boolean {
+  return changedKeys.some((key) =>
+    (TEXT_LEAF_MEASURE_STYLE_KEYS as readonly string[]).includes(key),
+  );
+}
+
+/** Re-encode the measure-style subset onto already-created text leaf children. */
+function encodeTextLeafMeasureStyles(encoder: ProtocolEncoder, parent: ElementNode): void {
+  const inheritedStyle = inheritedTextMeasureStyleForNode(parent);
+  const parentMeasureStyle = effectiveTextMeasureStyleForNode(parent, inheritedStyle);
+  if (!parentMeasureStyle) {
+    return;
+  }
+
+  if (inheritedStyle) {
+    setStyle(encoder, parent.id, parentMeasureStyle);
+  }
+
+  for (const child of parent.children) {
+    encodeInheritedTextMeasureStyles(encoder, child, parentMeasureStyle);
+  }
+}
+
+function encodeInheritedTextMeasureStyles(
+  encoder: ProtocolEncoder,
+  node: ElementNode | TextNode,
+  inheritedStyle: CanonicalStyle | null,
+): void {
+  if (!inheritedStyle || hasDirtyFlag(node, DirtyFlags.Created)) {
+    return;
+  }
+
+  if (node.kind === NodeKind.Text) {
+    setStyle(encoder, node.id, inheritedStyle);
+    return;
+  }
+
+  const nodeMeasureStyle = inheritedTextMeasureStyleForChild(node, inheritedStyle);
+  if (!nodeMeasureStyle) {
+    return;
+  }
+
+  if (node.tagType === 'text') {
+    setStyle(encoder, node.id, nodeMeasureStyle);
+  }
+
+  for (const child of node.children) {
+    encodeInheritedTextMeasureStyles(encoder, child, nodeMeasureStyle);
+  }
+}
+
+function canPatchTextNodeWithoutLayout(instance: TextNode): boolean {
+  const parent = instance.parent;
+  if (parent?.kind !== NodeKind.Element) {
+    return false;
+  }
+  const elementParent = parent as ElementNode;
+
+  return (
+    elementParent.tagType === 'text' &&
+    hasStableTextLayoutHint(elementParent.originalProps) &&
+    hasFixedPointTextLayout(elementParent.style)
+  );
+}
+
+function serializeNativeViewProps(
+  config: TagConfig,
+  props: Props,
+): string {
+  const metadata = config.nativeView;
+  if (!metadata) {
+    return '{}';
+  }
+
+  const payload: Record<string, unknown> = {};
+  for (const key of metadata.propKeys) {
+    if (props[key] !== undefined) {
+      payload[key] = props[key];
+    }
+  }
+
+  try {
+    return JSON.stringify(payload);
+  } catch (error) {
+    if (__DEV__) {
+      console.warn(
+        `[HostOps] Failed to serialize native-view props for ${metadata.moduleName}:`,
+        error,
+      );
+    }
+    return '{}';
+  }
+}
+
+function augmentCanonicalPropsForNativeView(
+  config: TagConfig,
+  props: Props,
+  canonicalProps: CanonicalProps,
+): CanonicalProps {
+  const metadata = config.nativeView;
+  if (!metadata) {
+    return canonicalProps;
+  }
+
+  return {
+    ...canonicalProps,
+    nativeViewModuleName: metadata.moduleName,
+    nativeViewProps: serializeNativeViewProps(config, props),
+    nativeViewSelectionTier: metadata.selection?.tier,
+    nativeViewGesturePolicy: metadata.selection?.gesturePolicy,
+  };
+}
+
+function resolveDirectionForElement(
+  originalTag: string,
+  tagType: CanonicalTagType,
+  requestedDirection: Direction | undefined,
+  props: CanonicalProps,
+  inherited: InheritedElementState,
+): ResolvedDirection {
+  if (requestedDirection === 'ltr' || requestedDirection === 'rtl') {
+    return requestedDirection;
+  }
+
+  if (requestedDirection !== 'auto') {
+    return inherited.direction;
+  }
+
+  const text = getAutoDirectionText(props);
+  if (text !== undefined) {
+    return detectTextDirection(text, inherited.direction);
+  }
+
+  if (__DEV__ && !warnedAutoDirectionTags.has(originalTag)) {
+    warnedAutoDirectionTags.add(originalTag);
+    console.warn(
+      `[HostOps] direction="auto" requires text content; falling back to inherited direction for <${originalTag}> (${tagType}).`,
+    );
+  }
+
+  return inherited.direction;
+}
+
+let resolveElementStateCallCount = 0;
+
+/**
+ * Number of resolveElementState invocations since the last reset.
+ * @internal For testing only (verifies the updateInstanceProps fast path).
+ */
+export function _getResolveElementStateCallCount(): number {
+  return resolveElementStateCallCount;
+}
+
+/** @internal For testing only. */
+export function _resetResolveElementStateCallCount(): void {
+  resolveElementStateCallCount = 0;
+}
+
+function resolveElementState(
+  instance: ElementNode,
+  config: TagConfig,
+  originalTag: string,
+  props: Props,
+  inherited: InheritedElementState,
+): ResolvedElementState {
+  resolveElementStateCallCount += 1;
+  const normalizedCanonicalProps = augmentCanonicalPropsForNativeView(
+    config,
+    props,
+    normalizeProps(config.canonicalType, props, config.isRNStyle),
+  );
+  const paragraph = config.canonicalType === 'text'
+    ? lowerTextPropsToParagraphSpec(props)
+    : null;
+  const canonicalProps =
+    config.canonicalType === 'text'
+      ? {
+          ...normalizedCanonicalProps,
+          textContent: paragraph?.plainText ?? normalizedCanonicalProps.textContent,
+        }
+      : normalizedCanonicalProps;
+  const classNameStyle = resolveClassNameStyle(props.className, { props });
+  const resolvedDirection = resolveDirectionForElement(
+    originalTag,
+    config.canonicalType,
+    getRequestedDirection(props, classNameStyle),
+    canonicalProps,
+    inherited,
+  );
+  const resolvedWritingMode =
+    getRequestedWritingMode(props, classNameStyle) ?? inherited.writingMode;
+  const resolvedLang = canonicalProps.lang ?? inherited.lang;
+  const contentContainerStyle = config.canonicalType === 'scroll'
+    ? normalizeStyle(props.contentContainerStyle as FullStyle | undefined, 'row', {
+        resolvedDirection,
+        resolvedWritingMode,
+        includeInheritedValues: true,
+      })
+    : {};
+  const inlineStyle = normalizeStyle(props.style as FullStyle | undefined, 'row', {
+    resolvedDirection,
+    resolvedWritingMode,
+    includeInheritedValues: true,
+  });
+  const style = applyTextLayoutPropStyleOverrides(
+    config.canonicalType,
+      applyPropDrivenStyleOverrides(
+        config.canonicalType,
+        {
+          ...buildDefaultCanonicalStyle(config.defaultFlexDirection, config.isRNStyle),
+        ...classNameStyle,
+        ...contentContainerStyle,
+        ...inlineStyle,
+          direction: resolvedDirection,
+          writingMode: resolvedWritingMode,
+        },
+        canonicalProps,
+        props,
+      ),
+    props,
+  );
+  const accessibilityAwareStyle = applyRootScrollViewportDefaults(
+    instance,
+    applyAccessibilityDrivenStyleOverrides(style, canonicalProps),
+  );
+
+  const safeAreaResolution = resolveSafeAreaForElement(
+    instance,
+    instance.parent as ElementNode | RootNode | null,
+    accessibilityAwareStyle,
+    inherited.safeArea,
+  );
+
+  if (config.canonicalType === 'scroll' && accessibilityAwareStyle.overflow === undefined) {
+    safeAreaResolution.style.overflow = 'scroll';
+  }
+
+  return {
+    props: canonicalProps,
+    paragraphSpec: paragraph?.spec ?? null,
+    paragraphKey: paragraph?.key ?? null,
+    style: safeAreaResolution.style,
+    transitions: normalizeTransition((props.style as FullStyle | undefined)?.transition),
+    resolvedDirection,
+    resolvedWritingMode,
+    resolvedLang,
+    safeAreaState: safeAreaResolution.safeAreaState,
+    propagatedSafeArea: safeAreaResolution.propagatedSafeArea,
+  };
+}
+
+function applyResolvedElementState(
+  instance: ElementNode,
+  state: ResolvedElementState,
+): void {
+  instance.props = state.props;
+  instance.paragraphSpec = state.paragraphSpec;
+  instance.paragraphKey = state.paragraphKey;
+  instance.style = state.style;
+  instance.transitions = state.transitions;
+  instance.resolvedDirection = state.resolvedDirection;
+  instance.resolvedWritingMode = state.resolvedWritingMode;
+  instance.resolvedLang = state.resolvedLang;
+  instance.safeAreaState = state.safeAreaState;
+  instance.propagatedSafeArea = state.propagatedSafeArea;
+}
+
+function canRefreshCreatedMountEnvironment(
+  instance: ElementNode,
+  inherited: InheritedElementState,
+): boolean {
+  if (instance.safeAreaState !== null) {
+    return false;
+  }
+
+  const expectedLang = instance.props.lang ?? inherited.lang;
+  return (
+    instance.tagType !== 'text' &&
+    instance.resolvedDirection === inherited.direction &&
+    instance.resolvedWritingMode === inherited.writingMode &&
+    instance.resolvedLang === expectedLang
+  );
+}
+
+function refreshCreatedMountEnvironment(
+  instance: ElementNode,
+  inherited: InheritedElementState,
+): void {
+  instance.resolvedLang = instance.props.lang ?? inherited.lang;
+
+  const safeAreaResolution = resolveSafeAreaForElement(
+    instance,
+    instance.parent as ElementNode | RootNode | null,
+    applyRootScrollViewportDefaults(instance, instance.style),
+    inherited.safeArea,
+  );
+  instance.style = safeAreaResolution.style;
+  instance.safeAreaState = safeAreaResolution.safeAreaState;
+  instance.propagatedSafeArea = safeAreaResolution.propagatedSafeArea;
+}
+
+interface NormalizedTextChangePayload {
+  nativeEvent: {
+    text: string;
+    selection?: {
+      start: number;
+      end: number;
+    };
+    isComposing?: boolean;
+    compositionRange?: {
+      start: number;
+      end: number;
+    };
+    textRevision?: number;
+    classification?: string;
+    textChanged?: boolean;
+  };
+}
+
+type NormalizedImageEventType = 'loadStart' | 'load' | 'error' | 'display';
+
+interface NormalizedImageEventPayload {
+  event: NormalizedImageEventType;
+  source: {
+    uri: string;
+    width: number;
+    height: number;
+  };
+  cacheType: 'none' | 'disk' | 'memory';
+  error: string;
+}
+
+function normalizeTextChangePayload(payload: unknown): NormalizedTextChangePayload {
+  const normalizedSelection = normalizeTextSelectionPayload(payload);
+  const normalizedCompositionRange = normalizeTextRangePayload(
+    payload,
+    'compositionRange',
+    'compositionStart',
+    'compositionEnd',
+  );
+  const isComposing = readTextComposingPayload(payload);
+  const textRevision = readTextRevisionPayload(payload);
+  const classification = readTextClassificationPayload(payload);
+  if (
+    typeof payload === 'object' &&
+    payload !== null &&
+    'nativeEvent' in payload &&
+    typeof (payload as { nativeEvent?: { text?: unknown } }).nativeEvent?.text === 'string'
+  ) {
+    return {
+      nativeEvent: {
+        ...(payload as NormalizedTextChangePayload).nativeEvent,
+        ...(normalizedSelection ? { selection: normalizedSelection } : {}),
+        ...(isComposing !== undefined ? { isComposing } : {}),
+        ...(normalizedCompositionRange ? { compositionRange: normalizedCompositionRange } : {}),
+        ...(textRevision !== undefined ? { textRevision } : {}),
+        ...(classification !== undefined ? { classification } : {}),
+        textChanged: readTextChangedPayload(payload),
+      },
+    };
+  }
+
+  const textCandidate =
+    typeof payload === 'object' && payload !== null
+      ? (
+          payload as {
+            text?: unknown;
+            value?: unknown;
+          }
+        ).text ??
+        (
+          payload as {
+            text?: unknown;
+            value?: unknown;
+          }
+        ).value
+      : payload;
+
+  return {
+    nativeEvent: {
+      text: typeof textCandidate === 'string' ? textCandidate : '',
+      ...(normalizedSelection ? { selection: normalizedSelection } : {}),
+      ...(isComposing !== undefined ? { isComposing } : {}),
+      ...(normalizedCompositionRange ? { compositionRange: normalizedCompositionRange } : {}),
+      ...(textRevision !== undefined ? { textRevision } : {}),
+      ...(classification !== undefined ? { classification } : {}),
+      textChanged: readTextChangedPayload(payload),
+    },
+  };
+}
+
+function readTextComposingPayload(payload: unknown): boolean | undefined {
+  const record = payloadRecord(payload);
+  const nativeEvent = payloadRecord(record.nativeEvent);
+  const value = nativeEvent.isComposing ?? nativeEvent.composing ?? record.isComposing ?? record.composing;
+  return typeof value === 'boolean' ? value : undefined;
+}
+
+function readTextChangedPayload(payload: unknown): boolean {
+  const record = payloadRecord(payload);
+  const nativeEvent = payloadRecord(record.nativeEvent);
+  const value = nativeEvent.textChanged ?? record.textChanged;
+  return typeof value === 'boolean' ? value : true;
+}
+
+function readTextRevisionPayload(payload: unknown): number | undefined {
+  const record = payloadRecord(payload);
+  const nativeEvent = payloadRecord(record.nativeEvent);
+  const value = nativeEvent.textRevision ?? nativeEvent.revision ?? record.textRevision ?? record.revision;
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : undefined;
+  }
+  return undefined;
+}
+
+function readTextClassificationPayload(payload: unknown): string | undefined {
+  const record = payloadRecord(payload);
+  const nativeEvent = payloadRecord(record.nativeEvent);
+  const value =
+    nativeEvent.classification ??
+    nativeEvent.textClassification ??
+    record.classification ??
+    record.textClassification;
+  return typeof value === 'string' ? value : undefined;
+}
+
+function normalizeTextSelectionPayload(payload: unknown): { start: number; end: number } | undefined {
+  return normalizeTextRangePayload(payload, 'selection', 'selectionStart', 'selectionEnd');
+}
+
+function normalizeTextRangePayload(
+  payload: unknown,
+  rangeKey: string,
+  startKey: string,
+  endKey: string,
+): { start: number; end: number } | undefined {
+  const record = payloadRecord(payload);
+  const nativeEvent = payloadRecord(record.nativeEvent);
+  const range = payloadRecord(nativeEvent[rangeKey] ?? record[rangeKey]);
+  const startCandidate = range.start ?? nativeEvent[startKey] ?? record[startKey];
+  const endCandidate = range.end ?? nativeEvent[endKey] ?? record[endKey];
+
+  if (
+    typeof startCandidate !== 'number' ||
+    typeof endCandidate !== 'number' ||
+    !Number.isFinite(startCandidate) ||
+    !Number.isFinite(endCandidate)
+  ) {
+    return undefined;
+  }
+
+  return {
+    start: startCandidate,
+    end: endCandidate,
+  };
+}
+
+function payloadRecord(payload: unknown): Record<string, unknown> {
+  return typeof payload === 'object' && payload !== null
+    ? payload as Record<string, unknown>
+    : {};
+}
+
+function readEventField(payload: unknown, field: string): unknown {
+  const record = payloadRecord(payload);
+  const nativeEvent = payloadRecord(record.nativeEvent);
+  return nativeEvent[field] ?? record[field];
+}
+
+function normalizeImageEventName(value: unknown): NormalizedImageEventType | null {
+  if (typeof value !== 'string') {
+    return null;
+  }
+
+  switch (value.toLowerCase()) {
+    case 'loadstart':
+    case 'load-start':
+    case 'load_start':
+      return 'loadStart';
+    case 'load':
+      return 'load';
+    case 'error':
+      return 'error';
+    case 'display':
+      return 'display';
+    default:
+      return null;
+  }
+}
+
+function finiteNumber(value: unknown): number {
+  return typeof value === 'number' && Number.isFinite(value) ? value : 0;
+}
+
+function normalizeImageCacheType(value: unknown): 'none' | 'disk' | 'memory' {
+  return value === 'disk' || value === 'memory' || value === 'none' ? value : 'none';
+}
+
+function normalizeImageEventPayload(payload: unknown): NormalizedImageEventPayload | null {
+  const event = normalizeImageEventName(
+    readEventField(payload, 'event') ?? readEventField(payload, 'type'),
+  );
+  if (!event) {
+    return null;
+  }
+
+  const uriCandidate =
+    readEventField(payload, 'uri') ??
+    readEventField(payload, 'src') ??
+    readEventField(payload, 'currentSrc');
+  const errorCandidate =
+    readEventField(payload, 'error') ??
+    readEventField(payload, 'message') ??
+    'Image failed to load.';
+
+  return {
+    event,
+    source: {
+      uri: typeof uriCandidate === 'string' ? uriCandidate : '',
+      width: finiteNumber(
+        readEventField(payload, 'width') ?? readEventField(payload, 'naturalWidth'),
+      ),
+      height: finiteNumber(
+        readEventField(payload, 'height') ?? readEventField(payload, 'naturalHeight'),
+      ),
+    },
+    cacheType: normalizeImageCacheType(readEventField(payload, 'cacheType')),
+    error: typeof errorCandidate === 'string' ? errorCandidate : 'Image failed to load.',
+  };
+}
+
+function dispatchImageEventPayload(props: Props, payload: unknown): void {
+  const event = normalizeImageEventPayload(payload);
+  if (!event) {
+    return;
+  }
+
+  switch (event.event) {
+    case 'loadStart':
+      if (typeof props.onLoadStart === 'function') {
+        props.onLoadStart();
+      }
+      return;
+    case 'load':
+      if (typeof props.onLoad === 'function') {
+        props.onLoad({
+          source: event.source,
+          cacheType: event.cacheType,
+        });
+      }
+      return;
+    case 'error':
+      if (typeof props.onError === 'function') {
+        props.onError({
+          error: event.error,
+        });
+      }
+      return;
+    case 'display':
+      if (typeof props.onDisplay === 'function') {
+        props.onDisplay();
+      }
+      return;
+  }
+}
+
+function normalizeFocusChangePayload(payload: unknown): {
+  nativeEvent: {
+    timestamp: number;
+    relatedTarget?: number | null;
+  };
+} {
+  const relatedTarget =
+    (payload as { nativeEvent?: { relatedTarget?: unknown }; relatedTarget?: unknown } | null)
+      ?.nativeEvent?.relatedTarget ??
+    (payload as { nativeEvent?: { relatedTarget?: unknown }; relatedTarget?: unknown } | null)
+      ?.relatedTarget;
+
+  return {
+    nativeEvent: {
+      timestamp: Date.now(),
+      relatedTarget: typeof relatedTarget === 'number' ? relatedTarget : null,
+    },
+  };
+}
+
+function normalizeKeyPayload(payload: unknown): {
+  nativeEvent: {
+    key: string;
+    code?: string;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+    repeat: boolean;
+    timestamp: number;
+  };
+  preventDefault?: () => void;
+  defaultPrevented?: boolean;
+} {
+  const nativeEvent =
+    (payload as {
+      nativeEvent?: {
+        key?: unknown;
+        code?: unknown;
+        altKey?: unknown;
+        ctrlKey?: unknown;
+        metaKey?: unknown;
+        shiftKey?: unknown;
+        repeat?: unknown;
+        timestamp?: unknown;
+      };
+    } | null)?.nativeEvent;
+
+  return {
+    nativeEvent: {
+      key: typeof nativeEvent?.key === 'string' ? nativeEvent.key : '',
+      code: typeof nativeEvent?.code === 'string' ? nativeEvent.code : undefined,
+      altKey: nativeEvent?.altKey === true,
+      ctrlKey: nativeEvent?.ctrlKey === true,
+      metaKey: nativeEvent?.metaKey === true,
+      shiftKey: nativeEvent?.shiftKey === true,
+      repeat: nativeEvent?.repeat === true,
+      timestamp:
+        typeof nativeEvent?.timestamp === 'number' && isFinite(nativeEvent.timestamp)
+          ? nativeEvent.timestamp
+          : Date.now(),
+    },
+    preventDefault:
+      typeof (payload as { preventDefault?: unknown } | null)?.preventDefault === 'function'
+        ? (payload as { preventDefault: () => void }).preventDefault
+        : undefined,
+    defaultPrevented:
+      (payload as { defaultPrevented?: unknown } | null)?.defaultPrevented === true,
+  };
+}
+
+function normalizeAccessibilityActionPayload(payload: unknown): {
+  nativeEvent: {
+    actionName: string;
+  };
+} {
+  const actionNameCandidate =
+    (payload as { nativeEvent?: { actionName?: unknown }; actionName?: unknown } | null)
+      ?.nativeEvent?.actionName ??
+    (payload as { nativeEvent?: { actionName?: unknown }; actionName?: unknown } | null)
+      ?.actionName;
+
+  return {
+    nativeEvent: {
+      actionName:
+        typeof actionNameCandidate === 'string' && actionNameCandidate.length > 0
+          ? actionNameCandidate
+          : '',
+    },
+  };
+}
+
+function readFiniteNumber(value: unknown, fallback = 0): number {
+  if (typeof value === 'number' && isFinite(value)) {
+    return value;
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    return isFinite(parsed) ? parsed : fallback;
+  }
+  return fallback;
+}
+
+function normalizeScrollPayload(payload: unknown): {
+  nativeEvent: {
+    contentOffset: {
+      x: number;
+      y: number;
+    };
+    contentSize: {
+      width: number;
+      height: number;
+    };
+    layoutMeasurement: {
+      width: number;
+      height: number;
+    };
+    timestamp: number;
+  };
+} {
+  const nativeEvent =
+    (payload as {
+      nativeEvent?: {
+        contentOffset?: {
+          x?: unknown;
+          y?: unknown;
+        };
+        timestamp?: unknown;
+      };
+    } | null)?.nativeEvent;
+  const contentOffset =
+    nativeEvent?.contentOffset ??
+    (payload as {
+      contentOffset?: {
+        x?: unknown;
+        y?: unknown;
+      };
+    } | null)?.contentOffset;
+
+  return {
+    nativeEvent: {
+      contentOffset: {
+        x: readFiniteNumber(contentOffset?.x ?? (payload as { x?: unknown } | null)?.x),
+        y: readFiniteNumber(contentOffset?.y ?? (payload as { y?: unknown } | null)?.y),
+      },
+      contentSize: {
+        width: readFiniteNumber(
+          (payload as { contentSize?: { width?: unknown } } | null)?.contentSize?.width,
+        ),
+        height: readFiniteNumber(
+          (payload as { contentSize?: { height?: unknown } } | null)?.contentSize?.height,
+        ),
+      },
+      layoutMeasurement: {
+        width: readFiniteNumber(
+          (payload as { layoutMeasurement?: { width?: unknown } } | null)?.layoutMeasurement?.width,
+        ),
+        height: readFiniteNumber(
+          (payload as { layoutMeasurement?: { height?: unknown } } | null)?.layoutMeasurement?.height,
+        ),
+      },
+      timestamp: readFiniteNumber(nativeEvent?.timestamp, Date.now()),
+    },
+  };
+}
+
+function resolveScrollEventThrottle(props: Props): number {
+  const value = props.scrollEventThrottle;
+  const throttle = typeof value === 'number' && isFinite(value) ? value : 0;
+  return throttle > 0 ? throttle : 0;
+}
+
+/**
+ * Per-instance scroll throttle state. Kept outside the onScroll wrapper so an
+ * unrelated event-prop change (which rebuilds the wrapper) does not reset the
+ * throttle window mid-scroll.
+ */
+const scrollThrottleState = new WeakMap<ElementNode, { lastDispatchAt: number | null }>();
+
+function getScrollThrottleState(instance: ElementNode): { lastDispatchAt: number | null } {
+  let state = scrollThrottleState.get(instance);
+  if (!state) {
+    state = { lastDispatchAt: null };
+    scrollThrottleState.set(instance, state);
+  }
+  return state;
+}
+
+function getElementTestId(instance: ElementNode): string | undefined {
+  const candidate =
+    instance.originalProps.testId ??
+    instance.originalProps.testID ??
+    instance.originalProps['data-testid'] ??
+    instance.originalProps['data-test-id'] ??
+    instance.originalProps.id;
+  return typeof candidate === 'string' && candidate.length > 0
+    ? candidate
+    : undefined;
+}
+
+function getElementLabel(instance: ElementNode): string | undefined {
+  if (typeof instance.props.accessibilityLabel === 'string' && instance.props.accessibilityLabel.length > 0) {
+    return instance.props.accessibilityLabel;
+  }
+
+  if (instance.tagType === 'input') {
+    return instance.props.value ?? instance.props.placeholder;
+  }
+
+  return instance.props.textContent;
+}
+
+function syncInputFocusTracking(instance: ElementNode, focused: boolean): void {
+  const rootId = getRootIdForNode(instance);
+
+  if (!focused) {
+    clearFocusedInput(rootId, instance.id);
+    clearFocusedTarget();
+    return;
+  }
+
+  noteFocusedInput(rootId, instance.id);
+  setFocusedTarget({
+    viewId: instance.id,
+    type: instance.originalTag,
+    label: getElementLabel(instance),
+    testId: getElementTestId(instance),
+  });
+}
+
+function upsertEventHandler(
+  instance: ElementNode,
+  eventType: EventType,
+  handler: Function,
+): void {
+  const existing = instance.events.get(eventType);
+  if (existing) {
+    updateHandler(existing.handlerId, handler);
+    existing.handler = handler;
+    return;
+  }
+
+  const handlerId = registerHandler(handler);
+  instance.events.set(eventType, { handlerId, handler });
+}
+
+function removeEventHandler(
+  instance: ElementNode,
+  eventType: EventType,
+): void {
+  const existing = instance.events.get(eventType);
+  if (!existing) {
+    return;
+  }
+  unregisterHandler(existing.handlerId, instance.id, eventType, getRootIdForNode(instance));
+  instance.events.delete(eventType);
+}
+
+function bindFunctionPropEvent(
+  instance: ElementNode,
+  props: Props,
+  activeEvents: Set<EventType>,
+  binding: (typeof PRESS_EVENT_BINDINGS)[number],
+): void {
+  const handler = props[binding.propName];
+  if (typeof handler === 'function') {
+    activeEvents.add(binding.eventType);
+    upsertEventHandler(instance, binding.eventType, handler);
+  } else {
+    removeEventHandler(instance, binding.eventType);
+  }
+}
+
+function eventPropsChanged(previousProps: Props, nextProps: Props): boolean {
+  for (const propName of EVENT_PROP_NAMES) {
+    if (previousProps[propName] !== nextProps[propName]) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Shallow strict-equality check over original (framework-level) props.
+ *
+ * Used as the updateInstanceProps fast path: when every prop value (including
+ * the `style` and `children` references) is identical, re-running
+ * resolveElementState cannot produce a different result, so the whole
+ * resolution + diff + encode pipeline can be skipped.
+ */
+function originalPropsShallowEqual(previousProps: Props, nextProps: Props): boolean {
+  const previousKeys = Object.keys(previousProps);
+  if (previousKeys.length !== Object.keys(nextProps).length) {
+    return false;
+  }
+  for (const key of previousKeys) {
+    if (previousProps[key] !== nextProps[key]) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/**
+ * Process event props for an element and update the handler registry.
+ * This is framework-agnostic - each framework calls this with its props.
+ *
+ * IMPORTANT: This function updates handlers in place to maintain stable handler IDs.
+ * The native side caches handler IDs from BindEvent opcodes, so we must not change
+ * IDs unnecessarily.
+ */
+export function processEventProps(
+  instance: ElementNode,
+  props: Props,
+  config: TagConfig
+): void {
+  const supportsPressEvents =
+    config.supportsPressEvents || instance.pressOverride === true;
+  const supportsChangeEvents = config.supportsChangeEvents === true;
+  const supportsTransitionEvents = config.supportsTransitionEvents !== false;
+  const supportsScrollEvents = config.canonicalType === 'scroll';
+
+  // If this element doesn't support any events, clear all handlers
+  if (!supportsPressEvents && !supportsChangeEvents && !supportsTransitionEvents && !supportsScrollEvents) {
+    for (const [eventType, binding] of instance.events) {
+      unregisterHandler(binding.handlerId, instance.id, eventType, getRootIdForNode(instance));
+    }
+    instance.events.clear();
+    return;
+  }
+
+  // Track which events are present in props
+  const activeEvents = new Set<EventType>();
+
+  if (supportsPressEvents) {
+    for (const binding of PRESS_EVENT_BINDINGS) {
+      bindFunctionPropEvent(instance, props, activeEvents, binding);
+    }
+  }
+
+  // Process change events (for toggles, inputs)
+  if (supportsChangeEvents) {
+    if (instance.tagType === 'image') {
+      const hasImageEventHandler =
+        typeof props.onLoadStart === 'function' ||
+        typeof props.onLoad === 'function' ||
+        typeof props.onError === 'function' ||
+        typeof props.onDisplay === 'function';
+
+      if (hasImageEventHandler) {
+        activeEvents.add(EventType.Change);
+        upsertEventHandler(instance, EventType.Change, (payload: unknown) => {
+          dispatchImageEventPayload(props, payload);
+        });
+      } else {
+        removeEventHandler(instance, EventType.Change);
+      }
+    } else if (instance.tagType === 'nativeView') {
+      const moduleName = instance.props.nativeViewModuleName;
+      const isToggleNativeView = moduleName === 'exact.toggle';
+      const hasNativeViewChangeHandler =
+        typeof props.onChange === 'function' ||
+        (isToggleNativeView && typeof props.onValueChange === 'function');
+
+      if (hasNativeViewChangeHandler) {
+        activeEvents.add(EventType.Change);
+
+        // Native-view controls report already-structured payloads from the host
+        // (for example `{ value: 0.42 }` for sliders). Unlike text inputs, this
+        // payload should not be coerced into a text event shape.
+        const changeHandler = (payload: unknown) => {
+          if (isToggleNativeView && typeof props.onValueChange === 'function') {
+            const value =
+              (payload as { nativeEvent?: { value?: unknown }; value?: unknown } | null)?.nativeEvent?.value ??
+              (payload as { nativeEvent?: { value?: unknown }; value?: unknown } | null)?.value ??
+              payload;
+            props.onValueChange(value as boolean);
+          }
+
+          const onChange = props.onChange as ((event: unknown) => void) | undefined;
+          onChange?.(payload);
+        };
+
+        upsertEventHandler(instance, EventType.Change, changeHandler);
+
+        if (typeof instance.props.nativeViewModuleName === 'string') {
+          registerNativeViewEventHandler(
+            instance.id,
+            instance.props.nativeViewModuleName,
+            (eventName, payload) => {
+              if (eventName !== 'change') {
+                return false;
+              }
+              return dispatchSyntheticEvent(instance, EventType.Change, payload);
+            },
+          );
+        }
+      } else {
+        unregisterNativeViewEventHandler(instance.id);
+        removeEventHandler(instance, EventType.Change);
+      }
+    } else {
+      const hasToggleChangeHandler = typeof props.onValueChange === 'function';
+      const hasTextChangeHandler =
+        typeof props.onChangeText === 'function' ||
+        typeof props.onChange === 'function' ||
+        typeof props.onSelectionChange === 'function';
+
+      if (hasToggleChangeHandler || hasTextChangeHandler) {
+        activeEvents.add(EventType.Change);
+
+        const changeHandler = (payload: unknown) => {
+          if (typeof props.onValueChange === 'function') {
+            const value =
+              (payload as { nativeEvent?: { value?: unknown }; value?: unknown } | null)?.nativeEvent?.value ??
+              (payload as { nativeEvent?: { value?: unknown }; value?: unknown } | null)?.value ??
+              payload;
+            props.onValueChange(value as boolean);
+          }
+
+          if (typeof props.onChangeText === 'function' || typeof props.onChange === 'function') {
+            const event = normalizeTextChangePayload(payload);
+            const shouldDispatchCommittedText =
+              event.nativeEvent.textChanged !== false &&
+              event.nativeEvent.isComposing !== true;
+            if (shouldDispatchCommittedText && typeof props.onChangeText === 'function') {
+              props.onChangeText(event.nativeEvent.text);
+            }
+            if (shouldDispatchCommittedText && typeof props.onChange === 'function') {
+              props.onChange(event);
+            }
+          }
+
+          if (typeof props.onSelectionChange === 'function') {
+            const event = normalizeTextChangePayload(payload);
+            if (event.nativeEvent.selection) {
+              props.onSelectionChange({
+                nativeEvent: {
+                  selection: event.nativeEvent.selection,
+                  text: event.nativeEvent.text,
+                  ...(event.nativeEvent.isComposing !== undefined
+                    ? { isComposing: event.nativeEvent.isComposing }
+                    : {}),
+                  ...(event.nativeEvent.compositionRange
+                    ? { compositionRange: event.nativeEvent.compositionRange }
+                    : {}),
+                  ...(event.nativeEvent.textRevision !== undefined
+                    ? { textRevision: event.nativeEvent.textRevision }
+                    : {}),
+                  ...(event.nativeEvent.classification !== undefined
+                    ? { classification: event.nativeEvent.classification }
+                    : {}),
+                },
+              });
+            }
+          }
+        };
+
+        upsertEventHandler(instance, EventType.Change, changeHandler);
+      } else {
+        // Remove change handler if no longer in props
+        removeEventHandler(instance, EventType.Change);
+      }
+    }
+  }
+
+  if (supportsTransitionEvents) {
+    if (typeof props.onTransitionEnd === 'function') {
+      activeEvents.add(EventType.TransitionEnd);
+      upsertEventHandler(instance, EventType.TransitionEnd, props.onTransitionEnd);
+    } else {
+      removeEventHandler(instance, EventType.TransitionEnd);
+    }
+  }
+
+  if (supportsScrollEvents) {
+    if (typeof props.onScroll === 'function') {
+      activeEvents.add(EventType.Scroll);
+      const onScroll = props.onScroll as (event: ReturnType<typeof normalizeScrollPayload>) => void;
+      const scrollEventThrottle = resolveScrollEventThrottle(props);
+      const throttleState = getScrollThrottleState(instance);
+      upsertEventHandler(instance, EventType.Scroll, (payload: unknown) => {
+        const event = normalizeScrollPayload(payload);
+        const timestamp = event.nativeEvent.timestamp;
+        if (
+          scrollEventThrottle > 0 &&
+          throttleState.lastDispatchAt !== null &&
+          timestamp >= throttleState.lastDispatchAt &&
+          timestamp - throttleState.lastDispatchAt < scrollEventThrottle
+        ) {
+          return;
+        }
+        throttleState.lastDispatchAt = timestamp;
+        onScroll(event);
+      });
+    } else {
+      removeEventHandler(instance, EventType.Scroll);
+      scrollThrottleState.delete(instance);
+    }
+  }
+
+  for (const binding of FOCUS_AND_KEYBOARD_BINDINGS) {
+    const handler = props[binding.propName];
+    const submitEditingHandler =
+      instance.tagType === 'input' && binding.eventType === EventType.KeyDown
+        ? props.onSubmitEditing
+        : undefined;
+    const needsInternalInputTracking =
+      instance.tagType === 'input' &&
+      (binding.eventType === EventType.Focus || binding.eventType === EventType.Blur);
+
+    if (
+      typeof handler === 'function' ||
+      typeof submitEditingHandler === 'function' ||
+      needsInternalInputTracking
+    ) {
+      activeEvents.add(binding.eventType);
+      upsertEventHandler(instance, binding.eventType, (payload: unknown) => {
+        const normalizedPayload = binding.normalize(payload);
+        if (binding.eventType === EventType.Focus) {
+          syncInputFocusTracking(instance, true);
+        } else if (binding.eventType === EventType.Blur) {
+          syncInputFocusTracking(instance, false);
+        }
+        if (typeof handler === 'function') {
+          handler(normalizedPayload);
+        }
+        if (
+          typeof submitEditingHandler === 'function' &&
+          binding.eventType === EventType.KeyDown &&
+          (normalizedPayload as { nativeEvent: { key?: string } }).nativeEvent.key === 'Enter' &&
+          props.multiline !== true
+        ) {
+          submitEditingHandler();
+        }
+      });
+    } else {
+      removeEventHandler(instance, binding.eventType);
+    }
+  }
+
+  // Remove handlers for events no longer in props
+  for (const [eventType, binding] of instance.events) {
+    if (!activeEvents.has(eventType)) {
+      unregisterHandler(binding.handlerId, instance.id, eventType, getRootIdForNode(instance));
+      instance.events.delete(eventType);
+    }
+  }
+}
+
+/**
+ * Recursively clean up event handlers for a node and all its children.
+ * This ensures native event listeners are properly released.
+ */
+export function cleanupNodeHandlers(
+  node: ElementNode | TextNode,
+  rootId: number = getRootIdForNode(node),
+): void {
+  if (node.kind === NodeKind.Element) {
+    const element = node as ElementNode;
+
+    if (element.tagType === 'nativeView') {
+      unregisterNativeViewEventHandler(element.id);
+    }
+
+    // Unregister all event handlers for this node
+    for (const [eventType, binding] of element.events) {
+      unregisterHandler(binding.handlerId, element.id, eventType, rootId);
+    }
+    element.events.clear();
+
+    // Recursively clean up children
+    for (const child of element.children) {
+      cleanupNodeHandlers(child, rootId);
+    }
+  }
+}
+
+// =============================================================================
+// High-Level Host Operations
+// =============================================================================
+
+/**
+ * Create an element instance.
+ * Used by framework adapters during React's render phase, so this must remain side-effect free.
+ */
+export function createInstance(
+  type: string,
+  props: Props,
+): ElementNode {
+  const config = getTagConfig(type) ?? defaultTagConfig;
+
+  // Create the element node
+  const instance = createElementNode(
+    config.canonicalType,
+    type,
+    config.isRNStyle,
+    props
+  );
+
+  applyResolvedElementState(
+    instance,
+    resolveElementState(instance, config, type, props, getRootInheritedState(0)),
+  );
+
+  // Event handlers are intentionally NOT registered here: React can abort a
+  // render and drop the instance, which would leak entries in the global
+  // handler registry. Registration happens at commit, in encodeCreatedSubtree.
+  return instance;
+}
+
+/**
+ * Create a text instance.
+ * Used by framework adapters during React's render phase, so this must remain side-effect free.
+ */
+export function createTextInstance(text: string): TextNode {
+  return createTextNode(text);
+}
+
+function encodeCreatedSubtree(
+  encoder: ProtocolEncoder,
+  node: ElementNode | TextNode,
+  inheritedState: InheritedElementState = getRootInheritedState(),
+  inheritedTextMeasureStyle: CanonicalStyle | null = null,
+): void {
+  if (!hasDirtyFlag(node, DirtyFlags.Created)) {
+    return;
+  }
+
+  if (node.kind === NodeKind.Text) {
+    encodeCreateText(encoder, node);
+    if (inheritedTextMeasureStyle) {
+      setStyle(encoder, node.id, inheritedTextMeasureStyle);
+    }
+    markViewChanged(node);
+    clearDirtyFlags(node);
+    return;
+  }
+
+  const nodeTextMeasureStyle = inheritedTextMeasureStyleForChild(
+    node,
+    inheritedTextMeasureStyle,
+  );
+
+  const config = getTagConfig(node.originalTag) ?? defaultTagConfig;
+  // Commit-time event registration (createInstance is render-phase pure).
+  // processEventProps is idempotent, so adapters that already registered
+  // handlers imperatively (DOM shim, Solid, Vue) keep their stable handler IDs.
+  processEventProps(node, node.originalProps, config);
+  if (canRefreshCreatedMountEnvironment(node, inheritedState)) {
+    refreshCreatedMountEnvironment(node, inheritedState);
+  } else {
+    applyResolvedElementState(
+      node,
+      resolveElementState(node, config, node.originalTag, node.originalProps, inheritedState),
+    );
+  }
+  encodeCreateElement(encoder, node);
+  if (inheritedTextMeasureStyle && node.tagType === 'text' && nodeTextMeasureStyle) {
+    setStyle(encoder, node.id, nodeTextMeasureStyle);
+  }
+  markViewChanged(node);
+  const childInheritedState: InheritedElementState = {
+    rootId: node.propagatedSafeArea?.rootId ?? inheritedState.rootId,
+    direction: node.resolvedDirection,
+    writingMode: node.resolvedWritingMode,
+    lang: node.resolvedLang,
+    safeArea: node.propagatedSafeArea ?? inheritedState.safeArea,
+  };
+  for (const child of node.children) {
+    encodeCreatedSubtree(encoder, child, childInheritedState, nodeTextMeasureStyle);
+  }
+  if (node.children.length > 0) {
+    encodeChildren(encoder, node);
+  }
+  clearDirtyFlags(node);
+}
+
+function syncInheritedStateInSubtree(
+  encoder: ProtocolEncoder,
+  node: ElementNode | TextNode,
+): void {
+  if (node.kind === NodeKind.Text) {
+    return;
+  }
+
+  const config = getTagConfig(node.originalTag) ?? defaultTagConfig;
+  const previousStyle = node.style;
+  const previousProps = node.props;
+  const previousTransitions = node.transitions;
+  const previousDirection = node.resolvedDirection;
+  const previousWritingMode = node.resolvedWritingMode;
+  const previousLang = node.resolvedLang;
+  const previousSafeArea = node.propagatedSafeArea;
+  const nextState = resolveElementState(
+    node,
+    config,
+    node.originalTag,
+    node.originalProps,
+    getInheritedState(node.parent as ElementNode | RootNode | null),
+  );
+  const changedStyleKeys = collectChangedStyleKeys(previousStyle, nextState.style);
+  const styleChanged = changedStyleKeys.length > 0;
+  const propsChanged = !propsEqual(previousProps, nextState.props);
+  const transitionsChanged = !transitionsEqual(previousTransitions, nextState.transitions);
+  const inheritedStateChanged =
+    previousDirection !== nextState.resolvedDirection ||
+    previousWritingMode !== nextState.resolvedWritingMode ||
+    previousLang !== nextState.resolvedLang ||
+    !safeAreaPropagationEqual(previousSafeArea, nextState.propagatedSafeArea);
+
+  applyResolvedElementState(node, nextState);
+
+  if (!hasDirtyFlag(node, DirtyFlags.Created)) {
+    if (styleChanged) {
+      markViewChanged(node);
+      if (styleKeysAffectLayout(changedStyleKeys)) {
+        markLayoutDirtyForNode(node);
+      }
+      encodeStyleUpdate(encoder, node.id, changedStyleKeys, node.style);
+      if (node.tagType === 'text' && styleKeysAffectTextLeafMeasure(changedStyleKeys)) {
+        encodeTextLeafMeasureStyles(encoder, node);
+      }
+    }
+
+    if (transitionsChanged) {
+      markViewChanged(node);
+      setTransition(encoder, node.id, node.transitions);
+    }
+
+    if (propsChanged) {
+      markViewChanged(node);
+      getPendingCommitState(getRootIdForNode(node)).warningAnalysisDirty = true;
+      encodeProps(encoder, node);
+    } else if (
+      previousLang !== node.resolvedLang &&
+      typeof node.props.lang === 'string' &&
+      node.props.lang.length > 0
+    ) {
+      markViewChanged(node);
+      setLang(encoder, node.id, node.resolvedLang);
+    }
+  }
+
+  if (!inheritedStateChanged) {
+    return;
+  }
+
+  for (const child of node.children) {
+    syncInheritedStateInSubtree(encoder, child);
+  }
+}
+
+function syncSelectablePropsInSubtree(
+  encoder: ProtocolEncoder,
+  node: ElementNode | TextNode,
+): void {
+  if (node.kind === NodeKind.Text) {
+    return;
+  }
+
+  if (
+    !hasDirtyFlag(node, DirtyFlags.Created) &&
+    (node.tagType === 'text' || node.props.selectable !== undefined)
+  ) {
+    encodeProps(encoder, node);
+  }
+
+  for (const child of node.children) {
+    syncSelectablePropsInSubtree(encoder, child);
+  }
+}
+
+function hasCommittedViewportSizeChanged(rootId: number): boolean {
+  const currentViewport = getScreenDimensions(rootId);
+  const previousViewport = committedRootViewportSizes.get(rootId);
+  return (
+    previousViewport === undefined ||
+    previousViewport.width !== currentViewport.width ||
+    previousViewport.height !== currentViewport.height
+  );
+}
+
+function syncRootInheritedState(root: RootNode): void {
+  const enc = getEncoderForRoot(root.rootId);
+  const opCountBefore = enc.getOpCount();
+
+  for (const child of root.children) {
+    syncInheritedStateInSubtree(enc, child);
+  }
+
+  if (enc.getOpCount() > opCountBefore) {
+    commitBatch(root);
+  }
+}
+
+function syncLiveRootInheritedState(): void {
+  for (const root of liveRoots.values()) {
+    syncRootInheritedState(root);
+  }
+}
+
+/**
+ * Re-resolve inherited layout state for an already-mounted root after the host
+ * environment changes.
+ *
+ * Window state changes (viewport size, safe area insets, keyboard metrics)
+ * affect style resolution even when JSX/template props stay byte-for-byte
+ * identical. Adapters call this helper from their root window subscriptions so
+ * host-ops can recompute the affected styles without relying on framework prop
+ * diffs.
+ */
+export function syncRootWindowState(root: RootNode): void {
+  const enc = getEncoderForRoot(root.rootId);
+
+  for (const child of root.children) {
+    syncInheritedStateInSubtree(enc, child);
+  }
+
+  commitBatch(root);
+}
+
+export function syncRootInheritedWindowState(root: RootNode): void {
+  const enc = getEncoderForRoot(root.rootId);
+  const opCountBefore = enc.getOpCount();
+  const viewportChanged = hasCommittedViewportSizeChanged(root.rootId);
+
+  for (const child of root.children) {
+    syncInheritedStateInSubtree(enc, child);
+  }
+
+  if (enc.getOpCount() > opCountBefore) {
+    commitBatch(root);
+    return;
+  }
+
+  if (viewportChanged) {
+    committedRootViewportSizes.set(root.rootId, getScreenDimensions(root.rootId));
+  }
+}
+
+/**
+ * Append a child to a parent and encode the operation.
+ */
+export function appendChild(parent: ElementNode | RootNode, child: ElementNode | TextNode): void {
+  nodeAppendChild(parent, child as ElementNode);
+  const enc = getEncoderForNode(parent);
+  // Selectable re-sync must run while Created flags are still intact: its
+  // !Created gate skips nodes that encodeCreatedSubtree is about to encode in
+  // full, so only pre-existing (reparented) nodes get their props re-emitted.
+  syncSelectablePropsInSubtree(enc, child);
+  encodeCreatedSubtree(
+    enc,
+    child,
+    getInheritedState(parent),
+    inheritedTextMeasureStyleForInsertedChildren(parent),
+  );
+  markChildrenDirty(parent);
+}
+
+/**
+ * Insert a child before another child and encode the operation.
+ */
+export function insertBefore(
+  parent: ElementNode | RootNode,
+  child: ElementNode | TextNode,
+  beforeChild: ElementNode | TextNode
+): void {
+  nodeInsertBefore(parent, child as ElementNode, beforeChild as ElementNode);
+  const enc = getEncoderForNode(parent);
+  // See appendChild: run before encoding so the !Created gate is meaningful.
+  syncSelectablePropsInSubtree(enc, child);
+  encodeCreatedSubtree(
+    enc,
+    child,
+    getInheritedState(parent),
+    inheritedTextMeasureStyleForInsertedChildren(parent),
+  );
+  markChildrenDirty(parent);
+}
+
+/**
+ * Detach a child from its parent without destroying the subtree.
+ *
+ * This is the DOM-spec-style "remove from this parent, but keep the node alive"
+ * primitive required for RFC 0043 reparenting. Event handlers stay registered
+ * and descendants keep their identity so the subtree can be inserted again.
+ */
+export function detachChild(parent: ElementNode | RootNode, child: ElementNode | TextNode): void {
+  nodeRemoveChild(parent, child as ElementNode);
+  markChildrenDirty(parent);
+}
+
+/**
+ * Remove a child from a parent and destroy the detached subtree.
+ *
+ * The destructive behavior here is deliberate: existing React/Solid/Vue host
+ * configs use removeChild for final removal. RFC 0043 adds detachChild for the
+ * non-destructive DOM-shim path.
+ */
+export function removeChild(parent: ElementNode | RootNode, child: ElementNode | TextNode): void {
+  const enc = getEncoderForNode(parent);
+  const rootId = getRootIdForNode(parent);
+  // Clean up event handlers
+  cleanupNodeHandlers(child, rootId);
+  nodeRemoveChild(parent, child as ElementNode);
+  if (!hasDirtyFlag(child, DirtyFlags.Created)) {
+    // Pass rootId explicitly: the child is already severed from the tree, so
+    // walking up from it would misattribute the destroyed views to root 0.
+    destroySubtree(child, enc, rootId);
+  }
+  markChildrenDirty(parent);
+}
+
+/**
+ * Clear all children from a container and encode the operation.
+ */
+export function clearContainer(container: RootNode): void {
+  const enc = getEncoderForNode(container);
+  const rootId = container.rootId;
+  // Clean up all event handlers and destroy children
+  for (const child of container.children.slice()) {
+    cleanupNodeHandlers(child, rootId);
+    if (!hasDirtyFlag(child, DirtyFlags.Created)) {
+      destroySubtree(child, enc, rootId);
+    }
+  }
+
+  nodeClearChildren(container);
+  markChildrenDirty(container);
+}
+
+/**
+ * Destroy a root and flush the teardown batch before releasing its encoder.
+ *
+ * This is intentionally per-root instead of global reset logic so DOM handles,
+ * multi-root adapters, and HMR teardown can remove one root without affecting
+ * any others.
+ */
+export function destroyRoot(rootId: number): void {
+  const root = liveRoots.get(rootId);
+  const enc = encoders.get(rootId);
+
+  if (!root) {
+    if (enc) {
+      dispatchProtocol(enc);
+      encoders.delete(rootId);
+    }
+    unregisterInspectorRoot(rootId);
+    rootOwners.delete(rootId);
+    return;
+  }
+
+  clearContainer(root);
+  const encoder = getEncoderForRoot(rootId);
+  flushDirtyChildren(encoder, pendingCommitStateByRoot.get(rootId));
+  dispatchProtocol(encoder);
+  encoders.delete(rootId);
+  pendingCommitStateByRoot.delete(rootId);
+  unregisterInspectorRoot(rootId);
+  rootOwners.delete(rootId);
+  (globalThis as typeof globalThis & {
+    __exactDomMirror?: { remove(rootId: number): void };
+  }).__exactDomMirror?.remove(rootId);
+}
+
+/**
+ * Recursively destroy a node and all of its descendants.
+ *
+ * Important: we must encode destroys bottom-up so parents don't temporarily
+ * reference children that no longer exist during intermediate batches.
+ */
+function destroySubtree(
+  node: ElementNode | TextNode,
+  enc?: ProtocolEncoder,
+  rootId: number = getRootIdForNode(node),
+): void {
+  const encoder = enc ?? getEncoderForRoot(rootId);
+  if (node.kind === NodeKind.Element) {
+    // Copy because children array is still used by node ops.
+    const children = (node as ElementNode).children.slice();
+    for (const child of children) {
+      destroySubtree(child, encoder, rootId);
+    }
+  }
+
+  // The owning rootId is threaded through (like cleanupNodeHandlers) because
+  // the subtree may already be detached, which would resolve to root 0.
+  getPendingCommitState(rootId).changedViews.add(node.id);
+  encodeDestroy(encoder, node);
+}
+
+/**
+ * Update an element's props and encode changes.
+ */
+export function updateInstanceProps(
+  instance: ElementNode,
+  oldProps: Props,
+  newProps: Props
+): void {
+  const config = getTagConfig(instance.originalTag) ?? defaultTagConfig;
+
+  // Update style if changed
+  // NOTE: React 19 may pass the same props object for both oldProps and newProps,
+  // so we compare against the stored instance.style instead of oldProps.style
+  const previousProps = instance.originalProps ?? oldProps;
+
+  // Fast path: React 19 commits a host update whenever the props object
+  // identity changes, even if every prop value is unchanged (a parent
+  // re-render recreates the element). Shallow-equal props (style and children
+  // compared by identity) cannot change the resolved state, so skip the full
+  // resolveElementState pipeline. The same-reference case must NOT take this
+  // path: the DOM shim mutates its live props object in place and relies on
+  // full re-resolution to discover changes.
+  if (previousProps !== newProps && originalPropsShallowEqual(previousProps, newProps)) {
+    instance.originalProps = newProps;
+    return;
+  }
+
+  const oldCanonicalProps = instance.props;
+  const oldStyle = instance.style;
+  const oldResolvedDirection = instance.resolvedDirection;
+  const oldResolvedWritingMode = instance.resolvedWritingMode;
+  const oldResolvedLang = instance.resolvedLang;
+  const oldPropagatedSafeArea = instance.propagatedSafeArea;
+  const oldTransitions = instance.transitions;
+  const oldParagraphKey = instance.paragraphKey;
+  const nextState = resolveElementState(
+    instance,
+    config,
+    instance.originalTag,
+    newProps,
+    getInheritedState(instance.parent as ElementNode | RootNode | null),
+  );
+  const newCanonicalProps = nextState.props;
+  const newStyle = nextState.style;
+  const newTransitions = nextState.transitions;
+  const changedStyleKeys = collectChangedStyleKeys(oldStyle, newStyle);
+  const styleChanged = changedStyleKeys.length > 0;
+  const transitionsChanged = !transitionsEqual(oldTransitions, newTransitions);
+  const propsChanged = !propsEqual(oldCanonicalProps, newCanonicalProps);
+  const textContentChanged =
+    oldCanonicalProps.textContent !== newCanonicalProps.textContent ||
+    oldCanonicalProps.value !== newCanonicalProps.value;
+  const textMeasureChanged =
+    instance.tagType === 'text' && oldParagraphKey !== nextState.paragraphKey;
+  const inheritedStateChanged =
+    oldResolvedDirection !== nextState.resolvedDirection ||
+    oldResolvedWritingMode !== nextState.resolvedWritingMode ||
+    oldResolvedLang !== nextState.resolvedLang ||
+    !safeAreaPropagationEqual(oldPropagatedSafeArea, nextState.propagatedSafeArea);
+
+  applyResolvedElementState(instance, nextState);
+
+  // Update events if changed
+  const eventsChanged = eventPropsChanged(previousProps, newProps);
+
+  if (eventsChanged) {
+    processEventProps(instance, newProps, config);
+  }
+
+  // Store the new original props for future diffing
+  instance.originalProps = newProps;
+
+  if (hasDirtyFlag(instance, DirtyFlags.Created)) {
+    return;
+  }
+
+  const enc = getEncoderForNode(instance);
+
+  if (styleChanged) {
+    markViewChanged(instance);
+    if (styleKeysAffectLayout(changedStyleKeys)) {
+      markLayoutDirtyForNode(instance);
+    }
+    encodeStyleUpdate(enc, instance.id, changedStyleKeys, instance.style);
+    if (instance.tagType === 'text' && styleKeysAffectTextLeafMeasure(changedStyleKeys)) {
+      encodeTextLeafMeasureStyles(enc, instance);
+    }
+  }
+
+  if (transitionsChanged) {
+    markViewChanged(instance);
+    setTransition(enc, instance.id, instance.transitions);
+  }
+
+  if (propsChanged) {
+    markViewChanged(instance);
+    getPendingCommitState(getRootIdForNode(instance)).warningAnalysisDirty = true;
+    const canPatchStableTextContent =
+      textContentChanged &&
+      !styleChanged &&
+      canPatchElementTextWithoutLayout(instance, newProps);
+    if (
+      (textMeasureChanged || textContentChanged) &&
+      !canPatchStableTextContent
+    ) {
+      markLayoutDirtyForNode(instance);
+    }
+    if (canPatchStableTextContent && typeof newCanonicalProps.textContent === 'string') {
+      setTextContent(enc, instance.id, newCanonicalProps.textContent);
+    } else {
+      encodeProps(enc, instance);
+    }
+  } else if (
+    oldResolvedLang !== instance.resolvedLang &&
+    typeof instance.props.lang === 'string' &&
+    instance.props.lang.length > 0
+  ) {
+    markViewChanged(instance);
+    setLang(enc, instance.id, instance.resolvedLang);
+  }
+
+  if (oldCanonicalProps.selectable !== newCanonicalProps.selectable) {
+    for (const child of instance.children) {
+      syncSelectablePropsInSubtree(enc, child);
+    }
+  }
+
+  if (inheritedStateChanged) {
+    for (const child of instance.children) {
+      syncInheritedStateInSubtree(enc, child);
+    }
+  }
+
+  if (eventsChanged) {
+    markViewChanged(instance);
+    getPendingCommitState(getRootIdForNode(instance)).warningAnalysisDirty = true;
+    encodeEvents(enc, instance);
+  }
+}
+
+/**
+ * Update a text node's content and encode the change.
+ */
+export function updateTextContent(instance: TextNode, newText: string): void {
+  instance.text = newText;
+  if (hasDirtyFlag(instance, DirtyFlags.Created)) {
+    return;
+  }
+  markViewChanged(instance);
+  if (!canPatchTextNodeWithoutLayout(instance)) {
+    markLayoutDirtyForNode(instance);
+  }
+  setTextContent(getEncoderForNode(instance), instance.id, newText);
+}
+
+/**
+ * Finalize initial children after tree building.
+ * Kept as a no-op because protocol encoding happens only once React commits placement.
+ */
+export function finalizeInstance(instance: ElementNode): void {
+  void instance;
+}
+
+/**
+ * Commit the batch - set root styles, compute layout, and dispatch to native.
+ */
+export function commitBatch(container: RootNode): void {
+  const enc = getEncoderForRoot(container.rootId);
+  const state = getPendingCommitState(container.rootId);
+  const rootChildrenDirty =
+    hasDirtyFlag(container, DirtyFlags.Created) ||
+    hasDirtyFlag(container, DirtyFlags.Children);
+  if (rootChildrenDirty) {
+    state.dirtyChildren.add(container);
+    state.layoutDirty = true;
+  }
+
+  flushDirtyChildren(enc, state);
+
+  const { width, height } = getScreenDimensions(container.rootId);
+  const previousViewport = committedRootViewportSizes.get(container.rootId);
+  const viewportChanged =
+    previousViewport === undefined ||
+    previousViewport.width !== width ||
+    previousViewport.height !== height;
+
+  if (viewportChanged) {
+    committedRootViewportSizes.set(container.rootId, { width, height });
+    state.layoutDirty = true;
+    state.changedViews.add(container.id);
+
+    setStyle(enc, container.id, {
+      width: { type: 'points', value: width },
+      height: { type: 'points', value: height },
+      flexDirection: 'column',
+      alignItems: 'stretch',
+      justifyContent: 'flex-start',
+    });
+  }
+
+  if (state.layoutDirty) {
+    enc.computeLayout(container.id, width, height);
+  }
+
+  if (enc.getOpCount() > 0) {
+    dispatchProtocol(enc);
+  }
+  const changedViews = Array.from(state.changedViews);
+  const analyzeWarnings = state.warningAnalysisDirty;
+  state.layoutDirty = false;
+  state.warningAnalysisDirty = false;
+  state.changedViews.clear();
+  clearDirtyFlags(container);
+  notifyCommit(container, {
+    changedViews,
+    analyzeWarnings,
+  });
+  syncKeyboardAvoidanceAfterCommit(container.rootId);
+  // Plain-web pixels for host-ops adapters: when the DOM mirror is installed
+  // (no protocol host on the page), it re-renders this root's node tree into
+  // real DOM after every commit. Undefined everywhere else.
+  (globalThis as typeof globalThis & {
+    __exactDomMirror?: { sync(root: RootNode): void };
+  }).__exactDomMirror?.sync(container);
+}
+
+/**
+ * Render a minimal fallback message when framework rendering fails.
+ * This keeps the native tree in a coherent state instead of leaving the app blank.
+ */
+export function renderErrorFallback(container: RootNode, message: string): void {
+  const enc = getEncoderForRoot(container.rootId);
+  const fallbackProps: Props = {
+    style: {
+      color: '#ff3b30',
+      padding: 16,
+      fontSize: 14,
+    },
+  };
+
+  clearContainer(container);
+
+  const fallback = createInstance('Text', fallbackProps);
+  encodeCreateElement(enc, fallback);
+
+  const text = createTextNode(message);
+  encodeCreateText(enc, text);
+
+  nodeAppendChild(fallback, text);
+  nodeAppendChild(container, fallback);
+  encodeChildren(enc, fallback);
+  encodeChildren(enc, container);
+  commitBatch(container);
+}
+
+/**
+ * Create the root container and register it with native.
+ *
+ * @param rootId - Root ID for multi-root support (default 0 = single root)
+ * @param owner - Optional public adapter owner name. When supplied, the root
+ *   ID is claimed so another adapter/DOM handle cannot silently reuse it.
+ */
+export function createRoot(rootId: number = 0, owner?: string): RootNode {
+  if (liveRoots.has(rootId)) {
+    throw new Error(`Root ${rootId} is already initialized.`);
+  }
+
+  if (owner) {
+    claimRoot(rootId, owner);
+  }
+
+  const root = createRootNode(rootId);
+  const enc = getEncoderForRoot(rootId);
+  enc.createView(root.id, NodeType.View);
+  liveRoots.set(root.rootId, root);
+  ensureLocaleRootSync();
+  ensureAccessibilityRootSync();
+  registerRoot(root);
+
+  const ensureAgentServer = (
+    globalThis as {
+      __exactEnsureAgentServer?: (() => void) | undefined;
+    }
+  ).__exactEnsureAgentServer;
+  const shouldBootAgentServer =
+    (globalThis as {
+      __exactAgentBootstrap?: {
+        boot?: boolean;
+      };
+    }).__exactAgentBootstrap?.boot === true ||
+    (typeof process === 'object' &&
+      process !== null &&
+      typeof process.env?.EXACT_AGENT_BOOT === 'string' &&
+      process.env.EXACT_AGENT_BOOT === '1');
+
+  if (shouldBootAgentServer && typeof ensureAgentServer === 'function') {
+    ensureAgentServer();
+  }
+
+  return root;
+}
+
+export function unregisterInspectorRoot(rootId: number): void {
+  liveRoots.delete(rootId);
+  committedRootViewportSizes.delete(rootId);
+  pendingCommitStateByRoot.delete(rootId);
+  maybeDisposeLocaleRootSync();
+  maybeDisposeAccessibilityRootSync();
+  unregisterRoot(rootId);
+}
+
+export function _resetHostOpsState(): void {
+  liveRoots.clear();
+  rootOwners.clear();
+  committedRootViewportSizes.clear();
+  pendingCommitStateByRoot.clear();
+  maybeDisposeLocaleRootSync();
+  maybeDisposeAccessibilityRootSync();
+  encoders.clear();
+  warnedAutoDirectionTags.clear();
+  resetProtocolTapForTests();
+  resetKeyboardAvoidanceState();
+  clearFocusedTarget();
+}
+
+// ---------------------------------------------------------------------------
+// LLP 0281 stage 0 — the host channel-application seam
+// ---------------------------------------------------------------------------
+//
+// A value-channel style sink (a `transform`/`opacity` attr driven by a
+// frame-coalesced channel value) must reach pixels as compositor-only work,
+// bypassing the reactive flush and the host-ops prop diff entirely. Hosts
+// that can do that register an applier here (the web dom-mirror writes the
+// style straight onto the DOM node); the Contract runtime calls
+// `applyHostChannelStyle` per coalesced frame and falls back to an ordinary
+// coalesced prop update when no applier is installed (correct semantics,
+// slower path — the native fast path arrives with LLP 0099's substrate).
+
+export type HostChannelStyleApplier = (
+  /** The host-ops element node the sink is bound to. */
+  node: unknown,
+  /** Lowered style prop name (`transform`, `opacity`). */
+  styleProp: string,
+  /** Evaluated sink value (string transform, numeric opacity, ...). */
+  value: unknown,
+) => boolean;
+
+let hostChannelStyleApplier: HostChannelStyleApplier | null = null;
+
+/** Install (or clear, with null) the host's channel style applier. */
+export function setHostChannelStyleApplier(next: HostChannelStyleApplier | null): void {
+  hostChannelStyleApplier = next;
+}
+
+export function getHostChannelStyleApplier(): HostChannelStyleApplier | null {
+  return hostChannelStyleApplier;
+}
+
+/**
+ * Apply a channel-driven style value through the host fast path. Returns
+ * false when no host applier is installed or the applier declined the node
+ * — callers then fall back to the coalesced host-ops update.
+ */
+export function applyHostChannelStyle(node: unknown, styleProp: string, value: unknown): boolean {
+  if (!hostChannelStyleApplier) {
+    return false;
+  }
+  try {
+    return hostChannelStyleApplier(node, styleProp, value);
+  } catch (error) {
+    console.warn('[exact] host channel style applier failed', error);
+    return false;
+  }
+}