@q9labsai/chalk-react-native 4.1.15 → 4.1.16

package/dist/{chunk-4NLA35HE.js → chunk-ITLUHTVS.js}

@@ -12,11 +12,14 @@ import {
 import {
   createNativeSpaceClient,
   getNativeJourneyContext
-} from "./chunk-MK6OO4V7.js";
+} from "./chunk-2OS7SSXE.js";
+import {
+  getDeviceInfo
+} from "./chunk-F3NPRVHO.js";
 
 // src/components/Chalk.tsx
-import { useCallback as useCallback9, useEffect as useEffect9, useMemo as useMemo15, useRef as useRef6, useState as useState10 } from "react";
-import { Pressable as Pressable17, StyleSheet as StyleSheet25, Text as Text19, View as View24 } from "react-native";
+import { useCallback as useCallback10, useEffect as useEffect11, useMemo as useMemo16, useRef as useRef7, useState as useState13 } from "react";
+import { Pressable as Pressable19, StyleSheet as StyleSheet27, Text as Text21, View as View26 } from "react-native";
 
 // src/context/space-client-context.tsx
 import { createContext, useContext, useMemo } from "react";
@@ -58,6 +61,9 @@ function useChat() {
 function useReactions() {
   return useSpaceSlice("reactions");
 }
+function useRecording() {
+  return useSpaceSlice("recording");
+}
 function useWhiteboard() {
   return useSpaceSlice("whiteboard");
 }
@@ -189,7 +195,8 @@ function resolvePlatformVariant() {
 }
 
 // src/components/SpaceView.shared.tsx
-import { Alert as Alert3, StyleSheet as StyleSheet20, Text as Text14, View as View19 } from "react-native";
+import { useRef as useRef5, useState as useState12 } from "react";
+import { Alert as Alert3, StyleSheet as StyleSheet22, Text as Text16, View as View21 } from "react-native";
 
 // src/utils/ios-simulator.ts
 import { NativeModules, Platform as Platform2 } from "react-native";
@@ -927,7 +934,7 @@ var styles6 = StyleSheet7.create({
 // src/components/native-space-view/SpaceActionMenu.tsx
 import { Modal as Modal2, Pressable as Pressable3, StyleSheet as StyleSheet8, Text as Text4, View as View8 } from "react-native";
 import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
-function SpaceActionMenu({ controller, onOpenDiagnostics }) {
+function SpaceActionMenu({ controller, onOpenDiagnostics, onOpenFeedback }) {
   const theme = useNativeTheme();
   const actions = [
     ...controller.canInvite ? [{ label: "Invite participants", onPress: controller.handleInviteParticipants }] : [],
@@ -945,6 +952,13 @@ function SpaceActionMenu({ controller, onOpenDiagnostics }) {
         }
       }
     ] : [],
+    ...controller.canManageRecording ? [
+      {
+        label: controller.recording?.status === "recording" ? "Stop recording" : "Start recording",
+        disabled: !controller.canToggleRecording,
+        onPress: controller.toggleRecording
+      }
+    ] : [],
     ...controller.canSettings ? [{ label: "Settings", onPress: () => controller.openPanel("settings") }] : [],
     ...onOpenDiagnostics ? [
       {
@@ -955,6 +969,15 @@ function SpaceActionMenu({ controller, onOpenDiagnostics }) {
         }
       }
     ] : [],
+    ...onOpenFeedback ? [
+      {
+        label: "Feedback",
+        onPress: () => {
+          controller.setActionsOpen(false);
+          onOpenFeedback();
+        }
+      }
+    ] : [],
     ...["grid", "focus", "presentation"].map((layout) => ({
       label: `${layout === "grid" ? "Grid" : layout === "focus" ? "Focus" : "Presentation"} layout${controller.layout.layout === layout ? " (selected)" : ""}`,
       onPress: () => {
@@ -965,7 +988,7 @@ function SpaceActionMenu({ controller, onOpenDiagnostics }) {
   ];
   return /* @__PURE__ */ jsx11(Modal2, { animationType: "slide", onRequestClose: () => controller.setActionsOpen(false), transparent: true, visible: controller.actionsOpen, children: /* @__PURE__ */ jsx11(Pressable3, { onPress: () => controller.setActionsOpen(false), style: styles7.backdrop, children: /* @__PURE__ */ jsxs6(View8, { style: [styles7.sheet, { backgroundColor: theme.colors.background }], children: [
     /* @__PURE__ */ jsx11(Text4, { style: [styles7.title, { color: theme.colors.foreground }], children: "Space actions" }),
-    actions.map((action) => /* @__PURE__ */ jsx11(Pressable3, { onPress: action.onPress, style: ({ pressed }) => [styles7.action, { backgroundColor: theme.colors.card }, pressed && styles7.pressed], children: /* @__PURE__ */ jsx11(Text4, { style: [styles7.actionText, { color: theme.colors.foreground }], children: action.label }) }, action.label)),
+    actions.map((action) => /* @__PURE__ */ jsx11(Pressable3, { accessibilityRole: "button", accessibilityState: { disabled: action.disabled ?? false }, disabled: action.disabled, onPress: action.onPress, style: ({ pressed }) => [styles7.action, { backgroundColor: theme.colors.card }, pressed && styles7.pressed], children: /* @__PURE__ */ jsx11(Text4, { style: [styles7.actionText, { color: theme.colors.foreground }], children: action.label }) }, action.label)),
     /* @__PURE__ */ jsx11(Pressable3, { onPress: controller.handleLeave, style: [styles7.action, styles7.dangerAction, { backgroundColor: theme.colors.card, borderColor: theme.colors.error }], children: /* @__PURE__ */ jsx11(Text4, { style: [styles7.actionText, styles7.dangerText, { color: theme.colors.error }], children: "Leave space" }) })
   ] }) }) });
 }
@@ -990,62 +1013,376 @@ var styles7 = StyleSheet8.create({
   pressed: { opacity: 0.65 }
 });
 
+// src/components/native-space-view/FeedbackSheet.tsx
+import { useCallback as useCallback4, useEffect as useEffect3, useMemo as useMemo8, useState as useState3 } from "react";
+import { Image as Image2, KeyboardAvoidingView, Modal as Modal3, Platform as Platform6, Pressable as Pressable4, ScrollView, StyleSheet as StyleSheet9, Text as Text5, TextInput, View as View9 } from "react-native";
+
+// src/feedback/native-evidence.ts
+import { Platform as Platform4 } from "react-native";
+function createNativeFeedbackEvidence() {
+  const device = getDeviceInfo({ scriptUrl: null });
+  const kind = feedbackPlatformKind(Platform4.OS);
+  const osName = boundedString(device.systemName ?? device.platform ?? kind);
+  const osVersion = boundedString(device.osVersion);
+  const deviceModel = boundedString(device.model);
+  const reactNativeVersion = boundedString(device.reactNativeVersion);
+  const deviceClass = kind === "macos" ? "desktop" : device.interfaceIdiom === "pad" ? "tablet" : "phone";
+  return {
+    sdk: { client: "@q9labsai/chalk-client", ...reactNativeVersion ? { react_native: reactNativeVersion } : {} },
+    platform: {
+      kind,
+      ...osName ? { os_name: osName } : {},
+      ...osVersion ? { os_version: osVersion } : {},
+      device_class: deviceClass,
+      ...deviceModel ? { device_model: deviceModel } : {}
+    }
+  };
+}
+function feedbackPlatformKind(platform) {
+  if (platform === "ios") return "ios";
+  if (platform === "macos") return "macos";
+  return "android";
+}
+function boundedString(value) {
+  const normalized = value?.trim();
+  if (!normalized) return void 0;
+  return normalized.slice(0, 64);
+}
+
+// src/feedback/native-capture.ts
+import { Platform as Platform5 } from "react-native";
+import { captureRef } from "react-native-view-shot";
+var MAX_SCREENSHOT_BYTES = 450 * 1024;
+var MAX_SCREENSHOT_WIDTH = 1920;
+var MAX_SCREENSHOT_HEIGHT = 1080;
+async function captureNativeFeedbackView(target, size) {
+  if (Platform5.OS === "macos") return { state: "unavailable", failure_code: "unsupported" };
+  if (!target.current) return { state: "unavailable", failure_code: "capture_failed" };
+  const outputSize = boundedOutputSize(size);
+  if (!outputSize) return { state: "unavailable", failure_code: "capture_failed" };
+  try {
+    const captured = await captureRef(target, {
+      format: "jpg",
+      quality: 0.72,
+      result: "base64",
+      ...outputSize
+    });
+    const dataBase64 = normalizeBase64(captured);
+    if (!dataBase64) return { state: "unavailable", failure_code: "capture_failed" };
+    if (base64ByteLength(dataBase64) > MAX_SCREENSHOT_BYTES) return { state: "unavailable", failure_code: "too_large" };
+    return {
+      state: "captured",
+      mime_type: "image/jpeg",
+      width: outputSize.width,
+      height: outputSize.height,
+      captured_at: (/* @__PURE__ */ new Date()).toISOString(),
+      data_base64: dataBase64
+    };
+  } catch {
+    return { state: "unavailable", failure_code: "capture_failed" };
+  }
+}
+function boundedOutputSize(size) {
+  if (!Number.isFinite(size.width) || !Number.isFinite(size.height) || size.width <= 0 || size.height <= 0) return void 0;
+  const scale = Math.min(1, MAX_SCREENSHOT_WIDTH / size.width, MAX_SCREENSHOT_HEIGHT / size.height);
+  return {
+    width: Math.max(1, Math.floor(size.width * scale)),
+    height: Math.max(1, Math.floor(size.height * scale))
+  };
+}
+function normalizeBase64(value) {
+  return value.replace(/^data:[^;]+;base64,/u, "").replaceAll(/\s/gu, "");
+}
+function base64ByteLength(value) {
+  const padding = value.endsWith("==") ? 2 : value.endsWith("=") ? 1 : 0;
+  return Math.floor(value.length * 3 / 4) - padding;
+}
+
+// src/components/native-space-view/FeedbackSheet.tsx
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+var categories = ["bug", "feature_request", "other"];
+function FeedbackSheet({ client, requested, captureTarget, captureSize, feedbackEvidence, onClose }) {
+  const theme = useNativeTheme();
+  const [visible, setVisible] = useState3(false);
+  const [preparing, setPreparing] = useState3(false);
+  const [sending, setSending] = useState3(false);
+  const [category, setCategory] = useState3("bug");
+  const [message, setMessage] = useState3("");
+  const [screenshot, setScreenshot] = useState3({ state: "unavailable", failure_code: "capture_failed" });
+  const [prepared, setPrepared] = useState3();
+  const [error, setError] = useState3();
+  const [receiptId, setReceiptId] = useState3();
+  const evidence = useMemo8(() => ({ ...createNativeFeedbackEvidence(), ...feedbackEvidence }), [feedbackEvidence]);
+  const prepareScreenshot = useCallback4((nextScreenshot) => client.feedback.prepare({ evidence, screenshot_provider: () => nextScreenshot }), [client.feedback, evidence]);
+  useEffect3(() => {
+    if (!requested) {
+      setVisible(false);
+      return;
+    }
+    let active = true;
+    setPreparing(true);
+    setSending(false);
+    setCategory("bug");
+    setMessage("");
+    setError(void 0);
+    setReceiptId(void 0);
+    setPrepared(void 0);
+    const prepare = async () => {
+      let captured;
+      try {
+        captured = await captureNativeFeedbackView(captureTarget, captureSize);
+      } catch {
+        captured = { state: "unavailable", failure_code: "capture_failed" };
+      }
+      if (!active) return;
+      setScreenshot(captured);
+      try {
+        const nextPrepared = await prepareScreenshot(captured);
+        if (!active) return;
+        setPrepared(nextPrepared);
+      } catch (cause) {
+        if (!active) return;
+        setError(errorMessage(cause));
+      } finally {
+        if (active) {
+          setPreparing(false);
+          setVisible(true);
+        }
+      }
+    };
+    void prepare();
+    return () => {
+      active = false;
+    };
+  }, [captureSize, captureTarget, prepareScreenshot, requested]);
+  const close = useCallback4(() => {
+    setVisible(false);
+    onClose();
+  }, [onClose]);
+  const refresh = useCallback4(async () => {
+    if (preparing || sending) return;
+    setPreparing(true);
+    setPrepared(void 0);
+    setError(void 0);
+    let captured;
+    try {
+      captured = await captureNativeFeedbackView(captureTarget, captureSize);
+    } catch {
+      captured = { state: "unavailable", failure_code: "capture_failed" };
+    }
+    setScreenshot(captured);
+    try {
+      setPrepared(await prepareScreenshot(captured));
+    } catch (cause) {
+      setError(errorMessage(cause));
+    } finally {
+      setPreparing(false);
+    }
+  }, [captureSize, captureTarget, prepareScreenshot, preparing, sending]);
+  const removeScreenshot = useCallback4(async () => {
+    if (preparing || sending) return;
+    const removed = { state: "removed" };
+    setPreparing(true);
+    setPrepared(void 0);
+    setScreenshot(removed);
+    setError(void 0);
+    try {
+      setPrepared(await prepareScreenshot(removed));
+    } catch (cause) {
+      setError(errorMessage(cause));
+    } finally {
+      setPreparing(false);
+    }
+  }, [prepareScreenshot, preparing, sending]);
+  const submit = useCallback4(async () => {
+    if (sending || !message.trim()) return;
+    setSending(true);
+    setError(void 0);
+    try {
+      const request = prepared ?? await prepareScreenshot(screenshot);
+      setPrepared(request);
+      const receipt = await request.send({ category, message });
+      setReceiptId(receipt.id);
+    } catch (cause) {
+      setError(errorMessage(cause));
+    } finally {
+      setSending(false);
+    }
+  }, [category, message, prepareScreenshot, prepared, screenshot, sending]);
+  const selectCategory = useCallback4((nextCategory) => {
+    setCategory(nextCategory);
+    setPrepared(void 0);
+  }, []);
+  const updateMessage = useCallback4((nextMessage) => {
+    setMessage(nextMessage);
+    setPrepared(void 0);
+  }, []);
+  const screenshotUri = screenshotDataUri(screenshot);
+  const canSubmit = message.trim().length > 0 && !sending && !preparing && !receiptId;
+  return /* @__PURE__ */ jsx12(Modal3, { animationType: "slide", onRequestClose: close, transparent: true, visible, children: /* @__PURE__ */ jsxs7(KeyboardAvoidingView, { behavior: Platform6.OS === "ios" ? "padding" : "height", style: styles8.overlay, children: [
+    /* @__PURE__ */ jsx12(Pressable4, { accessibilityLabel: "Close Feedback", onPress: close, style: styles8.backdrop }),
+    /* @__PURE__ */ jsxs7(View9, { style: [styles8.sheet, { backgroundColor: theme.colors.background }], children: [
+      /* @__PURE__ */ jsxs7(View9, { style: styles8.header, children: [
+        /* @__PURE__ */ jsxs7(View9, { style: styles8.headerCopy, children: [
+          /* @__PURE__ */ jsx12(Text5, { accessibilityRole: "header", style: [styles8.title, { color: theme.colors.foreground }], children: "Feedback" }),
+          /* @__PURE__ */ jsx12(Text5, { style: [styles8.subtitle, { color: theme.colors.mutedForeground }], children: "Tell Chalk what happened. We receive this report with safe diagnostic context." })
+        ] }),
+        /* @__PURE__ */ jsx12(Pressable4, { accessibilityLabel: "Close Feedback", accessibilityRole: "button", disabled: sending, onPress: close, style: styles8.closeButton, children: /* @__PURE__ */ jsx12(Text5, { style: [styles8.closeText, { color: theme.colors.foreground }], children: "\xD7" }) })
+      ] }),
+      receiptId ? /* @__PURE__ */ jsxs7(View9, { style: styles8.success, children: [
+        /* @__PURE__ */ jsx12(Text5, { style: [styles8.successTitle, { color: theme.colors.foreground }], children: "Feedback sent to Chalk" }),
+        /* @__PURE__ */ jsx12(Text5, { style: [styles8.subtitle, { color: theme.colors.mutedForeground }], children: "Thanks. Chalk received your report." }),
+        /* @__PURE__ */ jsx12(Pressable4, { accessibilityRole: "button", onPress: close, style: [styles8.primaryButton, { backgroundColor: theme.colors.primary }], children: /* @__PURE__ */ jsx12(Text5, { style: [styles8.primaryButtonText, { color: theme.colors.primaryForeground }], children: "Done" }) })
+      ] }) : /* @__PURE__ */ jsxs7(ScrollView, { contentContainerStyle: styles8.content, keyboardShouldPersistTaps: "handled", children: [
+        /* @__PURE__ */ jsx12(Text5, { style: [styles8.label, { color: theme.colors.foreground }], children: "Category" }),
+        /* @__PURE__ */ jsx12(View9, { style: styles8.categoryRow, children: categories.map((option) => /* @__PURE__ */ jsx12(
+          Pressable4,
+          {
+            accessibilityRole: "button",
+            accessibilityState: { selected: category === option },
+            onPress: () => selectCategory(option),
+            style: [styles8.categoryButton, { borderColor: theme.colors.border }, category === option && { backgroundColor: theme.colors.primary, borderColor: theme.colors.primary }],
+            children: /* @__PURE__ */ jsx12(Text5, { style: [styles8.categoryText, { color: category === option ? theme.colors.primaryForeground : theme.colors.foreground }], children: categoryLabel(option) })
+          },
+          option
+        )) }),
+        /* @__PURE__ */ jsx12(Text5, { style: [styles8.label, { color: theme.colors.foreground }], children: "Message" }),
+        /* @__PURE__ */ jsx12(
+          TextInput,
+          {
+            accessibilityLabel: "Feedback message",
+            editable: !sending,
+            maxLength: 8e3,
+            multiline: true,
+            onChangeText: updateMessage,
+            placeholder: category === "bug" ? "What went wrong?" : category === "feature_request" ? "What would help?" : "What should Chalk know?",
+            placeholderTextColor: theme.colors.placeholder,
+            style: [styles8.messageInput, { borderColor: theme.colors.border, color: theme.colors.foreground }],
+            textAlignVertical: "top",
+            value: message
+          }
+        ),
+        /* @__PURE__ */ jsx12(Text5, { style: [styles8.label, { color: theme.colors.foreground }], children: "Screenshot" }),
+        screenshotUri ? /* @__PURE__ */ jsxs7(View9, { style: styles8.thumbnailFrame, children: [
+          /* @__PURE__ */ jsx12(Image2, { accessibilityLabel: "Feedback screenshot preview", source: { uri: screenshotUri }, style: styles8.thumbnail }),
+          /* @__PURE__ */ jsxs7(View9, { style: styles8.thumbnailActions, children: [
+            /* @__PURE__ */ jsx12(Pressable4, { accessibilityRole: "button", disabled: preparing || sending, onPress: () => void refresh(), style: styles8.smallButton, children: /* @__PURE__ */ jsx12(Text5, { style: [styles8.smallButtonText, { color: theme.colors.primary }], children: "Refresh" }) }),
+            /* @__PURE__ */ jsx12(Pressable4, { accessibilityRole: "button", disabled: preparing || sending, onPress: () => void removeScreenshot(), style: styles8.smallButton, children: /* @__PURE__ */ jsx12(Text5, { style: [styles8.smallButtonText, { color: theme.colors.error }], children: "Remove" }) })
+          ] })
+        ] }) : /* @__PURE__ */ jsxs7(View9, { style: [styles8.unavailable, { borderColor: theme.colors.border }], children: [
+          /* @__PURE__ */ jsx12(Text5, { style: [styles8.unavailableText, { color: theme.colors.mutedForeground }], children: "Screenshot unavailable. You can still send Feedback." }),
+          /* @__PURE__ */ jsx12(Pressable4, { accessibilityRole: "button", disabled: preparing || sending, onPress: () => void refresh(), style: styles8.smallButton, children: /* @__PURE__ */ jsx12(Text5, { style: [styles8.smallButtonText, { color: theme.colors.primary }], children: "Refresh" }) })
+        ] }),
+        screenshot.state === "partial" ? /* @__PURE__ */ jsx12(Text5, { style: [styles8.notice, { color: theme.colors.mutedForeground }], children: "Some protected content may be missing from this screenshot." }) : null,
+        preparing ? /* @__PURE__ */ jsx12(Text5, { style: [styles8.notice, { color: theme.colors.mutedForeground }], children: "Preparing Feedback\u2026" }) : null,
+        error ? /* @__PURE__ */ jsx12(Text5, { accessibilityLiveRegion: "polite", style: [styles8.error, { color: theme.colors.error }], children: error }) : null,
+        /* @__PURE__ */ jsx12(Pressable4, { accessibilityRole: "button", disabled: !canSubmit, onPress: () => void submit(), style: [styles8.primaryButton, { backgroundColor: theme.colors.primary }, !canSubmit && styles8.disabledButton], children: /* @__PURE__ */ jsx12(Text5, { style: [styles8.primaryButtonText, { color: theme.colors.primaryForeground }], children: sending ? "Sending\u2026" : "Send Feedback" }) }),
+        /* @__PURE__ */ jsx12(Text5, { style: [styles8.footer, { color: theme.colors.mutedForeground }], children: "Chalk includes safe Space state, journey, and diagnostic details. It never includes credentials, names, or message content outside this report. There is no reply channel." })
+      ] })
+    ] })
+  ] }) });
+}
+function screenshotDataUri(screenshot) {
+  if (screenshot.state !== "captured" && screenshot.state !== "partial") return void 0;
+  return `data:${screenshot.mime_type};base64,${screenshot.data_base64}`;
+}
+function categoryLabel(category) {
+  if (category === "feature_request") return "Feature request";
+  if (category === "bug") return "Bug";
+  return "Other";
+}
+function errorMessage(cause) {
+  return cause instanceof Error ? cause.message : "Chalk could not send Feedback.";
+}
+var styles8 = StyleSheet9.create({
+  overlay: { flex: 1, justifyContent: "flex-end", backgroundColor: Theme.colors.darkOverlay55 },
+  backdrop: { ...StyleSheet9.absoluteFillObject },
+  sheet: { maxHeight: "92%", borderTopLeftRadius: 24, borderTopRightRadius: 24, padding: 24, paddingBottom: 36 },
+  header: { flexDirection: "row", alignItems: "flex-start", justifyContent: "space-between", gap: 16, marginBottom: 20 },
+  headerCopy: { flex: 1, gap: 4 },
+  title: { ...Theme.typography.heading },
+  subtitle: { ...Theme.typography.body },
+  closeButton: { alignItems: "center", borderColor: Theme.colors.border, borderRadius: Theme.radius.full, borderWidth: 1, height: 36, justifyContent: "center", width: 36 },
+  closeText: { fontSize: 24, lineHeight: 26 },
+  content: { gap: 12, paddingBottom: 8 },
+  label: { ...Theme.typography.label, marginTop: 4 },
+  categoryRow: { flexDirection: "row", flexWrap: "wrap", gap: 8 },
+  categoryButton: { borderRadius: 14, borderWidth: 1, paddingHorizontal: 13, paddingVertical: 10 },
+  categoryText: { fontSize: 14, fontWeight: "700" },
+  messageInput: { minHeight: 116, borderRadius: 14, borderWidth: 1, padding: 14, fontSize: 15, lineHeight: 21 },
+  thumbnailFrame: { borderRadius: 16, overflow: "hidden", borderWidth: 1, borderColor: Theme.colors.border },
+  thumbnail: { width: "100%", height: 170, backgroundColor: Theme.colors.surfaceMuted },
+  thumbnailActions: { flexDirection: "row", gap: 16, paddingHorizontal: 12, paddingVertical: 8 },
+  unavailable: { borderRadius: 14, borderWidth: 1, padding: 14, gap: 4 },
+  unavailableText: { ...Theme.typography.body },
+  smallButton: { alignSelf: "flex-start", paddingVertical: 6, paddingHorizontal: 2 },
+  smallButtonText: { fontSize: 14, fontWeight: "700" },
+  notice: { ...Theme.typography.meta },
+  error: { ...Theme.typography.meta, fontWeight: "700" },
+  primaryButton: { alignItems: "center", borderRadius: 14, justifyContent: "center", minHeight: 50, marginTop: 8, paddingHorizontal: 16 },
+  primaryButtonText: { fontSize: 16, fontWeight: "800" },
+  disabledButton: { opacity: 0.45 },
+  footer: { ...Theme.typography.meta, marginTop: 4 },
+  success: { gap: 12, paddingVertical: 28 },
+  successTitle: { ...Theme.typography.subheading }
+});
+
 // src/components/native-space-view/SpaceStage.android.tsx
 import ComputerScreenShareIcon from "@hugeicons/core-free-icons/dist/esm/ComputerScreenShareIcon";
 import MicOff01Icon3 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 as HugeiconsIcon3 } from "@hugeicons/react-native";
-import { FlatList as FlatList2, StyleSheet as StyleSheet9, Text as Text5, View as View9 } from "react-native";
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { FlatList as FlatList2, StyleSheet as StyleSheet10, Text as Text6, View as View10 } from "react-native";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function getParticipantStripTrack(participant) {
   return participant.videoTrack ?? null;
 }
 function StageSurface({ children }) {
   const theme = useNativeTheme();
-  return /* @__PURE__ */ jsx12(View9, { style: [styles8.surface, { backgroundColor: theme.colors.stageBackground }], children });
+  return /* @__PURE__ */ jsx13(View10, { style: [styles9.surface, { backgroundColor: theme.colors.stageBackground }], children });
 }
 function InfoChip({ icon, label, align = "left" }) {
   const theme = useNativeTheme();
-  return /* @__PURE__ */ jsxs7(View9, { style: [styles8.infoChip, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }, align === "right" ? styles8.infoChipRight : styles8.infoChipLeft], children: [
-    /* @__PURE__ */ jsx12(HugeiconsIcon3, { color: theme.colors.foreground, icon, size: 14 }),
-    /* @__PURE__ */ jsx12(Text5, { style: [styles8.infoChipText, { color: theme.colors.foreground }], children: label })
+  return /* @__PURE__ */ jsxs8(View10, { style: [styles9.infoChip, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }, align === "right" ? styles9.infoChipRight : styles9.infoChipLeft], children: [
+    /* @__PURE__ */ jsx13(HugeiconsIcon3, { color: theme.colors.foreground, icon, size: 14 }),
+    /* @__PURE__ */ jsx13(Text6, { style: [styles9.infoChipText, { color: theme.colors.foreground }], children: label })
   ] });
 }
 function NativeWhiteboardPlaceholder({ whiteboard }) {
-  return /* @__PURE__ */ jsxs7(StageSurface, { children: [
-    /* @__PURE__ */ jsx12(GradientSurface, { angle: "diagonal", borderRadius: 24, opacity: 0.6, participantId: "whiteboard-stage" }),
-    /* @__PURE__ */ jsxs7(View9, { style: styles8.placeholderCenter, children: [
-      /* @__PURE__ */ jsx12(View9, { style: styles8.presentingIconCircle, children: /* @__PURE__ */ jsx12(HugeiconsIcon3, { color: Theme.colors.primary, icon: Presentation01Icon, size: 32 }) }),
-      /* @__PURE__ */ jsx12(Text5, { style: styles8.placeholderEyebrow, children: "SHARED CANVAS" }),
-      /* @__PURE__ */ jsx12(Text5, { style: styles8.placeholderTitle, children: "Whiteboard active" }),
-      /* @__PURE__ */ jsx12(Text5, { style: styles8.placeholderCopy, children: whiteboard.canDraw ? "Collaborative board is open." : "Board is open in view-only mode." })
+  return /* @__PURE__ */ jsxs8(StageSurface, { children: [
+    /* @__PURE__ */ jsx13(GradientSurface, { angle: "diagonal", borderRadius: 24, opacity: 0.6, participantId: "whiteboard-stage" }),
+    /* @__PURE__ */ jsxs8(View10, { style: styles9.placeholderCenter, children: [
+      /* @__PURE__ */ jsx13(View10, { style: styles9.presentingIconCircle, children: /* @__PURE__ */ jsx13(HugeiconsIcon3, { color: Theme.colors.primary, icon: Presentation01Icon, size: 32 }) }),
+      /* @__PURE__ */ jsx13(Text6, { style: styles9.placeholderEyebrow, children: "SHARED CANVAS" }),
+      /* @__PURE__ */ jsx13(Text6, { style: styles9.placeholderTitle, children: "Whiteboard active" }),
+      /* @__PURE__ */ jsx13(Text6, { style: styles9.placeholderCopy, children: whiteboard.canDraw ? "Collaborative board is open." : "Board is open in view-only mode." })
     ] })
   ] });
 }
 function NativeLocalSharePlaceholder() {
-  return /* @__PURE__ */ jsxs7(StageSurface, { children: [
-    /* @__PURE__ */ jsx12(GradientSurface, { angle: "diagonal", borderRadius: 24, opacity: 0.4, participantId: "local-presenting" }),
-    /* @__PURE__ */ jsxs7(View9, { style: styles8.placeholderCenter, children: [
-      /* @__PURE__ */ jsx12(View9, { style: styles8.presentingIconCircle, children: /* @__PURE__ */ jsx12(HugeiconsIcon3, { color: Theme.colors.primary, icon: ComputerScreenShareIcon, size: 32 }) }),
-      /* @__PURE__ */ jsx12(Text5, { style: styles8.placeholderEyebrow, children: "YOU ARE PRESENTING" }),
-      /* @__PURE__ */ jsx12(Text5, { style: styles8.placeholderTitle, children: "Screen sharing active" }),
-      /* @__PURE__ */ jsx12(Text5, { style: styles8.placeholderCopy, children: "Your preview is hidden here to prevent an infinite mirror effect. Everyone else can see your screen." })
+  return /* @__PURE__ */ jsxs8(StageSurface, { children: [
+    /* @__PURE__ */ jsx13(GradientSurface, { angle: "diagonal", borderRadius: 24, opacity: 0.4, participantId: "local-presenting" }),
+    /* @__PURE__ */ jsxs8(View10, { style: styles9.placeholderCenter, children: [
+      /* @__PURE__ */ jsx13(View10, { style: styles9.presentingIconCircle, children: /* @__PURE__ */ jsx13(HugeiconsIcon3, { color: Theme.colors.primary, icon: ComputerScreenShareIcon, size: 32 }) }),
+      /* @__PURE__ */ jsx13(Text6, { style: styles9.placeholderEyebrow, children: "YOU ARE PRESENTING" }),
+      /* @__PURE__ */ jsx13(Text6, { style: styles9.placeholderTitle, children: "Screen sharing active" }),
+      /* @__PURE__ */ jsx13(Text6, { style: styles9.placeholderCopy, children: "Your preview is hidden here to prevent an infinite mirror effect. Everyone else can see your screen." })
     ] })
   ] });
 }
 function NativeParticipantStrip({ participants, vertical }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     FlatList2,
     {
-      contentContainerStyle: [styles8.stripContent, vertical ? styles8.stripVertical : styles8.stripHorizontal],
+      contentContainerStyle: [styles9.stripContent, vertical ? styles9.stripVertical : styles9.stripHorizontal],
       data: participants,
       horizontal: !vertical,
       initialNumToRender: vertical ? 4 : 5,
       keyExtractor: (participant, index) => `${participant.id}-${index}`,
       maxToRenderPerBatch: vertical ? 5 : 6,
       removeClippedSubviews: true,
-      renderItem: ({ item: participant }) => /* @__PURE__ */ jsx12(View9, { style: [styles8.stripTile, vertical ? styles8.stripTileVertical : styles8.stripTileHorizontal], children: /* @__PURE__ */ jsx12(MediaView, { emphasizeMuted: true, participant, track: getParticipantStripTrack(participant) }) }),
+      renderItem: ({ item: participant }) => /* @__PURE__ */ jsx13(View10, { style: [styles9.stripTile, vertical ? styles9.stripTileVertical : styles9.stripTileHorizontal], children: /* @__PURE__ */ jsx13(MediaView, { emphasizeMuted: true, participant, track: getParticipantStripTrack(participant) }) }),
       showsHorizontalScrollIndicator: false,
       showsVerticalScrollIndicator: false,
       windowSize: 4
@@ -1057,35 +1394,35 @@ function SpaceStageAndroid({ layoutMode, isCompactViewport, primaryContent, scre
   const verticalStrip = !isCompactViewport && layoutMode === "focus";
   let primaryStage;
   if (primaryContent === "whiteboard") {
-    primaryStage = /* @__PURE__ */ jsx12(NativeWhiteboardPlaceholder, { whiteboard });
+    primaryStage = /* @__PURE__ */ jsx13(NativeWhiteboardPlaceholder, { whiteboard });
   } else if (primaryContent === "screen-share-placeholder") {
-    primaryStage = /* @__PURE__ */ jsx12(NativeLocalSharePlaceholder, {});
+    primaryStage = /* @__PURE__ */ jsx13(NativeLocalSharePlaceholder, {});
   } else if (primaryContent === "split") {
-    primaryStage = /* @__PURE__ */ jsxs7(View9, { style: styles8.splitStage, children: [
-      /* @__PURE__ */ jsx12(View9, { style: styles8.splitPanel, children: /* @__PURE__ */ jsx12(StageSurface, { children: /* @__PURE__ */ jsx12(MediaView, { participant: screenSharer, track: screenShareTrack, objectFit: "contain" }) }) }),
-      /* @__PURE__ */ jsx12(View9, { style: styles8.splitPanel, children: /* @__PURE__ */ jsx12(NativeWhiteboardPlaceholder, { whiteboard }) })
+    primaryStage = /* @__PURE__ */ jsxs8(View10, { style: styles9.splitStage, children: [
+      /* @__PURE__ */ jsx13(View10, { style: styles9.splitPanel, children: /* @__PURE__ */ jsx13(StageSurface, { children: /* @__PURE__ */ jsx13(MediaView, { participant: screenSharer, track: screenShareTrack, objectFit: "contain" }) }) }),
+      /* @__PURE__ */ jsx13(View10, { style: styles9.splitPanel, children: /* @__PURE__ */ jsx13(NativeWhiteboardPlaceholder, { whiteboard }) })
     ] });
   } else {
-    primaryStage = /* @__PURE__ */ jsx12(StageSurface, { children: /* @__PURE__ */ jsx12(MediaView, { participant: screenSharer, track: screenShareTrack, label: screenSharer?.displayName || "Participant", objectFit: "contain" }) });
+    primaryStage = /* @__PURE__ */ jsx13(StageSurface, { children: /* @__PURE__ */ jsx13(MediaView, { participant: screenSharer, track: screenShareTrack, label: screenSharer?.displayName || "Participant", objectFit: "contain" }) });
   }
-  return /* @__PURE__ */ jsxs7(View9, { style: [styles8.container, { backgroundColor: theme.colors.darkCanvas }, verticalStrip && styles8.containerVertical], children: [
-    /* @__PURE__ */ jsxs7(View9, { style: styles8.primaryFrame, children: [
+  return /* @__PURE__ */ jsxs8(View10, { style: [styles9.container, { backgroundColor: theme.colors.darkCanvas }, verticalStrip && styles9.containerVertical], children: [
+    /* @__PURE__ */ jsxs8(View10, { style: styles9.primaryFrame, children: [
       primaryStage,
-      raisedHandCount > 0 ? /* @__PURE__ */ jsx12(InfoChip, { icon: WavingHand01Icon, label: raisedHandCount === 1 ? "1 hand raised" : `${raisedHandCount} hands raised` }) : null,
-      activeReactions.length > 0 ? /* @__PURE__ */ jsx12(View9, { style: styles8.reactionRail, children: activeReactions.map((reaction, index) => /* @__PURE__ */ jsxs7(View9, { style: [styles8.reactionBubble, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }], children: [
-        /* @__PURE__ */ jsx12(Text5, { style: styles8.reactionEmoji, children: reaction.emoji }),
-        /* @__PURE__ */ jsx12(Text5, { numberOfLines: 1, style: [styles8.reactionName, { color: theme.colors.foreground }], children: reaction.participantName })
+      raisedHandCount > 0 ? /* @__PURE__ */ jsx13(InfoChip, { icon: WavingHand01Icon, label: raisedHandCount === 1 ? "1 hand raised" : `${raisedHandCount} hands raised` }) : null,
+      activeReactions.length > 0 ? /* @__PURE__ */ jsx13(View10, { style: styles9.reactionRail, children: activeReactions.map((reaction, index) => /* @__PURE__ */ jsxs8(View10, { style: [styles9.reactionBubble, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }], children: [
+        /* @__PURE__ */ jsx13(Text6, { style: styles9.reactionEmoji, children: reaction.emoji }),
+        /* @__PURE__ */ jsx13(Text6, { numberOfLines: 1, style: [styles9.reactionName, { color: theme.colors.foreground }], children: reaction.participantName })
       ] }, `${reaction.id}-${index}`)) }) : null,
-      /* @__PURE__ */ jsxs7(View9, { style: [styles8.identityBar, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }], children: [
-        /* @__PURE__ */ jsx12(Text5, { style: [styles8.nameLabel, { color: theme.colors.foreground }], numberOfLines: 1, children: selfName }),
-        isMuted ? /* @__PURE__ */ jsx12(View9, { style: styles8.muteIndicator, children: /* @__PURE__ */ jsx12(HugeiconsIcon3, { color: theme.colors.primaryForeground, icon: MicOff01Icon3, size: 10 }) }) : null,
-        handRaised ? /* @__PURE__ */ jsx12(View9, { style: styles8.handIndicator, children: /* @__PURE__ */ jsx12(HugeiconsIcon3, { color: theme.colors.primaryForeground, icon: WavingHand01Icon, size: 10 }) }) : null
+      /* @__PURE__ */ jsxs8(View10, { style: [styles9.identityBar, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }], children: [
+        /* @__PURE__ */ jsx13(Text6, { style: [styles9.nameLabel, { color: theme.colors.foreground }], numberOfLines: 1, children: selfName }),
+        isMuted ? /* @__PURE__ */ jsx13(View10, { style: styles9.muteIndicator, children: /* @__PURE__ */ jsx13(HugeiconsIcon3, { color: theme.colors.primaryForeground, icon: MicOff01Icon3, size: 10 }) }) : null,
+        handRaised ? /* @__PURE__ */ jsx13(View10, { style: styles9.handIndicator, children: /* @__PURE__ */ jsx13(HugeiconsIcon3, { color: theme.colors.primaryForeground, icon: WavingHand01Icon, size: 10 }) }) : null
       ] })
     ] }),
-    stripParticipants.length > 0 ? /* @__PURE__ */ jsx12(View9, { style: [styles8.stripShell, verticalStrip ? styles8.stripShellVertical : styles8.stripShellHorizontal], children: /* @__PURE__ */ jsx12(NativeParticipantStrip, { participants: stripParticipants, vertical: verticalStrip }) }) : null
+    stripParticipants.length > 0 ? /* @__PURE__ */ jsx13(View10, { style: [styles9.stripShell, verticalStrip ? styles9.stripShellVertical : styles9.stripShellHorizontal], children: /* @__PURE__ */ jsx13(NativeParticipantStrip, { participants: stripParticipants, vertical: verticalStrip }) }) : null
   ] });
 }
-var styles8 = StyleSheet9.create({
+var styles9 = StyleSheet10.create({
   container: {
     flex: 1,
     width: "100%",
@@ -1276,13 +1613,13 @@ var styles8 = StyleSheet9.create({
 // src/components/native-space-view/SpaceTopBar.android.tsx
 import UserGroupIcon from "@hugeicons/core-free-icons/dist/esm/UserGroupIcon";
 import { HugeiconsIcon as HugeiconsIcon4 } from "@hugeicons/react-native";
-import { Image as Image2, Platform as Platform4, StyleSheet as StyleSheet10, Text as Text6, View as View10 } from "react-native";
+import { Image as Image3, Platform as Platform7, StyleSheet as StyleSheet11, Text as Text7, View as View11 } from "react-native";
 
 // src/components/logo/Logo.tsx
-import { useEffect as useEffect3, useId, useRef as useRef2, useState as useState3 } from "react";
-import { AccessibilityInfo, Animated, Pressable as Pressable4 } from "react-native";
+import { useEffect as useEffect4, useId, useRef as useRef2, useState as useState4 } from "react";
+import { AccessibilityInfo, Animated, Pressable as Pressable5 } from "react-native";
 import Svg, { Defs, Ellipse, G, LinearGradient, Path, Stop, Text as SvgText } from "react-native-svg";
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 var AnimatedG = Animated.createAnimatedComponent(G);
 var STICK_MOTIONS = [
   {
@@ -1423,8 +1760,8 @@ function resetStickAnimationValues(values) {
   }
 }
 function Logo({ accessibilityLabel = "Chalk", color = DEFAULT_COLOR, height = DEFAULT_HEIGHT, motion = DEFAULT_MOTION, variant = DEFAULT_VARIANT }) {
-  const [reducedMotion, setReducedMotion] = useState3(null);
-  const [interaction, setInteraction] = useState3({ focus: false, hover: false, press: false });
+  const [reducedMotion, setReducedMotion] = useState4(null);
+  const [interaction, setInteraction] = useState4({ focus: false, hover: false, press: false });
   const idPrefix = `chalk-logo-${useId().replace(/[^a-zA-Z0-9_-]/gu, "")}`;
   const animationValues = useRef2(null);
   if (animationValues.current === null) {
@@ -1433,7 +1770,7 @@ function Logo({ accessibilityLabel = "Chalk", color = DEFAULT_COLOR, height = DE
   const sticks = animationValues.current;
   const interactionActive = interaction.focus || interaction.hover || interaction.press;
   const animate = motion === "orbit-burst" && reducedMotion === false;
-  useEffect3(() => {
+  useEffect4(() => {
     let cancelled = false;
     const subscription = AccessibilityInfo.addEventListener("reduceMotionChanged", setReducedMotion);
     void AccessibilityInfo.isReduceMotionEnabled().then((enabled) => {
@@ -1446,7 +1783,7 @@ function Logo({ accessibilityLabel = "Chalk", color = DEFAULT_COLOR, height = DE
       subscription.remove();
     };
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!animate) {
       resetStickAnimationValues(sticks);
       return;
@@ -1464,8 +1801,8 @@ function Logo({ accessibilityLabel = "Chalk", color = DEFAULT_COLOR, height = DE
   const width = variant === "wordmark" ? height * 2.5 : height * (68 / 80);
   const viewBox = variant === "wordmark" ? WORDMARK_VIEW_BOX : MARK_VIEW_BOX;
   const accessible = accessibilityLabel !== null;
-  return /* @__PURE__ */ jsx13(
-    Pressable4,
+  return /* @__PURE__ */ jsx14(
+    Pressable5,
     {
       accessible: false,
       onBlur: () => setInteractionFlag("focus", false),
@@ -1474,69 +1811,77 @@ function Logo({ accessibilityLabel = "Chalk", color = DEFAULT_COLOR, height = DE
       onHoverOut: () => setInteractionFlag("hover", false),
       onPressIn: () => setInteractionFlag("press", true),
       onPressOut: () => setInteractionFlag("press", false),
-      children: /* @__PURE__ */ jsxs8(Svg, { accessibilityLabel: accessible ? accessibilityLabel ?? void 0 : void 0, accessible, color, fill: "none", focusable: false, height, viewBox, width, children: [
-        /* @__PURE__ */ jsxs8(Defs, { children: [
-          /* @__PURE__ */ jsxs8(LinearGradient, { id: `${idPrefix}-green`, x1: "0%", x2: "100%", y1: "0%", y2: "0%", children: [
-            /* @__PURE__ */ jsx13(Stop, { offset: "0%", stopColor: "#C5E5C0" }),
-            /* @__PURE__ */ jsx13(Stop, { offset: "100%", stopColor: "#80B879" })
+      children: /* @__PURE__ */ jsxs9(Svg, { accessibilityLabel: accessible ? accessibilityLabel ?? void 0 : void 0, accessible, color, fill: "none", focusable: false, height, viewBox, width, children: [
+        /* @__PURE__ */ jsxs9(Defs, { children: [
+          /* @__PURE__ */ jsxs9(LinearGradient, { id: `${idPrefix}-green`, x1: "0%", x2: "100%", y1: "0%", y2: "0%", children: [
+            /* @__PURE__ */ jsx14(Stop, { offset: "0%", stopColor: "#C5E5C0" }),
+            /* @__PURE__ */ jsx14(Stop, { offset: "100%", stopColor: "#80B879" })
           ] }),
-          /* @__PURE__ */ jsxs8(LinearGradient, { id: `${idPrefix}-yellow`, x1: "0%", x2: "100%", y1: "0%", y2: "0%", children: [
-            /* @__PURE__ */ jsx13(Stop, { offset: "0%", stopColor: "#FCEAB3" }),
-            /* @__PURE__ */ jsx13(Stop, { offset: "100%", stopColor: "#D9B641" })
+          /* @__PURE__ */ jsxs9(LinearGradient, { id: `${idPrefix}-yellow`, x1: "0%", x2: "100%", y1: "0%", y2: "0%", children: [
+            /* @__PURE__ */ jsx14(Stop, { offset: "0%", stopColor: "#FCEAB3" }),
+            /* @__PURE__ */ jsx14(Stop, { offset: "100%", stopColor: "#D9B641" })
           ] }),
-          /* @__PURE__ */ jsxs8(LinearGradient, { id: `${idPrefix}-blue`, x1: "0%", x2: "100%", y1: "0%", y2: "0%", children: [
-            /* @__PURE__ */ jsx13(Stop, { offset: "0%", stopColor: "#B2E0F0" }),
-            /* @__PURE__ */ jsx13(Stop, { offset: "100%", stopColor: "#55AAC9" })
+          /* @__PURE__ */ jsxs9(LinearGradient, { id: `${idPrefix}-blue`, x1: "0%", x2: "100%", y1: "0%", y2: "0%", children: [
+            /* @__PURE__ */ jsx14(Stop, { offset: "0%", stopColor: "#B2E0F0" }),
+            /* @__PURE__ */ jsx14(Stop, { offset: "100%", stopColor: "#55AAC9" })
           ] }),
-          /* @__PURE__ */ jsxs8(LinearGradient, { id: `${idPrefix}-pink`, x1: "0%", x2: "100%", y1: "0%", y2: "0%", children: [
-            /* @__PURE__ */ jsx13(Stop, { offset: "0%", stopColor: "#F8CACA" }),
-            /* @__PURE__ */ jsx13(Stop, { offset: "100%", stopColor: "#D67B7B" })
+          /* @__PURE__ */ jsxs9(LinearGradient, { id: `${idPrefix}-pink`, x1: "0%", x2: "100%", y1: "0%", y2: "0%", children: [
+            /* @__PURE__ */ jsx14(Stop, { offset: "0%", stopColor: "#F8CACA" }),
+            /* @__PURE__ */ jsx14(Stop, { offset: "100%", stopColor: "#D67B7B" })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs8(G, { transform: "translate(2, 2) scale(0.95)", children: [
-          /* @__PURE__ */ jsxs8(AnimatedG, { originX: STICK_MOTIONS[0].originX, originY: STICK_MOTIONS[0].originY, rotation: sticks[0].rotation, scaleX: sticks[0].scaleX, scaleY: sticks[0].scaleY, transform: STICK_MOTIONS[0].transform, translateX: sticks[0].translateX, translateY: sticks[0].translateY, children: [
-            /* @__PURE__ */ jsx13(Path, { d: "M9,20 L21,20 L22,63 A7,7 0 0 1 8,63 Z", fill: `url(#${idPrefix}-green)` }),
-            /* @__PURE__ */ jsx13(Ellipse, { cx: "15", cy: "20", fill: "#D8ECD4", rx: "6", ry: "2.5" })
+        /* @__PURE__ */ jsxs9(G, { transform: "translate(2, 2) scale(0.95)", children: [
+          /* @__PURE__ */ jsxs9(AnimatedG, { originX: STICK_MOTIONS[0].originX, originY: STICK_MOTIONS[0].originY, rotation: sticks[0].rotation, scaleX: sticks[0].scaleX, scaleY: sticks[0].scaleY, transform: STICK_MOTIONS[0].transform, translateX: sticks[0].translateX, translateY: sticks[0].translateY, children: [
+            /* @__PURE__ */ jsx14(Path, { d: "M9,20 L21,20 L22,63 A7,7 0 0 1 8,63 Z", fill: `url(#${idPrefix}-green)` }),
+            /* @__PURE__ */ jsx14(Ellipse, { cx: "15", cy: "20", fill: "#D8ECD4", rx: "6", ry: "2.5" })
           ] }),
-          /* @__PURE__ */ jsxs8(AnimatedG, { originX: STICK_MOTIONS[1].originX, originY: STICK_MOTIONS[1].originY, rotation: sticks[1].rotation, scaleX: sticks[1].scaleX, scaleY: sticks[1].scaleY, transform: STICK_MOTIONS[1].transform, translateX: sticks[1].translateX, translateY: sticks[1].translateY, children: [
-            /* @__PURE__ */ jsx13(Path, { d: "M23,15 L35,15 L36,60 A7,7 0 0 1 22,60 Z", fill: `url(#${idPrefix}-yellow)` }),
-            /* @__PURE__ */ jsx13(Ellipse, { cx: "29", cy: "15", fill: "#FEF3D1", rx: "6", ry: "2.5" })
+          /* @__PURE__ */ jsxs9(AnimatedG, { originX: STICK_MOTIONS[1].originX, originY: STICK_MOTIONS[1].originY, rotation: sticks[1].rotation, scaleX: sticks[1].scaleX, scaleY: sticks[1].scaleY, transform: STICK_MOTIONS[1].transform, translateX: sticks[1].translateX, translateY: sticks[1].translateY, children: [
+            /* @__PURE__ */ jsx14(Path, { d: "M23,15 L35,15 L36,60 A7,7 0 0 1 22,60 Z", fill: `url(#${idPrefix}-yellow)` }),
+            /* @__PURE__ */ jsx14(Ellipse, { cx: "29", cy: "15", fill: "#FEF3D1", rx: "6", ry: "2.5" })
           ] }),
-          /* @__PURE__ */ jsxs8(AnimatedG, { originX: STICK_MOTIONS[2].originX, originY: STICK_MOTIONS[2].originY, rotation: sticks[2].rotation, scaleX: sticks[2].scaleX, scaleY: sticks[2].scaleY, transform: STICK_MOTIONS[2].transform, translateX: sticks[2].translateX, translateY: sticks[2].translateY, children: [
-            /* @__PURE__ */ jsx13(Path, { d: "M36,8 L48,8 L49,56 A7,7 0 0 1 35,56 Z", fill: `url(#${idPrefix}-blue)` }),
-            /* @__PURE__ */ jsx13(Ellipse, { cx: "42", cy: "8", fill: "#D0EDF8", rx: "6", ry: "2.5" })
+          /* @__PURE__ */ jsxs9(AnimatedG, { originX: STICK_MOTIONS[2].originX, originY: STICK_MOTIONS[2].originY, rotation: sticks[2].rotation, scaleX: sticks[2].scaleX, scaleY: sticks[2].scaleY, transform: STICK_MOTIONS[2].transform, translateX: sticks[2].translateX, translateY: sticks[2].translateY, children: [
+            /* @__PURE__ */ jsx14(Path, { d: "M36,8 L48,8 L49,56 A7,7 0 0 1 35,56 Z", fill: `url(#${idPrefix}-blue)` }),
+            /* @__PURE__ */ jsx14(Ellipse, { cx: "42", cy: "8", fill: "#D0EDF8", rx: "6", ry: "2.5" })
           ] }),
-          /* @__PURE__ */ jsxs8(AnimatedG, { originX: STICK_MOTIONS[3].originX, originY: STICK_MOTIONS[3].originY, rotation: sticks[3].rotation, scaleX: sticks[3].scaleX, scaleY: sticks[3].scaleY, transform: STICK_MOTIONS[3].transform, translateX: sticks[3].translateX, translateY: sticks[3].translateY, children: [
-            /* @__PURE__ */ jsx13(Path, { d: "M49,70 L61,70 L62,29 A7,7 0 0 0 48,29 Z", fill: `url(#${idPrefix}-pink)` }),
-            /* @__PURE__ */ jsx13(Ellipse, { cx: "55", cy: "70", fill: "#FBE4E4", rx: "6", ry: "2.5" })
+          /* @__PURE__ */ jsxs9(AnimatedG, { originX: STICK_MOTIONS[3].originX, originY: STICK_MOTIONS[3].originY, rotation: sticks[3].rotation, scaleX: sticks[3].scaleX, scaleY: sticks[3].scaleY, transform: STICK_MOTIONS[3].transform, translateX: sticks[3].translateX, translateY: sticks[3].translateY, children: [
+            /* @__PURE__ */ jsx14(Path, { d: "M49,70 L61,70 L62,29 A7,7 0 0 0 48,29 Z", fill: `url(#${idPrefix}-pink)` }),
+            /* @__PURE__ */ jsx14(Ellipse, { cx: "55", cy: "70", fill: "#FBE4E4", rx: "6", ry: "2.5" })
           ] })
         ] }),
-        variant === "wordmark" ? /* @__PURE__ */ jsx13(SvgText, { fill: "currentColor", fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, sans-serif", fontSize: "38", fontWeight: "600", letterSpacing: "-0.02em", x: "90", y: "52", children: "chalk" }) : null
+        variant === "wordmark" ? /* @__PURE__ */ jsx14(SvgText, { fill: "currentColor", fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, sans-serif", fontSize: "38", fontWeight: "600", letterSpacing: "-0.02em", x: "90", y: "52", children: "chalk" }) : null
       ] })
     }
   );
 }
 
 // src/components/native-space-view/SpaceTopBar.android.tsx
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
-function SpaceTopBarAndroid({ spaceName, participantCount, formattedDuration, logoUrl }) {
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+function SpaceTopBarAndroid({ spaceName, participantCount, formattedDuration, logoUrl, recording }) {
   const theme = useNativeTheme();
-  return /* @__PURE__ */ jsxs9(View10, { style: [styles9.topBar, { backgroundColor: theme.colors.darkCanvas, borderColor: theme.colors.border }], children: [
-    /* @__PURE__ */ jsxs9(View10, { style: styles9.topBarLeft, children: [
-      logoUrl ? /* @__PURE__ */ jsx14(Image2, { accessibilityLabel: "Chalk", source: { uri: logoUrl }, style: styles9.logo }) : /* @__PURE__ */ jsx14(Logo, { height: 24, variant: "mark" }),
-      /* @__PURE__ */ jsx14(View10, { style: [styles9.connectionDot, { backgroundColor: theme.colors.success }] }),
-      /* @__PURE__ */ jsx14(Text6, { style: [styles9.topBarSpaceName, { color: theme.colors.foreground }], numberOfLines: 1, children: spaceName }),
-      /* @__PURE__ */ jsx14(View10, { style: [styles9.timerBadge, { backgroundColor: theme.colors.surface }], children: /* @__PURE__ */ jsx14(Text6, { style: [styles9.timerText, { color: theme.colors.mutedForeground }], children: formattedDuration }) })
+  return /* @__PURE__ */ jsxs10(View11, { style: [styles10.topBar, { backgroundColor: theme.colors.darkCanvas, borderColor: theme.colors.border }], children: [
+    /* @__PURE__ */ jsxs10(View11, { style: styles10.topBarLeft, children: [
+      logoUrl ? /* @__PURE__ */ jsx15(Image3, { accessibilityLabel: "Chalk", source: { uri: logoUrl }, style: styles10.logo }) : /* @__PURE__ */ jsx15(Logo, { height: 24, variant: "mark" }),
+      /* @__PURE__ */ jsx15(View11, { style: [styles10.connectionDot, { backgroundColor: theme.colors.success }] }),
+      /* @__PURE__ */ jsx15(Text7, { style: [styles10.topBarSpaceName, { color: theme.colors.foreground }], numberOfLines: 1, children: spaceName }),
+      /* @__PURE__ */ jsx15(View11, { style: [styles10.timerBadge, { backgroundColor: theme.colors.surface }], children: /* @__PURE__ */ jsx15(Text7, { style: [styles10.timerText, { color: theme.colors.mutedForeground }], children: formattedDuration }) })
     ] }),
-    /* @__PURE__ */ jsxs9(View10, { style: [styles9.topBarRight, { backgroundColor: theme.colors.surface }], children: [
-      /* @__PURE__ */ jsx14(HugeiconsIcon4, { icon: UserGroupIcon, size: 14, color: theme.colors.foreground }),
-      /* @__PURE__ */ jsx14(Text6, { style: [styles9.topBarCount, { color: theme.colors.foreground }], children: participantCount })
+    recording && recording.status !== "stopped" ? /* @__PURE__ */ jsx15(Text7, { accessibilityLiveRegion: "polite", style: [styles10.timerText, { color: theme.colors.error }], children: recordingLabels[recording.status] }) : null,
+    /* @__PURE__ */ jsxs10(View11, { style: [styles10.topBarRight, { backgroundColor: theme.colors.surface }], children: [
+      /* @__PURE__ */ jsx15(HugeiconsIcon4, { icon: UserGroupIcon, size: 14, color: theme.colors.foreground }),
+      /* @__PURE__ */ jsx15(Text7, { style: [styles10.topBarCount, { color: theme.colors.foreground }], children: participantCount })
     ] })
   ] });
 }
-var styles9 = StyleSheet10.create({
+var recordingLabels = {
+  starting: "Starting recording\u2026",
+  recording: "Recording",
+  stopping: "Stopping recording\u2026",
+  stopped: "Recording stopped",
+  failed: "Recording failed"
+};
+var styles10 = StyleSheet11.create({
   topBar: {
-    paddingTop: Platform4.OS === "ios" ? 54 : 42,
+    paddingTop: Platform7.OS === "ios" ? 54 : 42,
     paddingBottom: 14,
     paddingHorizontal: 24,
     backgroundColor: Theme.colors.darkCanvas,
@@ -1596,23 +1941,23 @@ var styles9 = StyleSheet10.create({
 });
 
 // src/components/native-space-view/SpaceWhiteboardSurface.tsx
-import { useCallback as useCallback5 } from "react";
-import { StyleSheet as StyleSheet12 } from "react-native";
+import { useCallback as useCallback6 } from "react";
+import { StyleSheet as StyleSheet13 } from "react-native";
 
 // src/components/EmbeddedWhiteboard.tsx
 import { ChalkWhiteboardController } from "@q9labsai/chalk-whiteboard/embedded";
-import { useCallback as useCallback4, useEffect as useEffect4, useMemo as useMemo8, useRef as useRef3, useState as useState4 } from "react";
-import { ActivityIndicator, Pressable as Pressable5, StyleSheet as StyleSheet11, Text as Text7, useWindowDimensions as useWindowDimensions2, View as View11 } from "react-native";
+import { useCallback as useCallback5, useEffect as useEffect5, useMemo as useMemo9, useRef as useRef3, useState as useState5 } from "react";
+import { ActivityIndicator, Pressable as Pressable6, StyleSheet as StyleSheet12, Text as Text8, useWindowDimensions as useWindowDimensions2, View as View12 } from "react-native";
 import WebView from "react-native-webview";
 
 // src/whiteboard/embedded-whiteboard-assets.ts
-import { NativeModules as NativeModules2, Platform as Platform5 } from "react-native";
+import { NativeModules as NativeModules2, Platform as Platform8 } from "react-native";
 var ANDROID_RENDERER_URL = "file:///android_asset/chalk-whiteboard/index.html";
 async function resolveEmbeddedWhiteboardRendererURL(override) {
   if (override) return requireLocalRendererURL(override);
-  if (Platform5.OS === "android") return ANDROID_RENDERER_URL;
+  if (Platform8.OS === "android") return ANDROID_RENDERER_URL;
   const module = NativeModules2.ChalkWhiteboardAssets;
-  if (!module?.rendererURL) throw new Error(`Chalk embedded whiteboard assets are unavailable on ${Platform5.OS}`);
+  if (!module?.rendererURL) throw new Error(`Chalk embedded whiteboard assets are unavailable on ${Platform8.OS}`);
   return requireLocalRendererURL(await module.rendererURL());
 }
 function rendererURLWithContext(rendererURL, context) {
@@ -1638,8 +1983,14 @@ function requireLocalRendererURL(value) {
   return value;
 }
 
+// src/whiteboard/embedded-whiteboard-viewport.ts
+function createEmbeddedWhiteboardViewport(width, height, scale) {
+  if (!Number.isFinite(width) || width <= 0 || !Number.isFinite(height) || height <= 0 || !Number.isFinite(scale) || scale <= 0) return null;
+  return { width, height, scale };
+}
+
 // src/components/EmbeddedWhiteboard.tsx
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var embeddedWhiteboardWebViewSecurityPolicy = Object.freeze({
   allowFileAccess: true,
   allowFileAccessFromFileURLs: false,
@@ -1662,16 +2013,20 @@ function EmbeddedWhiteboard({ transport, journeyId, traceparent, tracestate, can
   const onMetricRef = useRef3(onMetric);
   const onErrorRef = useRef3(onError);
   const onUserExportRef = useRef3(onUserExport);
-  const [rendererURL, setRendererURL] = useState4(null);
-  const [rendererGeneration, setRendererGeneration] = useState4(createRendererGeneration);
-  const [loadAttempt, setLoadAttempt] = useState4(0);
-  const [loadError, setLoadError] = useState4(null);
-  const [compatibilityNotice, setCompatibilityNotice] = useState4(null);
-  const { width, height, scale } = useWindowDimensions2();
+  const [rendererURL, setRendererURL] = useState5(null);
+  const [rendererGeneration, setRendererGeneration] = useState5(createRendererGeneration);
+  const [loadAttempt, setLoadAttempt] = useState5(0);
+  const [loadError, setLoadError] = useState5(null);
+  const [compatibilityNotice, setCompatibilityNotice] = useState5(null);
+  const [layout, setLayout] = useState5({ width: 0, height: 0 });
+  const { scale } = useWindowDimensions2();
+  const viewport = useMemo9(() => createEmbeddedWhiteboardViewport(layout.width, layout.height, scale), [layout.height, layout.width, scale]);
+  const latestViewportRef = useRef3(viewport);
+  latestViewportRef.current = viewport;
   onMetricRef.current = onMetric;
   onErrorRef.current = onError;
   onUserExportRef.current = onUserExport;
-  const rendererPort = useMemo8(
+  const rendererPort = useMemo9(
     () => ({
       postMessage: (message) => webViewRef.current?.postMessage(message),
       subscribe: (listener) => {
@@ -1681,10 +2036,10 @@ function EmbeddedWhiteboard({ transport, journeyId, traceparent, tracestate, can
     }),
     []
   );
-  const handleControllerError = useCallback4((error) => onErrorRef.current?.(error), []);
-  const handleControllerMetric = useCallback4((metric) => onMetricRef.current?.(metric), []);
-  const handleControllerUserExport = useCallback4((value) => onUserExportRef.current?.(value), []);
-  useEffect4(() => {
+  const handleControllerError = useCallback5((error) => onErrorRef.current?.(error), []);
+  const handleControllerMetric = useCallback5((metric) => onMetricRef.current?.(metric), []);
+  const handleControllerUserExport = useCallback5((value) => onUserExportRef.current?.(value), []);
+  useEffect5(() => {
     let active = true;
     setLoadError(null);
     void resolveEmbeddedWhiteboardRendererURL(rendererURLOverride).then((url) => {
@@ -1699,7 +2054,7 @@ function EmbeddedWhiteboard({ transport, journeyId, traceparent, tracestate, can
       active = false;
     };
   }, [loadAttempt, onError, rendererURLOverride]);
-  useEffect4(() => {
+  useEffect5(() => {
     setCompatibilityNotice(null);
     const controller = new ChalkWhiteboardController({
       renderer: rendererPort,
@@ -1717,19 +2072,23 @@ function EmbeddedWhiteboard({ transport, journeyId, traceparent, tracestate, can
       onUserExport: handleControllerUserExport
     });
     controller.start();
+    if (latestViewportRef.current) controller.setViewport(latestViewportRef.current);
     controllerRef.current = controller;
     return () => {
       if (controllerRef.current === controller) controllerRef.current = null;
       controller.stop();
     };
   }, [handleControllerError, handleControllerMetric, handleControllerUserExport, journeyId, localParticipantColor, rendererPort, theme, traceparent, tracestate, transport]);
-  useEffect4(() => {
+  useEffect5(() => {
     controllerRef.current?.setCapabilities({ canDraw, canClear });
   }, [canClear, canDraw]);
-  const viewport = useMemo8(() => ({ width, height, scale }), [height, scale, width]);
-  useEffect4(() => {
-    controllerRef.current?.setViewport(viewport);
+  useEffect5(() => {
+    if (viewport) controllerRef.current?.setViewport(viewport);
   }, [viewport]);
+  const handleLayout = useCallback5((event) => {
+    const next = { width: event.nativeEvent.layout.width, height: event.nativeEvent.layout.height };
+    setLayout((current) => current.width === next.width && current.height === next.height ? current : next);
+  }, []);
   const sourceURL = rendererURL ? rendererURLWithContext(rendererURL, { journeyId, rendererGeneration }) : null;
   const handleMessage = (event) => {
     const message = event.nativeEvent.data;
@@ -1755,20 +2114,20 @@ function EmbeddedWhiteboard({ transport, journeyId, traceparent, tracestate, can
     reloadRenderer();
   };
   if (loadError) {
-    return /* @__PURE__ */ jsxs10(View11, { style: [styles10.status, { backgroundColor: nativeTheme.colors.lightSurface }, style], testID, children: [
-      /* @__PURE__ */ jsx15(Text7, { style: [styles10.errorTitle, { color: nativeTheme.colors.lightText }], children: "Whiteboard unavailable" }),
-      /* @__PURE__ */ jsx15(Text7, { style: [styles10.errorMessage, { color: nativeTheme.colors.lightSubtleText }], children: loadError }),
-      /* @__PURE__ */ jsx15(Pressable5, { accessibilityRole: "button", onPress: retryRenderer, style: ({ pressed }) => [styles10.retryButton, { backgroundColor: nativeTheme.colors.info }, pressed && styles10.retryButtonPressed], children: /* @__PURE__ */ jsx15(Text7, { style: [styles10.retryButtonText, { color: nativeTheme.colors.onDark }], children: "Retry" }) })
+    return /* @__PURE__ */ jsxs11(View12, { style: [styles11.status, { backgroundColor: nativeTheme.colors.lightSurface }, style], testID, children: [
+      /* @__PURE__ */ jsx16(Text8, { style: [styles11.errorTitle, { color: nativeTheme.colors.lightText }], children: "Whiteboard unavailable" }),
+      /* @__PURE__ */ jsx16(Text8, { style: [styles11.errorMessage, { color: nativeTheme.colors.lightSubtleText }], children: loadError }),
+      /* @__PURE__ */ jsx16(Pressable6, { accessibilityRole: "button", onPress: retryRenderer, style: ({ pressed }) => [styles11.retryButton, { backgroundColor: nativeTheme.colors.info }, pressed && styles11.retryButtonPressed], children: /* @__PURE__ */ jsx16(Text8, { style: [styles11.retryButtonText, { color: nativeTheme.colors.onDark }], children: "Retry" }) })
     ] });
   }
   if (!sourceURL || !rendererURL) {
-    return /* @__PURE__ */ jsxs10(View11, { style: [styles10.status, { backgroundColor: nativeTheme.colors.lightSurface }, style], testID, children: [
-      /* @__PURE__ */ jsx15(ActivityIndicator, { color: nativeTheme.colors.info }),
-      /* @__PURE__ */ jsx15(Text7, { style: [styles10.loadingMessage, { color: nativeTheme.colors.lightMutedText }], children: "Loading whiteboard\u2026" })
+    return /* @__PURE__ */ jsxs11(View12, { style: [styles11.status, { backgroundColor: nativeTheme.colors.lightSurface }, style], testID, children: [
+      /* @__PURE__ */ jsx16(ActivityIndicator, { color: nativeTheme.colors.info }),
+      /* @__PURE__ */ jsx16(Text8, { style: [styles11.loadingMessage, { color: nativeTheme.colors.lightMutedText }], children: "Loading whiteboard\u2026" })
     ] });
   }
-  return /* @__PURE__ */ jsxs10(View11, { style: [styles10.container, style], testID, children: [
-    /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs11(View12, { onLayout: handleLayout, style: [styles11.container, style], testID, children: [
+    /* @__PURE__ */ jsx16(
       WebView,
       {
         ref: webViewRef,
@@ -1788,18 +2147,18 @@ function EmbeddedWhiteboard({ transport, journeyId, traceparent, tracestate, can
         pullToRefreshEnabled: false,
         scrollEnabled: false,
         source: { uri: sourceURL },
-        style: [styles10.webView, { backgroundColor: nativeTheme.colors.lightSurface }],
+        style: [styles11.webView, { backgroundColor: nativeTheme.colors.lightSurface }],
         webviewDebuggingEnabled: typeof __DEV__ !== "undefined" && __DEV__
       },
       rendererGeneration
     ),
-    compatibilityNotice ? /* @__PURE__ */ jsx15(View11, { pointerEvents: "none", style: [styles10.compatibilityNotice, { backgroundColor: nativeTheme.colors.dangerSurfaceOverlay94 }], children: /* @__PURE__ */ jsx15(Text7, { style: [styles10.compatibilityNoticeText, { color: nativeTheme.colors.onDark }], children: compatibilityNotice }) }) : null
+    compatibilityNotice ? /* @__PURE__ */ jsx16(View12, { pointerEvents: "none", style: [styles11.compatibilityNotice, { backgroundColor: nativeTheme.colors.dangerSurfaceOverlay94 }], children: /* @__PURE__ */ jsx16(Text8, { style: [styles11.compatibilityNoticeText, { color: nativeTheme.colors.onDark }], children: compatibilityNotice }) }) : null
   ] });
 }
 function createRendererGeneration() {
   return globalThis.crypto?.randomUUID?.() ?? `whiteboard-${Date.now()}-${Math.random().toString(36).slice(2)}`;
 }
-var styles10 = StyleSheet11.create({
+var styles11 = StyleSheet12.create({
   container: {
     flex: 1,
     overflow: "hidden"
@@ -1855,7 +2214,7 @@ var styles10 = StyleSheet11.create({
 });
 
 // src/components/native-space-view/SpaceWhiteboardSurface.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function shouldRenderNativeSpaceWhiteboard(whiteboard) {
   return whiteboard.isOpen && whiteboard.transport !== null;
 }
@@ -1871,20 +2230,20 @@ function forwardNativeSpaceWhiteboardFailure(error, onMetric) {
 }
 function SpaceWhiteboardSurface({ whiteboard }) {
   const nativeTheme = useNativeTheme();
-  const handleError = useCallback5(
+  const handleError = useCallback6(
     (error) => {
       forwardNativeSpaceWhiteboardFailure(error, whiteboard.onMetric);
     },
     [whiteboard.onMetric]
   );
-  const handleMetric = useCallback5(
+  const handleMetric = useCallback6(
     (metric) => {
       forwardNativeSpaceWhiteboardMetric(metric, whiteboard.onMetric);
     },
     [whiteboard.onMetric]
   );
   if (!shouldRenderNativeSpaceWhiteboard(whiteboard)) return null;
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     EmbeddedWhiteboard,
     {
       canClear: whiteboard.canClear,
@@ -1892,7 +2251,7 @@ function SpaceWhiteboardSurface({ whiteboard }) {
       journeyId: whiteboard.journeyId,
       onError: handleError,
       onMetric: handleMetric,
-      style: styles11.surface,
+      style: styles12.surface,
       theme: nativeTheme.colorScheme,
       transport: whiteboard.transport,
       ...whiteboard.traceparent ? { traceparent: whiteboard.traceparent } : {},
@@ -1900,7 +2259,7 @@ function SpaceWhiteboardSurface({ whiteboard }) {
     }
   );
 }
-var styles11 = StyleSheet12.create({
+var styles12 = StyleSheet13.create({
   surface: {
     flex: 1,
     width: "100%"
@@ -1915,39 +2274,39 @@ import Speaker01Icon from "@hugeicons/core-free-icons/dist/esm/Speaker01Icon";
 import Video01Icon2 from "@hugeicons/core-free-icons/dist/esm/Video01Icon";
 import VideoOffIcon2 from "@hugeicons/core-free-icons/dist/esm/VideoOffIcon";
 import { HugeiconsIcon as HugeiconsIcon7 } from "@hugeicons/react-native";
-import { useEffect as useEffect5, useState as useState5 } from "react";
-import { Modal as Modal3, Platform as Platform6, Pressable as Pressable8, ScrollView, StyleSheet as StyleSheet15, Text as Text10, View as View14 } from "react-native";
+import { useEffect as useEffect6, useState as useState6 } from "react";
+import { Modal as Modal4, Platform as Platform9, Pressable as Pressable9, ScrollView as ScrollView2, StyleSheet as StyleSheet16, Text as Text11, View as View15 } from "react-native";
 
 // src/components/native-space-view/SpaceSurfacePrimitives.tsx
 import { HugeiconsIcon as HugeiconsIcon5 } from "@hugeicons/react-native";
-import { Pressable as Pressable6, StyleSheet as StyleSheet13, Text as Text8, View as View12 } from "react-native";
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Pressable as Pressable7, StyleSheet as StyleSheet14, Text as Text9, View as View13 } from "react-native";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 function SheetGrip() {
-  return /* @__PURE__ */ jsx17(View12, { accessibilityElementsHidden: true, style: styles12.grip });
+  return /* @__PURE__ */ jsx18(View13, { accessibilityElementsHidden: true, style: styles13.grip });
 }
 function CloseButton({ label, onPress }) {
-  return /* @__PURE__ */ jsx17(Pressable6, { accessibilityLabel: label, accessibilityRole: "button", hitSlop: 6, onPress, style: ({ pressed }) => [styles12.closeButton, pressed && styles12.pressed], children: /* @__PURE__ */ jsx17(Text8, { style: styles12.closeGlyph, children: "\xD7" }) });
+  return /* @__PURE__ */ jsx18(Pressable7, { accessibilityLabel: label, accessibilityRole: "button", hitSlop: 6, onPress, style: ({ pressed }) => [styles13.closeButton, pressed && styles13.pressed], children: /* @__PURE__ */ jsx18(Text9, { style: styles13.closeGlyph, children: "\xD7" }) });
 }
 function SurfaceHeader({ title, count, subtitle, onClose, closeLabel }) {
-  return /* @__PURE__ */ jsxs11(View12, { style: styles12.header, children: [
-    /* @__PURE__ */ jsxs11(View12, { style: styles12.headerCopy, children: [
-      /* @__PURE__ */ jsxs11(View12, { style: styles12.titleRow, children: [
-        /* @__PURE__ */ jsx17(Text8, { style: styles12.title, children: title }),
-        count !== void 0 ? /* @__PURE__ */ jsx17(View12, { style: styles12.countPill, children: /* @__PURE__ */ jsx17(Text8, { style: styles12.countText, children: count }) }) : null
+  return /* @__PURE__ */ jsxs12(View13, { style: styles13.header, children: [
+    /* @__PURE__ */ jsxs12(View13, { style: styles13.headerCopy, children: [
+      /* @__PURE__ */ jsxs12(View13, { style: styles13.titleRow, children: [
+        /* @__PURE__ */ jsx18(Text9, { style: styles13.title, children: title }),
+        count !== void 0 ? /* @__PURE__ */ jsx18(View13, { style: styles13.countPill, children: /* @__PURE__ */ jsx18(Text9, { style: styles13.countText, children: count }) }) : null
       ] }),
-      subtitle ? /* @__PURE__ */ jsx17(Text8, { style: styles12.subtitle, children: subtitle }) : null
+      subtitle ? /* @__PURE__ */ jsx18(Text9, { style: styles13.subtitle, children: subtitle }) : null
     ] }),
-    /* @__PURE__ */ jsx17(CloseButton, { label: closeLabel, onPress: onClose })
+    /* @__PURE__ */ jsx18(CloseButton, { label: closeLabel, onPress: onClose })
   ] });
 }
 function InitialsAvatar({ name, size = 52, style }) {
   const color = getParticipantColor(name);
-  return /* @__PURE__ */ jsx17(View12, { style: [styles12.avatar, { backgroundColor: color.primary, borderRadius: size / 2, height: size, width: size }, style], children: /* @__PURE__ */ jsx17(Text8, { allowFontScaling: false, style: [styles12.avatarText, { fontSize: Math.max(16, Math.round(size * 0.34)) }], children: getParticipantInitials(name) }) });
+  return /* @__PURE__ */ jsx18(View13, { style: [styles13.avatar, { backgroundColor: color.primary, borderRadius: size / 2, height: size, width: size }, style], children: /* @__PURE__ */ jsx18(Text9, { allowFontScaling: false, style: [styles13.avatarText, { fontSize: Math.max(16, Math.round(size * 0.34)) }], children: getParticipantInitials(name) }) });
 }
 function IconTile({ icon, symbol, color = Theme.colors.ink, wash = Theme.colors.surface }) {
-  return /* @__PURE__ */ jsx17(View12, { style: [styles12.iconTile, { backgroundColor: wash }], children: icon ? /* @__PURE__ */ jsx17(HugeiconsIcon5, { color, icon, size: 22 }) : /* @__PURE__ */ jsx17(Text8, { style: [styles12.symbol, { color }], children: symbol }) });
+  return /* @__PURE__ */ jsx18(View13, { style: [styles13.iconTile, { backgroundColor: wash }], children: icon ? /* @__PURE__ */ jsx18(HugeiconsIcon5, { color, icon, size: 22 }) : /* @__PURE__ */ jsx18(Text9, { style: [styles13.symbol, { color }], children: symbol }) });
 }
-var styles12 = StyleSheet13.create({
+var styles13 = StyleSheet14.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 },
@@ -1968,29 +2327,29 @@ var styles12 = StyleSheet13.create({
 // src/components/native-space-view/AppearanceSettings.tsx
 import CheckmarkCircle01Icon from "@hugeicons/core-free-icons/dist/esm/CheckmarkCircle01Icon";
 import { HugeiconsIcon as HugeiconsIcon6 } from "@hugeicons/react-native";
-import { Pressable as Pressable7, StyleSheet as StyleSheet14, Text as Text9, View as View13 } from "react-native";
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Pressable as Pressable8, StyleSheet as StyleSheet15, Text as Text10, View as View14 } from "react-native";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 function AppearanceSettings() {
   const { appearance, setPalette, setTexture } = useNativeAppearance();
   const theme = useNativeTheme();
-  return /* @__PURE__ */ jsxs12(View13, { style: styles13.section, children: [
-    /* @__PURE__ */ jsx18(Text9, { style: [styles13.intro, { color: theme.colors.ink2 }], children: "Choose a complete color family, then layer in a material texture. Every combination is available on mobile." }),
-    ["light", "dark"].map((mode) => /* @__PURE__ */ jsx18(PaletteGroup, { mode, selectedPalette: appearance.palette, theme, onSelect: setPalette }, mode)),
-    /* @__PURE__ */ jsxs12(View13, { style: styles13.textureSection, children: [
-      /* @__PURE__ */ jsx18(Text9, { style: styles13.groupLabel, children: "Texture" }),
-      /* @__PURE__ */ jsx18(View13, { style: styles13.textureGrid, children: THEME_TEXTURES.map((texture) => {
+  return /* @__PURE__ */ jsxs13(View14, { style: styles14.section, children: [
+    /* @__PURE__ */ jsx19(Text10, { style: [styles14.intro, { color: theme.colors.ink2 }], children: "Choose a complete color family, then layer in a material texture. Every combination is available on mobile." }),
+    ["light", "dark"].map((mode) => /* @__PURE__ */ jsx19(PaletteGroup, { mode, selectedPalette: appearance.palette, theme, onSelect: setPalette }, mode)),
+    /* @__PURE__ */ jsxs13(View14, { style: styles14.textureSection, children: [
+      /* @__PURE__ */ jsx19(Text10, { style: styles14.groupLabel, children: "Texture" }),
+      /* @__PURE__ */ jsx19(View14, { style: styles14.textureGrid, children: THEME_TEXTURES.map((texture) => {
         const selected = texture.value === appearance.texture;
-        return /* @__PURE__ */ jsxs12(
-          Pressable7,
+        return /* @__PURE__ */ jsxs13(
+          Pressable8,
           {
             accessibilityLabel: `Use ${texture.label} texture`,
             accessibilityRole: "button",
             accessibilityState: { selected },
             onPress: () => setTexture(texture.value),
-            style: ({ pressed }) => [styles13.texture, { backgroundColor: theme.colors.surfaceMuted, borderColor: theme.colors.line }, selected && [styles13.selected, { borderColor: theme.colors.primary }], pressed && styles13.pressed],
+            style: ({ pressed }) => [styles14.texture, { backgroundColor: theme.colors.surfaceMuted, borderColor: theme.colors.line }, selected && [styles14.selected, { borderColor: theme.colors.primary }], pressed && styles14.pressed],
             children: [
-              /* @__PURE__ */ jsx18(TexturePreview, { kind: texture.value, background: appearance.tokens.stage, foreground: appearance.tokens.textMuted }),
-              /* @__PURE__ */ jsx18(Text9, { numberOfLines: 1, style: [styles13.textureLabel, { color: theme.colors.ink }], children: texture.label })
+              /* @__PURE__ */ jsx19(TexturePreview, { kind: texture.value, background: appearance.tokens.stage, foreground: appearance.tokens.textMuted }),
+              /* @__PURE__ */ jsx19(Text10, { numberOfLines: 1, style: [styles14.textureLabel, { color: theme.colors.ink }], children: texture.label })
             ]
           },
           texture.value
@@ -2000,25 +2359,25 @@ function AppearanceSettings() {
   ] });
 }
 function PaletteGroup({ mode, selectedPalette, theme, onSelect }) {
-  return /* @__PURE__ */ jsxs12(View13, { style: styles13.group, children: [
-    /* @__PURE__ */ jsx18(Text9, { style: styles13.groupLabel, children: mode === "light" ? "Light palettes" : "Dark palettes" }),
-    /* @__PURE__ */ jsx18(View13, { style: styles13.paletteGrid, children: THEME_PALETTES.filter((palette) => palette.mode === mode).map((palette) => {
+  return /* @__PURE__ */ jsxs13(View14, { style: styles14.group, children: [
+    /* @__PURE__ */ jsx19(Text10, { style: styles14.groupLabel, children: mode === "light" ? "Light palettes" : "Dark palettes" }),
+    /* @__PURE__ */ jsx19(View14, { style: styles14.paletteGrid, children: THEME_PALETTES.filter((palette) => palette.mode === mode).map((palette) => {
       const selected = palette.value === selectedPalette;
-      return /* @__PURE__ */ jsxs12(
-        Pressable7,
+      return /* @__PURE__ */ jsxs13(
+        Pressable8,
         {
           accessibilityLabel: `Use ${palette.label} palette`,
           accessibilityRole: "button",
           accessibilityState: { selected },
           onPress: () => onSelect(palette.value),
-          style: ({ pressed }) => [styles13.palette, { backgroundColor: theme.colors.surfaceMuted, borderColor: theme.colors.line }, selected && [styles13.selected, { borderColor: theme.colors.primary }], pressed && styles13.pressed],
+          style: ({ pressed }) => [styles14.palette, { backgroundColor: theme.colors.surfaceMuted, borderColor: theme.colors.line }, selected && [styles14.selected, { borderColor: theme.colors.primary }], pressed && styles14.pressed],
           children: [
-            /* @__PURE__ */ jsx18(View13, { style: styles13.swatches, children: palette.swatch.map((color) => /* @__PURE__ */ jsx18(View13, { style: [styles13.swatch, { backgroundColor: color }] }, color)) }),
-            /* @__PURE__ */ jsxs12(View13, { style: styles13.paletteCopy, children: [
-              /* @__PURE__ */ jsx18(Text9, { numberOfLines: 1, style: [styles13.paletteLabel, { color: theme.colors.ink }], children: palette.label }),
-              /* @__PURE__ */ jsx18(Text9, { numberOfLines: 1, style: [styles13.family, { color: theme.colors.ink3 }], children: palette.family })
+            /* @__PURE__ */ jsx19(View14, { style: styles14.swatches, children: palette.swatch.map((color) => /* @__PURE__ */ jsx19(View14, { style: [styles14.swatch, { backgroundColor: color }] }, color)) }),
+            /* @__PURE__ */ jsxs13(View14, { style: styles14.paletteCopy, children: [
+              /* @__PURE__ */ jsx19(Text10, { numberOfLines: 1, style: [styles14.paletteLabel, { color: theme.colors.ink }], children: palette.label }),
+              /* @__PURE__ */ jsx19(Text10, { numberOfLines: 1, style: [styles14.family, { color: theme.colors.ink3 }], children: palette.family })
             ] }),
-            selected ? /* @__PURE__ */ jsx18(HugeiconsIcon6, { color: theme.colors.success, icon: CheckmarkCircle01Icon, size: 18 }) : null
+            selected ? /* @__PURE__ */ jsx19(HugeiconsIcon6, { color: theme.colors.success, icon: CheckmarkCircle01Icon, size: 18 }) : null
           ]
         },
         palette.value
@@ -2027,12 +2386,12 @@ function PaletteGroup({ mode, selectedPalette, theme, onSelect }) {
   ] });
 }
 function TexturePreview({ background, foreground, kind }) {
-  return /* @__PURE__ */ jsxs12(View13, { style: [styles13.texturePreview, { backgroundColor: background }], children: [
-    kind === "paper" ? Array.from({ length: 11 }, (_, index) => /* @__PURE__ */ jsx18(View13, { style: [styles13.grain, { backgroundColor: foreground, left: `${index * 29 % 91}%`, top: `${index * 43 % 88}%` }] }, index)) : null,
-    kind === "slate" ? Array.from({ length: 5 }, (_, index) => /* @__PURE__ */ jsx18(View13, { style: [styles13.slateLine, { backgroundColor: foreground, top: 4 + index * 8 }] }, index)) : null
+  return /* @__PURE__ */ jsxs13(View14, { style: [styles14.texturePreview, { backgroundColor: background }], children: [
+    kind === "paper" ? Array.from({ length: 11 }, (_, index) => /* @__PURE__ */ jsx19(View14, { style: [styles14.grain, { backgroundColor: foreground, left: `${index * 29 % 91}%`, top: `${index * 43 % 88}%` }] }, index)) : null,
+    kind === "slate" ? Array.from({ length: 5 }, (_, index) => /* @__PURE__ */ jsx19(View14, { style: [styles14.slateLine, { backgroundColor: foreground, top: 4 + index * 8 }] }, index)) : null
   ] });
 }
-var styles13 = StyleSheet14.create({
+var styles14 = StyleSheet15.create({
   section: { gap: Theme.spacing.xl },
   intro: { color: Theme.colors.ink2, fontSize: 14, lineHeight: 20 },
   group: { gap: Theme.spacing.sm },
@@ -2056,82 +2415,82 @@ var styles13 = StyleSheet14.create({
 });
 
 // src/components/native-space-view/SettingsSheet.tsx
-import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 function SettingsSheet({ controller, isOpen, onClose }) {
-  const [tab, setTab] = useState5("devices");
-  useEffect5(() => {
+  const [tab, setTab] = useState6("devices");
+  useEffect6(() => {
     if (!isOpen) setTab("devices");
   }, [isOpen]);
-  return /* @__PURE__ */ jsx19(Modal3, { animationType: "slide", onRequestClose: onClose, transparent: true, visible: isOpen, children: /* @__PURE__ */ jsxs13(View14, { style: styles14.modalRoot, children: [
-    /* @__PURE__ */ jsx19(Pressable8, { accessibilityLabel: "Close Settings", onPress: onClose, style: styles14.backdrop }),
-    /* @__PURE__ */ jsxs13(View14, { style: styles14.sheet, children: [
-      /* @__PURE__ */ jsx19(SheetGrip, {}),
-      /* @__PURE__ */ jsxs13(View14, { style: styles14.header, children: [
-        /* @__PURE__ */ jsx19(Text10, { style: styles14.title, children: "Settings" }),
-        /* @__PURE__ */ jsx19(CloseButton, { label: "Close Settings", onPress: onClose })
+  return /* @__PURE__ */ jsx20(Modal4, { animationType: "slide", onRequestClose: onClose, transparent: true, visible: isOpen, children: /* @__PURE__ */ jsxs14(View15, { style: styles15.modalRoot, children: [
+    /* @__PURE__ */ jsx20(Pressable9, { accessibilityLabel: "Close Settings", onPress: onClose, style: styles15.backdrop }),
+    /* @__PURE__ */ jsxs14(View15, { style: styles15.sheet, children: [
+      /* @__PURE__ */ jsx20(SheetGrip, {}),
+      /* @__PURE__ */ jsxs14(View15, { style: styles15.header, children: [
+        /* @__PURE__ */ jsx20(Text11, { style: styles15.title, children: "Settings" }),
+        /* @__PURE__ */ jsx20(CloseButton, { label: "Close Settings", onPress: onClose })
       ] }),
-      /* @__PURE__ */ jsx19(View14, { accessibilityRole: "tablist", style: styles14.tabs, children: ["devices", "appearance", "space"].map((nextTab) => /* @__PURE__ */ jsx19(Pressable8, { accessibilityRole: "tab", accessibilityState: { selected: tab === nextTab }, onPress: () => setTab(nextTab), style: ({ pressed }) => [styles14.tab, tab === nextTab && styles14.tabSelected, pressed && styles14.pressed], children: /* @__PURE__ */ jsx19(Text10, { style: [styles14.tabText, tab === nextTab && styles14.tabTextSelected], children: nextTab[0].toUpperCase() + nextTab.slice(1) }) }, nextTab)) }),
-      /* @__PURE__ */ jsxs13(ScrollView, { contentContainerStyle: styles14.content, showsVerticalScrollIndicator: false, children: [
-        tab === "devices" ? /* @__PURE__ */ jsx19(DevicesSettings, { controller }) : null,
-        tab === "appearance" ? /* @__PURE__ */ jsx19(AppearanceSettings, {}) : null,
-        tab === "space" ? /* @__PURE__ */ jsx19(SpaceSettings, { controller }) : null
+      /* @__PURE__ */ jsx20(View15, { accessibilityRole: "tablist", style: styles15.tabs, children: ["devices", "appearance", "space"].map((nextTab) => /* @__PURE__ */ jsx20(Pressable9, { accessibilityRole: "tab", accessibilityState: { selected: tab === nextTab }, onPress: () => setTab(nextTab), style: ({ pressed }) => [styles15.tab, tab === nextTab && styles15.tabSelected, pressed && styles15.pressed], children: /* @__PURE__ */ jsx20(Text11, { style: [styles15.tabText, tab === nextTab && styles15.tabTextSelected], children: nextTab[0].toUpperCase() + nextTab.slice(1) }) }, nextTab)) }),
+      /* @__PURE__ */ jsxs14(ScrollView2, { contentContainerStyle: styles15.content, showsVerticalScrollIndicator: false, children: [
+        tab === "devices" ? /* @__PURE__ */ jsx20(DevicesSettings, { controller }) : null,
+        tab === "appearance" ? /* @__PURE__ */ jsx20(AppearanceSettings, {}) : null,
+        tab === "space" ? /* @__PURE__ */ jsx20(SpaceSettings, { controller }) : null
       ] }),
-      /* @__PURE__ */ jsx19(Pressable8, { accessibilityRole: "button", onPress: onClose, style: ({ pressed }) => [styles14.doneButton, pressed && styles14.pressed], children: /* @__PURE__ */ jsx19(Text10, { style: styles14.doneText, children: "Done" }) })
+      /* @__PURE__ */ jsx20(Pressable9, { accessibilityRole: "button", onPress: onClose, style: ({ pressed }) => [styles15.doneButton, pressed && styles15.pressed], children: /* @__PURE__ */ jsx20(Text11, { style: styles15.doneText, children: "Done" }) })
     ] })
   ] }) });
 }
 function DevicesSettings({ controller }) {
   const microphoneEnabled = !controller.isMuted;
   const cameraEnabled = !controller.isCameraOff;
-  return /* @__PURE__ */ jsxs13(View14, { style: styles14.section, children: [
-    /* @__PURE__ */ jsx19(Text10, { style: styles14.sectionIntro, children: "Use the controls below to set what you share in this Episode." }),
-    /* @__PURE__ */ jsx19(DeviceControl, { disabled: controller.simulatorMediaDisabled, enabled: microphoneEnabled, icon: microphoneEnabled ? Mic01Icon2 : MicOff01Icon4, label: "Microphone", onPress: controller.toggleAudio, value: microphoneEnabled ? "On" : "Off" }),
-    /* @__PURE__ */ jsx19(DeviceControl, { disabled: controller.simulatorMediaDisabled, enabled: cameraEnabled, icon: cameraEnabled ? Video01Icon2 : VideoOffIcon2, label: "Camera", onPress: controller.toggleVideo, value: cameraEnabled ? "On" : "Off" }),
-    /* @__PURE__ */ jsxs13(View14, { style: styles14.deviceRow, children: [
-      /* @__PURE__ */ jsx19(IconTile, { icon: Speaker01Icon }),
-      /* @__PURE__ */ jsxs13(View14, { style: styles14.rowCopy, children: [
-        /* @__PURE__ */ jsx19(Text10, { style: styles14.rowLabel, children: "Speaker" }),
-        /* @__PURE__ */ jsx19(Text10, { style: styles14.rowMeta, children: "System audio output" })
+  return /* @__PURE__ */ jsxs14(View15, { style: styles15.section, children: [
+    /* @__PURE__ */ jsx20(Text11, { style: styles15.sectionIntro, children: "Use the controls below to set what you share in this Episode." }),
+    /* @__PURE__ */ jsx20(DeviceControl, { disabled: controller.simulatorMediaDisabled, enabled: microphoneEnabled, icon: microphoneEnabled ? Mic01Icon2 : MicOff01Icon4, label: "Microphone", onPress: controller.toggleAudio, value: microphoneEnabled ? "On" : "Off" }),
+    /* @__PURE__ */ jsx20(DeviceControl, { disabled: controller.simulatorMediaDisabled, enabled: cameraEnabled, icon: cameraEnabled ? Video01Icon2 : VideoOffIcon2, label: "Camera", onPress: controller.toggleVideo, value: cameraEnabled ? "On" : "Off" }),
+    /* @__PURE__ */ jsxs14(View15, { style: styles15.deviceRow, children: [
+      /* @__PURE__ */ jsx20(IconTile, { icon: Speaker01Icon }),
+      /* @__PURE__ */ jsxs14(View15, { style: styles15.rowCopy, children: [
+        /* @__PURE__ */ jsx20(Text11, { style: styles15.rowLabel, children: "Speaker" }),
+        /* @__PURE__ */ jsx20(Text11, { style: styles15.rowMeta, children: "System audio output" })
       ] }),
-      /* @__PURE__ */ jsx19(Text10, { style: styles14.rowValue, children: "Automatic" })
+      /* @__PURE__ */ jsx20(Text11, { style: styles15.rowValue, children: "Automatic" })
     ] }),
-    /* @__PURE__ */ jsxs13(View14, { style: styles14.readyCard, children: [
-      /* @__PURE__ */ jsx19(HugeiconsIcon7, { color: Theme.colors.success, icon: CheckmarkCircle01Icon2, size: 22 }),
-      /* @__PURE__ */ jsx19(Text10, { style: styles14.readyText, children: controller.simulatorMediaDisabled ? "Device controls are unavailable here" : "Devices are ready" })
+    /* @__PURE__ */ jsxs14(View15, { style: styles15.readyCard, children: [
+      /* @__PURE__ */ jsx20(HugeiconsIcon7, { color: Theme.colors.success, icon: CheckmarkCircle01Icon2, size: 22 }),
+      /* @__PURE__ */ jsx20(Text11, { style: styles15.readyText, children: controller.simulatorMediaDisabled ? "Device controls are unavailable here" : "Devices are ready" })
     ] })
   ] });
 }
 function DeviceControl({ disabled, enabled, icon, label, onPress, value }) {
-  return /* @__PURE__ */ jsxs13(Pressable8, { accessibilityLabel: `${label} ${value}`, accessibilityRole: "button", disabled, onPress, style: ({ pressed }) => [styles14.deviceRow, disabled && styles14.disabled, pressed && styles14.pressed], children: [
-    /* @__PURE__ */ jsx19(IconTile, { icon, color: enabled ? Theme.colors.ink : Theme.colors.error, wash: enabled ? Theme.colors.surface : Theme.colors.washPink }),
-    /* @__PURE__ */ jsxs13(View14, { style: styles14.rowCopy, children: [
-      /* @__PURE__ */ jsx19(Text10, { style: styles14.rowLabel, children: label }),
-      /* @__PURE__ */ jsx19(Text10, { style: styles14.rowMeta, children: disabled ? "Unavailable on this device" : "Tap to change state" })
+  return /* @__PURE__ */ jsxs14(Pressable9, { accessibilityLabel: `${label} ${value}`, accessibilityRole: "button", disabled, onPress, style: ({ pressed }) => [styles15.deviceRow, disabled && styles15.disabled, pressed && styles15.pressed], children: [
+    /* @__PURE__ */ jsx20(IconTile, { icon, color: enabled ? Theme.colors.ink : Theme.colors.error, wash: enabled ? Theme.colors.surface : Theme.colors.washPink }),
+    /* @__PURE__ */ jsxs14(View15, { style: styles15.rowCopy, children: [
+      /* @__PURE__ */ jsx20(Text11, { style: styles15.rowLabel, children: label }),
+      /* @__PURE__ */ jsx20(Text11, { style: styles15.rowMeta, children: disabled ? "Unavailable on this device" : "Tap to change state" })
     ] }),
-    /* @__PURE__ */ jsx19(Text10, { style: [styles14.rowValue, !enabled && styles14.valueOff], children: value })
+    /* @__PURE__ */ jsx20(Text11, { style: [styles15.rowValue, !enabled && styles15.valueOff], children: value })
   ] });
 }
 function SpaceSettings({ controller }) {
-  return /* @__PURE__ */ jsxs13(View14, { style: styles14.section, children: [
-    /* @__PURE__ */ jsx19(Text10, { style: styles14.sectionIntro, children: "Canonical information about this Space and its current Episode." }),
-    /* @__PURE__ */ jsx19(InfoRow, { label: "Space", value: "Current Space" }),
-    /* @__PURE__ */ jsx19(InfoRow, { label: "Episode", value: controller.formattedDuration }),
-    /* @__PURE__ */ jsx19(InfoRow, { label: "People", value: String(controller.participantCount) }),
-    /* @__PURE__ */ jsxs13(View14, { style: styles14.infoCard, children: [
-      /* @__PURE__ */ jsx19(Text10, { style: styles14.infoTitle, children: "Space content stays here" }),
-      /* @__PURE__ */ jsx19(Text10, { style: styles14.infoText, children: "Chat and Board content belong to this Space and remain available across Episodes." })
+  return /* @__PURE__ */ jsxs14(View15, { style: styles15.section, children: [
+    /* @__PURE__ */ jsx20(Text11, { style: styles15.sectionIntro, children: "Canonical information about this Space and its current Episode." }),
+    /* @__PURE__ */ jsx20(InfoRow, { label: "Space", value: "Current Space" }),
+    /* @__PURE__ */ jsx20(InfoRow, { label: "Episode", value: controller.formattedDuration }),
+    /* @__PURE__ */ jsx20(InfoRow, { label: "People", value: String(controller.participantCount) }),
+    /* @__PURE__ */ jsxs14(View15, { style: styles15.infoCard, children: [
+      /* @__PURE__ */ jsx20(Text11, { style: styles15.infoTitle, children: "Space content stays here" }),
+      /* @__PURE__ */ jsx20(Text11, { style: styles15.infoText, children: "Chat and Board content belong to this Space and remain available across Episodes." })
     ] })
   ] });
 }
 function InfoRow({ label, value }) {
-  return /* @__PURE__ */ jsxs13(View14, { style: styles14.infoRow, children: [
-    /* @__PURE__ */ jsx19(Text10, { style: styles14.rowLabel, children: label }),
-    /* @__PURE__ */ jsx19(Text10, { numberOfLines: 1, style: styles14.infoValue, children: value || "\u2014" })
+  return /* @__PURE__ */ jsxs14(View15, { style: styles15.infoRow, children: [
+    /* @__PURE__ */ jsx20(Text11, { style: styles15.rowLabel, children: label }),
+    /* @__PURE__ */ jsx20(Text11, { numberOfLines: 1, style: styles15.infoValue, children: value || "\u2014" })
   ] });
 }
-var styles14 = StyleSheet15.create({
+var styles15 = StyleSheet16.create({
   modalRoot: { flex: 1, justifyContent: "flex-end" },
-  backdrop: { ...StyleSheet15.absoluteFillObject, backgroundColor: Theme.colors.darkOverlay22 },
+  backdrop: { ...StyleSheet16.absoluteFillObject, backgroundColor: Theme.colors.darkOverlay22 },
   sheet: {
     backgroundColor: Theme.colors.surface,
     borderColor: Theme.colors.line,
@@ -2141,7 +2500,7 @@ var styles14 = StyleSheet15.create({
     flex: 1,
     marginTop: 72,
     overflow: "hidden",
-    paddingBottom: Platform6.OS === "ios" ? Theme.spacing.md : Theme.spacing.xs,
+    paddingBottom: Platform9.OS === "ios" ? Theme.spacing.md : Theme.spacing.xs,
     shadowColor: Theme.colors.ink,
     shadowOffset: { height: -8, width: 0 },
     shadowOpacity: 0.12,
@@ -2177,14 +2536,14 @@ var styles14 = StyleSheet15.create({
 });
 
 // src/components/native-space-view/SpacePanelSheet.tsx
-import { Modal as Modal5, Platform as Platform9, Pressable as Pressable12, SafeAreaView, StyleSheet as StyleSheet19, View as View18 } from "react-native";
+import { Modal as Modal6, Platform as Platform12, Pressable as Pressable14, SafeAreaView, StyleSheet as StyleSheet21, View as View20 } from "react-native";
 
 // src/components/native-space-view/SpaceChatSheet.tsx
 import Message01Icon from "@hugeicons/core-free-icons/dist/esm/Message01Icon";
 import Navigation03Icon from "@hugeicons/core-free-icons/dist/esm/Navigation03Icon";
 import { HugeiconsIcon as HugeiconsIcon8 } from "@hugeicons/react-native";
-import { useMemo as useMemo9 } from "react";
-import { FlatList as FlatList3, KeyboardAvoidingView, Platform as Platform7, Pressable as Pressable9, StyleSheet as StyleSheet16, Text as Text11, TextInput, View as View15 } from "react-native";
+import { useMemo as useMemo10 } from "react";
+import { FlatList as FlatList3, KeyboardAvoidingView as KeyboardAvoidingView2, Platform as Platform10, Pressable as Pressable11, StyleSheet as StyleSheet18, Text as Text13, TextInput as TextInput2, View as View17 } from "react-native";
 
 // src/components/native-space-view/space-progressive-surface-helpers.ts
 function buildParticipantActionDescriptors(availability) {
@@ -2204,54 +2563,146 @@ function formatChatTimestamp(timestamp) {
   return new Date(timestamp).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
 }
 
+// src/components/native-space-view/SpaceChatAttachment.tsx
+import { useEffect as useEffect7, useState as useState7 } from "react";
+import { Image as Image4, Pressable as Pressable10, StyleSheet as StyleSheet17, Text as Text12, View as View16 } from "react-native";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+function SpaceChatAttachment({ attachment, isLocal, onOpen, resolveUrl }) {
+  const isImage = attachment.mimeType.startsWith("image/");
+  const [previewUrl, setPreviewUrl] = useState7(null);
+  const [previewFailed, setPreviewFailed] = useState7(false);
+  const [retryGeneration, setRetryGeneration] = useState7(0);
+  useEffect7(() => {
+    if (!isImage || previewUrl || previewFailed) return;
+    let cancelled = false;
+    void resolveUrl(attachment.attachmentId).then(
+      (url) => {
+        if (cancelled) return;
+        if (!url) {
+          reportAttachmentPreviewFailure(attachment.attachmentId, "resolve");
+          setPreviewFailed(true);
+          return;
+        }
+        setPreviewUrl(url);
+        setPreviewFailed(false);
+      },
+      () => {
+        if (cancelled) return;
+        reportAttachmentPreviewFailure(attachment.attachmentId, "resolve");
+        setPreviewFailed(true);
+      }
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [attachment.attachmentId, isImage, previewFailed, previewUrl, resolveUrl, retryGeneration]);
+  if (!isImage) {
+    return /* @__PURE__ */ jsx21(Pressable10, { accessibilityRole: "link", onPress: () => onOpen(attachment.attachmentId), style: ({ pressed }) => [styles16.attachmentLink, pressed && styles16.pressed], children: /* @__PURE__ */ jsx21(Text12, { numberOfLines: 1, style: [styles16.attachment, isLocal && styles16.localText], children: attachment.fileName }) });
+  }
+  if (previewFailed) {
+    return /* @__PURE__ */ jsxs15(View16, { style: styles16.previewError, children: [
+      /* @__PURE__ */ jsx21(Text12, { accessibilityLiveRegion: "polite", style: [styles16.previewErrorText, isLocal && styles16.localText], children: "Image preview unavailable" }),
+      /* @__PURE__ */ jsx21(
+        Pressable10,
+        {
+          accessibilityLabel: `Retry preview for ${attachment.fileName}`,
+          accessibilityRole: "button",
+          style: styles16.retryButton,
+          onPress: () => {
+            setPreviewFailed(false);
+            setPreviewUrl(null);
+            setRetryGeneration((current) => current + 1);
+          },
+          children: /* @__PURE__ */ jsx21(Text12, { style: [styles16.retry, isLocal && styles16.localText], children: "Retry preview" })
+        }
+      )
+    ] });
+  }
+  if (!previewUrl) return /* @__PURE__ */ jsxs15(Text12, { style: [styles16.previewLoading, isLocal && styles16.localText], children: [
+    "Loading ",
+    attachment.fileName,
+    "\u2026"
+  ] });
+  return /* @__PURE__ */ jsx21(Pressable10, { accessibilityLabel: `Open ${attachment.fileName}`, accessibilityRole: "imagebutton", onPress: () => onOpen(attachment.attachmentId), style: ({ pressed }) => [styles16.imagePreviewButton, pressed && styles16.pressed], children: /* @__PURE__ */ jsx21(
+    Image4,
+    {
+      accessibilityLabel: attachment.fileName,
+      onError: () => {
+        reportAttachmentPreviewFailure(attachment.attachmentId, "render");
+        setPreviewFailed(true);
+        setPreviewUrl(null);
+      },
+      resizeMode: "cover",
+      source: { uri: previewUrl },
+      style: styles16.imagePreview
+    }
+  ) });
+}
+function reportAttachmentPreviewFailure(attachmentId, operation) {
+  console.warn("Chat attachment preview unavailable.", { attachmentId, operation });
+}
+var styles16 = StyleSheet17.create({
+  attachmentLink: { justifyContent: "center", marginTop: 4, maxWidth: "100%", minHeight: 32 },
+  attachment: { color: Theme.colors.information, fontSize: 14 },
+  imagePreviewButton: { borderRadius: Theme.radius.sm, marginTop: Theme.spacing.sm, maxWidth: "100%", overflow: "hidden" },
+  imagePreview: { height: 160, width: 240 },
+  previewLoading: { color: Theme.colors.ink2, fontSize: 13, marginTop: Theme.spacing.sm },
+  previewError: { borderColor: Theme.colors.line, borderRadius: Theme.radius.sm, borderWidth: 1, marginTop: Theme.spacing.sm, width: 240, maxWidth: "100%", minHeight: 160, justifyContent: "center", alignItems: "center", padding: Theme.spacing.md },
+  previewErrorText: { color: Theme.colors.ink2, fontSize: 13 },
+  retryButton: { minHeight: 44, justifyContent: "center", paddingHorizontal: Theme.spacing.sm },
+  retry: { color: Theme.colors.information, fontSize: 13, fontWeight: "700", marginTop: 6 },
+  localText: { color: Theme.colors.surface },
+  pressed: { opacity: 0.72, transform: [{ scale: 0.98 }] }
+});
+
 // src/components/native-space-view/SpaceChatSheet.tsx
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 function SpaceChatSheet({ controller }) {
   const localParticipantId = controller.participants.localParticipant?.id ?? null;
   const sendDisabled = !controller.chatDraft.trim() && controller.chatAttachments.length === 0 || controller.chatAttachmentUploading;
-  const messages = useMemo9(() => controller.chat.messages, [controller.chat.messages]);
-  return /* @__PURE__ */ jsxs14(View15, { style: styles15.content, children: [
-    controller.chat.hasMore ? /* @__PURE__ */ jsx20(Pressable9, { accessibilityRole: "button", disabled: controller.chat.isLoadingOlder, onPress: () => void controller.chat.loadOlderMessages(), style: ({ pressed }) => [styles15.loadOlder, pressed && styles15.pressed], children: /* @__PURE__ */ jsx20(Text11, { style: styles15.loadOlderText, children: controller.chat.isLoadingOlder ? "Loading\u2026" : "Load earlier messages" }) }) : null,
-    /* @__PURE__ */ jsx20(
+  const messages = useMemo10(() => controller.chat.messages, [controller.chat.messages]);
+  return /* @__PURE__ */ jsxs16(View17, { style: styles17.content, children: [
+    controller.chat.hasMore ? /* @__PURE__ */ jsx22(Pressable11, { accessibilityRole: "button", disabled: controller.chat.isLoadingOlder, onPress: () => void controller.chat.loadOlderMessages(), style: ({ pressed }) => [styles17.loadOlder, pressed && styles17.pressed], children: /* @__PURE__ */ jsx22(Text13, { style: styles17.loadOlderText, children: controller.chat.isLoadingOlder ? "Loading\u2026" : "Load earlier messages" }) }) : null,
+    /* @__PURE__ */ jsx22(
       FlatList3,
       {
         accessibilityLabel: "Chat messages",
-        contentContainerStyle: styles15.messageList,
+        contentContainerStyle: styles17.messageList,
         data: messages,
         keyExtractor: (message) => message.id,
-        ListEmptyComponent: /* @__PURE__ */ jsx20(EmptyChat, {}),
+        ListEmptyComponent: /* @__PURE__ */ jsx22(EmptyChat, {}),
         onViewableItemsChanged: ({ viewableItems }) => {
           const sequence = viewableItems.at(-1)?.item.sequence;
           if (sequence) controller.markChatMessageVisible(sequence);
         },
-        renderItem: ({ item }) => /* @__PURE__ */ jsx20(ChatMessage, { isLocal: item.senderId === localParticipantId, message: item, onOpenAttachment: controller.openChatAttachment }),
+        renderItem: ({ item }) => /* @__PURE__ */ jsx22(ChatMessage, { isLocal: item.senderId === localParticipantId, message: item, onOpenAttachment: controller.openChatAttachment, resolveAttachmentUrl: controller.resolveChatAttachmentUrl }),
         showsVerticalScrollIndicator: false
       }
     ),
-    controller.chat.pendingMessages.map((message) => /* @__PURE__ */ jsxs14(View15, { style: styles15.pendingMessage, children: [
-      /* @__PURE__ */ jsx20(Text11, { style: styles15.pendingText, children: message.text }),
-      /* @__PURE__ */ jsx20(Text11, { style: styles15.pendingMeta, children: message.state === "sending" ? "Sending\u2026" : message.error?.message ?? "Send failed" }),
-      message.state === "failed" ? /* @__PURE__ */ jsx20(Pressable9, { accessibilityRole: "button", onPress: () => void controller.chat.retryMessage(message.clientMessageId), children: /* @__PURE__ */ jsx20(Text11, { style: styles15.retry, children: "Retry" }) }) : null
+    controller.chat.pendingMessages.map((message) => /* @__PURE__ */ jsxs16(View17, { style: styles17.pendingMessage, children: [
+      /* @__PURE__ */ jsx22(Text13, { style: styles17.pendingText, children: message.text }),
+      /* @__PURE__ */ jsx22(Text13, { style: styles17.pendingMeta, children: message.state === "sending" ? "Sending\u2026" : message.error?.message ?? "Send failed" }),
+      message.state === "failed" ? /* @__PURE__ */ jsx22(Pressable11, { accessibilityRole: "button", onPress: () => void controller.chat.retryMessage(message.clientMessageId), children: /* @__PURE__ */ jsx22(Text13, { style: styles17.retry, children: "Retry" }) }) : null
     ] }, message.clientMessageId)),
-    controller.chatAttachments.length ? /* @__PURE__ */ jsx20(View15, { accessibilityLabel: "Selected attachments", style: styles15.selectedAttachments, children: controller.chatAttachments.map((attachment, index) => /* @__PURE__ */ jsxs14(View15, { style: styles15.selectedAttachment, children: [
-      /* @__PURE__ */ jsx20(Text11, { numberOfLines: 1, style: styles15.selectedAttachmentText, children: attachment.fileName }),
-      /* @__PURE__ */ jsx20(Pressable9, { accessibilityLabel: `Remove ${attachment.fileName}`, accessibilityRole: "button", disabled: controller.chatAttachmentUploading, onPress: () => controller.removeChatAttachment(index), children: /* @__PURE__ */ jsx20(Text11, { style: styles15.removeAttachment, children: "Remove" }) })
+    controller.chatAttachments.length ? /* @__PURE__ */ jsx22(View17, { accessibilityLabel: "Selected attachments", style: styles17.selectedAttachments, children: controller.chatAttachments.map((attachment, index) => /* @__PURE__ */ jsxs16(View17, { style: styles17.selectedAttachment, children: [
+      /* @__PURE__ */ jsx22(Text13, { numberOfLines: 1, style: styles17.selectedAttachmentText, children: attachment.fileName }),
+      /* @__PURE__ */ jsx22(Pressable11, { accessibilityLabel: `Remove ${attachment.fileName}`, accessibilityRole: "button", disabled: controller.chatAttachmentUploading, onPress: () => controller.removeChatAttachment(index), children: /* @__PURE__ */ jsx22(Text13, { style: styles17.removeAttachment, children: "Remove" }) })
     ] }, `${attachment.fileName}-${index}`)) }) : null,
-    controller.chatAttachmentError ? /* @__PURE__ */ jsx20(Text11, { accessibilityLiveRegion: "polite", style: styles15.attachmentError, children: controller.chatAttachmentError }) : null,
-    /* @__PURE__ */ jsx20(KeyboardAvoidingView, { behavior: Platform7.OS === "ios" ? "padding" : void 0, keyboardVerticalOffset: Platform7.OS === "ios" ? 12 : 0, children: /* @__PURE__ */ jsxs14(View15, { style: styles15.composer, children: [
-      controller.canPickChatFiles ? /* @__PURE__ */ jsx20(
-        Pressable9,
+    controller.chatAttachmentError ? /* @__PURE__ */ jsx22(Text13, { accessibilityLiveRegion: "polite", style: styles17.attachmentError, children: controller.chatAttachmentError }) : null,
+    /* @__PURE__ */ jsx22(KeyboardAvoidingView2, { behavior: Platform10.OS === "ios" ? "padding" : void 0, keyboardVerticalOffset: Platform10.OS === "ios" ? 12 : 0, children: /* @__PURE__ */ jsxs16(View17, { style: styles17.composer, children: [
+      controller.canPickChatFiles ? /* @__PURE__ */ jsx22(
+        Pressable11,
         {
           accessibilityLabel: "Attach file",
           accessibilityRole: "button",
           disabled: controller.chatAttachmentPicking || controller.chatAttachmentUploading,
           onPress: () => void controller.pickChatFiles(),
-          style: ({ pressed }) => [styles15.composerButton, (controller.chatAttachmentPicking || controller.chatAttachmentUploading) && styles15.sendDisabled, pressed && styles15.pressed],
-          children: /* @__PURE__ */ jsx20(Text11, { style: styles15.composerButtonText, children: controller.chatAttachmentPicking ? "Choosing\u2026" : "Attach" })
+          style: ({ pressed }) => [styles17.composerButton, (controller.chatAttachmentPicking || controller.chatAttachmentUploading) && styles17.sendDisabled, pressed && styles17.pressed],
+          children: /* @__PURE__ */ jsx22(Text13, { style: styles17.composerButtonText, children: controller.chatAttachmentPicking ? "Choosing\u2026" : "Attach" })
         }
       ) : null,
-      /* @__PURE__ */ jsx20(
-        TextInput,
+      /* @__PURE__ */ jsx22(
+        TextInput2,
         {
           accessibilityLabel: "Message the Space",
           editable: !controller.chatAttachmentUploading,
@@ -2260,41 +2711,46 @@ function SpaceChatSheet({ controller }) {
           onSubmitEditing: controller.sendChatMessage,
           placeholder: "Message the Space",
           placeholderTextColor: Theme.colors.placeholder,
-          style: styles15.input,
+          style: styles17.input,
           value: controller.chatDraft
         }
       ),
-      /* @__PURE__ */ jsx20(Pressable9, { accessibilityLabel: "Send message", accessibilityRole: "button", disabled: sendDisabled, onPress: controller.sendChatMessage, style: ({ pressed }) => [styles15.sendButton, sendDisabled && styles15.sendDisabled, pressed && styles15.pressed], children: controller.chatAttachmentUploading ? /* @__PURE__ */ jsx20(Text11, { style: styles15.uploadingText, children: "\u2026" }) : /* @__PURE__ */ jsx20(HugeiconsIcon8, { color: Theme.colors.primaryForeground, icon: Navigation03Icon, size: 21 }) })
+      /* @__PURE__ */ jsx22(Pressable11, { accessibilityLabel: "Send message", accessibilityRole: "button", disabled: sendDisabled, onPress: controller.sendChatMessage, style: ({ pressed }) => [styles17.sendButton, sendDisabled && styles17.sendDisabled, pressed && styles17.pressed], children: controller.chatAttachmentUploading ? /* @__PURE__ */ jsx22(Text13, { style: styles17.uploadingText, children: "\u2026" }) : /* @__PURE__ */ jsx22(HugeiconsIcon8, { color: Theme.colors.primaryForeground, icon: Navigation03Icon, size: 21 }) })
     ] }) })
   ] });
 }
-function ChatMessage({ isLocal, message, onOpenAttachment }) {
+function ChatMessage({
+  isLocal,
+  message,
+  onOpenAttachment,
+  resolveAttachmentUrl
+}) {
   const timestamp = formatChatTimestamp(message.timestamp);
-  return /* @__PURE__ */ jsxs14(View15, { style: [styles15.messageRow, isLocal && styles15.messageRowLocal], children: [
-    !isLocal ? /* @__PURE__ */ jsx20(InitialsAvatar, { name: message.senderName, size: 42 }) : null,
-    /* @__PURE__ */ jsxs14(View15, { style: [styles15.messageCopy, isLocal && styles15.messageCopyLocal], children: [
-      /* @__PURE__ */ jsx20(Text11, { style: [styles15.sender, isLocal && styles15.senderLocal], children: isLocal ? `${message.senderName} (You)` : message.senderName }),
-      /* @__PURE__ */ jsxs14(View15, { style: [styles15.bubble, isLocal ? styles15.localBubble : styles15.remoteBubble], children: [
-        message.text ? /* @__PURE__ */ jsx20(Text11, { style: [styles15.messageText, isLocal && styles15.localMessageText], children: message.text }) : null,
-        message.attachments.map((attachment) => /* @__PURE__ */ jsx20(Pressable9, { accessibilityRole: "link", onPress: () => onOpenAttachment(attachment.attachmentId), style: ({ pressed }) => [styles15.attachmentLink, pressed && styles15.pressed], children: /* @__PURE__ */ jsx20(Text11, { numberOfLines: 1, style: [styles15.attachment, isLocal && styles15.localMessageText], children: attachment.fileName }) }, attachment.attachmentId))
+  return /* @__PURE__ */ jsxs16(View17, { style: [styles17.messageRow, isLocal && styles17.messageRowLocal], children: [
+    !isLocal ? /* @__PURE__ */ jsx22(InitialsAvatar, { name: message.senderName, size: 42 }) : null,
+    /* @__PURE__ */ jsxs16(View17, { style: [styles17.messageCopy, isLocal && styles17.messageCopyLocal], children: [
+      /* @__PURE__ */ jsx22(Text13, { style: [styles17.sender, isLocal && styles17.senderLocal], children: isLocal ? `${message.senderName} (You)` : message.senderName }),
+      /* @__PURE__ */ jsxs16(View17, { style: [styles17.bubble, isLocal ? styles17.localBubble : styles17.remoteBubble], children: [
+        message.text ? /* @__PURE__ */ jsx22(Text13, { style: [styles17.messageText, isLocal && styles17.localMessageText], children: message.text }) : null,
+        message.attachments.map((attachment) => /* @__PURE__ */ jsx22(SpaceChatAttachment, { attachment, isLocal, onOpen: onOpenAttachment, resolveUrl: resolveAttachmentUrl }, attachment.attachmentId))
       ] }),
-      /* @__PURE__ */ jsx20(Text11, { style: [styles15.timestamp, isLocal && styles15.timestampLocal], children: timestamp }),
-      message.readBy.length ? /* @__PURE__ */ jsxs14(Text11, { style: [styles15.readBy, isLocal && styles15.timestampLocal], children: [
+      /* @__PURE__ */ jsx22(Text13, { style: [styles17.timestamp, isLocal && styles17.timestampLocal], children: timestamp }),
+      message.readBy.length ? /* @__PURE__ */ jsxs16(Text13, { style: [styles17.readBy, isLocal && styles17.timestampLocal], children: [
         "Read by ",
         message.readBy.map((reader) => reader.displayName).join(", ")
       ] }) : null
     ] }),
-    isLocal ? /* @__PURE__ */ jsx20(InitialsAvatar, { name: message.senderName, size: 42 }) : null
+    isLocal ? /* @__PURE__ */ jsx22(InitialsAvatar, { name: message.senderName, size: 42 }) : null
   ] });
 }
 function EmptyChat() {
-  return /* @__PURE__ */ jsxs14(View15, { style: styles15.emptyState, children: [
-    /* @__PURE__ */ jsx20(View15, { style: styles15.emptyIcon, children: /* @__PURE__ */ jsx20(HugeiconsIcon8, { color: Theme.colors.ink2, icon: Message01Icon, size: 26 }) }),
-    /* @__PURE__ */ jsx20(Text11, { style: styles15.emptyTitle, children: "No messages yet" }),
-    /* @__PURE__ */ jsx20(Text11, { style: styles15.emptyText, children: "Send a message to start the conversation." })
+  return /* @__PURE__ */ jsxs16(View17, { style: styles17.emptyState, children: [
+    /* @__PURE__ */ jsx22(View17, { style: styles17.emptyIcon, children: /* @__PURE__ */ jsx22(HugeiconsIcon8, { color: Theme.colors.ink2, icon: Message01Icon, size: 26 }) }),
+    /* @__PURE__ */ jsx22(Text13, { style: styles17.emptyTitle, children: "No messages yet" }),
+    /* @__PURE__ */ jsx22(Text13, { style: styles17.emptyText, children: "Send a message to start the conversation." })
   ] });
 }
-var styles15 = StyleSheet16.create({
+var styles17 = StyleSheet18.create({
   content: { flex: 1, minHeight: 0 },
   loadOlder: { alignSelf: "center", minHeight: 44, paddingHorizontal: Theme.spacing.md, paddingVertical: Theme.spacing.sm, justifyContent: "center" },
   loadOlderText: { color: Theme.colors.information, fontSize: 14, fontWeight: "700" },
@@ -2310,8 +2766,6 @@ var styles15 = StyleSheet16.create({
   localBubble: { backgroundColor: Theme.colors.ink, borderColor: Theme.colors.ink, borderTopRightRadius: 5 },
   messageText: { color: Theme.colors.ink, fontSize: 17, lineHeight: 24 },
   localMessageText: { color: Theme.colors.surface },
-  attachmentLink: { justifyContent: "center", marginTop: 4, maxWidth: "100%", minHeight: 32 },
-  attachment: { color: Theme.colors.information, fontSize: 14 },
   timestamp: { color: Theme.colors.ink3, fontSize: 12, marginTop: 5, paddingHorizontal: 4 },
   timestampLocal: { textAlign: "right" },
   readBy: { color: Theme.colors.ink3, fontSize: 11, marginTop: 3, paddingHorizontal: 4 },
@@ -2345,8 +2799,8 @@ import MoreHorizontalIcon2 from "@hugeicons/core-free-icons/dist/esm/MoreHorizon
 import Video01Icon4 from "@hugeicons/core-free-icons/dist/esm/Video01Icon";
 import VideoOffIcon3 from "@hugeicons/core-free-icons/dist/esm/VideoOffIcon";
 import { HugeiconsIcon as HugeiconsIcon10 } from "@hugeicons/react-native";
-import { useState as useState6 } from "react";
-import { Pressable as Pressable11, ScrollView as ScrollView2, StyleSheet as StyleSheet18, Text as Text13, View as View17 } from "react-native";
+import { useState as useState8 } from "react";
+import { Pressable as Pressable13, ScrollView as ScrollView3, StyleSheet as StyleSheet20, Text as Text15, View as View19 } from "react-native";
 
 // src/components/native-space-view/ParticipantActionSheet.tsx
 import CancelCircleIcon from "@hugeicons/core-free-icons/dist/esm/CancelCircleIcon";
@@ -2354,8 +2808,8 @@ import MicOff01Icon5 from "@hugeicons/core-free-icons/dist/esm/MicOff01Icon";
 import UserIcon from "@hugeicons/core-free-icons/dist/esm/UserIcon";
 import Video01Icon3 from "@hugeicons/core-free-icons/dist/esm/Video01Icon";
 import { HugeiconsIcon as HugeiconsIcon9 } from "@hugeicons/react-native";
-import { Modal as Modal4, Platform as Platform8, Pressable as Pressable10, StyleSheet as StyleSheet17, Text as Text12, View as View16 } from "react-native";
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Modal as Modal5, Platform as Platform11, Pressable as Pressable12, StyleSheet as StyleSheet19, Text as Text14, View as View18 } from "react-native";
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
 function ParticipantActionSheet({ controller, participantId, onClose }) {
   const participant = participantId ? controller.participants.participants.find((item) => item.id === participantId) : void 0;
   const descriptors = buildParticipantActionDescriptors({
@@ -2375,33 +2829,33 @@ function ParticipantActionSheet({ controller, participantId, onClose }) {
     if (descriptor.kind === "stopScreenShare") controller.stopParticipantScreenShare(participantId);
     if (descriptor.kind === "remove") controller.removeParticipant(participantId);
   };
-  return /* @__PURE__ */ jsx21(Modal4, { animationType: "fade", onRequestClose: onClose, transparent: true, visible: participantId !== null, children: /* @__PURE__ */ jsxs15(View16, { style: styles16.modalRoot, children: [
-    /* @__PURE__ */ jsx21(Pressable10, { accessibilityLabel: "Close Participant actions", onPress: onClose, style: styles16.backdrop }),
-    /* @__PURE__ */ jsxs15(View16, { style: styles16.card, children: [
-      /* @__PURE__ */ jsxs15(View16, { style: styles16.cardHeader, children: [
-        participant ? /* @__PURE__ */ jsx21(InitialsAvatar, { name: participant.displayName, size: 44 }) : /* @__PURE__ */ jsx21(IconTile, { icon: UserIcon }),
-        /* @__PURE__ */ jsx21(View16, { style: styles16.headerCopy, children: /* @__PURE__ */ jsx21(Text12, { numberOfLines: 1, style: styles16.name, children: participant?.displayName ?? "Participant" }) }),
-        /* @__PURE__ */ jsx21(CloseButton, { label: "Close Participant actions", onPress: onClose })
+  return /* @__PURE__ */ jsx23(Modal5, { animationType: "fade", onRequestClose: onClose, transparent: true, visible: participantId !== null, children: /* @__PURE__ */ jsxs17(View18, { style: styles18.modalRoot, children: [
+    /* @__PURE__ */ jsx23(Pressable12, { accessibilityLabel: "Close Participant actions", onPress: onClose, style: styles18.backdrop }),
+    /* @__PURE__ */ jsxs17(View18, { style: styles18.card, children: [
+      /* @__PURE__ */ jsxs17(View18, { style: styles18.cardHeader, children: [
+        participant ? /* @__PURE__ */ jsx23(InitialsAvatar, { name: participant.displayName, size: 44 }) : /* @__PURE__ */ jsx23(IconTile, { icon: UserIcon }),
+        /* @__PURE__ */ jsx23(View18, { style: styles18.headerCopy, children: /* @__PURE__ */ jsx23(Text14, { numberOfLines: 1, style: styles18.name, children: participant?.displayName ?? "Participant" }) }),
+        /* @__PURE__ */ jsx23(CloseButton, { label: "Close Participant actions", onPress: onClose })
       ] }),
-      /* @__PURE__ */ jsxs15(View16, { style: styles16.actions, children: [
-        descriptors.filter((descriptor) => !descriptor.destructive).map((descriptor) => /* @__PURE__ */ jsx21(ParticipantActionRow, { descriptor, onPress: () => run(descriptor) }, descriptor.kind)),
-        descriptors.some((descriptor) => descriptor.destructive) ? /* @__PURE__ */ jsx21(View16, { style: styles16.divider }) : null,
-        descriptors.filter((descriptor) => descriptor.destructive).map((descriptor) => /* @__PURE__ */ jsx21(ParticipantActionRow, { descriptor, onPress: () => run(descriptor) }, descriptor.kind))
+      /* @__PURE__ */ jsxs17(View18, { style: styles18.actions, children: [
+        descriptors.filter((descriptor) => !descriptor.destructive).map((descriptor) => /* @__PURE__ */ jsx23(ParticipantActionRow, { descriptor, onPress: () => run(descriptor) }, descriptor.kind)),
+        descriptors.some((descriptor) => descriptor.destructive) ? /* @__PURE__ */ jsx23(View18, { style: styles18.divider }) : null,
+        descriptors.filter((descriptor) => descriptor.destructive).map((descriptor) => /* @__PURE__ */ jsx23(ParticipantActionRow, { descriptor, onPress: () => run(descriptor) }, descriptor.kind))
       ] }),
-      !descriptors.length ? /* @__PURE__ */ jsx21(Text12, { style: styles16.emptyText, children: "No actions are available for this Participant." }) : null
+      !descriptors.length ? /* @__PURE__ */ jsx23(Text14, { style: styles18.emptyText, children: "No actions are available for this Participant." }) : null
     ] })
   ] }) });
 }
 function ParticipantActionRow({ descriptor, onPress }) {
   const icon = descriptor.kind === "mute" || descriptor.kind === "requestUnmute" ? MicOff01Icon5 : descriptor.kind === "requestCamera" || descriptor.kind === "stopCamera" ? Video01Icon3 : CancelCircleIcon;
-  return /* @__PURE__ */ jsxs15(Pressable10, { accessibilityLabel: descriptor.label, accessibilityRole: "button", onPress, style: ({ pressed }) => [styles16.actionRow, descriptor.destructive && styles16.destructiveRow, pressed && styles16.pressed], children: [
-    /* @__PURE__ */ jsx21(HugeiconsIcon9, { color: descriptor.destructive ? Theme.colors.error : Theme.colors.ink, icon, size: 21 }),
-    /* @__PURE__ */ jsx21(Text12, { style: [styles16.actionLabel, descriptor.destructive && styles16.destructiveText], children: descriptor.label })
+  return /* @__PURE__ */ jsxs17(Pressable12, { accessibilityLabel: descriptor.label, accessibilityRole: "button", onPress, style: ({ pressed }) => [styles18.actionRow, descriptor.destructive && styles18.destructiveRow, pressed && styles18.pressed], children: [
+    /* @__PURE__ */ jsx23(HugeiconsIcon9, { color: descriptor.destructive ? Theme.colors.error : Theme.colors.ink, icon, size: 21 }),
+    /* @__PURE__ */ jsx23(Text14, { style: [styles18.actionLabel, descriptor.destructive && styles18.destructiveText], children: descriptor.label })
   ] });
 }
-var styles16 = StyleSheet17.create({
-  modalRoot: { alignItems: "center", flex: 1, justifyContent: "flex-end", paddingBottom: Platform8.OS === "ios" ? Theme.spacing["2xl"] : Theme.spacing.lg, paddingHorizontal: Theme.spacing.lg, paddingTop: Theme.spacing.lg },
-  backdrop: { ...StyleSheet17.absoluteFillObject, backgroundColor: Theme.colors.darkOverlay22 },
+var styles18 = StyleSheet19.create({
+  modalRoot: { alignItems: "center", flex: 1, justifyContent: "flex-end", paddingBottom: Platform11.OS === "ios" ? Theme.spacing["2xl"] : Theme.spacing.lg, paddingHorizontal: Theme.spacing.lg, paddingTop: Theme.spacing.lg },
+  backdrop: { ...StyleSheet19.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 },
@@ -2417,63 +2871,63 @@ var styles16 = StyleSheet17.create({
 });
 
 // src/components/native-space-view/SpacePeopleSheet.tsx
-import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
 function SpacePeopleSheet({ controller }) {
-  const [actionParticipantId, setActionParticipantId] = useState6(null);
+  const [actionParticipantId, setActionParticipantId] = useState8(null);
   const closeActions = () => {
     setActionParticipantId(null);
   };
   const openActions = (participantId) => {
     setActionParticipantId(participantId);
   };
-  return /* @__PURE__ */ jsxs16(View17, { style: styles17.content, children: [
-    /* @__PURE__ */ jsxs16(ScrollView2, { contentContainerStyle: styles17.list, showsVerticalScrollIndicator: false, children: [
-      controller.admissionRequests.map((request) => /* @__PURE__ */ jsxs16(View17, { style: styles17.admissionRequest, children: [
-        /* @__PURE__ */ jsx22(InitialsAvatar, { name: request.displayName, size: 48 }),
-        /* @__PURE__ */ jsxs16(View17, { style: styles17.rowCopy, children: [
-          /* @__PURE__ */ jsx22(Text13, { numberOfLines: 1, style: styles17.name, children: request.displayName }),
-          /* @__PURE__ */ jsx22(Text13, { style: styles17.meta, children: "At the Entrance" })
+  return /* @__PURE__ */ jsxs18(View19, { style: styles19.content, children: [
+    /* @__PURE__ */ jsxs18(ScrollView3, { contentContainerStyle: styles19.list, showsVerticalScrollIndicator: false, children: [
+      controller.admissionRequests.map((request) => /* @__PURE__ */ jsxs18(View19, { style: styles19.admissionRequest, children: [
+        /* @__PURE__ */ jsx24(InitialsAvatar, { name: request.displayName, size: 48 }),
+        /* @__PURE__ */ jsxs18(View19, { style: styles19.rowCopy, children: [
+          /* @__PURE__ */ jsx24(Text15, { numberOfLines: 1, style: styles19.name, children: request.displayName }),
+          /* @__PURE__ */ jsx24(Text15, { style: styles19.meta, children: "At the Entrance" })
         ] }),
-        controller.canManageAdmission ? /* @__PURE__ */ jsxs16(View17, { style: styles17.admissionActions, children: [
-          /* @__PURE__ */ jsx22(Pressable11, { accessibilityRole: "button", onPress: () => controller.denyAdmission(request.requestId), style: ({ pressed }) => [styles17.denyButton, pressed && styles17.pressed], children: /* @__PURE__ */ jsx22(Text13, { style: styles17.denyText, children: "Deny" }) }),
-          /* @__PURE__ */ jsx22(Pressable11, { accessibilityRole: "button", onPress: () => controller.admitParticipant(request.requestId), style: ({ pressed }) => [styles17.admitButton, pressed && styles17.pressed], children: /* @__PURE__ */ jsx22(Text13, { style: styles17.admitText, children: "Admit" }) })
+        controller.canManageAdmission ? /* @__PURE__ */ jsxs18(View19, { style: styles19.admissionActions, children: [
+          /* @__PURE__ */ jsx24(Pressable13, { accessibilityRole: "button", onPress: () => controller.denyAdmission(request.requestId), style: ({ pressed }) => [styles19.denyButton, pressed && styles19.pressed], children: /* @__PURE__ */ jsx24(Text15, { style: styles19.denyText, children: "Deny" }) }),
+          /* @__PURE__ */ jsx24(Pressable13, { accessibilityRole: "button", onPress: () => controller.admitParticipant(request.requestId), style: ({ pressed }) => [styles19.admitButton, pressed && styles19.pressed], children: /* @__PURE__ */ jsx24(Text15, { style: styles19.admitText, children: "Admit" }) })
         ] }) : null
       ] }, request.requestId)),
       controller.participants.participants.map((participant) => {
         const local = participant.id === controller.participants.localParticipant?.id;
         const canAct = !local && canActOnParticipant(controller);
-        return /* @__PURE__ */ jsxs16(View17, { style: styles17.participantRow, children: [
-          /* @__PURE__ */ jsx22(InitialsAvatar, { name: participant.displayName, size: 54 }),
-          /* @__PURE__ */ jsx22(View17, { style: styles17.rowCopy, children: /* @__PURE__ */ jsxs16(Text13, { numberOfLines: 1, style: styles17.name, children: [
+        return /* @__PURE__ */ jsxs18(View19, { style: styles19.participantRow, children: [
+          /* @__PURE__ */ jsx24(InitialsAvatar, { name: participant.displayName, size: 54 }),
+          /* @__PURE__ */ jsx24(View19, { style: styles19.rowCopy, children: /* @__PURE__ */ jsxs18(Text15, { numberOfLines: 1, style: styles19.name, children: [
             participant.displayName,
             local ? " (You)" : ""
           ] }) }),
-          /* @__PURE__ */ jsxs16(View17, { style: styles17.mediaStatus, children: [
-            /* @__PURE__ */ jsx22(HugeiconsIcon10, { color: participant.audioEnabled ? Theme.colors.success : Theme.colors.error, icon: participant.audioEnabled ? Mic01Icon3 : MicOff01Icon6, size: 22 }),
-            /* @__PURE__ */ jsx22(View17, { style: [styles17.statusDot, { backgroundColor: participant.audioEnabled ? Theme.colors.chalkGreen : Theme.colors.chalkPink }] })
+          /* @__PURE__ */ jsxs18(View19, { style: styles19.mediaStatus, children: [
+            /* @__PURE__ */ jsx24(HugeiconsIcon10, { color: participant.audioEnabled ? Theme.colors.success : Theme.colors.error, icon: participant.audioEnabled ? Mic01Icon3 : MicOff01Icon6, size: 22 }),
+            /* @__PURE__ */ jsx24(View19, { style: [styles19.statusDot, { backgroundColor: participant.audioEnabled ? Theme.colors.chalkGreen : Theme.colors.chalkPink }] })
           ] }),
-          /* @__PURE__ */ jsxs16(View17, { style: styles17.mediaStatus, children: [
-            /* @__PURE__ */ jsx22(HugeiconsIcon10, { color: participant.videoEnabled ? Theme.colors.success : Theme.colors.error, icon: participant.videoEnabled ? Video01Icon4 : VideoOffIcon3, size: 22 }),
-            /* @__PURE__ */ jsx22(View17, { style: [styles17.statusDot, { backgroundColor: participant.videoEnabled ? Theme.colors.chalkGreen : Theme.colors.chalkPink }] })
+          /* @__PURE__ */ jsxs18(View19, { style: styles19.mediaStatus, children: [
+            /* @__PURE__ */ jsx24(HugeiconsIcon10, { color: participant.videoEnabled ? Theme.colors.success : Theme.colors.error, icon: participant.videoEnabled ? Video01Icon4 : VideoOffIcon3, size: 22 }),
+            /* @__PURE__ */ jsx24(View19, { style: [styles19.statusDot, { backgroundColor: participant.videoEnabled ? Theme.colors.chalkGreen : Theme.colors.chalkPink }] })
           ] }),
-          canAct ? /* @__PURE__ */ jsx22(Pressable11, { accessibilityLabel: `Actions for ${participant.displayName}`, accessibilityRole: "button", onPress: () => openActions(participant.id), style: ({ pressed }) => [styles17.moreButton, pressed && styles17.pressed], children: /* @__PURE__ */ jsx22(HugeiconsIcon10, { color: Theme.colors.ink, icon: MoreHorizontalIcon2, size: 22 }) }) : null
+          canAct ? /* @__PURE__ */ jsx24(Pressable13, { accessibilityLabel: `Actions for ${participant.displayName}`, accessibilityRole: "button", onPress: () => openActions(participant.id), style: ({ pressed }) => [styles19.moreButton, pressed && styles19.pressed], children: /* @__PURE__ */ jsx24(HugeiconsIcon10, { color: Theme.colors.ink, icon: MoreHorizontalIcon2, size: 22 }) }) : null
         ] }, participant.id);
       }),
-      !controller.participants.participants.length && !controller.admissionRequests.length ? /* @__PURE__ */ jsx22(EmptyPeople, {}) : null
+      !controller.participants.participants.length && !controller.admissionRequests.length ? /* @__PURE__ */ jsx24(EmptyPeople, {}) : null
     ] }),
-    /* @__PURE__ */ jsx22(ParticipantActionSheet, { controller, onClose: closeActions, participantId: actionParticipantId })
+    /* @__PURE__ */ jsx24(ParticipantActionSheet, { controller, onClose: closeActions, participantId: actionParticipantId })
   ] });
 }
 function canActOnParticipant(controller) {
   return controller.canMuteParticipants || controller.canRequestMedia || controller.canStopParticipantCamera || controller.canStopParticipantScreenShare || controller.canRemoveParticipants;
 }
 function EmptyPeople() {
-  return /* @__PURE__ */ jsxs16(View17, { style: styles17.emptyState, children: [
-    /* @__PURE__ */ jsx22(Text13, { style: styles17.emptyTitle, children: "No People yet" }),
-    /* @__PURE__ */ jsx22(Text13, { style: styles17.emptyText, children: "People will appear here as they join the Space." })
+  return /* @__PURE__ */ jsxs18(View19, { style: styles19.emptyState, children: [
+    /* @__PURE__ */ jsx24(Text15, { style: styles19.emptyTitle, children: "No People yet" }),
+    /* @__PURE__ */ jsx24(Text15, { style: styles19.emptyText, children: "People will appear here as they join the Space." })
   ] });
 }
-var styles17 = StyleSheet18.create({
+var styles19 = StyleSheet20.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 },
@@ -2496,23 +2950,23 @@ var styles17 = StyleSheet18.create({
 });
 
 // src/components/native-space-view/SpacePanelSheet.tsx
-import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
 function SpacePanelSheet({ controller }) {
   const visible = controller.panel !== null;
   const close = controller.closePanel;
   const isChat = controller.panel === "chat";
-  return /* @__PURE__ */ jsx23(Modal5, { animationType: "slide", onRequestClose: close, transparent: true, visible, children: /* @__PURE__ */ jsxs17(View18, { style: styles18.modalRoot, children: [
-    /* @__PURE__ */ jsx23(Pressable12, { accessibilityLabel: "Close panel", onPress: close, style: styles18.backdrop }),
-    /* @__PURE__ */ jsxs17(SafeAreaView, { style: styles18.sheet, children: [
-      /* @__PURE__ */ jsx23(SheetGrip, {}),
-      /* @__PURE__ */ jsx23(SurfaceHeader, { closeLabel: `Close ${isChat ? "Chat" : "People"}`, count: !isChat ? controller.participantCount : void 0, onClose: close, title: isChat ? "Chat" : "People" }),
-      isChat ? /* @__PURE__ */ jsx23(SpaceChatSheet, { controller }) : /* @__PURE__ */ jsx23(SpacePeopleSheet, { controller })
+  return /* @__PURE__ */ jsx25(Modal6, { animationType: "slide", onRequestClose: close, transparent: true, visible, children: /* @__PURE__ */ jsxs19(View20, { style: styles20.modalRoot, children: [
+    /* @__PURE__ */ jsx25(Pressable14, { accessibilityLabel: "Close panel", onPress: close, style: styles20.backdrop }),
+    /* @__PURE__ */ jsxs19(SafeAreaView, { style: styles20.sheet, children: [
+      /* @__PURE__ */ jsx25(SheetGrip, {}),
+      /* @__PURE__ */ jsx25(SurfaceHeader, { closeLabel: `Close ${isChat ? "Chat" : "People"}`, count: !isChat ? controller.participantCount : void 0, onClose: close, title: isChat ? "Chat" : "People" }),
+      isChat ? /* @__PURE__ */ jsx25(SpaceChatSheet, { controller }) : /* @__PURE__ */ jsx25(SpacePeopleSheet, { controller })
     ] })
   ] }) });
 }
-var styles18 = StyleSheet19.create({
+var styles20 = StyleSheet21.create({
   modalRoot: { flex: 1, justifyContent: "flex-end" },
-  backdrop: { ...StyleSheet19.absoluteFillObject, backgroundColor: Theme.colors.darkOverlay22 },
+  backdrop: { ...StyleSheet21.absoluteFillObject, backgroundColor: Theme.colors.darkOverlay22 },
   sheet: {
     backgroundColor: Theme.colors.surface,
     borderColor: Theme.colors.line,
@@ -2522,7 +2976,7 @@ var styles18 = StyleSheet19.create({
     flex: 1,
     marginTop: 78,
     overflow: "hidden",
-    paddingBottom: Platform9.OS === "android" ? Theme.spacing.sm : 0,
+    paddingBottom: Platform12.OS === "android" ? Theme.spacing.sm : 0,
     shadowColor: Theme.colors.ink,
     shadowOffset: { height: -8, width: 0 },
     shadowOpacity: 0.12,
@@ -2531,8 +2985,9 @@ var styles18 = StyleSheet19.create({
 });
 
 // src/components/native-space-view/useSpaceViewController.ts
-import { useCallback as useCallback8, useEffect as useEffect8, useMemo as useMemo12, useState as useState9 } from "react";
-import { Alert as Alert2, Linking } from "react-native";
+import { useCallback as useCallback9, useEffect as useEffect10, useMemo as useMemo13, useState as useState11 } from "react";
+import { Alert as Alert2, Linking, Platform as Platform13 } from "react-native";
+import { mediaDevices as mediaDevices2 } from "@cloudflare/react-native-webrtc";
 
 // src/components/native-space-view/diagnostics.ts
 function buildSpaceViewDiagnosticsSnapshot(input) {
@@ -2570,7 +3025,7 @@ function disabledAction(detail) {
 }
 
 // src/components/native-space-view/useSpaceViewDerived.ts
-import { useMemo as useMemo10 } from "react";
+import { useMemo as useMemo11 } from "react";
 import { useWindowDimensions as useWindowDimensions3 } from "react-native";
 
 // src/utils/native-space-layout.ts
@@ -2655,7 +3110,7 @@ function resolveNativeSpaceLayout({ participants, localParticipant, screenShare,
 // src/components/native-space-view/useSpaceViewDerived.ts
 function useSpaceViewDerived({ participants, localParticipant, screenShare, isWhiteboardOpen }) {
   const { width } = useWindowDimensions3();
-  return useMemo10(
+  return useMemo11(
     () => resolveNativeSpaceLayout({
       participants,
       localParticipant,
@@ -2668,27 +3123,27 @@ function useSpaceViewDerived({ participants, localParticipant, screenShare, isWh
 }
 
 // src/components/native-space-view/useSpaceViewPanels.ts
-import { useCallback as useCallback7, useEffect as useEffect7, useMemo as useMemo11, useRef as useRef4, useState as useState8 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect9, useMemo as useMemo12, useRef as useRef4, useState as useState10 } from "react";
 import { Alert, Share } from "react-native";
 
 // src/hooks/useLayout.ts
-import { useCallback as useCallback6, useEffect as useEffect6, useState as useState7 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect8, useState as useState9 } from "react";
 function useLayout({ layout: controlledLayout, onLayoutChange } = {}) {
-  const [uncontrolledLayout, setUncontrolledLayout] = useState7(controlledLayout ?? "focus");
-  const [isFullscreen, setFullscreen] = useState7(false);
+  const [uncontrolledLayout, setUncontrolledLayout] = useState9(controlledLayout ?? "focus");
+  const [isFullscreen, setFullscreen] = useState9(false);
   const layout = controlledLayout ?? uncontrolledLayout;
-  useEffect6(() => {
+  useEffect8(() => {
     if (controlledLayout) setUncontrolledLayout(controlledLayout);
   }, [controlledLayout]);
-  const setLayout = useCallback6(
+  const setLayout = useCallback7(
     (nextLayout) => {
       if (!controlledLayout) setUncontrolledLayout(nextLayout);
       onLayoutChange?.(nextLayout);
     },
     [controlledLayout, onLayoutChange]
   );
-  const toggleLayout = useCallback6(() => setLayout(layout === "grid" ? "focus" : "grid"), [layout, setLayout]);
-  const toggleFullscreen = useCallback6(async () => setFullscreen((current) => !current), []);
+  const toggleLayout = useCallback7(() => setLayout(layout === "grid" ? "focus" : "grid"), [layout, setLayout]);
+  const toggleFullscreen = useCallback7(async () => setFullscreen((current) => !current), []);
   return { layout, isMobileView: true, isFullscreen, setLayout, toggleLayout, toggleFullscreen };
 }
 
@@ -2703,14 +3158,14 @@ var emptyParticipants = Object.freeze([]);
 function useSpaceViewPanels({ spaceName, inviteLink, layout: controlledLayout, onLayoutChange, canWhiteboard, canDraw, canClear, canEndEpisode, transport, onLeave, onEndEpisode, run, journeyContext, initialState, controlledState }) {
   const fixtureLayout = controlledState?.layout ?? initialState?.layout ?? controlledLayout;
   const layout = useLayout({ layout: fixtureLayout, onLayoutChange });
-  const [panel, setPanel] = useState8(initialState?.panel ?? null);
-  const [actionsOpen, setActionsOpen] = useState8(initialState?.actionsOpen ?? false);
-  const [reactionPickerOpen, setReactionPickerOpen] = useState8(initialState?.reactionPickerOpen ?? false);
-  const [secondsElapsed, setSecondsElapsed] = useState8(0);
-  const [settingsOpen, setSettingsOpen] = useState8(initialState?.settingsOpen ?? false);
-  const [whiteboardOpen, setWhiteboardOpen] = useState8(initialState?.whiteboardOpen ?? false);
+  const [panel, setPanel] = useState10(initialState?.panel ?? null);
+  const [actionsOpen, setActionsOpen] = useState10(initialState?.actionsOpen ?? false);
+  const [reactionPickerOpen, setReactionPickerOpen] = useState10(initialState?.reactionPickerOpen ?? false);
+  const [secondsElapsed, setSecondsElapsed] = useState10(0);
+  const [settingsOpen, setSettingsOpen] = useState10(initialState?.settingsOpen ?? false);
+  const [whiteboardOpen, setWhiteboardOpen] = useState10(initialState?.whiteboardOpen ?? false);
   const generatedJourneyId = useRef4(globalThis.crypto?.randomUUID?.() ?? `native-whiteboard-${Date.now()}-${Math.random().toString(36).slice(2)}`);
-  useEffect7(() => {
+  useEffect9(() => {
     const durationSeconds = Math.max(0, Math.floor(controlledState?.durationSeconds ?? initialState?.durationSeconds ?? 0));
     const startedAt = Date.now() - durationSeconds * 1e3;
     const update = () => setSecondsElapsed(Math.max(0, Math.floor((Date.now() - startedAt) / 1e3)));
@@ -2718,14 +3173,14 @@ function useSpaceViewPanels({ spaceName, inviteLink, layout: controlledLayout, o
     const timer = globalThis.setInterval(update, 1e3);
     return () => globalThis.clearInterval(timer);
   }, [controlledState?.durationSeconds, initialState?.durationSeconds]);
-  useEffect7(() => {
+  useEffect9(() => {
     if (controlledState?.panel !== void 0) setPanel(controlledState.panel ?? null);
     if (controlledState?.actionsOpen !== void 0) setActionsOpen(controlledState.actionsOpen);
     if (controlledState?.reactionPickerOpen !== void 0) setReactionPickerOpen(controlledState.reactionPickerOpen);
     if (controlledState?.settingsOpen !== void 0) setSettingsOpen(controlledState.settingsOpen);
     if (controlledState?.whiteboardOpen !== void 0) setWhiteboardOpen(controlledState.whiteboardOpen);
   }, [controlledState]);
-  const whiteboard = useMemo11(
+  const whiteboard = useMemo12(
     () => ({
       isOpen: canWhiteboard && whiteboardOpen,
       canDraw: canWhiteboard && canDraw,
@@ -2745,7 +3200,7 @@ function useSpaceViewPanels({ spaceName, inviteLink, layout: controlledLayout, o
     }),
     [canClear, canDraw, canWhiteboard, journeyContext, run, transport, whiteboardOpen]
   );
-  const handleLeave = useCallback7(() => {
+  const handleLeave = useCallback8(() => {
     const buttons = [
       { text: "Cancel", style: "cancel" },
       { text: "Leave", style: "destructive", onPress: () => void run(onLeave) }
@@ -2759,7 +3214,7 @@ function useSpaceViewPanels({ spaceName, inviteLink, layout: controlledLayout, o
     }
     Alert.alert("Leave Space?", "Choose how you want to leave.", buttons);
   }, [canEndEpisode, onEndEpisode, onLeave, run]);
-  const handleInviteParticipants = useCallback7(() => {
+  const handleInviteParticipants = useCallback8(() => {
     void run(async () => {
       if (!inviteLink) throw new Error("The Space invite is not ready yet.");
       await Share.share({ message: inviteLink, title: spaceName || "Chalk Space", url: inviteLink });
@@ -2788,7 +3243,7 @@ function useSpaceViewPanels({ spaceName, inviteLink, layout: controlledLayout, o
 }
 
 // src/components/native-space-view/screen-share-availability.ts
-function resolveNativeScreenShareAvailability({ featureEnabled }) {
+function resolveNativeScreenShareAvailability({ featureEnabled, platform, simulator, captureAvailable }) {
   if (!featureEnabled) {
     return {
       enabled: false,
@@ -2796,6 +3251,8 @@ function resolveNativeScreenShareAvailability({ featureEnabled }) {
       detail: "features.screenShare=false in SpaceView props"
     };
   }
+  if (simulator) return { enabled: false, reason: "simulator", detail: "Screen sharing requires a physical device." };
+  if (platform !== "ios" && platform !== "android" || !captureAvailable) return { enabled: false, reason: "runtime-unsupported", detail: "Screen sharing is unavailable in this app runtime. Use a supported native build or share from the web app." };
   return {
     enabled: true,
     reason: null,
@@ -2808,10 +3265,8 @@ import { CHALK_CHAT_ATTACHMENT_LIMITS, CHALK_CHAT_ATTACHMENT_MIME_TYPES } from "
 var allowedMimeTypes = new Set(CHALK_CHAT_ATTACHMENT_MIME_TYPES);
 var encoder = new TextEncoder();
 function describeChatUploadFile(file) {
-  if ("bytes" in file) {
-    return { file, fileName: file.fileName, mimeType: file.mimeType, byteLength: file.bytes.byteLength };
-  }
-  return { file, fileName: file.name, mimeType: file.type, byteLength: file.size };
+  if ("arrayBuffer" in file) return { file, fileName: file.name, mimeType: file.type, byteLength: file.size };
+  return { file, fileName: file.fileName, mimeType: file.mimeType, byteLength: file.bytes.byteLength };
 }
 function validateChatFileDraft(draft) {
   if (!draft.fileName || encoder.encode(draft.fileName).byteLength > CHALK_CHAT_ATTACHMENT_LIMITS.maximumFileNameBytes) return "This file name is too long.";
@@ -2842,15 +3297,17 @@ function useSpaceViewController({ spaceName, inviteLink, layout: controlledLayou
   const chatSlice = useChat();
   const reactionSlice = useReactions();
   const whiteboardSlice = useWhiteboard();
+  const recording = useRecording().current;
+  const connection = useConnection();
   const journeyContext = getNativeJourneyContext(client);
-  const [actionsOpen, setActionsOpen] = useState9(false);
-  const [reactionPickerOpen, setReactionPickerOpen] = useState9(false);
-  const [chatDraft, setChatDraft] = useState9("");
-  const [chatAttachments, setChatAttachments] = useState9([]);
-  const [chatAttachmentError, setChatAttachmentError] = useState9(null);
-  const [chatAttachmentPicking, setChatAttachmentPicking] = useState9(false);
-  const [chatAttachmentUploading, setChatAttachmentUploading] = useState9(false);
-  const run = useCallback8(async (action) => {
+  const [actionsOpen, setActionsOpen] = useState11(false);
+  const [reactionPickerOpen, setReactionPickerOpen] = useState11(false);
+  const [chatDraft, setChatDraft] = useState11("");
+  const [chatAttachments, setChatAttachments] = useState11([]);
+  const [chatAttachmentError, setChatAttachmentError] = useState11(null);
+  const [chatAttachmentPicking, setChatAttachmentPicking] = useState11(false);
+  const [chatAttachmentUploading, setChatAttachmentUploading] = useState11(false);
+  const run = useCallback9(async (action) => {
     try {
       await action();
     } catch (cause) {
@@ -2858,14 +3315,14 @@ function useSpaceViewController({ spaceName, inviteLink, layout: controlledLayou
     }
   }, []);
   const localParticipantId = self.participantId;
-  const participants = useMemo12(
+  const participants = useMemo13(
     () => participantSlice.roster.map((participant) => {
       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",
+        audioEnabled: local ? media.local.microphone.state === "enabled" : 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,
@@ -2874,8 +3331,8 @@ function useSpaceViewController({ spaceName, inviteLink, layout: controlledLayou
     }),
     [localParticipantId, media.local.camera, media.local.microphone, media.remote, media.screenShare.track, participantSlice.roster]
   );
-  const localParticipant = useMemo12(() => participants.find((participant) => participant.id === localParticipantId) ?? null, [localParticipantId, participants]);
-  const spaceParticipants = useMemo12(
+  const localParticipant = useMemo13(() => participants.find((participant) => participant.id === localParticipantId) ?? null, [localParticipantId, participants]);
+  const spaceParticipants = useMemo13(
     () => ({
       participants,
       localParticipant,
@@ -2889,8 +3346,8 @@ function useSpaceViewController({ spaceName, inviteLink, layout: controlledLayou
     [client.participants, localParticipant, localParticipantId, participants]
   );
   const isLocalSharing = media.screenShare.state === "enabled" || media.screenShare.state === "requesting";
-  const remoteScreenShare = useMemo12(() => media.remote.find((publication) => publication.source === "screen") ?? null, [media.remote]);
-  const screenShare = useMemo12(
+  const remoteScreenShare = useMemo13(() => media.remote.find((publication) => publication.source === "screen") ?? null, [media.remote]);
+  const screenShare = useMemo13(
     () => ({
       isActive: isLocalSharing || remoteScreenShare !== null,
       isStarting: media.screenShare.state === "requesting",
@@ -2911,7 +3368,7 @@ function useSpaceViewController({ spaceName, inviteLink, layout: controlledLayou
     }),
     [client.media, isLocalSharing, localParticipantId, media.screenShare.state, media.screenShare.track, remoteScreenShare]
   );
-  const interactionState = useMemo12(() => {
+  const interactionState = useMemo13(() => {
     const raisedHands = participantSlice.roster.filter((participant) => participant.handRaised).map((participant) => participant.participantId);
     const activeReactions = reactionSlice.active.map((reaction) => ({
       id: reaction.eventId,
@@ -2931,7 +3388,7 @@ function useSpaceViewController({ spaceName, inviteLink, layout: controlledLayou
       sendReaction: (reaction) => client.reactions.send(reaction)
     };
   }, [client.participants, client.reactions, participantSlice.roster, reactionSlice.active, self]);
-  const chat = useMemo12(() => {
+  const chat = useMemo13(() => {
     const messages = chatSlice.messages.map((message) => ({
       id: message.messageId,
       sequence: message.sequence,
@@ -2977,10 +3434,10 @@ function useSpaceViewController({ spaceName, inviteLink, layout: controlledLayou
   const canWhiteboard = features?.whiteboard !== false && whiteboardSlice.engine.status !== "unsubscribed";
   const canDraw = canWhiteboard && self.can("drawWhiteboard");
   const canClear = canWhiteboard && self.can("manageWhiteboard");
-  const whiteboardTransport = useMemo12(() => client.whiteboard.transport(), [client.whiteboard, whiteboardSlice.engine.status]);
+  const whiteboardTransport = useMemo13(() => client.whiteboard.transport(), [client.whiteboard, whiteboardSlice.engine.status]);
   const canEndEpisode = self.can("endEpisode");
-  const screenShareAvailability = useMemo12(() => resolveNativeScreenShareAvailability({ featureEnabled: features?.screenShare !== false }), [features?.screenShare]);
-  const capabilities = useMemo12(
+  const screenShareAvailability = useMemo13(() => resolveNativeScreenShareAvailability({ featureEnabled: features?.screenShare !== false, platform: Platform13.OS, simulator: isIosSimulator(), captureAvailable: typeof mediaDevices2.getDisplayMedia === "function" }), [features?.screenShare]);
+  const capabilities = useMemo13(
     () => ({
       canEndEpisode,
       canChat: features?.chat !== false && self.can("sendChat"),
@@ -3018,7 +3475,7 @@ function useSpaceViewController({ spaceName, inviteLink, layout: controlledLayou
     journeyContext
   });
   const derived = useSpaceViewDerived({ participants, localParticipant, screenShare, isWhiteboardOpen: spacePanels.whiteboard.isOpen });
-  useEffect8(() => {
+  useEffect10(() => {
     const request = media.incomingRequests[0];
     if (!request) return;
     Alert2.alert(request.kind === "unmute" ? "Unmute request" : "Camera request", `${request.actorDisplayName ?? "A Space organizer"} is asking you to ${request.kind === "unmute" ? "unmute" : "start your camera"}.`, [
@@ -3026,7 +3483,7 @@ function useSpaceViewController({ spaceName, inviteLink, layout: controlledLayou
       { text: "Allow", onPress: () => void run(() => client.media.acceptRequest(request.requestId)) }
     ]);
   }, [client.media, media.incomingRequests, run]);
-  const spaceDiagnostics = useMemo12(
+  const spaceDiagnostics = useMemo13(
     () => buildSpaceViewDiagnosticsSnapshot({
       featureFlags: {
         chat: capabilities.canChat,
@@ -3048,8 +3505,8 @@ function useSpaceViewController({ spaceName, inviteLink, layout: controlledLayou
     }),
     [capabilities, chat.unreadCount, interactionState.raisedHandCount, spaceParticipants.participantCount, screenShare.isActive, screenShare.isLocalSharing, screenShare.sharerParticipantId, screenShareAvailability]
   );
-  useEffect8(() => onDiagnosticsChange?.(spaceDiagnostics), [onDiagnosticsChange, spaceDiagnostics]);
-  const pickChatFiles = useCallback8(async () => {
+  useEffect10(() => onDiagnosticsChange?.(spaceDiagnostics), [onDiagnosticsChange, spaceDiagnostics]);
+  const pickChatFiles = useCallback9(async () => {
     if (!pickChatFilesInput) return;
     setChatAttachmentPicking(true);
     try {
@@ -3071,11 +3528,11 @@ function useSpaceViewController({ spaceName, inviteLink, layout: controlledLayou
       setChatAttachmentPicking(false);
     }
   }, [chatAttachments, pickChatFilesInput]);
-  const removeChatAttachment = useCallback8((index) => {
+  const removeChatAttachment = useCallback9((index) => {
     setChatAttachments((current) => current.filter((_, currentIndex) => currentIndex !== index));
     setChatAttachmentError(null);
   }, []);
-  const sendChatMessage = useCallback8(() => {
+  const sendChatMessage = useCallback9(() => {
     const text = chatDraft.trim();
     if (!text && chatAttachments.length === 0) return;
     void run(async () => {
@@ -3093,12 +3550,23 @@ function useSpaceViewController({ spaceName, inviteLink, layout: controlledLayou
       }
     });
   }, [chat, chatAttachments, chatDraft, client.chat.files, run]);
+  const resolveChatAttachmentUrl = useCallback9(
+    async (attachmentId) => {
+      const attachment = chatSlice.messages.flatMap((message) => message.attachments).find((candidate) => candidate.attachmentId === attachmentId);
+      return attachment ? client.chat.files.resolveUrl(attachment) : null;
+    },
+    [chatSlice.messages, client.chat.files]
+  );
   return {
+    recording,
+    canManageRecording: self.can("manageRecording"),
+    canToggleRecording: connection.status === "live" && recording?.status !== "starting" && recording?.status !== "stopping",
+    toggleRecording: () => void run(() => recording?.status === "recording" ? client.recording.stop() : client.recording.start()),
     simulatorMediaDisabled: isIosSimulator(),
     spaceName: spaceName || "Space",
     panel: spacePanels.panel,
     selfName: self.displayName || "Participant",
-    isMuted: !(media.local.microphone.state === "enabled" || media.local.microphone.state === "requesting"),
+    isMuted: media.local.microphone.state !== "enabled",
     isCameraOff: !(media.local.camera.state === "enabled" || media.local.camera.state === "requesting"),
     handRaised: interactionState.isHandRaised,
     raisedHandCount: interactionState.raisedHandCount,
@@ -3117,6 +3585,7 @@ function useSpaceViewController({ spaceName, inviteLink, layout: controlledLayou
     canChat: capabilities.canChat,
     canParticipants: capabilities.canParticipants,
     canScreenShare: capabilities.canScreenShare,
+    screenShareUnavailableReason: features?.screenShare !== false && self.can("publishScreen") ? screenShareAvailability.detail : null,
     canReactions: capabilities.canReactions,
     canHandRaise: capabilities.canHandRaise,
     canInvite: capabilities.canInvite,
@@ -3133,7 +3602,7 @@ function useSpaceViewController({ spaceName, inviteLink, layout: controlledLayou
     participants: spaceParticipants,
     settings: {
       displayName: self.displayName ?? "",
-      microphoneEnabled: media.local.microphone.state === "enabled" || media.local.microphone.state === "requesting",
+      microphoneEnabled: media.local.microphone.state === "enabled",
       cameraEnabled: media.local.camera.state === "enabled" || media.local.camera.state === "requesting",
       devices: media.devices,
       selection: media.selection,
@@ -3169,9 +3638,12 @@ function useSpaceViewController({ spaceName, inviteLink, layout: controlledLayou
       void run(() => interactionState.sendReaction(reaction));
     },
     sendChatMessage,
+    resolveChatAttachmentUrl,
     openChatAttachment: (attachmentId) => {
-      const attachment = chat.messages.flatMap((message) => message.attachments).find((candidate) => candidate.attachmentId === attachmentId);
-      if (attachment) void run(() => Linking.openURL(client.chat.files.url(attachment)));
+      void run(async () => {
+        const url = await resolveChatAttachmentUrl(attachmentId);
+        if (url) await Linking.openURL(url);
+      });
     },
     markChatMessageVisible: (sequence) => void run(() => chat.markAsRead(sequence)),
     admitParticipant: (requestId) => void run(() => client.participants.admit(requestId)),
@@ -3191,10 +3663,14 @@ function sequenceAtOrAfter(value, floor) {
 }
 
 // src/components/SpaceView.shared.tsx
-import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
 function SpaceViewShared(props) {
   const controller = useSpaceViewController(props);
+  const client = useSpaceClient();
   const theme = useNativeTheme();
+  const captureTarget = useRef5(null);
+  const [captureSize, setCaptureSize] = useState12({ width: 0, height: 0 });
+  const [feedbackRequested, setFeedbackRequested] = useState12(false);
   const toggleMedia = (action) => {
     if (controller.simulatorMediaDisabled) {
       Alert3.alert("Media unavailable", getIosSimulatorMediaMessage());
@@ -3202,51 +3678,54 @@ function SpaceViewShared(props) {
     }
     action();
   };
-  return /* @__PURE__ */ jsxs18(View19, { style: [styles19.space, { backgroundColor: theme.colors.darkCanvas }], children: [
-    /* @__PURE__ */ jsx24(SpaceTopBarAndroid, { formattedDuration: controller.formattedDuration, logoUrl: props.logoUrl, participantCount: controller.participantCount, spaceName: controller.spaceName }),
-    props.reconnecting ? /* @__PURE__ */ jsx24(View19, { accessibilityLiveRegion: "polite", style: [styles19.recovery, { backgroundColor: theme.colors.primary }], children: /* @__PURE__ */ jsx24(Text14, { style: [styles19.recoveryText, { color: theme.colors.primaryForeground }], children: "Reconnecting\u2026 controls will resume shortly." }) }) : null,
-    /* @__PURE__ */ jsx24(View19, { style: styles19.stage, children: controller.whiteboard.isOpen ? /* @__PURE__ */ jsx24(SpaceWhiteboardSurface, { whiteboard: controller.whiteboard }) : controller.derived.isStageMode || controller.layout.layout !== "grid" ? /* @__PURE__ */ jsx24(
-      SpaceStageAndroid,
-      {
-        activeReactions: controller.activeReactions,
-        handRaised: controller.handRaised,
-        isCompactViewport: controller.derived.isCompactViewport,
-        isMuted: controller.isMuted,
-        layoutMode: controller.layout.layout,
-        primaryContent: controller.derived.primaryContent,
-        raisedHandCount: controller.raisedHandCount,
-        screenShareTrack: controller.derived.screenShareTrack,
-        screenSharer: controller.derived.screenSharer,
-        selfName: controller.selfName,
-        stripParticipants: controller.derived.allParticipants,
-        whiteboard: {
-          isOpen: controller.whiteboard.isOpen,
-          canDraw: controller.whiteboard.canDraw,
-          elementCount: controller.whiteboard.elements.length,
-          participantCount: controller.whiteboard.openParticipants.length
+  return /* @__PURE__ */ jsxs20(Fragment2, { children: [
+    /* @__PURE__ */ jsxs20(View21, { collapsable: false, onLayout: (event) => setCaptureSize({ width: event.nativeEvent.layout.width, height: event.nativeEvent.layout.height }), ref: captureTarget, style: [styles21.space, { backgroundColor: theme.colors.darkCanvas }], children: [
+      /* @__PURE__ */ jsx26(SpaceTopBarAndroid, { recording: controller.recording, formattedDuration: controller.formattedDuration, logoUrl: props.logoUrl, participantCount: controller.participantCount, spaceName: controller.spaceName }),
+      props.reconnecting ? /* @__PURE__ */ jsx26(View21, { accessibilityLiveRegion: "polite", style: [styles21.recovery, { backgroundColor: theme.colors.primary }], children: /* @__PURE__ */ jsx26(Text16, { style: [styles21.recoveryText, { color: theme.colors.primaryForeground }], children: "Reconnecting\u2026 controls will resume shortly." }) }) : null,
+      /* @__PURE__ */ jsx26(View21, { style: styles21.stage, children: controller.whiteboard.isOpen ? /* @__PURE__ */ jsx26(SpaceWhiteboardSurface, { whiteboard: controller.whiteboard }) : controller.derived.isStageMode || controller.layout.layout !== "grid" ? /* @__PURE__ */ jsx26(
+        SpaceStageAndroid,
+        {
+          activeReactions: controller.activeReactions,
+          handRaised: controller.handRaised,
+          isCompactViewport: controller.derived.isCompactViewport,
+          isMuted: controller.isMuted,
+          layoutMode: controller.layout.layout,
+          primaryContent: controller.derived.primaryContent,
+          raisedHandCount: controller.raisedHandCount,
+          screenShareTrack: controller.derived.screenShareTrack,
+          screenSharer: controller.derived.screenSharer,
+          selfName: controller.selfName,
+          stripParticipants: controller.derived.allParticipants,
+          whiteboard: {
+            isOpen: controller.whiteboard.isOpen,
+            canDraw: controller.whiteboard.canDraw,
+            elementCount: controller.whiteboard.elements.length,
+            participantCount: controller.whiteboard.openParticipants.length
+          }
         }
-      }
-    ) : /* @__PURE__ */ jsx24(SpaceGridAndroid, { gridPages: controller.derived.gridPages, participants: controller.derived.allParticipants }) }),
-    /* @__PURE__ */ jsx24(
-      SpaceBottomDockAndroid,
-      {
-        isCameraOff: controller.isCameraOff,
-        isMuted: controller.isMuted,
-        onLeave: controller.handleLeave,
-        onOpenChat: controller.canChat ? () => controller.openPanel("chat") : void 0,
-        onOpenMore: () => controller.setActionsOpen(true),
-        onToggleAudio: () => toggleMedia(controller.toggleAudio),
-        onToggleVideo: () => toggleMedia(controller.toggleVideo),
-        simulatorMediaDisabled: controller.simulatorMediaDisabled,
-        unreadChatCount: controller.chat.unreadCount
-      }
-    ),
-    /* @__PURE__ */ jsx24(SpaceActionMenu, { controller, onOpenDiagnostics: props.onOpenDiagnostics }),
-    controller.panel === "settings" ? /* @__PURE__ */ jsx24(SettingsSheet, { controller, isOpen: true, onClose: controller.closePanel }) : /* @__PURE__ */ jsx24(SpacePanelSheet, { controller }),
-    /* @__PURE__ */ jsx24(ReactionPicker, { isOpen: controller.reactionPickerOpen, onClose: () => controller.setReactionPickerOpen(false), onSelect: (reaction) => selectSpaceReaction(controller, reaction) })
+      ) : /* @__PURE__ */ jsx26(SpaceGridAndroid, { gridPages: controller.derived.gridPages, participants: controller.derived.allParticipants }) }),
+      /* @__PURE__ */ jsx26(
+        SpaceBottomDockAndroid,
+        {
+          isCameraOff: controller.isCameraOff,
+          isMuted: controller.isMuted,
+          onLeave: controller.handleLeave,
+          onOpenChat: controller.canChat ? () => controller.openPanel("chat") : void 0,
+          onOpenMore: () => controller.setActionsOpen(true),
+          onToggleAudio: () => toggleMedia(controller.toggleAudio),
+          onToggleVideo: () => toggleMedia(controller.toggleVideo),
+          simulatorMediaDisabled: controller.simulatorMediaDisabled,
+          unreadChatCount: controller.chat.unreadCount
+        }
+      ),
+      /* @__PURE__ */ jsx26(SpaceActionMenu, { controller, onOpenDiagnostics: props.onOpenDiagnostics, onOpenFeedback: () => setFeedbackRequested(true) }),
+      controller.panel === "settings" ? /* @__PURE__ */ jsx26(SettingsSheet, { controller, isOpen: true, onClose: controller.closePanel }) : /* @__PURE__ */ jsx26(SpacePanelSheet, { controller }),
+      /* @__PURE__ */ jsx26(ReactionPicker, { isOpen: controller.reactionPickerOpen, onClose: () => controller.setReactionPickerOpen(false), onSelect: (reaction) => selectSpaceReaction(controller, reaction) })
+    ] }),
+    /* @__PURE__ */ jsx26(FeedbackSheet, { client, captureSize, captureTarget, feedbackEvidence: props.feedbackEvidence, onClose: () => setFeedbackRequested(false), requested: feedbackRequested })
   ] });
 }
-var styles19 = StyleSheet20.create({
+var styles21 = StyleSheet22.create({
   space: { flex: 1, backgroundColor: Theme.colors.darkCanvas },
   stage: { flex: 1, width: "100%", overflow: "hidden", justifyContent: "center" },
   recovery: { alignItems: "center", paddingHorizontal: 16, paddingVertical: 8 },
@@ -3254,19 +3733,19 @@ var styles19 = StyleSheet20.create({
 });
 
 // src/components/SpaceView.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function SpaceView(props) {
   switch (resolvePlatformVariant()) {
     case "ios-pad":
-      return /* @__PURE__ */ jsx25(SpaceViewShared, { ...props });
+      return /* @__PURE__ */ jsx27(SpaceViewShared, { ...props });
     case "ios-phone":
-      return /* @__PURE__ */ jsx25(SpaceViewShared, { ...props });
+      return /* @__PURE__ */ jsx27(SpaceViewShared, { ...props });
     case "macos":
-      return /* @__PURE__ */ jsx25(SpaceViewShared, { ...props });
+      return /* @__PURE__ */ jsx27(SpaceViewShared, { ...props });
     case "tvos":
     case "android":
     default:
-      return /* @__PURE__ */ jsx25(SpaceViewShared, { ...props });
+      return /* @__PURE__ */ jsx27(SpaceViewShared, { ...props });
   }
 }
 
@@ -3278,13 +3757,13 @@ import UserIcon2 from "@hugeicons/core-free-icons/dist/esm/UserIcon";
 import Video01Icon5 from "@hugeicons/core-free-icons/dist/esm/Video01Icon";
 import VideoOffIcon4 from "@hugeicons/core-free-icons/dist/esm/VideoOffIcon";
 import { HugeiconsIcon as HugeiconsIcon11 } from "@hugeicons/react-native";
-import { KeyboardAvoidingView as KeyboardAvoidingView2, Platform as Platform10, Pressable as Pressable13, StyleSheet as StyleSheet21, Text as Text15, TextInput as TextInput2, View as View20 } from "react-native";
+import { KeyboardAvoidingView as KeyboardAvoidingView3, Platform as Platform14, Pressable as Pressable15, StyleSheet as StyleSheet23, Text as Text17, TextInput as TextInput3, View as View22 } from "react-native";
 
 // src/components/native-entrance/useEntranceController.ts
-import { useMemo as useMemo14, useSyncExternalStore as useSyncExternalStore4 } from "react";
+import { useMemo as useMemo15, useSyncExternalStore as useSyncExternalStore4 } from "react";
 
 // src/hooks/useEntrancePreview.ts
-import { useMemo as useMemo13, useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { useMemo as useMemo14, useSyncExternalStore as useSyncExternalStore3 } from "react";
 
 // src/hooks/entrance-preview-store.ts
 function stopPreviewTracks(stream) {
@@ -3359,7 +3838,7 @@ function createEntrancePreviewStore(options) {
 // src/hooks/useEntrancePreview.ts
 function useEntrancePreview(enabled) {
   const simulatorVideoDisabled = isIosSimulator();
-  const store = useMemo13(
+  const store = useMemo14(
     () => createEntrancePreviewStore({
       enabled,
       simulatorVideoDisabled,
@@ -3449,7 +3928,7 @@ var EntranceControllerStore = class {
 // src/components/native-entrance/useEntranceController.ts
 function useEntranceController({ displayName = "", initialAudioEnabled = false, initialVideoEnabled = false, joinDisabled = false, onJoin }) {
   const simulatorMediaDisabled = isIosSimulator();
-  const store = useMemo14(
+  const store = useMemo15(
     () => new EntranceControllerStore({
       displayName,
       initialAudioEnabled,
@@ -3485,34 +3964,34 @@ function useEntranceController({ displayName = "", initialAudioEnabled = false,
 }
 
 // src/components/EntranceView.android.tsx
-import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
 function EntranceViewAndroid({ spaceName, error, joinDisabled = false, onCancel, ...props }) {
   const controller = useEntranceController({ ...props, joinDisabled });
   const theme = useNativeTheme();
   const canJoin = controller.displayName.trim().length > 0 && !joinDisabled && !controller.isSubmitting;
-  return /* @__PURE__ */ jsx26(KeyboardAvoidingView2, { behavior: Platform10.OS === "ios" ? "padding" : "height", style: [styles20.screen, { backgroundColor: theme.colors.background }], children: /* @__PURE__ */ jsxs19(View20, { style: styles20.content, children: [
-    /* @__PURE__ */ jsxs19(View20, { style: styles20.previewContainer, children: [
-      /* @__PURE__ */ jsxs19(View20, { style: [styles20.previewSurface, { backgroundColor: theme.colors.raisedSurface, borderColor: theme.colors.border }], children: [
-        controller.previewStream && controller.videoEnabled ? /* @__PURE__ */ jsx26(RTCView, { mirror: true, objectFit: "cover", streamURL: controller.previewStream.toURL(), style: styles20.previewVideo, zOrder: 0 }) : /* @__PURE__ */ jsx26(View20, { style: [styles20.avatarContainer, { backgroundColor: theme.colors.insetSurface }], children: /* @__PURE__ */ jsx26(FaceAvatar, { name: controller.displayName, size: 140, textSize: 52 }) }),
-        onCancel ? /* @__PURE__ */ jsx26(Pressable13, { accessibilityLabel: "Cancel and leave Entrance", accessibilityRole: "button", onPress: onCancel, style: ({ pressed }) => [styles20.floatingBack, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }, pressed && styles20.topIconButtonPressed], children: /* @__PURE__ */ jsx26(HugeiconsIcon11, { icon: ArrowLeft01Icon, size: 22, color: theme.colors.foreground }) }) : null
+  return /* @__PURE__ */ jsx28(KeyboardAvoidingView3, { behavior: Platform14.OS === "ios" ? "padding" : "height", style: [styles22.screen, { backgroundColor: theme.colors.background }], children: /* @__PURE__ */ jsxs21(View22, { style: styles22.content, children: [
+    /* @__PURE__ */ jsxs21(View22, { style: styles22.previewContainer, children: [
+      /* @__PURE__ */ jsxs21(View22, { style: [styles22.previewSurface, { backgroundColor: theme.colors.raisedSurface, borderColor: theme.colors.border }], children: [
+        controller.previewStream && controller.videoEnabled ? /* @__PURE__ */ jsx28(RTCView, { mirror: true, objectFit: "cover", streamURL: controller.previewStream.toURL(), style: styles22.previewVideo, zOrder: 0 }) : /* @__PURE__ */ jsx28(View22, { style: [styles22.avatarContainer, { backgroundColor: theme.colors.insetSurface }], children: /* @__PURE__ */ jsx28(FaceAvatar, { name: controller.displayName, size: 140, textSize: 52 }) }),
+        onCancel ? /* @__PURE__ */ jsx28(Pressable15, { accessibilityLabel: "Cancel and leave Entrance", accessibilityRole: "button", onPress: onCancel, style: ({ pressed }) => [styles22.floatingBack, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }, pressed && styles22.topIconButtonPressed], children: /* @__PURE__ */ jsx28(HugeiconsIcon11, { icon: ArrowLeft01Icon, size: 22, color: theme.colors.foreground }) }) : null
       ] }),
-      controller.previewError && controller.videoEnabled ? /* @__PURE__ */ jsx26(Text15, { style: styles20.previewError, children: controller.previewError }) : null,
-      controller.simulatorMediaDisabled ? /* @__PURE__ */ jsx26(Text15, { style: styles20.previewHint, children: getIosSimulatorMediaMessage() }) : null
+      controller.previewError && controller.videoEnabled ? /* @__PURE__ */ jsx28(Text17, { style: styles22.previewError, children: controller.previewError }) : null,
+      controller.simulatorMediaDisabled ? /* @__PURE__ */ jsx28(Text17, { style: styles22.previewHint, children: getIosSimulatorMediaMessage() }) : null
     ] }),
-    /* @__PURE__ */ jsxs19(View20, { style: [styles20.sheetContainer, { backgroundColor: theme.colors.card, borderColor: theme.colors.border, shadowColor: theme.colors.darkCanvas }], children: [
-      /* @__PURE__ */ jsx26(View20, { style: styles20.sheetHandle }),
-      /* @__PURE__ */ jsx26(View20, { style: styles20.sheetHeader, children: /* @__PURE__ */ jsx26(Text15, { style: [styles20.spaceName, { color: theme.colors.foreground }], numberOfLines: 1, children: spaceName }) }),
-      /* @__PURE__ */ jsxs19(View20, { style: [styles20.inputCard, { backgroundColor: theme.colors.surface, borderColor: controller.isInputFocused ? theme.colors.ring : theme.colors.border }], children: [
-        /* @__PURE__ */ jsx26(HugeiconsIcon11, { icon: UserIcon2, size: 18, color: controller.isInputFocused ? theme.colors.primary : theme.colors.mutedForeground, style: styles20.inputIcon }),
-        /* @__PURE__ */ jsx26(
-          TextInput2,
+    /* @__PURE__ */ jsxs21(View22, { style: [styles22.sheetContainer, { backgroundColor: theme.colors.card, borderColor: theme.colors.border, shadowColor: theme.colors.darkCanvas }], children: [
+      /* @__PURE__ */ jsx28(View22, { style: styles22.sheetHandle }),
+      /* @__PURE__ */ jsx28(View22, { style: styles22.sheetHeader, children: /* @__PURE__ */ jsx28(Text17, { style: [styles22.spaceName, { color: theme.colors.foreground }], numberOfLines: 1, children: spaceName }) }),
+      /* @__PURE__ */ jsxs21(View22, { style: [styles22.inputCard, { backgroundColor: theme.colors.surface, borderColor: controller.isInputFocused ? theme.colors.ring : theme.colors.border }], children: [
+        /* @__PURE__ */ jsx28(HugeiconsIcon11, { icon: UserIcon2, size: 18, color: controller.isInputFocused ? theme.colors.primary : theme.colors.mutedForeground, style: styles22.inputIcon }),
+        /* @__PURE__ */ jsx28(
+          TextInput3,
           {
             onChangeText: controller.setDisplayName,
             onFocus: () => controller.setInputFocused(true),
             onBlur: () => controller.setInputFocused(false),
             placeholder: "Enter your name",
             placeholderTextColor: theme.colors.mutedForeground,
-            style: [styles20.nameInput, { color: theme.colors.foreground }],
+            style: [styles22.nameInput, { color: theme.colors.foreground }],
             value: controller.displayName,
             maxLength: 30,
             returnKeyType: "join",
@@ -3520,32 +3999,32 @@ function EntranceViewAndroid({ spaceName, error, joinDisabled = false, onCancel,
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs19(View20, { style: styles20.mediaRow, children: [
-        /* @__PURE__ */ jsx26(
-          Pressable13,
+      /* @__PURE__ */ jsxs21(View22, { style: styles22.mediaRow, children: [
+        /* @__PURE__ */ jsx28(
+          Pressable15,
           {
             disabled: controller.simulatorMediaDisabled,
             onPress: controller.toggleAudio,
-            style: ({ pressed }) => [styles20.controlCircle, { backgroundColor: controller.audioEnabled ? theme.colors.controlsBackground : theme.colors.error, borderColor: theme.colors.border }, controller.simulatorMediaDisabled && styles20.toggleCircleDisabled, pressed && styles20.togglePressed],
-            children: /* @__PURE__ */ jsx26(HugeiconsIcon11, { icon: controller.audioEnabled ? Mic01Icon4 : MicOff01Icon7, size: 24, color: theme.colors.primaryForeground })
+            style: ({ pressed }) => [styles22.controlCircle, { backgroundColor: controller.audioEnabled ? theme.colors.controlsBackground : theme.colors.error, borderColor: theme.colors.border }, controller.simulatorMediaDisabled && styles22.toggleCircleDisabled, pressed && styles22.togglePressed],
+            children: /* @__PURE__ */ jsx28(HugeiconsIcon11, { icon: controller.audioEnabled ? Mic01Icon4 : MicOff01Icon7, size: 24, color: theme.colors.primaryForeground })
           }
         ),
-        /* @__PURE__ */ jsx26(
-          Pressable13,
+        /* @__PURE__ */ jsx28(
+          Pressable15,
           {
             disabled: controller.simulatorMediaDisabled,
             onPress: controller.toggleVideo,
-            style: ({ pressed }) => [styles20.controlCircle, { backgroundColor: controller.videoEnabled ? theme.colors.controlsBackground : theme.colors.error, borderColor: theme.colors.border }, controller.simulatorMediaDisabled && styles20.toggleCircleDisabled, pressed && styles20.togglePressed],
-            children: /* @__PURE__ */ jsx26(HugeiconsIcon11, { icon: controller.videoEnabled ? Video01Icon5 : VideoOffIcon4, size: 24, color: theme.colors.primaryForeground })
+            style: ({ pressed }) => [styles22.controlCircle, { backgroundColor: controller.videoEnabled ? theme.colors.controlsBackground : theme.colors.error, borderColor: theme.colors.border }, controller.simulatorMediaDisabled && styles22.toggleCircleDisabled, pressed && styles22.togglePressed],
+            children: /* @__PURE__ */ jsx28(HugeiconsIcon11, { icon: controller.videoEnabled ? Video01Icon5 : VideoOffIcon4, size: 24, color: theme.colors.primaryForeground })
           }
         )
       ] }),
-      error ? /* @__PURE__ */ jsx26(Text15, { style: [styles20.globalError, { color: theme.colors.error }], children: error }) : null,
-      /* @__PURE__ */ jsx26(Pressable13, { disabled: !canJoin, onPress: controller.handleJoin, style: ({ pressed }) => [styles20.joinButton, { backgroundColor: canJoin ? theme.colors.primary : theme.colors.muted }, !canJoin && styles20.joinButtonDisabled, pressed && styles20.togglePressed], children: /* @__PURE__ */ jsx26(Text15, { style: [styles20.joinButtonText, { color: theme.colors.primaryForeground }], children: controller.isSubmitting || joinDisabled ? "Joining..." : "Enter Space" }) })
+      error ? /* @__PURE__ */ jsx28(Text17, { style: [styles22.globalError, { color: theme.colors.error }], children: error }) : null,
+      /* @__PURE__ */ jsx28(Pressable15, { disabled: !canJoin, onPress: controller.handleJoin, style: ({ pressed }) => [styles22.joinButton, { backgroundColor: canJoin ? theme.colors.primary : theme.colors.muted }, !canJoin && styles22.joinButtonDisabled, pressed && styles22.togglePressed], children: /* @__PURE__ */ jsx28(Text17, { style: [styles22.joinButtonText, { color: theme.colors.primaryForeground }], children: controller.isSubmitting || joinDisabled ? "Joining..." : "Enter Space" }) })
     ] })
   ] }) });
 }
-var styles20 = StyleSheet21.create({
+var styles22 = StyleSheet23.create({
   screen: {
     flex: 1,
     backgroundColor: Theme.colors.background
@@ -3555,7 +4034,7 @@ var styles20 = StyleSheet21.create({
   },
   floatingBack: {
     position: "absolute",
-    top: Platform10.OS === "ios" ? 24 : 20,
+    top: Platform14.OS === "ios" ? 24 : 20,
     left: 20,
     width: 42,
     height: 42,
@@ -3570,7 +4049,7 @@ var styles20 = StyleSheet21.create({
   previewContainer: {
     flex: 1,
     justifyContent: "center",
-    paddingTop: Platform10.OS === "ios" ? 10 : 0,
+    paddingTop: Platform14.OS === "ios" ? 10 : 0,
     marginBottom: 0
   },
   previewSurface: {
@@ -3585,10 +4064,10 @@ var styles20 = StyleSheet21.create({
     borderColor: Theme.colors.whiteOverlay06
   },
   previewVideo: {
-    ...StyleSheet21.absoluteFillObject
+    ...StyleSheet23.absoluteFillObject
   },
   avatarContainer: {
-    ...StyleSheet21.absoluteFillObject,
+    ...StyleSheet23.absoluteFillObject,
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: Theme.colors.insetSurface
@@ -3619,7 +4098,7 @@ var styles20 = StyleSheet21.create({
     borderTopRightRadius: 32,
     paddingHorizontal: 24,
     paddingTop: 16,
-    paddingBottom: Platform10.OS === "ios" ? 44 : 32,
+    paddingBottom: Platform14.OS === "ios" ? 44 : 32,
     gap: 20,
     borderTopWidth: 1,
     borderColor: Theme.colors.whiteOverlay08,
@@ -3730,7 +4209,7 @@ import VideoOffIcon5 from "@hugeicons/core-free-icons/dist/esm/VideoOffIcon";
 import ArrowRight02Icon from "@hugeicons/core-free-icons/dist/esm/ArrowRight02Icon";
 import CancelCircleIcon2 from "@hugeicons/core-free-icons/dist/esm/CancelCircleIcon";
 import { HugeiconsIcon as HugeiconsIcon12 } from "@hugeicons/react-native";
-import { KeyboardAvoidingView as KeyboardAvoidingView3, Platform as Platform11, Pressable as Pressable14, StyleSheet as StyleSheet22, Text as Text16, TextInput as TextInput3, View as View21, Animated as Animated2, ActivityIndicator as ActivityIndicator2 } from "react-native";
+import { KeyboardAvoidingView as KeyboardAvoidingView4, Platform as Platform15, Pressable as Pressable16, StyleSheet as StyleSheet24, Text as Text18, TextInput as TextInput4, View as View23, Animated as Animated2, ActivityIndicator as ActivityIndicator2 } from "react-native";
 
 // src/components/native-animation-controller.ts
 function createAnimationRefController(createAnimations) {
@@ -3760,15 +4239,15 @@ function createAnimationRefController(createAnimations) {
 }
 
 // src/components/EntranceView.ios-pad.tsx
-import { useRef as useRef5 } from "react";
-import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+import { useRef as useRef6 } from "react";
+import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
 function EntranceViewIosPad({ spaceName, error, joinDisabled = false, onCancel, ...props }) {
   const controller = useEntranceController({ ...props, joinDisabled });
   const theme = useNativeTheme();
   const canRenderPreview = hasRtcVideoView();
-  const entryAnim = useRef5(new Animated2.Value(0)).current;
-  const islandAnim = useRef5(new Animated2.Value(0)).current;
-  const animationRef = useRef5(null);
+  const entryAnim = useRef6(new Animated2.Value(0)).current;
+  const islandAnim = useRef6(new Animated2.Value(0)).current;
+  const animationRef = useRef6(null);
   const attachEntryAnimation = animationRef.current ?? (animationRef.current = createAnimationRefController(() => [
     Animated2.stagger(300, [
       Animated2.spring(entryAnim, {
@@ -3788,61 +4267,61 @@ function EntranceViewIosPad({ spaceName, error, joinDisabled = false, onCancel,
   const canJoin = controller.displayName.trim().length > 0 && !joinDisabled && !controller.isSubmitting;
   const showPreview = Boolean(controller.previewStream && controller.videoEnabled && canRenderPreview);
   const previewStreamURL = showPreview && controller.previewStream ? controller.previewStream.toURL() : null;
-  return /* @__PURE__ */ jsxs20(KeyboardAvoidingView3, { behavior: Platform11.OS === "ios" ? "padding" : "height", style: [styles21.screen, { backgroundColor: theme.colors.background }], children: [
-    /* @__PURE__ */ jsxs20(View21, { style: [styles21.immersiveContainer, { backgroundColor: theme.colors.darkCanvas }], children: [
-      previewStreamURL ? /* @__PURE__ */ jsx27(RtcVideoView, { mirror: true, objectFit: "cover", streamURL: previewStreamURL, style: styles21.fullScreenVideo, zOrder: -1 }) : /* @__PURE__ */ jsx27(View21, { style: [styles21.immersiveAvatarContainer, { backgroundColor: theme.colors.background }], children: /* @__PURE__ */ jsx27(FaceAvatar, { name: controller.displayName, size: 200, textSize: 80 }) }),
-      showPreview ? /* @__PURE__ */ jsx27(View21, { style: styles21.frostOverlay }) : null
+  return /* @__PURE__ */ jsxs22(KeyboardAvoidingView4, { behavior: Platform15.OS === "ios" ? "padding" : "height", style: [styles23.screen, { backgroundColor: theme.colors.background }], children: [
+    /* @__PURE__ */ jsxs22(View23, { style: [styles23.immersiveContainer, { backgroundColor: theme.colors.darkCanvas }], children: [
+      previewStreamURL ? /* @__PURE__ */ jsx29(RtcVideoView, { mirror: true, objectFit: "cover", streamURL: previewStreamURL, style: styles23.fullScreenVideo, zOrder: -1 }) : /* @__PURE__ */ jsx29(View23, { style: [styles23.immersiveAvatarContainer, { backgroundColor: theme.colors.background }], children: /* @__PURE__ */ jsx29(FaceAvatar, { name: controller.displayName, size: 200, textSize: 80 }) }),
+      showPreview ? /* @__PURE__ */ jsx29(View23, { style: styles23.frostOverlay }) : null
     ] }),
-    /* @__PURE__ */ jsxs20(View21, { style: styles21.hudLayer, children: [
-      /* @__PURE__ */ jsxs20(View21, { style: styles21.topHud, children: [
-        onCancel ? /* @__PURE__ */ jsx27(Pressable14, { accessibilityLabel: "Cancel and leave Entrance", accessibilityRole: "button", onPress: onCancel, style: ({ pressed }) => [styles21.backPuck, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }, pressed && styles21.pressed], children: /* @__PURE__ */ jsx27(HugeiconsIcon12, { icon: ArrowLeft01Icon2, size: 22, color: theme.colors.foreground }) }) : null,
-        /* @__PURE__ */ jsx27(View21, { style: styles21.spaceInfo, children: /* @__PURE__ */ jsx27(Text16, { style: [styles21.spaceTitle, { color: theme.colors.foreground }], numberOfLines: 1, children: spaceName }) }),
-        /* @__PURE__ */ jsx27(View21, { style: styles21.topHudSpacer })
+    /* @__PURE__ */ jsxs22(View23, { style: styles23.hudLayer, children: [
+      /* @__PURE__ */ jsxs22(View23, { style: styles23.topHud, children: [
+        onCancel ? /* @__PURE__ */ jsx29(Pressable16, { accessibilityLabel: "Cancel and leave Entrance", accessibilityRole: "button", onPress: onCancel, style: ({ pressed }) => [styles23.backPuck, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }, pressed && styles23.pressed], children: /* @__PURE__ */ jsx29(HugeiconsIcon12, { icon: ArrowLeft01Icon2, size: 22, color: theme.colors.foreground }) }) : null,
+        /* @__PURE__ */ jsx29(View23, { style: styles23.spaceInfo, children: /* @__PURE__ */ jsx29(Text18, { style: [styles23.spaceTitle, { color: theme.colors.foreground }], numberOfLines: 1, children: spaceName }) }),
+        /* @__PURE__ */ jsx29(View23, { style: styles23.topHudSpacer })
       ] }),
-      /* @__PURE__ */ jsx27(View21, { style: styles21.flexFill }),
-      /* @__PURE__ */ jsxs20(
+      /* @__PURE__ */ jsx29(View23, { style: styles23.flexFill }),
+      /* @__PURE__ */ jsxs22(
         Animated2.View,
         {
           ref: attachEntryAnimation,
           style: [
-            styles21.bottomHud,
+            styles23.bottomHud,
             {
               opacity: islandAnim,
               transform: [{ translateY: islandAnim.interpolate({ inputRange: [0, 1], outputRange: [40, 0] }) }]
             }
           ],
           children: [
-            /* @__PURE__ */ jsxs20(View21, { style: [styles21.launchPad, { backgroundColor: theme.colors.card, borderColor: theme.colors.border, shadowColor: theme.colors.darkCanvas }], children: [
-              /* @__PURE__ */ jsxs20(View21, { style: styles21.mediaGroup, children: [
-                /* @__PURE__ */ jsx27(
-                  Pressable14,
+            /* @__PURE__ */ jsxs22(View23, { style: [styles23.launchPad, { backgroundColor: theme.colors.card, borderColor: theme.colors.border, shadowColor: theme.colors.darkCanvas }], children: [
+              /* @__PURE__ */ jsxs22(View23, { style: styles23.mediaGroup, children: [
+                /* @__PURE__ */ jsx29(
+                  Pressable16,
                   {
                     accessibilityLabel: controller.audioEnabled ? "Mute microphone" : "Unmute microphone",
                     accessibilityRole: "button",
                     accessibilityState: { disabled: controller.simulatorMediaDisabled, selected: controller.audioEnabled },
                     disabled: controller.simulatorMediaDisabled,
                     onPress: controller.toggleAudio,
-                    style: ({ pressed }) => [styles21.mediaToggle, { backgroundColor: controller.audioEnabled ? theme.colors.controlsBackground : theme.colors.error, borderColor: theme.colors.border }, pressed && styles21.pressed],
-                    children: /* @__PURE__ */ jsx27(HugeiconsIcon12, { icon: controller.audioEnabled ? Mic01Icon5 : MicOff01Icon8, size: 22, color: theme.colors.primaryForeground })
+                    style: ({ pressed }) => [styles23.mediaToggle, { backgroundColor: controller.audioEnabled ? theme.colors.controlsBackground : theme.colors.error, borderColor: theme.colors.border }, pressed && styles23.pressed],
+                    children: /* @__PURE__ */ jsx29(HugeiconsIcon12, { icon: controller.audioEnabled ? Mic01Icon5 : MicOff01Icon8, size: 22, color: theme.colors.primaryForeground })
                   }
                 ),
-                /* @__PURE__ */ jsx27(
-                  Pressable14,
+                /* @__PURE__ */ jsx29(
+                  Pressable16,
                   {
                     accessibilityLabel: controller.videoEnabled ? "Turn camera off" : "Turn camera on",
                     accessibilityRole: "button",
                     accessibilityState: { disabled: controller.simulatorMediaDisabled, selected: controller.videoEnabled },
                     disabled: controller.simulatorMediaDisabled,
                     onPress: controller.toggleVideo,
-                    style: ({ pressed }) => [styles21.mediaToggle, { backgroundColor: controller.videoEnabled ? theme.colors.controlsBackground : theme.colors.error, borderColor: theme.colors.border }, pressed && styles21.pressed],
-                    children: /* @__PURE__ */ jsx27(HugeiconsIcon12, { icon: controller.videoEnabled ? Video01Icon6 : VideoOffIcon5, size: 22, color: theme.colors.primaryForeground })
+                    style: ({ pressed }) => [styles23.mediaToggle, { backgroundColor: controller.videoEnabled ? theme.colors.controlsBackground : theme.colors.error, borderColor: theme.colors.border }, pressed && styles23.pressed],
+                    children: /* @__PURE__ */ jsx29(HugeiconsIcon12, { icon: controller.videoEnabled ? Video01Icon6 : VideoOffIcon5, size: 22, color: theme.colors.primaryForeground })
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx27(View21, { style: styles21.islandDivider }),
-              /* @__PURE__ */ jsxs20(View21, { style: [styles21.identityArea, { backgroundColor: theme.colors.surface, borderColor: controller.isInputFocused ? theme.colors.ring : theme.colors.border }, controller.isInputFocused && styles21.identityAreaFocused], children: [
-                /* @__PURE__ */ jsx27(
-                  TextInput3,
+              /* @__PURE__ */ jsx29(View23, { style: styles23.islandDivider }),
+              /* @__PURE__ */ jsxs22(View23, { style: [styles23.identityArea, { backgroundColor: theme.colors.surface, borderColor: controller.isInputFocused ? theme.colors.ring : theme.colors.border }, controller.isInputFocused && styles23.identityAreaFocused], children: [
+                /* @__PURE__ */ jsx29(
+                  TextInput4,
                   {
                     accessibilityLabel: "Your name",
                     onChangeText: controller.setDisplayName,
@@ -3850,17 +4329,17 @@ function EntranceViewIosPad({ spaceName, error, joinDisabled = false, onCancel,
                     onBlur: () => controller.setInputFocused(false),
                     placeholder: "Enter your name to join",
                     placeholderTextColor: theme.colors.mutedForeground,
-                    style: [styles21.immersiveInput, { color: theme.colors.foreground }],
+                    style: [styles23.immersiveInput, { color: theme.colors.foreground }],
                     value: controller.displayName,
                     maxLength: 30,
                     returnKeyType: "join",
                     onSubmitEditing: controller.handleJoin
                   }
                 ),
-                controller.displayName.length > 0 && /* @__PURE__ */ jsx27(Pressable14, { accessibilityLabel: "Clear name", accessibilityRole: "button", onPress: () => controller.setDisplayName(""), style: styles21.clearAction, children: /* @__PURE__ */ jsx27(HugeiconsIcon12, { icon: CancelCircleIcon2, size: 18, color: theme.colors.mutedForeground }) })
+                controller.displayName.length > 0 && /* @__PURE__ */ jsx29(Pressable16, { accessibilityLabel: "Clear name", accessibilityRole: "button", onPress: () => controller.setDisplayName(""), style: styles23.clearAction, children: /* @__PURE__ */ jsx29(HugeiconsIcon12, { icon: CancelCircleIcon2, size: 18, color: theme.colors.mutedForeground }) })
               ] }),
-              /* @__PURE__ */ jsx27(
-                Pressable14,
+              /* @__PURE__ */ jsx29(
+                Pressable16,
                 {
                   accessibilityLabel: "Enter Space",
                   accessibilityRole: "button",
@@ -3868,7 +4347,7 @@ function EntranceViewIosPad({ spaceName, error, joinDisabled = false, onCancel,
                   disabled: !canJoin,
                   onPress: controller.handleJoin,
                   style: ({ pressed }) => [
-                    styles21.joinArrow,
+                    styles23.joinArrow,
                     canJoin && {
                       backgroundColor: theme.colors.primary,
                       shadowColor: theme.colors.primary,
@@ -3876,41 +4355,41 @@ function EntranceViewIosPad({ spaceName, error, joinDisabled = false, onCancel,
                       shadowOpacity: 0.3,
                       shadowRadius: 8
                     },
-                    pressed && canJoin && styles21.pressed,
-                    controller.isSubmitting && styles21.disabled
+                    pressed && canJoin && styles23.pressed,
+                    controller.isSubmitting && styles23.disabled
                   ],
-                  children: controller.isSubmitting ? /* @__PURE__ */ jsx27(ActivityIndicator2, { color: theme.colors.primaryForeground, size: "small" }) : /* @__PURE__ */ jsx27(HugeiconsIcon12, { icon: ArrowRight02Icon, size: 28, color: canJoin ? theme.colors.primaryForeground : theme.colors.mutedForeground })
+                  children: controller.isSubmitting ? /* @__PURE__ */ jsx29(ActivityIndicator2, { color: theme.colors.primaryForeground, size: "small" }) : /* @__PURE__ */ jsx29(HugeiconsIcon12, { icon: ArrowRight02Icon, size: 28, color: canJoin ? theme.colors.primaryForeground : theme.colors.mutedForeground })
                 }
               )
             ] }),
-            error ? /* @__PURE__ */ jsx27(Text16, { style: [styles21.immersiveError, { color: theme.colors.error }], children: error }) : null,
-            controller.simulatorMediaDisabled && /* @__PURE__ */ jsx27(Text16, { style: [styles21.simulatorHintText, { color: theme.colors.mutedForeground }], children: getIosSimulatorMediaMessage() })
+            error ? /* @__PURE__ */ jsx29(Text18, { style: [styles23.immersiveError, { color: theme.colors.error }], children: error }) : null,
+            controller.simulatorMediaDisabled && /* @__PURE__ */ jsx29(Text18, { style: [styles23.simulatorHintText, { color: theme.colors.mutedForeground }], children: getIosSimulatorMediaMessage() })
           ]
         }
       )
     ] })
   ] });
 }
-var styles21 = StyleSheet22.create({
+var styles23 = StyleSheet24.create({
   screen: {
     flex: 1,
     backgroundColor: Theme.colors.darkCanvas
   },
   immersiveContainer: {
-    ...StyleSheet22.absoluteFillObject,
+    ...StyleSheet24.absoluteFillObject,
     backgroundColor: Theme.colors.darkCanvas
   },
   fullScreenVideo: {
-    ...StyleSheet22.absoluteFillObject
+    ...StyleSheet24.absoluteFillObject
   },
   immersiveAvatarContainer: {
-    ...StyleSheet22.absoluteFillObject,
+    ...StyleSheet24.absoluteFillObject,
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: Theme.colors.background
   },
   frostOverlay: {
-    ...StyleSheet22.absoluteFillObject,
+    ...StyleSheet24.absoluteFillObject,
     backgroundColor: Theme.colors.darkOverlay30
   },
   hudLayer: {
@@ -4052,35 +4531,35 @@ import UserIcon3 from "@hugeicons/core-free-icons/dist/esm/UserIcon";
 import Video01Icon7 from "@hugeicons/core-free-icons/dist/esm/Video01Icon";
 import VideoOffIcon6 from "@hugeicons/core-free-icons/dist/esm/VideoOffIcon";
 import { HugeiconsIcon as HugeiconsIcon13 } from "@hugeicons/react-native";
-import { KeyboardAvoidingView as KeyboardAvoidingView4, Platform as Platform12, Pressable as Pressable15, StyleSheet as StyleSheet23, Text as Text17, TextInput as TextInput4, View as View22 } from "react-native";
-import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+import { KeyboardAvoidingView as KeyboardAvoidingView5, Platform as Platform16, Pressable as Pressable17, StyleSheet as StyleSheet25, Text as Text19, TextInput as TextInput5, View as View24 } from "react-native";
+import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
 function EntranceViewIosPhone({ spaceName, error, joinDisabled = false, onCancel, ...props }) {
   const controller = useEntranceController({ ...props, joinDisabled });
   const theme = useNativeTheme();
   const canJoin = controller.displayName.trim().length > 0 && !joinDisabled && !controller.isSubmitting;
-  return /* @__PURE__ */ jsx28(KeyboardAvoidingView4, { behavior: Platform12.OS === "ios" ? "padding" : "height", style: [styles22.screen, { backgroundColor: theme.colors.background }], children: /* @__PURE__ */ jsxs21(View22, { style: styles22.content, children: [
-    /* @__PURE__ */ jsxs21(View22, { style: styles22.previewContainer, children: [
-      /* @__PURE__ */ jsxs21(View22, { style: [styles22.previewSurface, { backgroundColor: theme.colors.raisedSurface, borderColor: theme.colors.border }], children: [
-        controller.previewStream && controller.videoEnabled ? /* @__PURE__ */ jsx28(RTCView, { mirror: true, objectFit: "cover", streamURL: controller.previewStream.toURL(), style: styles22.previewVideo, zOrder: 0 }) : /* @__PURE__ */ jsx28(View22, { style: [styles22.avatarContainer, { backgroundColor: theme.colors.insetSurface }], children: /* @__PURE__ */ jsx28(FaceAvatar, { name: controller.displayName, size: 140, textSize: 52 }) }),
-        onCancel ? /* @__PURE__ */ jsx28(Pressable15, { accessibilityLabel: "Cancel and leave Entrance", accessibilityRole: "button", onPress: onCancel, style: ({ pressed }) => [styles22.floatingBack, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }, pressed && styles22.topIconButtonPressed], children: /* @__PURE__ */ jsx28(HugeiconsIcon13, { icon: ArrowLeft01Icon3, size: 22, color: theme.colors.foreground }) }) : null
+  return /* @__PURE__ */ jsx30(KeyboardAvoidingView5, { behavior: Platform16.OS === "ios" ? "padding" : "height", style: [styles24.screen, { backgroundColor: theme.colors.background }], children: /* @__PURE__ */ jsxs23(View24, { style: styles24.content, children: [
+    /* @__PURE__ */ jsxs23(View24, { style: styles24.previewContainer, children: [
+      /* @__PURE__ */ jsxs23(View24, { style: [styles24.previewSurface, { backgroundColor: theme.colors.raisedSurface, borderColor: theme.colors.border }], children: [
+        controller.previewStream && controller.videoEnabled ? /* @__PURE__ */ jsx30(RTCView, { mirror: true, objectFit: "cover", streamURL: controller.previewStream.toURL(), style: styles24.previewVideo, zOrder: 0 }) : /* @__PURE__ */ jsx30(View24, { style: [styles24.avatarContainer, { backgroundColor: theme.colors.insetSurface }], children: /* @__PURE__ */ jsx30(FaceAvatar, { name: controller.displayName, size: 140, textSize: 52 }) }),
+        onCancel ? /* @__PURE__ */ jsx30(Pressable17, { accessibilityLabel: "Cancel and leave Entrance", accessibilityRole: "button", onPress: onCancel, style: ({ pressed }) => [styles24.floatingBack, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }, pressed && styles24.topIconButtonPressed], children: /* @__PURE__ */ jsx30(HugeiconsIcon13, { icon: ArrowLeft01Icon3, size: 22, color: theme.colors.foreground }) }) : null
       ] }),
-      controller.previewError && controller.videoEnabled ? /* @__PURE__ */ jsx28(Text17, { style: styles22.previewError, children: controller.previewError }) : null,
-      controller.simulatorMediaDisabled ? /* @__PURE__ */ jsx28(Text17, { style: styles22.previewHint, children: getIosSimulatorMediaMessage() }) : null
+      controller.previewError && controller.videoEnabled ? /* @__PURE__ */ jsx30(Text19, { style: styles24.previewError, children: controller.previewError }) : null,
+      controller.simulatorMediaDisabled ? /* @__PURE__ */ jsx30(Text19, { style: styles24.previewHint, children: getIosSimulatorMediaMessage() }) : null
     ] }),
-    /* @__PURE__ */ jsxs21(View22, { style: [styles22.sheetContainer, { backgroundColor: theme.colors.card, borderColor: theme.colors.border, shadowColor: theme.colors.darkCanvas }], children: [
-      /* @__PURE__ */ jsx28(View22, { style: styles22.sheetHandle }),
-      /* @__PURE__ */ jsx28(View22, { style: styles22.sheetHeader, children: /* @__PURE__ */ jsx28(Text17, { style: [styles22.spaceName, { color: theme.colors.foreground }], numberOfLines: 1, children: spaceName }) }),
-      /* @__PURE__ */ jsxs21(View22, { style: [styles22.inputCard, { backgroundColor: theme.colors.surface, borderColor: controller.isInputFocused ? theme.colors.ring : theme.colors.border }], children: [
-        /* @__PURE__ */ jsx28(HugeiconsIcon13, { icon: UserIcon3, size: 18, color: controller.isInputFocused ? theme.colors.primary : theme.colors.mutedForeground, style: styles22.inputIcon }),
-        /* @__PURE__ */ jsx28(
-          TextInput4,
+    /* @__PURE__ */ jsxs23(View24, { style: [styles24.sheetContainer, { backgroundColor: theme.colors.card, borderColor: theme.colors.border, shadowColor: theme.colors.darkCanvas }], children: [
+      /* @__PURE__ */ jsx30(View24, { style: styles24.sheetHandle }),
+      /* @__PURE__ */ jsx30(View24, { style: styles24.sheetHeader, children: /* @__PURE__ */ jsx30(Text19, { style: [styles24.spaceName, { color: theme.colors.foreground }], numberOfLines: 1, children: spaceName }) }),
+      /* @__PURE__ */ jsxs23(View24, { style: [styles24.inputCard, { backgroundColor: theme.colors.surface, borderColor: controller.isInputFocused ? theme.colors.ring : theme.colors.border }], children: [
+        /* @__PURE__ */ jsx30(HugeiconsIcon13, { icon: UserIcon3, size: 18, color: controller.isInputFocused ? theme.colors.primary : theme.colors.mutedForeground, style: styles24.inputIcon }),
+        /* @__PURE__ */ jsx30(
+          TextInput5,
           {
             onChangeText: controller.setDisplayName,
             onFocus: () => controller.setInputFocused(true),
             onBlur: () => controller.setInputFocused(false),
             placeholder: "Enter your name",
             placeholderTextColor: theme.colors.mutedForeground,
-            style: [styles22.nameInput, { color: theme.colors.foreground }],
+            style: [styles24.nameInput, { color: theme.colors.foreground }],
             value: controller.displayName,
             maxLength: 30,
             returnKeyType: "join",
@@ -4088,32 +4567,32 @@ function EntranceViewIosPhone({ spaceName, error, joinDisabled = false, onCancel
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs21(View22, { style: styles22.mediaRow, children: [
-        /* @__PURE__ */ jsx28(
-          Pressable15,
+      /* @__PURE__ */ jsxs23(View24, { style: styles24.mediaRow, children: [
+        /* @__PURE__ */ jsx30(
+          Pressable17,
           {
             disabled: controller.simulatorMediaDisabled,
             onPress: controller.toggleAudio,
-            style: ({ pressed }) => [styles22.controlCircle, { backgroundColor: controller.audioEnabled ? theme.colors.controlsBackground : theme.colors.error, borderColor: theme.colors.border }, controller.simulatorMediaDisabled && styles22.toggleCircleDisabled, pressed && styles22.togglePressed],
-            children: /* @__PURE__ */ jsx28(HugeiconsIcon13, { icon: controller.audioEnabled ? Mic01Icon6 : MicOff01Icon9, size: 24, color: theme.colors.primaryForeground })
+            style: ({ pressed }) => [styles24.controlCircle, { backgroundColor: controller.audioEnabled ? theme.colors.controlsBackground : theme.colors.error, borderColor: theme.colors.border }, controller.simulatorMediaDisabled && styles24.toggleCircleDisabled, pressed && styles24.togglePressed],
+            children: /* @__PURE__ */ jsx30(HugeiconsIcon13, { icon: controller.audioEnabled ? Mic01Icon6 : MicOff01Icon9, size: 24, color: theme.colors.primaryForeground })
           }
         ),
-        /* @__PURE__ */ jsx28(
-          Pressable15,
+        /* @__PURE__ */ jsx30(
+          Pressable17,
           {
             disabled: controller.simulatorMediaDisabled,
             onPress: controller.toggleVideo,
-            style: ({ pressed }) => [styles22.controlCircle, { backgroundColor: controller.videoEnabled ? theme.colors.controlsBackground : theme.colors.error, borderColor: theme.colors.border }, controller.simulatorMediaDisabled && styles22.toggleCircleDisabled, pressed && styles22.togglePressed],
-            children: /* @__PURE__ */ jsx28(HugeiconsIcon13, { icon: controller.videoEnabled ? Video01Icon7 : VideoOffIcon6, size: 24, color: theme.colors.primaryForeground })
+            style: ({ pressed }) => [styles24.controlCircle, { backgroundColor: controller.videoEnabled ? theme.colors.controlsBackground : theme.colors.error, borderColor: theme.colors.border }, controller.simulatorMediaDisabled && styles24.toggleCircleDisabled, pressed && styles24.togglePressed],
+            children: /* @__PURE__ */ jsx30(HugeiconsIcon13, { icon: controller.videoEnabled ? Video01Icon7 : VideoOffIcon6, size: 24, color: theme.colors.primaryForeground })
           }
         )
       ] }),
-      error ? /* @__PURE__ */ jsx28(Text17, { style: [styles22.globalError, { color: theme.colors.error }], children: error }) : null,
-      /* @__PURE__ */ jsx28(Pressable15, { disabled: !canJoin, onPress: controller.handleJoin, style: ({ pressed }) => [styles22.joinButton, { backgroundColor: canJoin ? theme.colors.primary : theme.colors.muted }, !canJoin && styles22.joinButtonDisabled, pressed && styles22.togglePressed], children: /* @__PURE__ */ jsx28(Text17, { style: [styles22.joinButtonText, { color: theme.colors.primaryForeground }], children: controller.isSubmitting || joinDisabled ? "Joining..." : "Enter Space" }) })
+      error ? /* @__PURE__ */ jsx30(Text19, { style: [styles24.globalError, { color: theme.colors.error }], children: error }) : null,
+      /* @__PURE__ */ jsx30(Pressable17, { disabled: !canJoin, onPress: controller.handleJoin, style: ({ pressed }) => [styles24.joinButton, { backgroundColor: canJoin ? theme.colors.primary : theme.colors.muted }, !canJoin && styles24.joinButtonDisabled, pressed && styles24.togglePressed], children: /* @__PURE__ */ jsx30(Text19, { style: [styles24.joinButtonText, { color: theme.colors.primaryForeground }], children: controller.isSubmitting || joinDisabled ? "Joining..." : "Enter Space" }) })
     ] })
   ] }) });
 }
-var styles22 = StyleSheet23.create({
+var styles24 = StyleSheet25.create({
   screen: {
     flex: 1,
     backgroundColor: Theme.colors.background
@@ -4137,7 +4616,7 @@ var styles22 = StyleSheet23.create({
   previewContainer: {
     flex: 1,
     justifyContent: "center",
-    paddingTop: Platform12.OS === "ios" ? 10 : 0,
+    paddingTop: Platform16.OS === "ios" ? 10 : 0,
     marginBottom: 0
   },
   previewSurface: {
@@ -4152,10 +4631,10 @@ var styles22 = StyleSheet23.create({
     borderColor: Theme.colors.whiteOverlay06
   },
   previewVideo: {
-    ...StyleSheet23.absoluteFillObject
+    ...StyleSheet25.absoluteFillObject
   },
   avatarContainer: {
-    ...StyleSheet23.absoluteFillObject,
+    ...StyleSheet25.absoluteFillObject,
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: Theme.colors.insetSurface
@@ -4186,7 +4665,7 @@ var styles22 = StyleSheet23.create({
     borderTopRightRadius: 32,
     paddingHorizontal: 24,
     paddingTop: 16,
-    paddingBottom: Platform12.OS === "ios" ? 44 : 32,
+    paddingBottom: Platform16.OS === "ios" ? 44 : 32,
     gap: 20,
     borderTopWidth: 1,
     borderColor: Theme.colors.whiteOverlay08,
@@ -4296,8 +4775,8 @@ import UserIcon4 from "@hugeicons/core-free-icons/dist/esm/UserIcon";
 import Video01Icon8 from "@hugeicons/core-free-icons/dist/esm/Video01Icon";
 import VideoOffIcon7 from "@hugeicons/core-free-icons/dist/esm/VideoOffIcon";
 import { HugeiconsIcon as HugeiconsIcon14 } from "@hugeicons/react-native";
-import { KeyboardAvoidingView as KeyboardAvoidingView5, Platform as Platform13, Pressable as Pressable16, StyleSheet as StyleSheet24, Text as Text18, TextInput as TextInput5, View as View23 } from "react-native";
-import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
+import { KeyboardAvoidingView as KeyboardAvoidingView6, Platform as Platform17, Pressable as Pressable18, StyleSheet as StyleSheet26, Text as Text20, TextInput as TextInput6, View as View25 } from "react-native";
+import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
 function EntranceViewMacos({ spaceName, error, joinDisabled = false, onCancel, ...props }) {
   const controller = useEntranceController({ ...props, joinDisabled });
   const theme = useNativeTheme();
@@ -4306,29 +4785,29 @@ function EntranceViewMacos({ spaceName, error, joinDisabled = false, onCancel, .
   const showPreview = Boolean(controller.previewStream && controller.videoEnabled && canRenderPreview);
   const previewStreamURL = showPreview && controller.previewStream ? controller.previewStream.toURL() : null;
   const previewStatusMessage = controller.videoEnabled && controller.previewStream && !canRenderPreview ? "Camera preview is unavailable on this device." : controller.previewError;
-  return /* @__PURE__ */ jsx29(KeyboardAvoidingView5, { behavior: Platform13.OS === "ios" ? "padding" : "height", style: [styles23.screen, { backgroundColor: theme.colors.background }], children: /* @__PURE__ */ jsxs22(View23, { style: styles23.content, children: [
-    /* @__PURE__ */ jsxs22(View23, { style: styles23.previewContainer, children: [
-      /* @__PURE__ */ jsxs22(View23, { style: [styles23.previewSurface, { backgroundColor: theme.colors.raisedSurface, borderColor: theme.colors.border }], children: [
-        previewStreamURL ? /* @__PURE__ */ jsx29(RtcVideoView, { mirror: true, objectFit: "cover", streamURL: previewStreamURL, style: styles23.previewVideo, zOrder: 0 }) : /* @__PURE__ */ jsx29(View23, { style: [styles23.avatarContainer, { backgroundColor: theme.colors.insetSurface }], children: /* @__PURE__ */ jsx29(FaceAvatar, { name: controller.displayName, size: 140, textSize: 52 }) }),
-        onCancel ? /* @__PURE__ */ jsx29(Pressable16, { accessibilityLabel: "Cancel and leave Entrance", accessibilityRole: "button", onPress: onCancel, style: ({ pressed }) => [styles23.floatingBack, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }, pressed && styles23.topIconButtonPressed], children: /* @__PURE__ */ jsx29(HugeiconsIcon14, { icon: ArrowLeft01Icon4, size: 22, color: theme.colors.foreground }) }) : null
+  return /* @__PURE__ */ jsx31(KeyboardAvoidingView6, { behavior: Platform17.OS === "ios" ? "padding" : "height", style: [styles25.screen, { backgroundColor: theme.colors.background }], children: /* @__PURE__ */ jsxs24(View25, { style: styles25.content, children: [
+    /* @__PURE__ */ jsxs24(View25, { style: styles25.previewContainer, children: [
+      /* @__PURE__ */ jsxs24(View25, { style: [styles25.previewSurface, { backgroundColor: theme.colors.raisedSurface, borderColor: theme.colors.border }], children: [
+        previewStreamURL ? /* @__PURE__ */ jsx31(RtcVideoView, { mirror: true, objectFit: "cover", streamURL: previewStreamURL, style: styles25.previewVideo, zOrder: 0 }) : /* @__PURE__ */ jsx31(View25, { style: [styles25.avatarContainer, { backgroundColor: theme.colors.insetSurface }], children: /* @__PURE__ */ jsx31(FaceAvatar, { name: controller.displayName, size: 140, textSize: 52 }) }),
+        onCancel ? /* @__PURE__ */ jsx31(Pressable18, { accessibilityLabel: "Cancel and leave Entrance", accessibilityRole: "button", onPress: onCancel, style: ({ pressed }) => [styles25.floatingBack, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }, pressed && styles25.topIconButtonPressed], children: /* @__PURE__ */ jsx31(HugeiconsIcon14, { icon: ArrowLeft01Icon4, size: 22, color: theme.colors.foreground }) }) : null
       ] }),
-      previewStatusMessage ? /* @__PURE__ */ jsx29(Text18, { style: styles23.previewError, children: previewStatusMessage }) : null,
-      controller.simulatorMediaDisabled ? /* @__PURE__ */ jsx29(Text18, { style: styles23.previewHint, children: getIosSimulatorMediaMessage() }) : null
+      previewStatusMessage ? /* @__PURE__ */ jsx31(Text20, { style: styles25.previewError, children: previewStatusMessage }) : null,
+      controller.simulatorMediaDisabled ? /* @__PURE__ */ jsx31(Text20, { style: styles25.previewHint, children: getIosSimulatorMediaMessage() }) : null
     ] }),
-    /* @__PURE__ */ jsxs22(View23, { style: [styles23.sheetContainer, { backgroundColor: theme.colors.card, borderColor: theme.colors.border, shadowColor: theme.colors.darkCanvas }], children: [
-      /* @__PURE__ */ jsx29(View23, { style: styles23.sheetHandle }),
-      /* @__PURE__ */ jsx29(View23, { style: styles23.sheetHeader, children: /* @__PURE__ */ jsx29(Text18, { style: [styles23.spaceName, { color: theme.colors.foreground }], numberOfLines: 1, children: spaceName }) }),
-      /* @__PURE__ */ jsxs22(View23, { style: [styles23.inputCard, { backgroundColor: theme.colors.surface, borderColor: controller.isInputFocused ? theme.colors.ring : theme.colors.border }], children: [
-        /* @__PURE__ */ jsx29(HugeiconsIcon14, { icon: UserIcon4, size: 18, color: controller.isInputFocused ? theme.colors.primary : theme.colors.mutedForeground, style: styles23.inputIcon }),
-        /* @__PURE__ */ jsx29(
-          TextInput5,
+    /* @__PURE__ */ jsxs24(View25, { style: [styles25.sheetContainer, { backgroundColor: theme.colors.card, borderColor: theme.colors.border, shadowColor: theme.colors.darkCanvas }], children: [
+      /* @__PURE__ */ jsx31(View25, { style: styles25.sheetHandle }),
+      /* @__PURE__ */ jsx31(View25, { style: styles25.sheetHeader, children: /* @__PURE__ */ jsx31(Text20, { style: [styles25.spaceName, { color: theme.colors.foreground }], numberOfLines: 1, children: spaceName }) }),
+      /* @__PURE__ */ jsxs24(View25, { style: [styles25.inputCard, { backgroundColor: theme.colors.surface, borderColor: controller.isInputFocused ? theme.colors.ring : theme.colors.border }], children: [
+        /* @__PURE__ */ jsx31(HugeiconsIcon14, { icon: UserIcon4, size: 18, color: controller.isInputFocused ? theme.colors.primary : theme.colors.mutedForeground, style: styles25.inputIcon }),
+        /* @__PURE__ */ jsx31(
+          TextInput6,
           {
             onChangeText: controller.setDisplayName,
             onFocus: () => controller.setInputFocused(true),
             onBlur: () => controller.setInputFocused(false),
             placeholder: "Enter your name",
             placeholderTextColor: theme.colors.mutedForeground,
-            style: [styles23.nameInput, { color: theme.colors.foreground }],
+            style: [styles25.nameInput, { color: theme.colors.foreground }],
             value: controller.displayName,
             maxLength: 30,
             returnKeyType: "join",
@@ -4336,32 +4815,32 @@ function EntranceViewMacos({ spaceName, error, joinDisabled = false, onCancel, .
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs22(View23, { style: styles23.mediaRow, children: [
-        /* @__PURE__ */ jsx29(
-          Pressable16,
+      /* @__PURE__ */ jsxs24(View25, { style: styles25.mediaRow, children: [
+        /* @__PURE__ */ jsx31(
+          Pressable18,
           {
             disabled: controller.simulatorMediaDisabled,
             onPress: controller.toggleAudio,
-            style: ({ pressed }) => [styles23.controlCircle, { backgroundColor: controller.audioEnabled ? theme.colors.controlsBackground : theme.colors.error, borderColor: theme.colors.border }, controller.simulatorMediaDisabled && styles23.toggleCircleDisabled, pressed && styles23.togglePressed],
-            children: /* @__PURE__ */ jsx29(HugeiconsIcon14, { icon: controller.audioEnabled ? Mic01Icon7 : MicOff01Icon10, size: 24, color: theme.colors.primaryForeground })
+            style: ({ pressed }) => [styles25.controlCircle, { backgroundColor: controller.audioEnabled ? theme.colors.controlsBackground : theme.colors.error, borderColor: theme.colors.border }, controller.simulatorMediaDisabled && styles25.toggleCircleDisabled, pressed && styles25.togglePressed],
+            children: /* @__PURE__ */ jsx31(HugeiconsIcon14, { icon: controller.audioEnabled ? Mic01Icon7 : MicOff01Icon10, size: 24, color: theme.colors.primaryForeground })
           }
         ),
-        /* @__PURE__ */ jsx29(
-          Pressable16,
+        /* @__PURE__ */ jsx31(
+          Pressable18,
           {
             disabled: controller.simulatorMediaDisabled,
             onPress: controller.toggleVideo,
-            style: ({ pressed }) => [styles23.controlCircle, { backgroundColor: controller.videoEnabled ? theme.colors.controlsBackground : theme.colors.error, borderColor: theme.colors.border }, controller.simulatorMediaDisabled && styles23.toggleCircleDisabled, pressed && styles23.togglePressed],
-            children: /* @__PURE__ */ jsx29(HugeiconsIcon14, { icon: controller.videoEnabled ? Video01Icon8 : VideoOffIcon7, size: 24, color: theme.colors.primaryForeground })
+            style: ({ pressed }) => [styles25.controlCircle, { backgroundColor: controller.videoEnabled ? theme.colors.controlsBackground : theme.colors.error, borderColor: theme.colors.border }, controller.simulatorMediaDisabled && styles25.toggleCircleDisabled, pressed && styles25.togglePressed],
+            children: /* @__PURE__ */ jsx31(HugeiconsIcon14, { icon: controller.videoEnabled ? Video01Icon8 : VideoOffIcon7, size: 24, color: theme.colors.primaryForeground })
           }
         )
       ] }),
-      error ? /* @__PURE__ */ jsx29(Text18, { style: [styles23.globalError, { color: theme.colors.error }], children: error }) : null,
-      /* @__PURE__ */ jsx29(Pressable16, { disabled: !canJoin, onPress: controller.handleJoin, style: ({ pressed }) => [styles23.joinButton, { backgroundColor: canJoin ? theme.colors.primary : theme.colors.muted }, !canJoin && styles23.joinButtonDisabled, pressed && styles23.togglePressed], children: /* @__PURE__ */ jsx29(Text18, { style: [styles23.joinButtonText, { color: theme.colors.primaryForeground }], children: controller.isSubmitting || joinDisabled ? "Joining..." : "Enter Space" }) })
+      error ? /* @__PURE__ */ jsx31(Text20, { style: [styles25.globalError, { color: theme.colors.error }], children: error }) : null,
+      /* @__PURE__ */ jsx31(Pressable18, { disabled: !canJoin, onPress: controller.handleJoin, style: ({ pressed }) => [styles25.joinButton, { backgroundColor: canJoin ? theme.colors.primary : theme.colors.muted }, !canJoin && styles25.joinButtonDisabled, pressed && styles25.togglePressed], children: /* @__PURE__ */ jsx31(Text20, { style: [styles25.joinButtonText, { color: theme.colors.primaryForeground }], children: controller.isSubmitting || joinDisabled ? "Joining..." : "Enter Space" }) })
     ] })
   ] }) });
 }
-var styles23 = StyleSheet24.create({
+var styles25 = StyleSheet26.create({
   screen: {
     flex: 1,
     backgroundColor: Theme.colors.background
@@ -4371,7 +4850,7 @@ var styles23 = StyleSheet24.create({
   },
   floatingBack: {
     position: "absolute",
-    top: Platform13.OS === "ios" ? 24 : 20,
+    top: Platform17.OS === "ios" ? 24 : 20,
     left: 20,
     width: 42,
     height: 42,
@@ -4386,7 +4865,7 @@ var styles23 = StyleSheet24.create({
   previewContainer: {
     flex: 1,
     justifyContent: "center",
-    paddingTop: Platform13.OS === "ios" ? 10 : 0,
+    paddingTop: Platform17.OS === "ios" ? 10 : 0,
     marginBottom: 0
   },
   previewSurface: {
@@ -4401,10 +4880,10 @@ var styles23 = StyleSheet24.create({
     borderColor: Theme.colors.whiteOverlay06
   },
   previewVideo: {
-    ...StyleSheet24.absoluteFillObject
+    ...StyleSheet26.absoluteFillObject
   },
   avatarContainer: {
-    ...StyleSheet24.absoluteFillObject,
+    ...StyleSheet26.absoluteFillObject,
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: Theme.colors.insetSurface
@@ -4435,7 +4914,7 @@ var styles23 = StyleSheet24.create({
     borderTopRightRadius: 32,
     paddingHorizontal: 24,
     paddingTop: 16,
-    paddingBottom: Platform13.OS === "ios" ? 44 : 32,
+    paddingBottom: Platform17.OS === "ios" ? 44 : 32,
     gap: 20,
     borderTopWidth: 1,
     borderColor: Theme.colors.whiteOverlay08,
@@ -4538,34 +5017,34 @@ var styles23 = StyleSheet24.create({
 });
 
 // src/components/EntranceView.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function EntranceView(props) {
   switch (resolvePlatformVariant()) {
     case "ios-pad":
-      return /* @__PURE__ */ jsx30(EntranceViewIosPad, { ...props });
+      return /* @__PURE__ */ jsx32(EntranceViewIosPad, { ...props });
     case "ios-phone":
-      return /* @__PURE__ */ jsx30(EntranceViewIosPhone, { ...props });
+      return /* @__PURE__ */ jsx32(EntranceViewIosPhone, { ...props });
     case "macos":
-      return /* @__PURE__ */ jsx30(EntranceViewMacos, { ...props });
+      return /* @__PURE__ */ jsx32(EntranceViewMacos, { ...props });
     case "tvos":
     case "android":
     default:
-      return /* @__PURE__ */ jsx30(EntranceViewAndroid, { ...props });
+      return /* @__PURE__ */ jsx32(EntranceViewAndroid, { ...props });
   }
 }
 
 // src/components/Entrance.tsx
-import { Image as Image3 } from "react-native";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { Image as Image5 } from "react-native";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function Entrance({ spaceName, logoUrl, defaultDisplayName, defaults, error, joining = false, onCancel, onJoin }) {
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx33(
     EntranceView,
     {
       error,
       initialAudioEnabled: defaults?.microphone ?? true,
       initialVideoEnabled: defaults?.camera ?? true,
       joinDisabled: joining,
-      logo: logoUrl ? /* @__PURE__ */ jsx31(Image3, { accessibilityLabel: "Chalk", source: { uri: logoUrl }, style: { height: 32, width: 120 } }) : /* @__PURE__ */ jsx31(Logo, { height: 32, variant: "wordmark" }),
+      logo: logoUrl ? /* @__PURE__ */ jsx33(Image5, { accessibilityLabel: "Chalk", source: { uri: logoUrl }, style: { height: 32, width: 120 } }) : /* @__PURE__ */ jsx33(Logo, { height: 32, variant: "wordmark" }),
       onCancel,
       onJoin: ({ displayName, microphoneEnabled, cameraEnabled }) => void onJoin({ displayName, microphone: microphoneEnabled, camera: cameraEnabled }),
       spaceName,
@@ -4575,20 +5054,20 @@ function Entrance({ spaceName, logoUrl, defaultDisplayName, defaults, error, joi
 }
 
 // src/components/Chalk.tsx
-import { jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
 function Chalk(props) {
   const suppliedClient = props.client;
   const space = props.space;
   const getAccess = props.getAccess;
-  const getAccessRef = useRef6(getAccess);
+  const getAccessRef = useRef7(getAccess);
   getAccessRef.current = getAccess;
-  const defaults = useRef6(props.defaults).current;
-  const getLatestAccess = useCallback9((...args) => {
+  const defaults = useRef7(props.defaults).current;
+  const getLatestAccess = useCallback10((...args) => {
     const currentGetAccess = getAccessRef.current;
     if (!currentGetAccess) throw new Error("Chalk requires getAccess when it creates the SpaceClient.");
     return currentGetAccess(...args);
   }, []);
-  const ownedClient = useMemo15(
+  const ownedClient = useMemo16(
     () => suppliedClient ? null : createNativeSpaceClient({
       space,
       getAccess: getLatestAccess,
@@ -4598,27 +5077,27 @@ function Chalk(props) {
     [getLatestAccess, space, suppliedClient]
   );
   const client = suppliedClient ?? ownedClient;
-  useEffect9(() => {
+  useEffect11(() => {
     if (!ownedClient) return;
     return () => {
       void ownedClient.leave().catch(() => void 0).finally(() => ownedClient.dispose());
     };
   }, [ownedClient]);
-  return /* @__PURE__ */ jsx32(NativeAppearanceProvider, { initialAppearance: { palette: props.theme?.palette, texture: props.theme?.texture }, children: /* @__PURE__ */ jsx32(AppearanceThemeBridge, { theme: props.theme, children: /* @__PURE__ */ jsx32(ChalkProvider, { client, children: /* @__PURE__ */ jsx32(SpaceExperience, { ...props }) }) }) });
+  return /* @__PURE__ */ jsx34(NativeAppearanceProvider, { initialAppearance: { palette: props.theme?.palette, texture: props.theme?.texture }, children: /* @__PURE__ */ jsx34(AppearanceThemeBridge, { theme: props.theme, children: /* @__PURE__ */ jsx34(ChalkProvider, { client, children: /* @__PURE__ */ jsx34(SpaceExperience, { ...props }) }) }) });
 }
 function AppearanceThemeBridge({ children, theme }) {
   const { appearance } = useNativeAppearance();
-  return /* @__PURE__ */ jsx32(NativeThemeProvider, { appearance, theme, children });
+  return /* @__PURE__ */ jsx34(NativeThemeProvider, { appearance, theme, children });
 }
 function SpaceExperience(props) {
   const client = useSpaceClient();
   const connection = useConnection();
-  const previousStatus = useRef6(connection.status);
-  const hasObservedStatus = useRef6(false);
-  const hasBeenLive = useRef6(connection.status === "live" || connection.status === "reconnecting");
-  const autoJoinAttempted = useRef6(false);
-  const previousClient = useRef6(client);
-  const [joinError, setJoinError] = useState10(null);
+  const previousStatus = useRef7(connection.status);
+  const hasObservedStatus = useRef7(false);
+  const hasBeenLive = useRef7(connection.status === "live" || connection.status === "reconnecting");
+  const autoJoinAttempted = useRef7(false);
+  const previousClient = useRef7(client);
+  const [joinError, setJoinError] = useState13(null);
   if (previousClient.current !== client) {
     previousClient.current = client;
     previousStatus.current = connection.status;
@@ -4628,7 +5107,7 @@ function SpaceExperience(props) {
   }
   const entrance = props.entrance ?? true;
   const spaceName = props.spaceName ?? props.space ?? "Space";
-  const join = useCallback9(
+  const join = useCallback10(
     async (options) => {
       try {
         setJoinError(null);
@@ -4639,14 +5118,14 @@ function SpaceExperience(props) {
     },
     [client]
   );
-  const retryAutomaticJoin = useCallback9(() => {
+  const retryAutomaticJoin = useCallback10(() => {
     autoJoinAttempted.current = true;
     void join(defaultJoinOptions(props));
   }, [join, props]);
-  useEffect9(() => {
+  useEffect11(() => {
     setJoinError(null);
   }, [client]);
-  useEffect9(() => {
+  useEffect11(() => {
     const subscriptions = [
       props.onEpisodeEnded && client.on("episodeEnded", props.onEpisodeEnded),
       props.onParticipantJoined && client.on("participantJoined", props.onParticipantJoined),
@@ -4657,13 +5136,13 @@ function SpaceExperience(props) {
     ].filter((unsubscribe) => Boolean(unsubscribe));
     return () => subscriptions.forEach((unsubscribe) => unsubscribe());
   }, [client, props.onEpisodeEnded, props.onError, props.onParticipantJoined, props.onParticipantLeft, props.onScreenShareStarted, props.onScreenShareStopped]);
-  useEffect9(() => {
+  useEffect11(() => {
     if (!entrance && connection.status === "idle" && !autoJoinAttempted.current) {
       autoJoinAttempted.current = true;
       void join(defaultJoinOptions(props));
     }
   }, [connection.status, entrance, join, props.defaults?.camera, props.defaults?.microphone, props.displayName]);
-  useEffect9(() => {
+  useEffect11(() => {
     const previous = previousStatus.current;
     if (hasObservedStatus.current) {
       if (connection.status === "live" && previous !== "live" && previous !== "reconnecting") props.onJoined?.();
@@ -4674,27 +5153,27 @@ function SpaceExperience(props) {
     if (connection.status === "live" || connection.status === "reconnecting") hasBeenLive.current = true;
   }, [connection.status, props.onJoined, props.onLeft]);
   if (connection.status === "idle" && entrance) {
-    return /* @__PURE__ */ jsx32(AppearanceLayer, { children: /* @__PURE__ */ jsx32(Entrance, { defaultDisplayName: props.displayName, defaults: props.defaults, error: joinError ?? void 0, logoUrl: props.logoUrl, onJoin: join, spaceName }) });
+    return /* @__PURE__ */ jsx34(AppearanceLayer, { children: /* @__PURE__ */ jsx34(Entrance, { defaultDisplayName: props.displayName, defaults: props.defaults, error: joinError ?? void 0, logoUrl: props.logoUrl, onJoin: join, spaceName }) });
   }
   if (connection.status === "idle") {
-    return /* @__PURE__ */ jsx32(AppearanceLayer, { children: /* @__PURE__ */ jsx32(SpaceStatus, { message: joinError ?? `Entering ${spaceName}\u2026`, onRetry: joinError ? retryAutomaticJoin : void 0 }) });
+    return /* @__PURE__ */ jsx34(AppearanceLayer, { children: /* @__PURE__ */ jsx34(SpaceStatus, { message: joinError ?? `Entering ${spaceName}\u2026`, onRetry: joinError ? retryAutomaticJoin : void 0 }) });
   }
   if (connection.status === "joining") {
     if (!entrance)
-      return /* @__PURE__ */ jsx32(AppearanceLayer, { children: /* @__PURE__ */ jsx32(SpaceStatus, { message: `Entering ${spaceName}\u2026` }) });
-    return /* @__PURE__ */ jsx32(AppearanceLayer, { children: /* @__PURE__ */ jsx32(Entrance, { defaultDisplayName: props.displayName, defaults: props.defaults, joining: true, logoUrl: props.logoUrl, onJoin: join, spaceName }) });
+      return /* @__PURE__ */ jsx34(AppearanceLayer, { children: /* @__PURE__ */ jsx34(SpaceStatus, { message: `Entering ${spaceName}\u2026` }) });
+    return /* @__PURE__ */ jsx34(AppearanceLayer, { children: /* @__PURE__ */ jsx34(Entrance, { defaultDisplayName: props.displayName, defaults: props.defaults, joining: true, logoUrl: props.logoUrl, onJoin: join, spaceName }) });
   }
   if (connection.status === "failed") {
     if (!hasBeenLive.current && entrance) {
-      return /* @__PURE__ */ jsx32(AppearanceLayer, { children: /* @__PURE__ */ jsx32(Entrance, { defaultDisplayName: props.displayName, defaults: props.defaults, error: connection.lastError?.message ?? "Unable to enter this Space.", logoUrl: props.logoUrl, onJoin: join, spaceName }) });
+      return /* @__PURE__ */ jsx34(AppearanceLayer, { children: /* @__PURE__ */ jsx34(Entrance, { defaultDisplayName: props.displayName, defaults: props.defaults, error: connection.lastError?.message ?? "Unable to enter this Space.", logoUrl: props.logoUrl, onJoin: join, spaceName }) });
     }
-    return /* @__PURE__ */ jsx32(AppearanceLayer, { children: /* @__PURE__ */ jsx32(SpaceStatus, { message: connection.lastError?.message ?? "This Space is unavailable.", onRetry: () => void join(defaultJoinOptions(props)) }) });
+    return /* @__PURE__ */ jsx34(AppearanceLayer, { children: /* @__PURE__ */ jsx34(SpaceStatus, { message: connection.lastError?.message ?? "This Space is unavailable.", onRetry: () => void join(defaultJoinOptions(props)) }) });
   }
   if (connection.status === "leaving")
-    return /* @__PURE__ */ jsx32(AppearanceLayer, { children: /* @__PURE__ */ jsx32(SpaceStatus, { message: `Leaving ${spaceName}\u2026` }) });
+    return /* @__PURE__ */ jsx34(AppearanceLayer, { children: /* @__PURE__ */ jsx34(SpaceStatus, { message: `Leaving ${spaceName}\u2026` }) });
   if (connection.status === "left")
-    return /* @__PURE__ */ jsx32(AppearanceLayer, { children: /* @__PURE__ */ jsx32(SpaceStatus, { message: "You have left this Space.", onRetry: () => void join(defaultJoinOptions(props)) }) });
-  return /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx34(AppearanceLayer, { children: /* @__PURE__ */ jsx34(SpaceStatus, { message: "You have left this Space.", onRetry: () => void join(defaultJoinOptions(props)) }) });
+  return /* @__PURE__ */ jsx34(
     NativeSpaceView,
     {
       features: props.features,
@@ -4703,6 +5182,7 @@ function SpaceExperience(props) {
       logoUrl: props.logoUrl,
       onLayoutChange: props.onLayoutChange,
       onOpenDiagnostics: props.onOpenDiagnostics,
+      feedbackEvidence: props.feedbackEvidence,
       pickChatFiles: props.pickChatFiles,
       reconnecting: connection.status === "reconnecting",
       spaceName
@@ -4717,11 +5197,11 @@ function defaultJoinOptions(props) {
     camera: props.defaults?.camera ?? true
   };
 }
-function NativeSpaceView({ features, inviteLink, layout, logoUrl, onLayoutChange, onOpenDiagnostics, pickChatFiles, reconnecting, spaceName }) {
+function NativeSpaceView({ features, inviteLink, layout, logoUrl, onLayoutChange, onOpenDiagnostics, feedbackEvidence, pickChatFiles, reconnecting, spaceName }) {
   const client = useSpaceClient();
   const theme = useNativeTheme();
-  return /* @__PURE__ */ jsxs23(View24, { style: [styles24.space, { backgroundColor: theme.colors.background }], children: [
-    /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs25(View26, { style: [styles26.space, { backgroundColor: theme.colors.background }], children: [
+    /* @__PURE__ */ jsx34(
       SpaceView,
       {
         features,
@@ -4732,29 +5212,30 @@ function NativeSpaceView({ features, inviteLink, layout, logoUrl, onLayoutChange
         onLayoutChange,
         onLeave: () => client.leave(),
         onOpenDiagnostics,
+        feedbackEvidence,
         pickChatFiles,
         reconnecting,
         spaceName
       }
     ),
-    /* @__PURE__ */ jsx32(NativeTextureOverlay, {})
+    /* @__PURE__ */ jsx34(NativeTextureOverlay, {})
   ] });
 }
 function AppearanceLayer({ children }) {
   const theme = useNativeTheme();
-  return /* @__PURE__ */ jsxs23(View24, { style: [styles24.appearanceLayer, { backgroundColor: theme.colors.background }], children: [
+  return /* @__PURE__ */ jsxs25(View26, { style: [styles26.appearanceLayer, { backgroundColor: theme.colors.background }], children: [
     children,
-    /* @__PURE__ */ jsx32(NativeTextureOverlay, {})
+    /* @__PURE__ */ jsx34(NativeTextureOverlay, {})
   ] });
 }
 function SpaceStatus({ message, onRetry }) {
   const theme = useNativeTheme();
-  return /* @__PURE__ */ jsxs23(View24, { accessibilityLiveRegion: "polite", style: [styles24.status, { backgroundColor: theme.colors.background }], children: [
-    /* @__PURE__ */ jsx32(Text19, { style: [styles24.statusText, { color: theme.colors.foreground }], children: message }),
-    onRetry ? /* @__PURE__ */ jsx32(Pressable17, { accessibilityRole: "button", onPress: onRetry, style: [styles24.retry, { backgroundColor: theme.colors.primary }], children: /* @__PURE__ */ jsx32(Text19, { style: [styles24.retryText, { color: theme.colors.primaryForeground }], children: "Try again" }) }) : null
+  return /* @__PURE__ */ jsxs25(View26, { accessibilityLiveRegion: "polite", style: [styles26.status, { backgroundColor: theme.colors.background }], children: [
+    /* @__PURE__ */ jsx34(Text21, { style: [styles26.statusText, { color: theme.colors.foreground }], children: message }),
+    onRetry ? /* @__PURE__ */ jsx34(Pressable19, { accessibilityRole: "button", onPress: onRetry, style: [styles26.retry, { backgroundColor: theme.colors.primary }], children: /* @__PURE__ */ jsx34(Text21, { style: [styles26.retryText, { color: theme.colors.primaryForeground }], children: "Try again" }) }) : null
   ] });
 }
-var styles24 = StyleSheet25.create({
+var styles26 = StyleSheet27.create({
   space: { flex: 1 },
   appearanceLayer: { flex: 1 },
   status: { flex: 1, alignItems: "center", justifyContent: "center", gap: 16, padding: 24 },
@@ -4780,6 +5261,7 @@ export {
   useMedia,
   useChat,
   useReactions,
+  useRecording,
   useWhiteboard,
   useCan,
   Logo,