@q9labsai/chalk-react-native 4.0.0

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

@@ -0,0 +1,114 @@
+import CheckmarkCircle01Icon from "@hugeicons/core-free-icons/dist/esm/CheckmarkCircle01Icon";
+import { HugeiconsIcon } from "@hugeicons/react-native";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+
+import { THEME_PALETTES, THEME_TEXTURES, type ThemeMode } from "../../ui/appearance";
+import { useNativeAppearance } from "../../ui/native-appearance-context";
+import { useNativeTheme } from "../../ui/native-theme";
+import { Theme } from "../../ui/theme";
+
+export function AppearanceSettings(): React.JSX.Element {
+  const { appearance, setPalette, setTexture } = useNativeAppearance();
+  const theme = useNativeTheme();
+  return (
+    <View style={styles.section}>
+      <Text style={[styles.intro, { color: theme.colors.ink2 }]}>Choose a complete color family, then layer in a material texture. Every combination is available on mobile.</Text>
+      {(["light", "dark"] as const).map((mode) => (
+        <PaletteGroup key={mode} mode={mode} selectedPalette={appearance.palette} theme={theme} onSelect={setPalette} />
+      ))}
+      <View style={styles.textureSection}>
+        <Text style={styles.groupLabel}>Texture</Text>
+        <View style={styles.textureGrid}>
+          {THEME_TEXTURES.map((texture) => {
+            const selected = texture.value === appearance.texture;
+            return (
+              <Pressable
+                accessibilityLabel={`Use ${texture.label} texture`}
+                accessibilityRole="button"
+                accessibilityState={{ selected }}
+                key={texture.value}
+                onPress={() => setTexture(texture.value)}
+                style={({ pressed }) => [styles.texture, { backgroundColor: theme.colors.surfaceMuted, borderColor: theme.colors.line }, selected && [styles.selected, { borderColor: theme.colors.primary }], pressed && styles.pressed]}
+              >
+                <TexturePreview kind={texture.value} background={appearance.tokens.stage} foreground={appearance.tokens.textMuted} />
+                <Text numberOfLines={1} style={[styles.textureLabel, { color: theme.colors.ink }]}>
+                  {texture.label}
+                </Text>
+              </Pressable>
+            );
+          })}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+function PaletteGroup({ mode, selectedPalette, theme, onSelect }: { readonly mode: ThemeMode; readonly selectedPalette: string; readonly theme: ReturnType<typeof useNativeTheme>; readonly onSelect: (palette: (typeof THEME_PALETTES)[number]["value"]) => void }): React.JSX.Element {
+  return (
+    <View style={styles.group}>
+      <Text style={styles.groupLabel}>{mode === "light" ? "Light palettes" : "Dark palettes"}</Text>
+      <View style={styles.paletteGrid}>
+        {THEME_PALETTES.filter((palette) => palette.mode === mode).map((palette) => {
+          const selected = palette.value === selectedPalette;
+          return (
+            <Pressable
+              accessibilityLabel={`Use ${palette.label} palette`}
+              accessibilityRole="button"
+              accessibilityState={{ selected }}
+              key={palette.value}
+              onPress={() => onSelect(palette.value)}
+              style={({ pressed }) => [styles.palette, { backgroundColor: theme.colors.surfaceMuted, borderColor: theme.colors.line }, selected && [styles.selected, { borderColor: theme.colors.primary }], pressed && styles.pressed]}
+            >
+              <View style={styles.swatches}>
+                {palette.swatch.map((color) => (
+                  <View key={color} style={[styles.swatch, { backgroundColor: color }]} />
+                ))}
+              </View>
+              <View style={styles.paletteCopy}>
+                <Text numberOfLines={1} style={[styles.paletteLabel, { color: theme.colors.ink }]}>
+                  {palette.label}
+                </Text>
+                <Text numberOfLines={1} style={[styles.family, { color: theme.colors.ink3 }]}>
+                  {palette.family}
+                </Text>
+              </View>
+              {selected ? <HugeiconsIcon color={theme.colors.success} icon={CheckmarkCircle01Icon} size={18} /> : null}
+            </Pressable>
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+function TexturePreview({ background, foreground, kind }: { readonly background: string; readonly foreground: string; readonly kind: "none" | "paper" | "slate" }): React.JSX.Element {
+  return (
+    <View style={[styles.texturePreview, { backgroundColor: background }]}>
+      {kind === "paper" ? Array.from({ length: 11 }, (_, index) => <View key={index} style={[styles.grain, { backgroundColor: foreground, left: `${(index * 29) % 91}%`, top: `${(index * 43) % 88}%` }]} />) : null}
+      {kind === "slate" ? Array.from({ length: 5 }, (_, index) => <View key={index} style={[styles.slateLine, { backgroundColor: foreground, top: 4 + index * 8 }]} />) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  section: { gap: Theme.spacing.xl },
+  intro: { color: Theme.colors.ink2, fontSize: 14, lineHeight: 20 },
+  group: { gap: Theme.spacing.sm },
+  groupLabel: { color: Theme.colors.ink3, fontSize: 11, fontWeight: "800", letterSpacing: 1, textTransform: "uppercase" },
+  paletteGrid: { flexDirection: "row", flexWrap: "wrap", gap: Theme.spacing.sm },
+  palette: { alignItems: "center", backgroundColor: Theme.colors.surfaceMuted, borderColor: Theme.colors.line, borderRadius: Theme.radius.md, borderWidth: 1, flexDirection: "row", gap: 9, minHeight: 66, padding: 9, width: "48.6%" },
+  selected: { borderColor: Theme.colors.chalkBlue, borderWidth: 2, padding: 8 },
+  swatches: { borderColor: Theme.colors.line, borderRadius: 7, borderWidth: 1, height: 42, overflow: "hidden", width: 42 },
+  swatch: { flex: 1 },
+  paletteCopy: { flex: 1, minWidth: 0 },
+  paletteLabel: { color: Theme.colors.ink, fontSize: 13, fontWeight: "700" },
+  family: { color: Theme.colors.ink3, fontSize: 11, marginTop: 2 },
+  textureSection: { gap: Theme.spacing.sm },
+  textureGrid: { flexDirection: "row", gap: Theme.spacing.sm },
+  texture: { backgroundColor: Theme.colors.surfaceMuted, borderColor: Theme.colors.line, borderRadius: Theme.radius.md, borderWidth: 1, flex: 1, overflow: "hidden", padding: 9 },
+  texturePreview: { borderColor: Theme.colors.line, borderRadius: Theme.radius.sm, borderWidth: 1, height: 44, overflow: "hidden", position: "relative" },
+  textureLabel: { color: Theme.colors.ink, fontSize: 12, fontWeight: "700", marginTop: 7, textAlign: "center" },
+  grain: { borderRadius: 1, height: 2, opacity: 0.18, position: "absolute", width: 2 },
+  slateLine: { height: 1, left: -5, opacity: 0.15, position: "absolute", transform: [{ rotate: "7deg" }], width: "120%" },
+  pressed: { opacity: 0.7, transform: [{ scale: 0.98 }] },
+});

package/src/components/native-space-view/ParticipantActionSheet.test.tsx

@@ -0,0 +1,18 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const source = readFileSync(new URL("./ParticipantActionSheet.tsx", import.meta.url), "utf8");
+
+describe("ParticipantActionSheet", () => {
+  it("keeps capability-derived actions and explicit destructive styling", () => {
+    expect(source).toContain("buildParticipantActionDescriptors({");
+    expect(source).toContain("descriptor.destructive");
+    expect(source).toContain('accessibilityLabel="Close Participant actions"');
+    expect(source).toContain("StyleSheet.absoluteFillObject");
+    expect(source).not.toContain("setParticipantRole");
+    expect(source).not.toContain("AssignableParticipantRole");
+    expect(source).not.toContain("role:");
+    expect(source).not.toContain("paddingBottom: 112");
+    expect(source).not.toContain("bottom: 94");
+  });
+});

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

@@ -0,0 +1,99 @@
+import CancelCircleIcon from "@hugeicons/core-free-icons/dist/esm/CancelCircleIcon";
+import MicOff01Icon from "@hugeicons/core-free-icons/dist/esm/MicOff01Icon";
+import UserIcon from "@hugeicons/core-free-icons/dist/esm/UserIcon";
+import Video01Icon from "@hugeicons/core-free-icons/dist/esm/Video01Icon";
+import { HugeiconsIcon } from "@hugeicons/react-native";
+import { Modal, Platform, Pressable, StyleSheet, Text, View } from "react-native";
+
+import { Theme } from "../../ui/theme";
+import { buildParticipantActionDescriptors, type ParticipantActionDescriptor } from "./space-progressive-surface-helpers";
+import { CloseButton, IconTile, InitialsAvatar } from "./SpaceSurfacePrimitives";
+import type { SpaceController } from "./space-progressive-surface-types";
+
+interface ParticipantActionSheetProps {
+  readonly controller: SpaceController;
+  readonly participantId: string | null;
+  readonly onClose: () => void;
+}
+
+export function ParticipantActionSheet({ controller, participantId, onClose }: ParticipantActionSheetProps): React.JSX.Element {
+  const participant = participantId ? controller.participants.participants.find((item) => item.id === participantId) : undefined;
+  const descriptors = buildParticipantActionDescriptors({
+    canMuteParticipants: controller.canMuteParticipants,
+    canRequestMedia: controller.canRequestMedia,
+    canStopParticipantCamera: controller.canStopParticipantCamera,
+    canStopParticipantScreenShare: controller.canStopParticipantScreenShare,
+    canRemoveParticipants: controller.canRemoveParticipants,
+  });
+
+  const run = (descriptor: ParticipantActionDescriptor) => {
+    if (!participantId) return;
+    onClose();
+    if (descriptor.kind === "mute") controller.muteParticipant(participantId);
+    if (descriptor.kind === "requestUnmute") controller.requestUnmuteParticipant(participantId);
+    if (descriptor.kind === "requestCamera") controller.requestStartParticipantCamera(participantId);
+    if (descriptor.kind === "stopCamera") controller.stopParticipantCamera(participantId);
+    if (descriptor.kind === "stopScreenShare") controller.stopParticipantScreenShare(participantId);
+    if (descriptor.kind === "remove") controller.removeParticipant(participantId);
+  };
+
+  return (
+    <Modal animationType="fade" onRequestClose={onClose} transparent visible={participantId !== null}>
+      <View style={styles.modalRoot}>
+        <Pressable accessibilityLabel="Close Participant actions" onPress={onClose} style={styles.backdrop} />
+        <View style={styles.card}>
+          <View style={styles.cardHeader}>
+            {participant ? <InitialsAvatar name={participant.displayName} size={44} /> : <IconTile icon={UserIcon} />}
+            <View style={styles.headerCopy}>
+              <Text numberOfLines={1} style={styles.name}>
+                {participant?.displayName ?? "Participant"}
+              </Text>
+            </View>
+            <CloseButton label="Close Participant actions" onPress={onClose} />
+          </View>
+          <View style={styles.actions}>
+            {descriptors
+              .filter((descriptor) => !descriptor.destructive)
+              .map((descriptor) => (
+                <ParticipantActionRow descriptor={descriptor} key={descriptor.kind} onPress={() => run(descriptor)} />
+              ))}
+            {descriptors.some((descriptor) => descriptor.destructive) ? <View style={styles.divider} /> : null}
+            {descriptors
+              .filter((descriptor) => descriptor.destructive)
+              .map((descriptor) => (
+                <ParticipantActionRow descriptor={descriptor} key={descriptor.kind} onPress={() => run(descriptor)} />
+              ))}
+          </View>
+          {!descriptors.length ? <Text style={styles.emptyText}>No actions are available for this Participant.</Text> : null}
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+function ParticipantActionRow({ descriptor, onPress }: { readonly descriptor: ParticipantActionDescriptor; readonly onPress: () => void }): React.JSX.Element {
+  const icon = descriptor.kind === "mute" || descriptor.kind === "requestUnmute" ? MicOff01Icon : descriptor.kind === "requestCamera" || descriptor.kind === "stopCamera" ? Video01Icon : CancelCircleIcon;
+  return (
+    <Pressable accessibilityLabel={descriptor.label} accessibilityRole="button" onPress={onPress} style={({ pressed }) => [styles.actionRow, descriptor.destructive && styles.destructiveRow, pressed && styles.pressed]}>
+      <HugeiconsIcon color={descriptor.destructive ? Theme.colors.error : Theme.colors.ink} icon={icon} size={21} />
+      <Text style={[styles.actionLabel, descriptor.destructive && styles.destructiveText]}>{descriptor.label}</Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  modalRoot: { alignItems: "center", flex: 1, justifyContent: "flex-end", paddingBottom: Platform.OS === "ios" ? Theme.spacing["2xl"] : Theme.spacing.lg, paddingHorizontal: Theme.spacing.lg, paddingTop: Theme.spacing.lg },
+  backdrop: { ...StyleSheet.absoluteFillObject, backgroundColor: Theme.colors.darkOverlay22 },
+  card: { backgroundColor: Theme.colors.surface, borderColor: Theme.colors.line, borderRadius: Theme.radius.lg, elevation: 8, maxHeight: "78%", overflow: "hidden", shadowColor: Theme.colors.ink, shadowOffset: { height: 4, width: 0 }, shadowOpacity: 0.14, shadowRadius: 20, width: "100%" },
+  cardHeader: { alignItems: "center", borderBottomColor: Theme.colors.line, borderBottomWidth: 1, flexDirection: "row", gap: Theme.spacing.md, minHeight: 78, paddingHorizontal: Theme.spacing.md },
+  headerCopy: { flex: 1, minWidth: 0 },
+  name: { color: Theme.colors.ink, fontSize: 17, fontWeight: "700" },
+  actions: { padding: Theme.spacing.sm },
+  actionRow: { alignItems: "center", borderRadius: Theme.radius.sm, flexDirection: "row", gap: Theme.spacing.md, minHeight: 52, paddingHorizontal: Theme.spacing.md },
+  actionLabel: { color: Theme.colors.ink, flex: 1, fontSize: 15 },
+  destructiveRow: { backgroundColor: Theme.colors.washPink, marginTop: Theme.spacing.xs },
+  destructiveText: { color: Theme.colors.error, fontWeight: "700" },
+  divider: { backgroundColor: Theme.colors.line, height: 1, marginHorizontal: Theme.spacing.md, marginVertical: Theme.spacing.xs },
+  emptyText: { color: Theme.colors.ink2, fontSize: 14, padding: Theme.spacing.lg },
+  pressed: { opacity: 0.72, transform: [{ scale: 0.985 }] },
+});

package/src/components/native-space-view/SettingsSheet.test.tsx

@@ -0,0 +1,17 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const source = readFileSync(new URL("./SettingsSheet.tsx", import.meta.url), "utf8");
+
+describe("SettingsSheet", () => {
+  it("exposes accessible tabs and real device toggles", () => {
+    expect(source).toContain('accessibilityRole="tablist"');
+    expect(source).toContain('["devices", "appearance", "space"]');
+    expect(source).toContain("controller.toggleAudio");
+    expect(source).toContain("controller.toggleVideo");
+    expect(source).toContain("<AppearanceSettings />");
+    expect(source).toContain("StyleSheet.absoluteFillObject");
+    expect(source).not.toContain("marginBottom: 94");
+    expect(source).not.toContain("bottom: 94");
+  });
+});

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

@@ -0,0 +1,164 @@
+import CheckmarkCircle01Icon from "@hugeicons/core-free-icons/dist/esm/CheckmarkCircle01Icon";
+import Mic01Icon from "@hugeicons/core-free-icons/dist/esm/Mic01Icon";
+import MicOff01Icon from "@hugeicons/core-free-icons/dist/esm/MicOff01Icon";
+import Speaker01Icon from "@hugeicons/core-free-icons/dist/esm/Speaker01Icon";
+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 { useEffect, useState } from "react";
+import { Modal, Platform, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+
+import { Theme } from "../../ui/theme";
+import { CloseButton, IconTile, SheetGrip } from "./SpaceSurfacePrimitives";
+import type { SpaceController } from "./space-progressive-surface-types";
+import { AppearanceSettings } from "./AppearanceSettings";
+
+type SettingsTab = "devices" | "appearance" | "space";
+
+export function SettingsSheet({ controller, isOpen, onClose }: { readonly controller: SpaceController; readonly isOpen: boolean; readonly onClose: () => void }): React.JSX.Element {
+  const [tab, setTab] = useState<SettingsTab>("devices");
+
+  useEffect(() => {
+    if (!isOpen) setTab("devices");
+  }, [isOpen]);
+
+  return (
+    <Modal animationType="slide" onRequestClose={onClose} transparent visible={isOpen}>
+      <View style={styles.modalRoot}>
+        <Pressable accessibilityLabel="Close Settings" onPress={onClose} style={styles.backdrop} />
+        <View style={styles.sheet}>
+          <SheetGrip />
+          <View style={styles.header}>
+            <Text style={styles.title}>Settings</Text>
+            <CloseButton label="Close Settings" onPress={onClose} />
+          </View>
+          <View accessibilityRole="tablist" style={styles.tabs}>
+            {(["devices", "appearance", "space"] as const).map((nextTab) => (
+              <Pressable accessibilityRole="tab" accessibilityState={{ selected: tab === nextTab }} key={nextTab} onPress={() => setTab(nextTab)} style={({ pressed }) => [styles.tab, tab === nextTab && styles.tabSelected, pressed && styles.pressed]}>
+                <Text style={[styles.tabText, tab === nextTab && styles.tabTextSelected]}>{nextTab[0]!.toUpperCase() + nextTab.slice(1)}</Text>
+              </Pressable>
+            ))}
+          </View>
+          <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
+            {tab === "devices" ? <DevicesSettings controller={controller} /> : null}
+            {tab === "appearance" ? <AppearanceSettings /> : null}
+            {tab === "space" ? <SpaceSettings controller={controller} /> : null}
+          </ScrollView>
+          <Pressable accessibilityRole="button" onPress={onClose} style={({ pressed }) => [styles.doneButton, pressed && styles.pressed]}>
+            <Text style={styles.doneText}>Done</Text>
+          </Pressable>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+function DevicesSettings({ controller }: { readonly controller: SpaceController }): React.JSX.Element {
+  const microphoneEnabled = !controller.isMuted;
+  const cameraEnabled = !controller.isCameraOff;
+  return (
+    <View style={styles.section}>
+      <Text style={styles.sectionIntro}>Use the controls below to set what you share in this Episode.</Text>
+      <DeviceControl disabled={controller.simulatorMediaDisabled} enabled={microphoneEnabled} icon={microphoneEnabled ? Mic01Icon : MicOff01Icon} label="Microphone" onPress={controller.toggleAudio} value={microphoneEnabled ? "On" : "Off"} />
+      <DeviceControl disabled={controller.simulatorMediaDisabled} enabled={cameraEnabled} icon={cameraEnabled ? Video01Icon : VideoOffIcon} label="Camera" onPress={controller.toggleVideo} value={cameraEnabled ? "On" : "Off"} />
+      <View style={styles.deviceRow}>
+        <IconTile icon={Speaker01Icon} />
+        <View style={styles.rowCopy}>
+          <Text style={styles.rowLabel}>Speaker</Text>
+          <Text style={styles.rowMeta}>System audio output</Text>
+        </View>
+        <Text style={styles.rowValue}>Automatic</Text>
+      </View>
+      <View style={styles.readyCard}>
+        <HugeiconsIcon color={Theme.colors.success} icon={CheckmarkCircle01Icon} size={22} />
+        <Text style={styles.readyText}>{controller.simulatorMediaDisabled ? "Device controls are unavailable here" : "Devices are ready"}</Text>
+      </View>
+    </View>
+  );
+}
+
+function DeviceControl({ disabled, enabled, icon, label, onPress, value }: { readonly disabled: boolean; readonly enabled: boolean; readonly icon: React.ComponentProps<typeof HugeiconsIcon>["icon"]; readonly label: string; readonly onPress: () => void; readonly value: string }): React.JSX.Element {
+  return (
+    <Pressable accessibilityLabel={`${label} ${value}`} accessibilityRole="button" disabled={disabled} onPress={onPress} style={({ pressed }) => [styles.deviceRow, disabled && styles.disabled, pressed && styles.pressed]}>
+      <IconTile icon={icon} color={enabled ? Theme.colors.ink : Theme.colors.error} wash={enabled ? Theme.colors.surface : Theme.colors.washPink} />
+      <View style={styles.rowCopy}>
+        <Text style={styles.rowLabel}>{label}</Text>
+        <Text style={styles.rowMeta}>{disabled ? "Unavailable on this device" : "Tap to change state"}</Text>
+      </View>
+      <Text style={[styles.rowValue, !enabled && styles.valueOff]}>{value}</Text>
+    </Pressable>
+  );
+}
+
+function SpaceSettings({ controller }: { readonly controller: SpaceController }): React.JSX.Element {
+  return (
+    <View style={styles.section}>
+      <Text style={styles.sectionIntro}>Canonical information about this Space and its current Episode.</Text>
+      <InfoRow label="Space" value="Current Space" />
+      <InfoRow label="Episode" value={controller.formattedDuration} />
+      <InfoRow label="People" value={String(controller.participantCount)} />
+      <View style={styles.infoCard}>
+        <Text style={styles.infoTitle}>Space content stays here</Text>
+        <Text style={styles.infoText}>Chat and Board content belong to this Space and remain available across Episodes.</Text>
+      </View>
+    </View>
+  );
+}
+
+function InfoRow({ label, value }: { readonly label: string; readonly value: string }): React.JSX.Element {
+  return (
+    <View style={styles.infoRow}>
+      <Text style={styles.rowLabel}>{label}</Text>
+      <Text numberOfLines={1} style={styles.infoValue}>
+        {value || "—"}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  modalRoot: { flex: 1, justifyContent: "flex-end" },
+  backdrop: { ...StyleSheet.absoluteFillObject, backgroundColor: Theme.colors.darkOverlay22 },
+  sheet: {
+    backgroundColor: Theme.colors.surface,
+    borderColor: Theme.colors.line,
+    borderTopLeftRadius: Theme.radius.xl,
+    borderTopRightRadius: Theme.radius.xl,
+    elevation: 8,
+    flex: 1,
+    marginTop: 72,
+    overflow: "hidden",
+    paddingBottom: Platform.OS === "ios" ? Theme.spacing.md : Theme.spacing.xs,
+    shadowColor: Theme.colors.ink,
+    shadowOffset: { height: -8, width: 0 },
+    shadowOpacity: 0.12,
+    shadowRadius: 22,
+  },
+  header: { alignItems: "center", borderBottomColor: Theme.colors.line, borderBottomWidth: 1, flexDirection: "row", justifyContent: "space-between", minHeight: 78, paddingHorizontal: Theme.spacing.lg },
+  title: { ...Theme.typography.heading, color: Theme.colors.ink },
+  tabs: { backgroundColor: Theme.colors.paper2, borderColor: Theme.colors.line, borderRadius: Theme.radius.md, borderWidth: 1, flexDirection: "row", margin: Theme.spacing.lg, padding: 3 },
+  tab: { alignItems: "center", borderRadius: Theme.radius.sm, flex: 1, justifyContent: "center", minHeight: 46, paddingHorizontal: Theme.spacing.sm },
+  tabSelected: { backgroundColor: Theme.colors.surface, ...Theme.shadows.sm },
+  tabText: { color: Theme.colors.ink2, fontSize: 14, fontWeight: "500" },
+  tabTextSelected: { color: Theme.colors.ink, fontWeight: "700" },
+  content: { paddingBottom: Theme.spacing.lg, paddingHorizontal: Theme.spacing.lg },
+  section: { gap: Theme.spacing.md },
+  sectionIntro: { ...Theme.typography.body, color: Theme.colors.ink2, marginBottom: Theme.spacing.sm },
+  deviceRow: { alignItems: "center", borderColor: Theme.colors.line, borderRadius: Theme.radius.md, borderWidth: 1, flexDirection: "row", gap: Theme.spacing.md, minHeight: 70, padding: Theme.spacing.md },
+  rowCopy: { flex: 1, minWidth: 0 },
+  rowLabel: { color: Theme.colors.ink, fontSize: 16, fontWeight: "600" },
+  rowMeta: { color: Theme.colors.ink2, fontSize: 13, lineHeight: 18, marginTop: 3 },
+  rowValue: { color: Theme.colors.success, fontSize: 14, fontWeight: "700" },
+  valueOff: { color: Theme.colors.error },
+  readyCard: { alignItems: "center", backgroundColor: Theme.colors.successBackground, borderColor: Theme.colors.line, borderRadius: Theme.radius.md, borderWidth: 1, flexDirection: "row", gap: Theme.spacing.sm, minHeight: 58, paddingHorizontal: Theme.spacing.md },
+  readyText: { color: Theme.colors.ink2, fontSize: 15, fontWeight: "600" },
+  disabled: { opacity: 0.52 },
+  infoRow: { alignItems: "center", borderBottomColor: Theme.colors.line, borderBottomWidth: 1, flexDirection: "row", justifyContent: "space-between", minHeight: 54, paddingHorizontal: Theme.spacing.sm },
+  infoValue: { color: Theme.colors.ink2, flexShrink: 1, fontSize: 15, marginLeft: Theme.spacing.md, maxWidth: "62%", textAlign: "right" },
+  infoCard: { backgroundColor: Theme.colors.washBlue, borderColor: Theme.colors.line, borderRadius: Theme.radius.md, borderWidth: 1, gap: Theme.spacing.sm, marginTop: Theme.spacing.sm, padding: Theme.spacing.md },
+  infoTitle: { color: Theme.colors.ink, fontSize: 15, fontWeight: "700" },
+  infoText: { color: Theme.colors.ink2, fontSize: 14, lineHeight: 20 },
+  doneButton: { alignItems: "center", borderColor: Theme.colors.lineStrong, borderRadius: Theme.radius.md, borderWidth: 1, justifyContent: "center", margin: Theme.spacing.lg, minHeight: 52 },
+  doneText: { color: Theme.colors.ink, fontSize: 16, fontWeight: "700" },
+  pressed: { opacity: 0.72, transform: [{ scale: 0.985 }] },
+});

package/src/components/native-space-view/SpaceActionMenu.test.tsx

@@ -0,0 +1,110 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("react-native", () => ({
+  Alert: { alert: vi.fn() },
+  FlatList: "FlatList",
+  Modal: "Modal",
+  Pressable: "Pressable",
+  ScrollView: "ScrollView",
+  StyleSheet: { create: <T,>(styles: T) => styles },
+  Text: "Text",
+  TextInput: "TextInput",
+  View: "View",
+}));
+vi.mock("../../ui/native-theme", () => ({
+  useNativeTheme: () => ({ colors: { background: "#0a0a0b", border: "#1c1c1f", card: "#141418", error: "#ef4444", foreground: "#fbffff", mutedForeground: "#71717a", placeholder: "#71717a", primary: "#1bb6a6", primaryForeground: "#ffffff" } }),
+}));
+
+import { selectSpaceReaction, SpaceActionMenu } from "./SpaceActionMenu";
+
+const source = readFileSync(new URL("./SpaceActionMenu.tsx", import.meta.url), "utf8");
+
+describe("SpaceActionMenu", () => {
+  it("shows only capability-backed actions and closes after a layout selection", () => {
+    const setActionsOpen = vi.fn();
+    const setLayout = vi.fn();
+    const controller = actionController({
+      canInvite: true,
+      canParticipants: false,
+      canChat: true,
+      canScreenShare: false,
+      canHandRaise: true,
+      canWhiteboard: false,
+      canReactions: false,
+      canSettings: true,
+      setActionsOpen,
+      layout: { layout: "grid", setLayout },
+    });
+
+    const tree = SpaceActionMenu({ controller });
+    const labels = findText(tree);
+
+    expect(labels).toEqual(expect.arrayContaining(["Invite participants", "Chat", "Raise hand", "Settings", "Grid layout (selected)", "Focus layout", "Presentation layout"]));
+    expect(labels).not.toContain("Participants");
+    expect(labels).not.toContain("Open whiteboard");
+
+    const presentation = findElements(tree, "Pressable").find((element) => findText(element).length === 1 && findText(element).includes("Presentation layout"));
+    const onPress = presentation?.props?.onPress;
+    if (typeof onPress === "function") onPress();
+    expect(setLayout).toHaveBeenCalledWith("presentation");
+    expect(setActionsOpen).toHaveBeenCalledWith(false);
+  });
+
+  it("routes reaction selection through the controller", () => {
+    const sendReaction = vi.fn();
+
+    selectSpaceReaction({ sendReaction } as never, "🎉");
+
+    expect(sendReaction).toHaveBeenCalledWith("🎉");
+  });
+
+  it("leaves chat and settings panel ownership to canonical mounted sheets", () => {
+    expect(source).not.toContain("ChatPanel");
+    expect(source).not.toContain("<SpacePanel");
+  });
+
+  it("does not invent a role catalog for customer-defined participant roles", () => {
+    expect(source).not.toContain("Set collaborator role");
+    expect(source).not.toContain("Set observer role");
+    expect(source).not.toContain("setParticipantRole");
+  });
+});
+
+function actionController(overrides: Record<string, unknown>): never {
+  return {
+    actionsOpen: true,
+    canHandRaise: false,
+    canInvite: false,
+    canParticipants: false,
+    canChat: false,
+    canScreenShare: false,
+    canWhiteboard: false,
+    canReactions: false,
+    canSettings: false,
+    handRaised: false,
+    screenShare: { isLocalSharing: false },
+    whiteboard: { isOpen: false, toggle: vi.fn() },
+    layout: { layout: "grid", setLayout: vi.fn() },
+    handleLeave: vi.fn(),
+    openPanel: vi.fn(),
+    setActionsOpen: vi.fn(),
+    setReactionPickerOpen: vi.fn(),
+    ...overrides,
+  } as never;
+}
+
+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 (Array.isArray(value)) return value.flatMap(findText);
+  if (!value || typeof value !== "object") return [];
+  return findText((value as { readonly props?: { readonly children?: unknown } }).props?.children);
+}

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

@@ -0,0 +1,78 @@
+import type { Reaction } from "@q9labsai/chalk-client";
+import { Modal, Pressable, StyleSheet, Text, View } from "react-native";
+
+import { Theme } from "../../ui/theme";
+import { useNativeTheme } from "../../ui/native-theme";
+import type { useSpaceViewController } from "./useSpaceViewController";
+
+type Controller = ReturnType<typeof useSpaceViewController>;
+
+export function SpaceActionMenu({ controller }: { readonly controller: Controller }): React.JSX.Element {
+  const theme = useNativeTheme();
+  const actions = [
+    ...(controller.canInvite ? [{ label: "Invite participants", onPress: controller.handleInviteParticipants }] : []),
+    ...(controller.canParticipants ? [{ label: "Participants", onPress: () => controller.openPanel("participants") }] : []),
+    ...(controller.canChat ? [{ label: "Chat", onPress: () => controller.openPanel("chat") }] : []),
+    ...(controller.canScreenShare ? [{ label: controller.screenShare.isLocalSharing ? "Stop presenting" : "Present screen", onPress: controller.toggleScreenShare }] : []),
+    ...(controller.canHandRaise ? [{ label: controller.handRaised ? "Lower hand" : "Raise hand", onPress: controller.toggleHand }] : []),
+    ...(controller.canWhiteboard ? [{ label: controller.whiteboard.isOpen ? "Close whiteboard" : "Open whiteboard", onPress: controller.whiteboard.toggle }] : []),
+    ...(controller.canReactions
+      ? [
+          {
+            label: "Reactions",
+            onPress: () => {
+              controller.setActionsOpen(false);
+              controller.setReactionPickerOpen(true);
+            },
+          },
+        ]
+      : []),
+    ...(controller.canSettings ? [{ label: "Settings", onPress: () => controller.openPanel("settings") }] : []),
+    ...(["grid", "focus", "presentation"] as const).map((layout) => ({
+      label: `${layout === "grid" ? "Grid" : layout === "focus" ? "Focus" : "Presentation"} layout${controller.layout.layout === layout ? " (selected)" : ""}`,
+      onPress: () => {
+        controller.layout.setLayout(layout);
+        controller.setActionsOpen(false);
+      },
+    })),
+  ];
+  return (
+    <Modal animationType="slide" onRequestClose={() => controller.setActionsOpen(false)} transparent visible={controller.actionsOpen}>
+      <Pressable onPress={() => controller.setActionsOpen(false)} style={styles.backdrop}>
+        <View style={[styles.sheet, { backgroundColor: theme.colors.background }]}>
+          <Text style={[styles.title, { color: theme.colors.foreground }]}>Space actions</Text>
+          {actions.map((action) => (
+            <Pressable key={action.label} onPress={action.onPress} style={({ pressed }) => [styles.action, { backgroundColor: theme.colors.card }, pressed && styles.pressed]}>
+              <Text style={[styles.actionText, { color: theme.colors.foreground }]}>{action.label}</Text>
+            </Pressable>
+          ))}
+          <Pressable onPress={controller.handleLeave} style={[styles.action, styles.dangerAction, { backgroundColor: theme.colors.card, borderColor: theme.colors.error }]}>
+            <Text style={[styles.actionText, styles.dangerText, { color: theme.colors.error }]}>Leave space</Text>
+          </Pressable>
+        </View>
+      </Pressable>
+    </Modal>
+  );
+}
+
+export function selectSpaceReaction(controller: Controller, reaction: string): void {
+  controller.sendReaction(reaction as Reaction);
+}
+
+const styles = StyleSheet.create({
+  backdrop: { flex: 1, justifyContent: "flex-end", backgroundColor: Theme.colors.darkOverlay55 },
+  sheet: {
+    gap: 8,
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    backgroundColor: Theme.colors.background,
+    padding: 24,
+    paddingBottom: 40,
+  },
+  title: { ...Theme.typography.title, color: Theme.colors.foreground },
+  action: { borderRadius: 14, backgroundColor: Theme.colors.card, padding: 16 },
+  actionText: { color: Theme.colors.foreground, fontSize: 16, fontWeight: "600" },
+  dangerAction: { marginTop: 8, borderWidth: 1, borderColor: Theme.colors.error },
+  dangerText: { color: Theme.colors.error, fontWeight: "700" },
+  pressed: { opacity: 0.65 },
+});