@q9labsai/chalk-react-native 4.0.0

package/src/components/native-space-view/types.ts

@@ -0,0 +1,25 @@
+import type { NativeParticipantState } from "../../ui/native-types";
+
+export type SpaceParticipant = NativeParticipantState["participants"][number];
+export type SpacePanelName = "chat" | "participants" | "settings" | "whiteboard";
+export type SpaceViewAction = () => unknown | Promise<unknown>;
+export type SpaceViewActionRunner = (action: SpaceViewAction) => Promise<void>;
+
+export interface SpaceBottomDockProps {
+  simulatorMediaDisabled: boolean;
+  isMuted: boolean;
+  isCameraOff: boolean;
+  isHandRaised?: boolean;
+  isScreenSharing?: boolean;
+  unreadChatCount: number;
+  participantCount?: number;
+  onToggleAudio: () => void;
+  onToggleVideo: () => void;
+  onToggleHand?: () => void;
+  onToggleScreenShare?: () => void;
+  onOpenChat?: () => void;
+  onOpenParticipants?: () => void;
+  onOpenReactions?: () => void;
+  onOpenMore: () => void;
+  onLeave: () => void;
+}

package/src/components/native-space-view/useSpaceViewController.contract.test.ts

@@ -0,0 +1,10 @@
+import { describe, expect, it } from "vitest";
+
+import type { SpaceViewControllerContractCheck } from "./useSpaceViewController.contract";
+
+describe("useSpaceViewController contract", () => {
+  it("keeps the bidirectional return-shape assertion compiled", () => {
+    const contractCheck: SpaceViewControllerContractCheck = true;
+    expect(contractCheck).toBe(true);
+  });
+});

package/src/components/native-space-view/useSpaceViewController.contract.ts

@@ -0,0 +1,34 @@
+import type { Reaction } from "@q9labsai/chalk-client";
+import type { Dispatch, SetStateAction } from "react";
+
+import type { SpacePanelName } from "./types";
+import type { useSpaceViewController } from "./useSpaceViewController";
+
+type ExpectedSpaceViewController = {
+  readonly simulatorMediaDisabled: boolean;
+  readonly spaceName: string;
+  readonly panel: SpacePanelName | null;
+  readonly isMuted: boolean;
+  readonly isCameraOff: boolean;
+  readonly participantCount: number;
+  readonly canChat: boolean;
+  readonly canParticipants: boolean;
+  readonly canScreenShare: boolean;
+  readonly canReactions: boolean;
+  readonly canHandRaise: boolean;
+  readonly canWhiteboard: boolean;
+  readonly chat: { readonly unreadCount: number; readonly messages: readonly unknown[] };
+  readonly participants: { readonly participants: readonly unknown[]; readonly localParticipant: unknown };
+  readonly layout: { readonly layout: "grid" | "focus" | "presentation"; readonly setLayout: (layout: "grid" | "focus" | "presentation") => void };
+  readonly setActionsOpen: Dispatch<SetStateAction<boolean>>;
+  readonly setReactionPickerOpen: Dispatch<SetStateAction<boolean>>;
+  readonly setChatDraft: Dispatch<SetStateAction<string>>;
+  readonly sendReaction: (reaction: Reaction) => void;
+  readonly sendChatMessage: () => void;
+  readonly handleLeave: () => void;
+};
+
+type Assert<T extends true> = T;
+type IsAssignable<Current, Expected> = Current extends Expected ? true : false;
+
+export type SpaceViewControllerContractCheck = Assert<IsAssignable<ReturnType<typeof useSpaceViewController>, ExpectedSpaceViewController>>;

package/src/components/native-space-view/useSpaceViewController.test.ts

