@desklink/react-native 0.1.0

package/android/src/main/java/expo/modules/desklink/ImeDeletion.kt

@@ -0,0 +1,20 @@
+package expo.modules.desklink
+
+internal fun remoteDeletionCounts(
+  beforeLength: Int,
+  afterLength: Int,
+  selectionStart: Int,
+  selectionEnd: Int,
+  composingStart: Int,
+  composingEnd: Int,
+): Pair<Int, Int> {
+  fun committed(length: Int, from: Long, to: Long): Int {
+    val local = if (composingStart >= 0 && composingEnd > composingStart) {
+      (minOf(to, composingEnd.toLong()) - maxOf(from, composingStart.toLong())).coerceAtLeast(0)
+    } else 0L
+    return (length.toLong() - local).coerceIn(0, 64).toInt()
+  }
+
+  return committed(beforeLength, selectionStart.toLong() - beforeLength, selectionStart.toLong()) to
+    committed(afterLength, selectionEnd.toLong(), selectionEnd.toLong() + afterLength)
+}

package/expo-module.config.json

@@ -0,0 +1,6 @@
+{
+  "platforms": ["android"],
+  "android": {
+    "modules": ["expo.modules.desklink.DesklinkModule"]
+  }
+}

package/index.ts

@@ -0,0 +1 @@
+export * from './src';

package/package.json

@@ -0,0 +1,33 @@
+{
+    "name": "@desklink/react-native",
+    "version": "0.1.0",
+    "license": "Apache-2.0",
+    "description": "Render and drive a desktop session from a React Native app",
+    "main": "index.ts",
+    "types": "index.ts",
+    "exports": {
+        ".": "./index.ts",
+        "./availability": {
+            "browser": "./src/availability.web.ts",
+            "default": "./src/availability.ts"
+        }
+    },
+    "files": [
+        "index.ts",
+        "src",
+        "!src/**/*.spec.ts",
+        "android/build.gradle",
+        "android/gradle.properties",
+        "android/src/main",
+        "expo-module.config.json",
+        "NOTICE",
+        "README.md"
+    ],
+    "peerDependencies": {
+        "expo": ">=55",
+        "expo-modules-core": ">=55",
+        "react": ">=19",
+        "react-native": ">=0.83",
+        "react-native-webrtc": ">=124"
+    }
+}

package/src/DesktopView.tsx

@@ -0,0 +1,61 @@
+import { requireNativeView } from 'expo';
+import * as React from 'react';
+import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { desktopAvailable } from './native';
+
+export interface DesktopViewProps {
+    /** The session handle from `useDesktopSession`. */
+    sessionId: string | null;
+    style?: StyleProp<ViewStyle>;
+    /** Shown until the first desktop frame has actually rendered. */
+    placeholder?: React.ReactNode;
+    /** What a screen reader calls the surface. */
+    accessibilityLabel?: string;
+    /**
+     * Space the application keeps free above the phone's keyboard for its own
+     * controls, in points. While the keyboard is up the picture sits above both,
+     * following the keyboard as it moves.
+     */
+    keyboardClearance?: number;
+}
+
+interface NativeSurfaceProps {
+    sessionId: string | null;
+    style?: StyleProp<ViewStyle>;
+    accessible?: boolean;
+    accessibilityLabel?: string;
+    keyboardClearance?: number;
+}
+
+// The Expo view is resolved at module load; on a platform without it the
+// component is absent and `DesktopView` falls back to its placeholder.
+const NativeSurface: React.ComponentType<NativeSurfaceProps> | null = desktopAvailable
+    ? (requireNativeView('Desklink', 'DesklinkSurface') as React.ComponentType<NativeSurfaceProps>)
+    : null;
+
+/**
+ * The live desktop surface.
+ *
+ * It renders the picture and the pointer and owns the gestures, and nothing
+ * else: the surrounding chrome, the start state and the return navigation
+ * belong to the application, which mounts this wherever it wants the desktop
+ * to appear.
+ */
+export function DesktopView({ sessionId, style, placeholder, accessibilityLabel, keyboardClearance = 0 }: DesktopViewProps) {
+    if (NativeSurface == null || sessionId == null) {
+        return (
+            <View style={[styles.surface, style]}>
+                {placeholder}
+            </View>
+        );
+    }
+    return <NativeSurface style={[styles.surface, style]} sessionId={sessionId} accessible={accessibilityLabel !== undefined} accessibilityLabel={accessibilityLabel} keyboardClearance={keyboardClearance} />;
+}
+
+const styles = StyleSheet.create({
+    surface: {
+        backgroundColor: '#000',
+        overflow: 'hidden',
+    },
+});

