@desklink/react-native 0.1.0 → 0.1.1

package/README.md

@@ -16,14 +16,11 @@ repository it resolves through the workspace; anywhere else, install it from npm
 npx expo install @desklink/react-native      # or yarn add, then prebuild/rebuild
 ```
 
-Android as a native module, plus the browser, which brings its own WebRTC.
-`expo-module.config.json` declares the native side honestly rather than
-compiling an untested stub for other platforms; `ios/DEFERRED.md` lists exactly
-what an iOS backend has to implement.
-
-It compiles against the WebRTC binding the app already ships
-(`react-native-webrtc`) so there is one `org.webrtc` copy in the binary, and it
-never touches that binding's process-global decoder factory.
+Android uses an Expo native module; iOS uses the app's existing
+`react-native-webrtc` peer connection and `RTCView` from JavaScript. Both need a
+dev client or native build containing that binding. Web uses the browser's WebRTC.
+No second WebRTC binary is linked. The Android module has its own hardware-first
+decoder factory; iOS uses the decoder shipped by `react-native-webrtc`.
 
 ## Use
 
@@ -44,7 +41,7 @@ await desktop.connect();
 // On a deliberate control action, once the picture is live:
 desktop.setInputEnabled(true);
 desktop.showKeyboard();
-desktop.setOrientation('landscape');   // Android: hold the screen on its side; 'auto' to follow the phone
+desktop.setOrientation('landscape');   // Android only; iOS apps configure supported orientations themselves
 await desktop.pasteLocalToRemote(await Clipboard.getStringAsync());
 ```
 
@@ -61,29 +58,29 @@ import { desktopAvailable } from '@desklink/react-native/availability';
 
 ### What the package guarantees
 
-- **Hardware-first decoding.** The session builds its own peer connection with
-  a hardware-first decoder factory for VP9, falling back to software on phones
-  without a VP9 hardware decoder. No other WebRTC user in the app is affected.
+- **VP9 decoding.** Android builds a session-scoped hardware-first decoder
+  factory with software fallback. iOS uses the app's `react-native-webrtc`
+  decoder; neither platform links a second WebRTC stack.
 - **A sharp, zoomable picture.** The desktop fits the view by default; a pinch
   zooms up to 2.5 view pixels per desktop pixel and one finger moves around the
   zoomed desktop. On Android the decoded frame is copied once into the view's
   own texture and drawn with a multi-tap filter when it is shown smaller than
   its size, so a fitted 4K desktop does not alias and a pinch redraws at once.
-  `fitToView()` shows the whole desktop again.
+  iOS uses `RTCView`'s native renderer. `fitToView()` shows the whole desktop again.
 - **A pointer a phone can see.** Once a touch has sent the desktop's pointer
   somewhere, the view draws it there at a readable size, over a picture whose
-  own cursor is a few pixels tall or not captured at all. A mouse keeps its own.
+  own cursor is a few pixels tall or not captured at all. Android hides the
+  extra mark when a mouse is attached.
 - **The picture above the keyboard.** While the phone's keyboard is up, the
   picture sits above it and above the room the app keeps for its own controls
-  (`keyboardClearance`), moving with the keyboard as it slides. A picture too
-  tall for what is left keeps the pointer, where a tap just put the caret, in
-  sight.
+  (`keyboardClearance`). Android follows the keyboard animation and keeps the
+  pointer in sight; iOS follows the keyboard show/hide bounds.
 - **Contained geometry.** Touch maps through the picture's actual placement.
   A one-finger drag starting in the letterbox does not move the pointer; a
   second finger on the picture can still start a pinch or scroll. A drag that
   leaves the picture is held to its edge rather than released somewhere unseen.
