@q9labsai/chalk-react-native 4.1.17 → 5.0.1

package/ios/ChalkAudioRouteModule.swift

@@ -0,0 +1,93 @@
+import AVFoundation
+import Foundation
+import React
+import UIKit
+
+/// Lists the call's audio outputs (earpiece, speaker, wired and Bluetooth headsets) and switches
+/// between them on the shared play-and-record session that WebRTC owns.
+@objc(ChalkAudioRouteModule)
+final class ChalkAudioRouteModule: RCTEventEmitter {
+  private let eventName = "ChalkAudioRouteChanged"
+  private var observer: NSObjectProtocol?
+
+  override class func requiresMainQueueSetup() -> Bool {
+    false
+  }
+
+  override func constantsToExport() -> [AnyHashable: Any]! {
+    ["eventName": eventName]
+  }
+
+  override func supportedEvents() -> [String]! {
+    [eventName]
+  }
+
+  override func startObserving() {
+    observer = NotificationCenter.default.addObserver(forName: AVAudioSession.routeChangeNotification, object: nil, queue: .main) { [weak self] _ in
+      guard let self else { return }
+      self.sendEvent(withName: self.eventName, body: self.snapshot())
+    }
+  }
+
+  override func stopObserving() {
+    if let observer { NotificationCenter.default.removeObserver(observer) }
+    observer = nil
+  }
+
+  @objc(getRoutes:rejecter:)
+  func getRoutes(_ resolve: @escaping RCTPromiseResolveBlock, rejecter reject: @escaping RCTPromiseRejectBlock) {
+    resolve(snapshot())
+  }
+
+  @objc(selectRoute:resolver:rejecter:)
+  func selectRoute(_ id: String, resolver resolve: @escaping RCTPromiseResolveBlock, rejecter reject: @escaping RCTPromiseRejectBlock) {
+    let session = AVAudioSession.sharedInstance()
+    do {
+      if id == "speaker" {
+        try session.overrideOutputAudioPort(.speaker)
+      } else {
+        try session.overrideOutputAudioPort(.none)
+        let port = session.availableInputs?.first { input in
+          id == "earpiece" ? input.portType == .builtInMic : input.uid == id
+        }
+        if let port { try session.setPreferredInput(port) }
+      }
+      resolve(snapshot())
+    } catch {
+      reject("audio_route_failed", "Couldn't switch the audio output to \(id).", error)
+    }
+  }
+
+  private func snapshot() -> [String: Any] {
+    let session = AVAudioSession.sharedInstance()
+    let isPhone = UIDevice.current.userInterfaceIdiom == .phone
+    var routes: [[String: String]] = []
+    if isPhone { routes.append(["id": "earpiece", "kind": "earpiece", "name": ""]) }
+    routes.append(["id": "speaker", "kind": "speaker", "name": ""])
+    for input in session.availableInputs ?? [] {
+      guard let kind = Self.headsetKind(input.portType) else { continue }
+      routes.append(["id": input.uid, "kind": kind, "name": input.portName])
+    }
+    return ["routes": routes, "selected": selectedId(session, routes: routes)]
+  }
+
+  private func selectedId(_ session: AVAudioSession, routes: [[String: String]]) -> String {
+    guard let output = session.currentRoute.outputs.first else { return "speaker" }
+    switch output.portType {
+    case .builtInSpeaker: return "speaker"
+    case .builtInReceiver: return "earpiece"
+    default:
+      // Headsets report the same port as input and output, so the input's id names the route.
+      let input = session.currentRoute.inputs.first { Self.headsetKind($0.portType) != nil }
+      return input?.uid ?? routes.first { $0["name"] == output.portName }?["id"] ?? "speaker"
+    }
+  }
+
+  private static func headsetKind(_ port: AVAudioSession.Port) -> String? {
+    switch port {
+    case .bluetoothHFP, .bluetoothLE, .bluetoothA2DP: return "bluetooth"
+    case .headsetMic, .usbAudio: return "wired"
+    default: return nil
+    }
+  }
+}

package/ios/ChalkAudioRouteModuleBridge.m

