@q9labsai/chalk-react-native 4.0.0

package/src/components/EmbeddedWhiteboard.tsx

@@ -0,0 +1,260 @@
+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 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";
+
+export interface EmbeddedWhiteboardProps {
+  readonly transport: ChalkEmbeddedWhiteboardTransport;
+  readonly journeyId: string;
+  readonly traceparent?: string;
+  readonly tracestate?: string;
+  readonly canDraw: boolean;
+  readonly canClear: boolean;
+  readonly theme?: "light" | "dark";
+  readonly localParticipantColor?: string;
+  readonly rendererURL?: string;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
+  readonly onMetric?: (metric: { readonly name: string; readonly value: number; readonly attributes?: Readonly<Record<string, string | number | boolean>> }) => void;
+  readonly onError?: (error: { readonly code: string; readonly message: string; readonly recoverable: boolean }) => void;
+  readonly onUserExport?: (value: { readonly requestId: string; readonly format: "png" | "svg"; readonly mimeType: string; readonly dataURL: string }) => void;
+}
+
+export const embeddedWhiteboardWebViewSecurityPolicy = Object.freeze({
+  allowFileAccess: true,
+  allowFileAccessFromFileURLs: false,
+  allowUniversalAccessFromFileURLs: false,
+  cacheEnabled: false,
+  domStorageEnabled: false,
+  javaScriptCanOpenWindowsAutomatically: false,
+  javaScriptEnabled: true,
+  mixedContentMode: "never" as const,
+  setSupportMultipleWindows: false,
+  sharedCookiesEnabled: false,
+  thirdPartyCookiesEnabled: false,
+});
+
+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 webViewRef = useRef<WebView>(null);
+  const controllerRef = useRef<ChalkWhiteboardController | null>(null);
+  const listenersRef = useRef(new Set<(message: string) => void>());
+  const onMetricRef = useRef(onMetric);
+  const onErrorRef = useRef(onError);
+  const onUserExportRef = useRef(onUserExport);
+  const [rendererURL, setRendererURL] = useState<string | null>(null);
+  const [rendererGeneration, setRendererGeneration] = useState(createRendererGeneration);
+  const [loadAttempt, setLoadAttempt] = useState(0);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [compatibilityNotice, setCompatibilityNotice] = useState<string | null>(null);
+  const { width, height, scale } = useWindowDimensions();
+  onMetricRef.current = onMetric;
+  onErrorRef.current = onError;
+  onUserExportRef.current = onUserExport;
+
+  const rendererPort = useMemo(
+    () => ({
+      postMessage: (message: string) => webViewRef.current?.postMessage(message),
+      subscribe: (listener: (message: string) => void) => {
+        listenersRef.current.add(listener);
+        return () => listenersRef.current.delete(listener);
+      },
+    }),
+    [],
+  );
+  const handleControllerError = useCallback((error: { readonly code: string; readonly message: string; readonly recoverable: boolean }) => onErrorRef.current?.(error), []);
+  const handleControllerMetric = useCallback((metric: { readonly name: string; readonly value: number; readonly attributes?: Readonly<Record<string, string | number | boolean>> }) => onMetricRef.current?.(metric), []);
+  const handleControllerUserExport = useCallback((value: { readonly requestId: string; readonly format: "png" | "svg"; readonly mimeType: string; readonly dataURL: string }) => onUserExportRef.current?.(value), []);
+
+  useEffect(() => {
+    let active = true;
+    setLoadError(null);
+    void resolveEmbeddedWhiteboardRendererURL(rendererURLOverride)
+      .then((url) => {
+        if (active) setRendererURL(url);
+      })
+      .catch((cause: unknown) => {
+        if (!active) return;
+        const message = cause instanceof Error ? cause.message : "Chalk whiteboard assets are unavailable";
+        setLoadError(message);
+        onError?.({ code: "renderer_asset_unavailable", message, recoverable: false });
+      });
+    return () => {
+      active = false;
+    };
+  }, [loadAttempt, onError, rendererURLOverride]);
+
+  useEffect(() => {
+    setCompatibilityNotice(null);
+    const controller = new ChalkWhiteboardController({
+      renderer: rendererPort,
+      transport,
+      journeyId,
+      ...(traceparent ? { traceparent } : {}),
+      ...(tracestate ? { tracestate } : {}),
+      canDraw,
+      canClear,
+      theme,
+      ...(localParticipantColor ? { localParticipantColor } : {}),
+      onMetric: handleControllerMetric,
+      onError: handleControllerError,
+      onCompatibilityChange: (state) => setCompatibilityNotice(state.message),
+      onUserExport: handleControllerUserExport,
+    });
+    controller.start();
+    controllerRef.current = controller;
+    return () => {
+      if (controllerRef.current === controller) controllerRef.current = null;
+      controller.stop();
+    };
+  }, [handleControllerError, handleControllerMetric, handleControllerUserExport, journeyId, localParticipantColor, rendererPort, theme, traceparent, tracestate, transport]);
+
+  useEffect(() => {
+    controllerRef.current?.setCapabilities({ canDraw, canClear });
+  }, [canClear, canDraw]);
+
+  const viewport = useMemo<ChalkEmbeddedWhiteboardViewport>(() => ({ width, height, scale }), [height, scale, width]);
+  useEffect(() => {
+    controllerRef.current?.setViewport(viewport);
+  }, [viewport]);
+
+  const sourceURL = rendererURL ? rendererURLWithContext(rendererURL, { journeyId, rendererGeneration }) : null;
+  const handleMessage = (event: WebViewMessageEvent): void => {
+    const message = event.nativeEvent.data;
+    listenersRef.current.forEach((listener) => listener(message));
+  };
+  const allowNavigation = (request: WebViewNavigation): boolean => Boolean(rendererURL && isEmbeddedWhiteboardNavigationAllowed(request.url, rendererURL));
+  const reloadRenderer = (): void => {
+    controllerRef.current?.rendererReloaded();
+    setRendererGeneration(createRendererGeneration());
+  };
+  const retryRenderer = (): void => {
+    setLoadError(null);
+    setLoadAttempt((attempt) => attempt + 1);
+    reloadRenderer();
+  };
+  const handleRendererTermination = (): void => {
+    handleControllerMetric({ name: "whiteboard.renderer.termination", value: 1 });
+    handleControllerError({
+      code: "renderer_terminated",
+      message: "The whiteboard renderer stopped and is recovering.",
+      recoverable: true,
+    });
+    reloadRenderer();
+  };
+
+  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>
+        </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>
+    );
+  }
+
+  return (
+    <View style={[styles.container, style]} testID={testID}>
+      <WebView
+        key={rendererGeneration}
+        ref={webViewRef}
+        {...embeddedWhiteboardWebViewSecurityPolicy}
+        allowingReadAccessToURL={rendererURL.slice(0, rendererURL.lastIndexOf("/") + 1)}
+        mediaPlaybackRequiresUserAction
+        onContentProcessDidTerminate={handleRendererTermination}
+        onError={(event) => {
+          const message = event.nativeEvent.description || "The whiteboard renderer failed to load";
+          setLoadError(message);
+          handleControllerError({ code: "renderer_load_failed", message, recoverable: true });
+        }}
+        onMessage={handleMessage}
+        onRenderProcessGone={handleRendererTermination}
+        onShouldStartLoadWithRequest={allowNavigation}
+        originWhitelist={["file://*"]}
+        pullToRefreshEnabled={false}
+        scrollEnabled={false}
+        source={{ uri: sourceURL }}
+        style={[styles.webView, { backgroundColor: nativeTheme.colors.lightSurface }]}
+        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>
+      ) : null}
+    </View>
+  );
+}
+
+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/Entrance.test.tsx

