@q9labsai/chalk-react-native 4.1.11 → 4.1.12

package/dist/{chunk-MMBE2BVK.js → chunk-FVHH65FR.js}

@@ -15,8 +15,8 @@ import {
 } from "./chunk-LZ67SXGB.js";
 
 // src/components/Chalk.tsx
-import { useCallback as useCallback9, useEffect as useEffect8, useMemo as useMemo15, useRef as useRef5, useState as useState9 } from "react";
-import { Pressable as Pressable16, StyleSheet as StyleSheet25, Text as Text19, View as View24 } from "react-native";
+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";
 
 // src/context/space-client-context.tsx
 import { createContext, useContext, useMemo } from "react";
@@ -1277,19 +1277,260 @@ var styles8 = StyleSheet9.create({
 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";
+
+// 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 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";
+var AnimatedG = Animated.createAnimatedComponent(G);
+var STICK_MOTIONS = [
+  {
+    transform: "rotate(-15 20 60)",
+    originX: 15,
+    originY: 42,
+    orbitRotation: [0, -5, 0, 0],
+    orbitX: [0, -4, 0, 0],
+    orbitY: [0, 3, 0, 0],
+    burstRotation: -8,
+    burstScale: 1.14,
+    burstSettleRotation: 2,
+    burstSettleScale: 0.98,
+    burstSettleX: -2,
+    burstSettleY: 2,
+    burstX: -14,
+    burstY: -9
+  },
+  {
+    transform: "rotate(-8 32 55)",
+    originX: 29,
+    originY: 38,
+    orbitRotation: [0, 4, 0, 0],
+    orbitX: [0, 3, 0, 0],
+    orbitY: [0, -4, 0, 0],
+    burstRotation: -4,
+    burstScale: 1.14,
+    burstSettleRotation: 1,
+    burstSettleScale: 0.98,
+    burstSettleX: 1,
+    burstSettleY: 1,
+    burstX: -4,
+    burstY: -14
+  },
+  {
+    transform: "rotate(12 60 30)",
+    originX: 42,
+    originY: 32,
+    orbitRotation: [0, 5, 0, 0],
+    orbitX: [0, 5, 0, 0],
+    orbitY: [0, 2, 0, 0],
+    burstRotation: 8,
+    burstScale: 1.16,
+    burstSettleRotation: -2,
+    burstSettleScale: 0.98,
+    burstSettleX: 2,
+    burstSettleY: 1,
+    burstX: 14,
+    burstY: -6
+  },
+  {
+    transform: "rotate(5 55 50)",
+    originX: 55,
+    originY: 50,
+    orbitRotation: [0, -4, 0, 0],
+    orbitX: [0, -3, 0, 0],
+    orbitY: [0, -3, 0, 0],
+    burstRotation: 7,
+    burstScale: 1.13,
+    burstSettleRotation: -1,
+    burstSettleScale: 0.98,
+    burstSettleX: 1,
+    burstSettleY: -1,
+    burstX: 11,
+    burstY: 12
+  }
+];
+var ORBIT_DURATION = 4800;
+var BURST_DURATION = 1100;
+var DEFAULT_COLOR = "#1A332B";
+var DEFAULT_HEIGHT = 32;
+var DEFAULT_MOTION = "orbit-burst";
+var DEFAULT_VARIANT = "wordmark";
+var WORDMARK_VIEW_BOX = "0 0 200 80";
+var MARK_VIEW_BOX = "0 0 68 80";
+function createStickAnimationValues() {
+  return [
+    { rotation: new Animated.Value(0), scaleX: new Animated.Value(1), scaleY: new Animated.Value(1), translateX: new Animated.Value(0), translateY: new Animated.Value(0) },
+    { rotation: new Animated.Value(0), scaleX: new Animated.Value(1), scaleY: new Animated.Value(1), translateX: new Animated.Value(0), translateY: new Animated.Value(0) },
+    { rotation: new Animated.Value(0), scaleX: new Animated.Value(1), scaleY: new Animated.Value(1), translateX: new Animated.Value(0), translateY: new Animated.Value(0) },
+    { rotation: new Animated.Value(0), scaleX: new Animated.Value(1), scaleY: new Animated.Value(1), translateX: new Animated.Value(0), translateY: new Animated.Value(0) }
+  ];
+}
+function createOrbitAnimation(stick, motion, index) {
+  const keyframes = [
+    Animated.parallel([
+      Animated.timing(stick.rotation, { duration: ORBIT_DURATION / 2, toValue: motion.orbitRotation[1], useNativeDriver: true }),
+      Animated.timing(stick.translateX, { duration: ORBIT_DURATION / 2, toValue: motion.orbitX[1], useNativeDriver: true }),
+      Animated.timing(stick.translateY, { duration: ORBIT_DURATION / 2, toValue: motion.orbitY[1], useNativeDriver: true })
+    ]),
+    Animated.parallel([
+      Animated.timing(stick.rotation, { duration: ORBIT_DURATION / 2, toValue: motion.orbitRotation[2], useNativeDriver: true }),
+      Animated.timing(stick.translateX, { duration: ORBIT_DURATION / 2, toValue: motion.orbitX[2], useNativeDriver: true }),
+      Animated.timing(stick.translateY, { duration: ORBIT_DURATION / 2, toValue: motion.orbitY[2], useNativeDriver: true })
+    ])
+  ];
+  return Animated.sequence([Animated.delay(index * 90), Animated.loop(Animated.sequence(keyframes))]);
+}
+function createBurstAnimation(stick, motion) {
+  return Animated.loop(
+    Animated.sequence([
+      Animated.parallel([
+        Animated.timing(stick.rotation, { duration: BURST_DURATION * 0.24, toValue: motion.burstRotation, useNativeDriver: true }),
+        Animated.timing(stick.scaleX, { duration: BURST_DURATION * 0.24, toValue: motion.burstScale, useNativeDriver: true }),
+        Animated.timing(stick.scaleY, { duration: BURST_DURATION * 0.24, toValue: motion.burstScale, useNativeDriver: true }),
+        Animated.timing(stick.translateX, { duration: BURST_DURATION * 0.24, toValue: motion.burstX, useNativeDriver: true }),
+        Animated.timing(stick.translateY, { duration: BURST_DURATION * 0.24, toValue: motion.burstY, useNativeDriver: true })
+      ]),
+      Animated.parallel([
+        Animated.timing(stick.rotation, { duration: BURST_DURATION * 0.25, toValue: motion.burstSettleRotation, useNativeDriver: true }),
+        Animated.timing(stick.scaleX, { duration: BURST_DURATION * 0.25, toValue: motion.burstSettleScale, useNativeDriver: true }),
+        Animated.timing(stick.scaleY, { duration: BURST_DURATION * 0.25, toValue: motion.burstSettleScale, useNativeDriver: true }),
+        Animated.timing(stick.translateX, { duration: BURST_DURATION * 0.25, toValue: motion.burstSettleX, useNativeDriver: true }),
+        Animated.timing(stick.translateY, { duration: BURST_DURATION * 0.25, toValue: motion.burstSettleY, useNativeDriver: true })
+      ]),
+      Animated.parallel([
+        Animated.timing(stick.rotation, { duration: BURST_DURATION * 0.33, toValue: 0, useNativeDriver: true }),
+        Animated.timing(stick.scaleX, { duration: BURST_DURATION * 0.33, toValue: 1, useNativeDriver: true }),
+        Animated.timing(stick.scaleY, { duration: BURST_DURATION * 0.33, toValue: 1, useNativeDriver: true }),
+        Animated.timing(stick.translateX, { duration: BURST_DURATION * 0.33, toValue: 0, useNativeDriver: true }),
+        Animated.timing(stick.translateY, { duration: BURST_DURATION * 0.33, toValue: 0, useNativeDriver: true })
+      ])
+    ])
+  );
+}
+function resetStickAnimationValues(values) {
+  for (const stick of values) {
+    stick.rotation.stopAnimation();
+    stick.scaleX.stopAnimation();
+    stick.scaleY.stopAnimation();
+    stick.translateX.stopAnimation();
+    stick.translateY.stopAnimation();
+    stick.rotation.setValue(0);
+    stick.scaleX.setValue(1);
+    stick.scaleY.setValue(1);
+    stick.translateX.setValue(0);
+    stick.translateY.setValue(0);
+  }
+}
+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 idPrefix = `chalk-logo-${useId().replace(/[^a-zA-Z0-9_-]/gu, "")}`;
+  const animationValues = useRef2(null);
+  if (animationValues.current === null) {
+    animationValues.current = createStickAnimationValues();
+  }
+  const sticks = animationValues.current;
+  const interactionActive = interaction.focus || interaction.hover || interaction.press;
+  const animate = motion === "orbit-burst" && reducedMotion === false;
+  useEffect3(() => {
+    let cancelled = false;
+    const subscription = AccessibilityInfo.addEventListener("reduceMotionChanged", setReducedMotion);
+    void AccessibilityInfo.isReduceMotionEnabled().then((enabled) => {
+      if (!cancelled) {
+        setReducedMotion(enabled);
+      }
+    });
+    return () => {
+      cancelled = true;
+      subscription.remove();
+    };
+  }, []);
+  useEffect3(() => {
+    if (!animate) {
+      resetStickAnimationValues(sticks);
+      return;
+    }
+    const animations = interactionActive ? [createBurstAnimation(sticks[0], STICK_MOTIONS[0]), createBurstAnimation(sticks[1], STICK_MOTIONS[1]), createBurstAnimation(sticks[2], STICK_MOTIONS[2]), createBurstAnimation(sticks[3], STICK_MOTIONS[3])] : [createOrbitAnimation(sticks[0], STICK_MOTIONS[0], 0), createOrbitAnimation(sticks[1], STICK_MOTIONS[1], 1), createOrbitAnimation(sticks[2], STICK_MOTIONS[2], 2), createOrbitAnimation(sticks[3], STICK_MOTIONS[3], 3)];
+    const animation = Animated.parallel(animations);
+    animation.start();
+    return () => {
+      animation.stop();
+    };
+  }, [animate, interactionActive, sticks]);
+  const setInteractionFlag = (key, value) => {
+    setInteraction((current) => current[key] === value ? current : { ...current, [key]: value });
+  };
+  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,
+    {
+      accessible: false,
+      onBlur: () => setInteractionFlag("focus", false),
+      onFocus: () => setInteractionFlag("focus", true),
+      onHoverIn: () => setInteractionFlag("hover", true),
+      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" })
+          ] }),
+          /* @__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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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" })
+          ] })
+        ] }),
+        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
+      ] })
+    }
+  );
+}
+
+// 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 }) {
   const theme = useNativeTheme();
-  return /* @__PURE__ */ jsxs8(View10, { style: [styles9.topBar, { backgroundColor: theme.colors.darkCanvas, borderColor: theme.colors.border }], children: [
-    /* @__PURE__ */ jsxs8(View10, { style: styles9.topBarLeft, children: [
-      logoUrl ? /* @__PURE__ */ jsx13(Image2, { accessibilityLabel: "Chalk", source: { uri: logoUrl }, style: styles9.logo }) : null,
-      /* @__PURE__ */ jsx13(View10, { style: [styles9.connectionDot, { backgroundColor: theme.colors.success }] }),
-      /* @__PURE__ */ jsx13(Text6, { style: [styles9.topBarSpaceName, { color: theme.colors.foreground }], numberOfLines: 1, children: spaceName }),
-      /* @__PURE__ */ jsx13(View10, { style: [styles9.timerBadge, { backgroundColor: theme.colors.surface }], children: /* @__PURE__ */ jsx13(Text6, { style: [styles9.timerText, { color: theme.colors.mutedForeground }], children: formattedDuration }) })
+  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 }) })
     ] }),