@@ -0,0 +1,105 @@
+import { describe, expect, it, vi } from "vitest";
+
+const directClient = vi.hoisted(() => ({
+  chat: { files: { url: vi.fn(() => "https://example.test/file") }, loadOlder: vi.fn(async () => ({ status: "loaded" })), markRead: vi.fn(async () => null), send: vi.fn(async () => ({})) },
+  media: {
+    acceptRequest: vi.fn(async () => undefined),
+    declineRequest: vi.fn(async () => undefined),
+    setCameraEnabled: vi.fn(async () => undefined),
+    setMicrophoneEnabled: vi.fn(async () => undefined),
+    setScreenShareEnabled: vi.fn(async () => undefined),
+  },
+  participants: {
+    admit: vi.fn(async () => undefined),
+    assignRole: vi.fn(async () => undefined),
+    deny: vi.fn(async () => undefined),
+    lowerHand: vi.fn(async () => undefined),
+    mute: vi.fn(async () => undefined),
+    raiseHand: vi.fn(async () => undefined),
+    remove: vi.fn(async () => undefined),
+    renameSelf: vi.fn(async () => undefined),
+    requestMedia: vi.fn(async () => ({ status: "delivered" })),
+    stopScreenShare: vi.fn(async () => undefined),
+    stopVideo: vi.fn(async () => undefined),
+  },
+  reactions: { send: vi.fn(async () => ({})) },
+  whiteboard: { transport: vi.fn(() => null) },
+}));
+
+vi.mock("react", () => ({
+  useCallback: <T>(callback: T) => callback,
+  useEffect: () => undefined,
+  useMemo: <T>(factory: () => T) => factory(),
+  useState: <T>(initial: T): readonly [T, (next: T) => void] => [initial, vi.fn()],
+}));
+vi.mock("react-native", () => ({ Alert: { alert: vi.fn() }, Linking: { openURL: vi.fn(async () => undefined) } }));
+vi.mock("../../context/space-client-context", () => ({ useSpaceClient: () => directClient }));
+vi.mock("../../hooks/space-hooks", () => ({
+  useSelf: () => ({ participantId: "self", displayName: "Taylor", handRaised: false, can: (capability: string) => capability !== "endEpisode" }),
+  useParticipants: () => ({
+    roster: [
+      {
+        participantId: "self",
+        displayName: "Taylor",
+        role: "collaborator",
+        eligibleRoles: [],
+        capabilities: [],
+        handRaised: false,
+        media: { microphone: "active", camera: "active", screenShare: "inactive" },
+      },
+    ],
+    admissionQueue: [],
+  }),
+  useMedia: () => ({
+    local: {
+      microphone: { state: "enabled", track: null },
+      camera: { state: "enabled", track: null },
+      screen: { state: "disabled", track: null },
+    },
+    screenShare: { state: "disabled", track: null },
+    remote: [],
+    incomingRequests: [],
+  }),
+  useChat: () => ({ status: "ready", messages: [], pendingSends: [], readReceipts: [], unreadCount: 0, pagination: { cursor: null, hasOlder: false, historyTruncated: false } }),
+  useReactions: () => ({ active: [] }),
+  useWhiteboard: () => ({ engine: { status: "ready", sceneId: null, revision: null, error: null } }),
+}));
+vi.mock("../../utils/ios-simulator", () => ({ isIosSimulator: () => false }));
+vi.mock("./useSpaceViewPanels", () => ({
+  useSpaceViewPanels: () => ({
+    layout: { layout: "grid" },
+    panel: null,
+    secondsElapsed: 5,
+    formattedDuration: "0:05",
+    actionsOpen: false,
+    reactionPickerOpen: false,
+    whiteboard: { isOpen: false, canDraw: true, canClear: false, elements: [], openParticipants: [], transport: null },
+    handleLeave: vi.fn(),
+    openPanel: vi.fn(),
+    closePanel: vi.fn(),
+    handleInviteParticipants: vi.fn(),
+  }),
+}));
+vi.mock("./useSpaceViewDerived", () => ({ useSpaceViewDerived: () => ({ isStageMode: false, gridPages: [], allParticipants: [] }) }));
+
+import { useSpaceViewController } from "./useSpaceViewController";
+
+describe("useSpaceViewController", () => {
+  it("binds native Space actions directly to the canonical SpaceClient", async () => {
+    const controller = useSpaceViewController({ spaceName: "Design review", onLeave: vi.fn() });
+
+    expect(controller.participants.localParticipant?.displayName).toBe("Taylor");
+    expect(controller.chat.isEnabled).toBe(true);
+    expect(controller.canSettings).toBe(true);
+    expect(controller.canInvite).toBe(false);
+    controller.toggleAudio();
+    controller.sendReaction("🎉");
+    controller.requestStartParticipantCamera("participant-2");
+
+    await vi.waitFor(() => {
+      expect(directClient.media.setMicrophoneEnabled).toHaveBeenCalledWith(false);
+      expect(directClient.reactions.send).toHaveBeenCalledWith("🎉");
+      expect(directClient.participants.requestMedia).toHaveBeenCalledWith("participant-2", "camera");
+    });
+  });
+});

