@q9labsai/chalk-react-native 4.1.17 → 5.0.1

package/src/components/native-space-view/SpaceStage.android.tsx

@@ -1,372 +0,0 @@
-import type { Layout } from "../../ui/native-types";
-import ComputerScreenShareIcon from "@hugeicons/core-free-icons/dist/esm/ComputerScreenShareIcon";
-import MicOff01Icon from "@hugeicons/core-free-icons/dist/esm/MicOff01Icon";
-import Presentation01Icon from "@hugeicons/core-free-icons/dist/esm/Presentation01Icon";
-import WavingHand01Icon from "@hugeicons/core-free-icons/dist/esm/WavingHand01Icon";
-import { HugeiconsIcon } from "@hugeicons/react-native";
-import { FlatList, StyleSheet, Text, View } from "react-native";
-import type { SpacePrimaryContent } from "../../utils/native-space-layout";
-import { Theme } from "../../ui/theme";
-import { useNativeTheme } from "../../ui/native-theme";
-import { GradientSurface } from "../GradientSurface";
-import { MediaView } from "../MediaView";
-import type { SpaceParticipant } from "./types";
-
-export interface SpaceStageProps {
-  layoutMode: Layout;
-  isCompactViewport: boolean;
-  primaryContent: SpacePrimaryContent;
-  screenSharer: SpaceParticipant | null;
-  screenShareTrack: MediaStreamTrack | null;
-  stripParticipants: readonly SpaceParticipant[];
-  selfName: string;
-  isMuted: boolean;
-  handRaised: boolean;
-  raisedHandCount: number;
-  activeReactions: readonly { id: string; emoji: string; participantName: string }[];
-  whiteboard: {
-    isOpen: boolean;
-    canDraw: boolean;
-    elementCount: number;
-    participantCount: number;
-  };
-}
-
-function getParticipantStripTrack(participant: SpaceParticipant): MediaStreamTrack | null {
-  return participant.videoTrack ?? null;
-}
-
-function StageSurface({ children }: { children: React.ReactNode }): React.JSX.Element {
-  const theme = useNativeTheme();
-  return <View style={[styles.surface, { backgroundColor: theme.colors.stageBackground }]}>{children}</View>;
-}
-
-function InfoChip({ icon, label, align = "left" }: { icon: React.ComponentProps<typeof HugeiconsIcon>["icon"]; label: string; align?: "left" | "right" }): React.JSX.Element {
-  const theme = useNativeTheme();
-  return (
-    <View style={[styles.infoChip, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }, align === "right" ? styles.infoChipRight : styles.infoChipLeft]}>
-      <HugeiconsIcon color={theme.colors.foreground} icon={icon} size={14} />
-      <Text style={[styles.infoChipText, { color: theme.colors.foreground }]}>{label}</Text>
-    </View>
-  );
-}
-
-function NativeWhiteboardPlaceholder({ whiteboard }: Pick<SpaceStageProps, "whiteboard">): React.JSX.Element {
-  return (
-    <StageSurface>
-      <GradientSurface angle="diagonal" borderRadius={24} opacity={0.6} participantId="whiteboard-stage" />
-      <View style={styles.placeholderCenter}>
-        <View style={styles.presentingIconCircle}>
-          <HugeiconsIcon color={Theme.colors.primary} icon={Presentation01Icon} size={32} />
-        </View>
-        <Text style={styles.placeholderEyebrow}>SHARED CANVAS</Text>
-        <Text style={styles.placeholderTitle}>Whiteboard active</Text>
-        <Text style={styles.placeholderCopy}>{whiteboard.canDraw ? "Collaborative board is open." : "Board is open in view-only mode."}</Text>
-      </View>
-    </StageSurface>
-  );
-}
-
-function NativeLocalSharePlaceholder(): React.JSX.Element {
-  return (
-    <StageSurface>
-      <GradientSurface angle="diagonal" borderRadius={24} opacity={0.4} participantId="local-presenting" />
-      <View style={styles.placeholderCenter}>
-        <View style={styles.presentingIconCircle}>
-          <HugeiconsIcon color={Theme.colors.primary} icon={ComputerScreenShareIcon} size={32} />
-        </View>
-        <Text style={styles.placeholderEyebrow}>YOU ARE PRESENTING</Text>
-        <Text style={styles.placeholderTitle}>Screen sharing active</Text>
-        <Text style={styles.placeholderCopy}>Your preview is hidden here to prevent an infinite mirror effect. Everyone else can see your screen.</Text>
-      </View>
-    </StageSurface>
-  );
-}
-
-function NativeParticipantStrip({ participants, vertical }: { participants: readonly SpaceParticipant[]; vertical: boolean }): React.JSX.Element {
-  return (
-    <FlatList
-      contentContainerStyle={[styles.stripContent, vertical ? styles.stripVertical : styles.stripHorizontal]}
-      data={participants}
-      horizontal={!vertical}
-      initialNumToRender={vertical ? 4 : 5}
-      keyExtractor={(participant, index) => `${participant.id}-${index}`}
-      maxToRenderPerBatch={vertical ? 5 : 6}
-      removeClippedSubviews
-      renderItem={({ item: participant }) => (
-        <View style={[styles.stripTile, vertical ? styles.stripTileVertical : styles.stripTileHorizontal]}>
-          <MediaView emphasizeMuted participant={participant} track={getParticipantStripTrack(participant)} />
-        </View>
-      )}
-      showsHorizontalScrollIndicator={false}
-      showsVerticalScrollIndicator={false}
-      windowSize={4}
-    />
-  );
-}
-
-export function SpaceStageAndroid({ layoutMode, isCompactViewport, primaryContent, screenSharer, screenShareTrack, stripParticipants, selfName, isMuted, handRaised, raisedHandCount, activeReactions, whiteboard }: SpaceStageProps): React.JSX.Element {
-  const theme = useNativeTheme();
-  const verticalStrip = !isCompactViewport && layoutMode === "focus";
-
-  let primaryStage: React.JSX.Element;
-  if (primaryContent === "whiteboard") {
-    primaryStage = <NativeWhiteboardPlaceholder whiteboard={whiteboard} />;
-  } else if (primaryContent === "screen-share-placeholder") {
-    primaryStage = <NativeLocalSharePlaceholder />;
-  } else if (primaryContent === "split") {
-    primaryStage = (
-      <View style={styles.splitStage}>
-        <View style={styles.splitPanel}>
-          <StageSurface>
-            <MediaView participant={screenSharer} track={screenShareTrack} objectFit="contain" />
-          </StageSurface>
-        </View>
-        <View style={styles.splitPanel}>
-          <NativeWhiteboardPlaceholder whiteboard={whiteboard} />
-        </View>
-      </View>
-    );
-  } else {
-    primaryStage = (
-      <StageSurface>
-        <MediaView participant={screenSharer} track={screenShareTrack} label={screenSharer?.displayName || "Participant"} objectFit="contain" />
-      </StageSurface>
-    );
-  }
-
-  return (
-    <View style={[styles.container, { backgroundColor: theme.colors.darkCanvas }, verticalStrip && styles.containerVertical]}>
-      <View style={styles.primaryFrame}>
-        {primaryStage}
-
-        {raisedHandCount > 0 ? <InfoChip icon={WavingHand01Icon} label={raisedHandCount === 1 ? "1 hand raised" : `${raisedHandCount} hands raised`} /> : null}
-
-        {activeReactions.length > 0 ? (
-          <View style={styles.reactionRail}>
-            {activeReactions.map((reaction, index) => (
-              <View key={`${reaction.id}-${index}`} style={[styles.reactionBubble, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }]}>
-                <Text style={styles.reactionEmoji}>{reaction.emoji}</Text>
-                <Text numberOfLines={1} style={[styles.reactionName, { color: theme.colors.foreground }]}>
-                  {reaction.participantName}
-                </Text>
-              </View>
-            ))}
-          </View>
-        ) : null}
-
-        <View style={[styles.identityBar, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }]}>
-          <Text style={[styles.nameLabel, { color: theme.colors.foreground }]} numberOfLines={1}>
-            {selfName}
-          </Text>
-          {isMuted ? (
-            <View style={styles.muteIndicator}>
-              <HugeiconsIcon color={theme.colors.primaryForeground} icon={MicOff01Icon} size={10} />
-            </View>
-          ) : null}
-          {handRaised ? (
-            <View style={styles.handIndicator}>
-              <HugeiconsIcon color={theme.colors.primaryForeground} icon={WavingHand01Icon} size={10} />
-            </View>
-          ) : null}
-        </View>
-      </View>
-
-      {stripParticipants.length > 0 ? (
-        <View style={[styles.stripShell, verticalStrip ? styles.stripShellVertical : styles.stripShellHorizontal]}>
-          <NativeParticipantStrip participants={stripParticipants} vertical={verticalStrip} />
-        </View>
-      ) : null}
-    </View>
-  );
-}
-
-export { SpaceStageAndroid as SpaceStage };
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    width: "100%",
-    paddingHorizontal: 12,
-  },
-  containerVertical: {
-    flexDirection: "row",
-  },
-  primaryFrame: {
-    flex: 1,
-    minHeight: 0,
-    width: "100%",
-    marginBottom: 12,
-  },
-  surface: {
-    flex: 1,
-    backgroundColor: Theme.colors.stageBackground,
-    width: "100%",
-    borderRadius: 24,
-    overflow: "hidden",
-  },
-  splitStage: {
-    flex: 1,
-    flexDirection: "row",
-    gap: 10,
-  },
-  splitPanel: {
-    flex: 1,
-  },
-  placeholderCenter: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    paddingHorizontal: Theme.spacing["3xl"],
-    gap: 12,
-  },
-  presentingIconCircle: {
-    width: 80,
-    height: 80,
-    borderRadius: 40,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: Theme.colors.whiteOverlay06,
-    borderWidth: 1,
-    borderColor: Theme.colors.whiteOverlay12,
-    marginBottom: 8,
-  },
-  placeholderEyebrow: {
-    fontSize: 11,
-    fontWeight: "800",
-    color: Theme.colors.primary,
-    letterSpacing: 1,
-  },
-  placeholderTitle: {
-    fontSize: 22,
-    fontWeight: "800",
-    color: Theme.colors.onDark,
-    textAlign: "center",
-    letterSpacing: -0.5,
-  },
-  placeholderCopy: {
-    fontSize: 14,
-    color: Theme.colors.whiteOverlay50,
-    textAlign: "center",
-    lineHeight: 20,
-    paddingHorizontal: 20,
-  },
-  infoChip: {
-    position: "absolute",
-    top: 20,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 5,
-    backgroundColor: Theme.colors.darkOverlay50,
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    borderRadius: 999,
-    borderWidth: 1,
-    borderColor: Theme.colors.whiteOverlay06,
-  },
-  infoChipLeft: {
-    left: 20,
-  },
-  infoChipRight: {
-    right: 20,
-  },
-  infoChipText: {
-    color: Theme.colors.onDark,
-    fontSize: 12,
-    fontWeight: "700",
-  },
-  reactionRail: {
-    position: "absolute",
-    right: 16,
-    bottom: 24,
-    gap: 8,
-    maxWidth: 180,
-  },
-  reactionBubble: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    backgroundColor: Theme.colors.darkOverlay45,
-    borderRadius: 999,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderWidth: 1,
-    borderColor: Theme.colors.whiteOverlay08,
-  },
-  reactionEmoji: {
-    fontSize: 16,
-  },
-  reactionName: {
-    flex: 1,
-    color: Theme.colors.onDark,
-    fontSize: 12,
-    fontWeight: "700",
-  },
-  identityBar: {
-    position: "absolute",
-    left: 20,
-    bottom: 20,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    backgroundColor: Theme.colors.darkOverlay50,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 999,
-    borderWidth: 1,
-    borderColor: Theme.colors.whiteOverlay06,
-    maxWidth: "70%",
-  },
-  nameLabel: {
-    color: Theme.colors.onDark,
-    fontSize: 12,
-    fontWeight: "700",
-  },
-  muteIndicator: {
-    width: 18,
-    height: 18,
-    borderRadius: 9,
-    backgroundColor: Theme.colors.dangerStrong,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  handIndicator: {
-    width: 18,
-    height: 18,
-    borderRadius: 9,
-    backgroundColor: Theme.colors.warning,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  stripShell: {
-    minHeight: 96,
-  },
-  stripShellHorizontal: {
-    height: 110,
-  },
-  stripShellVertical: {
-    width: 110,
-    marginLeft: 12,
-  },
-  stripContent: {
-    gap: 10,
-  },
-  stripHorizontal: {
-    paddingBottom: 8,
-  },
-  stripVertical: {
-    paddingRight: 8,
-  },
-  stripTile: {
-    overflow: "hidden",
-    borderRadius: 18,
-  },
-  stripTileHorizontal: {
-    width: 132,
-    height: 100,
-  },
-  stripTileVertical: {
-    width: 100,
-    height: 132,
-  },
-});