@@ -0,0 +1,19 @@
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("./EntranceView", () => ({ EntranceView: "EntranceView" }));
+vi.mock("react-native", () => ({ Image: "Image" }));
+
+import { Entrance } from "./Entrance";
+
+describe("Entrance", () => {
+  it("exposes the preparation component", () => {
+    expect(Entrance).toBeTypeOf("function");
+  });
+
+  it("forwards the public cancel callback to the native Entrance view", () => {
+    const onCancel = vi.fn();
+    const element = Entrance({ onCancel, onJoin: vi.fn(), spaceName: "Space" });
+
+    expect(element.props.onCancel).toBe(onCancel);
+  });
+});

package/src/components/Entrance.tsx

@@ -0,0 +1,41 @@
+import { EntranceView } from "./EntranceView";
+import { Image } from "react-native";
+
+export type EntranceDefaults = {
+  readonly microphone?: boolean;
+  readonly camera?: boolean;
+};
+
+export type EntranceSettings = {
+  readonly displayName: string;
+  readonly microphone: boolean;
+  readonly camera: boolean;
+};
+
+export type EntranceProps = {
+  readonly spaceName: string;
+  readonly logoUrl?: string;
+  readonly defaultDisplayName?: string;
+  readonly defaults?: EntranceDefaults;
+  readonly error?: string;
+  readonly joining?: boolean;
+  readonly onCancel?: () => void;
+  readonly onJoin: (settings: EntranceSettings) => void | Promise<void>;
+};
+
+/** The native implementation owns the device preview lifecycle and disposal. */
+export function Entrance({ spaceName, logoUrl, defaultDisplayName, defaults, error, joining = false, onCancel, onJoin }: EntranceProps): React.JSX.Element {
+  return (
+    <EntranceView
+      error={error}
+      initialAudioEnabled={defaults?.microphone ?? true}
+      initialVideoEnabled={defaults?.camera ?? true}
+      joinDisabled={joining}
+      logo={logoUrl ? <Image accessibilityLabel="Chalk" source={{ uri: logoUrl }} style={{ height: 32, width: 120 }} /> : undefined}
+      onCancel={onCancel}
+      onJoin={({ displayName, microphoneEnabled, cameraEnabled }) => void onJoin({ displayName, microphone: microphoneEnabled, camera: cameraEnabled })}
+      spaceName={spaceName}
+      displayName={defaultDisplayName}
+    />
+  );
+}