-    /* @__PURE__ */ jsxs8(View10, { style: [styles9.topBarRight, { backgroundColor: theme.colors.surface }], children: [
-      /* @__PURE__ */ jsx13(HugeiconsIcon4, { icon: UserGroupIcon, size: 14, color: theme.colors.foreground }),
-      /* @__PURE__ */ jsx13(Text6, { style: [styles9.topBarCount, { color: theme.colors.foreground }], children: participantCount })
+    /* @__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 })
     ] })
   ] });
 }
@@ -1360,8 +1601,8 @@ import { StyleSheet as StyleSheet12 } from "react-native";
 
 // src/components/EmbeddedWhiteboard.tsx
 import { ChalkWhiteboardController } from "@q9labsai/chalk-whiteboard/embedded";
-import { useCallback as useCallback4, useEffect as useEffect3, useMemo as useMemo8, useRef as useRef2, useState as useState3 } from "react";
-import { ActivityIndicator, Pressable as Pressable4, StyleSheet as StyleSheet11, Text as Text7, useWindowDimensions as useWindowDimensions2, View as View11 } from "react-native";
+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 WebView from "react-native-webview";
 
 // src/whiteboard/embedded-whiteboard-assets.ts
@@ -1398,7 +1639,7 @@ function requireLocalRendererURL(value) {
 }
 
 // src/components/EmbeddedWhiteboard.tsx
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var embeddedWhiteboardWebViewSecurityPolicy = Object.freeze({
   allowFileAccess: true,
   allowFileAccessFromFileURLs: false,
@@ -1415,17 +1656,17 @@ var embeddedWhiteboardWebViewSecurityPolicy = Object.freeze({
 function EmbeddedWhiteboard({ transport, journeyId, traceparent, tracestate, canDraw, canClear, theme: themeOverride, localParticipantColor, rendererURL: rendererURLOverride, style, testID, onMetric, onError, onUserExport }) {
   const nativeTheme = useNativeTheme();
   const theme = themeOverride ?? nativeTheme.colorScheme;
-  const webViewRef = useRef2(null);
-  const controllerRef = useRef2(null);
-  const listenersRef = useRef2(/* @__PURE__ */ new Set());
-  const onMetricRef = useRef2(onMetric);
-  const onErrorRef = useRef2(onError);
-  const onUserExportRef = useRef2(onUserExport);
-  const [rendererURL, setRendererURL] = useState3(null);
-  const [rendererGeneration, setRendererGeneration] = useState3(createRendererGeneration);
-  const [loadAttempt, setLoadAttempt] = useState3(0);
-  const [loadError, setLoadError] = useState3(null);
-  const [compatibilityNotice, setCompatibilityNotice] = useState3(null);
+  const webViewRef = useRef3(null);
+  const controllerRef = useRef3(null);
+  const listenersRef = useRef3(/* @__PURE__ */ new Set());
+  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();
   onMetricRef.current = onMetric;
   onErrorRef.current = onError;
@@ -1443,7 +1684,7 @@ 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), []);
-  useEffect3(() => {
+  useEffect4(() => {
     let active = true;
     setLoadError(null);
     void resolveEmbeddedWhiteboardRendererURL(rendererURLOverride).then((url) => {
@@ -1458,7 +1699,7 @@ function EmbeddedWhiteboard({ transport, journeyId, traceparent, tracestate, can
       active = false;
     };
   }, [loadAttempt, onError, rendererURLOverride]);
-  useEffect3(() => {
+  useEffect4(() => {
     setCompatibilityNotice(null);
     const controller = new ChalkWhiteboardController({
       renderer: rendererPort,
@@ -1482,11 +1723,11 @@ function EmbeddedWhiteboard({ transport, journeyId, traceparent, tracestate, can
       controller.stop();
     };
   }, [handleControllerError, handleControllerMetric, handleControllerUserExport, journeyId, localParticipantColor, rendererPort, theme, traceparent, tracestate, transport]);
-  useEffect3(() => {
+  useEffect4(() => {
     controllerRef.current?.setCapabilities({ canDraw, canClear });
   }, [canClear, canDraw]);
   const viewport = useMemo8(() => ({ width, height, scale }), [height, scale, width]);
-  useEffect3(() => {
+  useEffect4(() => {
     controllerRef.current?.setViewport(viewport);
   }, [viewport]);
   const sourceURL = rendererURL ? rendererURLWithContext(rendererURL, { journeyId, rendererGeneration }) : null;
@@ -1514,20 +1755,20 @@ function EmbeddedWhiteboard({ transport, journeyId, traceparent, tracestate, can
     reloadRenderer();
   };
   if (loadError) {
-    return /* @__PURE__ */ jsxs9(View11, { style: [styles10.status, { backgroundColor: nativeTheme.colors.lightSurface }, style], testID, children: [
-      /* @__PURE__ */ jsx14(Text7, { style: [styles10.errorTitle, { color: nativeTheme.colors.lightText }], children: "Whiteboard unavailable" }),
-      /* @__PURE__ */ jsx14(Text7, { style: [styles10.errorMessage, { color: nativeTheme.colors.lightSubtleText }], children: loadError }),
-      /* @__PURE__ */ jsx14(Pressable4, { accessibilityRole: "button", onPress: retryRenderer, style: ({ pressed }) => [styles10.retryButton, { backgroundColor: nativeTheme.colors.info }, pressed && styles10.retryButtonPressed], children: /* @__PURE__ */ jsx14(Text7, { style: [styles10.retryButtonText, { color: nativeTheme.colors.onDark }], children: "Retry" }) })
+    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" }) })
     ] });
   }
   if (!sourceURL || !rendererURL) {
-    return /* @__PURE__ */ jsxs9(View11, { style: [styles10.status, { backgroundColor: nativeTheme.colors.lightSurface }, style], testID, children: [
-      /* @__PURE__ */ jsx14(ActivityIndicator, { color: nativeTheme.colors.info }),
-      /* @__PURE__ */ jsx14(Text7, { style: [styles10.loadingMessage, { color: nativeTheme.colors.lightMutedText }], children: "Loading whiteboard\u2026" })
+    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__ */ jsxs9(View11, { style: [styles10.container, style], testID, children: [
-    /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs10(View11, { style: [styles10.container, style], testID, children: [
+    /* @__PURE__ */ jsx15(
       WebView,
       {
         ref: webViewRef,
@@ -1552,7 +1793,7 @@ function EmbeddedWhiteboard({ transport, journeyId, traceparent, tracestate, can
       },
       rendererGeneration
     ),
-    compatibilityNotice ? /* @__PURE__ */ jsx14(View11, { pointerEvents: "none", style: [styles10.compatibilityNotice, { backgroundColor: nativeTheme.colors.dangerSurfaceOverlay94 }], children: /* @__PURE__ */ jsx14(Text7, { style: [styles10.compatibilityNoticeText, { color: nativeTheme.colors.onDark }], children: compatibilityNotice }) }) : null
+    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
   ] });
 }
 function createRendererGeneration() {
@@ -1614,7 +1855,7 @@ var styles10 = StyleSheet11.create({
 });
 
 // src/components/native-space-view/SpaceWhiteboardSurface.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function shouldRenderNativeSpaceWhiteboard(whiteboard) {
   return whiteboard.isOpen && whiteboard.transport !== null;
 }
@@ -1643,7 +1884,7 @@ function SpaceWhiteboardSurface({ whiteboard }) {
     [whiteboard.onMetric]
   );
   if (!shouldRenderNativeSpaceWhiteboard(whiteboard)) return null;
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     EmbeddedWhiteboard,
     {
       canClear: whiteboard.canClear,
@@ -1674,37 +1915,37 @@ 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 useEffect4, useState as useState4 } from "react";
-import { Modal as Modal3, Platform as Platform6, Pressable as Pressable7, ScrollView, StyleSheet as StyleSheet15, Text as Text10, View as View14 } from "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";
 
 // src/components/native-space-view/SpaceSurfacePrimitives.tsx
 import { HugeiconsIcon as HugeiconsIcon5 } from "@hugeicons/react-native";
-import { Pressable as Pressable5, StyleSheet as StyleSheet13, Text as Text8, View as View12 } from "react-native";
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+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";
 function SheetGrip() {
-  return /* @__PURE__ */ jsx16(View12, { accessibilityElementsHidden: true, style: styles12.grip });
+  return /* @__PURE__ */ jsx17(View12, { accessibilityElementsHidden: true, style: styles12.grip });
 }
 function CloseButton({ label, onPress }) {
-  return /* @__PURE__ */ jsx16(Pressable5, { accessibilityLabel: label, accessibilityRole: "button", hitSlop: 6, onPress, style: ({ pressed }) => [styles12.closeButton, pressed && styles12.pressed], children: /* @__PURE__ */ jsx16(Text8, { style: styles12.closeGlyph, children: "\xD7" }) });
+  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" }) });
 }
 function SurfaceHeader({ title, count, subtitle, onClose, closeLabel }) {
-  return /* @__PURE__ */ jsxs10(View12, { style: styles12.header, children: [
-    /* @__PURE__ */ jsxs10(View12, { style: styles12.headerCopy, children: [
-      /* @__PURE__ */ jsxs10(View12, { style: styles12.titleRow, children: [
-        /* @__PURE__ */ jsx16(Text8, { style: styles12.title, children: title }),
-        count !== void 0 ? /* @__PURE__ */ jsx16(View12, { style: styles12.countPill, children: /* @__PURE__ */ jsx16(Text8, { style: styles12.countText, children: count }) }) : null
+  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
       ] }),
-      subtitle ? /* @__PURE__ */ jsx16(Text8, { style: styles12.subtitle, children: subtitle }) : null
+      subtitle ? /* @__PURE__ */ jsx17(Text8, { style: styles12.subtitle, children: subtitle }) : null
     ] }),
-    /* @__PURE__ */ jsx16(CloseButton, { label: closeLabel, onPress: onClose })
+    /* @__PURE__ */ jsx17(CloseButton, { label: closeLabel, onPress: onClose })
   ] });
 }
 function InitialsAvatar({ name, size = 52, style }) {
   const color = getParticipantColor(name);
-  return /* @__PURE__ */ jsx16(View12, { style: [styles12.avatar, { backgroundColor: color.primary, borderRadius: size / 2, height: size, width: size }, style], children: /* @__PURE__ */ jsx16(Text8, { allowFontScaling: false, style: [styles12.avatarText, { fontSize: Math.max(16, Math.round(size * 0.34)) }], children: getParticipantInitials(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) }) });
 }
 function IconTile({ icon, symbol, color = Theme.colors.ink, wash = Theme.colors.surface }) {
-  return /* @__PURE__ */ jsx16(View12, { style: [styles12.iconTile, { backgroundColor: wash }], children: icon ? /* @__PURE__ */ jsx16(HugeiconsIcon5, { color, icon, size: 22 }) : /* @__PURE__ */ jsx16(Text8, { style: [styles12.symbol, { color }], children: symbol }) });
+  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 }) });
 }
 var styles12 = StyleSheet13.create({
   grip: { alignSelf: "center", backgroundColor: Theme.colors.lineStrong, borderRadius: Theme.radius.full, height: 5, marginTop: Theme.spacing.sm, width: 48 },
@@ -1727,20 +1968,20 @@ 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 Pressable6, StyleSheet as StyleSheet14, Text as Text9, View as View13 } 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 AppearanceSettings() {
   const { appearance, setPalette, setTexture } = useNativeAppearance();
   const theme = useNativeTheme();
-  return /* @__PURE__ */ jsxs11(View13, { style: styles13.section, children: [
-    /* @__PURE__ */ jsx17(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__ */ jsx17(PaletteGroup, { mode, selectedPalette: appearance.palette, theme, onSelect: setPalette }, mode)),
-    /* @__PURE__ */ jsxs11(View13, { style: styles13.textureSection, children: [
-      /* @__PURE__ */ jsx17(Text9, { style: styles13.groupLabel, children: "Texture" }),
-      /* @__PURE__ */ jsx17(View13, { style: styles13.textureGrid, children: THEME_TEXTURES.map((texture) => {
+  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) => {
         const selected = texture.value === appearance.texture;
-        return /* @__PURE__ */ jsxs11(
-          Pressable6,
+        return /* @__PURE__ */ jsxs12(
+          Pressable7,
           {
             accessibilityLabel: `Use ${texture.label} texture`,
             accessibilityRole: "button",
@@ -1748,8 +1989,8 @@ function AppearanceSettings() {
             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],
             children: [
-              /* @__PURE__ */ jsx17(TexturePreview, { kind: texture.value, background: appearance.tokens.stage, foreground: appearance.tokens.textMuted }),
-              /* @__PURE__ */ jsx17(Text9, { numberOfLines: 1, style: [styles13.textureLabel, { color: theme.colors.ink }], children: texture.label })
+              /* @__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 })
             ]
           },
           texture.value
@@ -1759,12 +2000,12 @@ function AppearanceSettings() {
   ] });
 }
 function PaletteGroup({ mode, selectedPalette, theme, onSelect }) {
-  return /* @__PURE__ */ jsxs11(View13, { style: styles13.group, children: [
-    /* @__PURE__ */ jsx17(Text9, { style: styles13.groupLabel, children: mode === "light" ? "Light palettes" : "Dark palettes" }),
-    /* @__PURE__ */ jsx17(View13, { style: styles13.paletteGrid, children: THEME_PALETTES.filter((palette) => palette.mode === mode).map((palette) => {
+  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) => {
       const selected = palette.value === selectedPalette;
-      return /* @__PURE__ */ jsxs11(
-        Pressable6,
+      return /* @__PURE__ */ jsxs12(
+        Pressable7,
         {
           accessibilityLabel: `Use ${palette.label} palette`,
           accessibilityRole: "button",
@@ -1772,12 +2013,12 @@ function PaletteGroup({ mode, selectedPalette, theme, onSelect }) {
           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],
           children: [
-            /* @__PURE__ */ jsx17(View13, { style: styles13.swatches, children: palette.swatch.map((color) => /* @__PURE__ */ jsx17(View13, { style: [styles13.swatch, { backgroundColor: color }] }, color)) }),
-            /* @__PURE__ */ jsxs11(View13, { style: styles13.paletteCopy, children: [
-              /* @__PURE__ */ jsx17(Text9, { numberOfLines: 1, style: [styles13.paletteLabel, { color: theme.colors.ink }], children: palette.label }),
-              /* @__PURE__ */ jsx17(Text9, { numberOfLines: 1, style: [styles13.family, { color: theme.colors.ink3 }], children: palette.family })
+            /* @__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 })
             ] }),
-            selected ? /* @__PURE__ */ jsx17(HugeiconsIcon6, { color: theme.colors.success, icon: CheckmarkCircle01Icon, size: 18 }) : null
+            selected ? /* @__PURE__ */ jsx18(HugeiconsIcon6, { color: theme.colors.success, icon: CheckmarkCircle01Icon, size: 18 }) : null
           ]
         },
         palette.value
@@ -1786,9 +2027,9 @@ function PaletteGroup({ mode, selectedPalette, theme, onSelect }) {
   ] });
 }
 function TexturePreview({ background, foreground, kind }) {
-  return /* @__PURE__ */ jsxs11(View13, { style: [styles13.texturePreview, { backgroundColor: background }], children: [
-    kind === "paper" ? Array.from({ length: 11 }, (_, index) => /* @__PURE__ */ jsx17(View13, { style: [styles13.grain, { backgroundColor: foreground, left: `${index * 29 % 91}%`, top: `${index * 43 % 88}%` }] }, index)) : null,
-    kind === "slate" ? Array.from({ length: 5 }, (_, index) => /* @__PURE__ */ jsx17(View13, { style: [styles13.slateLine, { backgroundColor: foreground, top: 4 + index * 8 }] }, index)) : null
+  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
   ] });
 }
 var styles13 = StyleSheet14.create({
@@ -1815,77 +2056,77 @@ var styles13 = StyleSheet14.create({
 });
 
 // src/components/native-space-view/SettingsSheet.tsx
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 function SettingsSheet({ controller, isOpen, onClose }) {
-  const [tab, setTab] = useState4("devices");
-  useEffect4(() => {
+  const [tab, setTab] = useState5("devices");
+  useEffect5(() => {
     if (!isOpen) setTab("devices");
   }, [isOpen]);
-  return /* @__PURE__ */ jsx18(Modal3, { animationType: "slide", onRequestClose: onClose, transparent: true, visible: isOpen, children: /* @__PURE__ */ jsxs12(View14, { style: styles14.modalRoot, children: [
-    /* @__PURE__ */ jsx18(Pressable7, { accessibilityLabel: "Close Settings", onPress: onClose, style: styles14.backdrop }),
-    /* @__PURE__ */ jsxs12(View14, { style: styles14.sheet, children: [
-      /* @__PURE__ */ jsx18(SheetGrip, {}),
-      /* @__PURE__ */ jsxs12(View14, { style: styles14.header, children: [
-        /* @__PURE__ */ jsx18(Text10, { style: styles14.title, children: "Settings" }),
-        /* @__PURE__ */ jsx18(CloseButton, { label: "Close Settings", onPress: onClose })
+  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 })
       ] }),
-      /* @__PURE__ */ jsx18(View14, { accessibilityRole: "tablist", style: styles14.tabs, children: ["devices", "appearance", "space"].map((nextTab) => /* @__PURE__ */ jsx18(Pressable7, { accessibilityRole: "tab", accessibilityState: { selected: tab === nextTab }, onPress: () => setTab(nextTab), style: ({ pressed }) => [styles14.tab, tab === nextTab && styles14.tabSelected, pressed && styles14.pressed], children: /* @__PURE__ */ jsx18(Text10, { style: [styles14.tabText, tab === nextTab && styles14.tabTextSelected], children: nextTab[0].toUpperCase() + nextTab.slice(1) }) }, nextTab)) }),
-      /* @__PURE__ */ jsxs12(ScrollView, { contentContainerStyle: styles14.content, showsVerticalScrollIndicator: false, children: [
-        tab === "devices" ? /* @__PURE__ */ jsx18(DevicesSettings, { controller }) : null,
-        tab === "appearance" ? /* @__PURE__ */ jsx18(AppearanceSettings, {}) : null,
-        tab === "space" ? /* @__PURE__ */ jsx18(SpaceSettings, { controller }) : null
+      /* @__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__ */ jsx18(Pressable7, { accessibilityRole: "button", onPress: onClose, style: ({ pressed }) => [styles14.doneButton, pressed && styles14.pressed], children: /* @__PURE__ */ jsx18(Text10, { style: styles14.doneText, children: "Done" }) })
+      /* @__PURE__ */ jsx19(Pressable8, { accessibilityRole: "button", onPress: onClose, style: ({ pressed }) => [styles14.doneButton, pressed && styles14.pressed], children: /* @__PURE__ */ jsx19(Text10, { style: styles14.doneText, children: "Done" }) })
     ] })
   ] }) });
 }
 function DevicesSettings({ controller }) {
   const microphoneEnabled = !controller.isMuted;
   const cameraEnabled = !controller.isCameraOff;
-  return /* @__PURE__ */ jsxs12(View14, { style: styles14.section, children: [
-    /* @__PURE__ */ jsx18(Text10, { style: styles14.sectionIntro, children: "Use the controls below to set what you share in this Episode." }),
-    /* @__PURE__ */ jsx18(DeviceControl, { disabled: controller.simulatorMediaDisabled, enabled: microphoneEnabled, icon: microphoneEnabled ? Mic01Icon2 : MicOff01Icon4, label: "Microphone", onPress: controller.toggleAudio, value: microphoneEnabled ? "On" : "Off" }),
-    /* @__PURE__ */ jsx18(DeviceControl, { disabled: controller.simulatorMediaDisabled, enabled: cameraEnabled, icon: cameraEnabled ? Video01Icon2 : VideoOffIcon2, label: "Camera", onPress: controller.toggleVideo, value: cameraEnabled ? "On" : "Off" }),
-    /* @__PURE__ */ jsxs12(View14, { style: styles14.deviceRow, children: [
-      /* @__PURE__ */ jsx18(IconTile, { icon: Speaker01Icon }),
-      /* @__PURE__ */ jsxs12(View14, { style: styles14.rowCopy, children: [
-        /* @__PURE__ */ jsx18(Text10, { style: styles14.rowLabel, children: "Speaker" }),
-        /* @__PURE__ */ jsx18(Text10, { style: styles14.rowMeta, children: "System audio output" })
+  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" })
       ] }),
-      /* @__PURE__ */ jsx18(Text10, { style: styles14.rowValue, children: "Automatic" })
+      /* @__PURE__ */ jsx19(Text10, { style: styles14.rowValue, children: "Automatic" })
     ] }),
-    /* @__PURE__ */ jsxs12(View14, { style: styles14.readyCard, children: [
-      /* @__PURE__ */ jsx18(HugeiconsIcon7, { color: Theme.colors.success, icon: CheckmarkCircle01Icon2, size: 22 }),
-      /* @__PURE__ */ jsx18(Text10, { style: styles14.readyText, children: controller.simulatorMediaDisabled ? "Device controls are unavailable here" : "Devices are ready" })
+    /* @__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" })
     ] })
   ] });
 }
 function DeviceControl({ disabled, enabled, icon, label, onPress, value }) {
-  return /* @__PURE__ */ jsxs12(Pressable7, { accessibilityLabel: `${label} ${value}`, accessibilityRole: "button", disabled, onPress, style: ({ pressed }) => [styles14.deviceRow, disabled && styles14.disabled, pressed && styles14.pressed], children: [
-    /* @__PURE__ */ jsx18(IconTile, { icon, color: enabled ? Theme.colors.ink : Theme.colors.error, wash: enabled ? Theme.colors.surface : Theme.colors.washPink }),
-    /* @__PURE__ */ jsxs12(View14, { style: styles14.rowCopy, children: [
-      /* @__PURE__ */ jsx18(Text10, { style: styles14.rowLabel, children: label }),
-      /* @__PURE__ */ jsx18(Text10, { style: styles14.rowMeta, children: disabled ? "Unavailable on this device" : "Tap to change state" })
+  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" })
     ] }),
-    /* @__PURE__ */ jsx18(Text10, { style: [styles14.rowValue, !enabled && styles14.valueOff], children: value })
+    /* @__PURE__ */ jsx19(Text10, { style: [styles14.rowValue, !enabled && styles14.valueOff], children: value })
   ] });
 }
 function SpaceSettings({ controller }) {
-  return /* @__PURE__ */ jsxs12(View14, { style: styles14.section, children: [
-    /* @__PURE__ */ jsx18(Text10, { style: styles14.sectionIntro, children: "Canonical information about this Space and its current Episode." }),
-    /* @__PURE__ */ jsx18(InfoRow, { label: "Space", value: "Current Space" }),
-    /* @__PURE__ */ jsx18(InfoRow, { label: "Episode", value: controller.formattedDuration }),
-    /* @__PURE__ */ jsx18(InfoRow, { label: "People", value: String(controller.participantCount) }),
-    /* @__PURE__ */ jsxs12(View14, { style: styles14.infoCard, children: [
-      /* @__PURE__ */ jsx18(Text10, { style: styles14.infoTitle, children: "Space content stays here" }),
-      /* @__PURE__ */ jsx18(Text10, { style: styles14.infoText, children: "Chat and Board content belong to this Space and remain available across Episodes." })
+  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." })
     ] })
   ] });
 }
 function InfoRow({ label, value }) {
-  return /* @__PURE__ */ jsxs12(View14, { style: styles14.infoRow, children: [
-    /* @__PURE__ */ jsx18(Text10, { style: styles14.rowLabel, children: label }),
-    /* @__PURE__ */ jsx18(Text10, { numberOfLines: 1, style: styles14.infoValue, children: value || "\u2014" })
+  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" })
   ] });
 }
 var styles14 = StyleSheet15.create({
@@ -1936,14 +2177,14 @@ var styles14 = StyleSheet15.create({
 });
 
 // src/components/native-space-view/SpacePanelSheet.tsx
-import { Modal as Modal5, Platform as Platform9, Pressable as Pressable11, SafeAreaView, StyleSheet as StyleSheet19, View as View18 } from "react-native";
+import { Modal as Modal5, Platform as Platform9, Pressable as Pressable12, SafeAreaView, StyleSheet as StyleSheet19, View as View18 } 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 Pressable8, StyleSheet as StyleSheet16, Text as Text11, TextInput, View as View15 } from "react-native";
+import { FlatList as FlatList3, KeyboardAvoidingView, Platform as Platform7, Pressable as Pressable9, StyleSheet as StyleSheet16, Text as Text11, TextInput, View as View15 } from "react-native";
 
 // src/components/native-space-view/space-progressive-surface-helpers.ts
 function buildParticipantActionDescriptors(availability) {
@@ -1964,52 +2205,52 @@ function formatChatTimestamp(timestamp) {
 }
 
 // src/components/native-space-view/SpaceChatSheet.tsx
-import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs14 } 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__ */ jsxs13(View15, { style: styles15.content, children: [
-    controller.chat.hasMore ? /* @__PURE__ */ jsx19(Pressable8, { accessibilityRole: "button", disabled: controller.chat.isLoadingOlder, onPress: () => void controller.chat.loadOlderMessages(), style: ({ pressed }) => [styles15.loadOlder, pressed && styles15.pressed], children: /* @__PURE__ */ jsx19(Text11, { style: styles15.loadOlderText, children: controller.chat.isLoadingOlder ? "Loading\u2026" : "Load earlier messages" }) }) : null,
-    /* @__PURE__ */ jsx19(
+  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(
       FlatList3,
       {
         accessibilityLabel: "Chat messages",
         contentContainerStyle: styles15.messageList,
         data: messages,
         keyExtractor: (message) => message.id,
-        ListEmptyComponent: /* @__PURE__ */ jsx19(EmptyChat, {}),
+        ListEmptyComponent: /* @__PURE__ */ jsx20(EmptyChat, {}),
         onViewableItemsChanged: ({ viewableItems }) => {
           const sequence = viewableItems.at(-1)?.item.sequence;
           if (sequence) controller.markChatMessageVisible(sequence);
         },
-        renderItem: ({ item }) => /* @__PURE__ */ jsx19(ChatMessage, { isLocal: item.senderId === localParticipantId, message: item, onOpenAttachment: controller.openChatAttachment }),
+        renderItem: ({ item }) => /* @__PURE__ */ jsx20(ChatMessage, { isLocal: item.senderId === localParticipantId, message: item, onOpenAttachment: controller.openChatAttachment }),
         showsVerticalScrollIndicator: false
       }
     ),
-    controller.chat.pendingMessages.map((message) => /* @__PURE__ */ jsxs13(View15, { style: styles15.pendingMessage, children: [
-      /* @__PURE__ */ jsx19(Text11, { style: styles15.pendingText, children: message.text }),
-      /* @__PURE__ */ jsx19(Text11, { style: styles15.pendingMeta, children: message.state === "sending" ? "Sending\u2026" : message.error?.message ?? "Send failed" }),
-      message.state === "failed" ? /* @__PURE__ */ jsx19(Pressable8, { accessibilityRole: "button", onPress: () => void controller.chat.retryMessage(message.clientMessageId), children: /* @__PURE__ */ jsx19(Text11, { style: styles15.retry, children: "Retry" }) }) : null
+    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
     ] }, message.clientMessageId)),
-    controller.chatAttachments.length ? /* @__PURE__ */ jsx19(View15, { accessibilityLabel: "Selected attachments", style: styles15.selectedAttachments, children: controller.chatAttachments.map((attachment, index) => /* @__PURE__ */ jsxs13(View15, { style: styles15.selectedAttachment, children: [
-      /* @__PURE__ */ jsx19(Text11, { numberOfLines: 1, style: styles15.selectedAttachmentText, children: attachment.fileName }),
-      /* @__PURE__ */ jsx19(Pressable8, { accessibilityLabel: `Remove ${attachment.fileName}`, accessibilityRole: "button", disabled: controller.chatAttachmentUploading, onPress: () => controller.removeChatAttachment(index), children: /* @__PURE__ */ jsx19(Text11, { style: styles15.removeAttachment, children: "Remove" }) })
+    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" }) })
     ] }, `${attachment.fileName}-${index}`)) }) : null,
-    controller.chatAttachmentError ? /* @__PURE__ */ jsx19(Text11, { accessibilityLiveRegion: "polite", style: styles15.attachmentError, children: controller.chatAttachmentError }) : null,
-    /* @__PURE__ */ jsx19(KeyboardAvoidingView, { behavior: Platform7.OS === "ios" ? "padding" : void 0, keyboardVerticalOffset: Platform7.OS === "ios" ? 12 : 0, children: /* @__PURE__ */ jsxs13(View15, { style: styles15.composer, children: [
-      controller.canPickChatFiles ? /* @__PURE__ */ jsx19(
-        Pressable8,
+    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,
         {
           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__ */ jsx19(Text11, { style: styles15.composerButtonText, children: controller.chatAttachmentPicking ? "Choosing\u2026" : "Attach" })
+          children: /* @__PURE__ */ jsx20(Text11, { style: styles15.composerButtonText, children: controller.chatAttachmentPicking ? "Choosing\u2026" : "Attach" })
         }
       ) : null,
-      /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx20(
         TextInput,
         {
           accessibilityLabel: "Message the Space",
@@ -2023,34 +2264,34 @@ function SpaceChatSheet({ controller }) {
           value: controller.chatDraft
         }
       ),
-      /* @__PURE__ */ jsx19(Pressable8, { accessibilityLabel: "Send message", accessibilityRole: "button", disabled: sendDisabled, onPress: controller.sendChatMessage, style: ({ pressed }) => [styles15.sendButton, sendDisabled && styles15.sendDisabled, pressed && styles15.pressed], children: controller.chatAttachmentUploading ? /* @__PURE__ */ jsx19(Text11, { style: styles15.uploadingText, children: "\u2026" }) : /* @__PURE__ */ jsx19(HugeiconsIcon8, { color: Theme.colors.primaryForeground, icon: Navigation03Icon, size: 21 }) })
+      /* @__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 }) })
     ] }) })
   ] });
 }
 function ChatMessage({ isLocal, message, onOpenAttachment }) {
   const timestamp = formatChatTimestamp(message.timestamp);
-  return /* @__PURE__ */ jsxs13(View15, { style: [styles15.messageRow, isLocal && styles15.messageRowLocal], children: [
-    !isLocal ? /* @__PURE__ */ jsx19(InitialsAvatar, { name: message.senderName, size: 42 }) : null,
-    /* @__PURE__ */ jsxs13(View15, { style: [styles15.messageCopy, isLocal && styles15.messageCopyLocal], children: [
-      /* @__PURE__ */ jsx19(Text11, { style: [styles15.sender, isLocal && styles15.senderLocal], children: isLocal ? `${message.senderName} (You)` : message.senderName }),
-      /* @__PURE__ */ jsxs13(View15, { style: [styles15.bubble, isLocal ? styles15.localBubble : styles15.remoteBubble], children: [
-        message.text ? /* @__PURE__ */ jsx19(Text11, { style: [styles15.messageText, isLocal && styles15.localMessageText], children: message.text }) : null,
-        message.attachments.map((attachment) => /* @__PURE__ */ jsx19(Pressable8, { accessibilityRole: "link", onPress: () => onOpenAttachment(attachment.attachmentId), style: ({ pressed }) => [styles15.attachmentLink, pressed && styles15.pressed], children: /* @__PURE__ */ jsx19(Text11, { numberOfLines: 1, style: [styles15.attachment, isLocal && styles15.localMessageText], children: attachment.fileName }) }, attachment.attachmentId))
+  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))
       ] }),
-      /* @__PURE__ */ jsx19(Text11, { style: [styles15.timestamp, isLocal && styles15.timestampLocal], children: timestamp }),
-      message.readBy.length ? /* @__PURE__ */ jsxs13(Text11, { style: [styles15.readBy, isLocal && styles15.timestampLocal], children: [
+      /* @__PURE__ */ jsx20(Text11, { style: [styles15.timestamp, isLocal && styles15.timestampLocal], children: timestamp }),
+      message.readBy.length ? /* @__PURE__ */ jsxs14(Text11, { style: [styles15.readBy, isLocal && styles15.timestampLocal], children: [
         "Read by ",
         message.readBy.map((reader) => reader.displayName).join(", ")
       ] }) : null
     ] }),
-    isLocal ? /* @__PURE__ */ jsx19(InitialsAvatar, { name: message.senderName, size: 42 }) : null
+    isLocal ? /* @__PURE__ */ jsx20(InitialsAvatar, { name: message.senderName, size: 42 }) : null
   ] });
 }
 function EmptyChat() {
-  return /* @__PURE__ */ jsxs13(View15, { style: styles15.emptyState, children: [
-    /* @__PURE__ */ jsx19(View15, { style: styles15.emptyIcon, children: /* @__PURE__ */ jsx19(HugeiconsIcon8, { color: Theme.colors.ink2, icon: Message01Icon, size: 26 }) }),
-    /* @__PURE__ */ jsx19(Text11, { style: styles15.emptyTitle, children: "No messages yet" }),
-    /* @__PURE__ */ jsx19(Text11, { style: styles15.emptyText, children: "Send a message to start the conversation." })
+  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." })
   ] });
 }
 var styles15 = StyleSheet16.create({
@@ -2104,8 +2345,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 useState5 } from "react";
-import { Pressable as Pressable10, ScrollView as ScrollView2, StyleSheet as StyleSheet18, Text as Text13, View as View17 } from "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";
 
 // src/components/native-space-view/ParticipantActionSheet.tsx
 import CancelCircleIcon from "@hugeicons/core-free-icons/dist/esm/CancelCircleIcon";
@@ -2113,8 +2354,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 Pressable9, StyleSheet as StyleSheet17, Text as Text12, View as View16 } from "react-native";
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+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";
 function ParticipantActionSheet({ controller, participantId, onClose }) {
   const participant = participantId ? controller.participants.participants.find((item) => item.id === participantId) : void 0;
   const descriptors = buildParticipantActionDescriptors({
@@ -2134,28 +2375,28 @@ function ParticipantActionSheet({ controller, participantId, onClose }) {
     if (descriptor.kind === "stopScreenShare") controller.stopParticipantScreenShare(participantId);
     if (descriptor.kind === "remove") controller.removeParticipant(participantId);
   };
-  return /* @__PURE__ */ jsx20(Modal4, { animationType: "fade", onRequestClose: onClose, transparent: true, visible: participantId !== null, children: /* @__PURE__ */ jsxs14(View16, { style: styles16.modalRoot, children: [
-    /* @__PURE__ */ jsx20(Pressable9, { accessibilityLabel: "Close Participant actions", onPress: onClose, style: styles16.backdrop }),
-    /* @__PURE__ */ jsxs14(View16, { style: styles16.card, children: [
-      /* @__PURE__ */ jsxs14(View16, { style: styles16.cardHeader, children: [
-        participant ? /* @__PURE__ */ jsx20(InitialsAvatar, { name: participant.displayName, size: 44 }) : /* @__PURE__ */ jsx20(IconTile, { icon: UserIcon }),
-        /* @__PURE__ */ jsx20(View16, { style: styles16.headerCopy, children: /* @__PURE__ */ jsx20(Text12, { numberOfLines: 1, style: styles16.name, children: participant?.displayName ?? "Participant" }) }),
-        /* @__PURE__ */ jsx20(CloseButton, { label: "Close Participant actions", onPress: onClose })
+  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 })
       ] }),
-      /* @__PURE__ */ jsxs14(View16, { style: styles16.actions, children: [
-        descriptors.filter((descriptor) => !descriptor.destructive).map((descriptor) => /* @__PURE__ */ jsx20(ParticipantActionRow, { descriptor, onPress: () => run(descriptor) }, descriptor.kind)),
-        descriptors.some((descriptor) => descriptor.destructive) ? /* @__PURE__ */ jsx20(View16, { style: styles16.divider }) : null,
-        descriptors.filter((descriptor) => descriptor.destructive).map((descriptor) => /* @__PURE__ */ jsx20(ParticipantActionRow, { descriptor, onPress: () => run(descriptor) }, descriptor.kind))
+      /* @__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))
       ] }),
-      !descriptors.length ? /* @__PURE__ */ jsx20(Text12, { style: styles16.emptyText, children: "No actions are available for this Participant." }) : null
+      !descriptors.length ? /* @__PURE__ */ jsx21(Text12, { style: styles16.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__ */ jsxs14(Pressable9, { accessibilityLabel: descriptor.label, accessibilityRole: "button", onPress, style: ({ pressed }) => [styles16.actionRow, descriptor.destructive && styles16.destructiveRow, pressed && styles16.pressed], children: [
-    /* @__PURE__ */ jsx20(HugeiconsIcon9, { color: descriptor.destructive ? Theme.colors.error : Theme.colors.ink, icon, size: 21 }),
-    /* @__PURE__ */ jsx20(Text12, { style: [styles16.actionLabel, descriptor.destructive && styles16.destructiveText], children: descriptor.label })
+  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 })
   ] });
 }
 var styles16 = StyleSheet17.create({
@@ -2176,60 +2417,60 @@ var styles16 = StyleSheet17.create({
 });
 
 // src/components/native-space-view/SpacePeopleSheet.tsx
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 function SpacePeopleSheet({ controller }) {
-  const [actionParticipantId, setActionParticipantId] = useState5(null);
+  const [actionParticipantId, setActionParticipantId] = useState6(null);
   const closeActions = () => {
     setActionParticipantId(null);
   };
   const openActions = (participantId) => {
     setActionParticipantId(participantId);
   };
-  return /* @__PURE__ */ jsxs15(View17, { style: styles17.content, children: [
-    /* @__PURE__ */ jsxs15(ScrollView2, { contentContainerStyle: styles17.list, showsVerticalScrollIndicator: false, children: [
-      controller.admissionRequests.map((request) => /* @__PURE__ */ jsxs15(View17, { style: styles17.admissionRequest, children: [
-        /* @__PURE__ */ jsx21(InitialsAvatar, { name: request.displayName, size: 48 }),
-        /* @__PURE__ */ jsxs15(View17, { style: styles17.rowCopy, children: [
-          /* @__PURE__ */ jsx21(Text13, { numberOfLines: 1, style: styles17.name, children: request.displayName }),
-          /* @__PURE__ */ jsx21(Text13, { style: styles17.meta, children: "At the Entrance" })
+  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" })
         ] }),
-        controller.canManageAdmission ? /* @__PURE__ */ jsxs15(View17, { style: styles17.admissionActions, children: [
-          /* @__PURE__ */ jsx21(Pressable10, { accessibilityRole: "button", onPress: () => controller.denyAdmission(request.requestId), style: ({ pressed }) => [styles17.denyButton, pressed && styles17.pressed], children: /* @__PURE__ */ jsx21(Text13, { style: styles17.denyText, children: "Deny" }) }),
-          /* @__PURE__ */ jsx21(Pressable10, { accessibilityRole: "button", onPress: () => controller.admitParticipant(request.requestId), style: ({ pressed }) => [styles17.admitButton, pressed && styles17.pressed], children: /* @__PURE__ */ jsx21(Text13, { style: styles17.admitText, children: "Admit" }) })
+        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" }) })
         ] }) : null
       ] }, request.requestId)),
       controller.participants.participants.map((participant) => {
         const local = participant.id === controller.participants.localParticipant?.id;
         const canAct = !local && canActOnParticipant(controller);
-        return /* @__PURE__ */ jsxs15(View17, { style: styles17.participantRow, children: [
-          /* @__PURE__ */ jsx21(InitialsAvatar, { name: participant.displayName, size: 54 }),
-          /* @__PURE__ */ jsx21(View17, { style: styles17.rowCopy, children: /* @__PURE__ */ jsxs15(Text13, { numberOfLines: 1, style: styles17.name, children: [
+        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: [
             participant.displayName,
             local ? " (You)" : ""
           ] }) }),
-          /* @__PURE__ */ jsxs15(View17, { style: styles17.mediaStatus, children: [
-            /* @__PURE__ */ jsx21(HugeiconsIcon10, { color: participant.audioEnabled ? Theme.colors.success : Theme.colors.error, icon: participant.audioEnabled ? Mic01Icon3 : MicOff01Icon6, size: 22 }),
-            /* @__PURE__ */ jsx21(View17, { style: [styles17.statusDot, { backgroundColor: participant.audioEnabled ? Theme.colors.chalkGreen : Theme.colors.chalkPink }] })
+          /* @__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__ */ jsxs15(View17, { style: styles17.mediaStatus, children: [
-            /* @__PURE__ */ jsx21(HugeiconsIcon10, { color: participant.videoEnabled ? Theme.colors.success : Theme.colors.error, icon: participant.videoEnabled ? Video01Icon4 : VideoOffIcon3, size: 22 }),
-            /* @__PURE__ */ jsx21(View17, { style: [styles17.statusDot, { backgroundColor: participant.videoEnabled ? 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 }] })
           ] }),
-          canAct ? /* @__PURE__ */ jsx21(Pressable10, { accessibilityLabel: `Actions for ${participant.displayName}`, accessibilityRole: "button", onPress: () => openActions(participant.id), style: ({ pressed }) => [styles17.moreButton, pressed && styles17.pressed], children: /* @__PURE__ */ jsx21(HugeiconsIcon10, { color: Theme.colors.ink, icon: MoreHorizontalIcon2, size: 22 }) }) : null
+          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
         ] }, participant.id);
       }),
-      !controller.participants.participants.length && !controller.admissionRequests.length ? /* @__PURE__ */ jsx21(EmptyPeople, {}) : null
+      !controller.participants.participants.length && !controller.admissionRequests.length ? /* @__PURE__ */ jsx22(EmptyPeople, {}) : null
     ] }),
-    /* @__PURE__ */ jsx21(ParticipantActionSheet, { controller, onClose: closeActions, participantId: actionParticipantId })
+    /* @__PURE__ */ jsx22(ParticipantActionSheet, { controller, onClose: closeActions, participantId: actionParticipantId })
   ] });
 }
 function canActOnParticipant(controller) {
   return controller.canMuteParticipants || controller.canRequestMedia || controller.canStopParticipantCamera || controller.canStopParticipantScreenShare || controller.canRemoveParticipants;
 }
 function EmptyPeople() {
-  return /* @__PURE__ */ jsxs15(View17, { style: styles17.emptyState, children: [
-    /* @__PURE__ */ jsx21(Text13, { style: styles17.emptyTitle, children: "No People yet" }),
-    /* @__PURE__ */ jsx21(Text13, { style: styles17.emptyText, children: "People will appear here as they join the Space." })
+  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." })
   ] });
 }
 var styles17 = StyleSheet18.create({
@@ -2255,17 +2496,17 @@ var styles17 = StyleSheet18.create({
 });
 
 // src/components/native-space-view/SpacePanelSheet.tsx
-import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
 function SpacePanelSheet({ controller }) {
   const visible = controller.panel !== null;
   const close = controller.closePanel;
   const isChat = controller.panel === "chat";
-  return /* @__PURE__ */ jsx22(Modal5, { animationType: "slide", onRequestClose: close, transparent: true, visible, children: /* @__PURE__ */ jsxs16(View18, { style: styles18.modalRoot, children: [
-    /* @__PURE__ */ jsx22(Pressable11, { accessibilityLabel: "Close panel", onPress: close, style: styles18.backdrop }),
-    /* @__PURE__ */ jsxs16(SafeAreaView, { style: styles18.sheet, children: [
-      /* @__PURE__ */ jsx22(SheetGrip, {}),
-      /* @__PURE__ */ jsx22(SurfaceHeader, { closeLabel: `Close ${isChat ? "Chat" : "People"}`, count: !isChat ? controller.participantCount : void 0, onClose: close, title: isChat ? "Chat" : "People" }),
-      isChat ? /* @__PURE__ */ jsx22(SpaceChatSheet, { controller }) : /* @__PURE__ */ jsx22(SpacePeopleSheet, { controller })
+  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 })
     ] })
   ] }) });
 }
@@ -2290,7 +2531,7 @@ var styles18 = StyleSheet19.create({
 });
 
 // src/components/native-space-view/useSpaceViewController.ts
-import { useCallback as useCallback8, useEffect as useEffect7, useMemo as useMemo12, useState as useState8 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect8, useMemo as useMemo12, useState as useState9 } from "react";
 import { Alert as Alert2, Linking } from "react-native";
 
 // src/components/native-space-view/diagnostics.ts
@@ -2427,16 +2668,16 @@ function useSpaceViewDerived({ participants, localParticipant, screenShare, isWh
 }
 
 // src/components/native-space-view/useSpaceViewPanels.ts
-import { useCallback as useCallback7, useEffect as useEffect6, useMemo as useMemo11, useRef as useRef3, useState as useState7 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect7, useMemo as useMemo11, useRef as useRef4, useState as useState8 } from "react";
 import { Alert, Share } from "react-native";
 
 // src/hooks/useLayout.ts
-import { useCallback as useCallback6, useEffect as useEffect5, useState as useState6 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect6, useState as useState7 } from "react";
 function useLayout({ layout: controlledLayout, onLayoutChange } = {}) {
-  const [uncontrolledLayout, setUncontrolledLayout] = useState6(controlledLayout ?? "focus");
-  const [isFullscreen, setFullscreen] = useState6(false);
+  const [uncontrolledLayout, setUncontrolledLayout] = useState7(controlledLayout ?? "focus");
+  const [isFullscreen, setFullscreen] = useState7(false);
   const layout = controlledLayout ?? uncontrolledLayout;
-  useEffect5(() => {
+  useEffect6(() => {
     if (controlledLayout) setUncontrolledLayout(controlledLayout);
   }, [controlledLayout]);
   const setLayout = useCallback6(
@@ -2462,14 +2703,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] = useState7(initialState?.panel ?? null);
-  const [actionsOpen, setActionsOpen] = useState7(initialState?.actionsOpen ?? false);
-  const [reactionPickerOpen, setReactionPickerOpen] = useState7(initialState?.reactionPickerOpen ?? false);
-  const [secondsElapsed, setSecondsElapsed] = useState7(0);
-  const [settingsOpen, setSettingsOpen] = useState7(initialState?.settingsOpen ?? false);
-  const [whiteboardOpen, setWhiteboardOpen] = useState7(initialState?.whiteboardOpen ?? false);
-  const generatedJourneyId = useRef3(globalThis.crypto?.randomUUID?.() ?? `native-whiteboard-${Date.now()}-${Math.random().toString(36).slice(2)}`);
-  useEffect6(() => {
+  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 generatedJourneyId = useRef4(globalThis.crypto?.randomUUID?.() ?? `native-whiteboard-${Date.now()}-${Math.random().toString(36).slice(2)}`);
+  useEffect7(() => {
     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)));
@@ -2477,7 +2718,7 @@ function useSpaceViewPanels({ spaceName, inviteLink, layout: controlledLayout, o
     const timer = globalThis.setInterval(update, 1e3);
     return () => globalThis.clearInterval(timer);
   }, [controlledState?.durationSeconds, initialState?.durationSeconds]);
-  useEffect6(() => {
+  useEffect7(() => {
     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);
@@ -2602,13 +2843,13 @@ function useSpaceViewController({ spaceName, inviteLink, layout: controlledLayou
   const reactionSlice = useReactions();
   const whiteboardSlice = useWhiteboard();
   const journeyContext = getNativeJourneyContext(client);
-  const [actionsOpen, setActionsOpen] = useState8(false);
-  const [reactionPickerOpen, setReactionPickerOpen] = useState8(false);
-  const [chatDraft, setChatDraft] = useState8("");
-  const [chatAttachments, setChatAttachments] = useState8([]);
-  const [chatAttachmentError, setChatAttachmentError] = useState8(null);
-  const [chatAttachmentPicking, setChatAttachmentPicking] = useState8(false);
-  const [chatAttachmentUploading, setChatAttachmentUploading] = useState8(false);
+  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) => {
     try {
       await action();
@@ -2777,7 +3018,7 @@ function useSpaceViewController({ spaceName, inviteLink, layout: controlledLayou
     journeyContext
   });
   const derived = useSpaceViewDerived({ participants, localParticipant, screenShare, isWhiteboardOpen: spacePanels.whiteboard.isOpen });
-  useEffect7(() => {
+  useEffect8(() => {
     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"}.`, [
@@ -2807,7 +3048,7 @@ function useSpaceViewController({ spaceName, inviteLink, layout: controlledLayou
     }),
     [capabilities, chat.unreadCount, interactionState.raisedHandCount, spaceParticipants.participantCount, screenShare.isActive, screenShare.isLocalSharing, screenShare.sharerParticipantId, screenShareAvailability]
   );
-  useEffect7(() => onDiagnosticsChange?.(spaceDiagnostics), [onDiagnosticsChange, spaceDiagnostics]);
+  useEffect8(() => onDiagnosticsChange?.(spaceDiagnostics), [onDiagnosticsChange, spaceDiagnostics]);
   const pickChatFiles = useCallback8(async () => {
     if (!pickChatFilesInput) return;
     setChatAttachmentPicking(true);
@@ -2950,7 +3191,7 @@ function sequenceAtOrAfter(value, floor) {
 }
 
 // src/components/SpaceView.shared.tsx
-import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
 function SpaceViewShared(props) {
   const controller = useSpaceViewController(props);
   const theme = useNativeTheme();
@@ -2961,10 +3202,10 @@ function SpaceViewShared(props) {
     }
     action();
   };
-  return /* @__PURE__ */ jsxs17(View19, { style: [styles19.space, { backgroundColor: theme.colors.darkCanvas }], children: [
-    /* @__PURE__ */ jsx23(SpaceTopBarAndroid, { formattedDuration: controller.formattedDuration, logoUrl: props.logoUrl, participantCount: controller.participantCount, spaceName: controller.spaceName }),
-    props.reconnecting ? /* @__PURE__ */ jsx23(View19, { accessibilityLiveRegion: "polite", style: [styles19.recovery, { backgroundColor: theme.colors.primary }], children: /* @__PURE__ */ jsx23(Text14, { style: [styles19.recoveryText, { color: theme.colors.primaryForeground }], children: "Reconnecting\u2026 controls will resume shortly." }) }) : null,
-    /* @__PURE__ */ jsx23(View19, { style: styles19.stage, children: controller.whiteboard.isOpen ? /* @__PURE__ */ jsx23(SpaceWhiteboardSurface, { whiteboard: controller.whiteboard }) : controller.derived.isStageMode || controller.layout.layout !== "grid" ? /* @__PURE__ */ jsx23(
+  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,
@@ -2985,8 +3226,8 @@ function SpaceViewShared(props) {
           participantCount: controller.whiteboard.openParticipants.length
         }
       }
-    ) : /* @__PURE__ */ jsx23(SpaceGridAndroid, { gridPages: controller.derived.gridPages, participants: controller.derived.allParticipants }) }),
-    /* @__PURE__ */ jsx23(
+    ) : /* @__PURE__ */ jsx24(SpaceGridAndroid, { gridPages: controller.derived.gridPages, participants: controller.derived.allParticipants }) }),
+    /* @__PURE__ */ jsx24(
       SpaceBottomDockAndroid,
       {
         isCameraOff: controller.isCameraOff,
@@ -3000,9 +3241,9 @@ function SpaceViewShared(props) {
         unreadChatCount: controller.chat.unreadCount
       }
     ),
-    /* @__PURE__ */ jsx23(SpaceActionMenu, { controller, onOpenDiagnostics: props.onOpenDiagnostics }),
-    controller.panel === "settings" ? /* @__PURE__ */ jsx23(SettingsSheet, { controller, isOpen: true, onClose: controller.closePanel }) : /* @__PURE__ */ jsx23(SpacePanelSheet, { controller }),
-    /* @__PURE__ */ jsx23(ReactionPicker, { isOpen: controller.reactionPickerOpen, onClose: () => controller.setReactionPickerOpen(false), onSelect: (reaction) => selectSpaceReaction(controller, reaction) })
+    /* @__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) })
   ] });
 }
 var styles19 = StyleSheet20.create({
@@ -3013,19 +3254,19 @@ var styles19 = StyleSheet20.create({
 });
 
 // src/components/SpaceView.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function SpaceView(props) {
   switch (resolvePlatformVariant()) {
     case "ios-pad":
-      return /* @__PURE__ */ jsx24(SpaceViewShared, { ...props });
+      return /* @__PURE__ */ jsx25(SpaceViewShared, { ...props });
     case "ios-phone":
-      return /* @__PURE__ */ jsx24(SpaceViewShared, { ...props });
+      return /* @__PURE__ */ jsx25(SpaceViewShared, { ...props });
     case "macos":
-      return /* @__PURE__ */ jsx24(SpaceViewShared, { ...props });
+      return /* @__PURE__ */ jsx25(SpaceViewShared, { ...props });
     case "tvos":
     case "android":
     default:
-      return /* @__PURE__ */ jsx24(SpaceViewShared, { ...props });
+      return /* @__PURE__ */ jsx25(SpaceViewShared, { ...props });
   }
 }
 
@@ -3037,7 +3278,7 @@ 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 Pressable12, StyleSheet as StyleSheet21, Text as Text15, TextInput as TextInput2, View as View20 } from "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";
 
 // src/components/native-entrance/useEntranceController.ts
 import { useMemo as useMemo14, useSyncExternalStore as useSyncExternalStore4 } from "react";
@@ -3244,26 +3485,26 @@ function useEntranceController({ displayName = "", initialAudioEnabled = false,
 }
 
 // src/components/EntranceView.android.tsx
-import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs19 } 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__ */ jsx25(KeyboardAvoidingView2, { behavior: Platform10.OS === "ios" ? "padding" : "height", style: [styles20.screen, { backgroundColor: theme.colors.background }], children: /* @__PURE__ */ jsxs18(View20, { style: styles20.content, children: [
-    /* @__PURE__ */ jsxs18(View20, { style: styles20.previewContainer, children: [
-      /* @__PURE__ */ jsxs18(View20, { style: [styles20.previewSurface, { backgroundColor: theme.colors.raisedSurface, borderColor: theme.colors.border }], children: [
-        controller.previewStream && controller.videoEnabled ? /* @__PURE__ */ jsx25(RTCView, { mirror: true, objectFit: "cover", streamURL: controller.previewStream.toURL(), style: styles20.previewVideo, zOrder: 0 }) : /* @__PURE__ */ jsx25(View20, { style: [styles20.avatarContainer, { backgroundColor: theme.colors.insetSurface }], children: /* @__PURE__ */ jsx25(FaceAvatar, { name: controller.displayName, size: 140, textSize: 52 }) }),
-        onCancel ? /* @__PURE__ */ jsx25(Pressable12, { 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__ */ jsx25(HugeiconsIcon11, { icon: ArrowLeft01Icon, size: 22, color: theme.colors.foreground }) }) : null
+  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
       ] }),
-      controller.previewError && controller.videoEnabled ? /* @__PURE__ */ jsx25(Text15, { style: styles20.previewError, children: controller.previewError }) : null,
-      controller.simulatorMediaDisabled ? /* @__PURE__ */ jsx25(Text15, { style: styles20.previewHint, children: getIosSimulatorMediaMessage() }) : 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
     ] }),
-    /* @__PURE__ */ jsxs18(View20, { style: [styles20.sheetContainer, { backgroundColor: theme.colors.card, borderColor: theme.colors.border, shadowColor: theme.colors.darkCanvas }], children: [
-      /* @__PURE__ */ jsx25(View20, { style: styles20.sheetHandle }),
-      /* @__PURE__ */ jsx25(View20, { style: styles20.sheetHeader, children: /* @__PURE__ */ jsx25(Text15, { style: [styles20.spaceName, { color: theme.colors.foreground }], numberOfLines: 1, children: spaceName }) }),
-      /* @__PURE__ */ jsxs18(View20, { style: [styles20.inputCard, { backgroundColor: theme.colors.surface, borderColor: controller.isInputFocused ? theme.colors.ring : theme.colors.border }], children: [
-        /* @__PURE__ */ jsx25(HugeiconsIcon11, { icon: UserIcon2, size: 18, color: controller.isInputFocused ? theme.colors.primary : theme.colors.mutedForeground, style: styles20.inputIcon }),
-        /* @__PURE__ */ jsx25(
+    /* @__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,
           {
             onChangeText: controller.setDisplayName,
@@ -3279,28 +3520,28 @@ function EntranceViewAndroid({ spaceName, error, joinDisabled = false, onCancel,
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs18(View20, { style: styles20.mediaRow, children: [
-        /* @__PURE__ */ jsx25(
-          Pressable12,
+      /* @__PURE__ */ jsxs19(View20, { style: styles20.mediaRow, children: [
+        /* @__PURE__ */ jsx26(
+          Pressable13,
           {
             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__ */ jsx25(HugeiconsIcon11, { icon: controller.audioEnabled ? Mic01Icon4 : MicOff01Icon7, size: 24, color: theme.colors.primaryForeground })
+            children: /* @__PURE__ */ jsx26(HugeiconsIcon11, { icon: controller.audioEnabled ? Mic01Icon4 : MicOff01Icon7, size: 24, color: theme.colors.primaryForeground })
           }
         ),
-        /* @__PURE__ */ jsx25(
-          Pressable12,
+        /* @__PURE__ */ jsx26(
+          Pressable13,
           {
             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__ */ jsx25(HugeiconsIcon11, { icon: controller.videoEnabled ? Video01Icon5 : VideoOffIcon4, size: 24, color: theme.colors.primaryForeground })
+            children: /* @__PURE__ */ jsx26(HugeiconsIcon11, { icon: controller.videoEnabled ? Video01Icon5 : VideoOffIcon4, size: 24, color: theme.colors.primaryForeground })
           }
         )
       ] }),
-      error ? /* @__PURE__ */ jsx25(Text15, { style: [styles20.globalError, { color: theme.colors.error }], children: error }) : null,
-      /* @__PURE__ */ jsx25(Pressable12, { 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__ */ jsx25(Text15, { style: [styles20.joinButtonText, { color: theme.colors.primaryForeground }], children: controller.isSubmitting || joinDisabled ? "Joining..." : "Enter Space" }) })
+      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" }) })
     ] })
   ] }) });
 }
@@ -3489,7 +3730,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 Pressable13, StyleSheet as StyleSheet22, Text as Text16, TextInput as TextInput3, View as View21, Animated, ActivityIndicator as ActivityIndicator2 } from "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";
 
 // src/components/native-animation-controller.ts
 function createAnimationRefController(createAnimations) {
@@ -3519,24 +3760,24 @@ function createAnimationRefController(createAnimations) {
 }
 
 // src/components/EntranceView.ios-pad.tsx
-import { useRef as useRef4 } from "react";
-import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+import { useRef as useRef5 } from "react";
+import { jsx as jsx27, jsxs as jsxs20 } 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 = useRef4(new Animated.Value(0)).current;
-  const islandAnim = useRef4(new Animated.Value(0)).current;
-  const animationRef = useRef4(null);
+  const entryAnim = useRef5(new Animated2.Value(0)).current;
+  const islandAnim = useRef5(new Animated2.Value(0)).current;
+  const animationRef = useRef5(null);
   const attachEntryAnimation = animationRef.current ?? (animationRef.current = createAnimationRefController(() => [
-    Animated.stagger(300, [
-      Animated.spring(entryAnim, {
+    Animated2.stagger(300, [
+      Animated2.spring(entryAnim, {
         toValue: 1,
         tension: 20,
         friction: 8,
         useNativeDriver: true
       }),
-      Animated.spring(islandAnim, {
+      Animated2.spring(islandAnim, {
         toValue: 1,
         tension: 25,
         friction: 9,
@@ -3547,20 +3788,20 @@ 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__ */ jsxs19(KeyboardAvoidingView3, { behavior: Platform11.OS === "ios" ? "padding" : "height", style: [styles21.screen, { backgroundColor: theme.colors.background }], children: [
-    /* @__PURE__ */ jsxs19(View21, { style: [styles21.immersiveContainer, { backgroundColor: theme.colors.darkCanvas }], children: [
-      previewStreamURL ? /* @__PURE__ */ jsx26(RtcVideoView, { mirror: true, objectFit: "cover", streamURL: previewStreamURL, style: styles21.fullScreenVideo, zOrder: -1 }) : /* @__PURE__ */ jsx26(View21, { style: [styles21.immersiveAvatarContainer, { backgroundColor: theme.colors.background }], children: /* @__PURE__ */ jsx26(FaceAvatar, { name: controller.displayName, size: 200, textSize: 80 }) }),
-      showPreview ? /* @__PURE__ */ jsx26(View21, { style: styles21.frostOverlay }) : 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
     ] }),
-    /* @__PURE__ */ jsxs19(View21, { style: styles21.hudLayer, children: [
-      /* @__PURE__ */ jsxs19(View21, { style: styles21.topHud, children: [
-        onCancel ? /* @__PURE__ */ jsx26(Pressable13, { 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__ */ jsx26(HugeiconsIcon12, { icon: ArrowLeft01Icon2, size: 22, color: theme.colors.foreground }) }) : null,
-        /* @__PURE__ */ jsx26(View21, { style: styles21.spaceInfo, children: /* @__PURE__ */ jsx26(Text16, { style: [styles21.spaceTitle, { color: theme.colors.foreground }], numberOfLines: 1, children: spaceName }) }),
-        /* @__PURE__ */ jsx26(View21, { style: styles21.topHudSpacer })
+    /* @__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__ */ jsx26(View21, { style: styles21.flexFill }),
-      /* @__PURE__ */ jsxs19(
-        Animated.View,
+      /* @__PURE__ */ jsx27(View21, { style: styles21.flexFill }),
+      /* @__PURE__ */ jsxs20(
+        Animated2.View,
         {
           ref: attachEntryAnimation,
           style: [
@@ -3571,10 +3812,10 @@ function EntranceViewIosPad({ spaceName, error, joinDisabled = false, onCancel,
             }
           ],
           children: [
-            /* @__PURE__ */ jsxs19(View21, { style: [styles21.launchPad, { backgroundColor: theme.colors.card, borderColor: theme.colors.border, shadowColor: theme.colors.darkCanvas }], children: [
-              /* @__PURE__ */ jsxs19(View21, { style: styles21.mediaGroup, children: [
-                /* @__PURE__ */ jsx26(
-                  Pressable13,
+            /* @__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,
                   {
                     accessibilityLabel: controller.audioEnabled ? "Mute microphone" : "Unmute microphone",
                     accessibilityRole: "button",
@@ -3582,11 +3823,11 @@ function EntranceViewIosPad({ spaceName, error, joinDisabled = false, onCancel,
                     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__ */ jsx26(HugeiconsIcon12, { icon: controller.audioEnabled ? Mic01Icon5 : MicOff01Icon8, size: 22, color: theme.colors.primaryForeground })
+                    children: /* @__PURE__ */ jsx27(HugeiconsIcon12, { icon: controller.audioEnabled ? Mic01Icon5 : MicOff01Icon8, size: 22, color: theme.colors.primaryForeground })
                   }
                 ),
-                /* @__PURE__ */ jsx26(
-                  Pressable13,
+                /* @__PURE__ */ jsx27(
+                  Pressable14,
                   {
                     accessibilityLabel: controller.videoEnabled ? "Turn camera off" : "Turn camera on",
                     accessibilityRole: "button",
@@ -3594,13 +3835,13 @@ function EntranceViewIosPad({ spaceName, error, joinDisabled = false, onCancel,
                     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__ */ jsx26(HugeiconsIcon12, { icon: controller.videoEnabled ? Video01Icon6 : VideoOffIcon5, size: 22, color: theme.colors.primaryForeground })
+                    children: /* @__PURE__ */ jsx27(HugeiconsIcon12, { icon: controller.videoEnabled ? Video01Icon6 : VideoOffIcon5, size: 22, color: theme.colors.primaryForeground })
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx26(View21, { style: styles21.islandDivider }),
-              /* @__PURE__ */ jsxs19(View21, { style: [styles21.identityArea, { backgroundColor: theme.colors.surface, borderColor: controller.isInputFocused ? theme.colors.ring : theme.colors.border }, controller.isInputFocused && styles21.identityAreaFocused], children: [
-                /* @__PURE__ */ jsx26(
+              /* @__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,
                   {
                     accessibilityLabel: "Your name",
@@ -3616,10 +3857,10 @@ function EntranceViewIosPad({ spaceName, error, joinDisabled = false, onCancel,
                     onSubmitEditing: controller.handleJoin
                   }
                 ),
-                controller.displayName.length > 0 && /* @__PURE__ */ jsx26(Pressable13, { accessibilityLabel: "Clear name", accessibilityRole: "button", onPress: () => controller.setDisplayName(""), style: styles21.clearAction, children: /* @__PURE__ */ jsx26(HugeiconsIcon12, { icon: CancelCircleIcon2, size: 18, color: theme.colors.mutedForeground }) })
+                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 }) })
               ] }),
-              /* @__PURE__ */ jsx26(
-                Pressable13,
+              /* @__PURE__ */ jsx27(
+                Pressable14,
                 {
                   accessibilityLabel: "Enter Space",
                   accessibilityRole: "button",
@@ -3638,12 +3879,12 @@ function EntranceViewIosPad({ spaceName, error, joinDisabled = false, onCancel,
                     pressed && canJoin && styles21.pressed,
                     controller.isSubmitting && styles21.disabled
                   ],
-                  children: controller.isSubmitting ? /* @__PURE__ */ jsx26(ActivityIndicator2, { color: theme.colors.primaryForeground, size: "small" }) : /* @__PURE__ */ jsx26(HugeiconsIcon12, { icon: ArrowRight02Icon, size: 28, color: canJoin ? theme.colors.primaryForeground : theme.colors.mutedForeground })
+                  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 })
                 }
               )
             ] }),
-            error ? /* @__PURE__ */ jsx26(Text16, { style: [styles21.immersiveError, { color: theme.colors.error }], children: error }) : null,
-            controller.simulatorMediaDisabled && /* @__PURE__ */ jsx26(Text16, { style: [styles21.simulatorHintText, { color: theme.colors.mutedForeground }], children: getIosSimulatorMediaMessage() })
+            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() })
           ]
         }
       )
@@ -3811,27 +4052,27 @@ 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 Pressable14, StyleSheet as StyleSheet23, Text as Text17, TextInput as TextInput4, View as View22 } from "react-native";
-import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+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";
 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__ */ jsx27(KeyboardAvoidingView4, { behavior: Platform12.OS === "ios" ? "padding" : "height", style: [styles22.screen, { backgroundColor: theme.colors.background }], children: /* @__PURE__ */ jsxs20(View22, { style: styles22.content, children: [
-    /* @__PURE__ */ jsxs20(View22, { style: styles22.previewContainer, children: [
-      /* @__PURE__ */ jsxs20(View22, { style: [styles22.previewSurface, { backgroundColor: theme.colors.raisedSurface, borderColor: theme.colors.border }], children: [
-        controller.previewStream && controller.videoEnabled ? /* @__PURE__ */ jsx27(RTCView, { mirror: true, objectFit: "cover", streamURL: controller.previewStream.toURL(), style: styles22.previewVideo, zOrder: 0 }) : /* @__PURE__ */ jsx27(View22, { style: [styles22.avatarContainer, { backgroundColor: theme.colors.insetSurface }], children: /* @__PURE__ */ jsx27(FaceAvatar, { name: controller.displayName, size: 140, textSize: 52 }) }),
-        onCancel ? /* @__PURE__ */ jsx27(Pressable14, { 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__ */ jsx27(HugeiconsIcon13, { icon: ArrowLeft01Icon3, size: 22, color: theme.colors.foreground }) }) : null
+  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
       ] }),
-      controller.previewError && controller.videoEnabled ? /* @__PURE__ */ jsx27(Text17, { style: styles22.previewError, children: controller.previewError }) : null,
-      controller.simulatorMediaDisabled ? /* @__PURE__ */ jsx27(Text17, { style: styles22.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__ */ jsxs20(View22, { style: [styles22.sheetContainer, { backgroundColor: theme.colors.card, borderColor: theme.colors.border, shadowColor: theme.colors.darkCanvas }], children: [
-      /* @__PURE__ */ jsx27(View22, { style: styles22.sheetHandle }),
-      /* @__PURE__ */ jsx27(View22, { style: styles22.sheetHeader, children: /* @__PURE__ */ jsx27(Text17, { style: [styles22.spaceName, { color: theme.colors.foreground }], numberOfLines: 1, children: spaceName }) }),
-      /* @__PURE__ */ jsxs20(View22, { style: [styles22.inputCard, { backgroundColor: theme.colors.surface, borderColor: controller.isInputFocused ? theme.colors.ring : theme.colors.border }], children: [
-        /* @__PURE__ */ jsx27(HugeiconsIcon13, { icon: UserIcon3, size: 18, color: controller.isInputFocused ? theme.colors.primary : theme.colors.mutedForeground, style: styles22.inputIcon }),
-        /* @__PURE__ */ jsx27(
+    /* @__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,
           {
             onChangeText: controller.setDisplayName,
@@ -3847,28 +4088,28 @@ function EntranceViewIosPhone({ spaceName, error, joinDisabled = false, onCancel
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs20(View22, { style: styles22.mediaRow, children: [
-        /* @__PURE__ */ jsx27(
-          Pressable14,
+      /* @__PURE__ */ jsxs21(View22, { style: styles22.mediaRow, children: [
+        /* @__PURE__ */ jsx28(
+          Pressable15,
           {
             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__ */ jsx27(HugeiconsIcon13, { icon: controller.audioEnabled ? Mic01Icon6 : MicOff01Icon9, size: 24, color: theme.colors.primaryForeground })
+            children: /* @__PURE__ */ jsx28(HugeiconsIcon13, { icon: controller.audioEnabled ? Mic01Icon6 : MicOff01Icon9, size: 24, color: theme.colors.primaryForeground })
           }
         ),
-        /* @__PURE__ */ jsx27(
-          Pressable14,
+        /* @__PURE__ */ jsx28(
+          Pressable15,
           {
             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__ */ jsx27(HugeiconsIcon13, { icon: controller.videoEnabled ? Video01Icon7 : VideoOffIcon6, size: 24, color: theme.colors.primaryForeground })
+            children: /* @__PURE__ */ jsx28(HugeiconsIcon13, { icon: controller.videoEnabled ? Video01Icon7 : VideoOffIcon6, size: 24, color: theme.colors.primaryForeground })
           }
         )
       ] }),
-      error ? /* @__PURE__ */ jsx27(Text17, { style: [styles22.globalError, { color: theme.colors.error }], children: error }) : null,
-      /* @__PURE__ */ jsx27(Pressable14, { 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__ */ jsx27(Text17, { style: [styles22.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" }) })
     ] })
   ] }) });
 }
@@ -4055,8 +4296,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 Pressable15, StyleSheet as StyleSheet24, Text as Text18, TextInput as TextInput5, View as View23 } from "react-native";
-import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+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";
 function EntranceViewMacos({ spaceName, error, joinDisabled = false, onCancel, ...props }) {
   const controller = useEntranceController({ ...props, joinDisabled });
   const theme = useNativeTheme();
@@ -4065,21 +4306,21 @@ 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__ */ jsx28(KeyboardAvoidingView5, { behavior: Platform13.OS === "ios" ? "padding" : "height", style: [styles23.screen, { backgroundColor: theme.colors.background }], children: /* @__PURE__ */ jsxs21(View23, { style: styles23.content, children: [
-    /* @__PURE__ */ jsxs21(View23, { style: styles23.previewContainer, children: [
-      /* @__PURE__ */ jsxs21(View23, { style: [styles23.previewSurface, { backgroundColor: theme.colors.raisedSurface, borderColor: theme.colors.border }], children: [
-        previewStreamURL ? /* @__PURE__ */ jsx28(RtcVideoView, { mirror: true, objectFit: "cover", streamURL: previewStreamURL, style: styles23.previewVideo, zOrder: 0 }) : /* @__PURE__ */ jsx28(View23, { style: [styles23.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 }) => [styles23.floatingBack, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }, pressed && styles23.topIconButtonPressed], children: /* @__PURE__ */ jsx28(HugeiconsIcon14, { icon: ArrowLeft01Icon4, size: 22, color: theme.colors.foreground }) }) : null
+  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
       ] }),
-      previewStatusMessage ? /* @__PURE__ */ jsx28(Text18, { style: styles23.previewError, children: previewStatusMessage }) : null,
-      controller.simulatorMediaDisabled ? /* @__PURE__ */ jsx28(Text18, { style: styles23.previewHint, children: getIosSimulatorMediaMessage() }) : null
+      previewStatusMessage ? /* @__PURE__ */ jsx29(Text18, { style: styles23.previewError, children: previewStatusMessage }) : null,
+      controller.simulatorMediaDisabled ? /* @__PURE__ */ jsx29(Text18, { style: styles23.previewHint, children: getIosSimulatorMediaMessage() }) : null
     ] }),
-    /* @__PURE__ */ jsxs21(View23, { style: [styles23.sheetContainer, { backgroundColor: theme.colors.card, borderColor: theme.colors.border, shadowColor: theme.colors.darkCanvas }], children: [
-      /* @__PURE__ */ jsx28(View23, { style: styles23.sheetHandle }),
-      /* @__PURE__ */ jsx28(View23, { style: styles23.sheetHeader, children: /* @__PURE__ */ jsx28(Text18, { style: [styles23.spaceName, { color: theme.colors.foreground }], numberOfLines: 1, children: spaceName }) }),
-      /* @__PURE__ */ jsxs21(View23, { style: [styles23.inputCard, { backgroundColor: theme.colors.surface, borderColor: controller.isInputFocused ? theme.colors.ring : theme.colors.border }], children: [
-        /* @__PURE__ */ jsx28(HugeiconsIcon14, { icon: UserIcon4, size: 18, color: controller.isInputFocused ? theme.colors.primary : theme.colors.mutedForeground, style: styles23.inputIcon }),
-        /* @__PURE__ */ jsx28(
+    /* @__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,
           {
             onChangeText: controller.setDisplayName,
@@ -4095,28 +4336,28 @@ function EntranceViewMacos({ spaceName, error, joinDisabled = false, onCancel, .
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs21(View23, { style: styles23.mediaRow, children: [
-        /* @__PURE__ */ jsx28(
-          Pressable15,
+      /* @__PURE__ */ jsxs22(View23, { style: styles23.mediaRow, children: [
+        /* @__PURE__ */ jsx29(
+          Pressable16,
           {
             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__ */ jsx28(HugeiconsIcon14, { icon: controller.audioEnabled ? Mic01Icon7 : MicOff01Icon10, size: 24, color: theme.colors.primaryForeground })
+            children: /* @__PURE__ */ jsx29(HugeiconsIcon14, { icon: controller.audioEnabled ? Mic01Icon7 : MicOff01Icon10, size: 24, color: theme.colors.primaryForeground })
           }
         ),
-        /* @__PURE__ */ jsx28(
-          Pressable15,
+        /* @__PURE__ */ jsx29(
+          Pressable16,
           {
             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__ */ jsx28(HugeiconsIcon14, { icon: controller.videoEnabled ? Video01Icon8 : VideoOffIcon7, size: 24, color: theme.colors.primaryForeground })
+            children: /* @__PURE__ */ jsx29(HugeiconsIcon14, { icon: controller.videoEnabled ? Video01Icon8 : VideoOffIcon7, size: 24, color: theme.colors.primaryForeground })
           }
         )
       ] }),
-      error ? /* @__PURE__ */ jsx28(Text18, { style: [styles23.globalError, { color: theme.colors.error }], children: error }) : null,
-      /* @__PURE__ */ jsx28(Pressable15, { 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__ */ jsx28(Text18, { style: [styles23.joinButtonText, { color: theme.colors.primaryForeground }], children: controller.isSubmitting || joinDisabled ? "Joining..." : "Enter Space" }) })
+      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" }) })
     ] })
   ] }) });
 }
@@ -4297,34 +4538,34 @@ var styles23 = StyleSheet24.create({
 });
 
 // src/components/EntranceView.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function EntranceView(props) {
   switch (resolvePlatformVariant()) {
     case "ios-pad":
-      return /* @__PURE__ */ jsx29(EntranceViewIosPad, { ...props });
+      return /* @__PURE__ */ jsx30(EntranceViewIosPad, { ...props });
     case "ios-phone":
-      return /* @__PURE__ */ jsx29(EntranceViewIosPhone, { ...props });
+      return /* @__PURE__ */ jsx30(EntranceViewIosPhone, { ...props });
     case "macos":
-      return /* @__PURE__ */ jsx29(EntranceViewMacos, { ...props });
+      return /* @__PURE__ */ jsx30(EntranceViewMacos, { ...props });
     case "tvos":
     case "android":
     default:
-      return /* @__PURE__ */ jsx29(EntranceViewAndroid, { ...props });
+      return /* @__PURE__ */ jsx30(EntranceViewAndroid, { ...props });
   }
 }
 
 // src/components/Entrance.tsx
 import { Image as Image3 } from "react-native";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function Entrance({ spaceName, logoUrl, defaultDisplayName, defaults, error, joining = false, onCancel, onJoin }) {
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     EntranceView,
     {
       error,
       initialAudioEnabled: defaults?.microphone ?? true,
       initialVideoEnabled: defaults?.camera ?? true,
       joinDisabled: joining,
-      logo: logoUrl ? /* @__PURE__ */ jsx30(Image3, { accessibilityLabel: "Chalk", source: { uri: logoUrl }, style: { height: 32, width: 120 } }) : void 0,
+      logo: logoUrl ? /* @__PURE__ */ jsx31(Image3, { accessibilityLabel: "Chalk", source: { uri: logoUrl }, style: { height: 32, width: 120 } }) : /* @__PURE__ */ jsx31(Logo, { height: 32, variant: "wordmark" }),
       onCancel,
       onJoin: ({ displayName, microphoneEnabled, cameraEnabled }) => void onJoin({ displayName, microphone: microphoneEnabled, camera: cameraEnabled }),
       spaceName,
@@ -4334,14 +4575,14 @@ function Entrance({ spaceName, logoUrl, defaultDisplayName, defaults, error, joi
 }
 
 // src/components/Chalk.tsx
-import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
 function Chalk(props) {
   const suppliedClient = props.client;
   const space = props.space;
   const getAccess = props.getAccess;
-  const getAccessRef = useRef5(getAccess);
+  const getAccessRef = useRef6(getAccess);
   getAccessRef.current = getAccess;
-  const defaults = useRef5(props.defaults).current;
+  const defaults = useRef6(props.defaults).current;
   const getLatestAccess = useCallback9((...args) => {
     const currentGetAccess = getAccessRef.current;
     if (!currentGetAccess) throw new Error("Chalk requires getAccess when it creates the SpaceClient.");
@@ -4357,27 +4598,27 @@ function Chalk(props) {
     [getLatestAccess, space, suppliedClient]
   );
   const client = suppliedClient ?? ownedClient;
-  useEffect8(() => {
+  useEffect9(() => {
     if (!ownedClient) return;
     return () => {
       void ownedClient.leave().catch(() => void 0).finally(() => ownedClient.dispose());
     };
   }, [ownedClient]);
-  return /* @__PURE__ */ jsx31(NativeAppearanceProvider, { initialAppearance: { palette: props.theme?.palette, texture: props.theme?.texture }, children: /* @__PURE__ */ jsx31(AppearanceThemeBridge, { theme: props.theme, children: /* @__PURE__ */ jsx31(ChalkProvider, { client, children: /* @__PURE__ */ jsx31(SpaceExperience, { ...props }) }) }) });
+  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 }) }) }) });
 }
 function AppearanceThemeBridge({ children, theme }) {
   const { appearance } = useNativeAppearance();
-  return /* @__PURE__ */ jsx31(NativeThemeProvider, { appearance, theme, children });
+  return /* @__PURE__ */ jsx32(NativeThemeProvider, { appearance, theme, children });
 }
 function SpaceExperience(props) {
   const client = useSpaceClient();
   const connection = useConnection();
-  const previousStatus = useRef5(connection.status);
-  const hasObservedStatus = useRef5(false);
-  const hasBeenLive = useRef5(connection.status === "live" || connection.status === "reconnecting");
-  const autoJoinAttempted = useRef5(false);
-  const previousClient = useRef5(client);
-  const [joinError, setJoinError] = useState9(null);
+  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);
   if (previousClient.current !== client) {
     previousClient.current = client;
     previousStatus.current = connection.status;
@@ -4402,10 +4643,10 @@ function SpaceExperience(props) {
     autoJoinAttempted.current = true;
     void join(defaultJoinOptions(props));
   }, [join, props]);
-  useEffect8(() => {
+  useEffect9(() => {
     setJoinError(null);
   }, [client]);
-  useEffect8(() => {
+  useEffect9(() => {
     const subscriptions = [
       props.onEpisodeEnded && client.on("episodeEnded", props.onEpisodeEnded),
       props.onParticipantJoined && client.on("participantJoined", props.onParticipantJoined),
@@ -4416,13 +4657,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]);
-  useEffect8(() => {
+  useEffect9(() => {
     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]);
-  useEffect8(() => {
+  useEffect9(() => {
     const previous = previousStatus.current;
     if (hasObservedStatus.current) {
       if (connection.status === "live" && previous !== "live" && previous !== "reconnecting") props.onJoined?.();
@@ -4433,27 +4674,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__ */ jsx31(AppearanceLayer, { children: /* @__PURE__ */ jsx31(Entrance, { defaultDisplayName: props.displayName, defaults: props.defaults, error: joinError ?? void 0, logoUrl: props.logoUrl, onJoin: join, spaceName }) });
+    return /* @__PURE__ */ jsx32(AppearanceLayer, { children: /* @__PURE__ */ jsx32(Entrance, { defaultDisplayName: props.displayName, defaults: props.defaults, error: joinError ?? void 0, logoUrl: props.logoUrl, onJoin: join, spaceName }) });
   }
   if (connection.status === "idle") {
-    return /* @__PURE__ */ jsx31(AppearanceLayer, { children: /* @__PURE__ */ jsx31(SpaceStatus, { message: joinError ?? `Entering ${spaceName}\u2026`, onRetry: joinError ? retryAutomaticJoin : void 0 }) });
+    return /* @__PURE__ */ jsx32(AppearanceLayer, { children: /* @__PURE__ */ jsx32(SpaceStatus, { message: joinError ?? `Entering ${spaceName}\u2026`, onRetry: joinError ? retryAutomaticJoin : void 0 }) });
   }
   if (connection.status === "joining") {
     if (!entrance)
-      return /* @__PURE__ */ jsx31(AppearanceLayer, { children: /* @__PURE__ */ jsx31(SpaceStatus, { message: `Entering ${spaceName}\u2026` }) });
-    return /* @__PURE__ */ jsx31(AppearanceLayer, { children: /* @__PURE__ */ jsx31(Entrance, { defaultDisplayName: props.displayName, defaults: props.defaults, joining: true, logoUrl: props.logoUrl, onJoin: join, spaceName }) });
+      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 }) });
   }
   if (connection.status === "failed") {
     if (!hasBeenLive.current && entrance) {
-      return /* @__PURE__ */ jsx31(AppearanceLayer, { children: /* @__PURE__ */ jsx31(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(Entrance, { defaultDisplayName: props.displayName, defaults: props.defaults, error: connection.lastError?.message ?? "Unable to enter this Space.", logoUrl: props.logoUrl, onJoin: join, spaceName }) });
     }
-    return /* @__PURE__ */ jsx31(AppearanceLayer, { children: /* @__PURE__ */ jsx31(SpaceStatus, { message: connection.lastError?.message ?? "This Space is unavailable.", onRetry: () => void join(defaultJoinOptions(props)) }) });
+    return /* @__PURE__ */ jsx32(AppearanceLayer, { children: /* @__PURE__ */ jsx32(SpaceStatus, { message: connection.lastError?.message ?? "This Space is unavailable.", onRetry: () => void join(defaultJoinOptions(props)) }) });
   }
   if (connection.status === "leaving")
-    return /* @__PURE__ */ jsx31(AppearanceLayer, { children: /* @__PURE__ */ jsx31(SpaceStatus, { message: `Leaving ${spaceName}\u2026` }) });
+    return /* @__PURE__ */ jsx32(AppearanceLayer, { children: /* @__PURE__ */ jsx32(SpaceStatus, { message: `Leaving ${spaceName}\u2026` }) });
   if (connection.status === "left")
-    return /* @__PURE__ */ jsx31(AppearanceLayer, { children: /* @__PURE__ */ jsx31(SpaceStatus, { message: "You have left this Space.", onRetry: () => void join(defaultJoinOptions(props)) }) });
-  return /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx32(AppearanceLayer, { children: /* @__PURE__ */ jsx32(SpaceStatus, { message: "You have left this Space.", onRetry: () => void join(defaultJoinOptions(props)) }) });
+  return /* @__PURE__ */ jsx32(
     NativeSpaceView,
     {
       features: props.features,
@@ -4479,8 +4720,8 @@ function defaultJoinOptions(props) {
 function NativeSpaceView({ features, inviteLink, layout, logoUrl, onLayoutChange, onOpenDiagnostics, pickChatFiles, reconnecting, spaceName }) {
   const client = useSpaceClient();
   const theme = useNativeTheme();
-  return /* @__PURE__ */ jsxs22(View24, { style: [styles24.space, { backgroundColor: theme.colors.background }], children: [
-    /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsxs23(View24, { style: [styles24.space, { backgroundColor: theme.colors.background }], children: [
+    /* @__PURE__ */ jsx32(
       SpaceView,
       {
         features,
@@ -4496,21 +4737,21 @@ function NativeSpaceView({ features, inviteLink, layout, logoUrl, onLayoutChange
         spaceName
       }
     ),
-    /* @__PURE__ */ jsx31(NativeTextureOverlay, {})
+    /* @__PURE__ */ jsx32(NativeTextureOverlay, {})
   ] });
 }
 function AppearanceLayer({ children }) {
   const theme = useNativeTheme();
-  return /* @__PURE__ */ jsxs22(View24, { style: [styles24.appearanceLayer, { backgroundColor: theme.colors.background }], children: [
+  return /* @__PURE__ */ jsxs23(View24, { style: [styles24.appearanceLayer, { backgroundColor: theme.colors.background }], children: [
     children,
-    /* @__PURE__ */ jsx31(NativeTextureOverlay, {})
+    /* @__PURE__ */ jsx32(NativeTextureOverlay, {})
   ] });
 }
 function SpaceStatus({ message, onRetry }) {
   const theme = useNativeTheme();
-  return /* @__PURE__ */ jsxs22(View24, { accessibilityLiveRegion: "polite", style: [styles24.status, { backgroundColor: theme.colors.background }], children: [
-    /* @__PURE__ */ jsx31(Text19, { style: [styles24.statusText, { color: theme.colors.foreground }], children: message }),
-    onRetry ? /* @__PURE__ */ jsx31(Pressable16, { accessibilityRole: "button", onPress: onRetry, style: [styles24.retry, { backgroundColor: theme.colors.primary }], children: /* @__PURE__ */ jsx31(Text19, { style: [styles24.retryText, { color: theme.colors.primaryForeground }], children: "Try again" }) }) : null
+  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
   ] });
 }
 var styles24 = StyleSheet25.create({
@@ -4541,6 +4782,7 @@ export {
   useReactions,
   useWhiteboard,
   useCan,
+  Logo,
   Entrance,
   Chalk,
   buildChalkInviteLink