package/src/components/native-space-view/SpaceSurfacePrimitives.tsx

@@ -1,75 +0,0 @@
-import { HugeiconsIcon } from "@hugeicons/react-native";
-import { Pressable, StyleSheet, Text, View, type StyleProp, type ViewStyle } from "react-native";
-
-import { getParticipantColor, getParticipantInitials } from "../../ui/participant-avatar";
-import { Theme } from "../../ui/theme";
-
-export type SpaceIcon = React.ComponentProps<typeof HugeiconsIcon>["icon"];
-
-export function SheetGrip(): React.JSX.Element {
-  return <View accessibilityElementsHidden style={styles.grip} />;
-}
-
-export function CloseButton({ label, onPress }: { readonly label: string; readonly onPress: () => void }): React.JSX.Element {
-  return (
-    <Pressable accessibilityLabel={label} accessibilityRole="button" hitSlop={6} onPress={onPress} style={({ pressed }) => [styles.closeButton, pressed && styles.pressed]}>
-      <Text style={styles.closeGlyph}>×</Text>
-    </Pressable>
-  );
-}
-
-export function SurfaceHeader({ title, count, subtitle, onClose, closeLabel }: { readonly title: string; readonly count?: number; readonly subtitle?: string; readonly onClose: () => void; readonly closeLabel: string }): React.JSX.Element {
-  return (
-    <View style={styles.header}>
-      <View style={styles.headerCopy}>
-        <View style={styles.titleRow}>
-          <Text style={styles.title}>{title}</Text>
-          {count !== undefined ? (
-            <View style={styles.countPill}>
-              <Text style={styles.countText}>{count}</Text>
-            </View>
-          ) : null}
-        </View>
-        {subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : null}
-      </View>
-      <CloseButton label={closeLabel} onPress={onClose} />
-    </View>
-  );
-}
-
-export function InitialsAvatar({ name, size = 52, style }: { readonly name: string; readonly size?: number; readonly style?: StyleProp<ViewStyle> }): React.JSX.Element {
-  const color = getParticipantColor(name);
-  return (
-    <View style={[styles.avatar, { backgroundColor: color.primary, borderRadius: size / 2, height: size, width: size }, style]}>
-      <Text allowFontScaling={false} style={[styles.avatarText, { fontSize: Math.max(16, Math.round(size * 0.34)) }]}>
-        {getParticipantInitials(name)}
-      </Text>
-    </View>
-  );
-}
-
-export function IconTile({ icon, symbol, color = Theme.colors.ink, wash = Theme.colors.surface }: { readonly icon?: SpaceIcon; readonly symbol?: string; readonly color?: string; readonly wash?: string }): React.JSX.Element {
-  return <View style={[styles.iconTile, { backgroundColor: wash }]}>{icon ? <HugeiconsIcon color={color} icon={icon} size={22} /> : <Text style={[styles.symbol, { color }]}>{symbol}</Text>}</View>;
-}
-
-export function PressedStyle({ pressed }: { readonly pressed: boolean }): StyleProp<ViewStyle> {
-  return pressed ? styles.pressed : undefined;
-}
-
-const styles = StyleSheet.create({
-  grip: { alignSelf: "center", backgroundColor: Theme.colors.lineStrong, borderRadius: Theme.radius.full, height: 5, marginTop: Theme.spacing.sm, width: 48 },
-  closeButton: { alignItems: "center", borderColor: Theme.colors.line, borderRadius: Theme.radius.full, borderWidth: 1, height: 46, justifyContent: "center", width: 46 },
-  closeGlyph: { color: Theme.colors.ink, fontSize: 28, fontWeight: "400", lineHeight: 30 },
-  header: { alignItems: "center", borderBottomColor: Theme.colors.line, borderBottomWidth: 1, flexDirection: "row", justifyContent: "space-between", minHeight: 88, paddingHorizontal: Theme.spacing.lg, paddingVertical: Theme.spacing.md },
-  headerCopy: { flex: 1, minWidth: 0, paddingRight: Theme.spacing.md },
-  titleRow: { alignItems: "center", flexDirection: "row", gap: Theme.spacing.sm },
-  title: { ...Theme.typography.heading, color: Theme.colors.ink },
-  subtitle: { ...Theme.typography.meta, color: Theme.colors.ink2, marginTop: 2 },
-  countPill: { alignItems: "center", backgroundColor: Theme.colors.paper2, borderRadius: Theme.radius.sm, justifyContent: "center", minHeight: 32, minWidth: 36, paddingHorizontal: Theme.spacing.sm },
-  countText: { ...Theme.typography.label, color: Theme.colors.ink },
-  avatar: { alignItems: "center", justifyContent: "center", overflow: "hidden" },
-  avatarText: { color: Theme.colors.surface, fontWeight: "500", includeFontPadding: false, textAlign: "center" },
-  iconTile: { alignItems: "center", borderColor: Theme.colors.line, borderRadius: Theme.radius.md, borderWidth: 1, height: 44, justifyContent: "center", width: 44 },
-  symbol: { fontSize: 24, fontWeight: "500", includeFontPadding: false },
-  pressed: { opacity: 0.72, transform: [{ scale: 0.98 }] },
-});