package/src/components/native-space-view/useSpaceViewController.ts

@@ -0,0 +1,396 @@
+import type { ChatSendInput, Reaction } from "@q9labsai/chalk-client";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Alert, Linking } from "react-native";
+
+import { useSpaceClient } from "../../context/space-client-context";
+import { useChat as useSpaceChat, useMedia as useSpaceMedia, useParticipants as useSpaceParticipants, useReactions as useSpaceReactions, useSelf, useWhiteboard } from "../../hooks/space-hooks";
+import { getNativeJourneyContext } from "../../telemetry";
+import type { NativeChatMessage, NativeParticipant, NativeReaction } from "../../ui/native-types";
+import { isIosSimulator } from "../../utils/ios-simulator";
+import type { SpaceViewProps } from "../SpaceView";
+import { buildSpaceViewDiagnosticsSnapshot } from "./diagnostics";
+import { useSpaceViewDerived } from "./useSpaceViewDerived";
+import { useSpaceViewPanels } from "./useSpaceViewPanels";
+import { resolveNativeScreenShareAvailability } from "./screen-share-availability";
+import { normalizeChatFileDrafts, uploadAndSendNativeChatAttachments, type NativeChatFileDraft } from "./space-chat-attachments";
+
+const spaceReactions = new Set<Reaction>(["👍", "❤️", "😂", "😮", "😢", "🎉"]);
+
+/**
+ * The native Space UI consumes the canonical SpaceClient snapshot directly.
+ * This keeps the mature native renderer intact without re-projecting client
+ * state through a retired compatibility layer.
+ */
+export function useSpaceViewController({ spaceName, inviteLink, layout: controlledLayout, onLayoutChange, features, onLeave, onEndEpisode, onDiagnosticsChange, pickChatFiles: pickChatFilesInput }: SpaceViewProps) {
+  const client = useSpaceClient();
+  const self = useSelf();
+  const participantSlice = useSpaceParticipants();
+  const media = useSpaceMedia();
+  const chatSlice = useSpaceChat();
+  const reactionSlice = useSpaceReactions();
+  const whiteboardSlice = useWhiteboard();
+  const journeyContext = getNativeJourneyContext(client);
+  const [actionsOpen, setActionsOpen] = useState(false);
+  const [reactionPickerOpen, setReactionPickerOpen] = useState(false);
+  const [chatDraft, setChatDraft] = useState("");
+  const [chatAttachments, setChatAttachments] = useState<readonly NativeChatFileDraft[]>([]);
+  const [chatAttachmentError, setChatAttachmentError] = useState<string | null>(null);
+  const [chatAttachmentPicking, setChatAttachmentPicking] = useState(false);
+  const [chatAttachmentUploading, setChatAttachmentUploading] = useState(false);
+
+  const run = useCallback(async (action: () => unknown | Promise<unknown>) => {
+    try {
+      await action();
+    } catch (cause) {
+      Alert.alert("Action failed", cause instanceof Error ? cause.message : "Chalk could not complete the action.");
+    }
+  }, []);
+
+  const localParticipantId = self.participantId;
+  const participants = useMemo(
+    () =>
+      participantSlice.roster.map((participant): NativeParticipant => {
+        const local = participant.participantId === localParticipantId;
+        const remoteMedia = media.remote.filter((publication) => publication.participantId === participant.participantId);
+        return {
+          ...participant,
+          id: participant.participantId,
+          audioEnabled: local ? media.local.microphone.state === "enabled" || media.local.microphone.state === "requesting" : participant.media.microphone === "active",
+          videoEnabled: local ? media.local.camera.state === "enabled" || media.local.camera.state === "requesting" : participant.media.camera === "active",
+          audioTrack: local ? media.local.microphone.track : (remoteMedia.find((publication) => publication.source === "microphone")?.track ?? null),
+          videoTrack: local ? media.local.camera.track : (remoteMedia.find((publication) => publication.source === "camera")?.track ?? null),
+          screenShareTrack: local ? media.screenShare.track : (remoteMedia.find((publication) => publication.source === "screen")?.track ?? null),
+        };
+      }),
+    [localParticipantId, media.local.camera, media.local.microphone, media.remote, media.screenShare.track, participantSlice.roster],
+  );
+  const localParticipant = useMemo(() => participants.find((participant) => participant.id === localParticipantId) ?? null, [localParticipantId, participants]);
+  const spaceParticipants = useMemo(
+    () => ({
+      participants,
+      localParticipant,
+      remoteParticipants: participants.filter((participant) => participant.id !== localParticipantId),
+      activeSpeaker: null,
+      count: participants.length,
+      participantCount: participants.length,
+      getParticipant: (participantId: string) => participants.find((participant) => participant.id === participantId),
+      updateDisplayName: (displayName: string) => client.participants.renameSelf(displayName),
+    }),
+    [client.participants, localParticipant, localParticipantId, participants],
+  );
+
+  const isLocalSharing = media.screenShare.state === "enabled" || media.screenShare.state === "requesting";
+  const remoteScreenShare = useMemo(() => media.remote.find((publication) => publication.source === "screen") ?? null, [media.remote]);
+  const screenShare = useMemo(
+    () => ({
+      isActive: isLocalSharing || remoteScreenShare !== null,
+      isStarting: media.screenShare.state === "requesting",
+      isLocalSharing,
+      sharerParticipantId: isLocalSharing ? localParticipantId : (remoteScreenShare?.participantId ?? null),
+      videoTrack: isLocalSharing ? media.screenShare.track : (remoteScreenShare?.track ?? null),
+      audioTrack: null,
+      start: async () => {
+        await client.media.setScreenShareEnabled(true);
+        return true;
+      },
+      stop: () => client.media.setScreenShareEnabled(false),
+      toggle: async () => {
+        const enabled = !isLocalSharing;
+        await client.media.setScreenShareEnabled(enabled);
+        return enabled;
+      },
+    }),
+    [client.media, isLocalSharing, localParticipantId, media.screenShare.state, media.screenShare.track, remoteScreenShare],
+  );
+
+  const interactionState = useMemo(() => {
+    const raisedHands = participantSlice.roster.filter((participant) => participant.handRaised).map((participant) => participant.participantId);
+    const activeReactions: NativeReaction[] = reactionSlice.active.map((reaction) => ({
+      id: reaction.eventId,
+      emoji: reaction.reaction,
+      participantId: reaction.participantId,
+      participantName: reaction.displayName,
+    }));
+    return {
+      isHandRaised: self.handRaised,
+      raisedHands,
+      raisedHandCount: raisedHands.length,
+      activeReactions,
+      reactionEnabled: self.can("sendReaction"),
+      raiseHand: () => client.participants.raiseHand(),
+      lowerHand: () => client.participants.lowerHand(),
+      toggleHand: () => (self.handRaised ? client.participants.lowerHand() : client.participants.raiseHand()),
+      sendReaction: (reaction: Reaction) => client.reactions.send(reaction),
+    };
+  }, [client.participants, client.reactions, participantSlice.roster, reactionSlice.active, self]);
+
+  const chat = useMemo(() => {
+    const messages: NativeChatMessage[] = chatSlice.messages.map((message) => ({
+      id: message.messageId,
+      sequence: message.sequence,
+      senderId: message.participantId,
+      senderName: message.displayName,
+      text: message.text,
+      content: message.text,
+      attachments: message.attachments,
+      readBy: chatSlice.readReceipts
+        .filter((receipt) => receipt.participantId !== message.participantId && receipt.participantId !== localParticipantId && sequenceAtOrAfter(receipt.readThroughSequence, message.sequence))
+        .map((receipt) => ({
+          ...receipt,
+          displayName: participantSlice.roster.find((participant) => participant.participantId === receipt.participantId)?.displayName ?? "Participant",
+        })),
+      timestamp: Date.parse(message.createdAt),
+    }));
+    const pendingMessages = chatSlice.pendingSends.map((pending) => ({ ...pending, state: pending.status }));
+    const sendMessage = (content: string | ChatSendInput) => client.chat.send(typeof content === "string" ? { text: content } : content).then(() => undefined);
+    const markAsRead = (throughSequence?: string) => {
+      const target = throughSequence ? chatSlice.messages.find((message) => message.sequence === throughSequence) : chatSlice.messages.at(-1);
+      return target ? client.chat.markRead(target.messageId) : Promise.resolve(null);
+    };
+    return {
+      messages,
+      isEnabled: self.can("sendChat"),
+      count: messages.length,
+      unreadCount: chatSlice.unreadCount,
+      pendingMessages,
+      hasMore: chatSlice.pagination.hasOlder,
+      isLoadingOlder: chatSlice.status === "loading",
+      sendMessage,
+      retryMessage: (clientMessageId: string) => {
+        const pending = chatSlice.pendingSends.find((message) => message.clientMessageId === clientMessageId);
+        return pending ? client.chat.send({ text: pending.text, attachments: pending.attachments }).then(() => undefined) : Promise.reject(new Error("The pending message is no longer available."));
+      },
+      loadOlderMessages: () => client.chat.loadOlder().then(() => undefined),
+      reactToMessage: () => {
+        throw new Error("Per-message reactions are not part of the actions contract.");
+      },
+      markAsRead,
+      markAsHidden: markAsRead,
+      getMessage: (id: string) => messages.find((message) => message.id === id),
+    };
+  }, [chatSlice, client.chat, localParticipantId, participantSlice.roster, self]);
+
+  const canWhiteboard = features?.whiteboard !== false && whiteboardSlice.engine.status !== "unsubscribed";
+  const canDraw = canWhiteboard && self.can("drawWhiteboard");
+  const canClear = canWhiteboard && self.can("manageWhiteboard");
+  const whiteboardTransport = useMemo(() => client.whiteboard.transport(), [client.whiteboard, whiteboardSlice.engine.status]);
+  const canEndEpisode = self.can("endEpisode");
+  const screenShareAvailability = useMemo(() => resolveNativeScreenShareAvailability({ featureEnabled: features?.screenShare !== false }), [features?.screenShare]);
+  const capabilities = useMemo(
+    () => ({
+      canEndEpisode,
+      canChat: features?.chat !== false && self.can("sendChat"),
+      canParticipants: features?.participants !== false,
+      canScreenShare: screenShareAvailability.enabled && self.can("publishScreen"),
+      canReactions: features?.reactions !== false && self.can("sendReaction"),
+      canHandRaise: features?.handRaise !== false && self.can("raiseHand"),
+      canInvite: features?.info !== false && Boolean(inviteLink),
+      canSettings: features?.settings !== false,
+      canWhiteboard,
+      canManageAdmission: features?.admission !== false && self.can("manageAdmission"),
+      canRequestMedia: self.can("requestMediaOthers"),
+      canMuteParticipants: self.can("muteOthers"),
+      canRemoveParticipants: self.can("removeParticipant"),
+      canStopParticipantCamera: self.can("stopVideoOthers"),
+      canStopParticipantScreenShare: self.can("stopScreenOthers"),
+      canModerate: self.can("manageAdmission") || self.can("assignRoles") || self.can("requestMediaOthers") || self.can("muteOthers") || self.can("removeParticipant") || self.can("stopVideoOthers") || self.can("stopScreenOthers"),
+      screenShareAvailability,
+    }),
+    [canEndEpisode, canWhiteboard, features?.admission, features?.chat, features?.handRaise, features?.info, features?.participants, features?.reactions, features?.settings, inviteLink, screenShareAvailability, self],
+  );
+
+  const spacePanels = useSpaceViewPanels({
+    spaceName,
+    inviteLink,
+    layout: controlledLayout,
+    onLayoutChange,
+    canWhiteboard,
+    canDraw,
+    canClear,
+    canEndEpisode,
+    transport: whiteboardTransport,
+    onLeave,
+    onEndEpisode,
+    run,
+    journeyContext,
+  });
+  const derived = useSpaceViewDerived({ participants, localParticipant, screenShare, isWhiteboardOpen: spacePanels.whiteboard.isOpen });
+
+  useEffect(() => {
+    const request = media.incomingRequests[0];
+    if (!request) return;
+    Alert.alert(request.kind === "unmute" ? "Unmute request" : "Camera request", `${request.actorDisplayName ?? "A Space organizer"} is asking you to ${request.kind === "unmute" ? "unmute" : "start your camera"}.`, [
+      { text: "Not now", style: "cancel", onPress: () => void run(() => client.media.declineRequest(request.requestId)) },
+      { text: "Allow", onPress: () => void run(() => client.media.acceptRequest(request.requestId)) },
+    ]);
+  }, [client.media, media.incomingRequests, run]);
+
+  const spaceDiagnostics = useMemo(
+    () =>
+      buildSpaceViewDiagnosticsSnapshot({
+        featureFlags: {
+          chat: capabilities.canChat,
+          participants: capabilities.canParticipants,
+          screenShare: capabilities.canScreenShare,
+          reactions: capabilities.canReactions,
+          handRaise: capabilities.canHandRaise,
+          whiteboard: capabilities.canWhiteboard,
+        },
+        canEndEpisode: capabilities.canEndEpisode,
+        participantCount: spaceParticipants.participantCount,
+        raisedHandCount: interactionState.raisedHandCount,
+        unreadChatCount: chat.unreadCount,
+        isScreenShareActive: screenShare.isActive,
+        isLocalScreenSharing: screenShare.isLocalSharing,
+        screenShareSharerParticipantId: screenShare.sharerParticipantId,
+        canModerate: capabilities.canModerate,
+        screenShareAvailability,
+      }),
+    [capabilities, chat.unreadCount, interactionState.raisedHandCount, spaceParticipants.participantCount, screenShare.isActive, screenShare.isLocalSharing, screenShare.sharerParticipantId, screenShareAvailability],
+  );
+  useEffect(() => onDiagnosticsChange?.(spaceDiagnostics), [onDiagnosticsChange, spaceDiagnostics]);
+
+  const pickChatFiles = useCallback(async () => {
+    if (!pickChatFilesInput) return;
+    setChatAttachmentPicking(true);
+    try {
+      const picked = normalizeChatFileDrafts(await pickChatFilesInput());
+      if (picked.error) {
+        setChatAttachmentError(picked.error);
+        return;
+      }
+      const combined = normalizeChatFileDrafts([...chatAttachments.map((draft) => draft.file), ...picked.files.map((draft) => draft.file)]);
+      if (combined.error) {
+        setChatAttachmentError(combined.error);
+        return;
+      }
+      setChatAttachmentError(null);
+      setChatAttachments(combined.files);
+    } catch (cause) {
+      setChatAttachmentError(cause instanceof Error ? cause.message : "Could not read the selected files.");
+    } finally {
+      setChatAttachmentPicking(false);
+    }
+  }, [chatAttachments, pickChatFilesInput]);
+
+  const removeChatAttachment = useCallback((index: number) => {
+    setChatAttachments((current) => current.filter((_, currentIndex) => currentIndex !== index));
+    setChatAttachmentError(null);
+  }, []);
+
+  const sendChatMessage = useCallback(() => {
+    const text = chatDraft.trim();
+    if (!text && chatAttachments.length === 0) return;
+    void run(async () => {
+      setChatAttachmentUploading(true);
+      setChatAttachmentError(null);
+      try {
+        await uploadAndSendNativeChatAttachments(chatAttachments, text, client.chat.files.upload, chat.sendMessage);
+        setChatDraft("");
+        setChatAttachments([]);
+      } catch (cause) {
+        setChatAttachmentError(cause instanceof Error ? cause.message : "Could not send the attachments.");
+        throw cause;
+      } finally {
+        setChatAttachmentUploading(false);
+      }
+    });
+  }, [chat, chatAttachments, chatDraft, client.chat.files, run]);
+
+  return {
+    simulatorMediaDisabled: isIosSimulator(),
+    spaceName: spaceName || "Space",
+    panel: spacePanels.panel,
+    selfName: self.displayName || "Participant",
+    isMuted: !(media.local.microphone.state === "enabled" || media.local.microphone.state === "requesting"),
+    isCameraOff: !(media.local.camera.state === "enabled" || media.local.camera.state === "requesting"),
+    handRaised: interactionState.isHandRaised,
+    raisedHandCount: interactionState.raisedHandCount,
+    activeReactions: interactionState.activeReactions.slice(-3),
+    secondsElapsed: spacePanels.secondsElapsed,
+    formattedDuration: spacePanels.formattedDuration,
+    actionsOpen,
+    reactionPickerOpen,
+    chatDraft,
+    chatAttachments,
+    chatAttachmentError,
+    chatAttachmentPicking,
+    chatAttachmentUploading,
+    canPickChatFiles: Boolean(pickChatFilesInput),
+    participantCount: spaceParticipants.participantCount,
+    canChat: capabilities.canChat,
+    canParticipants: capabilities.canParticipants,
+    canScreenShare: capabilities.canScreenShare,
+    canReactions: capabilities.canReactions,
+    canHandRaise: capabilities.canHandRaise,
+    canInvite: capabilities.canInvite,
+    canSettings: capabilities.canSettings,
+    canWhiteboard: capabilities.canWhiteboard,
+    canManageAdmission: capabilities.canManageAdmission,
+    canRequestMedia: capabilities.canRequestMedia,
+    canMuteParticipants: capabilities.canMuteParticipants,
+    canRemoveParticipants: capabilities.canRemoveParticipants,
+    canStopParticipantCamera: capabilities.canStopParticipantCamera,
+    canStopParticipantScreenShare: capabilities.canStopParticipantScreenShare,
+    admissionRequests: participantSlice.admissionQueue,
+    spaceDiagnostics,
+    participants: spaceParticipants,
+    settings: {
+      displayName: self.displayName ?? "",
+      microphoneEnabled: media.local.microphone.state === "enabled" || media.local.microphone.state === "requesting",
+      cameraEnabled: media.local.camera.state === "enabled" || media.local.camera.state === "requesting",
+      devices: media.devices,
+      selection: media.selection,
+      updateDisplayName: (displayName: string) => {
+        const nextDisplayName = displayName.trim();
+        if (nextDisplayName) void run(() => client.participants.renameSelf(nextDisplayName));
+      },
+      selectMicrophone: (deviceId: string) => void run(() => client.media.selectMicrophone(deviceId)),
+      selectCamera: (deviceId: string) => void run(() => client.media.selectCamera(deviceId)),
+      selectSpeaker: (deviceId: string) => void run(() => client.media.selectSpeaker(deviceId)),
+    },
+    chat,
+    interactions: interactionState,
+    screenShare,
+    layout: spacePanels.layout,
+    whiteboard: spacePanels.whiteboard,
+    derived,
+    setActionsOpen,
+    setReactionPickerOpen,
+    setChatDraft,
+    pickChatFiles,
+    removeChatAttachment,
+    handleLeave: spacePanels.handleLeave,
+    openPanel: spacePanels.openPanel,
+    closePanel: spacePanels.closePanel,
+    handleInviteParticipants: spacePanels.handleInviteParticipants,
+    toggleAudio: () => void run(() => client.media.setMicrophoneEnabled(!(media.local.microphone.state === "enabled" || media.local.microphone.state === "requesting"))),
+    toggleVideo: () => void run(() => client.media.setCameraEnabled(!(media.local.camera.state === "enabled" || media.local.camera.state === "requesting"))),
+    toggleScreenShare: () => void run(screenShare.toggle),
+    toggleHand: () => void run(interactionState.toggleHand),
+    sendReaction: (reaction: Reaction) => {
+      if (!spaceReactions.has(reaction)) return;
+      void run(() => interactionState.sendReaction(reaction));
+    },
+    sendChatMessage,
+    openChatAttachment: (attachmentId: string) => {
+      const attachment = chat.messages.flatMap((message) => message.attachments).find((candidate) => candidate.attachmentId === attachmentId);
+      if (attachment) void run(() => Linking.openURL(client.chat.files.url(attachment)));
+    },
+    markChatMessageVisible: (sequence: string) => void run(() => chat.markAsRead(sequence)),
+    admitParticipant: (requestId: string) => void run(() => client.participants.admit(requestId)),
+    denyAdmission: (requestId: string) => void run(() => client.participants.deny(requestId)),
+    removeParticipant: (participantId: string) => void run(() => client.participants.remove(participantId)),
+    muteParticipant: (participantId: string) => void run(() => client.participants.mute(participantId)),
+    requestUnmuteParticipant: (participantId: string) => void run(() => client.participants.requestMedia(participantId, "microphone")),
+    requestStartParticipantCamera: (participantId: string) => void run(() => client.participants.requestMedia(participantId, "camera")),
+    stopParticipantCamera: (participantId: string) => void run(() => client.participants.stopVideo(participantId)),
+    stopParticipantScreenShare: (participantId: string) => void run(() => client.participants.stopScreenShare(participantId)),
+  };
+}
+
+function sequenceAtOrAfter(value: string, floor: string): boolean {
+  const normalizedValue = value.replace(/^0+(?=\d)/, "");
+  const normalizedFloor = floor.replace(/^0+(?=\d)/, "");
+  return normalizedValue.length > normalizedFloor.length || (normalizedValue.length === normalizedFloor.length && normalizedValue >= normalizedFloor);
+}

