@desklink/react-native 0.1.1 → 0.3.0

package/ios/DesklinkInputView.swift

@@ -0,0 +1,209 @@
+import ExpoModulesCore
+import UIKit
+
+/**
+ * The desktop surface on iOS: the view around the picture and the hidden text
+ * field, reporting the input React Native's touch system never sees.
+ *
+ * Keys: while control is enabled this view is the first responder, so a
+ * hardware keyboard's presses arrive here with their down and up — arrows,
+ * Esc, Tab and Command chords a text field does not report. The hidden text
+ * field takes over while the app shows the on-screen keyboard; keys it does not
+ * use still bubble up to this view, and the view takes the keyboard back when
+ * the field lets go.
+ *
+ * Pointer: an iPad trackpad or mouse hovering the view and its scroll. Its
+ * presses arrive with the button that made them only once the app sets
+ * `UIApplicationSupportsIndirectInputEvents` (the package's config plugin);
+ * until then UIKit hands them to React Native as touches.
+ */
+final class DesklinkInputView: ExpoView {
+  let onKey = EventDispatcher()
+  let onPointer = EventDispatcher()
+  let onWheel = EventDispatcher()
+
+  var enabled = false {
+    didSet {
+      guard enabled != oldValue else { return }
+      if enabled {
+        takeKeyboard(fromTouch: false)
+      } else {
+        releaseKeys()
+        if isFirstResponder { resignFirstResponder() }
+      }
+    }
+  }
+
+  /** Keys pressed here and not yet released, so none stays down on the desktop. */
+  private var held: [UIKeyboardHIDUsage: UIKey] = [:]
+
+  required init(appContext: AppContext? = nil) {
+    super.init(appContext: appContext)
+    addGestureRecognizer(UIHoverGestureRecognizer(target: self, action: #selector(hovered(_:))))
+    // A trackpad's or wheel's scroll only: touches stay with React Native.
+    let scroll = UIPanGestureRecognizer(target: self, action: #selector(scrolled(_:)))
+    scroll.allowedScrollTypesMask = .all
+    scroll.allowedTouchTypes = []
+    addGestureRecognizer(scroll)
+    NotificationCenter.default.addObserver(
+      self, selector: #selector(editingEnded(_:)), name: UITextField.textDidEndEditingNotification, object: nil)
+  }
+
+  // MARK: - Keyboard focus
+
+  override var canBecomeFirstResponder: Bool { enabled }
+
+  override func didMoveToWindow() {
+    super.didMoveToWindow()
+    if window == nil { releaseKeys() } else { takeKeyboard(fromTouch: false) }
+  }
+
+  override func resignFirstResponder() -> Bool {
+    let resigned = super.resignFirstResponder()
+    if resigned { releaseKeys() }
+    return resigned
+  }
+
+  /**
+   * Become the keyboard's target. On its own the view never takes the keyboard
+   * from a responder that has it — another field of the app, say. A touch on
+   * the desktop does, like a tap on any field, except from the view's own text
+   * field, which keeps the on-screen keyboard up.
+   */
+  private func takeKeyboard(fromTouch: Bool) {
+    guard enabled, window != nil, !isFirstResponder else { return }
+    if let current = DesklinkInputView.currentFirstResponder() {
+      if !fromTouch { return }
+      if let view = current as? UIView, view.isDescendant(of: self) { return }
+    }
+    becomeFirstResponder()
+  }
+
+  @objc private func editingEnded(_ notification: Notification) {
+    guard let field = notification.object as? UIView, field.isDescendant(of: self) else { return }
+    // Once the field has let go, the keyboard comes back to the desktop.
+    DispatchQueue.main.async { [weak self] in self?.takeKeyboard(fromTouch: false) }
+  }
+
+  fileprivate static weak var found: UIResponder?
+
+  static func currentFirstResponder() -> UIResponder? {
+    found = nil
+    UIApplication.shared.sendAction(#selector(UIResponder.desklinkReportFirstResponder), to: nil, from: nil, for: nil)
+    // With no first responder the action ends at the application itself.
+    return found?.isFirstResponder == true ? found : nil
+  }
+
+  // MARK: - Keys
+
+  override func pressesBegan(_ presses: Set<UIPress>, with event: UIPressesEvent?) {
+    var rest = Set<UIPress>()
+    for press in presses {
+      guard enabled, let key = press.key else { rest.insert(press); continue }
+      held[key.keyCode] = key
+      report(key, down: true)
+    }
+    if !rest.isEmpty { super.pressesBegan(rest, with: event) }
+  }
+
+  override func pressesEnded(_ presses: Set<UIPress>, with event: UIPressesEvent?) {
+    let rest = release(presses)
+    if !rest.isEmpty { super.pressesEnded(rest, with: event) }
+  }
+
+  override func pressesCancelled(_ presses: Set<UIPress>, with event: UIPressesEvent?) {
+    let rest = release(presses)
+    if !rest.isEmpty { super.pressesCancelled(rest, with: event) }
+  }
+
+  /** Report the keys among `presses` that went down here; the rest belong to someone else. */
+  private func release(_ presses: Set<UIPress>) -> Set<UIPress> {
+    var rest = Set<UIPress>()
+    for press in presses {
+      guard let key = press.key, held.removeValue(forKey: key.keyCode) != nil else { rest.insert(press); continue }
+      report(key, down: false)
+    }
+    return rest
+  }
+
+  /** Let go of every key still down: the desktop must not keep one held. */
+  private func releaseKeys() {
+    for key in held.values { report(key, down: false) }
+    held.removeAll()
+  }
+
+  /** The key's HID usage and the characters it types; JavaScript names it. Command is the desktop's Meta. */
+  private func report(_ key: UIKey, down: Bool) {
+    var modifiers: [String] = []
+    if key.modifierFlags.contains(.control) { modifiers.append("Control") }
+    if key.modifierFlags.contains(.alternate) { modifiers.append("Alt") }
+    if key.modifierFlags.contains(.command) { modifiers.append("Meta") }
+    if key.modifierFlags.contains(.shift) { modifiers.append("Shift") }
+    onKey(["down": down, "usage": key.keyCode.rawValue, "characters": key.characters, "modifiers": modifiers])
+  }
+
+  // MARK: - Pointer
+
+  override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
+    super.touchesBegan(touches, with: event)
+    guard enabled else { return }
+    takeKeyboard(fromTouch: true)
+    report(touches, phase: "down", event)
+  }
+
+  override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
+    super.touchesMoved(touches, with: event)
+    if enabled { report(touches, phase: "move", event) }
+  }
+
+  override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
+    super.touchesEnded(touches, with: event)
+    if enabled { report(touches, phase: "up", event) }
+  }
+
+  override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) {
+    super.touchesCancelled(touches, with: event)
+    if enabled { report(touches, phase: "cancel", event) }
+  }
+
+  /**
+   * A press of a trackpad or mouse with the button that made it. The touch's
+   * timestamp is the one React Native reports for the same touch, so the view
+   * can tell this press from a finger.
+   */
+  private func report(_ touches: Set<UITouch>, phase: String, _ event: UIEvent?) {
+    for touch in touches where touch.type == .indirectPointer {
+      let at = touch.location(in: self)
+      onPointer([
+        "phase": phase, "x": at.x, "y": at.y,
+        "buttons": event?.buttonMask.rawValue ?? 0, "timestamp": touch.timestamp * 1000,
+      ])
+    }
+  }
+
+  @objc private func hovered(_ recognizer: UIHoverGestureRecognizer) {
+    guard enabled, recognizer.state == .began || recognizer.state == .changed else { return }
+    let at = recognizer.location(in: self)
+    onPointer(["phase": "hover", "x": at.x, "y": at.y])
+  }
+
+  @objc private func scrolled(_ recognizer: UIPanGestureRecognizer) {
+    guard enabled else { return }
+    let at = recognizer.location(in: self)
+    let moved = recognizer.translation(in: self)
+    recognizer.setTranslation(.zero, in: self)
+    let phase: String
+    switch recognizer.state {
+    case .began: phase = "begin"
+    case .changed: phase = "move"
+    default: phase = "end"
+    }
+    onWheel(["phase": phase, "dx": moved.x, "dy": moved.y, "x": at.x, "y": at.y])
+  }
+}
+
+extension UIResponder {
+  @objc fileprivate func desklinkReportFirstResponder() {
+    DesklinkInputView.found = self
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@desklink/react-native",
-    "version": "0.1.1",
+    "version": "0.3.0",
     "license": "Apache-2.0",
     "description": "Render and drive a desktop session from a React Native app",
     "main": "index.ts",
@@ -10,7 +10,9 @@
         "./availability": {
             "browser": "./src/availability.web.ts",
             "default": "./src/availability.ts"
-        }
+        },
+        "./app.plugin.js": "./app.plugin.js",
+        "./package.json": "./package.json"
     },
     "files": [
         "index.ts",
@@ -19,6 +21,9 @@
         "android/build.gradle",
         "android/gradle.properties",
         "android/src/main",
+        "ios/*.swift",
+        "ios/*.podspec",
+        "app.plugin.js",
         "expo-module.config.json",
         "NOTICE",
         "README.md"
@@ -29,5 +34,9 @@
         "react": ">=19",
         "react-native": ">=0.83",
         "react-native-webrtc": ">=124"
+    },
+    "scripts": {
+        "test:reconnect": "node test/reconnect-flow.mjs",
+        "test:ios": "node test/ios-flow.mjs"
     }
 }