package/src/components/native-space-view/SpaceTopBar.android.tsx

@@ -1,113 +0,0 @@
-import type { Recording } from "@q9labsai/chalk-client";
-import UserGroupIcon from "@hugeicons/core-free-icons/dist/esm/UserGroupIcon";
-import { HugeiconsIcon } from "@hugeicons/react-native";
-import { Image, Platform, StyleSheet, Text, View } from "react-native";
-import { Theme } from "../../ui/theme";
-import { useNativeTheme } from "../../ui/native-theme";
-import { Logo } from "../logo/Logo";
-
-export interface SpaceTopBarProps {
-  spaceName: string;
-  participantCount: number;
-  formattedDuration: string;
-  logoUrl?: string;
-  recording?: Recording | null;
-}
-
-export function SpaceTopBarAndroid({ spaceName, participantCount, formattedDuration, logoUrl, recording }: SpaceTopBarProps): React.JSX.Element {
-  const theme = useNativeTheme();
-  return (
-    <View style={[styles.topBar, { backgroundColor: theme.colors.darkCanvas, borderColor: theme.colors.border }]}>
-      <View style={styles.topBarLeft}>
-        {logoUrl ? <Image accessibilityLabel="Chalk" source={{ uri: logoUrl }} style={styles.logo} /> : <Logo height={24} variant="mark" />}
-        <View style={[styles.connectionDot, { backgroundColor: theme.colors.success }]} />
-        <Text style={[styles.topBarSpaceName, { color: theme.colors.foreground }]} numberOfLines={1}>
-          {spaceName}
-        </Text>
-        <View style={[styles.timerBadge, { backgroundColor: theme.colors.surface }]}>
-          <Text style={[styles.timerText, { color: theme.colors.mutedForeground }]}>{formattedDuration}</Text>
-        </View>
-      </View>
-      {recording && recording.status !== "stopped" ? (
-        <Text accessibilityLiveRegion="polite" style={[styles.timerText, { color: theme.colors.error }]}>
-          {recordingLabels[recording.status]}
-        </Text>
-      ) : null}
-      <View style={[styles.topBarRight, { backgroundColor: theme.colors.surface }]}>
-        <HugeiconsIcon icon={UserGroupIcon} size={14} color={theme.colors.foreground} />
-        <Text style={[styles.topBarCount, { color: theme.colors.foreground }]}>{participantCount}</Text>
-      </View>
-    </View>
-  );
-}
-
-const recordingLabels = {
-  starting: "Starting recording…",
-  recording: "Recording",
-  stopping: "Stopping recording…",
-  stopped: "Recording stopped",
-  failed: "Recording failed",
-};
-
-export { SpaceTopBarAndroid as SpaceTopBar };
-
-const styles = StyleSheet.create({
-  topBar: {
-    paddingTop: Platform.OS === "ios" ? 54 : 42,
-    paddingBottom: 14,
-    paddingHorizontal: 24,
-    backgroundColor: Theme.colors.darkCanvas,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    borderBottomWidth: 1,
-    borderColor: Theme.colors.whiteOverlay06,
-    width: "100%",
-  },
-  topBarLeft: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10,
-    flex: 1,
-  },
-  logo: { width: 24, height: 24, borderRadius: 6 },
-  connectionDot: {
-    width: 6,
-    height: 6,
-    borderRadius: 3,
-    backgroundColor: Theme.colors.success,
-  },
-  topBarSpaceName: {
-    color: Theme.colors.onDark,
-    fontSize: 14,
-    fontWeight: "800",
-    letterSpacing: -0.2,
-  },
-  timerBadge: {
-    backgroundColor: Theme.colors.whiteOverlay10,
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    borderRadius: 6,
-    marginLeft: 4,
-  },
-  timerText: {
-    color: Theme.colors.whiteOverlay60,
-    fontSize: 11,
-    fontWeight: "700",
-    fontVariant: ["tabular-nums"],
-  },
-  topBarRight: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    backgroundColor: Theme.colors.whiteOverlay08,
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 10,
-  },
-  topBarCount: {
-    color: Theme.colors.onDark,
-    fontSize: 12,
-    fontWeight: "800",
-  },
-});