package/src/components/native-space-view/useSpaceViewDerived.test.ts

@@ -0,0 +1,58 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const viewport = vi.hoisted(() => ({ width: 500 }));
+const defaultViewportWidth = 500;
+
+vi.mock("react", () => ({
+  useMemo: <T>(factory: () => T) => factory(),
+}));
+vi.mock("react-native", () => ({
+  useWindowDimensions: () => ({ width: viewport.width, height: 800 }),
+}));
+
+import { useSpaceViewDerived } from "./useSpaceViewDerived";
+
+describe("useSpaceViewDerived", () => {
+  beforeEach(() => {
+    viewport.width = defaultViewportWidth;
+  });
+
+  afterEach(() => {
+    viewport.width = defaultViewportWidth;
+  });
+
+  it("marks compact whiteboard layouts and keeps the local participant first", () => {
+    const local = { id: "local", screenShareTrack: null };
+    const remote = { id: "remote", screenShareTrack: null };
+
+    const derived = useSpaceViewDerived({
+      participants: [remote] as never,
+      localParticipant: local as never,
+      screenShare: { isActive: false, isLocalSharing: false, sharerParticipantId: null, videoTrack: null },
+      isWhiteboardOpen: true,
+    });
+
+    expect(derived.isCompactViewport).toBe(true);
+    expect(derived.primaryContent).toBe("whiteboard");
+    expect(derived.allParticipants.map((participant) => participant.id)).toEqual(["local", "remote"]);
+  });
+
+  it("uses the wide viewport to expose an active remote screen share", () => {
+    viewport.width = 1024;
+    const local = { id: "local", screenShareTrack: null };
+    const remote = { id: "remote", screenShareTrack: null };
+    const track = { readyState: "live" } as never;
+
+    const derived = useSpaceViewDerived({
+      participants: [remote] as never,
+      localParticipant: local as never,
+      screenShare: { isActive: true, isLocalSharing: false, sharerParticipantId: "remote", videoTrack: track },
+      isWhiteboardOpen: false,
+    });
+
+    expect(derived.isCompactViewport).toBe(false);
+    expect(derived.primaryContent).toBe("screen-share");
+    expect(derived.screenSharer).toBe(remote);
+    expect(derived.screenShareTrack).toBe(track);
+  });
+});