package/src/DesktopView.web.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+
+export interface DesktopViewProps {
+    /** The session handle from `useDesktopSession`. */
+    sessionId: string | null;
+    style?: StyleProp<ViewStyle>;
+    /** Shown until the first desktop frame has actually rendered. */
+    placeholder?: React.ReactNode;
+    /** What a screen reader calls the surface. */
+    accessibilityLabel?: string;
+    /**
+     * Space the application keeps free above the phone's keyboard for its own
+     * controls, in points. While the keyboard is up the picture sits above both.
+     */
+    keyboardClearance?: number;
+}
+
+/**
+ * The live desktop surface, in a browser.
+ *
+ * The picture, the gestures and the keyboard belong to the session's own web
+ * implementation, so this is a mount point: it hands that session a DOM element
+ * and gets out of the way. The platform module is imported when a surface is
+ * actually mounted rather than at module load, so an application that never
+ * opens a desktop does not carry one in its first paint.
+ */
+export function DesktopView({ sessionId, style, placeholder, accessibilityLabel, keyboardClearance = 0 }: DesktopViewProps) {
+    const mounted = React.useCallback(
+        (node: unknown) => {
+            const element = (node as HTMLElement | null) ?? null;
+            if (sessionId === null) return;
+            void import('./native').then((platform) => {
+                if (element === null || !platform.desktopAvailable) return;
+                platform.attachSurface(sessionId, element);
+            });
+        },
+        [sessionId],
+    );
+
+    React.useEffect(() => {
+        if (sessionId === null) return;
+        void import('./native').then((platform) => platform.setKeyboardClearance(sessionId, keyboardClearance));
+    }, [sessionId, keyboardClearance]);
+
+    return (
+        <View style={[styles.surface, style]} accessibilityLabel={accessibilityLabel}>
+            {sessionId === null ? placeholder : <div ref={mounted} style={styles.dom} />}
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    surface: { backgroundColor: '#000', overflow: 'hidden' },
+    dom: { position: 'absolute', inset: 0 },
+});

package/src/availability.ts

@@ -0,0 +1,5 @@
+/**
+ * Whether this build can show a desktop surface at all. The browser answers with
+ * a constant so its renderer and input bridge stay out of the first paint.
+ */
+export { desktopAvailable } from './native';

package/src/availability.web.ts

@@ -0,0 +1,2 @@
+/** A browser always has its own WebRTC stack, so it can always show a surface. */
+export const desktopAvailable = true;

package/src/index.ts

@@ -0,0 +1,21 @@
+/** Public API of the desktop client package. Import this, not internals. */
+export * from './protocol';
+/**
+ * The platform module is deliberately not re-exported here.
+ *
+ * It is the bulk of this package — a session, a renderer and an input bridge —
+ * and most users of an application never open a desktop. Exporting it from the
+ * barrel would put it in the application's first paint; the session loads it
+ * when a desktop is actually opened.
+ */
+export type { NativeDesklinkModule, NativeSessionEvent } from './native';
+export { desktopAvailable } from './availability';
+export { DesktopView, type DesktopViewProps } from './DesktopView';
+export { observeWebKeyboardMotion } from './webKeyboardMotion';
+export type { StickyModifier, StickyModifiers, StickyState } from './stickyModifiers';
+export {
+    useDesktopSession,
+    CONTROL_PERMISSIONS,
+    type DesktopSession,
+    type DesktopSessionOptions,
+} from './useDesktopSession';

package/src/native.ts

@@ -0,0 +1,65 @@
+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.
+ */
+export type NativeEventName =
+    | 'ready'
+    | 'answer'
+    | 'candidate'
+    | 'ice'
+    | 'channel'
+    | 'track'
+    | 'presented'
+    | 'control'
+    | 'keyboard'
+    | 'failure'
+    | 'closed';
+
+export interface NativeSessionEvent {
+    sessionId: string;
+    name: NativeEventName;
+    payload: Record<string, unknown>;
+}
+
+export interface NativeDesklinkModule {
+    createSession(iceServersJson: string): string | null;
+    setRemoteDescription(id: string, type: string, sdp: string): boolean;
+    addRemoteCandidate(id: string, candidate: string, sdpMid: string | null, sdpMLineIndex: number | null): boolean;
+    /** Send one control message; the platform stamps it with the session's next sequence. */
+    sendControl(id: string, message: string): boolean;
+    setInputEnabled(id: string, enabled: boolean): boolean;
+    showKeyboard(id: string): boolean;
+    hideKeyboard(id: string): boolean;
+    /**
+     * While captured, what the phone's keyboard types is not sent: it arrives as
+     * a `keyboard` event, `{ text }` or `{ key }`, for the session to chord.
+     */
+    captureKeyboard(id: string, captured: boolean): boolean;
+    setSurfaceSize(id: string, width: number, height: number): boolean;
+    /** Show the whole desktop again after the user zoomed in. */
+    fitToView(id: string): boolean;
+    /** Hold the screen in landscape while the desktop is shown, or follow the phone again. */
+    setOrientation(mode: 'landscape' | 'auto'): boolean;
+    closeSession(id: string): boolean;
+    isAvailable(): boolean;
+    addListener?(name: 'onSessionEvent', handler: (event: NativeSessionEvent) => void): { remove: () => void };
+}
+
+const native = Platform.OS === 'android'
+    ? (requireOptionalNativeModule<NativeDesklinkModule>('Desklink') ?? null)
+    : null;
+
+export const nativeDesklink: NativeDesklinkModule | null = native;
+
+/** True when this build can show a live desktop surface at all. */
+export const desktopAvailable = native !== null;
+