package/src/components/native-space-view/SpaceWhiteboardSurface.tsx

@@ -1,69 +0,0 @@
-import { useCallback } from "react";
-import { StyleSheet } from "react-native";
-
-import { EmbeddedWhiteboard } from "../EmbeddedWhiteboard";
-import type { WhiteboardMetric } from "../../telemetry";
-import { useNativeTheme } from "../../ui/native-theme";
-import type { SpaceWhiteboardState } from "./useSpaceViewPanels";
-
-export interface SpaceWhiteboardSurfaceProps {
-  readonly whiteboard: SpaceWhiteboardState;
-}
-
-export function shouldRenderNativeSpaceWhiteboard(whiteboard: SpaceWhiteboardState): whiteboard is SpaceWhiteboardState & {
-  readonly transport: NonNullable<SpaceWhiteboardState["transport"]>;
-} {
-  return whiteboard.isOpen && whiteboard.transport !== null;
-}
-
-export function forwardNativeSpaceWhiteboardMetric(metric: WhiteboardMetric, onMetric: SpaceWhiteboardState["onMetric"]): void {
-  onMetric?.(metric);
-}
-
-export function forwardNativeSpaceWhiteboardFailure(error: { readonly code: string; readonly recoverable: boolean }, onMetric: SpaceWhiteboardState["onMetric"]): void {
-  onMetric?.({
-    name: "whiteboard.renderer.failure",
-    value: 1,
-    attributes: { code: error.code, recoverable: error.recoverable },
-  });
-}
-
-export function SpaceWhiteboardSurface({ whiteboard }: SpaceWhiteboardSurfaceProps): React.JSX.Element | null {
-  const nativeTheme = useNativeTheme();
-  const handleError = useCallback(
-    (error: { readonly code: string; readonly message: string; readonly recoverable: boolean }) => {
-      forwardNativeSpaceWhiteboardFailure(error, whiteboard.onMetric);
-    },
-    [whiteboard.onMetric],
-  );
-  const handleMetric = useCallback(
-    (metric: WhiteboardMetric) => {
-      forwardNativeSpaceWhiteboardMetric(metric, whiteboard.onMetric);
-    },
-    [whiteboard.onMetric],
-  );
-
-  if (!shouldRenderNativeSpaceWhiteboard(whiteboard)) return null;
-
-  return (
-    <EmbeddedWhiteboard
-      canClear={whiteboard.canClear}
-      canDraw={whiteboard.canDraw}
-      journeyId={whiteboard.journeyId}
-      onError={handleError}
-      onMetric={handleMetric}
-      style={styles.surface}
-      theme={nativeTheme.colorScheme}
-      transport={whiteboard.transport}
-      {...(whiteboard.traceparent ? { traceparent: whiteboard.traceparent } : {})}
-      {...(whiteboard.tracestate ? { tracestate: whiteboard.tracestate } : {})}
-    />
-  );
-}
-
-const styles = StyleSheet.create({
-  surface: {
-    flex: 1,
-    width: "100%",
-  },
-});