@ccheever/exact-renderer 0.1.0

package/src/__tests__/host-ops.test.ts

@@ -0,0 +1,2234 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { _clearHandlers } from '../host-config.js';
+import {
+  _getResolveElementStateCallCount,
+  _resetResolveElementStateCallCount,
+  _resetHostOpsState,
+  _getEncoder,
+  commitBatch,
+  destroyRoot,
+  dispatchSyntheticEvent,
+  detachChild,
+  EventType,
+  appendChild,
+  createElementNode,
+  createInstance,
+  createRoot,
+  createTextInstance,
+  getHandler,
+  getRootOwner,
+  getTagConfig,
+  nodeAppendChild,
+  processEventProps,
+  removeChild,
+  renderErrorFallback,
+  syncRootInheritedWindowState,
+  updateInstanceProps,
+  updateTextContent,
+} from '../host-ops.js';
+import { PropId } from '@exact/core/protocol/opcodes';
+import {
+  _resetInspectorState,
+  getRootNode,
+  getScrollMetrics,
+  resolveTargetDetails,
+  serializeLayout,
+  setScrollOffset,
+  subscribeAgentEvents,
+} from '../inspector.js';
+import { NodeKind, _resetNodeIdCounter } from '../nodes/index.js';
+import {
+  _resetExactLocaleForTests,
+  NodeType,
+  setExactLocaleOverride,
+} from '@exact/core';
+import {
+  _resetExperienceRegistryForTests,
+  upsertFloatingPosition,
+} from '@exact/core/agent';
+import { _resetWindowRuntimeForTests } from '../../../../js/src/window-management.js';
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  (
+    globalThis as typeof globalThis & {
+      exact?: {
+        dispatch: ReturnType<typeof vi.fn>;
+        screenWidth: number;
+        screenHeight: number;
+        screenScale: number;
+        safeAreaInsets: {
+          top: number;
+          right: number;
+          bottom: number;
+          left: number;
+        };
+      };
+    }
+  ).exact = {
+    dispatch: vi.fn(),
+    screenWidth: 393,
+    screenHeight: 852,
+    screenScale: 2,
+    safeAreaInsets: {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    },
+  };
+  _resetNodeIdCounter();
+  _clearHandlers();
+  _resetHostOpsState();
+  _resetInspectorState();
+  _resetExperienceRegistryForTests();
+  _resetExactLocaleForTests();
+  _resetWindowRuntimeForTests();
+});
+
+afterEach(() => {
+  vi.runOnlyPendingTimers();
+  vi.useRealTimers();
+  _resetHostOpsState();
+  _resetInspectorState();
+  _resetExperienceRegistryForTests();
+  _resetExactLocaleForTests();
+  _resetWindowRuntimeForTests();
+  delete (
+    globalThis as typeof globalThis & {
+      exact?: unknown;
+    }
+  ).exact;
+});
+
+describe('renderErrorFallback', () => {
+  it('replaces the container contents with a text fallback node', () => {
+    const root = createRoot();
+
+    renderErrorFallback(root, 'Render error: boom');
+
+    expect(root.children).toHaveLength(1);
+
+    const fallback = root.children[0];
+    expect(fallback.kind).toBe(NodeKind.Element);
+    expect(fallback.originalTag).toBe('Text');
+    expect(fallback.children).toHaveLength(1);
+
+    const fallbackText = fallback.children[0];
+    expect(fallbackText?.kind).toBe(NodeKind.Text);
+    if (fallbackText?.kind === NodeKind.Text) {
+      expect(fallbackText.text).toBe('Render error: boom');
+    }
+  });
+});
+
+describe('render-phase encoding', () => {
+  it('defers subtree creation until the committed placement step', () => {
+    const root = createRoot();
+    const encoder = _getEncoder();
+    encoder.reset();
+
+    const parent = createInstance('View', {
+      style: {
+        padding: 12,
+      },
+    });
+    const child = createTextInstance('Millbrae');
+
+    nodeAppendChild(parent, child);
+    expect(encoder.getOpCount()).toBe(0);
+
+    appendChild(root, parent);
+    expect(encoder.getOpCount()).toBeGreaterThan(0);
+  });
+
+  it('re-emits the root create op when flushing dirty root children', () => {
+    const root = createRoot();
+    const encoder = _getEncoder();
+    const createViewSpy = vi.spyOn(encoder, 'createView');
+
+    encoder.reset();
+    createViewSpy.mockClear();
+
+    const child = createInstance('View', {});
+    appendChild(root, child);
+    commitBatch(root);
+
+    expect(createViewSpy).toHaveBeenCalledWith(root.id, NodeType.View);
+  });
+
+  it('coalesces repeated root child changes into one commit-time sync', () => {
+    const root = createRoot();
+    const encoder = _getEncoder();
+    const setChildrenSpy = vi.spyOn(encoder, 'setChildren');
+
+    encoder.reset();
+    setChildrenSpy.mockClear();
+
+    const first = createInstance('View', {});
+    const second = createInstance('View', {});
+    const third = createInstance('View', {});
+
+    appendChild(root, first);
+    appendChild(root, second);
+    appendChild(root, third);
+
+    expect(setChildrenSpy).not.toHaveBeenCalled();
+
+    commitBatch(root);
+
+    expect(setChildrenSpy).toHaveBeenCalledTimes(1);
+    expect(setChildrenSpy).toHaveBeenCalledWith(root.id, [
+      first.id,
+      second.id,
+      third.id,
+    ]);
+  });
+
+  it('applies image resize mode as a native style override', () => {
+    const instance = createInstance('Image', {
+      source: 'https://example.com/hero.png',
+      objectFit: 'contain',
+    });
+
+    expect(instance.style.resizeMode).toBe('contain');
+    expect(instance.props.imageSource).toBe('https://example.com/hero.png');
+  });
+
+  it('re-resolves logical properties against inherited rtl direction on mount', () => {
+    const root = createRoot();
+    const parent = createInstance('View', {
+      style: {
+        direction: 'rtl',
+      },
+    });
+    const child = createInstance('View', {
+      style: {
+        marginStart: 12,
+      },
+    });
+
+    nodeAppendChild(parent, child);
+    appendChild(root, parent);
+
+    expect(child.style.marginRight).toEqual({ type: 'points', value: 12 });
+    expect(child.style.marginLeft).toBeUndefined();
+  });
+
+  it('applies container safe area to the direct root child and consumes it for descendants', () => {
+    const root = createRoot();
+    globalThis.__exactSafeAreaInsetsChanged?.(20, 0, 34, 0);
+
+    const parent = createInstance('View', {});
+    const childScroll = createInstance('ScrollView', {});
+
+    nodeAppendChild(parent, childScroll);
+    appendChild(root, parent);
+
+    expect(parent.safeAreaState?.appliedInsets).toMatchObject({
+      top: 20,
+      bottom: 34,
+    });
+    expect(parent.style.paddingTop).toEqual({ type: 'points', value: 20 });
+    expect(parent.style.paddingBottom).toEqual({ type: 'points', value: 34 });
+    expect(childScroll.safeAreaState?.appliedInsets.top).toBe(0);
+    expect(childScroll.safeAreaState?.appliedInsets.bottom).toBe(0);
+  });
+
+  it('uses React Native flex shrink defaults for RN-style elements', () => {
+    const instance = createInstance('View', {});
+
+    expect(instance.style.flexDirection).toBe('column');
+    expect(instance.style.flexShrink).toBe(0);
+  });
+
+  it('applies ScrollView content container layout style to native scroll children', () => {
+    const scroll = createInstance('ScrollView', {
+      style: {
+        width: 320,
+        flex: 1,
+      },
+      contentContainerStyle: {
+        gap: 16,
+        paddingBottom: 28,
+      },
+    });
+
+    expect(scroll.style.flexDirection).toBe('column');
+    expect(scroll.style.flexGrow).toBe(1);
+    expect(scroll.style.flexShrink).toBe(1);
+    expect(scroll.style.rowGap).toBe(16);
+    expect(scroll.style.columnGap).toBe(16);
+    expect(scroll.style.paddingBottom).toEqual({ type: 'points', value: 28 });
+  });
+
+  it('gives unheighted single-line inputs a native control minimum height', () => {
+    const input = createInstance('input', {});
+    const explicitHeight = createInstance('input', {
+      style: { height: 28 },
+    });
+    const multiline = createInstance('input', {
+      multiline: true,
+    });
+
+    expect(input.style.minHeight).toEqual({ type: 'points', value: 36 });
+    expect(explicitHeight.style.height).toEqual({ type: 'points', value: 28 });
+    expect(explicitHeight.style.minHeight).toBeUndefined();
+    expect(multiline.style.minHeight).toBeUndefined();
+  });
+
+  it('lifts multiline input line count into native style metadata', () => {
+    const explicitLines = createInstance('input', {
+      multiline: true,
+      numberOfLines: 3,
+    });
+    const implicitLines = createInstance('input', {
+      multiline: true,
+    });
+
+    expect(explicitLines.style.numberOfLines).toBe(3);
+    expect(explicitLines.style.minHeight).toBeUndefined();
+    expect(implicitLines.style.numberOfLines).toBe(2);
+  });
+
+  it('gives built-in native toggles a stable layout footprint', () => {
+    const toggle = createInstance('Toggle', {
+      value: false,
+    });
+    const explicitToggle = createInstance('Toggle', {
+      value: false,
+      style: {
+        width: 60,
+        height: 32,
+      },
+    });
+
+    expect(toggle.style.minWidth).toEqual({ type: 'points', value: 46 });
+    expect(toggle.style.minHeight).toEqual({ type: 'points', value: 28 });
+    expect(explicitToggle.style.width).toEqual({ type: 'points', value: 60 });
+    expect(explicitToggle.style.height).toEqual({ type: 'points', value: 32 });
+    expect(explicitToggle.style.minWidth).toBeUndefined();
+    expect(explicitToggle.style.minHeight).toBeUndefined();
+  });
+
+  it('approximates root flex children as viewport-filling when no native layout bridge is installed', () => {
+    if (globalThis.exact) {
+      globalThis.exact.screenWidth = 1164;
+      globalThis.exact.screenHeight = 721;
+    }
+    const root = createRoot();
+    const screen = createInstance('View', {
+      style: {
+        flex: 1,
+        minHeight: '100%',
+        width: '100%',
+      },
+    });
+
+    appendChild(root, screen);
+    commitBatch(root);
+
+    const layout = serializeLayout();
+    const screenFrame = layout.frames.find((frame) => frame.viewId === screen.id);
+    expect(screenFrame).toMatchObject({
+      x: 0,
+      y: 0,
+      width: 1164,
+      height: 721,
+    });
+  });
+
+  it('fills root ScrollView viewports when no explicit size is authored', () => {
+    if (globalThis.exact) {
+      globalThis.exact.screenWidth = 393;
+      globalThis.exact.screenHeight = 852;
+    }
+    const root = createRoot();
+    const scroll = createInstance('ScrollView', {
+      style: {
+        backgroundColor: '#050607',
+      },
+    });
+
+    appendChild(root, scroll);
+    commitBatch(root);
+
+    expect(scroll.style.flexGrow).toBe(1);
+    expect(scroll.style.flexShrink).toBe(1);
+    expect(scroll.style.flexBasis).toEqual({ type: 'points', value: 0 });
+    const layout = serializeLayout();
+    const scrollFrame = layout.frames.find((frame) => frame.viewId === scroll.id);
+    expect(scrollFrame).toMatchObject({
+      x: 0,
+      y: 0,
+      width: 393,
+      height: 852,
+    });
+  });
+
+  it('strips percent minHeight from root ScrollView so viewport fill still applies', () => {
+    if (globalThis.exact) {
+      globalThis.exact.screenWidth = 393;
+      globalThis.exact.screenHeight = 852;
+    }
+    const root = createRoot();
+    const scroll = createInstance('ScrollView', {
+      style: {
+        flex: 1,
+        width: '100%',
+        minHeight: '100%',
+        backgroundColor: '#050607',
+      },
+    });
+
+    appendChild(root, scroll);
+    commitBatch(root);
+
+    expect(scroll.style.minHeight).toBeUndefined();
+    expect(scroll.style.flexGrow).toBe(1);
+    expect(scroll.style.flexShrink).toBe(1);
+    expect(scroll.style.flexBasis).toEqual({ type: 'points', value: 0 });
+    const layout = serializeLayout();
+    const scrollFrame = layout.frames.find((frame) => frame.viewId === scroll.id);
+    expect(scrollFrame).toMatchObject({
+      x: 0,
+      y: 0,
+      width: 393,
+      height: 852,
+    });
+  });
+
+  it('preserves explicit root ScrollView viewport sizing', () => {
+    if (globalThis.exact) {
+      globalThis.exact.screenWidth = 393;
+      globalThis.exact.screenHeight = 852;
+    }
+    const root = createRoot();
+    const scroll = createInstance('ScrollView', {
+      style: {
+        height: 240,
+        backgroundColor: '#050607',
+      },
+    });
+
+    appendChild(root, scroll);
+    commitBatch(root);
+
+    expect(scroll.style.flexGrow).toBeUndefined();
+    expect(scroll.style.height).toEqual({ type: 'points', value: 240 });
+    const layout = serializeLayout();
+    const scrollFrame = layout.frames.find((frame) => frame.viewId === scroll.id);
+    expect(scrollFrame).toMatchObject({
+      x: 0,
+      y: 0,
+      width: 393,
+      height: 240,
+    });
+  });
+
+  it('includes native root scroll offsets in fallback agent target resolution', () => {
+    if (globalThis.exact) {
+      globalThis.exact.screenWidth = 320;
+      globalThis.exact.screenHeight = 200;
+    }
+    const root = createRoot();
+    const spacer = createInstance('View', {
+      style: {
+        height: 260,
+      },
+    });
+    const target = createInstance('Pressable', {
+      testID: 'bottom-row',
+      accessibilityLabel: 'Bottom row',
+      style: {
+        height: 40,
+      },
+    });
+
+    nodeAppendChild(root, spacer);
+    nodeAppendChild(root, target);
+    commitBatch(root);
+
+    const before = resolveTargetDetails({
+      rootId: root.rootId,
+      testId: 'bottom-row',
+    });
+    expect(before?.visibility).toBe('none');
+    expect(before?.scrollChain[0]).toMatchObject({
+      viewId: root.id,
+      type: 'Root',
+      currentOffset: { x: 0, y: 0 },
+      contentSize: { width: 320, height: 300 },
+      viewportSize: { width: 320, height: 200 },
+    });
+    expect(before?.recommendedScrollDelta).toMatchObject({
+      ancestor: {
+        viewId: root.id,
+        type: 'Root',
+      },
+      delta: { x: 0, y: 100 },
+    });
+
+    const sync = (
+      globalThis as typeof globalThis & {
+        __exactSetInspectorScrollOffset?: (
+          viewId: number,
+          offset: { x: number; y: number },
+          rootId?: number,
+        ) => { x: number; y: number } | null;
+      }
+    ).__exactSetInspectorScrollOffset;
+    expect(sync).toBeTypeOf('function');
+    expect(sync?.(root.id, { x: 0, y: 100 }, root.rootId)).toEqual({
+      x: 0,
+      y: 100,
+    });
+
+    const after = resolveTargetDetails({
+      rootId: root.rootId,
+      testId: 'bottom-row',
+    });
+    expect(after?.visibility).toBe('full');
+    expect(after?.frame).toMatchObject({
+      y: 160,
+      height: 40,
+    });
+    expect(after?.scrollChain[0]).toMatchObject({
+      viewId: root.id,
+      currentOffset: { x: 0, y: 100 },
+    });
+
+    setScrollOffset(root.id, { x: 0, y: 0 });
+  });
+
+  it('exposes ScrollView offsets and content metrics in agent diagnostics', () => {
+    if (globalThis.exact) {
+      globalThis.exact.screenWidth = 320;
+      globalThis.exact.screenHeight = 240;
+    }
+    const root = createRoot();
+    const scroll = createInstance('ScrollView', {
+      testID: 'feed-scroll',
+      style: {
+        width: 320,
+        height: 120,
+      },
+    });
+    const spacer = createInstance('View', {
+      style: {
+        height: 260,
+      },
+    });
+    const target = createInstance('Pressable', {
+      testID: 'feed-row-12',
+      accessibilityLabel: 'Feed row 12',
+      style: {
+        height: 44,
+      },
+    });
+
+    nodeAppendChild(scroll, spacer);
+    nodeAppendChild(scroll, target);
+    appendChild(root, scroll);
+    commitBatch(root);
+
+    const before = resolveTargetDetails({
+      rootId: root.rootId,
+      testId: 'feed-row-12',
+    });
+    expect(before?.visibility).toBe('none');
+    expect(before?.scrollChain[0]).toMatchObject({
+      viewId: scroll.id,
+      type: 'ScrollView',
+      currentOffset: { x: 0, y: 0 },
+      contentSize: { width: 320, height: 304 },
+      viewportSize: { width: 320, height: 120 },
+    });
+
+    setScrollOffset(scroll.id, { x: 0, y: 184 });
+
+    const metrics = getScrollMetrics(scroll.id, root.rootId);
+    expect(metrics).toMatchObject({
+      viewId: scroll.id,
+      currentOffset: { x: 0, y: 184 },
+      contentSize: { width: 320, height: 304 },
+      viewportSize: { width: 320, height: 120 },
+    });
+
+    const after = resolveTargetDetails({
+      rootId: root.rootId,
+      testId: 'feed-row-12',
+    });
+    expect(after?.visibility).toBe('full');
+    expect(after?.scrollChain[0]).toMatchObject({
+      viewId: scroll.id,
+      currentOffset: { x: 0, y: 184 },
+    });
+
+    setScrollOffset(scroll.id, { x: 0, y: 0 });
+  });
+
+  it('uses floating registry frames for fallback portal target resolution', () => {
+    if (globalThis.exact) {
+      globalThis.exact.screenWidth = 320;
+      globalThis.exact.screenHeight = 240;
+    }
+    const root = createRoot();
+    const section = createInstance('View', {
+      style: {
+        width: 320,
+        height: 220,
+        paddingLeft: 40,
+        paddingTop: 100,
+      },
+    });
+    const popover = createInstance('View', {
+      portalTarget: 'root',
+      testID: 'floating-popover',
+      style: {
+        position: 'absolute',
+        left: 80,
+        top: 120,
+        width: 200,
+        height: 120,
+        paddingLeft: 10,
+        paddingTop: 10,
+      },
+    });
+    const option = createInstance('Pressable', {
+      testID: 'floating-option',
+      style: {
+        width: 180,
+        height: 40,
+      },
+    });
+
+    nodeAppendChild(popover, option);
+    nodeAppendChild(section, popover);
+    appendChild(root, section);
+    upsertFloatingPosition({
+      id: `floating:${popover.id}`,
+      viewId: popover.id,
+      anchorViewId: section.id,
+      placement: 'bottom-start',
+      strategy: 'absolute',
+      x: 80,
+      y: 30,
+      width: 200,
+      height: 120,
+      positioned: true,
+      state: 'positioned',
+      scrolling: false,
+      updatedAt: 1,
+    });
+    commitBatch(root);
+
+    const layout = serializeLayout();
+    expect(layout.frames.find((frame) => frame.viewId === popover.id)).toMatchObject({
+      x: 80,
+      y: 30,
+      width: 200,
+      height: 120,
+    });
+    expect(layout.frames.find((frame) => frame.viewId === option.id)).toMatchObject({
+      x: 90,
+      y: 40,
+      width: 180,
+      height: 40,
+    });
+    expect(resolveTargetDetails({
+      rootId: root.rootId,
+      testId: 'floating-option',
+    })?.visibility).toBe('full');
+  });
+
+  it('shrink-wraps auto-width row children in fallback agent layout', () => {
+    if (globalThis.exact) {
+      globalThis.exact.screenWidth = 360;
+      globalThis.exact.screenHeight = 240;
+    }
+    const root = createRoot();
+    const row = createInstance('View', {
+      style: {
+        width: 320,
+        height: 80,
+        flexDirection: 'row',
+        gap: 8,
+      },
+    });
+    const flexible = createInstance('View', {
+      style: {
+        flex: 1,
+      },
+    });
+    const buttons = createInstance('View', {
+      style: {
+        flexDirection: 'row',
+        gap: 8,
+      },
+    });
+    const primary = createInstance('Pressable', {
+      accessibilityLabel: 'Primary',
+      style: {
+        width: 72,
+        height: 40,
+      },
+    });
+    const secondary = createInstance('Pressable', {
+      accessibilityLabel: 'Secondary',
+      style: {
+        width: 72,
+        height: 40,
+      },
+    });
+
+    nodeAppendChild(buttons, primary);
+    nodeAppendChild(buttons, secondary);
+    nodeAppendChild(row, flexible);
+    nodeAppendChild(row, buttons);
+    appendChild(root, row);
+    commitBatch(root);
+
+    const layout = serializeLayout();
+    const buttonsFrame = layout.frames.find((frame) => frame.viewId === buttons.id);
+    const secondaryFrame = layout.frames.find((frame) => frame.viewId === secondary.id);
+    expect(buttonsFrame).toMatchObject({
+      x: 168,
+      width: 152,
+    });
+    expect(secondaryFrame).toMatchObject({
+      x: 248,
+      width: 72,
+    });
+  });
+
+  it('wraps overflowing row children in fallback agent layout', () => {
+    if (globalThis.exact) {
+      globalThis.exact.screenWidth = 160;
+      globalThis.exact.screenHeight = 180;
+    }
+    const root = createRoot();
+    const row = createInstance('View', {
+      style: {
+        width: 120,
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 8,
+      },
+    });
+    const first = createInstance('Pressable', {
+      accessibilityLabel: 'First',
+      style: {
+        width: 56,
+        height: 24,
+      },
+    });
+    const second = createInstance('Pressable', {
+      accessibilityLabel: 'Second',
+      style: {
+        width: 56,
+        height: 24,
+      },
+    });
+    const third = createInstance('Pressable', {
+      accessibilityLabel: 'Third',
+      style: {
+        width: 56,
+        height: 24,
+      },
+    });
+
+    nodeAppendChild(row, first);
+    nodeAppendChild(row, second);
+    nodeAppendChild(row, third);
+    appendChild(root, row);
+    commitBatch(root);
+
+    const layout = serializeLayout();
+    expect(layout.frames.find((frame) => frame.viewId === row.id)).toMatchObject({
+      width: 120,
+      height: 56,
+    });
+    expect(layout.frames.find((frame) => frame.viewId === first.id)).toMatchObject({
+      x: 0,
+      y: 0,
+      width: 56,
+      height: 24,
+    });
+    expect(layout.frames.find((frame) => frame.viewId === second.id)).toMatchObject({
+      x: 64,
+      y: 0,
+      width: 56,
+      height: 24,
+    });
+    expect(layout.frames.find((frame) => frame.viewId === third.id)).toMatchObject({
+      x: 0,
+      y: 32,
+      width: 56,
+      height: 24,
+    });
+  });
+
+  it('stretches row children on the cross axis in fallback agent layout', () => {
+    if (globalThis.exact) {
+      globalThis.exact.screenWidth = 360;
+      globalThis.exact.screenHeight = 240;
+    }
+    const root = createRoot();
+    const row = createInstance('View', {
+      style: {
+        width: 320,
+        height: 80,
+        flexDirection: 'row',
+      },
+    });
+    const panel = createInstance('View', {
+      style: {
+        flex: 1,
+        minHeight: 0,
+      },
+    });
+    const tallContent = createInstance('View', {
+      style: {
+        width: 120,
+        height: 240,
+      },
+    });
+
+    nodeAppendChild(panel, tallContent);
+    nodeAppendChild(row, panel);
+    appendChild(root, row);
+    commitBatch(root);
+
+    const layout = serializeLayout();
+    const panelFrame = layout.frames.find((frame) => frame.viewId === panel.id);
+    expect(panelFrame).toMatchObject({
+      width: 320,
+      height: 80,
+    });
+  });
+
+  it('uses child content to size non-empty pressables in fallback agent layout', () => {
+    if (globalThis.exact) {
+      globalThis.exact.screenWidth = 360;
+      globalThis.exact.screenHeight = 240;
+    }
+    const root = createRoot();
+    const pressable = createInstance('Pressable', {
+      accessibilityLabel: 'Route card',
+      style: {
+        width: 280,
+        padding: 12,
+        gap: 8,
+      },
+    });
+    const title = createInstance('Text', {
+      children: 'Route title',
+      style: {
+        fontSize: 14,
+      },
+    });
+    const summary = createInstance('Text', {
+      children: 'Route summary',
+      style: {
+        fontSize: 12,
+      },
+    });
+
+    nodeAppendChild(pressable, title);
+    nodeAppendChild(pressable, summary);
+    appendChild(root, pressable);
+    commitBatch(root);
+
+    const layout = serializeLayout();
+    const pressableFrame = layout.frames.find((frame) => frame.viewId === pressable.id);
+    expect(pressableFrame?.height).toBeGreaterThan(44);
+  });
+
+  it('adds sibling safe-area inset expansion into remaining container insets', () => {
+    const root = createRoot();
+    globalThis.__exactSafeAreaInsetsChanged?.(0, 0, 34, 0);
+
+    const screen = createInstance('View', {
+      safeArea: 'none',
+    });
+    const content = createInstance('ScrollView', {});
+    const footer = createInstance('View', {
+      safeAreaInset: {
+        edge: 'bottom',
+        size: 56,
+      },
+    });
+
+    nodeAppendChild(screen, content);
+    nodeAppendChild(screen, footer);
+    appendChild(root, screen);
+
+    expect(content.safeAreaState?.siblingExpansion.bottom).toBe(56);
+    expect(content.safeAreaState?.appliedInsets.bottom).toBe(90);
+  });
+
+  it('does not consume container insets when a parent only opts into keyboard avoidance', () => {
+    const root = createRoot();
+    globalThis.__exactSafeAreaInsetsChanged?.(0, 0, 34, 0);
+    globalThis.__exactKeyboardStateChanged?.({
+      visible: true,
+      mode: 'docked',
+      progress: 1,
+      occlusion: {
+        x: 0,
+        y: 516,
+        width: 393,
+        height: 336,
+      },
+    });
+
+    const keyboardOnlyContainer = createInstance('View', {
+      safeArea: {
+        regions: 'keyboard',
+      },
+    });
+    const containerChild = createInstance('View', {
+      safeArea: {
+        regions: 'container',
+      },
+    });
+
+    nodeAppendChild(keyboardOnlyContainer, containerChild);
+    appendChild(root, keyboardOnlyContainer);
+
+    expect(keyboardOnlyContainer.safeAreaState?.appliedInsets.bottom).toBe(336);
+    expect(containerChild.safeAreaState?.sourceRegions.container.bottom).toBe(34);
+    expect(containerChild.safeAreaState?.appliedInsets.bottom).toBe(34);
+  });
+});
+
+describe('processEventProps', () => {
+  it('binds TextInput change events and normalizes native text payloads', () => {
+    const onChangeText = vi.fn();
+    const onChange = vi.fn();
+    const instance = createElementNode('input', 'TextInput', true, {});
+    const config = getTagConfig('TextInput');
+
+    expect(config).not.toBeNull();
+    processEventProps(instance, { onChangeText, onChange }, config!);
+
+    const binding = instance.events.get(EventType.Change);
+    expect(binding).toBeDefined();
+
+    const dispatch = (
+      globalThis as {
+        __exactDispatchEvent?: (handlerId: number, payload: unknown) => void;
+      }
+    ).__exactDispatchEvent;
+
+    expect(dispatch).toBeTypeOf('function');
+
+    dispatch!(binding!.handlerId, {
+      nodeId: instance.id,
+      text: 'Millbrae',
+      value: 'Millbrae',
+      textRevision: 3,
+      classification: 'accepted-transaction',
+    });
+
+    expect(onChangeText).toHaveBeenCalledWith('Millbrae');
+    expect(onChange).toHaveBeenCalledWith({
+      nativeEvent: {
+        text: 'Millbrae',
+        textRevision: 3,
+        classification: 'accepted-transaction',
+        textChanged: true,
+      },
+    });
+  });
+
+  it('dispatches TextInput submit editing from native Enter keydown', () => {
+    const onSubmitEditing = vi.fn();
+    const onKeyDown = vi.fn();
+    const instance = createElementNode('input', 'TextInput', true, {});
+    const config = getTagConfig('TextInput');
+
+    expect(config).not.toBeNull();
+    processEventProps(instance, { onSubmitEditing, onKeyDown }, config!);
+
+    const binding = instance.events.get(EventType.KeyDown);
+    expect(binding).toBeDefined();
+
+    const dispatch = (
+      globalThis as {
+        __exactDispatchEvent?: (handlerId: number, payload: unknown) => void;
+      }
+    ).__exactDispatchEvent;
+
+    expect(dispatch).toBeTypeOf('function');
+
+    dispatch!(binding!.handlerId, {
+      nodeId: instance.id,
+      nativeEvent: { key: 'a', code: 'KeyA' },
+    });
+    expect(onKeyDown).toHaveBeenCalledTimes(1);
+    expect(onSubmitEditing).not.toHaveBeenCalled();
+
+    dispatch!(binding!.handlerId, {
+      nodeId: instance.id,
+      nativeEvent: { key: 'Enter', code: 'Enter' },
+    });
+    expect(onKeyDown).toHaveBeenCalledTimes(2);
+    expect(onSubmitEditing).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not dispatch TextInput submit editing for multiline Enter', () => {
+    const onSubmitEditing = vi.fn();
+    const instance = createElementNode('input', 'TextInput', true, {});
+    const config = getTagConfig('TextInput');
+
+    expect(config).not.toBeNull();
+    processEventProps(instance, { multiline: true, onSubmitEditing }, config!);
+
+    const binding = instance.events.get(EventType.KeyDown);
+    expect(binding).toBeDefined();
+
+    const dispatch = (
+      globalThis as {
+        __exactDispatchEvent?: (handlerId: number, payload: unknown) => void;
+      }
+    ).__exactDispatchEvent;
+
+    expect(dispatch).toBeTypeOf('function');
+
+    dispatch!(binding!.handlerId, {
+      nodeId: instance.id,
+      nativeEvent: { key: 'Enter', code: 'Enter' },
+    });
+    expect(onSubmitEditing).not.toHaveBeenCalled();
+  });
+
+  it('dispatches TextInput selection events without reporting text edits', () => {
+    const onChangeText = vi.fn();
+    const onSelectionChange = vi.fn();
+    const instance = createElementNode('input', 'TextInput', true, {});
+    const config = getTagConfig('TextInput');
+
+    expect(config).not.toBeNull();
+    processEventProps(instance, { onChangeText, onSelectionChange }, config!);
+
+    const binding = instance.events.get(EventType.Change);
+    expect(binding).toBeDefined();
+
+    const dispatch = (
+      globalThis as {
+        __exactDispatchEvent?: (handlerId: number, payload: unknown) => void;
+      }
+    ).__exactDispatchEvent;
+
+    expect(dispatch).toBeTypeOf('function');
+
+    dispatch!(binding!.handlerId, {
+      nodeId: instance.id,
+      text: 'Millbrae',
+      selectionStart: 2,
+      selectionEnd: 6,
+      textChanged: false,
+      textRevision: 4,
+      classification: 'current-echo',
+    });
+
+    expect(onChangeText).not.toHaveBeenCalled();
+    expect(onSelectionChange).toHaveBeenCalledWith({
+      nativeEvent: {
+        selection: {
+          start: 2,
+          end: 6,
+        },
+        text: 'Millbrae',
+        textRevision: 4,
+        classification: 'current-echo',
+      },
+    });
+  });
+
+  it('suppresses committed TextInput change callbacks during IME composition', () => {
+    const onChangeText = vi.fn();
+    const onChange = vi.fn();
+    const onSelectionChange = vi.fn();
+    const instance = createElementNode('input', 'TextInput', true, {});
+    const config = getTagConfig('TextInput');
+
+    expect(config).not.toBeNull();
+    processEventProps(instance, { onChangeText, onChange, onSelectionChange }, config!);
+
+    const binding = instance.events.get(EventType.Change);
+    expect(binding).toBeDefined();
+
+    const dispatch = (
+      globalThis as {
+        __exactDispatchEvent?: (handlerId: number, payload: unknown) => void;
+      }
+    ).__exactDispatchEvent;
+
+    expect(dispatch).toBeTypeOf('function');
+
+    dispatch!(binding!.handlerId, {
+      nodeId: instance.id,
+      text: 'とうきょう',
+      selectionStart: 5,
+      selectionEnd: 5,
+      isComposing: true,
+      compositionStart: 0,
+      compositionEnd: 5,
+      textChanged: true,
+      textRevision: 5,
+      classification: 'accepted-transaction',
+    });
+
+    expect(onChangeText).not.toHaveBeenCalled();
+    expect(onChange).not.toHaveBeenCalled();
+    expect(onSelectionChange).toHaveBeenCalledWith({
+      nativeEvent: {
+        selection: {
+          start: 5,
+          end: 5,
+        },
+        text: 'とうきょう',
+        isComposing: true,
+        compositionRange: {
+          start: 0,
+          end: 5,
+        },
+        textRevision: 5,
+        classification: 'accepted-transaction',
+      },
+    });
+  });
+
+  it('binds native toggle onValueChange through native-view change events', () => {
+    const onValueChange = vi.fn();
+    const onChange = vi.fn();
+    const toggle = createInstance('toggle', {
+      value: false,
+      onValueChange,
+      onChange,
+    });
+    processEventProps(toggle, toggle.originalProps, getTagConfig('toggle')!);
+
+    const binding = toggle.events.get(EventType.Change);
+    expect(binding).toBeDefined();
+
+    dispatchSyntheticEvent(toggle, EventType.Change, { value: true });
+
+    expect(onValueChange).toHaveBeenCalledWith(true);
+    expect(onChange).toHaveBeenCalledWith({ value: true });
+  });
+
+  it('binds Image lifecycle callbacks through native change events', () => {
+    const onLoadStart = vi.fn();
+    const onLoad = vi.fn();
+    const onDisplay = vi.fn();
+    const onError = vi.fn();
+    const instance = createElementNode('image', 'Image', true, {});
+    const config = getTagConfig('Image');
+
+    expect(config).not.toBeNull();
+    processEventProps(
+      instance,
+      { onLoadStart, onLoad, onDisplay, onError },
+      config!,
+    );
+
+    const binding = instance.events.get(EventType.Change);
+    expect(binding).toBeDefined();
+
+    const dispatch = (
+      globalThis as {
+        __exactDispatchEvent?: (handlerId: number, payload: unknown) => void;
+      }
+    ).__exactDispatchEvent;
+
+    expect(dispatch).toBeTypeOf('function');
+
+    dispatch!(binding!.handlerId, {
+      event: 'loadStart',
+      src: 'https://example.com/hero.png',
+    });
+    dispatch!(binding!.handlerId, {
+      nativeEvent: {
+        event: 'load',
+        src: 'https://example.com/hero.png',
+        width: 640,
+        height: 360,
+        cacheType: 'memory',
+      },
+    });
+    dispatch!(binding!.handlerId, {
+      event: 'display',
+    });
+    dispatch!(binding!.handlerId, {
+      event: 'error',
+      error: 'Image failed to load.',
+    });
+
+    expect(onLoadStart).toHaveBeenCalledTimes(1);
+    expect(onLoad).toHaveBeenCalledWith({
+      source: {
+        uri: 'https://example.com/hero.png',
+        width: 640,
+        height: 360,
+      },
+      cacheType: 'memory',
+    });
+    expect(onDisplay).toHaveBeenCalledTimes(1);
+    expect(onError).toHaveBeenCalledWith({
+      error: 'Image failed to load.',
+    });
+  });
+
+  it('throttles ScrollView scroll events when scrollEventThrottle is set', () => {
+    const onScroll = vi.fn();
+    const instance = createElementNode('scroll', 'ScrollView', true, {});
+    const config = getTagConfig('ScrollView');
+
+    expect(config).not.toBeNull();
+    processEventProps(
+      instance,
+      {
+        onScroll,
+        scrollEventThrottle: 16,
+      },
+      config!,
+    );
+
+    const binding = instance.events.get(EventType.Scroll);
+    expect(binding).toBeDefined();
+
+    const dispatch = (
+      globalThis as {
+        __exactDispatchEvent?: (handlerId: number, payload: unknown) => void;
+      }
+    ).__exactDispatchEvent;
+
+    expect(dispatch).toBeTypeOf('function');
+
+    dispatch!(binding!.handlerId, {
+      x: 0,
+      y: 0,
+      nativeEvent: { timestamp: 0 },
+    });
+    dispatch!(binding!.handlerId, {
+      x: 0,
+      y: 8,
+      nativeEvent: { timestamp: 8 },
+    });
+    dispatch!(binding!.handlerId, {
+      x: 0,
+      y: 16,
+      nativeEvent: { timestamp: 16 },
+    });
+
+    expect(onScroll).toHaveBeenCalledTimes(2);
+    expect(onScroll.mock.calls.map(([event]) => event.nativeEvent.contentOffset.y)).toEqual([
+      0,
+      16,
+    ]);
+  });
+
+  it('updates ScrollView throttling when only scrollEventThrottle changes', () => {
+    const onScroll = vi.fn();
+    const instance = createInstance('ScrollView', {
+      onScroll,
+      scrollEventThrottle: 16,
+    });
+    // Event registration is deferred to commit (LLP 0159); simulate it here.
+    processEventProps(instance, instance.originalProps, getTagConfig('ScrollView')!);
+
+    const binding = instance.events.get(EventType.Scroll);
+    expect(binding).toBeDefined();
+
+    updateInstanceProps(
+      instance,
+      {
+        onScroll,
+        scrollEventThrottle: 0,
+      },
+      {
+        onScroll,
+        scrollEventThrottle: 0,
+      },
+    );
+
+    const dispatch = (
+      globalThis as {
+        __exactDispatchEvent?: (handlerId: number, payload: unknown) => void;
+      }
+    ).__exactDispatchEvent;
+
+    expect(dispatch).toBeTypeOf('function');
+
+    dispatch!(binding!.handlerId, {
+      x: 0,
+      y: 0,
+      nativeEvent: { timestamp: 0 },
+    });
+    dispatch!(binding!.handlerId, {
+      x: 0,
+      y: 8,
+      nativeEvent: { timestamp: 8 },
+    });
+
+    expect(onScroll).toHaveBeenCalledTimes(2);
+  });
+});
+
+describe('updateInstanceProps', () => {
+  it('refreshes press handlers against the instance stored props', () => {
+    const firstHandler = vi.fn();
+    const secondHandler = vi.fn();
+    const instance = createInstance('Pressable', {
+      onPress: firstHandler,
+    });
+    // Event registration is deferred to commit (LLP 0159); simulate it here.
+    processEventProps(instance, instance.originalProps, getTagConfig('Pressable')!);
+
+    const binding = instance.events.get(EventType.Press);
+    expect(binding).toBeDefined();
+
+    updateInstanceProps(
+      instance,
+      {
+        onPress: secondHandler,
+      },
+      {
+        onPress: secondHandler,
+      },
+    );
+
+    const dispatch = (
+      globalThis as {
+        __exactDispatchEvent?: (handlerId: number, payload: unknown) => void;
+      }
+    ).__exactDispatchEvent;
+
+    expect(dispatch).toBeTypeOf('function');
+
+    dispatch!(binding!.handlerId, {
+      nativeEvent: {
+        timestamp: Date.now(),
+      },
+    });
+
+    expect(firstHandler).not.toHaveBeenCalled();
+    expect(secondHandler).toHaveBeenCalledTimes(1);
+  });
+
+  it('routes transform-only updates through the transform patch opcode', () => {
+    const root = createRoot();
+    const encoder = _getEncoder();
+    const instance = createInstance('View', {
+      style: {
+        width: 100,
+        height: 50,
+        transform: [{ translateX: 0 }, { translateY: 0 }],
+      },
+    });
+
+    appendChild(root, instance);
+    encoder.reset();
+
+    const setStyleSpy = vi.spyOn(encoder, 'setStyle');
+    const setTransformSpy = vi.spyOn(encoder, 'setTransform');
+
+    updateInstanceProps(
+      instance,
+      {
+        style: {
+          width: 100,
+          height: 50,
+          transform: [{ translateX: 0 }, { translateY: 0 }],
+        },
+      },
+      {
+        style: {
+          width: 100,
+          height: 50,
+          transform: [{ translateX: 12 }, { translateY: 18 }],
+        },
+      },
+    );
+
+    expect(setStyleSpy).not.toHaveBeenCalled();
+    expect(setTransformSpy).toHaveBeenCalledOnce();
+    expect(setTransformSpy).toHaveBeenCalledWith(instance.id, 12, 18, 1, 0);
+    expect(encoder.getOpCount()).toBe(1);
+  });
+
+  it('routes background-color-only updates through the color patch opcode', () => {
+    const root = createRoot();
+    const encoder = _getEncoder();
+    const instance = createInstance('View', {
+      style: {
+        width: 100,
+        height: 50,
+        backgroundColor: '#ffffff',
+      },
+    });
+
+    appendChild(root, instance);
+    encoder.reset();
+
+    const setStyleSpy = vi.spyOn(encoder, 'setStyle');
+    const setBackgroundColorSpy = vi.spyOn(encoder, 'setBackgroundColor');
+
+    updateInstanceProps(
+      instance,
+      instance.originalProps,
+      {
+        ...instance.originalProps,
+        style: {
+          ...(instance.originalProps.style as Record<string, unknown>),
+          backgroundColor: '#112233',
+        },
+      },
+    );
+
+    expect(setStyleSpy).not.toHaveBeenCalled();
+    expect(setBackgroundColorSpy).toHaveBeenCalledOnce();
+    expect(setBackgroundColorSpy).toHaveBeenCalledWith(instance.id, {
+      r: 17,
+      g: 34,
+      b: 51,
+      a: 255,
+    });
+    expect(encoder.getOpCount()).toBe(1);
+  });
+
+  it('does not request layout for transform-only commits', () => {
+    const root = createRoot();
+    const encoder = _getEncoder();
+    const instance = createInstance('View', {
+      style: {
+        width: 100,
+        height: 50,
+        transform: [{ translateX: 0 }, { translateY: 0 }],
+      },
+    });
+
+    appendChild(root, instance);
+    commitBatch(root);
+    encoder.reset();
+
+    const computeLayoutSpy = vi.spyOn(encoder, 'computeLayout');
+    const setChildrenSpy = vi.spyOn(encoder, 'setChildren');
+
+    updateInstanceProps(
+      instance,
+      {
+        style: {
+          width: 100,
+          height: 50,
+          transform: [{ translateX: 0 }, { translateY: 0 }],
+        },
+      },
+      {
+        style: {
+          width: 100,
+          height: 50,
+          transform: [{ translateX: 12 }, { translateY: 18 }],
+        },
+      },
+    );
+    commitBatch(root);
+
+    expect(computeLayoutSpy).not.toHaveBeenCalled();
+    expect(setChildrenSpy).not.toHaveBeenCalled();
+  });
+
+  it('reports only changed view ids for transform-only render events', () => {
+    const root = createRoot();
+    const instance = createInstance('View', {
+      style: {
+        width: 100,
+        height: 50,
+        transform: [{ translateX: 0 }, { translateY: 0 }],
+      },
+    });
+    const sibling = createInstance('View', {
+      style: {
+        width: 100,
+        height: 50,
+      },
+    });
+    const renderEvents: Array<{ changedViews: number[] }> = [];
+    const unsubscribe = subscribeAgentEvents((event) => {
+      if (event.type === 'render') {
+        renderEvents.push({ changedViews: event.changedViews });
+      }
+    });
+
+    appendChild(root, instance);
+    appendChild(root, sibling);
+    commitBatch(root);
+    renderEvents.length = 0;
+
+    updateInstanceProps(
+      instance,
+      instance.originalProps,
+      {
+        ...instance.originalProps,
+        style: {
+          ...(instance.originalProps.style as Record<string, unknown>),
+          transform: [{ translateX: 12 }, { translateY: 18 }],
+        },
+      },
+    );
+    commitBatch(root);
+    unsubscribe();
+
+    expect(renderEvents).toHaveLength(1);
+    expect(renderEvents[0]?.changedViews).toEqual([instance.id]);
+  });
+
+  it('still requests layout when text content changes', () => {
+    const root = createRoot();
+    const encoder = _getEncoder();
+    const text = createTextInstance('Before');
+    const label = createInstance('Text', {});
+
+    nodeAppendChild(label, text);
+    appendChild(root, label);
+    commitBatch(root);
+    encoder.reset();
+
+    const computeLayoutSpy = vi.spyOn(encoder, 'computeLayout');
+
+    updateTextContent(text, 'After');
+    commitBatch(root);
+
+    expect(computeLayoutSpy).toHaveBeenCalledOnce();
+  });
+
+  it('copies high-word text measurement styles onto raw text leaves', () => {
+    const root = createRoot();
+    const encoder = _getEncoder();
+    const text = createTextInstance('Italic child');
+    const label = createInstance('Text', {
+      style: {
+        fontSize: 18,
+        fontStyle: 'italic',
+        letterSpacing: 1.5,
+        direction: 'rtl',
+      },
+    });
+
+    const setStyleSpy = vi.spyOn(encoder, 'setStyle');
+    nodeAppendChild(label, text);
+    appendChild(root, label);
+    commitBatch(root);
+
+    expect(setStyleSpy).toHaveBeenCalledWith(
+      text.id,
+      expect.objectContaining({
+        fontSize: 18,
+        fontStyle: 'italic',
+        letterSpacing: 1.5,
+        direction: 'rtl',
+      }),
+    );
+  });
+
+  it('copies inherited text measurement styles when raw text leaves are appended incrementally', () => {
+    const root = createRoot();
+    const encoder = _getEncoder();
+    const label = createInstance('Text', {
+      style: {
+        fontSize: 30,
+        fontWeight: 800,
+        lineHeight: 36,
+        letterSpacing: -0.4,
+      },
+    });
+
+    appendChild(root, label);
+    commitBatch(root);
+    encoder.reset();
+
+    const text = createTextInstance('Writing');
+    const setStyleSpy = vi.spyOn(encoder, 'setStyle');
+    appendChild(label, text);
+    commitBatch(root);
+
+    expect(setStyleSpy).toHaveBeenCalledWith(
+      text.id,
+      expect.objectContaining({
+        fontSize: 30,
+        fontWeight: 800,
+        lineHeight: 36,
+        letterSpacing: -0.4,
+      }),
+    );
+  });
+
+  it('copies inherited text measurement styles onto nested text elements', () => {
+    const root = createRoot();
+    const encoder = _getEncoder();
+    const child = createInstance('Text', {
+      children: 'How it works',
+    });
+    const label = createInstance('Text', {
+      style: {
+        fontSize: 34,
+        fontWeight: 800,
+        lineHeight: 40,
+        fontFamily: '"Avenir Next", Inter, ui-sans-serif, system-ui, sans-serif',
+      },
+    });
+
+    const setStyleSpy = vi.spyOn(encoder, 'setStyle');
+    nodeAppendChild(label, child);
+    appendChild(root, label);
+    commitBatch(root);
+
+    expect(setStyleSpy).toHaveBeenCalledWith(
+      child.id,
+      expect.objectContaining({
+        fontSize: 34,
+        fontWeight: 800,
+        lineHeight: 40,
+        fontFamily: 1,
+      }),
+    );
+
+    setStyleSpy.mockClear();
+    updateInstanceProps(label, label.originalProps, {
+      ...label.originalProps,
+      style: {
+        fontSize: 34,
+        fontWeight: 800,
+        lineHeight: 44,
+        fontFamily: '"Avenir Next", Inter, ui-sans-serif, system-ui, sans-serif',
+      },
+    });
+
+    expect(setStyleSpy).toHaveBeenCalledWith(
+      child.id,
+      expect.objectContaining({
+        fontSize: 34,
+        fontWeight: 800,
+        lineHeight: 44,
+      }),
+    );
+  });
+
+  it('carries inherited text measurement styles through inline pressables', () => {
+    const root = createRoot();
+    const encoder = _getEncoder();
+    const linkText = createInstance('Text', {
+      children: 'Linked Literate Programming',
+      style: {
+        fontWeight: 700,
+      },
+    });
+    const link = createInstance('Pressable', {});
+    const paragraph = createInstance('Text', {
+      style: {
+        fontSize: 16,
+        lineHeight: 28,
+        fontFamily: '"Avenir Next", Inter, ui-sans-serif, system-ui, sans-serif',
+      },
+    });
+
+    const setStyleSpy = vi.spyOn(encoder, 'setStyle');
+    nodeAppendChild(link, linkText);
+    nodeAppendChild(paragraph, link);
+    appendChild(root, paragraph);
+    commitBatch(root);
+
+    expect(setStyleSpy).toHaveBeenCalledWith(
+      linkText.id,
+      expect.objectContaining({
+        fontSize: 16,
+        fontWeight: 700,
+        lineHeight: 28,
+        fontFamily: 1,
+      }),
+    );
+  });
+
+  it('patches explicitly stable fixed-size text content without layout', () => {
+    const root = createRoot();
+    const encoder = _getEncoder();
+    const label = createInstance('Text', {
+      __exactTextLayoutStable: true,
+      style: {
+        width: 80,
+        height: 24,
+        fontSize: 18,
+      },
+      children: 'Before',
+    });
+
+    appendChild(root, label);
+    commitBatch(root);
+    encoder.reset();
+
+    const computeLayoutSpy = vi.spyOn(encoder, 'computeLayout');
+    const setPropStringSpy = vi.spyOn(encoder, 'setPropString');
+    const previousProps = label.originalProps;
+
+    updateInstanceProps(label, previousProps, {
+      ...previousProps,
+      children: 'After',
+    });
+    commitBatch(root);
+
+    expect(computeLayoutSpy).not.toHaveBeenCalled();
+    expect(setPropStringSpy).toHaveBeenCalledWith(label.id, 0, 'After');
+    expect(setPropStringSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('patches explicit textContent props without layout for stable fixed-size text', () => {
+    const root = createRoot();
+    const encoder = _getEncoder();
+    const label = createInstance('Text', {
+      __exactTextLayoutStable: true,
+      selectable: false,
+      textContent: 'Before',
+      style: {
+        width: 80,
+        height: 24,
+        fontSize: 18,
+      },
+    });
+
+    appendChild(root, label);
+    commitBatch(root);
+    encoder.reset();
+
+    const computeLayoutSpy = vi.spyOn(encoder, 'computeLayout');
+    const setPropStringSpy = vi.spyOn(encoder, 'setPropString');
+    const previousProps = label.originalProps;
+
+    updateInstanceProps(label, previousProps, {
+      ...previousProps,
+      textContent: 'After',
+    });
+    commitBatch(root);
+
+    expect(computeLayoutSpy).not.toHaveBeenCalled();
+    expect(setPropStringSpy).toHaveBeenCalledWith(label.id, 0, 'After');
+    expect(setPropStringSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('invalidates descendants when inherited direction changes', () => {
+    const root = createRoot();
+    const encoder = _getEncoder();
+    const parent = createInstance('View', {
+      style: {
+        direction: 'ltr',
+      },
+    });
+    const child = createInstance('View', {
+      style: {
+        marginStart: 10,
+      },
+    });
+
+    nodeAppendChild(parent, child);
+    appendChild(root, parent);
+    encoder.reset();
+
+    updateInstanceProps(
+      parent,
+      {
+        style: {
+          direction: 'ltr',
+        },
+      },
+      {
+        style: {
+          direction: 'rtl',
+        },
+      },
+    );
+
+    expect(child.style.marginRight).toEqual({ type: 'points', value: 10 });
+    expect(child.style.marginLeft).toBeUndefined();
+    expect(encoder.getOpCount()).toBeGreaterThanOrEqual(2);
+  });
+
+  it('lifts top-level numberOfLines into canonical text style', () => {
+    const instance = createInstance('Text', {
+      children: 'Clamped paragraph',
+      numberOfLines: 2,
+      style: {
+        fontSize: 14,
+        lineHeight: 21,
+      },
+    });
+
+    expect(instance.style.numberOfLines).toBe(2);
+    expect(instance.style.fontSize).toBe(14);
+    expect(instance.style.lineHeight).toBe(21);
+  });
+
+  it('seeds resolved lang from the locale snapshot', () => {
+    setExactLocaleOverride({ locale: 'ar-EG', direction: 'rtl' });
+
+    const instance = createInstance('Text', {
+      children: 'مرحبا',
+    });
+
+    expect(instance.resolvedLang).toBe('ar-EG');
+    expect(instance.resolvedDirection).toBe('rtl');
+  });
+
+  it('re-resolves mounted trees when the locale snapshot changes', () => {
+    const root = createRoot();
+    const encoder = _getEncoder();
+    const instance = createInstance('View', {});
+
+    appendChild(root, instance);
+
+    const setStyleSpy = vi.spyOn(encoder, 'setStyle');
+    const setPropStringSpy = vi.spyOn(encoder, 'setPropString');
+    setStyleSpy.mockClear();
+    setPropStringSpy.mockClear();
+
+    expect(instance.resolvedLang).toBe('en-US');
+    expect(instance.resolvedDirection).toBe('ltr');
+
+    setExactLocaleOverride({ locale: 'ar-EG', direction: 'rtl' });
+
+    expect(instance.resolvedLang).toBe('en-US');
+    expect(instance.resolvedDirection).toBe('ltr');
+
+    vi.advanceTimersByTime(100);
+
+    expect(instance.resolvedLang).toBe('ar-EG');
+    expect(instance.resolvedDirection).toBe('rtl');
+    expect(setStyleSpy).toHaveBeenCalledWith(
+      instance.id,
+      expect.objectContaining({
+        direction: 'rtl',
+      }),
+    );
+    expect(setPropStringSpy).not.toHaveBeenCalledWith(instance.id, 17, 'ar-EG');
+  });
+
+  it('does not encode inherited locale as a per-node lang prop', () => {
+    setExactLocaleOverride({ locale: 'ar-EG', direction: 'rtl' });
+    const root = createRoot();
+    const encoder = _getEncoder();
+    const instance = createInstance('Text', {
+      children: 'مرحبا',
+    });
+
+    encoder.reset();
+    const setPropStringSpy = vi.spyOn(encoder, 'setPropString');
+
+    appendChild(root, instance);
+    commitBatch(root);
+
+    expect(instance.resolvedLang).toBe('ar-EG');
+    expect(setPropStringSpy).not.toHaveBeenCalledWith(instance.id, 17, 'ar-EG');
+  });
+
+  it('auto-scrolls the nearest scroll view when a focused input is occluded by the keyboard', () => {
+    const root = createRoot();
+    const scroll = createInstance('ScrollView', {
+      style: {
+        width: 320,
+        height: 400,
+      },
+    });
+    const spacer = createInstance('View', {
+      style: {
+        height: 700,
+      },
+    });
+    const input = createInstance('TextInput', {
+      accessibilityLabel: 'Email',
+      style: {
+        height: 44,
+      },
+    });
+
+    nodeAppendChild(scroll, spacer);
+    nodeAppendChild(scroll, input);
+    appendChild(root, scroll);
+    commitBatch(root);
+
+    dispatchSyntheticEvent(input, EventType.Focus, { nativeEvent: {} });
+    globalThis.__exactKeyboardStateChanged?.({
+      visible: true,
+      mode: 'docked',
+      progress: 1,
+      occlusion: {
+        x: 0,
+        y: 500,
+        width: 393,
+        height: 352,
+      },
+    });
+
+    commitBatch(root);
+
+    expect(getScrollMetrics(scroll.id, root.rootId)?.currentOffset.y).toBeGreaterThan(0);
+  });
+
+  it('does not dispatch a redundant root commit when only the live viewport changed', () => {
+    const root = createRoot();
+    const child = createInstance('View', {
+      style: {
+        flex: 1,
+      },
+    });
+
+    appendChild(root, child);
+    commitBatch(root);
+
+    const encoder = _getEncoder();
+    const setStyleSpy = vi.spyOn(encoder, 'setStyle');
+    setStyleSpy.mockClear();
+
+    if (globalThis.exact) {
+      globalThis.exact.screenWidth = 640;
+      globalThis.exact.screenHeight = 480;
+    }
+
+    syncRootInheritedWindowState(root);
+
+    expect(setStyleSpy).not.toHaveBeenCalled();
+  });
+});
+
+describe('RFC 0043 host-ops primitives', () => {
+  it('detachChild preserves the subtree and its event handlers for reparenting', () => {
+    const root = createRoot();
+    const firstParent = createInstance('View', {});
+    const secondParent = createInstance('View', {});
+    const onPress = vi.fn();
+    const child = createInstance('Pressable', {
+      onPress,
+    });
+
+    nodeAppendChild(firstParent, child);
+    nodeAppendChild(root, firstParent);
+    nodeAppendChild(root, secondParent);
+    commitBatch(root);
+
+    detachChild(firstParent, child);
+    appendChild(secondParent, child);
+    commitBatch(root);
+
+    expect(child.parent).toBe(secondParent);
+    expect(firstParent.children).not.toContain(child);
+    expect(secondParent.children).toContain(child);
+
+    dispatchSyntheticEvent(child, EventType.Press, {
+      nativeEvent: { timestamp: Date.now() },
+    });
+
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('pressOverride allows press bindings on tags that are not globally pressable', () => {
+    const instance = createElementNode('view', 'div', false, {});
+    const onPress = vi.fn();
+    const config = getTagConfig('div');
+
+    expect(config).not.toBeNull();
+
+    processEventProps(instance, { onPress }, config!);
+    expect(instance.events.has(EventType.Press)).toBe(false);
+
+    instance.pressOverride = true;
+    processEventProps(instance, { onPress }, config!);
+
+    expect(instance.events.has(EventType.Press)).toBe(true);
+  });
+
+  it('destroyRoot tears down the live root and releases its owner claim', () => {
+    const root = createRoot(2, 'host-ops-test');
+    const child = createInstance('View', {});
+
+    appendChild(root, child);
+    commitBatch(root);
+
+    expect(getRootOwner(2)).toBe('host-ops-test');
+
+    destroyRoot(2);
+
+    expect(getRootOwner(2)).toBeUndefined();
+    expect(getRootNode(2)).toBeNull();
+    expect(globalThis.exact?.dispatch).toHaveBeenCalled();
+  });
+});
+
+describe('event prop rebinding (LLP 0159)', () => {
+  it('rebinds the change closure when only onSelectionChange changes', () => {
+    const onChangeText = vi.fn();
+    const firstSelectionHandler = vi.fn();
+    const secondSelectionHandler = vi.fn();
+    const instance = createInstance('TextInput', {
+      onChangeText,
+      onSelectionChange: firstSelectionHandler,
+    });
+    processEventProps(instance, instance.originalProps, getTagConfig('TextInput')!);
+
+    const binding = instance.events.get(EventType.Change);
+    expect(binding).toBeDefined();
+
+    // Only the selection handler changes; every other prop is identical.
+    updateInstanceProps(instance, instance.originalProps, {
+      onChangeText,
+      onSelectionChange: secondSelectionHandler,
+    });
+
+    const dispatch = (
+      globalThis as {
+        __exactDispatchEvent?: (handlerId: number, payload: unknown) => void;
+      }
+    ).__exactDispatchEvent;
+
+    expect(dispatch).toBeTypeOf('function');
+
+    dispatch!(binding!.handlerId, {
+      nodeId: instance.id,
+      text: 'Millbrae',
+      selectionStart: 2,
+      selectionEnd: 6,
+      textChanged: false,
+    });
+
+    expect(firstSelectionHandler).not.toHaveBeenCalled();
+    expect(secondSelectionHandler).toHaveBeenCalledWith({
+      nativeEvent: {
+        selection: {
+          start: 2,
+          end: 6,
+        },
+        text: 'Millbrae',
+      },
+    });
+  });
+
+  it('preserves the scroll throttle window when event props are rebuilt', () => {
+    const onScroll = vi.fn();
+    const instance = createInstance('ScrollView', {
+      onScroll,
+      scrollEventThrottle: 100,
+    });
+    processEventProps(instance, instance.originalProps, getTagConfig('ScrollView')!);
+
+    const dispatch = (
+      globalThis as {
+        __exactDispatchEvent?: (handlerId: number, payload: unknown) => void;
+      }
+    ).__exactDispatchEvent;
+
+    expect(dispatch).toBeTypeOf('function');
+
+    const binding = instance.events.get(EventType.Scroll);
+    expect(binding).toBeDefined();
+
+    dispatch!(binding!.handlerId, {
+      x: 0,
+      y: 0,
+      nativeEvent: { timestamp: 0 },
+    });
+    expect(onScroll).toHaveBeenCalledTimes(1);
+
+    // Rebuilding event props recreates the onScroll wrapper; the throttle
+    // window must survive on the instance instead of resetting.
+    processEventProps(
+      instance,
+      { onScroll, scrollEventThrottle: 100 },
+      getTagConfig('ScrollView')!,
+    );
+    const rebound = instance.events.get(EventType.Scroll);
+    expect(rebound).toBeDefined();
+
+    dispatch!(rebound!.handlerId, {
+      x: 0,
+      y: 50,
+      nativeEvent: { timestamp: 50 },
+    });
+    expect(onScroll).toHaveBeenCalledTimes(1);
+
+    dispatch!(rebound!.handlerId, {
+      x: 0,
+      y: 120,
+      nativeEvent: { timestamp: 120 },
+    });
+    expect(onScroll).toHaveBeenCalledTimes(2);
+  });
+});
+
+describe('updateInstanceProps fast path (LLP 0159)', () => {
+  it('skips resolveElementState when a new props object is shallow-equal', () => {
+    const root = createRoot();
+    const style = { width: 100, height: 50 };
+    const onPress = vi.fn();
+    const instance = createInstance('Pressable', {
+      style,
+      onPress,
+      testId: 'fast-path',
+    });
+
+    appendChild(root, instance);
+    commitBatch(root);
+
+    _resetResolveElementStateCallCount();
+
+    // New object identity, identical values (parent re-render).
+    const recreatedProps = { style, onPress, testId: 'fast-path' };
+    updateInstanceProps(instance, instance.originalProps, recreatedProps);
+
+    expect(_getResolveElementStateCallCount()).toBe(0);
+    expect(instance.originalProps).toBe(recreatedProps);
+
+    // A real change still goes through full resolution.
+    updateInstanceProps(instance, instance.originalProps, {
+      style: { width: 120, height: 50 },
+      onPress,
+      testId: 'fast-path',
+    });
+    expect(_getResolveElementStateCallCount()).toBe(1);
+  });
+
+  it('does not take the fast path when the same props object is mutated in place', () => {
+    const root = createRoot();
+    const instance = createInstance('View', {
+      style: { width: 100, height: 50 },
+    });
+
+    appendChild(root, instance);
+    commitBatch(root);
+
+    _resetResolveElementStateCallCount();
+
+    // The DOM shim mutates its live props object and passes the same
+    // reference; full re-resolution must run to discover changes.
+    updateInstanceProps(instance, instance.originalProps, instance.originalProps);
+
+    expect(_getResolveElementStateCallCount()).toBe(1);
+  });
+});
+
+describe('fresh-mount prop encoding (LLP 0159)', () => {
+  it('encodes selectable exactly once when mounting a fresh subtree', () => {
+    const root = createRoot();
+    const encoder = _getEncoder();
+    const instance = createInstance('View', { selectable: true });
+    const setPropStringSpy = vi.spyOn(encoder, 'setPropString');
+
+    appendChild(root, instance);
+    commitBatch(root);
+
+    const selectableOps = setPropStringSpy.mock.calls.filter(
+      ([nodeId, propId]) => nodeId === instance.id && propId === PropId.Selectable,
+    );
+    expect(selectableOps).toHaveLength(1);
+  });
+
+  it('still re-encodes selectable when a committed node is reparented', () => {
+    const root = createRoot();
+    const encoder = _getEncoder();
+    const container = createInstance('View', {});
+    const item = createInstance('View', { selectable: true });
+
+    appendChild(root, container);
+    appendChild(container, item);
+    commitBatch(root);
+
+    const setPropStringSpy = vi.spyOn(encoder, 'setPropString');
+
+    appendChild(root, item);
+    commitBatch(root);
+
+    const selectableOps = setPropStringSpy.mock.calls.filter(
+      ([nodeId, propId]) => nodeId === item.id && propId === PropId.Selectable,
+    );
+    expect(selectableOps).toHaveLength(1);
+  });
+});
+
+describe('commit-time event registration (LLP 0159)', () => {
+  it('keeps createInstance side-effect free and registers handlers at commit', () => {
+    const root = createRoot();
+    const onPress = vi.fn();
+    const instance = createInstance('Pressable', { onPress });
+
+    // Render phase: no instance bindings and no global registry entries, so
+    // an aborted render that drops the instance leaks nothing.
+    expect(instance.events.size).toBe(0);
+    expect(getHandler(1)).toBeUndefined();
+
+    appendChild(root, instance);
+    commitBatch(root);
+
+    const binding = instance.events.get(EventType.Press);
+    expect(binding).toBeDefined();
+    expect(getHandler(binding!.handlerId)).toBeTypeOf('function');
+
+    dispatchSyntheticEvent(instance, EventType.Press, {
+      nativeEvent: { timestamp: Date.now() },
+    });
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('registers handlers for nested children of a freshly mounted subtree', () => {
+    const root = createRoot();
+    const onPress = vi.fn();
+    const parent = createInstance('View', {});
+    const child = createInstance('Pressable', { onPress });
+
+    nodeAppendChild(parent, child);
+    expect(child.events.size).toBe(0);
+
+    appendChild(root, parent);
+    commitBatch(root);
+
+    expect(child.events.get(EventType.Press)).toBeDefined();
+  });
+});
+
+describe('destroySubtree root attribution (LLP 0159)', () => {
+  it('records destroyed view IDs under the owning root, not root 0', () => {
+    const root0 = createRoot();
+    const root2 = createRoot(2, 'attribution-test');
+    const parent = createInstance('View', {});
+    const child = createInstance('View', {});
+    const grandchild = createInstance('View', {});
+
+    appendChild(root2, parent);
+    appendChild(parent, child);
+    appendChild(child, grandchild);
+    commitBatch(root0);
+    commitBatch(root2);
+
+    const renderEvents: number[][] = [];
+    const unsubscribe = subscribeAgentEvents((event) => {
+      if (event.type === 'render') {
+        renderEvents.push([...event.changedViews]);
+      }
+    });
+
+    removeChild(parent, child);
+    commitBatch(root0);
+    commitBatch(root2);
+    unsubscribe();
+
+    expect(renderEvents).toHaveLength(2);
+    const [root0Changed, root2Changed] = renderEvents;
+    // Root 0 saw no changes; before the rootId threading fix the destroyed
+    // IDs of the severed subtree were misattributed here.
+    expect(root0Changed).toEqual([]);
+    expect(root2Changed).toEqual(
+      expect.arrayContaining([parent.id, child.id, grandchild.id]),
+    );
+
+    destroyRoot(2);
+  });
+});