package/src/components/EntranceView.android.test.tsx

@@ -0,0 +1,100 @@
+import { isValidElement, type ReactElement, type ReactNode } from "react";
+import { describe, expect, it, vi } from "vitest";
+
+const controller = vi.hoisted(() => ({
+  displayName: "Ada",
+  audioEnabled: true,
+  videoEnabled: true,
+  isSubmitting: false,
+  isInputFocused: false,
+  previewError: null,
+  previewStream: null,
+  simulatorMediaDisabled: false,
+  setDisplayName: vi.fn(),
+  setInputFocused: vi.fn(),
+  toggleAudio: vi.fn(),
+  toggleVideo: vi.fn(),
+  handleJoin: vi.fn(),
+}));
+
+const theme = vi.hoisted(() => ({
+  colors: {
+    background: "#101112",
+    foreground: "#f7f8f9",
+    primary: "#12ab89",
+    primaryForeground: "#ffffff",
+    muted: "#343536",
+    mutedForeground: "#909192",
+    error: "#dc2626",
+    card: "#202122",
+    surface: "#303132",
+    raisedSurface: "#404142",
+    insetSurface: "#505152",
+    controlsBackground: "#606162",
+    border: "#707172",
+    ring: "#808182",
+    darkCanvas: "#010203",
+  },
+}));
+
+vi.mock("react-native", () => ({
+  KeyboardAvoidingView: "KeyboardAvoidingView",
+  Platform: { OS: "android" },
+  Pressable: "Pressable",
+  StyleSheet: { absoluteFillObject: {}, create: <T,>(styles: T) => styles },
+  Text: "Text",
+  TextInput: "TextInput",
+  View: "View",
+}));
+vi.mock("@hugeicons/react-native", () => ({ HugeiconsIcon: "HugeiconsIcon" }));
+vi.mock("../media/native-webrtc", () => ({ RTCView: "RTCView" }));
+vi.mock("../ui/native-theme", () => ({ useNativeTheme: () => theme }));
+vi.mock("./FaceAvatar", () => ({ FaceAvatar: "FaceAvatar" }));
+vi.mock("./native-entrance/useEntranceController", () => ({ useEntranceController: () => controller }));
+
+import { EntranceViewAndroid } from "./EntranceView.android";
+
+describe("EntranceViewAndroid", () => {
+  it("applies the active theme to its native surface and media controls", () => {
+    const entrance = EntranceViewAndroid({ onJoin: vi.fn(), spaceName: "Design review" });
+    const screen = findElements(entrance, (element) => element.type === "KeyboardAvoidingView")[0];
+    const mediaControl = findElements(entrance, (element) => element.type === "Pressable" && !element.props.accessibilityLabel)[0];
+    const mediaStyle = mediaControl?.props.style as ((state: { readonly pressed: boolean }) => unknown) | undefined;
+
+    expect(JSON.stringify(screen?.props.style)).toContain(theme.colors.background);
+    expect(JSON.stringify(mediaStyle?.({ pressed: false }))).toContain(theme.colors.controlsBackground);
+  });
+
+  it("omits the Android cancel control when no cancellation handler is supplied", () => {
+    const withoutCancel = EntranceViewAndroid({ onJoin: vi.fn(), spaceName: "Design review" });
+    const withCancel = EntranceViewAndroid({ onCancel: vi.fn(), onJoin: vi.fn(), spaceName: "Design review" });
+
+    expect(findElements(withoutCancel, (element) => element.props.accessibilityLabel === "Cancel and leave Entrance")).toHaveLength(0);
+    expect(findElements(withCancel, (element) => element.props.accessibilityLabel === "Cancel and leave Entrance")).toHaveLength(1);
+  });
+});
+
+interface NativeElementProps {
+  readonly accessibilityLabel?: string;
+  readonly children?: ReactNode;
+  readonly style?: unknown;
+}
+
+function findElements(node: ReactNode, matches: (element: ReactElement<NativeElementProps>) => boolean): ReactElement<NativeElementProps>[] {
+  const found: ReactElement<NativeElementProps>[] = [];
+  if (!isValidElement<NativeElementProps>(node)) {
+    return found;
+  }
+
+  if (matches(node)) {
+    found.push(node);
+  }
+
+  const children = node.props.children;
+  for (const child of Array.isArray(children) ? children : [children]) {
+    if (child !== undefined && child !== null) {
+      found.push(...findElements(child, matches));
+    }
+  }
+  return found;
+}

