@q9labsai/chalk-react-native 4.0.0

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

@@ -0,0 +1,116 @@
+import Mic01Icon from "@hugeicons/core-free-icons/dist/esm/Mic01Icon";
+import MicOff01Icon from "@hugeicons/core-free-icons/dist/esm/MicOff01Icon";
+import MoreHorizontalIcon from "@hugeicons/core-free-icons/dist/esm/MoreHorizontalIcon";
+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 { useState } from "react";
+import { Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+
+import { Theme } from "../../ui/theme";
+import { ParticipantActionSheet } from "./ParticipantActionSheet";
+import { InitialsAvatar } from "./SpaceSurfacePrimitives";
+import type { SpaceController } from "./space-progressive-surface-types";
+
+export function SpacePeopleSheet({ controller }: { readonly controller: SpaceController }): React.JSX.Element {
+  const [actionParticipantId, setActionParticipantId] = useState<string | null>(null);
+  const closeActions = () => {
+    setActionParticipantId(null);
+  };
+  const openActions = (participantId: string) => {
+    setActionParticipantId(participantId);
+  };
+
+  return (
+    <View style={styles.content}>
+      <ScrollView contentContainerStyle={styles.list} showsVerticalScrollIndicator={false}>
+        {controller.admissionRequests.map((request) => (
+          <View key={request.requestId} style={styles.admissionRequest}>
+            <InitialsAvatar name={request.displayName} size={48} />
+            <View style={styles.rowCopy}>
+              <Text numberOfLines={1} style={styles.name}>
+                {request.displayName}
+              </Text>
+              <Text style={styles.meta}>At the Entrance</Text>
+            </View>
+            {controller.canManageAdmission ? (
+              <View style={styles.admissionActions}>
+                <Pressable accessibilityRole="button" onPress={() => controller.denyAdmission(request.requestId)} style={({ pressed }) => [styles.denyButton, pressed && styles.pressed]}>
+                  <Text style={styles.denyText}>Deny</Text>
+                </Pressable>
+                <Pressable accessibilityRole="button" onPress={() => controller.admitParticipant(request.requestId)} style={({ pressed }) => [styles.admitButton, pressed && styles.pressed]}>
+                  <Text style={styles.admitText}>Admit</Text>
+                </Pressable>
+              </View>
+            ) : null}
+          </View>
+        ))}
+        {controller.participants.participants.map((participant) => {
+          const local = participant.id === controller.participants.localParticipant?.id;
+          const canAct = !local && canActOnParticipant(controller);
+          return (
+            <View key={participant.id} style={styles.participantRow}>
+              <InitialsAvatar name={participant.displayName} size={54} />
+              <View style={styles.rowCopy}>
+                <Text numberOfLines={1} style={styles.name}>
+                  {participant.displayName}
+                  {local ? " (You)" : ""}
+                </Text>
+              </View>
+              <View style={styles.mediaStatus}>
+                <HugeiconsIcon color={participant.audioEnabled ? Theme.colors.success : Theme.colors.error} icon={participant.audioEnabled ? Mic01Icon : MicOff01Icon} size={22} />
+                <View style={[styles.statusDot, { backgroundColor: participant.audioEnabled ? Theme.colors.chalkGreen : Theme.colors.chalkPink }]} />
+              </View>
+              <View style={styles.mediaStatus}>
+                <HugeiconsIcon color={participant.videoEnabled ? Theme.colors.success : Theme.colors.error} icon={participant.videoEnabled ? Video01Icon : VideoOffIcon} size={22} />
+                <View style={[styles.statusDot, { backgroundColor: participant.videoEnabled ? Theme.colors.chalkGreen : Theme.colors.chalkPink }]} />
+              </View>
+              {canAct ? (
+                <Pressable accessibilityLabel={`Actions for ${participant.displayName}`} accessibilityRole="button" onPress={() => openActions(participant.id)} style={({ pressed }) => [styles.moreButton, pressed && styles.pressed]}>
+                  <HugeiconsIcon color={Theme.colors.ink} icon={MoreHorizontalIcon} size={22} />
+                </Pressable>
+              ) : null}
+            </View>
+          );
+        })}
+        {!controller.participants.participants.length && !controller.admissionRequests.length ? <EmptyPeople /> : null}
+      </ScrollView>
+      <ParticipantActionSheet controller={controller} onClose={closeActions} participantId={actionParticipantId} />
+    </View>
+  );
+}
+
+function canActOnParticipant(controller: SpaceController): boolean {
+  return controller.canMuteParticipants || controller.canRequestMedia || controller.canStopParticipantCamera || controller.canStopParticipantScreenShare || controller.canRemoveParticipants;
+}
+
+function EmptyPeople(): React.JSX.Element {
+  return (
+    <View style={styles.emptyState}>
+      <Text style={styles.emptyTitle}>No People yet</Text>
+      <Text style={styles.emptyText}>People will appear here as they join the Space.</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  content: { flex: 1, minHeight: 0 },
+  list: { paddingHorizontal: Theme.spacing.lg, paddingVertical: Theme.spacing.sm },
+  participantRow: { alignItems: "center", borderBottomColor: Theme.colors.line, borderBottomWidth: 1, flexDirection: "row", gap: Theme.spacing.sm, minHeight: 84, paddingVertical: Theme.spacing.md },
+  rowCopy: { flex: 1, minWidth: 0, paddingHorizontal: Theme.spacing.xs },
+  name: { color: Theme.colors.ink, fontSize: 16, fontWeight: "700" },
+  meta: { color: Theme.colors.ink2, fontSize: 14, marginTop: 4 },
+  mediaStatus: { alignItems: "center", justifyContent: "center", minHeight: 44, minWidth: 34 },
+  statusDot: { borderRadius: Theme.radius.full, height: 6, marginTop: 2, width: 6 },
+  moreButton: { alignItems: "center", borderColor: Theme.colors.line, borderRadius: Theme.radius.full, borderWidth: 1, height: 46, justifyContent: "center", width: 46 },
+  admissionRequest: { alignItems: "center", backgroundColor: Theme.colors.washYellow, borderColor: Theme.colors.line, borderRadius: Theme.radius.md, borderWidth: 1, flexDirection: "row", gap: Theme.spacing.sm, marginVertical: Theme.spacing.sm, padding: Theme.spacing.md },
+  admissionActions: { alignItems: "center", flexDirection: "row", gap: Theme.spacing.sm },
+  denyButton: { alignItems: "center", borderColor: Theme.colors.lineStrong, borderRadius: Theme.radius.sm, borderWidth: 1, justifyContent: "center", minHeight: 44, minWidth: 68, paddingHorizontal: Theme.spacing.md },
+  denyText: { color: Theme.colors.ink, fontSize: 14, fontWeight: "600" },
+  admitButton: { alignItems: "center", backgroundColor: Theme.colors.ink, borderRadius: Theme.radius.sm, justifyContent: "center", minHeight: 44, minWidth: 68, paddingHorizontal: Theme.spacing.md },
+  admitText: { color: Theme.colors.surface, fontSize: 14, fontWeight: "700" },
+  emptyState: { alignItems: "center", justifyContent: "center", minHeight: 220, paddingHorizontal: Theme.spacing["3xl"] },
+  emptyTitle: { color: Theme.colors.ink, fontSize: 16, fontWeight: "700" },
+  emptyText: { color: Theme.colors.ink2, fontSize: 14, marginTop: 6, textAlign: "center" },
+  pressed: { opacity: 0.72, transform: [{ scale: 0.98 }] },
+});

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

@@ -0,0 +1,372 @@
+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.test.tsx

@@ -0,0 +1,12 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const source = readFileSync(new URL("./SpaceSurfacePrimitives.tsx", import.meta.url), "utf8");
+
+describe("Space surface primitives", () => {
+  it("keeps accessible close targets and flat deterministic avatars", () => {
+    expect(source).toContain('accessibilityRole="button"');
+    expect(source).toContain("getParticipantInitials(name)");
+    expect(source).toContain("getParticipantColor(name)");
+  });
+});

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

@@ -0,0 +1,75 @@
+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.test.tsx

@@ -0,0 +1,43 @@
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("@hugeicons/core-free-icons/dist/esm/UserGroupIcon", () => ({ default: "UserGroupIcon" }));
+vi.mock("@hugeicons/react-native", () => ({ HugeiconsIcon: "HugeiconsIcon" }));
+vi.mock("react-native", () => ({
+  Image: "Image",
+  Platform: { OS: "android" },
+  StyleSheet: { create: <T,>(styles: T) => styles },
+  Text: "Text",
+  View: "View",
+}));
+vi.mock("../../ui/native-theme", () => ({
+  useNativeTheme: () => ({ colors: { darkCanvas: "#0a0a0b", border: "#1c1c1f", foreground: "#fbffff", mutedForeground: "#71717a", success: "#22c55e", surface: "#141418" } }),
+}));
+
+import { SpaceTopBarAndroid } from "./SpaceTopBar.android";
+
+describe("SpaceTopBarAndroid", () => {
+  it("keeps the space identity, elapsed duration, and participant count visible", () => {
+    const tree = SpaceTopBarAndroid({ spaceName: "Design space", participantCount: 4, formattedDuration: "1:02", logoUrl: "https://cdn.example.test/logo.png" });
+
+    const images = findElements(tree, "Image");
+    expect(images).toHaveLength(1);
+    expect(images[0]).toMatchObject({ props: { accessibilityLabel: "Chalk", source: { uri: "https://cdn.example.test/logo.png" } } });
+    expect(findText(tree)).toEqual(expect.arrayContaining(["Design space", "1:02", "4"]));
+  });
+});
+
+function findElements(value: unknown, type: string): { readonly props?: Record<string, unknown> }[] {
+  if (Array.isArray(value)) return value.flatMap((child) => findElements(child, type));
+  if (!value || typeof value !== "object") return [];
+  const element = value as { readonly type?: unknown; readonly props?: Record<string, unknown> };
+  const own = element.type === type ? [element] : [];
+  return [...own, ...findElements(element.props?.children, type)];
+}
+
+function findText(value: unknown): string[] {
+  if (typeof value === "string") return [value];
+  if (typeof value === "number") return [String(value)];
+  if (Array.isArray(value)) return value.flatMap(findText);
+  if (!value || typeof value !== "object") return [];
+  return findText((value as { readonly props?: { readonly children?: unknown } }).props?.children);
+}