package/src/DesktopView.ios.spec.tsx

@@ -0,0 +1,354 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import React from 'react';
+import TestRenderer from 'react-test-renderer';
+
+/** `act` refuses to flush state updates unless React is told this is a test. */
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+/**
+ * Drives the real iOS view — its gestures, keyboard and control channel — and
+ * reads the exact messages the desktop receives. Only the platform underneath
+ * is stood in for: `react-native` primitives are host strings, the WebRTC
+ * stack arrives through the bundler's lazy require, and the peer hands over a
+ * data channel that records what it is asked to send. Behaviour here must
+ * match `DesktopView.kt`.
+ */
+
+vi.mock('react-native', () => ({
+    Keyboard: { addListener: () => ({ remove: () => undefined }), dismiss: () => undefined },
+    StyleSheet: { create: (styles: unknown) => styles },
+    TextInput: 'TextInput',
+    View: 'View',
+}));
+
+/** Whether the build carries the package's native input view; by default it stands for one without. */
+const nativeInput = { installed: false };
+vi.mock('expo-modules-core', () => ({
+    requireOptionalNativeModule: (name: string) => (nativeInput.installed && name === 'DesklinkInput' ? {} : null),
+    requireNativeViewManager: () => 'DesklinkInput',
+}));
+
+// The bundler's inline require, standing in: it goes through the stubbed global so the spec sees when it runs.
+vi.mock('./webrtc.ios', () => ({ requireWebRTC: () => (globalThis as unknown as { require: (id: string) => unknown }).require('react-native-webrtc') }));
+
+class MockStream {
+    addTrack = vi.fn();
+    toURL() { return 'stream'; }
+}
+class MockPeer {
+    ontrack?: (event: { track: { kind: string }; streams: never[] }) => void;
+    ondatachannel?: (event: { channel: unknown }) => void;
+    oniceconnectionstatechange?: () => void;
+    iceConnectionState = 'new';
+    localDescription = { sdp: 'answer' };
+    setRemoteDescription = vi.fn(async () => undefined);
+    addIceCandidate = vi.fn(async () => undefined);
+    createAnswer = vi.fn(async () => ({ type: 'answer', sdp: 'answer' }));
+    setLocalDescription = vi.fn(async () => undefined);
+    close = vi.fn();
+    constructor() { peers.push(this); }
+}
+const peers: MockPeer[] = [];
+function MockRTCView() { return null; }
+
+/** What the bundler's lazy require handed out, in order. */
+const required: string[] = [];
+
+const BOUNDS = { width: 390, height: 844 };
+const DESKTOP = { width: 1280, height: 720 };
+// fit = min(390/1280, 844/720); the picture is 390 wide, centred vertically.
+const SCALE = Math.min(BOUNDS.width / DESKTOP.width, BOUNDS.height / DESKTOP.height);
+const ORIGIN_Y = (BOUNDS.height - DESKTOP.height * SCALE) / 2;
+
+type Touch = { locationX: number; locationY: number; timestamp?: number };
+function touch(x: number, y: number, timestamp?: number): Touch { return { locationX: x, locationY: y, timestamp }; }
+
+async function openView(options: { gestures?: 'desktop' | 'browser' | 'device'; accessibilityLabel?: string; native?: boolean } = {}) {
+    nativeInput.installed = options.native === true;
+    const { desktopInputEnabled, nativeDesklink } = await import('./native.ios');
+    const { DesktopView } = await import('./DesktopView.ios');
+    const id = nativeDesklink.createSession('[]')!;
+    const peer = peers.at(-1)!;
+    const sent: Record<string, unknown>[] = [];
+    peer.ondatachannel!({
+        channel: { readyState: 'open', send: (value: string) => { sent.push(JSON.parse(value)); }, close: () => undefined },
+    });
+    nativeDesklink.setInputEnabled(id, true);
+    expect(desktopInputEnabled(id)).toBe(true);
+    let renderer: TestRenderer.ReactTestRenderer | null = null;
+    TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+            <DesktopView sessionId={id} gestures={options.gestures} accessibilityLabel={options.accessibilityLabel} />,
+        );
+    });
+    const outer = () => renderer!.root.findByType(options.native ? 'DesklinkInput' as never : 'View').props as {
+        onLayout: (event: { nativeEvent: { layout: { width: number; height: number } } }) => void;
+        onResponderGrant: (event: { nativeEvent: { touches: Touch[] } }) => void;
+        onResponderMove: (event: { nativeEvent: { touches: Touch[] } }) => void;
+        onResponderRelease: (event: { nativeEvent: { touches: Touch[] } }) => void;
+        [key: string]: unknown;
+    };
+    TestRenderer.act(() => {
+        outer().onLayout({ nativeEvent: { layout: { ...BOUNDS } } });
+        nativeDesklink.setSurfaceSize(id, DESKTOP.width, DESKTOP.height);
+        peer.ontrack!({ track: { kind: 'video' }, streams: [] });
+    });
+    const grant = (at: Touch[]) => TestRenderer.act(() => { outer().onResponderGrant({ nativeEvent: { touches: at } }); });
+    const move = (at: Touch[]) => TestRenderer.act(() => { outer().onResponderMove({ nativeEvent: { touches: at } }); });
+    const release = (at: Touch[] = []) => TestRenderer.act(() => { outer().onResponderRelease({ nativeEvent: { touches: at } }); });
+    const submit = () => TestRenderer.act(() => {
+        renderer!.root.findByType('TextInput').props.onSubmitEditing();
+    });
+    const rtcStyle = () => renderer!.root.findByType(MockRTCView).props.style as { left: number; top: number; width: number; height: number };
+    /** What the native input view reports, as its events. */
+    const native = {
+        key: (usage: number, down: boolean, characters = '', modifiers: string[] = []) => TestRenderer.act(() => {
+            (outer().onKey as (event: unknown) => void)({ nativeEvent: { usage, down, characters, modifiers } });
+        }),
+        pointer: (phase: string, x: number, y: number, buttons = 0, timestamp?: number) => TestRenderer.act(() => {
+            (outer().onPointer as (event: unknown) => void)({ nativeEvent: { phase, x, y, buttons, timestamp } });
+        }),
+        wheel: (phase: string, dx: number, dy: number, x = 195, y = 420) => TestRenderer.act(() => {
+            (outer().onWheel as (event: unknown) => void)({ nativeEvent: { phase, dx, dy, x, y } });
+        }),
+    };
+    return { id, nativeDesklink, renderer: renderer!, sent, outer, grant, move, release, submit, rtcStyle, native };
+}
+
+beforeEach(() => {
+    peers.length = 0;
+    required.length = 0;
+    // The device bundler evaluates `react-native-webrtc` on first require;
+    // nothing in this package may require it at import time.
+    vi.stubGlobal('require', (mod: string) => {
+        required.push(mod);
+        if (mod === 'react-native-webrtc') return { MediaStream: MockStream, RTCPeerConnection: MockPeer, RTCView: MockRTCView };
+        throw new Error(`unexpected require: ${mod}`);
+    });
+});
+afterEach(() => { vi.unstubAllGlobals(); });
+
+describe('DesktopView.ios parity with DesktopView.kt', () => {
+    it('ignores a one-finger drag that starts in the letterbox', async () => {
+        const { sent, grant, move, release } = await openView();
+        // y = 10 is above the fitted picture (it starts at ORIGIN_Y).
+        grant([touch(10, 10)]);
+        move([touch(50, 50)]);
+        release();
+        expect(sent.filter((message) => message.kind === 'pointer')).toEqual([]);
+        // Sanity: the same drag on the picture carries the pointer.
+        grant([touch(195, 420)]);
+        move([touch(250, 430)]);
+        release();
+        expect(sent.filter((message) => message.kind === 'pointer' && message.phase === 'move')).not.toEqual([]);
+    });
+
+    it('zooms around the pinch focus and re-clamps after zooming out', async () => {
+        const { rtcStyle, grant, move } = await openView();
+        grant([touch(100, 400)]);
+        move([touch(100, 400), touch(140, 400)]);
+        move([touch(80, 400), touch(160, 400)]);
+        expect(rtcStyle().width).toBeCloseTo(DESKTOP.width * SCALE * 2, 0);
+        // The desktop point under the focus (120, 400) stays under it.
+        expect(rtcStyle().left).toBeCloseTo(-120, 0);
+        // Pinching back to 1x recentres: no stale offset left behind.
+        move([touch(100, 400), touch(140, 400)]);
+        expect(rtcStyle().width).toBeCloseTo(BOUNDS.width, 0);
+        expect(rtcStyle().left).toBeCloseTo(0, 5);
+    });
+
+    it('accumulates wheel below the send threshold and moves the pointer to the scroll focus', async () => {
+        const { sent, grant, move, release } = await openView();
+        grant([touch(190, 420)]);
+        move([touch(190, 420), touch(200, 420)]);
+        move([touch(192, 421), touch(202, 421)]);
+        move([touch(194, 422), touch(204, 422)]);
+        move([touch(196, 423), touch(206, 423)]);
+        // The last step crosses the slop into a scroll, but its own single
+        // pixel stays below the 0.05 detent threshold: held back.
+        move([touch(197, 424), touch(207, 424)]);
+        const wheels = () => sent.filter((message) => message.kind === 'wheel');
+        expect(wheels()).toEqual([]);
+        // A second pixel crosses it: one fractional wheel step goes out.
+        move([touch(198, 424), touch(208, 424)]);
+        expect(wheels()).toHaveLength(1);
+        expect(wheels()[0].dx).toBeCloseTo(-2 / SCALE / 120, 5);
+        expect(wheels()[0].dy).toBeCloseTo(-1 / SCALE / 120, 5);
+        // The desktop scrolled whatever was under its pointer.
+        expect(sent.filter((message) => message.kind === 'pointer' && message.phase === 'move')).not.toEqual([]);
+        release();
+    });
+
+    it('releases a held device drag when the profile switches away', async () => {
+        const first = await openView({ gestures: 'device' });
+        first.grant([touch(195, 420)]);
+        expect(first.sent.at(-1)).toMatchObject({ kind: 'pointer', phase: 'down', button: 1 });
+        const { DesktopView } = await import('./DesktopView.ios');
+        TestRenderer.act(() => {
+            first.renderer.update(<DesktopView sessionId={first.id} gestures="desktop" />);
+        });
+        expect(first.sent.at(-1)).toMatchObject({ kind: 'release_all' });
+    });
+
+    it('sends Enter through capture while a sticky modifier is held', async () => {
+        const { id, nativeDesklink, sent, submit } = await openView();
+        const keys: Record<string, unknown>[] = [];
+        const listener = nativeDesklink.addListener!('onSessionEvent', (event) => {
+            if (event.sessionId === id && event.name === 'keyboard') keys.push(event.payload);
+        });
+        nativeDesklink.captureKeyboard(id, true);
+        submit();
+        listener.remove();
+        expect(keys).toEqual([{ key: 'Enter' }]);
+        expect(sent.filter((message) => message.kind === 'key')).toEqual([]);
+    });
+
+    it('puts the cursor mark tip on the pointer with a hotspot', async () => {
+        const { renderer, grant, move } = await openView();
+        grant([touch(195, 420)]);
+        move([touch(250, 430)]);
+        const cursor = renderer.root.findAllByType('View')[1].props.style as unknown[];
+        const mark = cursor[1] as { left: number; top: number };
+        const desktop = { x: Math.floor(250 / SCALE), y: Math.floor((430 - ORIGIN_Y) / SCALE) };
+        expect(mark.left).toBeCloseTo((desktop.x + 0.5) * SCALE - 3, 1);
+        expect(mark.top).toBeCloseTo(ORIGIN_Y + (desktop.y + 0.5) * SCALE - 3, 1);
+        expect(renderer.root.findAllByType('View')[1].props.accessible).toBe(false);
+    });
+
+    it('exposes the surface to VoiceOver only with a label', async () => {
+        const labelled = await openView({ accessibilityLabel: 'Desktop' });
+        expect(labelled.outer().accessible).toBe(true);
+        const unlabelled = await openView();
+        expect(unlabelled.outer().accessible).toBe(false);
+        expect(unlabelled.renderer.root.findByType('TextInput').props.accessible).toBe(false);
+    });
+
+    it('keeps WebRTC out of the import and loads it on first render', async () => {
+        vi.resetModules();
+        await import('./DesktopView.ios');
+        expect(required).not.toContain('react-native-webrtc');
+        await openView();
+        expect(required).toContain('react-native-webrtc');
+    });
+});
+
+describe('DesktopView.ios hardware keyboard and pointer', () => {
+    /** Desktop pixels under a point of the view. */
+    const pixel = (x: number, y: number) => ({ x: Math.floor(x / SCALE), y: Math.floor((y - ORIGIN_Y) / SCALE) });
+    const pointers = (sent: Record<string, unknown>[]) => sent.filter((message) => message.kind === 'pointer')
+        .map(({ phase, x, y, button }) => ({ phase, x, y, button }));
+
+    it('keeps a plain view where the build has no native input view', async () => {
+        const { renderer } = await openView();
+        expect(renderer.root.findAllByType('DesklinkInput' as never)).toEqual([]);
+    });
+
+    it('arms the native view only while control is enabled', async () => {
+        const { id, nativeDesklink, outer } = await openView({ native: true });
+        expect(outer().enabled).toBe(true);
+        TestRenderer.act(() => { nativeDesklink.setInputEnabled(id, false); });
+        expect(outer().enabled).toBe(false);
+    });
+
+    it('sends arrows, Esc, Tab and a Command chord from the hardware keyboard', async () => {
+        const { sent, native } = await openView({ native: true });
+        native.key(0x52, true); native.key(0x52, false);
+        native.key(0x29, true); native.key(0x29, false);
+        native.key(0x2b, true, '\t'); native.key(0x2b, false, '\t');
+        native.key(0xe3, true, '', ['Meta']);
+        native.key(0x06, true, 'c', ['Meta']);
+        native.key(0x06, false, 'c', ['Meta']);
+        native.key(0xe3, false);
+        native.key(0x0b, true, 'h'); native.key(0x0b, false, 'h');
+        expect(sent.map(({ seq: _seq, ...message }) => message)).toEqual([
+            { kind: 'key', name: 'ArrowUp', modifiers: [], down: true }, { kind: 'key', name: 'ArrowUp', modifiers: [], down: false },
+            { kind: 'key', name: 'Escape', modifiers: [], down: true }, { kind: 'key', name: 'Escape', modifiers: [], down: false },
+            { kind: 'key', name: 'Tab', modifiers: [], down: true }, { kind: 'key', name: 'Tab', modifiers: [], down: false },
+            { kind: 'key', name: 'Meta', modifiers: ['Meta'], down: true },
+            { kind: 'key', character: 'c', modifiers: ['Meta'], down: true }, { kind: 'key', character: 'c', modifiers: ['Meta'], down: false },
+            { kind: 'key', name: 'Meta', modifiers: [], down: false },
+            { kind: 'text', text: 'h' },
+        ]);
+    });
+
+    it('hands hardware keys to the session while a sticky modifier waits', async () => {
+        const { id, nativeDesklink, sent, native } = await openView({ native: true });
+        const keys: Record<string, unknown>[] = [];
+        const listener = nativeDesklink.addListener!('onSessionEvent', (event) => {
+            if (event.sessionId === id && event.name === 'keyboard') keys.push(event.payload);
+        });
+        nativeDesklink.captureKeyboard(id, true);
+        native.key(0x19, true, 'v');
+        native.key(0x28, true, '\r');
+        listener.remove();
+        expect(keys).toEqual([{ text: 'v' }, { key: 'Enter' }]);
+        expect(sent).toEqual([]);
+    });
+
+    it('hovers the desktop pointer without a button or a drawn mark, and not from the letterbox', async () => {
+        const { sent, native, renderer } = await openView({ native: true });
+        native.pointer('hover', 10, 10);
+        native.pointer('hover', 200, 400);
+        expect(pointers(sent)).toEqual([{ phase: 'move', ...pixel(200, 400), button: undefined }]);
+        // The system draws the trackpad's own pointer.
+        expect(renderer.root.findAllByType('View')).toEqual([]);
+    });
+
+    it('drags with a trackpad press the native view reported before touch saw it', async () => {
+        const { sent, native, grant, move, release } = await openView({ native: true });
+        native.pointer('down', 100, 400, 1, 5000);
+        grant([touch(100, 400, 5000)]);
+        native.pointer('move', 160, 410, 1);
+        move([touch(160, 410, 5010)]);
+        native.pointer('up', 160, 410, 0);
+        release();
+        expect(pointers(sent)).toEqual([
+            { phase: 'down', ...pixel(100, 400), button: 1 },
+            { phase: 'move', ...pixel(160, 410), button: 1 },
+            { phase: 'up', ...pixel(160, 410), button: 1 },
+        ]);
+    });
+
+    it('right-clicks with a secondary press touch saw first, and no long press follows', async () => {
+        vi.useFakeTimers();
+        try {
+            const { sent, native, grant, release } = await openView({ native: true });
+            grant([touch(100, 400, 6000)]);
+            native.pointer('down', 100, 400, 2, 6000);
+            TestRenderer.act(() => { vi.advanceTimersByTime(600); });
+            native.pointer('up', 100, 400, 0);
+            release();
+            expect(pointers(sent)).toEqual([
+                { phase: 'down', ...pixel(100, 400), button: 3 },
+                { phase: 'up', ...pixel(100, 400), button: 3 },
+            ]);
+        } finally {
+            vi.useRealTimers();
+        }
+    });
+
+    it('does not press twice when a device-profile touch already pressed for the trackpad', async () => {
+        const { sent, native, grant, release } = await openView({ native: true, gestures: 'device' });
+        grant([touch(100, 400, 7000)]);
+        native.pointer('down', 100, 400, 1, 7000);
+        native.pointer('up', 100, 400, 0);
+        release();
+        expect(pointers(sent)).toEqual([
+            { phase: 'down', ...pixel(100, 400), button: 1 },
+            { phase: 'up', ...pixel(100, 400), button: 1 },
+        ]);
+    });
+
+    it('scrolls the desktop under the pointer with a trackpad, content following the fingers', async () => {
+        const { sent, native } = await openView({ native: true });
+        native.wheel('begin', 0, -30, 200, 400);
+        native.wheel('move', 0, -0.01, 200, 400);
+        native.wheel('end', 0, 0, 200, 400);
+        expect(pointers(sent)).toEqual([{ phase: 'move', ...pixel(200, 400), button: undefined }]);
+        const wheels = sent.filter((message) => message.kind === 'wheel');
+        expect(wheels).toHaveLength(2);
+        expect(wheels[0].dy).toBeCloseTo(30 / SCALE / 120, 5);
+        // What stayed below the send threshold goes out when the scroll ends.
+        expect(wheels[1].dy).toBeCloseTo(0.01 / SCALE / 120, 5);
+    });
+});