-- **The gestures remote-desktop viewers settled on,** decided natively with a
-  slop threshold: tap to click, and a second tap close by is a double click on
+- **The gestures remote-desktop viewers settled on,** with a slop threshold:
+  tap to click, and a second tap close by is a double click on
   the same point; hold and release for a right click where the finger rested
   (every desktop app's context menu); hold then drag for the left button
   (select text, move a window); on the whole desktop a finger that moves
@@ -91,14 +88,14 @@ import { desktopAvailable } from '@desklink/react-native/availability';
   under the finger while the picture catches up; two fingers scroll the desktop
   under them, or pinch; a quick two-finger tap is a right click too. Scrolling
   is fractional wheel steps, smooth where the desktop supports high-resolution
-  wheels. Under congestion, only the latest unsent pointer position is kept;
-  other input follows that position in order.
+  wheels. Android coalesces pending pointer moves under congestion.
 - **The keys a phone lacks.** `modifiers`, `tapModifier` and `pressKey` give
   sticky Ctrl and Shift: tap arms one for the next key, tap again locks it.
   While one is armed, the next key or character the phone's keyboard types is
   sent as that key's chord, so Ctrl then v is Ctrl+V. The app draws the keys.
-- **Readiness is a rendered frame.** `status: 'live'` is set by the first frame
-  actually presented, not by a track arriving or ICE connecting.
+- **Readiness is a rendered frame.** Android marks the first draw; iOS uses
+  `RTCView`'s native video-dimensions callback, which fires after a decoded
+  picture arrives. Neither marks a track or ICE connection as live.
 - **Control starts off.** `setInputEnabled(true)` enables pointer, keyboard and
   clipboard input; `setInputEnabled(false)` blocks new input, releases held keys
   and buttons, and resets pending gestures. The app decides when to enable it

package/android/build.gradle

@@ -2,7 +2,7 @@ apply plugin: 'com.android.library'
 apply plugin: 'kotlin-android'
 
 group = 'expo.modules.desklink'
-version = '0.1.0'
+version = '0.1.1'
 
 android {
   namespace 'expo.modules.desklink'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@desklink/react-native",
-    "version": "0.1.0",
+    "version": "0.1.1",
     "license": "Apache-2.0",
     "description": "Render and drive a desktop session from a React Native app",
     "main": "index.ts",

package/src/DesktopView.ios.tsx

@@ -0,0 +1,196 @@
+import * as React from 'react';
+import { Keyboard, StyleSheet, TextInput, View, type GestureResponderEvent, type LayoutChangeEvent } from 'react-native';
+import { RTCView } from 'react-native-webrtc';
+import type { DesktopViewProps } from './DesktopView';
+import { keyboardDelta } from './keyboardDelta';
+import { desktopInputEnabled, emitDesktopKeyboard, getDesktopSize, getDesktopStream, markDesktopPresented, nativeDesklink, observeDesktopSurface, registerDesktopView } from './native.ios';
+
+type Point = { x: number; y: number };
+type Gesture = { start: Point; last: Point; time: number; mode: 'pending' | 'hover' | 'pan' | 'armed' | 'drag' | 'two' | 'scroll' | 'pinch' | 'spent'; span: number; focus: Point };
+
+export function DesktopView({ sessionId, style, placeholder, accessibilityLabel, keyboardClearance = 0 }: DesktopViewProps) {
+    const [revision, refresh] = React.useReducer((n: number) => n + 1, 0);
+    const [bounds, setBounds] = React.useState({ width: 0, height: 0 });
+    const [size, setSize] = React.useState(() => getDesktopSize(sessionId) ?? { width: 0, height: 0 });
+    const [keyboardHeight, setKeyboardHeight] = React.useState(0);
+    const [zoom, setZoom] = React.useState(1);
+    const [offset, setOffset] = React.useState<Point>({ x: 0, y: 0 });
+    const [cursor, setCursor] = React.useState<Point | null>(null);
+    const [keyboardText, setKeyboardText] = React.useState('');
+    const keyboardTextRef = React.useRef('');
+    const input = React.useRef<TextInput>(null);
+    const captured = React.useRef(false);
+    const gesture = React.useRef<Gesture | null>(null);
+    const longPress = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+    const lastTap = React.useRef<{ time: number; at: Point; point: Point } | null>(null);
+    const [enabled, setEnabled] = React.useState(() => desktopInputEnabled(sessionId));
+    const stream = getDesktopStream(sessionId);
+    void revision;
+
+    React.useEffect(() => {
+        setEnabled(desktopInputEnabled(sessionId));
+        return observeDesktopSurface(() => { refresh(); setEnabled(desktopInputEnabled(sessionId)); });
+    }, [sessionId]);
+    React.useEffect(() => {
+        const show = Keyboard.addListener('keyboardWillShow', (event) => setKeyboardHeight(event.endCoordinates.height));
+        const hide = Keyboard.addListener('keyboardWillHide', () => setKeyboardHeight(0));
+        return () => { show.remove(); hide.remove(); };
+    }, []);
+    React.useEffect(() => {
+        if (!sessionId) return;
+        return registerDesktopView(sessionId, {
+            show: () => { if (desktopInputEnabled(sessionId)) input.current?.focus(); },
+            hide: () => { input.current?.blur(); Keyboard.dismiss(); },
+            capture: (value) => { captured.current = value; },
+        }, {
+            size: (width, height) => setSize({ width, height }),
+            fit: () => { setZoom(1); setOffset({ x: 0, y: 0 }); },
+        });
+    }, [sessionId]);
+
+    const visibleHeight = Math.max(1, bounds.height - (keyboardHeight ? keyboardHeight + keyboardClearance : 0));
+    const fit = size.width && size.height ? Math.min(bounds.width / size.width, visibleHeight / size.height) : 1;
+    const scale = fit * zoom;
+    const pictureWidth = size.width * scale;
+    const pictureHeight = size.height * scale;
+    const originX = (bounds.width - pictureWidth) / 2 + offset.x;
+    const originY = (visibleHeight - pictureHeight) / 2 + offset.y;
+    const point = (x: number, y: number, clamp = false): Point | null => {
+        if (!size.width || !size.height || !scale) return null;
+        const px = Math.floor((x - originX) / scale);
+        const py = Math.floor((y - originY) / scale);
+        if (!clamp && (px < 0 || py < 0 || px >= size.width || py >= size.height)) return null;
+        return { x: Math.max(0, Math.min(size.width - 1, px)), y: Math.max(0, Math.min(size.height - 1, py)) };
+    };
+    const send = (control: Record<string, unknown>) => { if (sessionId) nativeDesklink.sendControl(sessionId, JSON.stringify(control)); };
+    const pointer = (phase: string, at: Point, button?: number) => {
+        send({ kind: 'pointer', phase, x: at.x, y: at.y, ...(button ? { button } : {}) });
+        setCursor(at);
+    };
+    const click = (at: Point, button = 1) => { pointer('down', at, button); pointer('up', at, button); };
+    const stopTimer = () => { if (longPress.current) clearTimeout(longPress.current); longPress.current = null; };
+    const focus = (touches: readonly { locationX: number; locationY: number }[]): Point => ({
+        x: (touches[0].locationX + touches[1].locationX) / 2,
+        y: (touches[0].locationY + touches[1].locationY) / 2,
+    });
+    const span = (touches: readonly { locationX: number; locationY: number }[]) => Math.hypot(touches[0].locationX - touches[1].locationX, touches[0].locationY - touches[1].locationY);
+    const start = (event: GestureResponderEvent) => {
+        if (!enabled) return;
+        const touches = event.nativeEvent.touches;
+        if (touches.length !== 1) return;
+        const at = { x: touches[0].locationX, y: touches[0].locationY };
+        gesture.current = { start: at, last: at, time: Date.now(), mode: 'pending', span: 0, focus: at };
+        stopTimer();
+        longPress.current = setTimeout(() => {
+            if (gesture.current?.mode === 'pending' && point(at.x, at.y)) gesture.current.mode = 'armed';
+        }, 500);
+    };
+    const move = (event: GestureResponderEvent) => {
+        if (!enabled) return;
+        const g = gesture.current;
+        if (!g) return;
+        const touches = event.nativeEvent.touches;
+        if (touches.length === 2) {
+            stopTimer();
+            const center = focus(touches);
+            const distance = span(touches);
+            if (g.mode !== 'two' && g.mode !== 'pinch' && g.mode !== 'scroll') {
+                if (g.mode === 'drag') send({ kind: 'release_all' });
+                g.mode = 'two'; g.span = distance; g.focus = center; g.start = center;
+                return;
+            }
+            if (g.mode === 'two') {
+                if (Math.abs(distance - g.span) > 12) g.mode = 'pinch';
+                else if (Math.hypot(center.x - g.start.x, center.y - g.start.y) > 8) g.mode = 'scroll';
+            }
+            if (g.mode === 'pinch' && g.span) {
+                setZoom((value) => Math.max(1, Math.min(2.5 / fit, value * distance / g.span)));
+            } else if (g.mode === 'scroll') {
+                send({ kind: 'wheel', dx: -(center.x - g.focus.x) / scale / 120, dy: -(center.y - g.focus.y) / scale / 120 });
+            }
+            g.span = distance; g.focus = center;
+            return;
+        }
+        if (touches.length !== 1 || g.mode === 'spent' || g.mode === 'two' || g.mode === 'pinch' || g.mode === 'scroll') return;
+        const at = { x: touches[0].locationX, y: touches[0].locationY };
+        if (g.mode === 'pending' && Math.hypot(at.x - g.start.x, at.y - g.start.y) > 8) {
+            stopTimer();
+            g.mode = zoom > 1 ? 'pan' : 'hover';
+        }
+        if (g.mode === 'pan') {
+            const dx = at.x - g.last.x;
+            const dy = at.y - g.last.y;
+            setOffset((current) => ({
+                x: Math.max(-Math.max(0, (pictureWidth - bounds.width) / 2), Math.min(Math.max(0, (pictureWidth - bounds.width) / 2), current.x + dx)),
+                y: Math.max(-Math.max(0, (pictureHeight - visibleHeight) / 2), Math.min(Math.max(0, (pictureHeight - visibleHeight) / 2), current.y + dy)),
+            }));
+        }
+        if (g.mode === 'armed' && Math.hypot(at.x - g.start.x, at.y - g.start.y) > 8) {
+            const from = point(g.start.x, g.start.y, true);
+            if (from) pointer('down', from, 1);
+            g.mode = 'drag';
+        }
+        if (g.mode === 'hover' || g.mode === 'drag') {
+            const to = point(at.x, at.y, true);
+            if (to) pointer('move', to, g.mode === 'drag' ? 1 : undefined);
+        }
+        g.last = at;
+    };
+    const end = (event: GestureResponderEvent) => {
+        stopTimer();
+        const g = gesture.current;
+        if (!g) return;
+        if (g.mode === 'two' && Date.now() - g.time < 350) {
+            const at = point(g.focus.x, g.focus.y);
+            if (at) click(at, 3);
+            g.mode = 'spent';
+        }
+        // A remaining finger after a two-finger gesture must not begin a click.
+        if (event.nativeEvent.touches.length > 0) { g.mode = 'spent'; return; }
+        gesture.current = null;
+        if (g.mode === 'drag') { const at = point(g.last.x, g.last.y, true); if (at) pointer('up', at, 1); else send({ kind: 'release_all' }); }
+        else if (g.mode === 'armed') { const at = point(g.start.x, g.start.y); if (at) click(at, 3); }
+        else if (g.mode === 'pending') {
+            const at = point(g.start.x, g.start.y);
+            if (at) {
+                const prev = lastTap.current;
+                const repeated = prev && Date.now() - prev.time < 350 && Math.hypot(prev.at.x - g.start.x, prev.at.y - g.start.y) < 40;
+                click(repeated ? prev.point : at);
+                lastTap.current = { time: Date.now(), at: g.start, point: repeated ? prev.point : at };
+            }
+        }
+    };
+    const changeText = (text: string) => {
+        // Retain only a short suffix so iOS can generate deletion events while
+        // autocorrect and multi-stage input still arrive as committed text.
+        const { removed, added } = keyboardDelta(keyboardTextRef.current, text);
+        keyboardTextRef.current = text.length > 64 ? text.slice(-32) : text;
+        for (let i = 0; i < removed; i++) {
+            if (captured.current && sessionId) emitDesktopKeyboard(sessionId, { key: 'Backspace' });
+            else { send({ kind: 'key', name: 'Backspace', modifiers: [], down: true }); send({ kind: 'key', name: 'Backspace', modifiers: [], down: false }); }
+        }
+        if (added) {
+            if (captured.current && sessionId) emitDesktopKeyboard(sessionId, { text: added });
+            else send({ kind: 'text', text: added });
+        }
+        setKeyboardText(keyboardTextRef.current);
+    };
+    const onLayout = (event: LayoutChangeEvent) => setBounds(event.nativeEvent.layout);
+    return <View style={[styles.surface, style]} onLayout={onLayout} accessibilityLabel={accessibilityLabel}
+        onStartShouldSetResponder={() => enabled} onMoveShouldSetResponder={() => enabled}
+        onResponderGrant={start} onResponderMove={move} onResponderRelease={end}
+        onResponderTerminate={() => { stopTimer(); if (gesture.current?.mode === 'drag') send({ kind: 'release_all' }); gesture.current = null; }}>
+        {sessionId && stream && size.width > 0 && size.height > 0 ?
+            <RTCView pointerEvents="none" streamURL={stream.toURL()} objectFit="contain" style={{ position: 'absolute', left: originX, top: originY, width: pictureWidth, height: pictureHeight }}
+                onDimensionsChange={(event) => { if (event.nativeEvent.width > 0 && event.nativeEvent.height > 0) markDesktopPresented(sessionId); }} /> : placeholder}
+        {cursor && <View pointerEvents="none" style={[styles.cursor, { left: originX + (cursor.x + 0.5) * scale, top: originY + (cursor.y + 0.5) * scale }]} />}
+        <TextInput ref={input} style={styles.input} value={keyboardText} onChangeText={changeText} autoCorrect={false} autoCapitalize="none" submitBehavior="submit"
+            onSubmitEditing={() => { send({ kind: 'key', name: 'Enter', modifiers: [], down: true }); send({ kind: 'key', name: 'Enter', modifiers: [], down: false }); }} />
+    </View>;
+}
+
+const styles = StyleSheet.create({
+    surface: { backgroundColor: '#000', overflow: 'hidden' },
+    cursor: { position: 'absolute', width: 12, height: 18, backgroundColor: '#fff', borderWidth: 2, borderColor: '#000', transform: [{ rotate: '-30deg' }] },
+    input: { position: 'absolute', width: 1, height: 1, opacity: 0, left: 0, bottom: 0 },
+});

package/src/keyboardDelta.ts

@@ -0,0 +1,7 @@
+export function keyboardDelta(previous: string, next: string) {
+    const before = [...previous];
+    const after = [...next];
+    let common = 0;
+    while (common < before.length && common < after.length && before[common] === after[common]) common++;
+    return { removed: before.length - common, added: after.slice(common).join('') };
+}

package/src/native.ios.ts

@@ -0,0 +1,186 @@
+import { MediaStream, RTCPeerConnection } from 'react-native-webrtc';
+import type { NativeDesklinkModule, NativeSessionEvent } from './native';
+
+type Session = {
+    peer: RTCPeerConnection;
+    channel: ReturnType<RTCPeerConnection['createDataChannel']> | null;
+    stream: MediaStream | null;
+    input: boolean;
+    seq: number;
+    closed: boolean;
+    candidates: Array<{ candidate: string; sdpMid: string | null; sdpMLineIndex: number }>;
+    remoteSet: boolean;
+};
+
+const sessions = new Map<string, Session>();
+const listeners = new Set<(event: NativeSessionEvent) => void>();
+const surfaces = new Set<() => void>();
+const sizes = new Map<string, { width: number; height: number }>();
+let nextId = 0;
+
+function emit(sessionId: string, name: NativeSessionEvent['name'], payload: Record<string, unknown> = {}) {
+    if (!sessions.has(sessionId) && name !== 'closed') return;
+    for (const listener of listeners) listener({ sessionId, name, payload });
+}
+
+function notifySurface() {
+    for (const listener of surfaces) listener();
+}
+
+export function getDesktopStream(id: string | null): MediaStream | null {
+    return id == null ? null : sessions.get(id)?.stream ?? null;
+}
+
+export function getDesktopSize(id: string | null) {
+    return id == null ? null : sizes.get(id) ?? null;
+}
+
+export function observeDesktopSurface(listener: () => void): () => void {
+    surfaces.add(listener);
+    return () => surfaces.delete(listener);
+}
+
+export function markDesktopPresented(id: string) {
+    emit(id, 'presented');
+}
+
+export function desktopInputEnabled(id: string | null): boolean {
+    return id != null && sessions.get(id)?.input === true;
+}
+
+function failure(id: string, error: unknown) {
+    emit(id, 'failure', { code: 'transport', message: error instanceof Error ? error.message : String(error) });
+}
+
+export const nativeDesklink: NativeDesklinkModule = {
+    createSession(iceServersJson) {
+        const id = `desklink-${++nextId}`;
+        try {
+            const peer = new RTCPeerConnection({ iceServers: JSON.parse(iceServersJson) });
+            const session: Session = { peer, channel: null, stream: null, input: false, seq: 0, closed: false, candidates: [], remoteSet: false };
+            sessions.set(id, session);
+            peer.onicecandidate = (event) => {
+                if (event.candidate) emit(id, 'candidate', {
+                    candidate: event.candidate.candidate,
+                    sdpMid: event.candidate.sdpMid,
+                    sdpMLineIndex: event.candidate.sdpMLineIndex,
+                });
+            };
+            peer.oniceconnectionstatechange = () => {
+                emit(id, 'ice', { state: peer.iceConnectionState.toUpperCase() });
+                if (peer.iceConnectionState === 'failed') failure(id, 'the connection to the desktop was lost');
+            };
+            peer.ontrack = (event) => {
+                if (session.closed || event.track.kind !== 'video') return;
+                const stream = event.streams[0] ?? new MediaStream();
+                if (event.streams.length === 0) stream.addTrack(event.track);
+                session.stream = stream;
+                notifySurface();
+                emit(id, 'track');
+            };
+            peer.ondatachannel = (event) => {
+                if (session.closed) return;
+                const channel = event.channel;
+                session.channel = channel;
+                channel.onopen = () => emit(id, 'channel', { state: 'OPEN' });
+                channel.onclose = () => emit(id, 'channel', { state: 'CLOSED' });
+                channel.onmessage = (message) => emit(id, 'control', { message: message.data });
+            };
+            queueMicrotask(() => emit(id, 'ready'));
+            return id;
+        } catch {
+            return null;
+        }
+    },
+    setRemoteDescription(id, type, sdp) {
+        const session = sessions.get(id);
+        if (!session) return false;
+        if (type !== 'offer') { failure(id, 'the engine must send an offer'); return false; }
+        void (async () => {
+            try {
+                await session.peer.setRemoteDescription({ type: 'offer', sdp });
+                if (session.closed) return;
+                session.remoteSet = true;
+                for (const candidate of session.candidates.splice(0)) await session.peer.addIceCandidate(candidate);
+                const answer = await session.peer.createAnswer();
+                await session.peer.setLocalDescription(answer);
+                if (!session.closed) emit(id, 'answer', { sdp: session.peer.localDescription?.sdp ?? answer.sdp });
+            } catch (error) { if (!session.closed) failure(id, error); }
+        })();
+        return true;
+    },
+    addRemoteCandidate(id, candidate, sdpMid, sdpMLineIndex) {
+        const session = sessions.get(id);
+        if (!session) return false;
+        const ice = { candidate, sdpMid, sdpMLineIndex: sdpMLineIndex ?? 0 };
+        if (!session.remoteSet) session.candidates.push(ice);
+        else void session.peer.addIceCandidate(ice).catch((error) => failure(id, error));
+        return true;
+    },
+    sendControl(id, message) {
+        const session = sessions.get(id);
+        if (!session || session.closed || session.channel?.readyState !== 'open') return false;
+        try {
+            const control = JSON.parse(message) as Record<string, unknown>;
+            if (!session.input && ['pointer', 'wheel', 'key', 'text', 'clipboard_read', 'clipboard_write'].includes(String(control.kind))) return false;
+            session.channel.send(JSON.stringify({ ...control, seq: ++session.seq }));
+            return true;
+        } catch (error) { failure(id, error); return false; }
+    },
+    setInputEnabled(id, enabled) {
+        const session = sessions.get(id);
+        if (!session) return false;
+        session.input = enabled;
+        if (!enabled) nativeDesklink.sendControl(id, '{"kind":"release_all"}');
+        notifySurface();
+        return true;
+    },
+    showKeyboard(id) { keyboardActions.get(id)?.show(); return true; },
+    hideKeyboard(id) { keyboardActions.get(id)?.hide(); return true; },
+    captureKeyboard(id, captured) { keyboardActions.get(id)?.capture(captured); return true; },
+    // iOS rotation belongs to the application's supported orientations; this
+    // receiver cannot override its Info.plist at runtime.
+    setOrientation() { return false; },
+    setSurfaceSize(id, width, height) {
+        if (!sessions.has(id) || width <= 0 || height <= 0) return false;
+        sizes.set(id, { width, height });
+        surfaceActions.get(id)?.size(width, height);
+        return true;
+    },
+    fitToView(id) { surfaceActions.get(id)?.fit(); return true; },
+    closeSession(id) {
+        const session = sessions.get(id);
+        if (!session) return true;
+        session.closed = true;
+        session.channel?.close();
+        session.peer.close();
+        sessions.delete(id);
+        sizes.delete(id);
+        keyboardActions.delete(id);
+        surfaceActions.delete(id);
+        notifySurface();
+        for (const listener of listeners) listener({ sessionId: id, name: 'closed', payload: {} });
+        return true;
+    },
+    isAvailable() { return true; },
+    addListener(_name, handler) { listeners.add(handler); return { remove: () => { listeners.delete(handler); } }; },
+};
+
+export const desktopAvailable = true;
+
+type KeyboardActions = { show: () => void; hide: () => void; capture: (value: boolean) => void };
+type SurfaceActions = { size: (width: number, height: number) => void; fit: () => void };
+const keyboardActions = new Map<string, KeyboardActions>();
+const surfaceActions = new Map<string, SurfaceActions>();
+export function registerDesktopView(id: string, keyboard: KeyboardActions, surface: SurfaceActions): () => void {
+    keyboardActions.set(id, keyboard);
+    surfaceActions.set(id, surface);
+    const size = sizes.get(id);
+    if (size) surface.size(size.width, size.height);
+    return () => {
+        if (keyboardActions.get(id) === keyboard) keyboardActions.delete(id);
+        if (surfaceActions.get(id) === surface) surfaceActions.delete(id);
+        nativeDesklink.sendControl(id, '{"kind":"release_all"}');
+    };
+}
+export function emitDesktopKeyboard(id: string, payload: Record<string, unknown>) { emit(id, 'keyboard', payload); }

package/src/native.ts

@@ -2,14 +2,9 @@ import { Platform } from 'react-native';
 import { requireOptionalNativeModule } from 'expo-modules-core';
 
 
-
 /**
- * The native session module.
- *
- * Everywhere but Android the module is absent, `desktopAvailable` is false, and
- * the package still exports its types plus the web surface — an application
- * renders one screen on every platform and branches on capability, not on
- * platform name.
+ * Android's native session module. Metro resolves `native.ios.ts` instead on
+ * iOS, where the receiver uses the app's react-native-webrtc binding.
  */
 export type NativeEventName =
     | 'ready'

package/src/protocol.ts

@@ -14,7 +14,7 @@
  * only describe the subset a client needs.
  */
 
-export const PROTOCOL_VERSION = 2;
+export const PROTOCOL_VERSION = 3;
 
 export type Permission = 'view' | 'control' | 'clipboard';
 

package/src/stickyModifiers.ts

@@ -1,18 +1,18 @@
 import type { ControlMessage } from './protocol';
 
 /**
- * Ctrl and Shift for a touch keyboard, which has neither.
+ * Desktop modifiers for a touch keyboard.
  *
  * The cycle is the terminal key row's: one tap arms a modifier for the next
  * key, a second tap locks it, a third lets it go. An armed modifier travels
  * with the key it modifies, as that key's own chord, so the desktop never holds
  * a modifier on its own and nothing can be left pressed between keys.
  */
-export type StickyModifier = 'Control' | 'Shift';
+export type StickyModifier = 'Control' | 'Shift' | 'Alt' | 'Meta';
 export type StickyState = 'off' | 'once' | 'lock';
 export type StickyModifiers = Readonly<Record<StickyModifier, StickyState>>;
 
-export const NO_MODIFIERS: StickyModifiers = { Control: 'off', Shift: 'off' };
+export const NO_MODIFIERS: StickyModifiers = { Control: 'off', Shift: 'off', Alt: 'off', Meta: 'off' };
 
 const AFTER_TAP: Record<StickyState, StickyState> = { off: 'once', once: 'lock', lock: 'off' };
 
@@ -22,7 +22,7 @@ export function tapModifier(current: StickyModifiers, name: StickyModifier): Sti
 
 /** The modifiers the next key carries, in the engine's names. */
 export function armedModifiers(current: StickyModifiers): StickyModifier[] {
-    return (['Control', 'Shift'] as const).filter((name) => current[name] !== 'off');
+    return (['Control', 'Shift', 'Alt', 'Meta'] as const).filter((name) => current[name] !== 'off');
 }
 
 /** What stays armed once a key has used the modifiers: a lock stays, the rest let go. */
@@ -30,6 +30,8 @@ export function afterKey(current: StickyModifiers): StickyModifiers {
     return {
         Control: current.Control === 'lock' ? 'lock' : 'off',
         Shift: current.Shift === 'lock' ? 'lock' : 'off',
+        Alt: current.Alt === 'lock' ? 'lock' : 'off',
+        Meta: current.Meta === 'lock' ? 'lock' : 'off',
     };
 }
 

package/src/useDesktopSession.ts

@@ -125,7 +125,7 @@ export interface DesktopSession {
     /** Hold the screen in landscape while the desktop is shown, or follow the phone again. */
     setOrientation: (mode: 'landscape' | 'auto') => void;
     send: (message: ControlMessage) => void;
-    /** Ctrl and Shift as sticky keys: off, armed for the next key, or locked. */
+    /** Desktop modifiers as sticky keys: off, armed for the next key, or locked. */
     modifiers: StickyModifiers;
     /** Tap a sticky modifier: off, then armed for the next key, then locked, then off. */
     tapModifier: (name: StickyModifier) => void;
@@ -218,7 +218,7 @@ export function useDesktopSession(options: DesktopSessionOptions): DesktopSessio
 
     const applyModifiers = useCallback((next: StickyModifiers) => {
         const current = modifiersRef.current;
-        if (next.Control === current.Control && next.Shift === current.Shift) return;
+        if (next.Control === current.Control && next.Shift === current.Shift && next.Alt === current.Alt && next.Meta === current.Meta) return;
         modifiersRef.current = next;
         setModifiers(next);
         // The phone's keyboard is the session's own only while a modifier waits