package/src/components/native-space-view/useSpaceViewDerived.ts

@@ -0,0 +1,29 @@
+import type { NativeParticipantState } from "../../ui/native-types";
+import { useMemo } from "react";
+import { useWindowDimensions } from "react-native";
+import { NATIVE_COMPACT_VIEWPORT_MAX_WIDTH, resolveNativeSpaceLayout, type NativeScreenShareStateLike } from "../../utils/native-space-layout";
+
+type SpaceParticipant = NativeParticipantState["participants"][number];
+
+interface UseSpaceViewDerivedOptions {
+  participants: readonly SpaceParticipant[];
+  localParticipant: SpaceParticipant | null;
+  screenShare: NativeScreenShareStateLike;
+  isWhiteboardOpen: boolean;
+}
+
+export function useSpaceViewDerived({ participants, localParticipant, screenShare, isWhiteboardOpen }: UseSpaceViewDerivedOptions) {
+  const { width } = useWindowDimensions();
+
+  return useMemo(
+    () =>
+      resolveNativeSpaceLayout({
+        participants,
+        localParticipant,
+        screenShare,
+        isWhiteboardOpen,
+        isCompactViewport: width < NATIVE_COMPACT_VIEWPORT_MAX_WIDTH,
+      }),
+    [participants, localParticipant, screenShare, isWhiteboardOpen, width],
+  );
+}