@q9labsai/chalk-react-native 4.0.0

package/src/components/Chalk.tsx

@@ -0,0 +1,333 @@
+import type { ChatUploadFile, ClientEventMap, GetAccess, SpaceClient } from "@q9labsai/chalk-client";
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+
+import { ChalkProvider, useSpaceClient } from "../context/space-client-context";
+import { useConnection } from "../hooks/space-hooks";
+import { createNativeSpaceClient } from "../space-client/create-native-space-client";
+import { NativeAppearanceProvider, NativeTextureOverlay, useNativeAppearance } from "../ui/native-appearance-context";
+import { type ThemePalette, type ThemeTexture } from "../ui/appearance";
+import { NativeThemeProvider, useNativeTheme } from "../ui/native-theme";
+import { DEFAULT_CHALK_THEME_TOKENS } from "../ui/theme-tokens";
+import { SpaceView } from "./SpaceView";
+import { Entrance, type EntranceDefaults } from "./Entrance";
+
+export type ChalkFeatures = {
+  readonly chat?: boolean;
+  readonly participants?: boolean;
+  readonly admission?: boolean;
+  readonly screenShare?: boolean;
+  readonly whiteboard?: boolean;
+  readonly reactions?: boolean;
+  readonly handRaise?: boolean;
+  readonly info?: boolean;
+  readonly settings?: boolean;
+};
+
+export const CHALK_THEME_TOKENS = DEFAULT_CHALK_THEME_TOKENS;
+
+export type ChalkThemeTokens = {
+  readonly [Token in keyof typeof CHALK_THEME_TOKENS]: string;
+};
+
+export type ChalkTheme = {
+  readonly colorScheme?: "dark" | "light";
+  readonly palette?: ThemePalette;
+  readonly texture?: ThemeTexture;
+  readonly accent?: string;
+  readonly tokens?: Partial<ChalkThemeTokens>;
+};
+
+export type SpaceLayout = "grid" | "focus" | "presentation";
+
+type ChalkCallbacks = {
+  readonly onJoined?: () => void;
+  readonly onLeft?: () => void;
+  readonly onEpisodeEnded?: (event: ClientEventMap["episodeEnded"]) => void;
+  readonly onParticipantJoined?: (event: ClientEventMap["participantJoined"]) => void;
+  readonly onParticipantLeft?: (event: ClientEventMap["participantLeft"]) => void;
+  readonly onScreenShareStarted?: (event: ClientEventMap["screenShareStarted"]) => void;
+  readonly onScreenShareStopped?: (event: ClientEventMap["screenShareStopped"]) => void;
+  readonly onError?: (event: ClientEventMap["error"]) => void;
+};
+
+type ChalkCommonProps = ChalkCallbacks & {
+  readonly displayName?: string;
+  readonly entrance?: boolean;
+  readonly defaults?: EntranceDefaults;
+  readonly features?: ChalkFeatures;
+  readonly theme?: ChalkTheme;
+  /** Selects files; the SDK owns bounds, upload, and send sequencing. */
+  readonly pickChatFiles?: () => Promise<readonly ChatUploadFile[]>;
+  readonly logoUrl?: string;
+  readonly spaceName?: string;
+  readonly inviteLink?: string;
+  readonly layout?: SpaceLayout;
+  readonly onLayoutChange?: (layout: SpaceLayout) => void;
+};
+
+export type ChalkProps = ChalkCommonProps &
+  (
+    | {
+        readonly client: SpaceClient;
+        readonly space?: never;
+        readonly getAccess?: never;
+      }
+    | {
+        readonly client?: never;
+        readonly space: string;
+        readonly getAccess: GetAccess;
+      }
+  );
+
+export function Chalk(props: ChalkProps): React.JSX.Element {
+  const suppliedClient = props.client;
+  const space = props.space;
+  const getAccess = props.getAccess;
+  const getAccessRef = useRef(getAccess);
+  getAccessRef.current = getAccess;
+  const defaults = useRef(props.defaults).current;
+  const getLatestAccess = useCallback((...args: Parameters<GetAccess>): ReturnType<GetAccess> => {
+    const currentGetAccess = getAccessRef.current;
+    if (!currentGetAccess) throw new Error("Chalk requires getAccess when it creates the SpaceClient.");
+    return currentGetAccess(...args);
+  }, []);
+  const ownedClient = useMemo(
+    () =>
+      suppliedClient
+        ? null
+        : createNativeSpaceClient({
+            space: space!,
+            getAccess: getLatestAccess,
+            microphone: defaults?.microphone,
+            camera: defaults?.camera,
+          }),
+    [getLatestAccess, space, suppliedClient],
+  );
+  const client = suppliedClient ?? ownedClient!;
+
+  useEffect(() => {
+    if (!ownedClient) return;
+    return () => {
+      void ownedClient
+        .leave()
+        .catch(() => undefined)
+        .finally(() => ownedClient.dispose());
+    };
+  }, [ownedClient]);
+
+  return (
+    <NativeAppearanceProvider initialAppearance={{ palette: props.theme?.palette, texture: props.theme?.texture }}>
+      <AppearanceThemeBridge theme={props.theme}>
+        <ChalkProvider client={client}>
+          <SpaceExperience {...props} />
+        </ChalkProvider>
+      </AppearanceThemeBridge>
+    </NativeAppearanceProvider>
+  );
+}
+
+function AppearanceThemeBridge({ children, theme }: { readonly children: ReactNode; readonly theme?: ChalkTheme }): React.JSX.Element {
+  const { appearance } = useNativeAppearance();
+  return (
+    <NativeThemeProvider appearance={appearance} theme={theme}>
+      {children}
+    </NativeThemeProvider>
+  );
+}
+
+function SpaceExperience(props: ChalkProps): React.JSX.Element {
+  const client = useSpaceClient();
+  const connection = useConnection();
+  const previousStatus = useRef(connection.status);
+  const hasObservedStatus = useRef(false);
+  const hasBeenLive = useRef(connection.status === "live" || connection.status === "reconnecting");
+  const autoJoinAttempted = useRef(false);
+  const previousClient = useRef(client);
+  const [joinError, setJoinError] = useState<string | null>(null);
+
+  if (previousClient.current !== client) {
+    previousClient.current = client;
+    previousStatus.current = connection.status;
+    hasObservedStatus.current = false;
+    hasBeenLive.current = connection.status === "live" || connection.status === "reconnecting";
+    autoJoinAttempted.current = false;
+  }
+
+  const entrance = props.entrance ?? true;
+  const spaceName = props.spaceName ?? props.space ?? "Space";
+  const join = useCallback(
+    async (options: Parameters<SpaceClient["join"]>[0]) => {
+      try {
+        setJoinError(null);
+        await client.join(options);
+      } catch (cause) {
+        setJoinError(cause instanceof Error ? cause.message : "Could not enter this Space.");
+      }
+    },
+    [client],
+  );
+  const retryAutomaticJoin = useCallback(() => {
+    autoJoinAttempted.current = true;
+    void join(defaultJoinOptions(props));
+  }, [join, props]);
+
+  useEffect(() => {
+    setJoinError(null);
+  }, [client]);
+
+  useEffect(() => {
+    const subscriptions = [
+      props.onEpisodeEnded && client.on("episodeEnded", props.onEpisodeEnded),
+      props.onParticipantJoined && client.on("participantJoined", props.onParticipantJoined),
+      props.onParticipantLeft && client.on("participantLeft", props.onParticipantLeft),
+      props.onScreenShareStarted && client.on("screenShareStarted", props.onScreenShareStarted),
+      props.onScreenShareStopped && client.on("screenShareStopped", props.onScreenShareStopped),
+      props.onError && client.on("error", props.onError),
+    ].filter((unsubscribe): unsubscribe is () => void => Boolean(unsubscribe));
+    return () => subscriptions.forEach((unsubscribe) => unsubscribe());
+  }, [client, props.onEpisodeEnded, props.onError, props.onParticipantJoined, props.onParticipantLeft, props.onScreenShareStarted, props.onScreenShareStopped]);
+
+  useEffect(() => {
+    if (!entrance && connection.status === "idle" && !autoJoinAttempted.current) {
+      autoJoinAttempted.current = true;
+      void join(defaultJoinOptions(props));
+    }
+  }, [connection.status, entrance, join, props.defaults?.camera, props.defaults?.microphone, props.displayName]);
+
+  useEffect(() => {
+    const previous = previousStatus.current;
+    if (hasObservedStatus.current) {
+      if (connection.status === "live" && previous !== "live" && previous !== "reconnecting") props.onJoined?.();
+      if (connection.status === "left" && previous !== "left") props.onLeft?.();
+    }
+    previousStatus.current = connection.status;
+    hasObservedStatus.current = true;
+    if (connection.status === "live" || connection.status === "reconnecting") hasBeenLive.current = true;
+  }, [connection.status, props.onJoined, props.onLeft]);
+
+  if (connection.status === "idle" && entrance) {
+    return (
+      <AppearanceLayer>
+        <Entrance defaultDisplayName={props.displayName} defaults={props.defaults} error={joinError ?? undefined} logoUrl={props.logoUrl} onJoin={join} spaceName={spaceName} />
+      </AppearanceLayer>
+    );
+  }
+
+  if (connection.status === "idle") {
+    return (
+      <AppearanceLayer>
+        <SpaceStatus message={joinError ?? `Entering ${spaceName}…`} onRetry={joinError ? retryAutomaticJoin : undefined} />
+      </AppearanceLayer>
+    );
+  }
+
+  if (connection.status === "joining") {
+    if (!entrance)
+      return (
+        <AppearanceLayer>
+          <SpaceStatus message={`Entering ${spaceName}…`} />
+        </AppearanceLayer>
+      );
+    return (
+      <AppearanceLayer>
+        <Entrance defaultDisplayName={props.displayName} defaults={props.defaults} joining logoUrl={props.logoUrl} onJoin={join} spaceName={spaceName} />
+      </AppearanceLayer>
+    );
+  }
+
+  if (connection.status === "failed") {
+    if (!hasBeenLive.current && entrance) {
+      return (
+        <AppearanceLayer>
+          <Entrance defaultDisplayName={props.displayName} defaults={props.defaults} error={connection.lastError?.message ?? "Unable to enter this Space."} logoUrl={props.logoUrl} onJoin={join} spaceName={spaceName} />
+        </AppearanceLayer>
+      );
+    }
+    return (
+      <AppearanceLayer>
+        <SpaceStatus message={connection.lastError?.message ?? "This Space is unavailable."} onRetry={() => void join(defaultJoinOptions(props))} />
+      </AppearanceLayer>
+    );
+  }
+
+  if (connection.status === "leaving")
+    return (
+      <AppearanceLayer>
+        <SpaceStatus message={`Leaving ${spaceName}…`} />
+      </AppearanceLayer>
+    );
+  if (connection.status === "left")
+    return (
+      <AppearanceLayer>
+        <SpaceStatus message="You have left this Space." onRetry={() => void join(defaultJoinOptions(props))} />
+      </AppearanceLayer>
+    );
+
+  return <NativeSpaceView features={props.features} inviteLink={props.inviteLink} layout={props.layout} logoUrl={props.logoUrl} onLayoutChange={props.onLayoutChange} pickChatFiles={props.pickChatFiles} reconnecting={connection.status === "reconnecting"} spaceName={spaceName} />;
+}
+
+function defaultJoinOptions(props: ChalkProps): Parameters<SpaceClient["join"]>[0] {
+  const displayName = props.displayName?.trim();
+  return {
+    ...(displayName ? { displayName } : {}),
+    microphone: props.defaults?.microphone ?? true,
+    camera: props.defaults?.camera ?? true,
+  };
+}
+
+type NativeSpaceViewProps = {
+  readonly features?: ChalkFeatures;
+  readonly inviteLink?: string;
+  readonly layout?: SpaceLayout;
+  readonly logoUrl?: string;
+  readonly onLayoutChange?: (layout: SpaceLayout) => void;
+  readonly pickChatFiles?: () => Promise<readonly ChatUploadFile[]>;
+  readonly reconnecting: boolean;
+  readonly spaceName: string;
+};
+
+function NativeSpaceView({ features, inviteLink, layout, logoUrl, onLayoutChange, pickChatFiles, reconnecting, spaceName }: NativeSpaceViewProps): React.JSX.Element {
+  const client = useSpaceClient();
+  const theme = useNativeTheme();
+
+  return (
+    <View style={[styles.space, { backgroundColor: theme.colors.background }]}>
+      <SpaceView features={features} inviteLink={inviteLink} layout={layout} logoUrl={logoUrl} onEndEpisode={() => client.endEpisode()} onLayoutChange={onLayoutChange} onLeave={() => client.leave()} pickChatFiles={pickChatFiles} reconnecting={reconnecting} spaceName={spaceName} />
+      <NativeTextureOverlay />
+    </View>
+  );
+}
+
+function AppearanceLayer({ children }: { readonly children: ReactNode }): React.JSX.Element {
+  const theme = useNativeTheme();
+  return (
+    <View style={[styles.appearanceLayer, { backgroundColor: theme.colors.background }]}>
+      {children}
+      <NativeTextureOverlay />
+    </View>
+  );
+}
+
+function SpaceStatus({ message, onRetry }: { readonly message: string; readonly onRetry?: () => void }): React.JSX.Element {
+  const theme = useNativeTheme();
+  return (
+    <View accessibilityLiveRegion="polite" style={[styles.status, { backgroundColor: theme.colors.background }]}>
+      <Text style={[styles.statusText, { color: theme.colors.foreground }]}>{message}</Text>
+      {onRetry ? (
+        <Pressable accessibilityRole="button" onPress={onRetry} style={[styles.retry, { backgroundColor: theme.colors.primary }]}>
+          <Text style={[styles.retryText, { color: theme.colors.primaryForeground }]}>Try again</Text>
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  space: { flex: 1 },
+  appearanceLayer: { flex: 1 },
+  status: { flex: 1, alignItems: "center", justifyContent: "center", gap: 16, padding: 24 },
+  statusText: { fontSize: 16, textAlign: "center" },
+  retry: { borderRadius: 12, paddingHorizontal: 18, paddingVertical: 12 },
+  retryText: { fontWeight: "800" },
+});

package/src/components/ChatMessageList.tsx

@@ -0,0 +1,209 @@
+import type { NativeChatMessage as ChatMessage } from "../ui/native-types";
+import { useCallback, useRef } from "react";
+import { type LayoutChangeEvent, type NativeScrollEvent, type NativeSyntheticEvent, ScrollView, StyleSheet, Text, type StyleProp, View, type ViewStyle } from "react-native";
+import { Theme } from "../ui/theme";
+import { formatChatAttachmentSize, isLatestChatMessageVisible, type NativeChatViewport } from "./native-chat";
+
+export interface ChatMessageListProps {
+  readonly messages: readonly ChatMessage[];
+  readonly localParticipantId: string | null;
+  readonly onLatestMessageVisible: (sequence: string) => void;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly contentContainerStyle?: StyleProp<ViewStyle>;
+}
+
+export function ChatMessageList({ messages, localParticipantId, onLatestMessageVisible, style, contentContainerStyle }: ChatMessageListProps): React.JSX.Element {
+  const latestSequence = messages.at(-1)?.sequence ?? null;
+  const viewport = useRef<NativeChatViewport>({ contentHeight: 0, viewportHeight: 0, scrollOffset: 0 });
+  const renderedSequence = useRef<string | null>(null);
+  const measuredSequence = useRef<string | null>(null);
+  const reportedSequence = useRef<string | null>(null);
+
+  if (renderedSequence.current !== latestSequence) {
+    renderedSequence.current = latestSequence;
+    measuredSequence.current = null;
+  }
+
+  const reportLatestIfVisible = useCallback(() => {
+    if (!latestSequence || measuredSequence.current !== latestSequence || reportedSequence.current === latestSequence) return;
+    if (!isLatestChatMessageVisible(viewport.current)) return;
+    reportedSequence.current = latestSequence;
+    onLatestMessageVisible(latestSequence);
+  }, [latestSequence, onLatestMessageVisible]);
+
+  const handleLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      viewport.current = { ...viewport.current, viewportHeight: event.nativeEvent.layout.height };
+      reportLatestIfVisible();
+    },
+    [reportLatestIfVisible],
+  );
+
+  const handleContentSizeChange = useCallback(
+    (_width: number, height: number) => {
+      viewport.current = { ...viewport.current, contentHeight: height };
+      measuredSequence.current = latestSequence;
+      reportLatestIfVisible();
+    },
+    [latestSequence, reportLatestIfVisible],
+  );
+
+  const handleScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
+      viewport.current = {
+        contentHeight: contentSize.height,
+        viewportHeight: layoutMeasurement.height,
+        scrollOffset: contentOffset.y,
+      };
+      measuredSequence.current = latestSequence;
+      reportLatestIfVisible();
+    },
+    [latestSequence, reportLatestIfVisible],
+  );
+
+  return (
+    <ScrollView accessibilityLabel="Chat messages" contentContainerStyle={[styles.content, contentContainerStyle]} onContentSizeChange={handleContentSizeChange} onLayout={handleLayout} onScroll={handleScroll} scrollEventThrottle={16} showsVerticalScrollIndicator={false} style={style}>
+      {messages.length === 0 ? (
+        <View style={styles.emptyState}>
+          <Text style={styles.emptyTitle}>No messages yet.</Text>
+          <Text style={styles.emptyText}>Send a message to start the conversation.</Text>
+        </View>
+      ) : null}
+      {messages.map((message) => {
+        const isLocal = message.senderId === localParticipantId;
+        const readByNames = message.readBy.map((receipt) => receipt.displayName);
+        const status = readByNames.length > 0 ? `Read by ${readByNames.join(", ")}` : "Sent";
+
+        return (
+          <View key={message.id} style={[styles.messageGroup, isLocal && styles.localMessageGroup]}>
+            {!isLocal ? <Text style={styles.sender}>{message.senderName}</Text> : null}
+            <View style={[styles.bubble, isLocal ? styles.localBubble : styles.remoteBubble]}>
+              {message.content ? <Text style={styles.messageText}>{message.content}</Text> : null}
+              {message.attachments.map((attachment) => {
+                const isImage = attachment.mimeType.startsWith("image/");
+                return (
+                  <View accessibilityLabel={`${isImage ? "Image" : "File"} attachment ${attachment.fileName}, ${formatChatAttachmentSize(attachment.byteLength)}`} key={attachment.attachmentId} style={styles.attachment}>
+                    <Text style={styles.attachmentKind}>{isImage ? "IMAGE" : "FILE"}</Text>
+                    <View style={styles.attachmentMetadata}>
+                      <Text numberOfLines={1} style={styles.attachmentName}>
+                        {attachment.fileName}
+                      </Text>
+                      <Text style={styles.attachmentDetails}>
+                        {formatChatAttachmentSize(attachment.byteLength)} · {attachment.mimeType}
+                      </Text>
+                    </View>
+                  </View>
+                );
+              })}
+            </View>
+            {isLocal ? (
+              <Text accessibilityLabel={status} numberOfLines={1} style={[styles.status, readByNames.length > 0 && styles.readStatus]}>
+                {status}
+              </Text>
+            ) : null}
+          </View>
+        );
+      })}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  content: {
+    gap: 12,
+  },
+  emptyState: {
+    flex: 1,
+    minHeight: 160,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 24,
+  },
+  emptyTitle: {
+    color: Theme.colors.onDark,
+    fontSize: 15,
+    fontWeight: "700",
+  },
+  emptyText: {
+    color: Theme.colors.mutedForeground,
+    fontSize: 12,
+    marginTop: 6,
+    textAlign: "center",
+  },
+  messageGroup: {
+    alignSelf: "flex-start",
+    gap: 5,
+    maxWidth: "85%",
+  },
+  localMessageGroup: {
+    alignSelf: "flex-end",
+    alignItems: "flex-end",
+  },
+  sender: {
+    color: Theme.colors.mutedForeground,
+    fontSize: 11,
+    fontWeight: "700",
+    paddingHorizontal: 4,
+  },
+  bubble: {
+    borderRadius: 18,
+    maxWidth: "100%",
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+  },
+  localBubble: {
+    backgroundColor: Theme.colors.primary,
+    borderBottomRightRadius: 6,
+  },
+  remoteBubble: {
+    backgroundColor: Theme.colors.whiteOverlay06,
+    borderBottomLeftRadius: 6,
+  },
+  messageText: {
+    color: Theme.colors.onDark,
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  attachment: {
+    alignItems: "center",
+    backgroundColor: Theme.colors.darkOverlay16,
+    borderColor: Theme.colors.whiteOverlay16,
+    borderRadius: 10,
+    borderWidth: 1,
+    flexDirection: "row",
+    gap: 10,
+    marginTop: 8,
+    minWidth: 190,
+    padding: 10,
+  },
+  attachmentKind: {
+    color: Theme.colors.whiteOverlay72,
+    fontSize: 9,
+    fontWeight: "800",
+    letterSpacing: 0.6,
+  },
+  attachmentMetadata: {
+    flex: 1,
+    minWidth: 0,
+  },
+  attachmentName: {
+    color: Theme.colors.onDark,
+    fontSize: 13,
+    fontWeight: "700",
+  },
+  attachmentDetails: {
+    color: Theme.colors.whiteOverlay68,
+    fontSize: 10,
+    marginTop: 2,
+  },
+  status: {
+    color: Theme.colors.mutedForeground,
+    fontSize: 10,
+    maxWidth: 240,
+    paddingHorizontal: 4,
+  },
+  readStatus: {
+    color: Theme.colors.primary,
+  },
+});