@@ -0,0 +1,9 @@
+#import <React/RCTBridgeModule.h>
+#import <React/RCTEventEmitter.h>
+
+@interface RCT_EXTERN_MODULE(ChalkAudioRouteModule, RCTEventEmitter)
+
+RCT_EXTERN_METHOD(getRoutes:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
+RCT_EXTERN_METHOD(selectRoute:(NSString *)id resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
+
+@end

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q9labsai/chalk-react-native",
-  "version": "4.1.17",
+  "version": "5.0.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -22,21 +22,6 @@
   "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
-      "android": [
-        "./dist/android.d.ts"
-      ],
-      "ios": [
-        "./dist/ios.d.ts"
-      ],
-      "ios-phone": [
-        "./dist/ios-phone.d.ts"
-      ],
-      "ios-pad": [
-        "./dist/ios-pad.d.ts"
-      ],
-      "macos": [
-        "./dist/macos.d.ts"
-      ],
       "runtime": [
         "./dist/runtime.d.ts"
       ],
@@ -49,11 +34,8 @@
       "invites": [
         "./dist/invites.d.ts"
       ],
-      "theme": [
-        "./dist/ui/theme.d.ts"
-      ],
-      "appearance": [
-        "./dist/ui/appearance.d.ts"
+      "ui": [
+        "./dist/ui.d.ts"
       ],
       "client": [
         "./dist/client.d.ts"
@@ -72,36 +54,6 @@
       "require": "./dist/index.js",
       "default": "./dist/index.js"
     },
-    "./android": {
-      "types": "./dist/android.d.ts",
-      "react-native": "./dist/android.js",
-      "import": "./dist/android.js",
-      "default": "./dist/android.js"
-    },
-    "./ios": {
-      "types": "./dist/ios.d.ts",
-      "react-native": "./dist/ios.js",
-      "import": "./dist/ios.js",
-      "default": "./dist/ios.js"
-    },
-    "./ios-phone": {
-      "types": "./dist/ios-phone.d.ts",
-      "react-native": "./dist/ios-phone.js",
-      "import": "./dist/ios-phone.js",
-      "default": "./dist/ios-phone.js"
-    },
-    "./ios-pad": {
-      "types": "./dist/ios-pad.d.ts",
-      "react-native": "./dist/ios-pad.js",
-      "import": "./dist/ios-pad.js",
-      "default": "./dist/ios-pad.js"
-    },
-    "./macos": {
-      "types": "./dist/macos.d.ts",
-      "react-native": "./dist/macos.js",
-      "import": "./dist/macos.js",
-      "default": "./dist/macos.js"
-    },
     "./runtime": {
       "types": "./dist/runtime.d.ts",
       "react-native": "./dist/runtime.js",
@@ -120,24 +72,24 @@
       "import": "./dist/diagnostics.js",
       "default": "./dist/diagnostics.js"
     },
+    "./dev": {
+      "types": "./dist/dev.d.ts",
+      "react-native": "./dist/dev.js",
+      "import": "./dist/dev.js",
+      "default": "./dist/dev.js"
+    },
+    "./ui": {
+      "types": "./dist/ui.d.ts",
+      "react-native": "./dist/ui.js",
+      "import": "./dist/ui.js",
+      "default": "./dist/ui.js"
+    },
     "./invites": {
       "types": "./dist/invites.d.ts",
       "react-native": "./dist/invites.js",
       "import": "./dist/invites.js",
       "default": "./dist/invites.js"
     },
-    "./theme": {
-      "types": "./dist/ui/theme.d.ts",
-      "react-native": "./dist/ui/theme.js",
-      "import": "./dist/ui/theme.js",
-      "default": "./dist/ui/theme.js"
-    },
-    "./appearance": {
-      "types": "./dist/ui/appearance.d.ts",
-      "react-native": "./dist/ui/appearance.js",
-      "import": "./dist/ui/appearance.js",
-      "default": "./dist/ui/appearance.js"
-    },
     "./client": {
       "types": "./dist/client.d.ts",
       "react-native": "./dist/client.js",
@@ -150,38 +102,56 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@q9labsai/chalk-client": "^4.1.17",
-    "@q9labsai/chalk-whiteboard": "^4.1.17",
-    "@q9labsai/facehash": "^4.1.17"
+    "@q9labsai/chalk-client": "^5.0.1",
+    "@q9labsai/chalk-whiteboard": "^5.0.1",
+    "@q9labsai/facehash": "^5.0.1",
+    "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@types/node": "^26.2.0",
     "@types/react": "^19.2.18",
-    "react-native-view-shot": "4.0.3",
+    "expo-audio": "~55.0.18",
+    "expo-clipboard": "~55.0.9",
+    "expo-crypto": "~55.0.19",
+    "expo-document-picker": "~55.0.15",
+    "expo-file-system": "~55.0.24",
+    "expo-haptics": "~55.0.18",
+    "react-native-gesture-handler": "~2.30.1",
+    "react-native-reanimated": "4.2.1",
+    "react-native-safe-area-context": "~5.6.2",
+    "react-native-svg": "^15.15.3",
     "react-native-webview": "13.16.1",
+    "react-native-worklets": "0.7.2",
     "typescript": "^6.0.3"
   },
   "peerDependencies": {
     "@cloudflare/react-native-webrtc": "~125.0.1 || ~125.0.3",
-    "@cloudflare/realtimekit-react-native": "1.1.0",
-    "@hugeicons/core-free-icons": "^4.0.0",
-    "@hugeicons/react-native": "^1.0.13",
+    "expo-audio": "~55.0.18",
+    "expo-clipboard": "~55.0.9",
+    "expo-crypto": "~55.0.19",
+    "expo-document-picker": "~55.0.15",
+    "expo-file-system": "~55.0.24",
+    "expo-haptics": "~55.0.18",
     "react": "^18.0.0 || ^19.0.0",
     "react-native": ">=0.77",
+    "react-native-gesture-handler": "~2.30.1",
+    "react-native-reanimated": "4.2.1",
+    "react-native-safe-area-context": "~5.6.2",
     "react-native-svg": "^15.15.3",
-    "react-native-view-shot": "^4.0.3",
-    "react-native-webview": "^13.16.1"
+    "react-native-webview": "^13.16.1",
+    "react-native-worklets": "0.7.2"
   },
   "scripts": {
-    "build": "rm -rf ./dist && tsup ./src/index.ts ./src/client.ts ./src/android.ts ./src/ios.ts ./src/ios-phone.ts ./src/ios-pad.ts ./src/macos.ts ./src/runtime.ts ./src/clipboard.ts ./src/diagnostics.ts ./src/invites.ts ./src/ui/theme.ts ./src/ui/appearance.ts --format esm --out-dir ./dist --platform browser --external react --external react-native --external react-native-webview --external react-native-view-shot --external @q9labsai/chalk-whiteboard --external @cloudflare/react-native-webrtc --external @cloudflare/realtimekit-react-native && pnpm run build:types && pnpm run sync:whiteboard-assets",
+    "build": "rm -rf ./dist && tsup ./src/index.ts ./src/client.ts ./src/runtime.ts ./src/clipboard.ts ./src/diagnostics.ts ./src/dev.ts ./src/invites.ts ./src/ui.ts --format esm --out-dir ./dist --platform browser --external react --external react-native --external react-native-webview --external @q9labsai/chalk-whiteboard --external @cloudflare/react-native-webrtc --external expo-audio --external expo-clipboard --external expo-crypto --external expo-document-picker --external expo-file-system --external expo-haptics --external react-native-gesture-handler --external react-native-reanimated --external react-native-safe-area-context --external react-native-svg --loader .wav=copy && pnpm run build:types && pnpm run sync:whiteboard-assets",
     "build:types": "rm -f tsconfig.tsbuildinfo && tsc --build tsconfig.json",
-    "dev": "tsup ./src/index.ts ./src/client.ts ./src/android.ts ./src/ios.ts ./src/ios-phone.ts ./src/ios-pad.ts ./src/macos.ts ./src/runtime.ts ./src/clipboard.ts ./src/diagnostics.ts ./src/invites.ts ./src/ui/theme.ts ./src/ui/appearance.ts --format esm --out-dir ./dist --platform browser --external react --external react-native --external react-native-webview --external react-native-view-shot --external @q9labsai/chalk-whiteboard --external @cloudflare/react-native-webrtc --external @cloudflare/realtimekit-react-native --watch",
+    "dev": "tsup ./src/index.ts ./src/client.ts ./src/runtime.ts ./src/clipboard.ts ./src/diagnostics.ts ./src/dev.ts ./src/invites.ts ./src/ui.ts --format esm --out-dir ./dist --platform browser --external react --external react-native --external react-native-webview --external @q9labsai/chalk-whiteboard --external @cloudflare/react-native-webrtc --external expo-audio --external expo-clipboard --external expo-crypto --external expo-document-picker --external expo-file-system --external expo-haptics --external react-native-gesture-handler --external react-native-reanimated --external react-native-safe-area-context --external react-native-svg --loader .wav=copy --watch",
     "sync:whiteboard-assets": "node ./scripts/sync-whiteboard-assets.mjs",
     "test": "pnpm exec vitest run",
-    "check-types": "tsc --project tsconfig.check-types.json --noEmit",
+    "check-types": "tsc-rs --project tsconfig.check-types.json --noEmit",
     "check:tokens": "node ./scripts/check-tokenized-styles.mjs",
+    "check:worklets": "node ./scripts/check-worklet-directives.mjs",
     "check:client-package": "node ./scripts/check-client-package.mjs",
-    "lint": "pnpm run check:tokens && pnpm exec oxfmt --check . && tsc --project tsconfig.check-types.json --noEmit",
+    "lint": "pnpm run check:tokens && pnpm run check:worklets && pnpm exec oxfmt --check . && tsc --project tsconfig.check-types.json --noEmit",
     "clean": "rm -rf dist"
   }
 }

package/src/android/call-service.ts

@@ -0,0 +1,19 @@
+import { NativeModules, Platform } from "react-native";
+
+type NativeCallServiceModule = {
+  readonly start: () => Promise<boolean>;
+  readonly stop: () => Promise<void>;
+};
+
+const nativeModule: NativeCallServiceModule | undefined = NativeModules.ChalkCallService;
+
+/** Starts the Android foreground service for the call. Resolves false when there's nothing to keep running (no microphone or camera permission) or Android refused the start. */
+export async function startAndroidCallService(): Promise<boolean> {
+  if (Platform.OS !== "android" || !nativeModule) return false;
+  return nativeModule.start();
+}
+
+export async function stopAndroidCallService(): Promise<void> {
+  if (Platform.OS !== "android" || !nativeModule) return;
+  await nativeModule.stop();
+}

package/src/avatar/FaceAvatar.tsx

@@ -0,0 +1,145 @@
+import { createFacehashScene, getColor, getForegroundColor, type Intensity3D } from "@q9labsai/facehash";
+import { memo, useCallback, useEffect, useMemo } from "react";
+import { Platform, StyleSheet, View } from "react-native";
+import Animated, { cancelAnimation, useAnimatedStyle, useReducedMotion, useSharedValue, withDelay, withRepeat, withSequence, withTiming, type SharedValue } from "react-native-reanimated";
+import Svg, { G, Path, Text as SvgText } from "react-native-svg";
+import { timings } from "../motion/motion";
+import { easings, identityColors } from "../theme/tokens";
+
+export type FaceAvatarProps = {
+  readonly name: string;
+  readonly size: number;
+  /** `bold` is the 3D style for tiles; `subtle` is for rows, pills, chat and toasts. */
+  readonly style?: "bold" | "subtle";
+  /** Live speaking level from 0 to 1. While it moves, the face bobs and the mouth opens. */
+  readonly level?: SharedValue<number>;
+  /** Eyes drift on their own every 1.8 s, as on the mockup's touch devices. Off for small avatars. */
+  readonly lookAround?: boolean;
+  readonly testID?: string;
+};
+
+const INTENSITY: Readonly<Record<"bold" | "subtle", Intensity3D>> = { bold: "dramatic", subtle: "subtle" };
+const MONO = Platform.select({ ios: "Menlo", default: "monospace" });
+const FRONT_HOLD_MS = 1400;
+const LOOK_INTERVAL_MS = 1800;
+const LOOK_MS = 700;
+const BOB = 5;
+const MOUTH = 0.55;
+const CLOSED = 0.05;
+
+/**
+ * A Facehash avatar drawn natively. The face blinks on its own rhythm, reacts to the speaking
+ * level, and turns to the front for a moment when touched. All motion runs on the UI thread and
+ * stops with reduced motion. Decorative: the parent names the person.
+ */
+export const FaceAvatar = memo(function FaceAvatar({ name, size, style = "subtle", level, lookAround = false, testID }: FaceAvatarProps): React.JSX.Element {
+  const reduceMotion = useReducedMotion();
+  const scene = useMemo(() => createFacehashScene({ name, colorsLength: identityColors.length, intensity3d: INTENSITY[style] }), [name, style]);
+  const background = getColor(identityColors, scene.data.colorIndex);
+  const foreground = getForegroundColor(background);
+  const geometry = scene.faceGeometry;
+  const box = scene.faceBox;
+  const eyeCenter = box.y + geometry.leftEyeAnchor.y * (box.height / geometry.viewBox.height);
+  const unit = size / 100;
+  const projection = scene.projection;
+
+  const turned = useSharedValue(1);
+  const blink = useSharedValue(1);
+  const lookX = useSharedValue(0);
+  const lookY = useSharedValue(0);
+
+  useEffect(() => {
+    if (reduceMotion) {
+      blink.value = 1;
+      return;
+    }
+    const { delay, duration } = scene.data.blinkTimings.left;
+    const total = duration * 1000;
+    const close = { duration: total * 0.04, easing: easings.standard };
+    blink.value = withDelay(delay * 1000, withRepeat(withSequence(withDelay(total * 0.92, withTiming(CLOSED, close)), withTiming(1, close)), -1));
+    return () => cancelAnimation(blink);
+  }, [blink, reduceMotion, scene]);
+
+  useEffect(() => {
+    if (!lookAround || reduceMotion) return;
+    const timer = setInterval(() => {
+      if (Math.random() < 0.5 || turned.value < 1) return;
+      lookX.value = withTiming((Math.random() * 2 - 1) * 6, { duration: LOOK_MS, easing: easings.standard });
+      lookY.value = withTiming((Math.random() * 2 - 1) * 4, { duration: LOOK_MS, easing: easings.standard });
+    }, LOOK_INTERVAL_MS);
+    return () => clearInterval(timer);
+  }, [lookAround, lookX, lookY, reduceMotion, turned]);
+
+  const turnToFront = useCallback(() => {
+    if (reduceMotion) return;
+    turned.value = withSequence(withTiming(0, timings.avatarTurn), withDelay(FRONT_HOLD_MS, withTiming(1, timings.avatarTurn)));
+    lookX.value = withTiming(0, { duration: 250, easing: easings.standard });
+    lookY.value = withTiming(0, { duration: 250, easing: easings.standard });
+    blink.value = withSequence(withTiming(CLOSED, { duration: 150, easing: easings.standard }), withTiming(1, { duration: 150, easing: easings.standard }));
+  }, [blink, lookX, lookY, reduceMotion, turned]);
+
+  const bobStyle = useAnimatedStyle(() => {
+    "worklet";
+    return { transform: [{ translateY: level ? -level.value * BOB * unit : 0 }] };
+  });
+  const poseStyle = useAnimatedStyle(() => {
+    "worklet";
+    const t = turned.value;
+    return {
+      transform: [{ translateX: projection.translateX * unit * t }, { translateY: projection.translateY * unit * t }, { skewX: `${projection.skewX * t}deg` }, { skewY: `${projection.skewY * t}deg` }, { scaleX: 1 + (projection.scaleX - 1) * t }, { scaleY: 1 + (projection.scaleY - 1) * t }],
+    };
+  });
+  const eyesLookStyle = useAnimatedStyle(() => {
+    "worklet";
+    return { transform: [{ translateX: lookX.value * unit }, { translateY: lookY.value * unit }] };
+  });
+  const mouthLookStyle = useAnimatedStyle(() => {
+    "worklet";
+    return { transform: [{ translateX: (lookX.value / 2) * unit }, { translateY: (lookY.value / 2) * unit }] };
+  });
+  const blinkStyle = useAnimatedStyle(() => {
+    "worklet";
+    return { transform: [{ scaleY: blink.value }] };
+  });
+  const mouthStyle = useAnimatedStyle(() => {
+    "worklet";
+    return { transform: [{ scaleY: 1 + (level ? level.value : 0) * MOUTH }] };
+  });
+
+  const faceTransform = `translate(${box.x} ${box.y}) scale(${box.width / geometry.viewBox.width} ${box.height / geometry.viewBox.height})`;
+
+  return (
+    <View onTouchStart={turnToFront} style={[styles.circle, { width: size, height: size, borderRadius: size / 2, backgroundColor: background }]} testID={testID}>
+      <Animated.View style={[StyleSheet.absoluteFill, bobStyle]}>
+        <Animated.View style={[StyleSheet.absoluteFill, poseStyle]}>
+          <Animated.View style={[StyleSheet.absoluteFill, eyesLookStyle]}>
+            <Animated.View style={[StyleSheet.absoluteFill, { transformOrigin: `50% ${eyeCenter}%` }, blinkStyle]}>
+              <Svg height={size} viewBox="0 0 100 100" width={size}>
+                <G transform={faceTransform}>
+                  {[...geometry.leftEyePaths, ...geometry.rightEyePaths].map((d) => (
+                    <Path d={d} fill={foreground} key={d} />
+                  ))}
+                </G>
+              </Svg>
+            </Animated.View>
+          </Animated.View>
+          <Animated.View style={[StyleSheet.absoluteFill, mouthLookStyle]}>
+            <Animated.View style={[StyleSheet.absoluteFill, styles.mouthOrigin, mouthStyle]}>
+              <Svg height={size} viewBox="0 0 100 100" width={size}>
+                <SvgText alignmentBaseline="middle" fill={foreground} fontFamily={MONO} fontSize={scene.initialLayout.fontSize} fontWeight="700" textAnchor="middle" x={scene.initialLayout.x} y={scene.initialLayout.y}>
+                  {scene.data.initial}
+                </SvgText>
+              </Svg>
+            </Animated.View>
+          </Animated.View>
+        </Animated.View>
+      </Animated.View>
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  circle: { overflow: "hidden" },
+  // The initial sits on y = 70 with a 26-unit font, so its baseline is near y = 79.
+  mouthOrigin: { transformOrigin: "50% 79%" },
+});

package/src/avatar/tile-avatar-size.ts

@@ -0,0 +1,4 @@
+/** A camera-off tile's avatar is 42 % of the tile's shorter side, between 32 and 150 pt. */
+export function tileAvatarSize(width: number, height: number): number {
+  return Math.round(Math.min(150, Math.max(32, Math.min(width, height) * 0.42)));
+}

package/src/client.ts

@@ -1,7 +1,3 @@
-/**
- * Native implementation seam for advanced construction. The turnkey root
- * remains `Chalk`; applications that need direct lifecycle ownership can
- * create the React Native SpaceClient through this explicit subpath.
- */
+/** Native client construction for applications that own the call lifecycle. */
 export { createNativeSpaceClient } from "./space-client/create-native-space-client";
 export type { NativeSpaceClientOptions } from "./space-client/create-native-space-client";

package/src/components/EmbeddedWhiteboard.tsx

@@ -1,9 +1,8 @@
 import { ChalkWhiteboardController, type ChalkEmbeddedWhiteboardTransport, type ChalkEmbeddedWhiteboardViewport } from "@q9labsai/chalk-whiteboard/embedded";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { ActivityIndicator, Pressable, StyleSheet, Text, useWindowDimensions, View, type LayoutChangeEvent, type StyleProp, type ViewStyle } from "react-native";
+import { ActivityIndicator, Pressable, Text, useWindowDimensions, View, type LayoutChangeEvent, type StyleProp, type ViewStyle } from "react-native";
 import WebView, { type WebViewMessageEvent, type WebViewNavigation } from "react-native-webview";
 
-import { useNativeTheme } from "../ui/native-theme";
 import { isEmbeddedWhiteboardNavigationAllowed, rendererURLWithContext, resolveEmbeddedWhiteboardRendererURL } from "../whiteboard/embedded-whiteboard-assets";
 import { createEmbeddedWhiteboardViewport } from "../whiteboard/embedded-whiteboard-viewport";
 
@@ -39,8 +38,7 @@ export const embeddedWhiteboardWebViewSecurityPolicy = Object.freeze({
 });
 
 export function EmbeddedWhiteboard({ transport, journeyId, traceparent, tracestate, canDraw, canClear, theme: themeOverride, localParticipantColor, rendererURL: rendererURLOverride, style, testID, onMetric, onError, onUserExport }: EmbeddedWhiteboardProps): React.JSX.Element {
-  const nativeTheme = useNativeTheme();
-  const theme = themeOverride ?? nativeTheme.colorScheme;
+  const theme = themeOverride ?? "light";
   const webViewRef = useRef<WebView>(null);
   const controllerRef = useRef<ChalkWhiteboardController | null>(null);
   const listenersRef = useRef(new Set<(message: string) => void>());
@@ -158,26 +156,26 @@ export function EmbeddedWhiteboard({ transport, journeyId, traceparent, tracesta
 
   if (loadError) {
     return (
-      <View style={[styles.status, { backgroundColor: nativeTheme.colors.lightSurface }, style]} testID={testID}>
-        <Text style={[styles.errorTitle, { color: nativeTheme.colors.lightText }]}>Whiteboard unavailable</Text>
-        <Text style={[styles.errorMessage, { color: nativeTheme.colors.lightSubtleText }]}>{loadError}</Text>
-        <Pressable accessibilityRole="button" onPress={retryRenderer} style={({ pressed }) => [styles.retryButton, { backgroundColor: nativeTheme.colors.info }, pressed && styles.retryButtonPressed]}>
-          <Text style={[styles.retryButtonText, { color: nativeTheme.colors.onDark }]}>Retry</Text>
+      <View style={[{ flex: 1 }, style]} testID={testID}>
+        <Text>Whiteboard unavailable</Text>
+        <Text>{loadError}</Text>
+        <Pressable accessibilityRole="button" onPress={retryRenderer}>
+          <Text>Retry</Text>
         </Pressable>
       </View>
     );
   }
   if (!sourceURL || !rendererURL) {
     return (
-      <View style={[styles.status, { backgroundColor: nativeTheme.colors.lightSurface }, style]} testID={testID}>
-        <ActivityIndicator color={nativeTheme.colors.info} />
-        <Text style={[styles.loadingMessage, { color: nativeTheme.colors.lightMutedText }]}>Loading whiteboard…</Text>
+      <View style={[{ flex: 1 }, style]} testID={testID}>
+        <ActivityIndicator />
+        <Text>Loading whiteboard…</Text>
       </View>
     );
   }
 
   return (
-    <View onLayout={handleLayout} style={[styles.container, style]} testID={testID}>
+    <View onLayout={handleLayout} style={[{ flex: 1 }, style]} testID={testID}>
       <WebView
         key={rendererGeneration}
         ref={webViewRef}
@@ -197,12 +195,12 @@ export function EmbeddedWhiteboard({ transport, journeyId, traceparent, tracesta
         pullToRefreshEnabled={false}
         scrollEnabled={false}
         source={{ uri: sourceURL }}
-        style={[styles.webView, { backgroundColor: nativeTheme.colors.lightSurface }]}
+        style={{ flex: 1 }}
         webviewDebuggingEnabled={typeof __DEV__ !== "undefined" && __DEV__}
       />
       {compatibilityNotice ? (
-        <View pointerEvents="none" style={[styles.compatibilityNotice, { backgroundColor: nativeTheme.colors.dangerSurfaceOverlay94 }]}>
-          <Text style={[styles.compatibilityNoticeText, { color: nativeTheme.colors.onDark }]}>{compatibilityNotice}</Text>
+        <View pointerEvents="none">
+          <Text>{compatibilityNotice}</Text>
         </View>
       ) : null}
     </View>
@@ -212,58 +210,3 @@ export function EmbeddedWhiteboard({ transport, journeyId, traceparent, tracesta
 function createRendererGeneration(): string {
   return globalThis.crypto?.randomUUID?.() ?? `whiteboard-${Date.now()}-${Math.random().toString(36).slice(2)}`;
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    overflow: "hidden",
-  },
-  webView: {
-    flex: 1,
-  },
-  compatibilityNotice: {
-    position: "absolute",
-    top: 12,
-    left: 12,
-    right: 12,
-    borderRadius: 10,
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-  },
-  compatibilityNoticeText: {
-    fontSize: 13,
-    fontWeight: "700",
-    textAlign: "center",
-  },
-  status: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 10,
-    padding: 24,
-  },
-  loadingMessage: {
-    fontSize: 14,
-    fontWeight: "600",
-  },
-  errorTitle: {
-    fontSize: 17,
-    fontWeight: "700",
-  },
-  errorMessage: {
-    fontSize: 13,
-    textAlign: "center",
-  },
-  retryButton: {
-    borderRadius: 8,
-    paddingHorizontal: 16,
-    paddingVertical: 10,
-  },
-  retryButtonPressed: {
-    opacity: 0.75,
-  },
-  retryButtonText: {
-    fontSize: 14,
-    fontWeight: "700",
-  },
-});

package/src/components/native-media-visibility.ts

@@ -1,7 +1,6 @@
-import type { NativeParticipant as Participant } from "../ui/native-types";
 import type { NativeMediaStreamTrack } from "../media/native-webrtc";
 
-export function shouldRenderNativeMediaTrack({ participant, track, mediaKind = "camera" }: { participant: Participant | null; track: MediaStreamTrack | NativeMediaStreamTrack | null | undefined; mediaKind?: "camera" | "screen-share" }): boolean {
+export function shouldRenderNativeMediaTrack({ participant, track, mediaKind = "camera" }: { participant: { readonly videoEnabled: boolean } | null; track: MediaStreamTrack | NativeMediaStreamTrack | null | undefined; mediaKind?: "camera" | "screen-share" }): boolean {
   if (!track) {
     return false;
   }

package/src/components/useAndroidCallService.ts

@@ -0,0 +1,41 @@
+import { useEffect } from "react";
+import { AppState } from "react-native";
+import { startAndroidCallService, stopAndroidCallService } from "../android/call-service";
+import { useConnection, useMedia } from "../hooks/space-hooks";
+
+/**
+ * Runs the Android foreground service for as long as the person is in the call, so the microphone
+ * and camera keep working in the background. It starts again when the microphone or camera turns on,
+ * because that's when the person has granted the permission the service declares, and on every return
+ * to the foreground, because Android can refuse a start made while the app is in the background.
+ */
+export function useAndroidCallService(): void {
+  const connection = useConnection();
+  const media = useMedia();
+  const inCall = connection.status === "live" || connection.status === "reconnecting";
+  const microphoneOn = media.local.microphone.state === "enabled";
+  const cameraOn = media.local.camera.state === "enabled";
+
+  useEffect(() => {
+    if (!inCall) return;
+    const start = () => {
+      startAndroidCallService().catch((error: unknown) => {
+        console.warn("Failed to start the Android call service", error);
+      });
+    };
+    start();
+    const subscription = AppState.addEventListener("change", (state) => {
+      if (state === "active") start();
+    });
+    return () => subscription.remove();
+  }, [inCall, microphoneOn, cameraOn]);
+
+  useEffect(() => {
+    if (!inCall) return;
+    return () => {
+      stopAndroidCallService().catch((error: unknown) => {
+        console.warn("Failed to stop the Android call service", error);
+      });
+    };
+  }, [inCall]);
+}