@ccheever/exact-renderer 0.1.0

package/src/__tests__/protocol-encoder.test.ts

@@ -0,0 +1,732 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import {
+  emptyKeyboardState,
+  emptySafeAreaRegions,
+  MAIN_WINDOW_ID,
+  resetWindowStateStoreForTests,
+  setWindowSnapshot,
+  zeroInsets,
+} from '@exact/core';
+
+import {
+  BUFFER_HEADER_SIZE,
+  OP_HEADER_SIZE,
+  OpCode,
+  PropId,
+  StyleMask,
+} from '../../../exact-core/src/protocol/opcodes.js';
+import { appendChild as appendNodeChild, createElementNode } from '../nodes/node.js';
+import { createInstance } from '../host-ops.js';
+import { createNativeViewComponent } from '../native-view.js';
+import { normalizeProps } from '../props/normalize.js';
+import { _clearNativeViewTagsForTesting } from '../tags/tag-map.js';
+import {
+  createProtocolEncoder,
+  dispatchProtocol,
+  encodeProps,
+  getScreenDimensions,
+  setSvgColors,
+  setSvgObjectPosition,
+  setSvgPixelDensity,
+  setSvgSource,
+} from '../protocol/encoder.js';
+
+afterEach(() => {
+  _clearNativeViewTagsForTesting();
+  resetWindowStateStoreForTests();
+  delete (
+    globalThis as typeof globalThis & {
+      exact?: unknown;
+    }
+  ).exact;
+});
+
+function getEncodedStringProp(data: Uint8Array, targetPropId: PropId): string {
+  const view = new DataView(data.buffer, data.byteOffset, data.byteLength);
+  let offset = BUFFER_HEADER_SIZE;
+
+  while (offset < data.length) {
+    const propId = view.getUint16(offset + OP_HEADER_SIZE, true);
+    const payloadLength = view.getUint16(offset + 5, true);
+    if (propId === targetPropId) {
+      const stringLength = view.getUint16(offset + OP_HEADER_SIZE + 2, true);
+      const start = offset + OP_HEADER_SIZE + 4;
+      const bytes = Array.from({ length: stringLength }, (_, index) => view.getUint8(start + index));
+      return String.fromCharCode(...bytes);
+    }
+    offset += OP_HEADER_SIZE + payloadLength;
+  }
+
+  throw new Error(`Missing prop ${targetPropId}`);
+}
+
+describe('protocol encoder', () => {
+  it('encodes scroll indicator visibility props for ScrollView nodes', () => {
+    const instance = createElementNode('scroll', 'ScrollView', true, {
+      showsVerticalScrollIndicator: false,
+    });
+    instance.props = normalizeProps('scroll', {
+      showsVerticalScrollIndicator: false,
+    }, true);
+
+    const encoder = createProtocolEncoder(1024);
+    encodeProps(encoder, instance);
+
+    const data = encoder.getUint8Array();
+    const view = new DataView(data.buffer, data.byteOffset, data.byteLength);
+
+    expect(view.getUint16(4, true)).toBe(1);
+    expect(view.getUint8(BUFFER_HEADER_SIZE)).toBe(OpCode.SetProp);
+    expect(view.getUint32(BUFFER_HEADER_SIZE + 1, true)).toBe(instance.id);
+    expect(view.getUint16(BUFFER_HEADER_SIZE + OP_HEADER_SIZE, true)).toBe(PropId.ShowsScrollIndicator);
+    expect(view.getUint16(BUFFER_HEADER_SIZE + OP_HEADER_SIZE + 2, true)).toBe(5);
+
+    const textBytes = Array.from({ length: 5 }, (_, index) =>
+      view.getUint8(BUFFER_HEADER_SIZE + OP_HEADER_SIZE + 4 + index),
+    );
+    expect(String.fromCharCode(...textBytes)).toBe('false');
+  });
+
+  it('encodes scroll indicator visibility props for List nodes', () => {
+    const instance = createElementNode('list', 'List', true, {
+      showsVerticalScrollIndicator: false,
+    });
+    instance.props = normalizeProps('list', {
+      showsVerticalScrollIndicator: false,
+    }, true);
+
+    const encoder = createProtocolEncoder(1024);
+    encodeProps(encoder, instance);
+
+    expect(getEncodedStringProp(encoder.getUint8Array(), PropId.ShowsScrollIndicator)).toBe('false');
+  });
+
+  it('encodes SVG prop ids in the expected order', () => {
+    const encoder = createProtocolEncoder(1024);
+
+    setSvgSource(encoder, 7, '<svg viewBox="0 0 24 24"></svg>');
+    setSvgColors(encoder, 7, '{"--primary":"#007aff"}');
+    setSvgPixelDensity(encoder, 7, '2');
+    setSvgObjectPosition(encoder, 7, 'right bottom');
+
+    const data = encoder.getUint8Array();
+    const view = new DataView(data.buffer, data.byteOffset, data.byteLength);
+
+    const opOffsets: number[] = [];
+    let offset = BUFFER_HEADER_SIZE;
+    while (offset < data.length) {
+      opOffsets.push(offset);
+      const payloadLength = view.getUint16(offset + 5, true);
+      offset += OP_HEADER_SIZE + payloadLength;
+    }
+
+    expect(opOffsets).toHaveLength(4);
+    expect(view.getUint16(opOffsets[0] + OP_HEADER_SIZE, true)).toBe(PropId.SvgSource);
+    expect(view.getUint16(opOffsets[1] + OP_HEADER_SIZE, true)).toBe(PropId.SvgColors);
+    expect(view.getUint16(opOffsets[2] + OP_HEADER_SIZE, true)).toBe(PropId.SvgPixelDensity);
+    expect(view.getUint16(opOffsets[3] + OP_HEADER_SIZE, true)).toBe(PropId.SvgObjectPosition);
+  });
+
+  it('encodes normalized Svg props through encodeProps', () => {
+    const instance = createElementNode('svg', 'Svg', true, {
+      source: '<svg viewBox="0 0 24 24"></svg>',
+      objectPosition: 'left top',
+      pixelDensity: 3,
+      colors: {
+        '--primary': '#ff9500',
+      },
+    });
+    instance.props = normalizeProps('svg', {
+      source: '<svg viewBox="0 0 24 24"></svg>',
+      objectPosition: 'left top',
+      pixelDensity: 3,
+      colors: {
+        '--primary': '#ff9500',
+      },
+    }, true);
+
+    const encoder = createProtocolEncoder(1024);
+    encodeProps(encoder, instance);
+
+    const data = encoder.getUint8Array();
+    const view = new DataView(data.buffer, data.byteOffset, data.byteLength);
+
+    const propIds: number[] = [];
+    let offset = BUFFER_HEADER_SIZE;
+    while (offset < data.length) {
+      propIds.push(view.getUint16(offset + OP_HEADER_SIZE, true));
+      const payloadLength = view.getUint16(offset + 5, true);
+      offset += OP_HEADER_SIZE + payloadLength;
+    }
+
+    expect(propIds).toContain(PropId.SvgSource);
+    expect(propIds).toContain(PropId.SvgColors);
+    expect(propIds).toContain(PropId.SvgPixelDensity);
+    expect(propIds).toContain(PropId.SvgObjectPosition);
+  });
+
+  it('encodes TextInput value as text content for native readback', () => {
+    const instance = createElementNode('input', 'TextInput', true, {
+      value: 'hello terminal',
+      placeholder: 'Type here',
+    });
+    instance.props = normalizeProps('input', {
+      value: 'hello terminal',
+      placeholder: 'Type here',
+    }, true);
+
+    const encoder = createProtocolEncoder(1024);
+    encodeProps(encoder, instance);
+
+    const data = encoder.getUint8Array();
+    const view = new DataView(data.buffer, data.byteOffset, data.byteLength);
+
+    const propIds: number[] = [];
+    let offset = BUFFER_HEADER_SIZE;
+    while (offset < data.length) {
+      propIds.push(view.getUint16(offset + OP_HEADER_SIZE, true));
+      const payloadLength = view.getUint16(offset + 5, true);
+      offset += OP_HEADER_SIZE + payloadLength;
+    }
+
+    expect(propIds).toContain(PropId.TextContent);
+    expect(propIds).toContain(PropId.Placeholder);
+  });
+
+  it('encodes selectable text nodes as a string-backed prop', () => {
+    const instance = createElementNode('text', 'Text', true, {
+      selectable: true,
+      children: 'copy me',
+    });
+    instance.props = normalizeProps('text', {
+      selectable: true,
+      children: 'copy me',
+    }, true);
+
+    const encoder = createProtocolEncoder(1024);
+    encodeProps(encoder, instance);
+
+    const data = encoder.getUint8Array();
+    const view = new DataView(data.buffer, data.byteOffset, data.byteLength);
+
+    const propIds: number[] = [];
+    let offset = BUFFER_HEADER_SIZE;
+    while (offset < data.length) {
+      propIds.push(view.getUint16(offset + OP_HEADER_SIZE, true));
+      const payloadLength = view.getUint16(offset + 5, true);
+      offset += OP_HEADER_SIZE + payloadLength;
+    }
+
+    expect(propIds).toContain(PropId.TextContent);
+    expect(propIds).toContain(PropId.Selectable);
+  });
+
+  it('encodes selectable string modes as string-backed props', () => {
+    const instance = createElementNode('text', 'Text', true, {
+      selectable: 'all',
+      children: 'copy me',
+    });
+    instance.props = normalizeProps('text', {
+      selectable: 'all',
+      children: 'copy me',
+    }, true);
+
+    const encoder = createProtocolEncoder(1024);
+    encodeProps(encoder, instance);
+
+    expect(getEncodedStringProp(encoder.getUint8Array(), PropId.Selectable)).toBe('all');
+  });
+
+  it('encodes selectionCopyText as a string-backed prop', () => {
+    const instance = createElementNode('video', 'VideoView', true, {
+      selectionCopyText: '[Intro clip]',
+      videoPlayerId: '7',
+      videoViewConfig: '{}',
+    });
+    instance.props = normalizeProps('video', {
+      selectionCopyText: '[Intro clip]',
+      videoPlayerId: '7',
+      videoViewConfig: '{}',
+    }, true);
+
+    const encoder = createProtocolEncoder(1024);
+    encodeProps(encoder, instance);
+
+    expect(getEncodedStringProp(encoder.getUint8Array(), PropId.SelectionCopyText)).toBe('[Intro clip]');
+  });
+
+  it('encodes controlled TextInput selection offsets', () => {
+    const instance = createElementNode('input', 'TextInput', true, {
+      value: 'Millbrae',
+      selection: { start: 2, end: 6 },
+    });
+    instance.props = normalizeProps('input', {
+      value: 'Millbrae',
+      selection: { start: 2, end: 6 },
+    }, true);
+
+    const encoder = createProtocolEncoder(1024);
+    encodeProps(encoder, instance);
+    const data = encoder.getUint8Array();
+
+    expect(getEncodedStringProp(data, PropId.SelectionStart)).toBe('2');
+    expect(getEncodedStringProp(data, PropId.SelectionEnd)).toBe('6');
+  });
+
+  it('encodes generic native-view metadata and serialized props', () => {
+    const ChartView = createNativeViewComponent<{
+      data: unknown;
+      title: string;
+    }>({
+      moduleName: 'com.exact.chart',
+      propKeys: ['data', 'title'],
+      selection: {
+        tier: 'atomic',
+      },
+    });
+
+    const element = ChartView({
+      data: { points: [1, 2, 3] },
+      title: 'Revenue',
+      accessibilityLabel: 'Quarterly revenue chart',
+    });
+    const instance = createInstance(
+      String(element.type),
+      element.props as Record<string, unknown>,
+    );
+
+    const encoder = createProtocolEncoder(2048);
+    encodeProps(encoder, instance);
+
+    const data = encoder.getUint8Array();
+    expect(getEncodedStringProp(data, PropId.NativeViewModuleName)).toBe('com.exact.chart');
+    expect(getEncodedStringProp(data, PropId.NativeViewSelectionTier)).toBe('atomic');
+    expect(getEncodedStringProp(data, PropId.NativeViewProps)).toBe(
+      '{"data":{"points":[1,2,3]},"title":"Revenue"}',
+    );
+  });
+
+  it('encodes resolved lang as a string-backed prop', () => {
+    const instance = createElementNode('text', 'Text', true, {
+      children: 'مرحبا',
+      lang: 'ar-EG',
+    });
+    instance.props = normalizeProps('text', {
+      children: 'مرحبا',
+      lang: 'ar-EG',
+    }, true);
+    instance.resolvedLang = 'ar-EG';
+
+    const encoder = createProtocolEncoder(1024);
+    encodeProps(encoder, instance);
+
+    expect(getEncodedStringProp(encoder.getUint8Array(), PropId.Lang)).toBe('ar-EG');
+  });
+
+  it('derives selectable=false for text inside an unselectable container', () => {
+    const parent = createElementNode('view', 'View', true, { selectable: false });
+    parent.props = normalizeProps('view', { selectable: false }, true);
+
+    const child = createElementNode('text', 'Text', true, { children: 'copy me' });
+    child.props = normalizeProps('text', { children: 'copy me' }, true);
+    appendNodeChild(parent, child);
+
+    const encoder = createProtocolEncoder(1024);
+    encodeProps(encoder, child);
+
+    expect(getEncodedStringProp(encoder.getUint8Array(), PropId.Selectable)).toBe('false');
+  });
+
+  it('derives selectable=false for text inside a pressable', () => {
+    const parent = createElementNode('pressable', 'Pressable', true, {});
+    parent.props = normalizeProps('pressable', {}, true);
+
+    const child = createElementNode('text', 'Text', true, { children: 'copy me' });
+    child.props = normalizeProps('text', { children: 'copy me' }, true);
+    appendNodeChild(parent, child);
+
+    const encoder = createProtocolEncoder(1024);
+    encodeProps(encoder, child);
+
+    expect(getEncodedStringProp(encoder.getUint8Array(), PropId.Selectable)).toBe('false');
+  });
+
+  it('encodes disabled props as string-backed values for protocol/native renderers', () => {
+    const instance = createElementNode('button', 'button', true, {
+      disabled: true,
+      children: 'Publish',
+    });
+    instance.props = normalizeProps('button', {
+      disabled: true,
+      children: 'Publish',
+    }, true);
+
+    const encoder = createProtocolEncoder(1024);
+    encodeProps(encoder, instance);
+
+    expect(getEncodedStringProp(encoder.getUint8Array(), PropId.Disabled)).toBe('true');
+  });
+
+  it('encodes extended accessibility metadata and text scaling props', () => {
+    const instance = createElementNode('text', 'Text', true, {
+      testID: 'hero-title',
+      tabIndex: 3,
+      accessibilityActions: [
+        { name: 'share', label: 'Share title' },
+      ],
+      accessibilityOrder: ['price', 'title'],
+      allowFontScaling: true,
+      maxFontSizeMultiplier: 2,
+      minimumFontSize: 14,
+      accessibilityHeadingLevel: 1,
+    });
+    instance.props = normalizeProps('text', {
+      testID: 'hero-title',
+      tabIndex: 3,
+      accessibilityActions: [
+        { name: 'share', label: 'Share title' },
+      ],
+      accessibilityOrder: ['price', 'title'],
+      allowFontScaling: true,
+      maxFontSizeMultiplier: 2,
+      minimumFontSize: 14,
+      accessibilityHeadingLevel: 1,
+    }, true);
+
+    const encoder = createProtocolEncoder(2048);
+    encodeProps(encoder, instance);
+
+    const data = encoder.getUint8Array();
+    expect(getEncodedStringProp(data, PropId.TestId)).toBe('hero-title');
+    expect(getEncodedStringProp(data, PropId.TabIndex)).toBe('3');
+    expect(getEncodedStringProp(data, PropId.AccessibilityActions)).toBe(
+      JSON.stringify([{ name: 'share', label: 'Share title' }]),
+    );
+    expect(getEncodedStringProp(data, PropId.AccessibilityOrder)).toBe(
+      JSON.stringify(['price', 'title']),
+    );
+    expect(getEncodedStringProp(data, PropId.AllowFontScaling)).toBe('true');
+    expect(getEncodedStringProp(data, PropId.MaxFontSizeMultiplier)).toBe('2');
+    expect(getEncodedStringProp(data, PropId.MinimumFontSize)).toBe('14');
+    expect(getEncodedStringProp(data, PropId.AccessibilityHeadingLevel)).toBe('1');
+  });
+
+  it('encodes extended text styles in the high-word style mask', () => {
+    const encoder = createProtocolEncoder(1024);
+    encoder.setStyle(42, {
+      fontStyle: 'italic',
+      textDecorationLine: 'underline line-through',
+      fontVariantNumeric: 0x11,
+    });
+
+    const data = encoder.getUint8Array();
+    const view = new DataView(data.buffer, data.byteOffset, data.byteLength);
+
+    expect(view.getUint8(BUFFER_HEADER_SIZE)).toBe(OpCode.SetStyle);
+    expect(view.getUint32(BUFFER_HEADER_SIZE + 1, true)).toBe(42);
+
+    const payloadStart = BUFFER_HEADER_SIZE + OP_HEADER_SIZE;
+    const maskHighLowWord = view.getUint32(payloadStart + 8, true);
+    expect(maskHighLowWord).toBe((1 << 10) | (1 << 11) | (1 << 12));
+    expect(view.getUint8(payloadStart + 16)).toBe(1);
+    expect(view.getUint8(payloadStart + 17)).toBe(3);
+    expect(view.getUint8(payloadStart + 18)).toBe(0x11);
+  });
+
+  it('encodes direction and writingMode ahead of extended typography fields', () => {
+    const encoder = createProtocolEncoder(1024);
+    encoder.setStyle(42, {
+      direction: 'rtl',
+      writingMode: 'vertical-rl',
+      fontStyle: 'italic',
+    });
+
+    const data = encoder.getUint8Array();
+    const view = new DataView(data.buffer, data.byteOffset, data.byteLength);
+    const payloadStart = BUFFER_HEADER_SIZE + OP_HEADER_SIZE;
+
+    const maskHighLowWord = view.getUint32(payloadStart + 8, true);
+    expect(maskHighLowWord).toBe((1 << 8) | (1 << 9) | (1 << 10));
+    expect(view.getUint8(payloadStart + 16)).toBe(1);
+    expect(view.getUint8(payloadStart + 17)).toBe(1);
+    expect(view.getUint8(payloadStart + 18)).toBe(1);
+  });
+
+  it('serializes mixed low-word and high-word typography fields in decoder order', () => {
+    const encoder = createProtocolEncoder(1024);
+    encoder.setStyle(42, {
+      fontWeight: 700,
+      textAlign: 'right',
+      lineHeight: 18,
+      numberOfLines: 2,
+      ellipsizeMode: 'middle',
+      fontFamily: 9,
+      resizeMode: 'contain',
+      fontSize: 14,
+      textColor: { r: 1, g: 2, b: 3, a: 4 },
+      fontStyle: 'italic',
+      textDecorationLine: 'underline',
+      fontVariantNumeric: 0x01,
+    });
+
+    const data = encoder.getUint8Array();
+    const view = new DataView(data.buffer, data.byteOffset, data.byteLength);
+    const payloadStart = BUFFER_HEADER_SIZE + OP_HEADER_SIZE;
+
+    let offset = payloadStart + 16;
+    expect(view.getUint16(offset, true)).toBe(700);
+    offset += 2;
+
+    expect(view.getUint8(offset)).toBe(2);
+    offset += 1;
+
+    expect(view.getFloat32(offset, true)).toBe(18);
+    offset += 4;
+
+    expect(view.getUint32(offset, true)).toBe(2);
+    offset += 4;
+
+    expect(view.getUint8(offset)).toBe(2);
+    offset += 1;
+
+    expect(view.getUint16(offset, true)).toBe(9);
+    offset += 2;
+
+    expect(view.getUint8(offset)).toBe(1);
+    offset += 1;
+
+    expect(view.getFloat32(offset, true)).toBe(14);
+    offset += 4;
+
+    expect([
+      view.getUint8(offset),
+      view.getUint8(offset + 1),
+      view.getUint8(offset + 2),
+      view.getUint8(offset + 3),
+    ]).toEqual([1, 2, 3, 4]);
+    offset += 4;
+
+    expect(view.getUint8(offset)).toBe(1);
+    offset += 1;
+
+    expect(view.getUint8(offset)).toBe(1);
+    offset += 1;
+
+    expect(view.getUint8(offset)).toBe(0x01);
+  });
+
+  it('serializes visual fields in kernel decoder order around display and blur', () => {
+    const encoder = createProtocolEncoder(1024);
+    encoder.setStyle(42, {
+      backgroundColor: { r: 9, g: 8, b: 7, a: 6 },
+      opacity: 0.5,
+      borderRadius: 12,
+      fontWeight: 600,
+      ellipsizeMode: 'middle',
+      display: 'grid',
+      zIndex: 4,
+      fontFamily: 9,
+      resizeMode: 'contain',
+      backdropBlur: 18,
+      fontSize: 14,
+      textColor: { r: 1, g: 2, b: 3, a: 4 },
+    });
+
+    const data = encoder.getUint8Array();
+    const view = new DataView(data.buffer, data.byteOffset, data.byteLength);
+    const payloadStart = BUFFER_HEADER_SIZE + OP_HEADER_SIZE;
+
+    let offset = payloadStart + 16;
+
+    expect([
+      view.getUint8(offset),
+      view.getUint8(offset + 1),
+      view.getUint8(offset + 2),
+      view.getUint8(offset + 3),
+    ]).toEqual([9, 8, 7, 6]);
+    offset += 4;
+
+    expect(view.getFloat32(offset, true)).toBe(0.5);
+    offset += 4;
+
+    expect(view.getFloat32(offset, true)).toBe(12);
+    offset += 4;
+
+    expect(view.getUint16(offset, true)).toBe(600);
+    offset += 2;
+
+    expect(view.getUint8(offset)).toBe(2);
+    offset += 1;
+
+    expect(view.getUint8(offset)).toBe(2);
+    offset += 1;
+
+    expect(view.getInt32(offset, true)).toBe(4);
+    offset += 4;
+
+    expect(view.getUint16(offset, true)).toBe(9);
+    offset += 2;
+
+    expect(view.getUint8(offset)).toBe(1);
+    offset += 1;
+
+    expect(view.getFloat32(offset, true)).toBe(18);
+    offset += 4;
+
+    expect(view.getFloat32(offset, true)).toBe(14);
+    offset += 4;
+
+    expect([
+      view.getUint8(offset),
+      view.getUint8(offset + 1),
+      view.getUint8(offset + 2),
+      view.getUint8(offset + 3),
+    ]).toEqual([1, 2, 3, 4]);
+  });
+
+  it('encodes shadow fields into the low-word style mask and payload', () => {
+    const encoder = createProtocolEncoder(1024);
+    encoder.setStyle(42, {
+      shadowColor: { r: 15, g: 125, b: 97, a: 255 },
+      shadowOffsetX: 0,
+      shadowOffsetY: 6,
+      shadowRadius: 18,
+      shadowOpacity: 0.14,
+    });
+
+    const data = encoder.getUint8Array();
+    const view = new DataView(data.buffer, data.byteOffset, data.byteLength);
+    const payloadStart = BUFFER_HEADER_SIZE + OP_HEADER_SIZE;
+
+    const maskLowHighWord = view.getUint32(payloadStart + 4, true);
+    expect(maskLowHighWord & StyleMask.SHADOW_COLOR.high).toBe(StyleMask.SHADOW_COLOR.high);
+    expect(maskLowHighWord & StyleMask.SHADOW_OFFSET.high).toBe(StyleMask.SHADOW_OFFSET.high);
+    expect(maskLowHighWord & StyleMask.SHADOW_RADIUS.high).toBe(StyleMask.SHADOW_RADIUS.high);
+    expect(maskLowHighWord & StyleMask.SHADOW_OPACITY.high).toBe(StyleMask.SHADOW_OPACITY.high);
+
+    let offset = payloadStart + 16;
+    expect([
+      view.getUint8(offset),
+      view.getUint8(offset + 1),
+      view.getUint8(offset + 2),
+      view.getUint8(offset + 3),
+    ]).toEqual([15, 125, 97, 255]);
+    offset += 4;
+
+    expect(view.getFloat32(offset, true)).toBe(0);
+    offset += 4;
+    expect(view.getFloat32(offset, true)).toBe(6);
+    offset += 4;
+    expect(view.getFloat32(offset, true)).toBe(18);
+    offset += 4;
+    expect(view.getFloat32(offset, true)).toBeCloseTo(0.14);
+  });
+
+  it('prefers the live main-window viewport when the stored window snapshot is stale', () => {
+    setWindowSnapshot(MAIN_WINDOW_ID, {
+      size: {
+        width: 393,
+        height: 852,
+      },
+      position: {
+        x: 0,
+        y: 0,
+      },
+      state: 'normal',
+      isFocused: true,
+      isVisible: true,
+      display: {
+        id: 'display-main',
+        size: {
+          width: 393,
+          height: 852,
+        },
+        workArea: {
+          x: 0,
+          y: 0,
+          width: 393,
+          height: 852,
+        },
+        scaleFactor: 1,
+      },
+      safeAreaInsets: zeroInsets(),
+      safeAreaRegions: emptySafeAreaRegions(),
+      keyboardState: emptyKeyboardState(),
+      devicePixelRatio: 1,
+    });
+    (
+      globalThis as typeof globalThis & {
+        exact?: {
+          screenWidth?: number;
+          screenHeight?: number;
+        };
+      }
+    ).exact = {
+      screenWidth: 482,
+      screenHeight: 960,
+    };
+
+    expect(getScreenDimensions(0)).toEqual({
+      width: 482,
+      height: 960,
+    });
+  });
+
+  it('uses dispatchWithDebugContext when a resize trace context is available', () => {
+    const dispatch = vi.fn();
+    const dispatchWithDebugContext = vi.fn();
+    (
+      globalThis as typeof globalThis & {
+        exact?: {
+          dispatch: typeof dispatch;
+          dispatchWithDebugContext: typeof dispatchWithDebugContext;
+          __resizeTraceContext?: unknown;
+        };
+      }
+    ).exact = {
+      dispatch,
+      dispatchWithDebugContext,
+      __resizeTraceContext: {
+        benchmarkRunId: 'resize-test',
+        resizeSeq: 42,
+        stepIndex: 3,
+      },
+    };
+
+    const encoder = createProtocolEncoder(1024);
+    dispatchProtocol(encoder);
+
+    expect(dispatchWithDebugContext).toHaveBeenCalledTimes(1);
+    expect(dispatch).not.toHaveBeenCalled();
+
+    const [buffer, debugContextJSON] = dispatchWithDebugContext.mock.calls[0]!;
+    expect(buffer).toBeInstanceOf(Uint8Array);
+    expect(JSON.parse(debugContextJSON)).toEqual({
+      benchmarkRunId: 'resize-test',
+      resizeSeq: 42,
+      stepIndex: 3,
+    });
+  });
+
+  it('falls back to plain dispatch when no resize trace context is present', () => {
+    const dispatch = vi.fn();
+    const dispatchWithDebugContext = vi.fn();
+    (
+      globalThis as typeof globalThis & {
+        exact?: {
+          dispatch: typeof dispatch;
+          dispatchWithDebugContext: typeof dispatchWithDebugContext;
+        };
+      }
+    ).exact = {
+      dispatch,
+      dispatchWithDebugContext,
+    };
+
+    const encoder = createProtocolEncoder(1024);
+    dispatchProtocol(encoder);
+
+    expect(dispatch).toHaveBeenCalledTimes(1);
+    expect(dispatchWithDebugContext).not.toHaveBeenCalled();
+  });
+});