package/src/components/EmbeddedWhiteboard.test.tsx

@@ -0,0 +1,92 @@
+import { describe, expect, it, vi } from "vitest";
+
+const nativeTheme = vi.hoisted(() => ({
+  colorScheme: "light" as const,
+  colors: {
+    dangerSurfaceOverlay94: "#danger",
+    info: "#info",
+    lightMutedText: "#muted",
+    lightSubtleText: "#subtle",
+    lightSurface: "#surface",
+    lightText: "#text",
+    onDark: "#on-dark",
+  },
+}));
+const controllerOptions = vi.hoisted(() => [] as unknown[]);
+
+vi.mock("react", () => ({
+  useCallback: <T,>(callback: T) => callback,
+  useEffect: (effect: () => void) => effect(),
+  useMemo: <T,>(factory: () => T) => factory(),
+  useRef: <T,>(current: T) => ({ current }),
+  useState: <T,>(initial: T | (() => T)): readonly [T, () => void] => [typeof initial === "function" ? (initial as () => T)() : initial, () => undefined],
+}));
+vi.mock("@q9labsai/chalk-whiteboard/embedded", () => ({
+  ChalkWhiteboardController: class {
+    constructor(options: unknown) {
+      controllerOptions.push(options);
+    }
+
+    rendererReloaded(): void {}
+
+    setCapabilities(): void {}
+
+    setViewport(): void {}
+
+    start(): void {}
+
+    stop(): void {}
+  },
+}));
+vi.mock("react-native", () => ({
+  ActivityIndicator: "ActivityIndicator",
+  Pressable: "Pressable",
+  StyleSheet: { create: <Styles,>(styles: Styles) => styles },
+  Text: "Text",
+  View: "View",
+  useWindowDimensions: () => ({ width: 320, height: 640, scale: 2 }),
+}));
+vi.mock("react-native-webview", () => ({ default: "WebView" }));
+vi.mock("../ui/native-theme", () => ({ useNativeTheme: () => nativeTheme }));
+vi.mock("../whiteboard/embedded-whiteboard-assets", () => ({
+  isEmbeddedWhiteboardNavigationAllowed: () => true,
+  rendererURLWithContext: (url: string) => url,
+  resolveEmbeddedWhiteboardRendererURL: async () => "file:///android_asset/chalk-whiteboard/index.html",
+}));
+
+import type { ChalkEmbeddedWhiteboardTransport } from "@q9labsai/chalk-whiteboard/embedded";
+import { EmbeddedWhiteboard, embeddedWhiteboardWebViewSecurityPolicy } from "./EmbeddedWhiteboard";
+
+describe("EmbeddedWhiteboard WebView policy", () => {
+  it("keeps the offline renderer isolated from files, networks, storage, and cookies", () => {
+    expect(embeddedWhiteboardWebViewSecurityPolicy).toEqual({
+      allowFileAccess: true,
+      allowFileAccessFromFileURLs: false,
+      allowUniversalAccessFromFileURLs: false,
+      cacheEnabled: false,
+      domStorageEnabled: false,
+      javaScriptCanOpenWindowsAutomatically: false,
+      javaScriptEnabled: true,
+      mixedContentMode: "never",
+      setSupportMultipleWindows: false,
+      sharedCookiesEnabled: false,
+      thirdPartyCookiesEnabled: false,
+    });
+  });
+
+  it("uses the active NativeTheme colors throughout its loading surface", () => {
+    controllerOptions.length = 0;
+    const rendered = EmbeddedWhiteboard({
+      canClear: false,
+      canDraw: true,
+      journeyId: "journey-test",
+      transport: {} as ChalkEmbeddedWhiteboardTransport,
+    });
+    const children = rendered.props.children as readonly [{ readonly props: { readonly color: string } }, { readonly props: { readonly style: readonly unknown[] } }];
+
+    expect(rendered.props.style).toContainEqual({ backgroundColor: "#surface" });
+    expect(children[0]?.props.color).toBe("#info");
+    expect(children[1]?.props.style).toContainEqual({ color: "#muted" });
+    expect(controllerOptions[0]).toMatchObject({ theme: "light" });
+  });
+});