package/src/components/EntranceView.android.tsx

@@ -0,0 +1,274 @@
+import { RTCView } from "../media/native-webrtc";
+import ArrowLeft01Icon from "@hugeicons/core-free-icons/dist/esm/ArrowLeft01Icon";
+import Mic01Icon from "@hugeicons/core-free-icons/dist/esm/Mic01Icon";
+import MicOff01Icon from "@hugeicons/core-free-icons/dist/esm/MicOff01Icon";
+import UserIcon from "@hugeicons/core-free-icons/dist/esm/UserIcon";
+import Video01Icon from "@hugeicons/core-free-icons/dist/esm/Video01Icon";
+import VideoOffIcon from "@hugeicons/core-free-icons/dist/esm/VideoOffIcon";
+import { HugeiconsIcon } from "@hugeicons/react-native";
+import { KeyboardAvoidingView, Platform, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
+import { Theme } from "../ui/theme";
+import { useNativeTheme } from "../ui/native-theme";
+import { getIosSimulatorMediaMessage } from "../utils/ios-simulator";
+import { FaceAvatar } from "./FaceAvatar";
+import type { EntranceViewProps } from "./EntranceView";
+import { useEntranceController } from "./native-entrance/useEntranceController";
+
+export function EntranceViewAndroid({ spaceName, error, joinDisabled = false, onCancel, ...props }: EntranceViewProps): React.JSX.Element {
+  const controller = useEntranceController({ ...props, joinDisabled });
+  const theme = useNativeTheme();
+  const canJoin = controller.displayName.trim().length > 0 && !joinDisabled && !controller.isSubmitting;
+
+  return (
+    <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"} style={[styles.screen, { backgroundColor: theme.colors.background }]}>
+      <View style={styles.content}>
+        <View style={styles.previewContainer}>
+          <View style={[styles.previewSurface, { backgroundColor: theme.colors.raisedSurface, borderColor: theme.colors.border }]}>
+            {controller.previewStream && controller.videoEnabled ? (
+              <RTCView mirror objectFit="cover" streamURL={controller.previewStream.toURL()} style={styles.previewVideo} zOrder={0} />
+            ) : (
+              <View style={[styles.avatarContainer, { backgroundColor: theme.colors.insetSurface }]}>
+                <FaceAvatar name={controller.displayName} size={140} textSize={52} />
+              </View>
+            )}
+
+            {onCancel ? (
+              <Pressable accessibilityLabel="Cancel and leave Entrance" accessibilityRole="button" onPress={onCancel} style={({ pressed }) => [styles.floatingBack, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }, pressed && styles.topIconButtonPressed]}>
+                <HugeiconsIcon icon={ArrowLeft01Icon} size={22} color={theme.colors.foreground} />
+              </Pressable>
+            ) : null}
+          </View>
+
+          {controller.previewError && controller.videoEnabled ? <Text style={styles.previewError}>{controller.previewError}</Text> : null}
+          {controller.simulatorMediaDisabled ? <Text style={styles.previewHint}>{getIosSimulatorMediaMessage()}</Text> : null}
+        </View>
+
+        <View style={[styles.sheetContainer, { backgroundColor: theme.colors.card, borderColor: theme.colors.border, shadowColor: theme.colors.darkCanvas }]}>
+          <View style={styles.sheetHandle} />
+          <View style={styles.sheetHeader}>
+            <Text style={[styles.spaceName, { color: theme.colors.foreground }]} numberOfLines={1}>
+              {spaceName}
+            </Text>
+          </View>
+
+          <View style={[styles.inputCard, { backgroundColor: theme.colors.surface, borderColor: controller.isInputFocused ? theme.colors.ring : theme.colors.border }]}>
+            <HugeiconsIcon icon={UserIcon} size={18} color={controller.isInputFocused ? theme.colors.primary : theme.colors.mutedForeground} style={styles.inputIcon} />
+            <TextInput
+              onChangeText={controller.setDisplayName}
+              onFocus={() => controller.setInputFocused(true)}
+              onBlur={() => controller.setInputFocused(false)}
+              placeholder="Enter your name"
+              placeholderTextColor={theme.colors.mutedForeground}
+              style={[styles.nameInput, { color: theme.colors.foreground }]}
+              value={controller.displayName}
+              maxLength={30}
+              returnKeyType="join"
+              onSubmitEditing={controller.handleJoin}
+            />
+          </View>
+
+          <View style={styles.mediaRow}>
+            <Pressable
+              disabled={controller.simulatorMediaDisabled}
+              onPress={controller.toggleAudio}
+              style={({ pressed }) => [styles.controlCircle, { backgroundColor: controller.audioEnabled ? theme.colors.controlsBackground : theme.colors.error, borderColor: theme.colors.border }, controller.simulatorMediaDisabled && styles.toggleCircleDisabled, pressed && styles.togglePressed]}
+            >
+              <HugeiconsIcon icon={controller.audioEnabled ? Mic01Icon : MicOff01Icon} size={24} color={theme.colors.primaryForeground} />
+            </Pressable>
+            <Pressable
+              disabled={controller.simulatorMediaDisabled}
+              onPress={controller.toggleVideo}
+              style={({ pressed }) => [styles.controlCircle, { backgroundColor: controller.videoEnabled ? theme.colors.controlsBackground : theme.colors.error, borderColor: theme.colors.border }, controller.simulatorMediaDisabled && styles.toggleCircleDisabled, pressed && styles.togglePressed]}
+            >
+              <HugeiconsIcon icon={controller.videoEnabled ? Video01Icon : VideoOffIcon} size={24} color={theme.colors.primaryForeground} />
+            </Pressable>
+          </View>
+
+          {error ? <Text style={[styles.globalError, { color: theme.colors.error }]}>{error}</Text> : null}
+
+          <Pressable disabled={!canJoin} onPress={controller.handleJoin} style={({ pressed }) => [styles.joinButton, { backgroundColor: canJoin ? theme.colors.primary : theme.colors.muted }, !canJoin && styles.joinButtonDisabled, pressed && styles.togglePressed]}>
+            <Text style={[styles.joinButtonText, { color: theme.colors.primaryForeground }]}>{controller.isSubmitting || joinDisabled ? "Joining..." : "Enter Space"}</Text>
+          </Pressable>
+        </View>
+      </View>
+    </KeyboardAvoidingView>
+  );
+}
+
+export { EntranceViewAndroid as EntranceView };
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    backgroundColor: Theme.colors.background,
+  },
+  content: {
+    flex: 1,
+  },
+  floatingBack: {
+    position: "absolute",
+    top: Platform.OS === "ios" ? 24 : 20,
+    left: 20,
+    width: 42,
+    height: 42,
+    borderRadius: 21,
+    backgroundColor: Theme.colors.darkOverlay40,
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 10,
+    borderWidth: 1,
+    borderColor: Theme.colors.whiteOverlay10,
+  },
+  previewContainer: {
+    flex: 1,
+    justifyContent: "center",
+    paddingTop: Platform.OS === "ios" ? 10 : 0,
+    marginBottom: 0,
+  },
+  previewSurface: {
+    width: "100%",
+    aspectRatio: 0.72,
+    backgroundColor: Theme.colors.raisedSurface,
+    borderRadius: 32,
+    alignSelf: "center",
+    overflow: "hidden",
+    position: "relative",
+    borderWidth: 1,
+    borderColor: Theme.colors.whiteOverlay06,
+  },
+  previewVideo: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  avatarContainer: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: Theme.colors.insetSurface,
+  },
+  togglePressed: {
+    opacity: 0.7,
+    transform: [{ scale: 0.9 }],
+  },
+  previewError: {
+    color: Theme.colors.error,
+    fontSize: 12,
+    marginTop: 10,
+    textAlign: "center",
+    fontWeight: "600",
+    paddingHorizontal: 24,
+  },
+  previewHint: {
+    color: Theme.colors.mutedForeground,
+    fontSize: 12,
+    marginTop: 10,
+    textAlign: "center",
+    lineHeight: 18,
+    paddingHorizontal: 24,
+  },
+  sheetContainer: {
+    backgroundColor: Theme.colors.elevatedSurface,
+    borderTopLeftRadius: 32,
+    borderTopRightRadius: 32,
+    paddingHorizontal: 24,
+    paddingTop: 16,
+    paddingBottom: Platform.OS === "ios" ? 44 : 32,
+    gap: 20,
+    borderTopWidth: 1,
+    borderColor: Theme.colors.whiteOverlay08,
+    shadowColor: Theme.colors.darkCanvas,
+    shadowOffset: { width: 0, height: -12 },
+    shadowOpacity: 0.3,
+    shadowRadius: 16,
+    elevation: 20,
+  },
+  sheetHandle: {
+    width: 36,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: Theme.colors.whiteOverlay10,
+    alignSelf: "center",
+    marginBottom: 8,
+  },
+  sheetHeader: {
+    alignItems: "center",
+    marginBottom: 4,
+  },
+  spaceName: {
+    color: Theme.colors.foreground,
+    fontSize: 22,
+    fontWeight: "800",
+    textAlign: "center",
+    letterSpacing: -0.6,
+  },
+  inputCard: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: Theme.colors.whiteOverlay04,
+    borderRadius: 18,
+    paddingHorizontal: 16,
+    height: 56,
+    borderWidth: 1,
+    borderColor: Theme.colors.whiteOverlay08,
+  },
+  inputCardFocused: {
+    borderColor: Theme.colors.primary,
+    backgroundColor: Theme.colors.accentOverlay04,
+  },
+  inputIcon: {
+    marginRight: 24,
+  },
+  nameInput: {
+    flex: 1,
+    color: Theme.colors.onDark,
+    fontSize: 16,
+    fontWeight: "600",
+    padding: 0,
+  },
+  mediaRow: {
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: 20,
+  },
+  controlCircle: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    backgroundColor: Theme.colors.whiteOverlay06,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1,
+    borderColor: Theme.colors.whiteOverlay10,
+  },
+  toggleCircleOff: {
+    backgroundColor: Theme.colors.dangerStrong,
+    borderColor: Theme.colors.dangerStrong,
+  },
+  toggleCircleDisabled: {
+    opacity: 0.45,
+  },
+  joinButton: {
+    width: "100%",
+    height: 58,
+    borderRadius: 18,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  joinButtonDisabled: {
+    opacity: 0.6,
+  },
+  joinButtonText: {
+    color: Theme.colors.onDark,
+    fontSize: 16,
+    fontWeight: "700",
+  },
+  globalError: {
+    color: Theme.colors.error,
+    fontSize: 13,
+    fontWeight: "600",
+    textAlign: "center",
+  },
+  topIconButtonPressed: {
+    opacity: 0.6,
+    transform: [{ scale: 0.92 }],
+  },
+});