@q9labsai/chalk-react-native 4.1.17 → 5.0.1

package/dist/index.js

@@ -1,54 +1,2972 @@
 import {
-  Chalk,
-  ChalkProvider,
-  Entrance,
-  Logo,
-  buildChalkInviteLink,
-  useCan,
-  useChat,
-  useConnection,
-  useMedia,
-  useParticipants,
-  useReactions,
-  useRecording,
-  useSelf,
-  useSpaceClient,
-  useWhiteboard
-} from "./chunk-ITLUHTVS.js";
-import {
-  THEME_PALETTES,
-  THEME_TEXTURES,
-  getThemeMode,
-  isDarkThemePalette,
-  resolveNativeAppearance
-} from "./chunk-5DQ4KBRH.js";
-import {
-  Theme,
-  createNativeTheme
-} from "./chunk-JB4LNWVP.js";
-import "./chunk-2OS7SSXE.js";
-import "./chunk-F3NPRVHO.js";
+  useDevScenario
+} from "./chunk-IHE6EA3T.js";
 import {
   extractSpaceInviteFromLink,
   getClipboardInviteSuggestion,
   parseSpaceInviteLink
 } from "./chunk-4L5GXJ36.js";
+import {
+  BottomSheet,
+  ChalkText,
+  CopyButton,
+  DeviceLayoutProvider,
+  FaceAvatar,
+  Icon,
+  IconButton,
+  Limbo,
+  Menu,
+  MenuItem,
+  MenuSection,
+  PillButton,
+  Portal,
+  PortalHost,
+  PortalProvider,
+  STAGE_GAP,
+  SegmentedControl,
+  SheetDragRegion,
+  SheetGroup,
+  SheetRow,
+  Switch,
+  ThemeProvider,
+  ToastProvider,
+  ToastStack,
+  announce,
+  chatOverlays,
+  durations,
+  easings,
+  elevations,
+  fileKindColors,
+  fixed,
+  fontFamilies,
+  frameRegions,
+  haptics,
+  pressScale,
+  radii,
+  sizes,
+  timings,
+  type,
+  useBackHandler,
+  useDeviceLayout,
+  usePortalCount,
+  usePressAnimation,
+  useTheme,
+  useToasts,
+  viewer
+} from "./chunk-OIBT2FNM.js";
+import {
+  useMeasuredRef
+} from "./chunk-GYVZSOGQ.js";
+
+// src/frame/Chalk.tsx
+import { useEffect as useEffect20 } from "react";
+import { StyleSheet as StyleSheet24 } from "react-native";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { SafeAreaProvider as SafeAreaProvider2 } from "react-native-safe-area-context";
+
+// src/context/space-client-context.tsx
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var SpaceClientContext = createContext(null);
+function ChalkProvider({ children, client }) {
+  const value = useMemo(() => client, [client]);
+  return /* @__PURE__ */ jsx(SpaceClientContext.Provider, { value, children });
+}
+function useSpaceClient() {
+  const client = useContext(SpaceClientContext);
+  if (!client) throw new Error("Chalk hooks must be used within a ChalkProvider.");
+  return client;
+}
+
+// src/sounds/sounds.ts
+import { createAudioPlayer } from "expo-audio";
+import error from "./error-YOPTEH5N.wav";
+import hand from "./hand-DFWVXPH2.wav";
+import join from "./join-Z6RL5AHE.wav";
+import knock from "./knock-4VBQSHK4.wav";
+import leave from "./leave-MQLZOWQD.wav";
+import message from "./message-6Y6WJGTB.wav";
+import mute from "./mute-H5SJFXVI.wav";
+import recording from "./recording-Q4GB77Y4.wav";
+import test from "./test-VD2KAM4D.wav";
+import unmute from "./unmute-2XR2LICU.wav";
+var sources = { join, leave, knock, message, hand, mute, unmute, recording, error, test };
+var players = /* @__PURE__ */ new Map();
+function playSound(name, enabled) {
+  if (!enabled && name !== "test") return;
+  let player = players.get(name);
+  if (!player) {
+    player = createAudioPlayer(sources[name], { keepAudioSessionActive: true });
+    players.set(name, player);
+  }
+  void player.seekTo(0);
+  player.play();
+}
+function releaseSounds() {
+  for (const player of players.values()) player.remove();
+  players.clear();
+}
+
+// src/stage/stage-view.tsx
+import { createContext as createContext2, useContext as useContext2, useEffect, useMemo as useMemo2, useState } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var StageViewContext = createContext2(null);
+function StageViewProvider({ children }) {
+  const [layout, setLayout] = useState("spotlight");
+  const [pinned, setPinned] = useState(null);
+  const [mirror, setMirror] = useState(true);
+  const dev = useDevScenario();
+  useEffect(() => {
+    if (dev.layout) setLayout(dev.layout);
+    if (dev.pinned) setPinned(dev.pinned);
+  }, [dev]);
+  const value = useMemo2(
+    () => ({
+      layout,
+      pinned,
+      mirror,
+      setLayout: (next) => {
+        setLayout(next);
+        if (next === "grid") setPinned(null);
+      },
+      togglePin: (participantId) => {
+        if (layout === "grid") {
+          setLayout("spotlight");
+          setPinned(participantId);
+          return;
+        }
+        setPinned((current) => current === participantId ? null : participantId);
+      },
+      showContent: () => {
+        setLayout("spotlight");
+        setPinned(null);
+      },
+      setMirror
+    }),
+    [layout, mirror, pinned]
+  );
+  return /* @__PURE__ */ jsx2(StageViewContext.Provider, { value, children });
+}
+function useStageView() {
+  const view = useContext2(StageViewContext);
+  if (!view) throw new Error("useStageView must be used inside <Chalk>.");
+  return view;
+}
+
+// src/frame/CallFrame.tsx
+import { useCallback as useCallback15, useEffect as useEffect19, useMemo as useMemo12, useRef as useRef13, useState as useState13 } from "react";
+import { Pressable as Pressable15, StatusBar, StyleSheet as StyleSheet23, View as View22 } from "react-native";
+import Animated12, { useAnimatedStyle as useAnimatedStyle7, useSharedValue as useSharedValue5, withTiming as withTiming7 } from "react-native-reanimated";
+
+// src/components/useAndroidCallService.ts
+import { useEffect as useEffect2 } from "react";
+import { AppState } from "react-native";
+
+// src/android/call-service.ts
+import { NativeModules, Platform } from "react-native";
+var nativeModule = NativeModules.ChalkCallService;
+async function startAndroidCallService() {
+  if (Platform.OS !== "android" || !nativeModule) return false;
+  return nativeModule.start();
+}
+async function stopAndroidCallService() {
+  if (Platform.OS !== "android" || !nativeModule) return;
+  await nativeModule.stop();
+}
+
+// src/hooks/space-hooks.ts
+import { useCallback, useSyncExternalStore } from "react";
+function useSpaceSlice(slice) {
+  const client = useSpaceClient();
+  const subscribe = useCallback((listener) => client.subscribe(listener), [client]);
+  const getSnapshot = useCallback(() => client.getSnapshot()[slice], [client, slice]);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+function useConnection() {
+  return useSpaceSlice("connection");
+}
+function useSelf() {
+  return useSpaceSlice("self");
+}
+function useParticipants() {
+  return useSpaceSlice("participants");
+}
+function useMedia() {
+  return useSpaceSlice("media");
+}
+function useChat() {
+  return useSpaceSlice("chat");
+}
+function useReactions() {
+  return useSpaceSlice("reactions");
+}
+function useRecording() {
+  return useSpaceSlice("recording");
+}
+function useWhiteboard() {
+  return useSpaceSlice("whiteboard");
+}
+function useCan(capability) {
+  return useSelf().can(capability);
+}
+
+// src/components/useAndroidCallService.ts
+function useAndroidCallService() {
+  const connection = useConnection();
+  const media = useMedia();
+  const inCall = connection.status === "live" || connection.status === "reconnecting";
+  const microphoneOn = media.local.microphone.state === "enabled";
+  const cameraOn = media.local.camera.state === "enabled";
+  useEffect2(() => {
+    if (!inCall) return;
+    const start = () => {
+      startAndroidCallService().catch((error2) => {
+        console.warn("Failed to start the Android call service", error2);
+      });
+    };
+    start();
+    const subscription = AppState.addEventListener("change", (state) => {
+      if (state === "active") start();
+    });
+    return () => subscription.remove();
+  }, [inCall, microphoneOn, cameraOn]);
+  useEffect2(() => {
+    if (!inCall) return;
+    return () => {
+      stopAndroidCallService().catch((error2) => {
+        console.warn("Failed to stop the Android call service", error2);
+      });
+    };
+  }, [inCall]);
+}
+
+// src/dock/Dock.tsx
+import { memo, useCallback as useCallback3, useEffect as useEffect4, useRef, useState as useState3 } from "react";
+import { StyleSheet, View } from "react-native";
+
+// src/dock/audio-route.ts
+import { useCallback as useCallback2, useEffect as useEffect3, useState as useState2 } from "react";
+import { NativeEventEmitter, NativeModules as NativeModules2, Platform as Platform2 } from "react-native";
+var nativeModule2 = NativeModules2.ChalkAudioRouteModule;
+var emitter = nativeModule2 ? new NativeEventEmitter(nativeModule2) : null;
+var routeIcons = { earpiece: "earpiece", speaker: "vol", bluetooth: "buds", wired: "buds" };
+function routeName(route) {
+  if (route.kind === "speaker") return "Speaker";
+  if (route.kind === "earpiece") return Platform2.OS === "ios" ? "iPhone" : "Phone";
+  return route.name;
+}
+function useAudioOutput() {
+  const scenario = useDevScenario().audioRoutes;
+  const [state, setState] = useState2(null);
+  const [scenarioSelected, setScenarioSelected] = useState2(null);
+  useEffect3(() => {
+    if (!nativeModule2 || !emitter) return;
+    let live = true;
+    nativeModule2.getRoutes().then((next) => live && setState(next)).catch(() => void 0);
+    const subscription = emitter.addListener(nativeModule2.eventName, (next) => setState(next));
+    return () => {
+      live = false;
+      subscription.remove();
+    };
+  }, []);
+  const select = useCallback2(async (id) => {
+    if (!nativeModule2) return;
+    setState(await nativeModule2.selectRoute(id));
+  }, []);
+  const routes = scenario ? { ...scenario, selected: scenarioSelected ?? scenario.selected } : state;
+  if (!routes) return null;
+  const current = routes.routes.find((route) => route.id === routes.selected) ?? routes.routes[0];
+  if (!current) return null;
+  return { ...routes, current, select: scenario ? async (id) => setScenarioSelected(id) : select };
+}
+
+// src/dock/RoutePicker.tsx
+import { Platform as Platform3 } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function RoutePicker({ open, onClose, onSelect, output, anchorRef }) {
+  const { colors } = useTheme();
+  if (Platform3.OS === "ios") {
+    return /* @__PURE__ */ jsx3(Menu, { accessibilityLabel: "Audio output", anchorRef, onClose, open, testID: "menu.route", children: output.routes.map((route) => /* @__PURE__ */ jsx3(MenuItem, { checked: route.id === output.selected, icon: routeIcons[route.kind], label: routeName(route), onPress: () => onSelect(route.id), testID: `menu.route.${route.kind}` }, route.id)) });
+  }
+  return /* @__PURE__ */ jsx3(BottomSheet, { accessibilityLabel: "Audio output", onClose, open, returnFocusRef: anchorRef, testID: "sheet.route", title: "Audio output", children: /* @__PURE__ */ jsx3(SheetGroup, { children: output.routes.map((route) => /* @__PURE__ */ jsx3(SheetRow, { end: route.id === output.selected ? /* @__PURE__ */ jsx3(Icon, { color: colors.text, name: "check" }) : null, icon: routeIcons[route.kind], label: routeName(route), onPress: () => onSelect(route.id), testID: `sheet.route.${route.kind}` }, route.id)) }) });
+}
+
+// src/dock/Dock.tsx
+import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
+var Dock = memo(function Dock2({ arrangement, microphoneOn, cameraOn, onToggleMicrophone, onToggleCamera, onOpenMore, onLeave, moreOpen, leaveOpen, moreRef, leaveRef }) {
+  const size = arrangement === "pad" ? 44 : 52;
+  const dockStyle = [styles.dock, arrangement === "pad" ? styles.pad : arrangement === "landscape" ? styles.landscape : styles.portrait];
+  const dockRef = useMeasuredRef("frame.dock", dockStyle);
+  const output = useAudioOutput();
+  return /* @__PURE__ */ jsxs(View, { accessibilityLabel: "Call controls", accessibilityRole: "toolbar", pointerEvents: "box-none", ref: dockRef, style: dockStyle, testID: "frame.dock", children: [
+    /* @__PURE__ */ jsx4(IconButton, { accessibilityLabel: microphoneOn ? "Mute microphone" : "Unmute microphone", icon: microphoneOn ? "mic" : "micOff", off: !microphoneOn, onCanvas: true, onPress: onToggleMicrophone, size, testID: "dock.microphone" }),
+    /* @__PURE__ */ jsx4(IconButton, { accessibilityLabel: cameraOn ? "Turn off camera" : "Turn on camera", icon: cameraOn ? "cam" : "camOff", off: !cameraOn, onCanvas: true, onPress: onToggleCamera, size, testID: "dock.camera" }),
+    output ? /* @__PURE__ */ jsx4(AudioOutputButton, { captioned: arrangement === "portrait", output, size }) : null,
+    /* @__PURE__ */ jsx4(IconButton, { accessibilityLabel: "More options", expanded: moreOpen, icon: "more", onCanvas: true, onPress: onOpenMore, ref: moreRef, size, testID: "dock.more" }),
+    arrangement === "pad" ? /* @__PURE__ */ jsx4(View, { style: styles.gap }) : null,
+    /* @__PURE__ */ jsx4(IconButton, { accessibilityLabel: "Leave call", expanded: leaveOpen, icon: "hang", onPress: onLeave, ref: leaveRef, size, testID: "dock.leave", tone: "danger" })
+  ] });
+});
+function AudioOutputButton({ output, size, captioned }) {
+  const toasts = useToasts();
+  const ref = useRef(null);
+  const [open, setOpen] = useState3(false);
+  const devScenario = useDevScenario();
+  useEffect4(() => {
+    if (devScenario.sheet === "route" || devScenario.menu === "route") setOpen(true);
+  }, [devScenario]);
+  const name = routeName(output.current);
+  const choosing = output.routes.length > 2;
+  const other = output.routes.find((route) => route.id !== output.selected);
+  const select = useCallback3(
+    (id) => {
+      setOpen(false);
+      const route = output.routes.find((candidate) => candidate.id === id);
+      output.select(id).then(() => route && announce(`Audio output: ${routeName(route)}`)).catch(() => toasts.show({ kind: "error", dismissible: true, message: "Couldn't switch the audio output." }));
+    },
+    [output, toasts]
+  );
+  const press = useCallback3(() => {
+    if (choosing) setOpen((was) => !was);
+    else if (other) select(other.id);
+  }, [choosing, other, select]);
+  const hint = choosing || !other ? "Choose output" : output.current.kind === "speaker" ? `Switch to ${routeName(other)}` : "Switch to speaker";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx4(IconButton, { accessibilityLabel: `Audio output: ${name}. ${hint}`, caption: captioned ? name : void 0, expanded: choosing ? open : void 0, icon: routeIcons[output.current.kind], onCanvas: true, onPress: press, ref, size, testID: "dock.route" }),
+    choosing ? /* @__PURE__ */ jsx4(RoutePicker, { anchorRef: ref, onClose: () => setOpen(false), onSelect: select, open, output }) : null
+  ] });
+}
+var styles = StyleSheet.create({
+  dock: { flex: 1, flexDirection: "row", alignItems: "center" },
+  portrait: { justifyContent: "space-between", paddingHorizontal: 20 },
+  landscape: { justifyContent: "center", gap: 14 },
+  pad: { justifyContent: "center", gap: 8 },
+  gap: { width: 8 }
+});
+
+// src/dock/LeaveMenu.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function LeaveMenu({ open, onClose, anchorRef, onLeave, onEnd }) {
+  return /* @__PURE__ */ jsxs2(Menu, { accessibilityLabel: "Leave", anchorRef, onClose, open, testID: "menu.leave", children: [
+    /* @__PURE__ */ jsx5(MenuItem, { label: "Leave call", onPress: onLeave, testID: "menu.leave.leave" }),
+    /* @__PURE__ */ jsx5(MenuItem, { danger: true, label: "End call for everyone", onPress: onEnd, testID: "menu.leave.end" })
+  ] });
+}
+
+// src/dock/MoreSheet.tsx
+import { setStringAsync } from "expo-clipboard";
+import { useCallback as useCallback5, useEffect as useEffect5, useRef as useRef2, useState as useState5 } from "react";
+import { Platform as Platform4, Pressable, Share, StyleSheet as StyleSheet2, Text, View as View2 } from "react-native";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
+
+// src/frame/preferences.tsx
+import { createContext as createContext3, useCallback as useCallback4, useContext as useContext3, useMemo as useMemo3, useState as useState4 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var PreferencesContext = createContext3(null);
+function PreferencesProvider({ colorScheme, onColorSchemeChange, soundsEnabled, onSoundsEnabledChange, children }) {
+  const [ownScheme, setOwnScheme] = useState4("dark");
+  const [ownSounds, setOwnSounds] = useState4(true);
+  const setColorScheme = useCallback4(
+    (scheme) => {
+      setOwnScheme(scheme);
+      onColorSchemeChange?.(scheme);
+    },
+    [onColorSchemeChange]
+  );
+  const setSoundsEnabled = useCallback4(
+    (enabled) => {
+      setOwnSounds(enabled);
+      onSoundsEnabledChange?.(enabled);
+    },
+    [onSoundsEnabledChange]
+  );
+  const value = useMemo3(() => ({ colorScheme: colorScheme ?? ownScheme, setColorScheme, soundsEnabled: soundsEnabled ?? ownSounds, setSoundsEnabled }), [colorScheme, ownScheme, ownSounds, setColorScheme, setSoundsEnabled, soundsEnabled]);
+  return /* @__PURE__ */ jsx6(PreferencesContext.Provider, { value, children: children(value) });
+}
+function usePreferences() {
+  const preferences = useContext3(PreferencesContext);
+  if (!preferences) throw new Error("usePreferences must be used inside <Chalk>.");
+  return preferences;
+}
+
+// src/dock/MoreSheet.tsx
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var REACTIONS = [
+  ["\u{1F44D}", "thumbs up"],
+  ["\u2764\uFE0F", "heart"],
+  ["\u{1F602}", "laughter"],
+  ["\u{1F62E}", "surprise"],
+  ["\u{1F389}", "celebration"],
+  ["\u{1F622}", "sadness"]
+];
+function MoreSheet({ open, onClose, onOpenPeople, onOpenChat, inviteLink, returnFocusRef }) {
+  const client = useSpaceClient();
+  const self = useSelf();
+  const people2 = useParticipants().roster.length;
+  const toasts = useToasts();
+  const { soundsEnabled } = usePreferences();
+  const canRaiseHand = useCan("raiseHand");
+  const canReact = useCan("sendReaction");
+  const fail = useCallback5((message2) => () => toasts.show({ kind: "error", dismissible: true, message: message2 }), [toasts]);
+  const toggleHand = useCallback5(() => {
+    onClose();
+    haptics.handRaise();
+    if (self.handRaised) {
+      client.participants.lowerHand().catch(fail("Couldn't lower your hand."));
+      return;
+    }
+    playSound("hand", soundsEnabled);
+    announce("You raised a hand");
+    client.participants.raiseHand().catch(fail("Couldn't raise your hand."));
+  }, [client, fail, onClose, self.handRaised, soundsEnabled]);
+  const react = useCallback5(
+    (emoji) => {
+      onClose();
+      client.reactions.send(emoji).catch(fail("Couldn't send your reaction."));
+    },
+    [client, fail, onClose]
+  );
+  return /* @__PURE__ */ jsxs3(BottomSheet, { accessibilityLabel: "More options", onClose, open, returnFocusRef, testID: "sheet.more", children: [
+    canRaiseHand || canReact ? /* @__PURE__ */ jsxs3(View2, { accessibilityLabel: "Reactions", accessibilityRole: "toolbar", style: styles2.reactions, children: [
+      canRaiseHand ? /* @__PURE__ */ jsx7(HandButton, { onPress: toggleHand, raised: self.handRaised }) : null,
+      canReact ? REACTIONS.map(([emoji, name], index) => /* @__PURE__ */ jsx7(EmojiButton, { emoji, name, onPress: react, testID: `more.reaction.${index}` }, emoji)) : null
+    ] }) : null,
+    /* @__PURE__ */ jsxs3(SheetGroup, { children: [
+      inviteLink ? /* @__PURE__ */ jsx7(CopyLinkRow, { link: inviteLink }) : null,
+      inviteLink ? /* @__PURE__ */ jsx7(SheetRow, { icon: "iosShare", label: "Share link", onPress: () => shareLink(inviteLink), testID: "more.share" }) : null,
+      /* @__PURE__ */ jsx7(RecordingRow, { onDone: onClose }),
+      /* @__PURE__ */ jsx7(ChatRow, { onPress: onOpenChat }),
+      /* @__PURE__ */ jsx7(SheetRow, { end: /* @__PURE__ */ jsx7(PeopleCount, { count: people2 }), icon: "users", label: "People", onPress: onOpenPeople, testID: "more.people" }),
+      /* @__PURE__ */ jsx7(LayoutRow, {})
+    ] })
+  ] });
+}
+function shareLink(link) {
+  Share.share(Platform4.OS === "ios" ? { url: link } : { message: link }).catch(() => void 0);
+}
+function HandButton({ raised, onPress }) {
+  const { colors } = useTheme();
+  const press = usePressAnimation("pill");
+  const foreground = raised ? fixed.handText : colors.text;
+  return /* @__PURE__ */ jsx7(Pressable, { accessibilityLabel: raised ? "Lower hand" : "Raise hand", accessibilityRole: "button", accessibilityState: { selected: raised }, onPress, onPressIn: press.onPressIn, onPressOut: press.onPressOut, testID: "more.hand", children: /* @__PURE__ */ jsxs3(Animated.View, { style: [styles2.hand, { backgroundColor: raised ? fixed.hand : colors.raised }, press.scaleStyle], children: [
+    /* @__PURE__ */ jsx7(Icon, { color: foreground, name: "hand" }),
+    /* @__PURE__ */ jsx7(ChalkText, { color: foreground, variant: "bodyStrong", children: raised ? "Lower hand" : "Raise hand" })
+  ] }) });
+}
+function EmojiButton({ emoji, name, onPress, testID }) {
+  const { colors } = useTheme();
+  const press = usePressAnimation("small");
+  const { down } = press;
+  const pressed = colors.hover;
+  const background = useAnimatedStyle(() => {
+    "worklet";
+    return { backgroundColor: down.value ? pressed : fixed.transparent };
+  });
+  return /* @__PURE__ */ jsx7(Pressable, { accessibilityLabel: `Send ${name}`, accessibilityRole: "button", onPress: () => onPress(emoji), onPressIn: press.onPressIn, onPressOut: press.onPressOut, style: styles2.emojiSlot, testID, children: /* @__PURE__ */ jsx7(Animated.View, { style: [styles2.emoji, background, press.scaleStyle], children: /* @__PURE__ */ jsx7(Text, { allowFontScaling: false, style: styles2.emojiText, children: emoji }) }) });
+}
+function CopyLinkRow({ link }) {
+  const [copied, setCopied] = useState5(false);
+  const reset = useRef2(null);
+  useEffect5(() => () => clearTimeout(reset.current ?? void 0), []);
+  const copy = useCallback5(async () => {
+    await setStringAsync(link);
+    setCopied(true);
+    announce("Link copied");
+    clearTimeout(reset.current ?? void 0);
+    reset.current = setTimeout(() => setCopied(false), durations.copyReset);
+  }, [link]);
+  return /* @__PURE__ */ jsx7(SheetRow, { icon: copied ? "check" : "copy", label: "Copy link", onPress: () => void copy(), testID: "more.copy" });
+}
+var LAYOUTS = [
+  { value: "spotlight", label: "Spotlight", testID: "more.layout.spotlight" },
+  { value: "grid", label: "Grid", testID: "more.layout.grid" }
+];
+function LayoutRow() {
+  const { layout, setLayout } = useStageView();
+  return /* @__PURE__ */ jsx7(SheetRow, { end: /* @__PURE__ */ jsx7(SegmentedControl, { accessibilityLabel: "Layout", onChange: setLayout, options: LAYOUTS, testID: "more.layout.control", value: layout }), icon: "grid", label: "Layout", testID: "more.layout" });
+}
+function UnreadDot() {
+  const { colors } = useTheme();
+  const style = [styles2.unread, { backgroundColor: colors.info }];
+  const ref = useMeasuredRef("more.chat.unread", style);
+  return /* @__PURE__ */ jsx7(View2, { ref, style, testID: "more.chat.unread" });
+}
+function ChatRow({ onPress }) {
+  const { colors } = useTheme();
+  const unread = useChat().unreadCount > 0;
+  return /* @__PURE__ */ jsx7(SheetRow, { accessibilityLabel: unread ? "Chat, new messages" : "Chat", badge: unread ? /* @__PURE__ */ jsx7(UnreadDot, {}) : null, end: /* @__PURE__ */ jsx7(Icon, { color: colors.textMuted, name: "right" }), icon: "chat", label: "Chat", onPress, testID: "more.chat" });
+}
+function PeopleCount({ count }) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ jsxs3(View2, { style: styles2.end, children: [
+    /* @__PURE__ */ jsx7(ChalkText, { tabular: true, tone: "textMuted", variant: "phoneRow", children: count }),
+    /* @__PURE__ */ jsx7(Icon, { color: colors.textMuted, name: "right" })
+  ] });
+}
+function RecordingRow({ onDone }) {
+  const client = useSpaceClient();
+  const toasts = useToasts();
+  const { soundsEnabled } = usePreferences();
+  const { colors } = useTheme();
+  const canRecord = useCan("manageRecording");
+  const status = useRecording().current?.status;
+  if (!canRecord) return null;
+  const recording2 = status === "starting" || status === "recording";
+  const toggle = () => {
+    onDone();
+    if (recording2) {
+      client.recording.stop().then(() => {
+        toasts.show({ leading: /* @__PURE__ */ jsx7(Icon, { color: colors.textMuted, name: "rec" }), message: "Recording stopped" });
+      }).catch(() => toasts.show({ kind: "error", dismissible: true, message: "Couldn't stop recording." }));
+      return;
+    }
+    client.recording.start().then(() => {
+      playSound("recording", soundsEnabled);
+      toasts.show({ leading: /* @__PURE__ */ jsx7(Icon, { color: colors.dangerText, name: "rec" }), message: [{ strong: "Recording started." }, " Everyone in the call can see it."] });
+    }).catch(() => toasts.show({ kind: "error", dismissible: true, message: "Couldn't start recording." }));
+  };
+  return /* @__PURE__ */ jsx7(SheetRow, { icon: "rec", label: recording2 ? "Stop recording" : "Start recording", onPress: toggle, testID: "more.recording" });
+}
+var styles2 = StyleSheet2.create({
+  // `.rxrow`: wraps onto a second line on narrow phones.
+  // One line on every phone: the reactions narrow from 44 pt to 32 pt before they would wrap beside the hand.
+  reactions: { flexDirection: "row", alignItems: "center", gap: 2, paddingBottom: 12 },
+  hand: { flexDirection: "row", alignItems: "center", gap: 8, height: 44, paddingLeft: 12, paddingRight: 16, marginRight: 6, borderRadius: 999 },
+  emojiSlot: { flexBasis: 44, flexShrink: 1, minWidth: 32 },
+  emoji: { height: 44, borderRadius: 22, alignItems: "center", justifyContent: "center" },
+  emojiText: { fontSize: 22 },
+  end: { flexDirection: "row", alignItems: "center", gap: 14 },
+  unread: { width: 8, height: 8, borderRadius: 4 }
+});
+
+// src/header/CallDetailsSheet.tsx
+import { setStringAsync as setStringAsync2 } from "expo-clipboard";
+import { Platform as Platform5, Pressable as Pressable2, Share as Share2, StyleSheet as StyleSheet3, View as View4 } from "react-native";
+import Animated2 from "react-native-reanimated";
+
+// src/header/QrCode.tsx
+import { memo as memo2, useMemo as useMemo4 } from "react";
+import { View as View3 } from "react-native";
+import Svg, { Path, Rect } from "react-native-svg";
+import { encode } from "uqr";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var QrCode = memo2(function QrCode2({ value, size }) {
+  const { path, modules } = useMemo4(() => {
+    const { data, size: count } = encode(value, { ecc: "M", border: 2 });
+    let d = "";
+    data.forEach((row, y) => {
+      let start = -1;
+      row.forEach((dark, x) => {
+        if (dark && start < 0) start = x;
+        if (start >= 0 && (!dark || x === row.length - 1)) {
+          const end = dark ? x + 1 : x;
+          d += `M${start} ${y}h${end - start}v1h${start - end}z`;
+          start = -1;
+        }
+      });
+    });
+    return { path: d, modules: count };
+  }, [value]);
+  return /* @__PURE__ */ jsx8(View3, { accessibilityLabel: `QR code for ${value}`, accessibilityRole: "image", accessible: true, style: { width: size, height: size, borderRadius: 8, overflow: "hidden" }, testID: "details.qr", children: /* @__PURE__ */ jsxs4(Svg, { height: size, viewBox: `0 0 ${modules} ${modules}`, width: size, children: [
+    /* @__PURE__ */ jsx8(Rect, { fill: fixed.qrLight, height: modules, width: modules, x: 0, y: 0 }),
+    /* @__PURE__ */ jsx8(Path, { d: path, fill: fixed.qrDark })
+  ] }) });
+});
+
+// src/header/CallDetailsSheet.tsx
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var DETAILS_TOP = 58;
+var SCHEMES = [
+  { value: "dark", label: "Dark", testID: "details.appearance.dark" },
+  { value: "light", label: "Light", testID: "details.appearance.light" }
+];
+function CallDetailsSheet({ open, onClose, callName, inviteLink, returnFocusRef }) {
+  const preferences = usePreferences();
+  const layout = useDeviceLayout();
+  const heightRatio = (layout.height - layout.insets.top - DETAILS_TOP) / layout.height;
+  return /* @__PURE__ */ jsxs5(BottomSheet, { accessibilityLabel: callName, heightRatio, inset: 14, onClose, open, returnFocusRef, testID: "sheet.details", variant: "popover", children: [
+    /* @__PURE__ */ jsxs5(View4, { style: styles3.heading, children: [
+      /* @__PURE__ */ jsx9(ChalkText, { accessibilityRole: "header", numberOfLines: 1, style: styles3.title, variant: "cardTitle", children: callName }),
+      /* @__PURE__ */ jsx9(IconButton, { accessibilityLabel: "Close", icon: "x", onPress: onClose, size: 36, testID: "details.close", tone: "ghost" })
+    ] }),
+    inviteLink ? /* @__PURE__ */ jsx9(ShareSection, { link: inviteLink }) : null,
+    /* @__PURE__ */ jsxs5(Section, { first: !inviteLink, children: [
+      /* @__PURE__ */ jsx9(MenuRow, { end: /* @__PURE__ */ jsx9(SegmentedControl, { accessibilityLabel: "Appearance", onChange: preferences.setColorScheme, options: SCHEMES, size: "compact", testID: "details.appearance", value: preferences.colorScheme }), label: "Appearance" }),
+      /* @__PURE__ */ jsx9(MenuRow, { end: /* @__PURE__ */ jsx9(Switch, { accessibilityLabel: "Sounds", onValueChange: preferences.setSoundsEnabled, testID: "details.sounds", value: preferences.soundsEnabled }), label: "Sounds" })
+    ] })
+  ] });
+}
+function ShareSection({ link }) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ jsxs5(Section, { first: true, children: [
+    /* @__PURE__ */ jsx9(MenuSection, { label: "Share" }),
+    /* @__PURE__ */ jsxs5(View4, { style: [styles3.link, { backgroundColor: colors.hover }], testID: "details.link", children: [
+      /* @__PURE__ */ jsx9(ChalkText, { numberOfLines: 1, selectable: true, style: styles3.linkText, variant: "bodyMedium", children: displayLink(link) }),
+      /* @__PURE__ */ jsxs5(View4, { style: styles3.linkButtons, children: [
+        /* @__PURE__ */ jsx9(CopyButton, { accessibilityLabel: "Copy link", announcement: "Link copied", onCopy: () => setStringAsync2(link).then(() => void 0), testID: "details.copy" }),
+        /* @__PURE__ */ jsx9(ShareButton, { link })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5(View4, { style: styles3.qr, children: [
+      /* @__PURE__ */ jsx9(QrCode, { size: 112, value: link }),
+      /* @__PURE__ */ jsx9(ChalkText, { style: styles3.qrText, tone: "textSoft", variant: "meta", children: "Scan with a phone camera to join this call." })
+    ] })
+  ] });
+}
+function displayLink(link) {
+  return link.replace(/^https?:\/\//u, "").replace(/[#?].*$/u, "");
+}
+function ShareButton({ link }) {
+  const { colors } = useTheme();
+  const press = usePressAnimation("small");
+  const share = () => {
+    Share2.share(Platform5.OS === "ios" ? { url: link } : { message: link }).catch(() => void 0);
+  };
+  return /* @__PURE__ */ jsx9(Pressable2, { accessibilityLabel: "Share link", accessibilityRole: "button", hitSlop: 4, onPress: share, onPressIn: press.onPressIn, onPressOut: press.onPressOut, testID: "details.share", children: ({ pressed }) => /* @__PURE__ */ jsx9(Animated2.View, { style: [styles3.round, pressed ? { backgroundColor: colors.pressed } : null, press.scaleStyle], children: /* @__PURE__ */ jsx9(Icon, { color: colors.text, name: "iosShare" }) }) });
+}
+function Section({ first = false, children }) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ jsx9(View4, { style: [styles3.section, first ? null : { borderTopWidth: 1, borderTopColor: colors.line }], children });
+}
+function MenuRow({ label, end }) {
+  return /* @__PURE__ */ jsxs5(View4, { style: styles3.row, children: [
+    /* @__PURE__ */ jsx9(ChalkText, { numberOfLines: 1, style: styles3.rowLabel, children: label }),
+    end
+  ] });
+}
+var styles3 = StyleSheet3.create({
+  heading: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 8, paddingTop: 2, paddingBottom: 4, paddingLeft: 10 },
+  title: { flexShrink: 1 },
+  section: { paddingTop: 4, paddingBottom: 8 },
+  link: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 8, height: 44, marginHorizontal: 6, paddingLeft: 14, paddingRight: 4, borderRadius: 999 },
+  linkText: { flexShrink: 1 },
+  linkButtons: { flexDirection: "row", gap: 2 },
+  round: { width: 36, height: 36, borderRadius: 18, alignItems: "center", justifyContent: "center" },
+  qr: { flexDirection: "row", alignItems: "center", gap: 14, marginTop: 10, marginHorizontal: 6, marginBottom: 2 },
+  qrText: { flex: 1 },
+  row: { flexDirection: "row", alignItems: "center", gap: 10, minHeight: sizes.menuRowPhone, paddingHorizontal: 10 },
+  rowLabel: { flex: 1 }
+});
+
+// src/header/Header.tsx
+import { forwardRef, memo as memo3, useEffect as useEffect6, useState as useState6 } from "react";
+import { Pressable as Pressable3, StyleSheet as StyleSheet4, View as View5 } from "react-native";
+import Animated3 from "react-native-reanimated";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var Header = memo3(
+  forwardRef(function Header2({ callName, arrangement, onOpenDetails, detailsOpen }, ref) {
+    const { colors } = useTheme();
+    const press = usePressAnimation("pill");
+    const landscape = arrangement === "landscape";
+    const headerStyle = [styles4.header, arrangement === "pad" ? styles4.pad : landscape ? styles4.landscape : styles4.portrait];
+    const headerRef = useMeasuredRef("frame.header", headerStyle);
+    const nameStyle = [styles4.name, landscape ? [styles4.namePill, { backgroundColor: colors.raised, boxShadow: `0px 0px 0px 1px ${colors.lineStrong}` }] : null];
+    const nameRef = useMeasuredRef("header.name", nameStyle);
+    return /* @__PURE__ */ jsxs6(View5, { pointerEvents: "box-none", ref: headerRef, style: headerStyle, testID: "frame.header", children: [
+      /* @__PURE__ */ jsx10(Pressable3, { accessibilityLabel: `Call details, ${callName}`, accessibilityRole: "button", accessibilityState: { expanded: detailsOpen }, onPress: onOpenDetails, onPressIn: press.onPressIn, onPressOut: press.onPressOut, ref, style: styles4.nameButton, testID: "header.name", children: /* @__PURE__ */ jsxs6(Animated3.View, { ref: nameRef, style: [nameStyle, press.scaleStyle], children: [
+        /* @__PURE__ */ jsx10(ChalkText, { numberOfLines: 1, style: styles4.nameText, variant: "bodyStrong", children: callName }),
+        /* @__PURE__ */ jsx10(Icon, { color: colors.textMuted, name: "down", size: 16 })
+      ] }) }),
+      /* @__PURE__ */ jsxs6(View5, { style: styles4.status, children: [
+        /* @__PURE__ */ jsx10(RecordingDot, {}),
+        landscape ? null : /* @__PURE__ */ jsx10(CallTimer, {})
+      ] })
+    ] });
+  })
+);
+function RecordingDot() {
+  const { colors } = useTheme();
+  const status = useRecording().current?.status;
+  if (status !== "recording" && status !== "stopping") return null;
+  return /* @__PURE__ */ jsxs6(View5, { accessibilityLabel: "This call is being recorded", accessible: true, style: styles4.rec, testID: "header.recording", children: [
+    /* @__PURE__ */ jsx10(View5, { style: [styles4.recDot, { backgroundColor: colors.danger }] }),
+    /* @__PURE__ */ jsx10(ChalkText, { variant: "meta", children: "Rec" })
+  ] });
+}
+function CallTimer() {
+  const { episode } = useConnection();
+  const startedAt = episode?.startedAt ? Date.parse(episode.startedAt) : null;
+  const [now, setNow] = useState6(Date.now);
+  useEffect6(() => {
+    if (startedAt === null) return;
+    const timer = setInterval(() => setNow(Date.now()), 1e3);
+    return () => clearInterval(timer);
+  }, [startedAt]);
+  if (startedAt === null) return null;
+  return /* @__PURE__ */ jsx10(ChalkText, { accessibilityLabel: `Call time ${formatElapsed(now - startedAt)}`, tabular: true, testID: "header.timer", tone: "textMuted", variant: "bodyMedium", children: formatElapsed(now - startedAt) });
+}
+function formatElapsed(milliseconds) {
+  const total = Math.max(0, Math.floor(milliseconds / 1e3));
+  const hours = Math.floor(total / 3600);
+  const minutes = Math.floor(total % 3600 / 60);
+  const seconds = String(total % 60).padStart(2, "0");
+  return hours > 0 ? `${hours}:${String(minutes).padStart(2, "0")}:${seconds}` : `${minutes}:${seconds}`;
+}
+var styles4 = StyleSheet4.create({
+  header: { flex: 1, flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 8 },
+  portrait: { paddingLeft: 14, paddingRight: 12 },
+  landscape: { paddingHorizontal: 8, justifyContent: "flex-start" },
+  pad: { paddingLeft: 24, paddingRight: 16 },
+  nameButton: { flexShrink: 1 },
+  // `.nameb`: 44 pt high, pulled 6 pt left so the text lines up with the header padding.
+  name: { flexDirection: "row", alignItems: "center", gap: 4, height: 44, paddingHorizontal: 6, marginLeft: -6, borderRadius: 999 },
+  // `.lnd .title`: a 40 pt pill. The mockup pulls `.nameb` 6 pt into the pill's 2 pt padding, so the
+  // text starts 2 pt in, and the name's own 6 pt plus the pill's 12 pt follow the chevron.
+  namePill: { height: 40, marginLeft: 0, paddingLeft: 2, paddingRight: 18 },
+  nameText: { flexShrink: 1 },
+  status: { flexDirection: "row", alignItems: "center", gap: 10 },
+  rec: { flexDirection: "row", alignItems: "center", gap: 6 },
+  recDot: { width: 8, height: 8, borderRadius: 4 }
+});
+
+// src/sheets/people-chat/ChatNotices.tsx
+import { useEffect as useEffect7, useRef as useRef3 } from "react";
+
+// src/sheets/people-chat/chat-model.ts
+import { CHALK_CHAT_ATTACHMENT_LIMITS, CHALK_CHAT_ATTACHMENT_MIME_TYPES } from "@q9labsai/chalk-client";
+var KIND_BY_MIME = {
+  "image/png": "image",
+  "image/jpeg": "image",
+  "image/gif": "image",
+  "image/webp": "image",
+  "application/pdf": "pdf",
+  "text/plain": "txt",
+  "application/msword": "doc",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "doc",
+  "application/vnd.oasis.opendocument.text": "doc",
+  "application/vnd.ms-excel": "xls",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "xls",
+  "application/vnd.oasis.opendocument.spreadsheet": "xls",
+  "application/vnd.ms-powerpoint": "ppt",
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation": "ppt",
+  "application/vnd.oasis.opendocument.presentation": "ppt"
+};
+function fileKind(mimeType) {
+  return KIND_BY_MIME[mimeType] ?? "other";
+}
+var MIME_BY_EXTENSION = {
+  png: "image/png",
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  gif: "image/gif",
+  webp: "image/webp",
+  pdf: "application/pdf",
+  txt: "text/plain",
+  doc: "application/msword",
+  docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  odt: "application/vnd.oasis.opendocument.text",
+  xls: "application/vnd.ms-excel",
+  xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  ods: "application/vnd.oasis.opendocument.spreadsheet",
+  ppt: "application/vnd.ms-powerpoint",
+  pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+  odp: "application/vnd.oasis.opendocument.presentation"
+};
+function mimeTypeOf(name, reported) {
+  if (reported) return reported;
+  const dot = name.lastIndexOf(".");
+  return dot > 0 && MIME_BY_EXTENSION[name.slice(dot + 1).toLowerCase()] || "application/octet-stream";
+}
+var FILE_BADGE = { pdf: "PDF", doc: "DOC", xls: "XLS", ppt: "PPT", txt: "TXT", other: "FILE" };
+var MB = 1024 * 1024;
+function formatSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < MB) return `${Math.round(bytes / 1024)} KB`;
+  return `${(bytes / MB).toFixed(bytes < 10 * MB ? 1 : 0)} MB`;
+}
+function formatTime(iso) {
+  const date = new Date(iso);
+  return Number.isNaN(date.getTime()) ? "" : date.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+}
+function messageSummary(text, attachments) {
+  if (text) return text;
+  const count = attachments.length;
+  if (count === 0) return "";
+  const photos = attachments.filter((attachment) => fileKind(attachment.mimeType) === "image").length;
+  if (photos === count) return count > 1 ? `Sent ${count} photos` : "Sent a photo";
+  return count > 1 ? `Sent ${count} files` : "Sent a file";
+}
+function groupMessages(messages, pending, self, retried) {
+  const groups = [];
+  const add = (participantId, displayName, time, entry) => {
+    const last = groups[groups.length - 1];
+    if (last && last.participantId === participantId) {
+      groups[groups.length - 1] = { ...last, entries: [...last.entries, entry] };
+      return;
+    }
+    groups.push({ key: entry.key, participantId, displayName, mine: participantId === self.participantId, time, entries: [entry] });
+  };
+  for (const message2 of messages) {
+    add(message2.participantId, message2.displayName, formatTime(message2.createdAt), { key: message2.messageId, text: message2.text, attachments: message2.attachments, state: "sent", clientMessageId: null });
+  }
+  for (const send of pending) {
+    if (retried.has(send.clientMessageId)) continue;
+    add(self.participantId ?? "self", self.displayName ?? "You", "Now", { key: send.clientMessageId, text: send.text, attachments: send.attachments, state: send.status === "failed" ? "failed" : send.status === "queued" ? "queued" : "sending", clientMessageId: send.clientMessageId });
+  }
+  return groups;
+}
+var allowedMimeTypes = new Set(CHALK_CHAT_ATTACHMENT_MIME_TYPES);
+function stagingError(facts, accepted) {
+  if (!allowedMimeTypes.has(facts.mimeType)) {
+    const dot = facts.name.lastIndexOf(".");
+    return dot > 0 && dot < facts.name.length - 1 ? `Can\u2019t send .${facts.name.slice(dot + 1).toLowerCase()} files` : "Can\u2019t send this type of file";
+  }
+  if (facts.size > CHALK_CHAT_ATTACHMENT_LIMITS.maximumByteLength) return "Over the 25 MB limit";
+  if (accepted >= CHALK_CHAT_ATTACHMENT_LIMITS.maximumPerMessage) return `Only ${CHALK_CHAT_ATTACHMENT_LIMITS.maximumPerMessage} files per message`;
+  return null;
+}
+function thumbnailLayout(count) {
+  return { shown: Math.min(count, 4), more: Math.max(0, count - 4) };
+}
+
+// src/sheets/people-chat/ChatNotices.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function ChatNotices({ chatVisible, sheetOpen, onOpenChat }) {
+  const { messages, status } = useChat();
+  const self = useSelf();
+  const toasts = useToasts();
+  const { soundsEnabled } = usePreferences();
+  const seen = useRef3(null);
+  const latest = useRef3({ chatVisible, sheetOpen, onOpenChat, soundsEnabled });
+  latest.current = { chatVisible, sheetOpen, onOpenChat, soundsEnabled };
+  useEffect7(() => {
+    if (status !== "ready") return;
+    const previous = seen.current;
+    seen.current = new Set(messages.map((message2) => message2.messageId));
+    if (!previous) return;
+    const fresh = messages.filter((message2) => !previous.has(message2.messageId) && message2.participantId !== self.participantId);
+    const now = latest.current;
+    for (const message2 of fresh) {
+      const text = messageSummary(message2.text, message2.attachments);
+      playSound("message", now.soundsEnabled);
+      if (now.chatVisible || now.sheetOpen) {
+        announce(`New message from ${message2.displayName}: ${text}`);
+        continue;
+      }
+      const id = toasts.show({
+        leading: /* @__PURE__ */ jsx11(FaceAvatar, { name: message2.displayName, size: 28 }),
+        message: [{ strong: firstName(message2.displayName) }, ` ${text}`],
+        actions: [
+          {
+            label: "Reply",
+            onPress: () => {
+              toasts.dismiss(id);
+              latest.current.onOpenChat();
+            },
+            testID: "toast.chat.reply"
+          }
+        ],
+        testID: "toast.chat"
+      });
+    }
+  }, [messages, self.participantId, status, toasts]);
+  return null;
+}
+function firstName(name) {
+  return name.trim().split(/\s+/)[0] ?? name;
+}
+
+// src/sheets/people-chat/PeopleChatSheet.tsx
+import { useEffect as useEffect10 } from "react";
+import { Pressable as Pressable9, StyleSheet as StyleSheet11, View as View11 } from "react-native";
+
+// src/sheets/people-chat/ChatTab.tsx
+import { memo as memo5, useCallback as useCallback7, useMemo as useMemo5, useState as useState9 } from "react";
+import { FlatList, Pressable as Pressable7, StyleSheet as StyleSheet9, View as View9 } from "react-native";
+
+// src/sheets/people-chat/attachments.tsx
+import { memo as memo4, useEffect as useEffect8, useState as useState7 } from "react";
+import { Image, Linking, Pressable as Pressable4, StyleSheet as StyleSheet5, View as View6 } from "react-native";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+var urls = /* @__PURE__ */ new Map();
+function resolveUrl(client, attachment) {
+  let url = urls.get(attachment.attachmentId);
+  if (!url) {
+    url = client.chat.files.resolveUrl(attachment);
+    urls.set(attachment.attachmentId, url);
+    url.catch(() => urls.delete(attachment.attachmentId));
+  }
+  return url;
+}
+function useAttachmentSource(attachment) {
+  const client = useSpaceClient();
+  const [source, setSource] = useState7({ state: "loading" });
+  useEffect8(() => {
+    let live = true;
+    resolveUrl(client, attachment).then((uri) => {
+      Image.getSize(
+        uri,
+        (width, height) => live && setSource({ state: "ready", uri, aspect: width / height }),
+        () => live && setSource({ state: "ready", uri, aspect: 4 / 3 })
+      );
+    }).catch(() => live && setSource({ state: "failed" }));
+    return () => {
+      live = false;
+    };
+  }, [attachment, client]);
+  return source;
+}
+function useDownload() {
+  const client = useSpaceClient();
+  const toasts = useToasts();
+  return (attachment) => {
+    resolveUrl(client, attachment).then((uri) => Linking.openURL(uri)).catch(() => toasts.show({ kind: "error", dismissible: true, message: `Couldn't download ${attachment.fileName}.` }));
+  };
+}
+var Thumbnails = memo4(function Thumbnails2({ photos, disabled, onOpen }) {
+  const { shown, more } = thumbnailLayout(photos.length);
+  const count = photos.length;
+  return /* @__PURE__ */ jsx12(View6, { style: [styles5.grid, count > 1 ? styles5.gridMany : null], children: photos.slice(0, shown).map((photo, index) => /* @__PURE__ */ jsx12(
+    Thumbnail,
+    {
+      attachment: photo,
+      disabled,
+      label: `Open ${photo.fileName}${count > 1 ? `, ${index + 1} of ${count}` : ""}${index === 3 && more > 0 ? `, and ${more} more` : ""}`,
+      layout: count === 1 ? "one" : count === 3 && index === 2 ? "wide" : "square",
+      more: index === 3 ? more : 0,
+      onPress: () => onOpen(index)
+    },
+    photo.attachmentId
+  )) });
+});
+function Thumbnail({ attachment, layout, more, label, disabled, onPress }) {
+  const { colors } = useTheme();
+  const source = useAttachmentSource(attachment);
+  const aspectRatio = layout === "one" ? source.state === "ready" ? Math.min(1.78, Math.max(0.75, source.aspect)) : 4 / 3 : layout === "wide" ? 2 : 1;
+  const style = [styles5.thumb, layout === "one" ? styles5.thumbOne : layout === "wide" ? styles5.thumbWide : styles5.thumbSquare, { aspectRatio, backgroundColor: colors.raised }];
+  if (source.state !== "ready") {
+    return /* @__PURE__ */ jsx12(View6, { accessibilityLabel: source.state === "loading" ? `Loading ${attachment.fileName}` : `Couldn't load ${attachment.fileName}`, accessibilityRole: "image", accessible: true, style: [style, styles5.centered], children: /* @__PURE__ */ jsx12(Icon, { color: colors.textMuted, name: "img", size: 18 }) });
+  }
+  return /* @__PURE__ */ jsxs7(Pressable4, { accessibilityLabel: label, accessibilityRole: "imagebutton", accessibilityState: { disabled }, disabled, onPress, style, testID: `chat.photo.${attachment.attachmentId}`, children: [
+    /* @__PURE__ */ jsx12(Image, { source: { uri: source.uri }, style: StyleSheet5.absoluteFill }),
+    /* @__PURE__ */ jsx12(View6, { pointerEvents: "none", style: [StyleSheet5.absoluteFill, { borderRadius: layout === "one" ? 14 : 3, boxShadow: `inset 0px 0px 0px 1px ${colors.line}` }] }),
+    more > 0 ? /* @__PURE__ */ jsx12(View6, { style: [StyleSheet5.absoluteFill, styles5.centered, styles5.moreShade], children: /* @__PURE__ */ jsx12(ChalkText, { color: fixed.overlayText, style: styles5.moreText, variant: "sheetTitle", children: `+${more}` }) }) : null
+  ] });
+}
+function FileBadge({ mimeType, size = 36 }) {
+  const { colors } = useTheme();
+  const kind = fileKind(mimeType);
+  const box = { width: size, height: size, borderRadius: size === 36 ? 9 : 7 };
+  if (kind === "image") {
+    return /* @__PURE__ */ jsx12(View6, { style: [styles5.badge, box, { backgroundColor: colors.hover }], children: /* @__PURE__ */ jsx12(Icon, { color: colors.textMuted, name: "img", size: 18 }) });
+  }
+  const color = kind === "txt" ? fileKindColors.other : fileKindColors[kind];
+  return /* @__PURE__ */ jsx12(View6, { style: [styles5.badge, box, { backgroundColor: color }], children: /* @__PURE__ */ jsx12(ChalkText, { color: fixed.overlayText, style: [styles5.badgeText, size === 32 ? styles5.badgeTextSmall : null], variant: "caption", children: FILE_BADGE[kind] }) });
+}
+var FileCard = memo4(function FileCard2({ attachment, sent }) {
+  const { colors } = useTheme();
+  const download = useDownload();
+  return /* @__PURE__ */ jsxs7(View6, { style: [styles5.file, { backgroundColor: colors.raised, borderColor: colors.line }], testID: `chat.file.${attachment.attachmentId}`, children: [
+    /* @__PURE__ */ jsx12(FileBadge, { mimeType: attachment.mimeType }),
+    /* @__PURE__ */ jsxs7(View6, { style: styles5.fileText, children: [
+      /* @__PURE__ */ jsx12(ChalkText, { numberOfLines: 1, variant: "button", children: attachment.fileName }),
+      /* @__PURE__ */ jsx12(ChalkText, { style: styles5.fileSize, tone: "textMuted", variant: "label", children: formatSize(attachment.byteLength) })
+    ] }),
+    sent ? /* @__PURE__ */ jsx12(IconButton, { accessibilityLabel: `Download ${attachment.fileName}`, icon: "dl", onPress: () => download(attachment), size: 36, testID: `chat.download.${attachment.attachmentId}`, tone: "ghost" }) : null
+  ] });
+});
+var styles5 = StyleSheet5.create({
+  grid: { width: 240, maxWidth: "100%", borderRadius: 14, overflow: "hidden" },
+  gridMany: { flexDirection: "row", flexWrap: "wrap", gap: 2 },
+  thumb: { overflow: "hidden" },
+  thumbOne: { width: "100%", borderRadius: 14 },
+  thumbSquare: { width: 119, borderRadius: 3 },
+  thumbWide: { width: "100%", borderRadius: 3 },
+  centered: { alignItems: "center", justifyContent: "center" },
+  moreShade: { backgroundColor: chatOverlays.photoMore },
+  moreText: { fontSize: 20, lineHeight: 28 },
+  badge: { alignItems: "center", justifyContent: "center" },
+  // `.fi`: 10 pt bold capitals with 0.04 em tracking.
+  badgeText: { fontFamily: fontFamilies[700], fontSize: 10, lineHeight: 10, letterSpacing: 0.4 },
+  badgeTextSmall: { fontSize: 9, lineHeight: 9, letterSpacing: 0.36 },
+  file: { flexDirection: "row", alignItems: "center", gap: 10, width: 240, maxWidth: "100%", minHeight: 56, paddingTop: 8, paddingRight: 6, paddingBottom: 8, paddingLeft: 10, borderRadius: 14, borderWidth: 1 },
+  fileText: { flex: 1, minWidth: 0, gap: 1 },
+  fileSize: { fontFamily: fontFamilies[400], lineHeight: 15 }
+});
+
+// src/sheets/people-chat/Composer.tsx
+import { CHALK_CHAT_ATTACHMENT_MIME_TYPES as CHALK_CHAT_ATTACHMENT_MIME_TYPES2 } from "@q9labsai/chalk-client";
+import { getDocumentAsync } from "expo-document-picker";
+import { File } from "expo-file-system";
+import { useCallback as useCallback6, useRef as useRef4, useState as useState8 } from "react";
+import { ActivityIndicator, Image as Image2, Pressable as Pressable5, ScrollView, StyleSheet as StyleSheet7, View as View7 } from "react-native";
+import Animated4, { useAnimatedKeyboard, useAnimatedStyle as useAnimatedStyle2 } from "react-native-reanimated";
+
+// src/sheets/people-chat/TextField.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { StyleSheet as StyleSheet6, TextInput } from "react-native";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var TextField = forwardRef2(function TextField2({ style, ...rest }, ref) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ jsx13(TextInput, { ...rest, cursorColor: colors.text, placeholderTextColor: colors.textMuted, ref, selectionColor: colors.textMuted, style: [styles6.input, { color: colors.text }, style] });
+});
+var styles6 = StyleSheet6.create({
+  input: { flex: 1, minWidth: 0, height: "100%", padding: 0, fontFamily: type.body.fontFamily, fontSize: type.body.fontSize }
+});
+
+// src/sheets/people-chat/Composer.tsx
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+function Composer() {
+  const client = useSpaceClient();
+  const toasts = useToasts();
+  const { colors } = useTheme();
+  const layout = useDeviceLayout();
+  const keyboard = useAnimatedKeyboard();
+  const [text, setText] = useState8("");
+  const [focused, setFocused] = useState8(false);
+  const [staged, setStaged] = useState8([]);
+  const nextId = useRef4(0);
+  const update = useCallback6((id, change) => setStaged((files) => files.map((file) => file.id === id ? { ...file, ...change } : file)), []);
+  const upload = useCallback6(
+    (file) => {
+      client.chat.files.upload(file.source).then((attachment) => update(file.id, { state: "ready", attachment })).catch((cause) => update(file.id, { state: "error", error: cause instanceof Error ? cause.message : "Couldn\u2019t upload" }));
+    },
+    [client, update]
+  );
+  const attach = useCallback6(async () => {
+    const picked = await getDocumentAsync({ multiple: true, copyToCacheDirectory: true, type: [...CHALK_CHAT_ATTACHMENT_MIME_TYPES2] });
+    if (picked.canceled) return;
+    let accepted = staged.filter((file) => file.state !== "error").length;
+    const added = [];
+    for (const asset of picked.assets) {
+      const mimeType = mimeTypeOf(asset.name, asset.mimeType);
+      const size = asset.size ?? 0;
+      const source = { name: asset.name, type: mimeType, size, arrayBuffer: () => new File(asset.uri).arrayBuffer() };
+      const error2 = stagingError({ name: asset.name, mimeType, size }, accepted);
+      if (!error2) accepted += 1;
+      nextId.current += 1;
+      added.push({ id: nextId.current, name: asset.name, size, mimeType, source, previewUri: fileKind(mimeType) === "image" ? asset.uri : null, state: error2 ? "error" : "uploading", attachment: null, error: error2 });
+    }
+    setStaged((files) => [...files, ...added]);
+    added.filter((file) => file.state === "uploading").forEach(upload);
+    const refused = added.filter((file) => file.state === "error").length;
+    const ok = added.length - refused;
+    announce(`${ok} file${ok === 1 ? "" : "s"} added${refused ? `, ${refused} can\u2019t be sent` : ""}`);
+  }, [staged, upload]);
+  const pick = useCallback6(() => {
+    attach().catch(() => toasts.show({ kind: "error", dismissible: true, message: "Couldn't open your files." }));
+  }, [attach, toasts]);
+  const ready = staged.flatMap((file) => file.state === "ready" && file.attachment ? [file.attachment] : []);
+  const uploading = staged.some((file) => file.state === "uploading");
+  const message2 = text.trim();
+  const canSend = !uploading && (message2.length > 0 || ready.length > 0);
+  const send = useCallback6(() => {
+    if (!canSend) return;
+    const attachments = ready;
+    setText("");
+    setStaged([]);
+    client.chat.send({ text: message2, attachments }).catch(() => void 0);
+  }, [canSend, client, message2, ready]);
+  const padStyle = useAnimatedStyle2(() => {
+    "worklet";
+    return { paddingBottom: keyboard.height.value > 0 ? 8 : layout.insets.bottom + 8 };
+  });
+  return /* @__PURE__ */ jsxs8(Animated4.View, { style: [styles7.composer, padStyle], testID: "chat.composer", children: [
+    staged.length > 0 ? /* @__PURE__ */ jsx14(ScrollView, { accessibilityLabel: "Files to send", contentContainerStyle: styles7.stagedList, style: styles7.staged, testID: "chat.staged", children: staged.map((file) => /* @__PURE__ */ jsx14(StagedChip, { file, onRemove: () => setStaged((files) => files.filter((other) => other.id !== file.id)) }, file.id)) }) : null,
+    /* @__PURE__ */ jsxs8(View7, { style: [styles7.field, { backgroundColor: colors.raised, borderColor: focused ? colors.text : colors.line }], children: [
+      /* @__PURE__ */ jsx14(View7, { style: styles7.clip, children: /* @__PURE__ */ jsx14(IconButton, { accessibilityLabel: "Attach files", icon: "clip", onPress: pick, size: 36, testID: "chat.attach", tone: "ghost" }) }),
+      /* @__PURE__ */ jsx14(
+        TextField,
+        {
+          accessibilityLabel: "Message everyone",
+          blurOnSubmit: false,
+          onBlur: () => setFocused(false),
+          onChangeText: setText,
+          onFocus: () => setFocused(true),
+          onSubmitEditing: send,
+          placeholder: "Message everyone",
+          returnKeyType: "send",
+          submitBehavior: "submit",
+          testID: "chat.input",
+          value: text
+        }
+      ),
+      /* @__PURE__ */ jsx14(SendButton, { disabled: !canSend, onPress: send })
+    ] })
+  ] });
+}
+function SendButton({ disabled, onPress }) {
+  const { colors } = useTheme();
+  const press = usePressAnimation("round");
+  return /* @__PURE__ */ jsx14(Pressable5, { accessibilityLabel: "Send message", accessibilityRole: "button", accessibilityState: { disabled }, disabled, onPress, onPressIn: press.onPressIn, onPressOut: press.onPressOut, testID: "chat.send", children: /* @__PURE__ */ jsx14(Animated4.View, { style: [styles7.send, { backgroundColor: disabled ? colors.hover : colors.text }, disabled ? null : press.scaleStyle], children: /* @__PURE__ */ jsx14(Icon, { color: disabled ? colors.textMuted : colors.canvas, name: "up", size: 18 }) }) });
+}
+function StagedChip({ file, onRemove }) {
+  const { colors } = useTheme();
+  const failed = file.state === "error";
+  const uploading = file.state === "uploading";
+  return /* @__PURE__ */ jsxs8(View7, { accessible: false, style: [styles7.chip, { backgroundColor: colors.raised, borderColor: failed ? colors.danger : colors.line }], testID: `chat.staged.${file.id}`, children: [
+    /* @__PURE__ */ jsxs8(View7, { style: [styles7.chipPreview, failed ? styles7.faded : null], children: [
+      file.previewUri && !failed ? /* @__PURE__ */ jsx14(Image2, { source: { uri: file.previewUri }, style: styles7.chipImage }) : /* @__PURE__ */ jsx14(FileBadge, { mimeType: file.mimeType, size: 32 }),
+      uploading ? /* @__PURE__ */ jsx14(View7, { style: [StyleSheet7.absoluteFill, styles7.chipShade], children: /* @__PURE__ */ jsx14(ActivityIndicator, { color: chatOverlays.ring, size: "small" }) }) : null
+    ] }),
+    /* @__PURE__ */ jsxs8(View7, { style: styles7.chipText, children: [
+      /* @__PURE__ */ jsx14(ChalkText, { numberOfLines: 1, variant: "button", children: file.name }),
+      /* @__PURE__ */ jsx14(ChalkText, { color: failed ? colors.dangerText : void 0, style: styles7.chipDetail, tone: "textMuted", variant: "label", children: failed ? file.error : uploading ? `Uploading, ${formatSize(file.size)}` : formatSize(file.size) })
+    ] }),
+    /* @__PURE__ */ jsx14(Pressable5, { accessibilityLabel: `Remove ${file.name}`, accessibilityRole: "button", hitSlop: 8, onPress: onRemove, style: ({ pressed }) => [styles7.remove, pressed ? { backgroundColor: colors.hover } : null], testID: `chat.staged.remove.${file.id}`, children: /* @__PURE__ */ jsx14(Icon, { color: colors.textMuted, name: "x", size: 16 }) })
+  ] });
+}
+var styles7 = StyleSheet7.create({
+  composer: { paddingTop: 8, paddingHorizontal: 12 },
+  staged: { maxHeight: 196 },
+  stagedList: { gap: 4, paddingBottom: 8 },
+  field: { flexDirection: "row", alignItems: "center", height: 44, paddingHorizontal: 4, borderRadius: 999, borderWidth: 1 },
+  clip: { marginRight: 2 },
+  send: { width: 36, height: 36, borderRadius: 18, alignItems: "center", justifyContent: "center" },
+  chip: { minHeight: 44, flexDirection: "row", alignItems: "center", gap: 10, paddingTop: 4, paddingRight: 4, paddingBottom: 4, paddingLeft: 6, borderRadius: 12, borderWidth: 1 },
+  chipPreview: { width: 32, height: 32 },
+  chipImage: { width: 32, height: 32, borderRadius: 7 },
+  chipShade: { borderRadius: 7, backgroundColor: chatOverlays.uploading, alignItems: "center", justifyContent: "center" },
+  faded: { opacity: 0.5 },
+  chipText: { flex: 1, minWidth: 0, gap: 1 },
+  chipDetail: { fontFamily: fontFamilies[400], lineHeight: 15 },
+  remove: { width: 28, height: 28, borderRadius: 14, alignItems: "center", justifyContent: "center" }
+});
+
+// src/sheets/people-chat/PhotoViewer.tsx
+import { useEffect as useEffect9, useRef as useRef5 } from "react";
+import { AccessibilityInfo, findNodeHandle, Image as Image3, Pressable as Pressable6, StyleSheet as StyleSheet8, View as View8 } from "react-native";
+import Animated5, { ReduceMotion, withTiming } from "react-native-reanimated";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+function PhotoViewer({ viewing, onChange, onClose }) {
+  const layout = useDeviceLayout();
+  const download = useDownload();
+  const closeRef = useRef5(null);
+  const { photos, index, from } = viewing;
+  const photo = photos[index] ?? photos[0];
+  const count = photos.length;
+  useBackHandler(true, onClose);
+  useEffect9(() => {
+    const node = closeRef.current && findNodeHandle(closeRef.current);
+    if (node) AccessibilityInfo.setAccessibilityFocus(node);
+  }, []);
+  const go = (step) => {
+    const next = (index + step + count) % count;
+    onChange(next);
+    announce(`Image ${next + 1} of ${count}`);
+  };
+  if (!photo) return null;
+  return /* @__PURE__ */ jsx15(Portal, { layer: "menus", children: /* @__PURE__ */ jsxs9(Animated5.View, { accessibilityLabel: "Image viewer", accessibilityViewIsModal: true, entering: fadeIn, exiting: fadeOut, onAccessibilityEscape: onClose, style: [StyleSheet8.absoluteFill, styles8.root], testID: "chat.viewer", children: [
+    /* @__PURE__ */ jsxs9(View8, { style: [styles8.top, { paddingTop: Math.max(52, layout.insets.top), paddingLeft: 16 + layout.insets.left, paddingRight: 8 + layout.insets.right }], children: [
+      /* @__PURE__ */ jsxs9(View8, { style: styles8.title, children: [
+        /* @__PURE__ */ jsx15(ChalkText, { color: viewer.text, numberOfLines: 1, variant: "bodyStrong", children: photo.fileName }),
+        /* @__PURE__ */ jsx15(ChalkText, { color: viewer.textMuted, style: styles8.detail, variant: "label", children: count > 1 ? `${from} \xB7 ${index + 1} of ${count}` : from })
+      ] }),
+      /* @__PURE__ */ jsx15(ViewerButton, { icon: "dl", label: `Download ${photo.fileName}`, onPress: () => download(photo), testID: "chat.viewer.download" }),
+      /* @__PURE__ */ jsx15(ViewerButton, { icon: "x", label: "Close", buttonRef: closeRef, onPress: onClose, testID: "chat.viewer.close" })
+    ] }),
+    /* @__PURE__ */ jsxs9(Pressable6, { accessible: false, onPress: onClose, style: styles8.stage, children: [
+      /* @__PURE__ */ jsx15(Photo, { attachment: photo }),
+      count > 1 ? /* @__PURE__ */ jsxs9(View8, { style: styles8.arrows, children: [
+        /* @__PURE__ */ jsx15(ViewerButton, { icon: "left", label: "Previous image", onPress: () => go(-1), testID: "chat.viewer.previous" }),
+        /* @__PURE__ */ jsx15(ViewerButton, { icon: "right", label: "Next image", onPress: () => go(1), testID: "chat.viewer.next" })
+      ] }) : null
+    ] })
+  ] }) });
+}
+function Photo({ attachment }) {
+  const source = useAttachmentSource(attachment);
+  return /* @__PURE__ */ jsx15(View8, { pointerEvents: "none", style: styles8.photoBox, children: source.state === "ready" ? /* @__PURE__ */ jsx15(Image3, { accessibilityLabel: attachment.fileName, resizeMode: "contain", source: { uri: source.uri }, style: styles8.photo }) : /* @__PURE__ */ jsx15(Icon, { color: viewer.textMuted, name: "img", size: 24 }) });
+}
+function ViewerButton({ icon, label, onPress, testID, buttonRef }) {
+  const press = usePressAnimation("round");
+  return /* @__PURE__ */ jsx15(Pressable6, { accessibilityLabel: label, accessibilityRole: "button", onPress, onPressIn: press.onPressIn, onPressOut: press.onPressOut, ref: buttonRef, testID, children: ({ pressed }) => /* @__PURE__ */ jsx15(Animated5.View, { style: [styles8.button, { backgroundColor: pressed ? viewer.buttonPressed : viewer.button }, press.scaleStyle], children: /* @__PURE__ */ jsx15(Icon, { color: viewer.text, name: icon, size: 20 }) }) });
+}
+var fade = { duration: durations.menu, easing: easings.easeOut, reduceMotion: ReduceMotion.System };
+var fadeIn = () => {
+  "worklet";
+  return { initialValues: { opacity: 0 }, animations: { opacity: withTiming(1, fade) } };
+};
+var fadeOut = () => {
+  "worklet";
+  return { initialValues: { opacity: 1 }, animations: { opacity: withTiming(0, fade) } };
+};
+var styles8 = StyleSheet8.create({
+  root: { backgroundColor: viewer.backdrop },
+  top: { flexDirection: "row", alignItems: "center", gap: 8, paddingBottom: 8 },
+  title: { flex: 1, minWidth: 0 },
+  detail: { fontFamily: fontFamilies[400] },
+  stage: { flex: 1 },
+  // `.phone .lbs img`: the full width, 108 pt kept free under it for the arrows.
+  photoBox: { position: "absolute", top: 0, left: 0, right: 0, bottom: 108, alignItems: "center", justifyContent: "center" },
+  photo: { width: "100%", height: "100%" },
+  arrows: { position: "absolute", left: 0, right: 0, bottom: 40, flexDirection: "row", justifyContent: "center", gap: 32 },
+  button: { width: 44, height: 44, borderRadius: 22, alignItems: "center", justifyContent: "center" }
+});
+
+// src/sheets/people-chat/ChatTab.tsx
+import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+function ChatTab() {
+  const client = useSpaceClient();
+  const chat = useChat();
+  const self = useSelf();
+  const [retried, setRetried] = useState9(() => /* @__PURE__ */ new Set());
+  const [viewing, setViewing] = useState9(null);
+  const groups = useMemo5(() => groupMessages(chat.messages, chat.pendingSends, self, retried).slice().reverse(), [chat.messages, chat.pendingSends, retried, self]);
+  const retry = useCallback7(
+    (entry) => {
+      const id = entry.clientMessageId;
+      if (!id) return;
+      setRetried((previous) => new Set(previous).add(id));
+      client.chat.send({ text: entry.text, attachments: entry.attachments }).catch(() => void 0);
+    },
+    [client]
+  );
+  const loadOlder = useCallback7(() => {
+    if (!chat.pagination.hasOlder || chat.status !== "ready") return;
+    client.chat.loadOlder().catch(() => void 0);
+  }, [chat.pagination.hasOlder, chat.status, client]);
+  const renderItem = useCallback7(({ item }) => /* @__PURE__ */ jsx16(GroupRow, { group: item, onOpenPhotos: setViewing, onRetry: retry }), [retry]);
+  return /* @__PURE__ */ jsxs10(Fragment2, { children: [
+    groups.length === 0 ? /* @__PURE__ */ jsxs10(View9, { style: styles9.empty, testID: "chat.empty", children: [
+      /* @__PURE__ */ jsx16(ChalkText, { variant: "bodyStrong", children: "No messages yet" }),
+      /* @__PURE__ */ jsx16(ChalkText, { tone: "textMuted", variant: "meta", children: "Messages are seen by everyone in the call." })
+    ] }) : /* @__PURE__ */ jsx16(
+      FlatList,
+      {
+        contentContainerStyle: styles9.content,
+        data: groups,
+        initialNumToRender: 10,
+        inverted: true,
+        keyboardDismissMode: "interactive",
+        keyboardShouldPersistTaps: "handled",
+        keyExtractor: (group) => group.key,
+        maxToRenderPerBatch: 10,
+        onEndReached: loadOlder,
+        onEndReachedThreshold: 0.5,
+        renderItem,
+        style: styles9.list,
+        testID: "chat.list",
+        windowSize: 9
+      }
+    ),
+    /* @__PURE__ */ jsx16(Composer, {}),
+    viewing ? /* @__PURE__ */ jsx16(PhotoViewer, { onChange: (index) => setViewing({ ...viewing, index }), onClose: () => setViewing(null), viewing }) : null
+  ] });
+}
+var GroupRow = memo5(function GroupRow2({ group, onRetry, onOpenPhotos }) {
+  const { mine } = group;
+  return /* @__PURE__ */ jsxs10(View9, { style: [styles9.group, mine ? styles9.groupMine : null], testID: `chat.group.${group.key}`, children: [
+    mine ? null : /* @__PURE__ */ jsx16(View9, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: /* @__PURE__ */ jsx16(FaceAvatar, { name: group.displayName, size: 28 }) }),
+    /* @__PURE__ */ jsxs10(View9, { style: [styles9.column, mine ? styles9.columnMine : null], children: [
+      /* @__PURE__ */ jsxs10(View9, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: styles9.header, children: [
+        mine ? null : /* @__PURE__ */ jsx16(ChalkText, { numberOfLines: 1, style: styles9.name, variant: "label", children: group.displayName }),
+        /* @__PURE__ */ jsx16(ChalkText, { style: styles9.time, tabular: true, tone: "textMuted", variant: "label", children: group.time })
+      ] }),
+      group.entries.map((entry) => /* @__PURE__ */ jsx16(Message, { entry, from: mine ? "You" : group.displayName, mine, onOpenPhotos: (photos, index) => onOpenPhotos({ photos, index, from: `${mine ? "You" : group.displayName}, ${group.time}` }), onRetry }, entry.key))
+    ] })
+  ] });
+});
+function Message({ entry, from, mine, onRetry, onOpenPhotos }) {
+  const { colors } = useTheme();
+  const photos = entry.attachments.filter((attachment) => fileKind(attachment.mimeType) === "image");
+  const files = entry.attachments.filter((attachment) => fileKind(attachment.mimeType) !== "image");
+  const sent = entry.state === "sent";
+  const summary = messageSummary(entry.text, entry.attachments);
+  const stateLabel = entry.state === "failed" ? ", couldn't send" : sent ? "" : ", sending";
+  return /* @__PURE__ */ jsxs10(View9, { style: [styles9.message, mine ? styles9.messageMine : null], testID: `chat.message.${entry.key}`, children: [
+    /* @__PURE__ */ jsxs10(View9, { accessibilityLabel: `${from}: ${summary}${stateLabel}`, accessible: photos.length === 0 && files.length === 0, style: [styles9.body, mine ? styles9.messageMine : null, sent ? null : styles9.pending], children: [
+      entry.text ? /* @__PURE__ */ jsx16(View9, { style: [styles9.bubble, { backgroundColor: colors.raised }], children: /* @__PURE__ */ jsx16(ChalkText, { variant: "body", children: entry.text }) }) : null,
+      photos.length > 0 ? /* @__PURE__ */ jsx16(Thumbnails, { disabled: !sent, onOpen: (index) => onOpenPhotos(photos, index), photos }) : null,
+      files.map((file) => /* @__PURE__ */ jsx16(FileCard, { attachment: file, sent }, file.attachmentId))
+    ] }),
+    entry.state === "queued" || entry.state === "sending" ? /* @__PURE__ */ jsx16(ChalkText, { style: styles9.status, tone: "textMuted", variant: "caption", children: "Sending\u2026" }) : null,
+    entry.state === "failed" ? /* @__PURE__ */ jsxs10(View9, { style: styles9.failed, children: [
+      /* @__PURE__ */ jsx16(Icon, { color: colors.dangerText, name: "alert", size: 14 }),
+      /* @__PURE__ */ jsx16(ChalkText, { color: colors.dangerText, style: styles9.failedText, variant: "label", children: "Couldn\u2019t send." }),
+      /* @__PURE__ */ jsx16(Pressable7, { accessibilityLabel: "Retry sending", accessibilityRole: "button", hitSlop: 12, onPress: () => onRetry(entry), testID: `chat.retry.${entry.key}`, children: /* @__PURE__ */ jsx16(ChalkText, { style: styles9.retry, variant: "label", children: "Retry" }) })
+    ] }) : null
+  ] });
+}
+var styles9 = StyleSheet9.create({
+  list: { flex: 1 },
+  // `.cbody`: 8 pt around the messages.
+  content: { padding: 8 },
+  empty: { flex: 1, alignItems: "center", justifyContent: "center", gap: 4, padding: 24 },
+  group: { flexDirection: "row", alignItems: "flex-start", gap: 8, marginTop: 12, marginHorizontal: 4 },
+  groupMine: { flexDirection: "row-reverse" },
+  column: { flexShrink: 1, minWidth: 0, maxWidth: 240, alignItems: "flex-start", gap: 3 },
+  columnMine: { alignItems: "flex-end" },
+  header: { flexDirection: "row", alignItems: "baseline", marginHorizontal: 4, marginBottom: 1 },
+  name: { fontFamily: fontFamilies[600], marginRight: 6, flexShrink: 1 },
+  time: { fontFamily: fontFamilies[400] },
+  message: { maxWidth: "100%", alignItems: "flex-start", gap: 4 },
+  messageMine: { alignItems: "flex-end" },
+  body: { maxWidth: "100%", alignItems: "flex-start", gap: 4 },
+  pending: { opacity: 0.55 },
+  bubble: { borderRadius: 18, paddingVertical: 8, paddingHorizontal: 12 },
+  status: { fontFamily: fontFamilies[400], marginHorizontal: 6 },
+  failed: { flexDirection: "row", alignItems: "center", gap: 4, marginHorizontal: 6 },
+  failedText: { fontFamily: fontFamilies[400] },
+  // `.lnk`: the text colour, underlined, 2 pt by 4 pt of padding.
+  retry: { fontFamily: fontFamilies[600], textDecorationLine: "underline", paddingVertical: 2, paddingHorizontal: 4 }
+});
+
+// src/sheets/people-chat/PeopleTab.tsx
+import { memo as memo6, useCallback as useCallback8, useMemo as useMemo6, useRef as useRef6, useState as useState10 } from "react";
+import { FlatList as FlatList2, Pressable as Pressable8, StyleSheet as StyleSheet10, View as View10 } from "react-native";
+import Animated6 from "react-native-reanimated";
+
+// src/sheets/people-chat/people-model.ts
+function peopleRows({ roster, waiting, handOrder, query }) {
+  const q = query.trim().toLowerCase();
+  const rows = [];
+  const byId = new Map(roster.map((participant) => [participant.participantId, participant]));
+  const raised = handOrder.filter((id) => byId.get(id)?.handRaised);
+  const numbered = raised.length > 1;
+  let headed = false;
+  const headInTheCall = () => {
+    if (headed) return;
+    headed = true;
+    rows.push({ kind: "section", key: "section.call", label: "In the call" });
+  };
+  if (waiting.length > 0) {
+    rows.push({ kind: "section", key: "section.waiting", label: "Waiting" });
+    for (const request of waiting) rows.push({ kind: "waiting", key: `waiting.${request.requestId}`, request });
+    headInTheCall();
+  }
+  if (!q && numbered) {
+    rows.push({ kind: "section", key: "section.hands", label: "Raised hands" });
+    raised.forEach((id, index) => {
+      const participant = byId.get(id);
+      if (participant) rows.push({ kind: "hand", key: `hand.${id}`, participant, order: index + 1 });
+    });
+    headInTheCall();
+  }
+  const people2 = roster.filter((participant) => !q || participant.displayName.toLowerCase().includes(q));
+  if (people2.length === 0) rows.push({ kind: "none", key: "none", query: query.trim() });
+  for (const participant of people2) {
+    const index = raised.indexOf(participant.participantId);
+    rows.push({ kind: "person", key: `person.${participant.participantId}`, participant, handNumber: numbered && index >= 0 ? index + 1 : null });
+  }
+  return rows;
+}
+function nextHandOrder(previous, roster) {
+  const raised = new Set(roster.filter((participant) => participant.handRaised).map((participant) => participant.participantId));
+  const kept = previous.filter((id) => raised.has(id));
+  const added = [...raised].filter((id) => !kept.includes(id));
+  return added.length === 0 && kept.length === previous.length ? previous : [...kept, ...added];
+}
+
+// src/sheets/people-chat/PeopleTab.tsx
+import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+var SEARCH_FROM = 9;
+function PeopleTab() {
+  const client = useSpaceClient();
+  const toasts = useToasts();
+  const { colors } = useTheme();
+  const { roster, admissionQueue } = useParticipants();
+  const self = useSelf();
+  const canAdmit = useCan("manageAdmission");
+  const canMute = useCan("muteOthers");
+  const canRemove = useCan("removeParticipant");
+  const canRename = useCan("renameSelf");
+  const [query, setQuery] = useState10("");
+  const [confirmMuteAll, setConfirmMuteAll] = useState10(false);
+  const muteAllRef = useRef6(null);
+  const handOrder = useRef6([]);
+  handOrder.current = useMemo6(() => nextHandOrder(handOrder.current, roster), [roster]);
+  const waiting = canAdmit ? admissionQueue : NONE;
+  const rows = useMemo6(() => peopleRows({ roster, waiting, handOrder: handOrder.current, query }), [roster, waiting, query]);
+  const failed = useCallback8(
+    (what) => () => {
+      toasts.show({ kind: "error", dismissible: true, message: `Couldn't ${what}.` });
+    },
+    [toasts]
+  );
+  const admit = useCallback8((request) => client.participants.admit(request.requestId).catch(failed(`let ${request.displayName} in`)), [client, failed]);
+  const deny = useCallback8((request) => client.participants.deny(request.requestId).catch(failed(`deny ${request.displayName}`)), [client, failed]);
+  const mute2 = useCallback8((participant) => client.participants.mute(participant.participantId).catch(failed(`mute ${participant.displayName}`)), [client, failed]);
+  const remove = useCallback8((participant) => client.participants.remove(participant.participantId).catch(failed(`remove ${participant.displayName}`)), [client, failed]);
+  const rename = useCallback8((name) => client.participants.renameSelf(name).catch(failed("change your name")), [client, failed]);
+  const loud = useMemo6(() => roster.filter((participant) => participant.participantId !== self.participantId && participant.media.microphone === "active"), [roster, self.participantId]);
+  const muteAll = useCallback8(() => {
+    setConfirmMuteAll(false);
+    Promise.all(loud.map((participant) => client.participants.mute(participant.participantId))).catch(failed("mute everyone"));
+  }, [client, failed, loud]);
+  const renderItem = useCallback8(
+    ({ item }) => {
+      switch (item.kind) {
+        case "section":
+          return /* @__PURE__ */ jsx17(SectionLabel, { label: item.label });
+        case "waiting":
+          return /* @__PURE__ */ jsx17(WaitingRow, { onAdmit: admit, onDeny: deny, request: item.request });
+        case "hand":
+          return /* @__PURE__ */ jsx17(HandRow, { isSelf: item.participant.participantId === self.participantId, order: item.order, participant: item.participant });
+        case "none":
+          return /* @__PURE__ */ jsx17(ChalkText, { style: styles10.none, tone: "textMuted", variant: "meta", children: item.query ? `No one in the call matches \u201C${item.query}\u201D.` : "No one else is in the call." });
+        case "person": {
+          const isSelf = item.participant.participantId === self.participantId;
+          return /* @__PURE__ */ jsx17(PersonRow, { canMute: canMute && !isSelf, canRemove: canRemove && !isSelf, canRename: canRename && isSelf, handNumber: item.handNumber, isSelf, onMute: mute2, onRemove: remove, onRename: rename, participant: item.participant });
+        }
+      }
+    },
+    [admit, canMute, canRemove, canRename, deny, mute2, remove, rename, self.participantId]
+  );
+  const header = /* @__PURE__ */ jsxs11(View10, { children: [
+    canMute ? /* @__PURE__ */ jsx17(View10, { style: styles10.controls, children: /* @__PURE__ */ jsx17(HostChip, { disabled: loud.length === 0, expanded: confirmMuteAll, buttonRef: muteAllRef, onPress: () => setConfirmMuteAll(true) }) }) : null,
+    roster.length >= SEARCH_FROM ? /* @__PURE__ */ jsxs11(View10, { style: [styles10.search, { backgroundColor: colors.raised }], children: [
+      /* @__PURE__ */ jsx17(Icon, { color: colors.textMuted, name: "search", size: 16 }),
+      /* @__PURE__ */ jsx17(TextField, { accessibilityLabel: "Search people", autoCapitalize: "none", autoCorrect: false, onChangeText: setQuery, placeholder: "Search people", returnKeyType: "search", testID: "people.search", value: query })
+    ] }) : null
+  ] });
+  return /* @__PURE__ */ jsxs11(Fragment3, { children: [
+    /* @__PURE__ */ jsx17(FlatList2, { contentContainerStyle: styles10.content, data: rows, initialNumToRender: 12, keyboardShouldPersistTaps: "handled", keyExtractor: (row) => row.key, ListHeaderComponent: header, maxToRenderPerBatch: 12, renderItem, style: styles10.list, testID: "people.list", windowSize: 7 }),
+    /* @__PURE__ */ jsx17(Menu, { accessibilityLabel: "Mute everyone", anchorRef: muteAllRef, minWidth: 280, onClose: () => setConfirmMuteAll(false), open: confirmMuteAll, testID: "people.mute-all.confirm", children: /* @__PURE__ */ jsxs11(View10, { style: styles10.confirm, children: [
+      /* @__PURE__ */ jsx17(ChalkText, { variant: "cardTitle", children: "Mute everyone?" }),
+      /* @__PURE__ */ jsx17(ChalkText, { style: styles10.confirmText, tone: "textSoft", variant: "meta", children: `${loud.length} ${loud.length === 1 ? "person" : "people"} will be muted. They can unmute themselves.` }),
+      /* @__PURE__ */ jsxs11(View10, { style: styles10.confirmButtons, children: [
+        /* @__PURE__ */ jsx17(PillButton, { label: "Cancel", onPress: () => setConfirmMuteAll(false), size: "sm", testID: "people.mute-all.cancel" }),
+        /* @__PURE__ */ jsx17(PillButton, { label: "Mute everyone", onPress: muteAll, size: "sm", testID: "people.mute-all.confirm-button", variant: "primary" })
+      ] })
+    ] }) })
+  ] });
+}
+var NONE = [];
+function HostChip({ disabled, expanded, onPress, buttonRef }) {
+  const { colors } = useTheme();
+  const press = usePressAnimation("pill");
+  return /* @__PURE__ */ jsx17(Pressable8, { accessibilityHint: "Asks you to confirm", accessibilityLabel: "Mute everyone", accessibilityRole: "button", accessibilityState: { disabled, expanded }, disabled, onPress, onPressIn: press.onPressIn, onPressOut: press.onPressOut, ref: buttonRef, testID: "people.mute-all", children: ({ pressed }) => /* @__PURE__ */ jsxs11(Animated6.View, { style: [styles10.chip, { backgroundColor: pressed || expanded ? colors.hover : colors.raised }, disabled ? styles10.disabled : press.scaleStyle], children: [
+    /* @__PURE__ */ jsx17(Icon, { color: colors.textMuted, name: "micOff", size: 16 }),
+    /* @__PURE__ */ jsx17(ChalkText, { variant: "button", children: "Mute everyone" })
+  ] }) });
+}
+var SectionLabel = memo6(function SectionLabel2({ label }) {
+  return /* @__PURE__ */ jsx17(View10, { accessibilityRole: "header", accessible: true, style: styles10.section, children: /* @__PURE__ */ jsx17(ChalkText, { tone: "textMuted", variant: "section", children: label }) });
+});
+function Face({ name }) {
+  return /* @__PURE__ */ jsx17(View10, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: /* @__PURE__ */ jsx17(FaceAvatar, { name, size: 32 }) });
+}
+var WaitingRow = memo6(function WaitingRow2({ request, onAdmit, onDeny }) {
+  return /* @__PURE__ */ jsxs11(View10, { style: styles10.row, testID: `people.waiting.${request.participantId}`, children: [
+    /* @__PURE__ */ jsx17(Face, { name: request.displayName }),
+    /* @__PURE__ */ jsx17(ChalkText, { numberOfLines: 1, style: styles10.name, variant: "bodyMedium", children: request.displayName }),
+    /* @__PURE__ */ jsx17(PillButton, { accessibilityLabel: `Deny ${request.displayName}`, label: "Deny", onPress: () => onDeny(request), size: "sm", testID: `people.deny.${request.participantId}` }),
+    /* @__PURE__ */ jsx17(PillButton, { accessibilityLabel: `Let ${request.displayName} in`, label: "Let in", onPress: () => onAdmit(request), size: "sm", testID: `people.admit.${request.participantId}`, variant: "primary" })
+  ] });
+});
+var HandRow = memo6(function HandRow2({ participant, order, isSelf }) {
+  return /* @__PURE__ */ jsxs11(View10, { accessible: true, accessibilityLabel: `${participant.displayName}${isSelf ? " (You)" : ""}, hand raised, number ${order}`, style: [styles10.row, styles10.handRow], testID: `people.hand.${participant.participantId}`, children: [
+    /* @__PURE__ */ jsx17(View10, { style: styles10.handNumber, children: /* @__PURE__ */ jsx17(ChalkText, { color: fixed.handText, variant: "section", children: order }) }),
+    /* @__PURE__ */ jsx17(Face, { name: participant.displayName }),
+    /* @__PURE__ */ jsxs11(ChalkText, { numberOfLines: 1, style: styles10.name, variant: "bodyMedium", children: [
+      participant.displayName,
+      isSelf ? /* @__PURE__ */ jsx17(ChalkText, { tone: "textMuted", variant: "meta", children: "  (You)" }) : null
+    ] })
+  ] });
+});
+var PersonRow = memo6(function PersonRow2({ participant, isSelf, handNumber, canMute, canRemove, canRename, onMute, onRemove, onRename }) {
+  const { colors } = useTheme();
+  const [menuOpen, setMenuOpen] = useState10(false);
+  const [renaming, setRenaming] = useState10(false);
+  const [draft, setDraft] = useState10(participant.displayName);
+  const optionsRef = useRef6(null);
+  const host = participant.capabilities.includes("endEpisode");
+  const micOff = participant.media.microphone === "inactive";
+  const canMuteNow = canMute && participant.media.microphone === "active";
+  const hasOptions = canRename || canMuteNow || canRemove;
+  const save = () => {
+    const name = draft.trim();
+    setRenaming(false);
+    if (name && name !== participant.displayName) onRename(name);
+  };
+  if (renaming) {
+    return /* @__PURE__ */ jsxs11(View10, { style: styles10.row, testID: "people.rename", children: [
+      /* @__PURE__ */ jsx17(Face, { name: participant.displayName }),
+      /* @__PURE__ */ jsx17(View10, { style: [styles10.rename, { backgroundColor: colors.raised, boxShadow: `0px 0px 0px 2px ${colors.text}` }], children: /* @__PURE__ */ jsx17(TextField, { accessibilityLabel: "Your name", autoFocus: true, maxLength: 40, onChangeText: setDraft, onSubmitEditing: save, returnKeyType: "done", selectTextOnFocus: true, testID: "people.rename.input", value: draft }) }),
+      /* @__PURE__ */ jsx17(PillButton, { label: "Save", onPress: save, size: "sm", testID: "people.rename.save", variant: "primary" })
+    ] });
+  }
+  const status = [isSelf ? "You" : null, host ? "Host" : null, participant.handRaised ? `hand raised${handNumber ? `, number ${handNumber}` : ""}` : null, micOff ? "microphone off" : null].filter(Boolean).join(", ");
+  return /* @__PURE__ */ jsxs11(View10, { style: styles10.row, testID: `people.row.${participant.participantId}`, children: [
+    /* @__PURE__ */ jsx17(Face, { name: participant.displayName }),
+    /* @__PURE__ */ jsxs11(ChalkText, { accessibilityLabel: status ? `${participant.displayName}, ${status}` : participant.displayName, numberOfLines: 1, style: styles10.name, variant: "bodyMedium", children: [
+      participant.displayName,
+      isSelf ? /* @__PURE__ */ jsx17(ChalkText, { tone: "textMuted", variant: "meta", children: "  (You)" }) : null,
+      host ? /* @__PURE__ */ jsx17(ChalkText, { tone: "textMuted", variant: "meta", children: "  Host" }) : null
+    ] }),
+    participant.handRaised ? /* @__PURE__ */ jsxs11(View10, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: styles10.status, children: [
+      /* @__PURE__ */ jsx17(Icon, { color: colors.warning, name: "hand", size: 16 }),
+      handNumber ? /* @__PURE__ */ jsx17(ChalkText, { color: colors.warning, style: styles10.statusNumber, variant: "caption", children: handNumber }) : null
+    ] }) : null,
+    micOff ? /* @__PURE__ */ jsx17(View10, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: styles10.status, children: /* @__PURE__ */ jsx17(Icon, { color: colors.dangerText, name: "micOff", size: 16 }) }) : null,
+    hasOptions ? /* @__PURE__ */ jsx17(IconButton, { accessibilityLabel: `Options for ${participant.displayName}`, expanded: menuOpen, icon: "more", onPress: () => setMenuOpen(true), ref: optionsRef, size: 36, testID: `people.options.${participant.participantId}`, tone: "ghost" }) : null,
+    /* @__PURE__ */ jsxs11(Menu, { accessibilityLabel: "Person options", anchorRef: optionsRef, onClose: () => setMenuOpen(false), open: menuOpen, testID: "people.menu", children: [
+      canRename ? /* @__PURE__ */ jsx17(
+        MenuItem,
+        {
+          icon: "edit",
+          label: "Edit name",
+          onPress: () => {
+            setMenuOpen(false);
+            setDraft(participant.displayName);
+            setRenaming(true);
+          },
+          testID: "people.menu.rename"
+        }
+      ) : null,
+      canMuteNow ? /* @__PURE__ */ jsx17(
+        MenuItem,
+        {
+          icon: "micOff",
+          label: "Mute",
+          onPress: () => {
+            setMenuOpen(false);
+            onMute(participant);
+          },
+          testID: "people.menu.mute"
+        }
+      ) : null,
+      canRemove ? /* @__PURE__ */ jsx17(
+        MenuItem,
+        {
+          danger: true,
+          icon: "x",
+          label: "Remove from call",
+          onPress: () => {
+            setMenuOpen(false);
+            onRemove(participant);
+          },
+          testID: "people.menu.remove"
+        }
+      ) : null
+    ] })
+  ] });
+});
+var styles10 = StyleSheet10.create({
+  list: { flex: 1 },
+  content: { padding: 8, paddingBottom: 16 },
+  controls: { flexDirection: "row", flexWrap: "wrap", gap: 6, marginHorizontal: 2, marginTop: 2, marginBottom: 8 },
+  chip: { flexDirection: "row", alignItems: "center", gap: 6, height: 36, paddingLeft: 10, paddingRight: 12, borderRadius: 999 },
+  disabled: { opacity: 0.45 },
+  search: { flexDirection: "row", alignItems: "center", gap: 8, height: 40, marginHorizontal: 2, marginTop: 2, marginBottom: 8, paddingHorizontal: 14, borderRadius: 999 },
+  section: { paddingTop: 10, paddingHorizontal: 8, paddingBottom: 6 },
+  none: { paddingVertical: 16, paddingHorizontal: 8 },
+  row: { flexDirection: "row", alignItems: "center", gap: 10, minHeight: 52, paddingLeft: 8, paddingRight: 4, borderRadius: 12 },
+  handRow: { gap: 8 },
+  name: { flex: 1 },
+  handNumber: { width: 20, height: 20, borderRadius: 10, alignItems: "center", justifyContent: "center", backgroundColor: fixed.hand },
+  status: { flexDirection: "row", alignItems: "center", justifyContent: "center" },
+  statusNumber: { marginLeft: 1, fontWeight: "700" },
+  rename: { flex: 1, flexDirection: "row", alignItems: "center", height: 36, paddingHorizontal: 12, borderRadius: 999 },
+  confirm: { paddingTop: 8, paddingHorizontal: 8, paddingBottom: 4 },
+  confirmText: { marginTop: 4, marginBottom: 10 },
+  confirmButtons: { flexDirection: "row", justifyContent: "flex-end", gap: 8, marginTop: 4, marginHorizontal: 6 }
+});
+
+// src/sheets/people-chat/PeopleChatSheet.tsx
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+function PeopleChatSheet({ open, tab, onTabChange, onClose, returnFocusRef }) {
+  const { colors } = useTheme();
+  const { roster } = useParticipants();
+  const chat = useChat();
+  useMarkChatRead(open && tab === "chat");
+  const unread = chat.unreadCount > 0 && tab !== "chat";
+  return /* @__PURE__ */ jsxs12(BottomSheet, { accessibilityLabel: "People and chat", heightRatio: 0.78, onClose, open, returnFocusRef, testID: "sheet.people", variant: "card", children: [
+    /* @__PURE__ */ jsx18(SheetDragRegion, { children: /* @__PURE__ */ jsxs12(View11, { accessibilityRole: "tablist", style: [styles11.tabs, { borderBottomColor: colors.line }], children: [
+      /* @__PURE__ */ jsx18(Tab, { label: "People", count: roster.length, onPress: () => onTabChange("people"), selected: tab === "people", testID: "sheet.tab.people" }),
+      /* @__PURE__ */ jsx18(Tab, { label: "Chat", onPress: () => onTabChange("chat"), selected: tab === "chat", testID: "sheet.tab.chat", unread }),
+      /* @__PURE__ */ jsx18(View11, { style: styles11.close, children: /* @__PURE__ */ jsx18(IconButton, { accessibilityLabel: "Close", icon: "x", onPress: onClose, size: 44, testID: "sheet.people.close", tone: "ghost" }) })
+    ] }) }),
+    tab === "people" ? /* @__PURE__ */ jsx18(PeopleTab, {}) : /* @__PURE__ */ jsx18(ChatTab, {})
+  ] });
+}
+function Tab({ label, selected, onPress, count, unread = false, testID }) {
+  const { colors } = useTheme();
+  const accessibilityLabel = [count === void 0 ? label : `${label}, ${count}`, unread ? "new messages" : null].filter(Boolean).join(", ");
+  return /* @__PURE__ */ jsxs12(Pressable9, { accessibilityLabel, accessibilityRole: "tab", accessibilityState: { selected }, onPress, style: styles11.tab, testID, children: [
+    /* @__PURE__ */ jsxs12(View11, { style: styles11.tabLabel, children: [
+      /* @__PURE__ */ jsx18(ChalkText, { tone: selected ? "text" : "textMuted", variant: "bodyStrong", children: label }),
+      count === void 0 ? null : /* @__PURE__ */ jsx18(ChalkText, { style: styles11.count, tabular: true, tone: "textMuted", variant: "bodyMedium", children: count })
+    ] }),
+    selected ? /* @__PURE__ */ jsx18(View11, { style: [styles11.underline, { backgroundColor: colors.text }] }) : null,
+    unread ? /* @__PURE__ */ jsx18(View11, { style: [styles11.unread, { backgroundColor: colors.info }], testID: `${testID}.unread` }) : null
+  ] });
+}
+function useMarkChatRead(reading) {
+  const client = useSpaceClient();
+  const { messages, unreadCount } = useChat();
+  const last = messages[messages.length - 1]?.messageId;
+  useEffect10(() => {
+    if (!reading || !last || unreadCount === 0) return;
+    client.chat.markRead(last).catch(() => void 0);
+  }, [client, last, reading, unreadCount]);
+}
+var styles11 = StyleSheet11.create({
+  // `.tabs`: 4 pt above, 8 right, 10 left, a hairline under it.
+  tabs: { flexDirection: "row", alignItems: "center", gap: 4, paddingTop: 4, paddingRight: 8, paddingLeft: 10, borderBottomWidth: 1 },
+  tab: { height: 46, justifyContent: "center", paddingHorizontal: 10 },
+  tabLabel: { flexDirection: "row", alignItems: "center" },
+  count: { marginLeft: 5 },
+  underline: { position: "absolute", left: 10, right: 10, bottom: -1, height: 2, borderRadius: 2 },
+  unread: { position: "absolute", right: 0, top: 13, width: 7, height: 7, borderRadius: 4 },
+  close: { marginLeft: "auto" }
+});
+
+// src/stage/Stage.tsx
+import { memo as memo11, useCallback as useCallback13, useMemo as useMemo11, useState as useState12 } from "react";
+import { Pressable as Pressable13, StyleSheet as StyleSheet18, View as View18 } from "react-native";
+import Animated9 from "react-native-reanimated";
+
+// src/motion/MovingFrame.tsx
+import { useEffect as useEffect11, useRef as useRef7 } from "react";
+import { StyleSheet as StyleSheet12 } from "react-native";
+import Animated7, { runOnUI, useAnimatedStyle as useAnimatedStyle3, useReducedMotion, useSharedValue, withTiming as withTiming2 } from "react-native-reanimated";
+import { jsx as jsx19 } from "react/jsx-runtime";
+function MovingFrame({ frame, children, style, testID }) {
+  const reduceMotion = useReducedMotion();
+  const target = useSharedValue(frame);
+  const from = useSharedValue(frame);
+  const progress = useSharedValue(1);
+  const mounted = useRef7(false);
+  const { x, y, width, height } = frame;
+  useEffect11(() => {
+    if (!mounted.current) {
+      mounted.current = true;
+      return;
+    }
+    runOnUI((next, instant) => {
+      "worklet";
+      const t = progress.value;
+      const was = target.value;
+      const start = from.value;
+      const shown = {
+        x: was.x + (start.x - was.x) * (1 - t),
+        y: was.y + (start.y - was.y) * (1 - t),
+        width: was.width + (start.width - was.width) * (1 - t),
+        height: was.height + (start.height - was.height) * (1 - t)
+      };
+      target.value = next;
+      if (instant) {
+        from.value = next;
+        progress.value = 1;
+        return;
+      }
+      from.value = shown;
+      progress.value = 0;
+      progress.value = withTiming2(1, timings.move);
+    })({ x, y, width, height }, reduceMotion);
+  }, [x, y, width, height, reduceMotion, from, progress, target]);
+  const animatedStyle = useAnimatedStyle3(() => {
+    "worklet";
+    const next = target.value;
+    const start = from.value;
+    const rest = 1 - progress.value;
+    const scaleX = next.width > 0 ? 1 + (start.width / next.width - 1) * rest : 1;
+    const scaleY = next.height > 0 ? 1 + (start.height / next.height - 1) * rest : 1;
+    return {
+      left: next.x,
+      top: next.y,
+      width: next.width,
+      height: next.height,
+      transform: [{ translateX: (start.x - next.x) * rest }, { translateY: (start.y - next.y) * rest }, { scaleX }, { scaleY }]
+    };
+  });
+  return /* @__PURE__ */ jsx19(Animated7.View, { style: [styles12.frame, style, animatedStyle], testID, children });
+}
+var styles12 = StyleSheet12.create({
+  frame: { position: "absolute", transformOrigin: "left top" }
+});
+
+// src/motion/presence.ts
+import { withTiming as withTiming3 } from "react-native-reanimated";
+var tileEntering = () => {
+  "worklet";
+  return {
+    initialValues: { opacity: 0, transform: [{ scale: 0.97 }] },
+    animations: { opacity: withTiming3(1, timings.enter), transform: [{ scale: withTiming3(1, timings.enter) }] }
+  };
+};
+var tileLeaving = () => {
+  "worklet";
+  return {
+    initialValues: { opacity: 1 },
+    animations: { opacity: withTiming3(0, timings.leave) }
+  };
+};
+
+// src/stage/ContentTile.tsx
+import { memo as memo8, useMemo as useMemo8, useRef as useRef10 } from "react";
+import { Pressable as Pressable11, StyleSheet as StyleSheet14, View as View14 } from "react-native";
+
+// src/components/EmbeddedWhiteboard.tsx
+import { ChalkWhiteboardController } from "@q9labsai/chalk-whiteboard/embedded";
+import { useCallback as useCallback9, useEffect as useEffect12, useMemo as useMemo7, useRef as useRef8, useState as useState11 } from "react";
+import { ActivityIndicator as ActivityIndicator2, Pressable as Pressable10, Text as Text2, useWindowDimensions, View as View12 } from "react-native";
+import WebView from "react-native-webview";
+
+// src/whiteboard/embedded-whiteboard-assets.ts
+import { NativeModules as NativeModules3, Platform as Platform6 } from "react-native";
+var ANDROID_RENDERER_URL = "file:///android_asset/chalk-whiteboard/index.html";
+async function resolveEmbeddedWhiteboardRendererURL(override) {
+  if (override) return requireLocalRendererURL(override);
+  if (Platform6.OS === "android") return ANDROID_RENDERER_URL;
+  const module = NativeModules3.ChalkWhiteboardAssets;
+  if (!module?.rendererURL) throw new Error(`Chalk embedded whiteboard assets are unavailable on ${Platform6.OS}`);
+  return requireLocalRendererURL(await module.rendererURL());
+}
+function rendererURLWithContext(rendererURL, context) {
+  const separator = rendererURL.includes("?") ? "&" : "?";
+  return `${rendererURL}${separator}journeyId=${encodeURIComponent(context.journeyId)}&rendererGeneration=${encodeURIComponent(context.rendererGeneration)}`;
+}
+function isEmbeddedWhiteboardNavigationAllowed(requestURL, rendererURL) {
+  if (requestURL === "about:blank") return true;
+  try {
+    const renderer = new URL(rendererURL);
+    const request = new URL(requestURL);
+    if (renderer.protocol !== "file:" || request.protocol !== "file:" || request.host !== renderer.host) return false;
+    const requestPath = decodeURIComponent(request.pathname);
+    if (requestPath.split("/").includes("..")) return false;
+    const rendererDirectory = renderer.pathname.slice(0, renderer.pathname.lastIndexOf("/") + 1);
+    return request.pathname === renderer.pathname || request.pathname.startsWith(rendererDirectory);
+  } catch {
+    return false;
+  }
+}
+function requireLocalRendererURL(value) {
+  if (!value.startsWith("file://")) throw new Error("Chalk embedded whiteboard renderer must be a local file URL");
+  return value;
+}
+
+// src/whiteboard/embedded-whiteboard-viewport.ts
+function createEmbeddedWhiteboardViewport(width, height, scale) {
+  if (!Number.isFinite(width) || width <= 0 || !Number.isFinite(height) || height <= 0 || !Number.isFinite(scale) || scale <= 0) return null;
+  return { width, height, scale };
+}
+
+// src/components/EmbeddedWhiteboard.tsx
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+var embeddedWhiteboardWebViewSecurityPolicy = Object.freeze({
+  allowFileAccess: true,
+  allowFileAccessFromFileURLs: false,
+  allowUniversalAccessFromFileURLs: false,
+  cacheEnabled: false,
+  domStorageEnabled: false,
+  javaScriptCanOpenWindowsAutomatically: false,
+  javaScriptEnabled: true,
+  mixedContentMode: "never",
+  setSupportMultipleWindows: false,
+  sharedCookiesEnabled: false,
+  thirdPartyCookiesEnabled: false
+});
+function EmbeddedWhiteboard({ transport, journeyId, traceparent, tracestate, canDraw, canClear, theme: themeOverride, localParticipantColor, rendererURL: rendererURLOverride, style, testID, onMetric, onError, onUserExport }) {
+  const theme = themeOverride ?? "light";
+  const webViewRef = useRef8(null);
+  const controllerRef = useRef8(null);
+  const listenersRef = useRef8(/* @__PURE__ */ new Set());
+  const onMetricRef = useRef8(onMetric);
+  const onErrorRef = useRef8(onError);
+  const onUserExportRef = useRef8(onUserExport);
+  const [rendererURL, setRendererURL] = useState11(null);
+  const [rendererGeneration, setRendererGeneration] = useState11(createRendererGeneration);
+  const [loadAttempt, setLoadAttempt] = useState11(0);
+  const [loadError, setLoadError] = useState11(null);
+  const [compatibilityNotice, setCompatibilityNotice] = useState11(null);
+  const [layout, setLayout] = useState11({ width: 0, height: 0 });
+  const { scale } = useWindowDimensions();
+  const viewport = useMemo7(() => createEmbeddedWhiteboardViewport(layout.width, layout.height, scale), [layout.height, layout.width, scale]);
+  const latestViewportRef = useRef8(viewport);
+  latestViewportRef.current = viewport;
+  onMetricRef.current = onMetric;
+  onErrorRef.current = onError;
+  onUserExportRef.current = onUserExport;
+  const rendererPort = useMemo7(
+    () => ({
+      postMessage: (message2) => webViewRef.current?.postMessage(message2),
+      subscribe: (listener) => {
+        listenersRef.current.add(listener);
+        return () => listenersRef.current.delete(listener);
+      }
+    }),
+    []
+  );
+  const handleControllerError = useCallback9((error2) => onErrorRef.current?.(error2), []);
+  const handleControllerMetric = useCallback9((metric) => onMetricRef.current?.(metric), []);
+  const handleControllerUserExport = useCallback9((value) => onUserExportRef.current?.(value), []);
+  useEffect12(() => {
+    let active = true;
+    setLoadError(null);
+    void resolveEmbeddedWhiteboardRendererURL(rendererURLOverride).then((url) => {
+      if (active) setRendererURL(url);
+    }).catch((cause) => {
+      if (!active) return;
+      const message2 = cause instanceof Error ? cause.message : "Chalk whiteboard assets are unavailable";
+      setLoadError(message2);
+      onError?.({ code: "renderer_asset_unavailable", message: message2, recoverable: false });
+    });
+    return () => {
+      active = false;
+    };
+  }, [loadAttempt, onError, rendererURLOverride]);
+  useEffect12(() => {
+    setCompatibilityNotice(null);
+    const controller = new ChalkWhiteboardController({
+      renderer: rendererPort,
+      transport,
+      journeyId,
+      ...traceparent ? { traceparent } : {},
+      ...tracestate ? { tracestate } : {},
+      canDraw,
+      canClear,
+      theme,
+      ...localParticipantColor ? { localParticipantColor } : {},
+      onMetric: handleControllerMetric,
+      onError: handleControllerError,
+      onCompatibilityChange: (state) => setCompatibilityNotice(state.message),
+      onUserExport: handleControllerUserExport
+    });
+    controller.start();
+    if (latestViewportRef.current) controller.setViewport(latestViewportRef.current);
+    controllerRef.current = controller;
+    return () => {
+      if (controllerRef.current === controller) controllerRef.current = null;
+      controller.stop();
+    };
+  }, [handleControllerError, handleControllerMetric, handleControllerUserExport, journeyId, localParticipantColor, rendererPort, theme, traceparent, tracestate, transport]);
+  useEffect12(() => {
+    controllerRef.current?.setCapabilities({ canDraw, canClear });
+  }, [canClear, canDraw]);
+  useEffect12(() => {
+    if (viewport) controllerRef.current?.setViewport(viewport);
+  }, [viewport]);
+  const handleLayout = useCallback9((event) => {
+    const next = { width: event.nativeEvent.layout.width, height: event.nativeEvent.layout.height };
+    setLayout((current) => current.width === next.width && current.height === next.height ? current : next);
+  }, []);
+  const sourceURL = rendererURL ? rendererURLWithContext(rendererURL, { journeyId, rendererGeneration }) : null;
+  const handleMessage = (event) => {
+    const message2 = event.nativeEvent.data;
+    listenersRef.current.forEach((listener) => listener(message2));
+  };
+  const allowNavigation = (request) => Boolean(rendererURL && isEmbeddedWhiteboardNavigationAllowed(request.url, rendererURL));
+  const reloadRenderer = () => {
+    controllerRef.current?.rendererReloaded();
+    setRendererGeneration(createRendererGeneration());
+  };
+  const retryRenderer = () => {
+    setLoadError(null);
+    setLoadAttempt((attempt) => attempt + 1);
+    reloadRenderer();
+  };
+  const handleRendererTermination = () => {
+    handleControllerMetric({ name: "whiteboard.renderer.termination", value: 1 });
+    handleControllerError({
+      code: "renderer_terminated",
+      message: "The whiteboard renderer stopped and is recovering.",
+      recoverable: true
+    });
+    reloadRenderer();
+  };
+  if (loadError) {
+    return /* @__PURE__ */ jsxs13(View12, { style: [{ flex: 1 }, style], testID, children: [
+      /* @__PURE__ */ jsx20(Text2, { children: "Whiteboard unavailable" }),
+      /* @__PURE__ */ jsx20(Text2, { children: loadError }),
+      /* @__PURE__ */ jsx20(Pressable10, { accessibilityRole: "button", onPress: retryRenderer, children: /* @__PURE__ */ jsx20(Text2, { children: "Retry" }) })
+    ] });
+  }
+  if (!sourceURL || !rendererURL) {
+    return /* @__PURE__ */ jsxs13(View12, { style: [{ flex: 1 }, style], testID, children: [
+      /* @__PURE__ */ jsx20(ActivityIndicator2, {}),
+      /* @__PURE__ */ jsx20(Text2, { children: "Loading whiteboard\u2026" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs13(View12, { onLayout: handleLayout, style: [{ flex: 1 }, style], testID, children: [
+    /* @__PURE__ */ jsx20(
+      WebView,
+      {
+        ref: webViewRef,
+        ...embeddedWhiteboardWebViewSecurityPolicy,
+        allowingReadAccessToURL: rendererURL.slice(0, rendererURL.lastIndexOf("/") + 1),
+        mediaPlaybackRequiresUserAction: true,
+        onContentProcessDidTerminate: handleRendererTermination,
+        onError: (event) => {
+          const message2 = event.nativeEvent.description || "The whiteboard renderer failed to load";
+          setLoadError(message2);
+          handleControllerError({ code: "renderer_load_failed", message: message2, recoverable: true });
+        },
+        onMessage: handleMessage,
+        onRenderProcessGone: handleRendererTermination,
+        onShouldStartLoadWithRequest: allowNavigation,
+        originWhitelist: ["file://*"],
+        pullToRefreshEnabled: false,
+        scrollEnabled: false,
+        source: { uri: sourceURL },
+        style: { flex: 1 },
+        webviewDebuggingEnabled: typeof __DEV__ !== "undefined" && __DEV__
+      },
+      rendererGeneration
+    ),
+    compatibilityNotice ? /* @__PURE__ */ jsx20(View12, { pointerEvents: "none", children: /* @__PURE__ */ jsx20(Text2, { children: compatibilityNotice }) }) : null
+  ] });
+}
+function createRendererGeneration() {
+  return globalThis.crypto?.randomUUID?.() ?? `whiteboard-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+
+// src/media/native-webrtc.ts
+import { MediaStream, RTCView, mediaDevices } from "@cloudflare/react-native-webrtc";
+function createNativeMediaStream(track) {
+  const stream = Reflect.construct(MediaStream, [[track]]);
+  if (!(stream instanceof MediaStream)) throw new TypeError("React Native WebRTC did not create a media stream");
+  return stream;
+}
+
+// src/components/rtc-video-view-availability.ts
+function canRenderRtcVideoView(component) {
+  return typeof component === "function" || typeof component === "object" && component !== null;
+}
+
+// src/components/RtcVideoView.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+function RtcVideoView(props) {
+  if (!canRenderRtcVideoView(RTCView)) {
+    return null;
+  }
+  const RtcView = RTCView;
+  return /* @__PURE__ */ jsx21(RtcView, { ...props });
+}
+
+// src/primitives/NameTag.tsx
+import { memo as memo7 } from "react";
+import { StyleSheet as StyleSheet13, View as View13 } from "react-native";
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+var NameTag = memo7(function NameTag2({ name, muted = false, pinned = false, icon, you = false, handRaised = false, handOrder, testID }) {
+  const tagRef = useMeasuredRef(testID, styles13.tag);
+  return /* @__PURE__ */ jsx22(View13, { pointerEvents: "none", style: styles13.slot, children: /* @__PURE__ */ jsxs14(View13, { ref: tagRef, style: styles13.tag, testID, children: [
+    pinned ? /* @__PURE__ */ jsx22(Icon, { color: fixed.overlayText, name: "pin", size: 14 }) : null,
+    icon ? /* @__PURE__ */ jsx22(Icon, { color: fixed.overlayText, name: icon, size: 14 }) : null,
+    /* @__PURE__ */ jsx22(ChalkText, { color: fixed.overlayText, numberOfLines: 1, style: styles13.name, variant: "label", children: name }),
+    you ? /* @__PURE__ */ jsx22(ChalkText, { color: fixed.overlayText, style: styles13.you, variant: "label", children: "(You)" }) : null,
+    muted ? /* @__PURE__ */ jsx22(Icon, { color: fixed.overlayDanger, name: "micOff", size: 14 }) : null,
+    handRaised ? /* @__PURE__ */ jsxs14(View13, { style: styles13.hand, children: [
+      /* @__PURE__ */ jsx22(Icon, { color: fixed.overlayWarning, name: "hand", size: 14 }),
+      handOrder !== void 0 ? /* @__PURE__ */ jsx22(ChalkText, { color: fixed.overlayWarning, style: styles13.order, tabular: true, children: handOrder }) : null
+    ] }) : null
+  ] }) });
+});
+var INSET = 8;
+var HEIGHT = 24;
+var nameTagZone = INSET + HEIGHT;
+var styles13 = StyleSheet13.create({
+  // `.tag`: 8 pt from the bottom-left corner and never wider than the tile less 16 pt.
+  slot: { position: "absolute", left: INSET, right: INSET, bottom: INSET, flexDirection: "row", zIndex: 2 },
+  tag: { flexShrink: 1, height: HEIGHT, paddingHorizontal: 8, borderRadius: 6, backgroundColor: fixed.overlay, flexDirection: "row", alignItems: "center", gap: 5 },
+  name: { flexShrink: 1 },
+  you: { flexShrink: 0 },
+  hand: { flexDirection: "row", alignItems: "center", gap: 2 },
+  order: { ...type.caption, fontFamily: fontFamilies[700] }
+});
+
+// src/stage/space-selector.ts
+import { useCallback as useCallback10, useRef as useRef9, useSyncExternalStore as useSyncExternalStore2 } from "react";
+function useSpaceSelector(select, isEqual = Object.is) {
+  const client = useSpaceClient();
+  const cache = useRef9(null);
+  const subscribe = useCallback10((listener) => client.subscribe(listener), [client]);
+  const getSnapshot = useCallback10(() => {
+    const snapshot = client.getSnapshot();
+    const cached = cache.current;
+    if (cached && cached.snapshot === snapshot && cached.select === select) return cached.value;
+    const next = select(snapshot);
+    const value = cached && cached.select === select && isEqual(cached.value, next) ? cached.value : next;
+    cache.current = { snapshot, select, value };
+    return value;
+  }, [client, isEqual, select]);
+  return useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
+}
+function shallowEqual(a, b) {
+  const keys = Object.keys(a);
+  if (keys.length !== Object.keys(b).length) return false;
+  return keys.every((key) => Object.is(Reflect.get(a, key), Reflect.get(b, key)));
+}
+
+// src/stage/ContentTile.tsx
+import { Fragment as Fragment4, jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+var ContentTile = memo8(function ContentTile2({ content, inner, mini, onShowInSpotlight }) {
+  const { colors } = useTheme();
+  const tileStyle = [styles14.tile, { backgroundColor: colors.tile }];
+  const tileRef = useMeasuredRef("tile.content", tileStyle);
+  return /* @__PURE__ */ jsx23(View14, { ref: tileRef, style: tileStyle, testID: "tile.content", children: content.kind === "screen" ? /* @__PURE__ */ jsx23(ScreenShare, { inner, mini, onShowInSpotlight, sharerId: content.sharerId }) : /* @__PURE__ */ jsx23(Board, { mini, onShowInSpotlight }) });
+});
+function ScreenShare({ sharerId, inner, mini, onShowInSpotlight }) {
+  const { colors } = useTheme();
+  const select = useMemo8(() => (snapshot) => snapshot.media.remote.find((media) => media.participantId === sharerId && media.source === "screen")?.track ?? null, [sharerId]);
+  const track = useSpaceSelector(select);
+  const selectName = useMemo8(() => (snapshot) => snapshot.participants.roster.find((person) => person.participantId === sharerId)?.displayName ?? "", [sharerId]);
+  const sharerName = useSpaceSelector(selectName);
+  const slot = useDevScenario().screenSlots?.[sharerId];
+  const streamURL = useMemo8(() => track ? createNativeMediaStream(track).toURL() : null, [track]);
+  const name = `${sharerName.split(" ")[0]}\u2019s screen`;
+  return /* @__PURE__ */ jsxs15(Fragment4, { children: [
+    /* @__PURE__ */ jsx23(View14, { style: [styles14.box, { left: inner.x, top: inner.y, width: inner.width, height: inner.height, backgroundColor: colors.tile }], testID: "tile.content.screen", children: slot ?? (streamURL ? /* @__PURE__ */ jsx23(RtcVideoView, { objectFit: "contain", streamURL, style: StyleSheet14.absoluteFill }) : null) }),
+    mini ? /* @__PURE__ */ jsx23(Pressable11, { accessibilityLabel: `Show ${name} in spotlight`, accessibilityRole: "button", onPress: onShowInSpotlight, style: StyleSheet14.absoluteFill, testID: "tile.content.open" }) : null,
+    /* @__PURE__ */ jsx23(NameTag, { icon: "share", name, testID: "tile.content.name" })
+  ] });
+}
+var selectBoard = (snapshot) => snapshot.whiteboard.engine.status;
+function Board({ mini, onShowInSpotlight }) {
+  const client = useSpaceClient();
+  const { colors, scheme } = useTheme();
+  const status = useSpaceSelector(selectBoard);
+  const chipStyle = [styles14.viewOnly, { backgroundColor: colors.surface, borderColor: colors.lineStrong }];
+  const chipRef = useMeasuredRef("tile.content.view-only", chipStyle);
+  const transport = useMemo8(() => client.whiteboard.transport(), [client, status]);
+  const journeyId = useRef10(`board-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`).current;
+  return /* @__PURE__ */ jsxs15(Fragment4, { children: [
+    transport ? /* @__PURE__ */ jsx23(EmbeddedWhiteboard, { canClear: false, canDraw: false, journeyId, style: StyleSheet14.absoluteFill, testID: "tile.content.board", theme: scheme, transport }) : null,
+    mini ? /* @__PURE__ */ jsxs15(Fragment4, { children: [
+      /* @__PURE__ */ jsx23(Pressable11, { accessibilityLabel: "Show the board in spotlight", accessibilityRole: "button", onPress: onShowInSpotlight, style: StyleSheet14.absoluteFill, testID: "tile.content.open" }),
+      /* @__PURE__ */ jsx23(NameTag, { icon: "pen", name: "Board", testID: "tile.content.name" })
+    ] }) : /* @__PURE__ */ jsxs15(View14, { accessibilityLiveRegion: "polite", accessibilityRole: "text", accessible: true, ref: chipRef, style: chipStyle, testID: "tile.content.view-only", children: [
+      /* @__PURE__ */ jsx23(Icon, { color: colors.textMuted, name: "lock", size: 16 }),
+      /* @__PURE__ */ jsx23(ChalkText, { tone: "textSoft", variant: "section", children: "View only" })
+    ] })
+  ] });
+}
+var styles14 = StyleSheet14.create({
+  tile: { flex: 1, overflow: "hidden", borderRadius: radii.tilePhone },
+  box: { position: "absolute", overflow: "hidden" },
+  // `.vchip`: a 30 pt pill 12 pt in from the board's top-left corner, with a one-pixel ring.
+  viewOnly: { position: "absolute", left: 12, top: 12, height: 30, paddingHorizontal: 12, borderRadius: radii.round, borderWidth: 1, flexDirection: "row", alignItems: "center", gap: 6, zIndex: 3 }
+});
+
+// src/stage/layout.ts
+var SOFT = [0.8, 2];
+var HARD = [0.6, 2.4];
+var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+var area = (frame) => frame.width * frame.height;
+function contain(box, aspect) {
+  if (!aspect) return box;
+  let width = box.width;
+  let height = width / aspect;
+  if (height > box.height) {
+    height = box.height;
+    width = height * aspect;
+  }
+  return { x: box.x + (box.width - width) / 2, y: box.y + (box.height - height) / 2, width, height };
+}
+function justifyOptions(portrait) {
+  return portrait ? { t: 1, minW: 88, minH: 72 } : { t: 1.5, minW: 100, minH: 64 };
+}
+function justifyPlan(box, units, options, firstRowTwo) {
+  let best = null;
+  for (let rows = 1; rows <= units; rows++) {
+    const base = Math.floor(units / rows);
+    const extra = units % rows;
+    if (!base) break;
+    const counts = Array.from({ length: rows }, (_, index) => base + (index < extra ? 1 : 0));
+    if (firstRowTwo && (counts[0] ?? 0) < 2) continue;
+    const height = (box.height - (rows - 1) * STAGE_GAP) / rows;
+    if (height <= 0) break;
+    let cost = 0;
+    let minWidth = Infinity;
+    for (const count of counts) {
+      const width = (box.width - (count - 1) * STAGE_GAP) / count;
+      const aspect = width / height;
+      minWidth = Math.min(minWidth, width);
+      const hard = aspect < HARD[0] ? Math.log(HARD[0] / aspect) : aspect > HARD[1] ? Math.log(aspect / HARD[1]) : 0;
+      const soft = aspect < SOFT[0] ? Math.log(SOFT[0] / aspect) : aspect > SOFT[1] ? Math.log(aspect / SOFT[1]) : 0;
+      cost += count * (hard * 60 + soft * 3 + Math.abs(Math.log(aspect / options.t)));
+    }
+    cost /= units;
+    if (!best || cost < best.cost) best = { counts, height, cost, minWidth };
+  }
+  return best;
+}
+function justifiedRows(box, list, options) {
+  const weight = (key) => key !== "more" && key.kind === "content" ? 2 : 1;
+  const contentFirst = list[0]?.kind === "content";
+  const total = list.length;
+  let keys = list;
+  let plan = null;
+  for (let kept = total; kept >= 1; kept--) {
+    keys = kept === total ? list : [...list.slice(0, kept - 1), "more"];
+    plan = justifyPlan(
+      box,
+      keys.reduce((sum, key) => sum + weight(key), 0),
+      options,
+      contentFirst
+    );
+    if (plan && plan.minWidth >= options.minW && plan.height >= options.minH || kept <= (contentFirst ? 2 : 1)) break;
+  }
+  if (!plan) return { placed: [] };
+  let height = plan.height;
+  for (const count of plan.counts) {
+    const width = (box.width - (count - 1) * STAGE_GAP) / count;
+    if (width / height < HARD[0]) height = Math.min(height, width / HARD[0]);
+  }
+  const top = box.y + (box.height - plan.counts.length * height - (plan.counts.length - 1) * STAGE_GAP) / 2;
+  const placed = [];
+  let index = 0;
+  plan.counts.forEach((count, row) => {
+    let unit = (box.width - (count - 1) * STAGE_GAP) / count;
+    if (unit / height > HARD[1]) unit = height * HARD[1];
+    let x = box.x + (box.width - count * unit - (count - 1) * STAGE_GAP) / 2;
+    let used = 0;
+    while (used < count && index < keys.length) {
+      const key = keys[index];
+      if (key === void 0) break;
+      const units = weight(key);
+      const frame = { x, y: top + row * (height + STAGE_GAP), width: unit * units + STAGE_GAP * (units - 1), height };
+      placed.push(key === "more" ? { key, frame, more: total - keys.length + 1 } : { key, frame });
+      x += frame.width + STAGE_GAP;
+      used += units;
+      index++;
+    }
+  });
+  return { placed };
+}
+function fillOne(box, aspect) {
+  let width = box.width;
+  let height = box.height;
+  if (width / height > aspect.max) width = height * aspect.max;
+  else if (width / height < aspect.min) height = width / aspect.min;
+  if (aspect.cap && width > aspect.cap) {
+    height *= aspect.cap / width;
+    width = aspect.cap;
+  }
+  return { x: box.x + (box.width - width) / 2, y: box.y + (box.height - height) / 2, width, height };
+}
+function stageLayout(input) {
+  const { stage, portrait, content } = input;
+  if (input.layout === "grid") {
+    const rows = justifiedRows(stage, content ? [{ kind: "content" }, ...people(input.order)] : people(input.order), justifyOptions(portrait));
+    return toItems(rows.placed, content, { miniContent: true });
+  }
+  if (content && input.pinned !== null) return spotlightPeople(input, [{ kind: "content" }, ...people(input.order)]);
+  return content ? spotlightContent(input, content) : spotlightPeople(input, people(input.order));
+}
+function people(order) {
+  return order.map((id) => ({ kind: "person", id }));
+}
+function spotlightContent(input, content) {
+  const { stage, portrait } = input;
+  const peopleMin = portrait ? content.kind === "board" ? clamp(Math.round(stage.height * 0.17), 96, 120) : Math.round(stage.height * 0.3) : clamp(stage.height * 0.17, 104, 150);
+  const contentMin = portrait ? 120 : clamp(stage.width * 0.15, 180, 260);
+  const belowBox = contain({ ...stage, height: stage.height - peopleMin - STAGE_GAP }, content.aspect);
+  const below = { tile: { ...stage, height: belowBox.height }, rest: { x: stage.x, y: stage.y + belowBox.height + STAGE_GAP, width: stage.width, height: stage.height - belowBox.height - STAGE_GAP }, area: area(belowBox) };
+  const besideBox = contain({ ...stage, width: stage.width - contentMin - STAGE_GAP }, content.aspect);
+  const beside = { tile: { ...stage, width: besideBox.width }, rest: { x: stage.x + besideBox.width + STAGE_GAP, y: stage.y, width: stage.width - besideBox.width - STAGE_GAP, height: stage.height }, area: area(besideBox) };
+  const best = beside.area > below.area * 1.005 ? beside : below;
+  const rows = justifiedRows(best.rest, people(input.order), justifyOptions(portrait));
+  const tile = { kind: "content", frame: best.tile, inner: contain({ x: 0, y: 0, width: best.tile.width, height: best.tile.height }, content.aspect), mini: false };
+  return [tile, ...toItems(rows.placed, content, { miniContent: true })];
+}
+function spotlightPeople(input, list) {
+  const { stage, portrait, content, pinned, spot } = input;
+  const ids = list.flatMap((slot) => slot.kind === "person" ? [slot.id] : []);
+  const main = content ? pinned : pinned !== null && ids.includes(pinned) ? pinned : spot !== null && ids.includes(spot) ? spot : ids[0] ?? null;
+  if (main === null) return [];
+  const rest = list.filter((slot) => slot.kind !== "person" || slot.id !== main);
+  const first = rest[0];
+  if (!first) return [{ kind: "person", id: main, frame: fillOne(stage, { min: portrait ? 0.4 : 4 / 3, max: 16 / 9, cap: portrait ? 0 : stage.width * 0.56 }), big: false, float: false }];
+  if (rest.length === 1) {
+    const size = portrait ? { width: 96, height: 128 } : { width: 132, height: 96 };
+    const y = portrait ? stage.y + 12 : stage.y + stage.height - size.height - 12;
+    const floating = { x: stage.x + stage.width - size.width - 12, y, ...size };
+    return [{ kind: "person", id: main, frame: stage, big: false, float: false }, ...toItems([{ key: first, frame: floating }], content, { miniContent: true, float: true })];
+  }
+  const peopleMin = portrait ? Math.round(stage.height * 0.3) : clamp(stage.height * 0.17, 104, 150);
+  const sideMin = clamp(stage.width * 0.15, 180, 260);
+  const off = (frame) => Math.abs(Math.log(frame.width / frame.height / (16 / 9)));
+  const below = { main: { ...stage, height: stage.height - peopleMin - STAGE_GAP }, rest: { x: stage.x, y: stage.y + stage.height - peopleMin, width: stage.width, height: peopleMin } };
+  const beside = { main: { ...stage, width: stage.width - sideMin - STAGE_GAP }, rest: { x: stage.x + stage.width - sideMin, y: stage.y, width: sideMin, height: stage.height } };
+  const chosen = portrait || off(below.main) <= off(beside.main) ? below : beside;
+  return [{ kind: "person", id: main, frame: chosen.main, big: true, float: false }, ...toItems(justifiedRows(chosen.rest, rest, justifyOptions(portrait)).placed, content, { miniContent: true })];
+}
+function toItems(placed, content, options) {
+  return placed.map(({ key, frame, more }) => {
+    if (key === "more") return { kind: "more", frame, count: more ?? 0 };
+    if (key.kind === "person") return { kind: "person", id: key.id, frame, big: false, float: options.float ?? false };
+    return { kind: "content", frame, inner: contain({ x: 0, y: 0, width: frame.width, height: frame.height }, content?.aspect ?? null), mini: options.miniContent };
+  });
+}
+function nextStageOrder(previous, present, selfId, speaker) {
+  const order = previous.order.filter((id) => present.includes(id));
+  for (const id of present) if (!order.includes(id)) order.push(id);
+  let spot = previous.spot !== null && present.includes(previous.spot) ? previous.spot : present.find((id) => id !== selfId) ?? present[0] ?? null;
+  if (speaker !== null && speaker !== selfId && speaker !== spot && present.includes(speaker)) {
+    const from = spot === null ? -1 : order.indexOf(spot);
+    const to = order.indexOf(speaker);
+    if (from >= 0 && to >= 0) [order[from], order[to]] = [speaker, order[from] ?? speaker];
+    spot = speaker;
+  }
+  const unchanged = spot === previous.spot && order.length === previous.order.length && order.every((id, index) => id === previous.order[index]);
+  return unchanged ? previous : { order, spot };
+}
+
+// src/stage/ParticipantTile.tsx
+import { memo as memo10, useCallback as useCallback11, useEffect as useEffect14, useMemo as useMemo9 } from "react";
+import { Pressable as Pressable12, StyleSheet as StyleSheet16, View as View16 } from "react-native";
+import { useSharedValue as useSharedValue3, withTiming as withTiming5 } from "react-native-reanimated";
+
+// src/avatar/tile-avatar-size.ts
+function tileAvatarSize(width, height) {
+  return Math.round(Math.min(150, Math.max(32, Math.min(width, height) * 0.42)));
+}
+
+// src/primitives/TileShell.tsx
+import { memo as memo9, useEffect as useEffect13 } from "react";
+import { StyleSheet as StyleSheet15, View as View15 } from "react-native";
+import Animated8, { useAnimatedStyle as useAnimatedStyle4, useSharedValue as useSharedValue2, withTiming as withTiming4 } from "react-native-reanimated";
+import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
+var TileShell = memo9(function TileShell2({ children, speaking = false, cameraOn = false, level, testID }) {
+  const { colors } = useTheme();
+  const { phone } = useDeviceLayout();
+  const radius = phone ? radii.tilePhone : radii.tile;
+  const live = useSharedValue2(0);
+  const showRing = speaking && cameraOn;
+  useEffect13(() => {
+    live.value = withTiming4(showRing ? 1 : 0, timings.scrim);
+  }, [live, showRing]);
+  const ringStyle = useAnimatedStyle4(() => {
+    "worklet";
+    return { opacity: live.value * (0.3 + 0.7 * (level ? level.value : 1)) };
+  });
+  return /* @__PURE__ */ jsxs16(View15, { style: [styles15.tile, { borderRadius: radius, backgroundColor: colors.tile }], testID, children: [
+    children,
+    /* @__PURE__ */ jsx24(Animated8.View, { pointerEvents: "none", style: [styles15.ring, { borderRadius: radius }, ringStyle], testID: testID ? `${testID}.ring` : void 0, children: /* @__PURE__ */ jsx24(View15, { style: [styles15.ringShade, { borderRadius: radius - 3 }] }) })
+  ] });
+});
+var styles15 = StyleSheet15.create({
+  tile: { flex: 1, overflow: "hidden" },
+  // `inset 0 0 0 3px` white and `inset 0 0 0 4px` shade in the mockup: a 3 pt white band with a 1 pt shade inside it.
+  ring: { ...StyleSheet15.absoluteFillObject, borderWidth: 3, borderColor: fixed.liveRing, zIndex: 5 },
+  ringShade: { ...StyleSheet15.absoluteFillObject, borderWidth: 1, borderColor: fixed.liveRingShade }
+});
+
+// src/stage/camera.ts
+var BACK = /back|rear|environment/i;
+function facingOf(device) {
+  return device && BACK.test(device.label) ? "back" : "front";
+}
+function cameraFacing(media) {
+  return facingOf(media.devices.cameras.find((camera) => camera.deviceId === media.selection.camera));
+}
+function otherCamera(media) {
+  const current = cameraFacing(media);
+  return media.devices.cameras.find((camera) => facingOf(camera) !== current) ?? null;
+}
+
+// src/stage/ParticipantTile.tsx
+import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
+var SELF_NAME_MIN_WIDTH = 120;
+function selectTile(id) {
+  return (snapshot) => {
+    const participant = snapshot.participants.roster.find((person) => person.participantId === id);
+    const isSelf = snapshot.self.participantId === id;
+    const { local, remote } = snapshot.media;
+    const track = isSelf ? local.camera.state === "enabled" ? local.camera.track : null : participant?.media.camera === "active" ? remote.find((media) => media.participantId === id && media.source === "camera")?.track ?? null : null;
+    return {
+      name: participant?.displayName ?? snapshot.self.displayName ?? "",
+      isSelf,
+      muted: isSelf ? local.microphone.state !== "enabled" : participant?.media.microphone !== "active",
+      handRaised: isSelf ? snapshot.self.handRaised : participant?.handRaised ?? false,
+      speaking: participant?.presence.speaking ?? false,
+      track,
+      back: isSelf && cameraFacing(snapshot.media) === "back"
+    };
+  };
+}
+var ParticipantTile = memo10(function ParticipantTile2({ id, width, height, float, pinned, mirror, onOpen }) {
+  const select = useMemo9(() => selectTile(id), [id]);
+  const tile = useSpaceSelector(select, shallowEqual);
+  const slot = useDevScenario().videoSlots?.[id];
+  const level = useSharedValue3(0);
+  useEffect14(() => {
+    level.value = withTiming5(tile.speaking ? 0.6 : 0, timings.level);
+  }, [level, tile.speaking]);
+  const streamURL = useMemo9(() => tile.track ? createNativeMediaStream(tile.track).toURL() : null, [tile.track]);
+  const video = tileVideo(slot, streamURL, tile.isSelf && !tile.back && mirror);
+  const youOnly = tile.isSelf && (float || width < SELF_NAME_MIN_WIDTH);
+  const name = youOnly ? "You" : tile.name;
+  const you = tile.isSelf && !youOnly;
+  const state = `${tile.muted ? ", microphone off" : ""}${tile.handRaised ? ", hand raised" : ""}`;
+  const hitRef = useMeasuredRef(`tile.${id}.open`, StyleSheet16.absoluteFill);
+  const label = `Options for ${tile.name}${tile.isSelf ? " (you)" : ""}${pinned ? ", pinned" : ""}${state}`;
+  return /* @__PURE__ */ jsxs17(TileShell, { cameraOn: video !== null, level, speaking: tile.speaking, testID: `tile.${id}`, children: [
+    video ?? /* @__PURE__ */ jsx25(View16, { style: styles16.center, children: /* @__PURE__ */ jsx25(FaceAvatar, { level, lookAround: true, name: tile.name, size: tileAvatarSize(width, height - nameTagZone), style: "bold" }) }),
+    /* @__PURE__ */ jsx25(Pressable12, { accessibilityHint: "Opens a sheet", accessibilityLabel: label, accessibilityRole: "button", onPress: () => onOpen(id), ref: hitRef, style: StyleSheet16.absoluteFill, testID: `tile.${id}.open` }),
+    /* @__PURE__ */ jsx25(NameTag, { handRaised: tile.handRaised, muted: tile.muted, name, pinned, testID: `tile.${id}.name`, you }),
+    tile.isSelf && video !== null ? /* @__PURE__ */ jsx25(FlipCameraButton, { back: tile.back, float, testID: `tile.${id}.flip` }) : null
+  ] });
+});
+function tileVideo(slot, streamURL, mirror) {
+  if (slot !== void 0) return /* @__PURE__ */ jsx25(View16, { style: [StyleSheet16.absoluteFill, mirror ? styles16.mirrored : null], children: slot });
+  if (streamURL) return /* @__PURE__ */ jsx25(RtcVideoView, { mirror, objectFit: "cover", streamURL, style: StyleSheet16.absoluteFill });
+  return null;
+}
+var selectOtherCamera = (snapshot) => otherCamera(snapshot.media)?.deviceId ?? null;
+function FlipCameraButton({ back, float, testID }) {
+  const client = useSpaceClient();
+  const toasts = useToasts();
+  const other = useSpaceSelector(selectOtherCamera);
+  const flip = useCallback11(() => {
+    if (other === null) return;
+    client.media.selectCamera(other).catch(() => toasts.show({ kind: "error", dismissible: true, message: "Couldn't switch the camera." }));
+  }, [client, other, toasts]);
+  if (other === null) return null;
+  return /* @__PURE__ */ jsx25(Pressable12, { accessibilityLabel: `Switch to the ${back ? "front" : "back"} camera`, accessibilityRole: "button", onPress: flip, style: [styles16.flip, float ? styles16.flipFloat : null], testID, children: ({ pressed }) => /* @__PURE__ */ jsx25(View16, { style: [styles16.flipKnob, { backgroundColor: pressed ? fixed.overlayPressed : fixed.overlay }, pressed ? styles16.flipPressed : null], children: /* @__PURE__ */ jsx25(Icon, { color: fixed.overlayText, name: "flip", size: 17 }) }) });
+}
+var styles16 = StyleSheet16.create({
+  // Centred above the name tag, so a short strip tile never hides the face behind the tag.
+  center: { ...StyleSheet16.absoluteFillObject, bottom: nameTagZone, alignItems: "center", justifyContent: "center" },
+  mirrored: { transform: [{ scaleX: -1 }] },
+  flip: { position: "absolute", top: 2, right: 2, width: 44, height: 44, alignItems: "center", justifyContent: "center", zIndex: 4 },
+  flipFloat: { top: 0, right: 0 },
+  flipKnob: { width: 32, height: 32, borderRadius: 16, alignItems: "center", justifyContent: "center" },
+  flipPressed: { transform: [{ scale: pressScale.small }] }
+});
+
+// src/stage/TileSheet.tsx
+import { useCallback as useCallback12, useMemo as useMemo10 } from "react";
+import { StyleSheet as StyleSheet17, View as View17 } from "react-native";
+import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
+var closed = { name: "", isSelf: false, cameraOn: false, back: false, otherCamera: null, muted: false, canMute: false, canRemove: false };
+function TileSheet({ participantId, open, onClose }) {
+  const client = useSpaceClient();
+  const toasts = useToasts();
+  const view = useStageView();
+  const select = useMemo10(
+    () => (snapshot) => {
+      if (participantId === null) return closed;
+      const person2 = snapshot.participants.roster.find((participant) => participant.participantId === participantId);
+      const isSelf = snapshot.self.participantId === participantId;
+      return {
+        name: person2?.displayName ?? snapshot.self.displayName ?? "",
+        isSelf,
+        cameraOn: isSelf && snapshot.media.local.camera.state === "enabled",
+        back: cameraFacing(snapshot.media) === "back",
+        otherCamera: otherCamera(snapshot.media)?.deviceId ?? null,
+        muted: person2?.media.microphone !== "active",
+        canMute: !isSelf && snapshot.self.can("muteOthers"),
+        canRemove: !isSelf && snapshot.self.can("removeParticipant")
+      };
+    },
+    [participantId]
+  );
+  const person = useSpaceSelector(select, shallowEqual);
+  const id = participantId ?? "";
+  const failed = useCallback12((message2) => () => toasts.show({ kind: "error", dismissible: true, message: message2 }), [toasts]);
+  const run = (action) => () => {
+    onClose();
+    action();
+  };
+  return /* @__PURE__ */ jsxs18(BottomSheet, { accessibilityLabel: `${person.name}${person.isSelf ? " (You)" : ""}`, onClose, open: open && participantId !== null, testID: "sheet.tile", children: [
+    /* @__PURE__ */ jsxs18(View17, { style: styles17.header, children: [
+      /* @__PURE__ */ jsx26(FaceAvatar, { name: person.name, size: 32 }),
+      /* @__PURE__ */ jsx26(ChalkText, { numberOfLines: 1, style: styles17.name, variant: "sheetTitle", children: `${person.name}${person.isSelf ? " (You)" : ""}` })
+    ] }),
+    /* @__PURE__ */ jsxs18(SheetGroup, { children: [
+      /* @__PURE__ */ jsx26(SheetRow, { icon: "pin", label: view.pinned === participantId ? "Unpin" : "Pin", onPress: run(() => view.togglePin(id)), testID: "tile-sheet.pin" }),
+      person.cameraOn && person.otherCamera !== null ? /* @__PURE__ */ jsx26(
+        SheetRow,
+        {
+          icon: "flip",
+          label: `Switch to the ${person.back ? "front" : "back"} camera`,
+          onPress: run(() => {
+            if (person.otherCamera) client.media.selectCamera(person.otherCamera).then(() => announce(`Switched to the ${person.back ? "front" : "back"} camera`), failed("Couldn't switch the camera."));
+          }),
+          testID: "tile-sheet.flip"
+        }
+      ) : null,
+      person.cameraOn && !person.back ? /* @__PURE__ */ jsx26(SheetRow, { end: /* @__PURE__ */ jsx26(Switch, { accessibilityLabel: "Mirror my video", onValueChange: view.setMirror, testID: "tile-sheet.mirror", value: view.mirror }), icon: "swap", label: "Mirror my video" }) : null,
+      person.canMute && !person.muted ? /* @__PURE__ */ jsx26(SheetRow, { icon: "micOff", label: "Mute", onPress: run(() => client.participants.mute(id).catch(failed(`Couldn't mute ${person.name}.`))), testID: "tile-sheet.mute" }) : null,
+      person.canRemove ? /* @__PURE__ */ jsx26(
+        SheetRow,
+        {
+          danger: true,
+          icon: "x",
+          label: "Remove from call",
+          onPress: run(
+            () => client.participants.remove(id).then(() => announce(`${person.name} was removed`)).catch(failed(`Couldn't remove ${person.name}.`))
+          ),
+          testID: "tile-sheet.remove"
+        }
+      ) : null
+    ] })
+  ] });
+}
+var styles17 = StyleSheet17.create({
+  // `.shd`: the person's face and name over the rows.
+  header: { flexDirection: "row", alignItems: "center", gap: 12, paddingTop: 4, paddingHorizontal: 8, paddingBottom: 14 },
+  name: { flexShrink: 1 }
+});
+
+// src/stage/Stage.tsx
+import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
+function selectStructure(snapshot) {
+  const selfId = snapshot.self.participantId;
+  const { roster } = snapshot.participants;
+  const others = roster.filter((person) => person.participantId !== selfId).map((person) => person.participantId);
+  const hasSelf = roster.some((person) => person.participantId === selfId);
+  return {
+    selfId,
+    present: (hasSelf && selfId !== null ? [selfId, ...others] : others).join("\n"),
+    speaker: roster.find((person) => person.presence.activeSpeaker)?.participantId ?? null,
+    sharer: roster.find((person) => person.participantId !== selfId && person.media.screenShare === "active")?.participantId ?? null,
+    board: snapshot.whiteboard.open
+  };
+}
+var Stage = memo11(function Stage2({ frame, onOpenPeople }) {
+  const structure = useSpaceSelector(selectStructure, shallowEqual);
+  const view = useStageView();
+  const { arrangement } = useDeviceLayout();
+  const { shareAspect } = useDevScenario();
+  const [sheet, setSheet] = useState12({ id: null, open: false });
+  const present = useMemo11(() => structure.present ? structure.present.split("\n") : [], [structure.present]);
+  const [order, setOrder] = useState12({ order: [], spot: null });
+  const next = nextStageOrder(order, present, structure.selfId, structure.speaker);
+  if (next !== order) setOrder(next);
+  const content = useMemo11(() => structure.board ? { kind: "board" } : structure.sharer !== null ? { kind: "screen", sharerId: structure.sharer } : null, [structure.board, structure.sharer]);
+  const pinned = view.pinned !== null && present.includes(view.pinned) ? view.pinned : null;
+  const items = useMemo11(
+    () => stageLayout({
+      stage: frame,
+      // The iPad uses the phone layout today.
+      portrait: arrangement !== "landscape",
+      layout: view.layout,
+      order: next.order,
+      spot: next.spot,
+      pinned,
+      content: content ? { kind: content.kind, aspect: content.kind === "board" ? null : shareAspect ?? 16 / 9 } : null
+    }),
+    [arrangement, content, frame, next, pinned, shareAspect, view.layout]
+  );
+  const openTile = useCallback13((id) => setSheet({ id, open: true }), []);
+  const closeTile = useCallback13(() => setSheet((current) => ({ ...current, open: false })), []);
+  const stageRef = useMeasuredRef("frame.stage", styles18.layer);
+  return /* @__PURE__ */ jsxs19(View18, { pointerEvents: "box-none", ref: stageRef, style: styles18.layer, testID: "frame.stage", children: [
+    items.map((item) => /* @__PURE__ */ jsx27(StageTile, { content, item, mirror: view.mirror, onOpenPeople, onOpenTile: openTile, onShowContent: view.showContent, peopleCount: present.length, pinned }, itemKey(item))),
+    /* @__PURE__ */ jsx27(TileSheet, { onClose: closeTile, open: sheet.open, participantId: sheet.id })
+  ] });
+});
+function itemKey(item) {
+  return item.kind === "person" ? `person:${item.id}` : item.kind;
+}
+function StageTile({ item, content, pinned, mirror, peopleCount, onOpenTile, onOpenPeople, onShowContent }) {
+  const { scheme } = useTheme();
+  const float = item.kind === "person" && item.float;
+  return /* @__PURE__ */ jsx27(MovingFrame, { frame: item.frame, style: float ? [styles18.float, { boxShadow: elevations[scheme].floatTile }] : null, children: /* @__PURE__ */ jsx27(Animated9.View, { entering: tileEntering, exiting: tileLeaving, style: styles18.fill, children: item.kind === "person" ? /* @__PURE__ */ jsx27(ParticipantTile, { float, height: item.frame.height, id: item.id, mirror, onOpen: onOpenTile, pinned: pinned === item.id, width: item.frame.width }) : item.kind === "content" && content ? /* @__PURE__ */ jsx27(ContentTile, { content, inner: item.inner, mini: item.mini, onShowInSpotlight: onShowContent }) : item.kind === "more" ? /* @__PURE__ */ jsx27(MoreTile, { count: item.count, onPress: onOpenPeople, peopleCount }) : null }) });
+}
+var MoreTile = memo11(function MoreTile2({ count, peopleCount, onPress }) {
+  const { colors } = useTheme();
+  const restStyle = [styles18.more, { backgroundColor: colors.raised }];
+  const moreRef = useMeasuredRef("tile.more", restStyle);
+  return /* @__PURE__ */ jsx27(Pressable13, { accessibilityLabel: `Show all ${peopleCount} people`, accessibilityRole: "button", onPress, ref: moreRef, style: ({ pressed }) => pressed ? [styles18.more, { backgroundColor: colors.hover }] : restStyle, testID: "tile.more", children: /* @__PURE__ */ jsx27(ChalkText, { style: styles18.moreText, children: `+${count}` }) });
+});
+var styles18 = StyleSheet18.create({
+  fill: { flex: 1 },
+  layer: StyleSheet18.absoluteFillObject,
+  float: { zIndex: 12, borderRadius: radii.tilePhone },
+  more: { flex: 1, borderRadius: radii.tilePhone, alignItems: "center", justifyContent: "center" },
+  moreText: { fontFamily: fontFamilies[600], fontSize: 22, lineHeight: 22 * 1.4 }
+});
+
+// src/status/CallOverlays.tsx
+import { useEffect as useEffect17 } from "react";
+import { StyleSheet as StyleSheet21, View as View20 } from "react-native";
+
+// src/limbo/Veil.tsx
+import { useEffect as useEffect15 } from "react";
+import { StyleSheet as StyleSheet19 } from "react-native";
+import Animated10, { ReduceMotion as ReduceMotion2, useAnimatedStyle as useAnimatedStyle5, useSharedValue as useSharedValue4, withTiming as withTiming6 } from "react-native-reanimated";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var OPACITY = { none: 0, limbo: 0.85, paused: 0.75 };
+var LIFT_FROM = 0.6;
+function Veil({ level }) {
+  const { colors } = useTheme();
+  const opacity = useSharedValue4(OPACITY[level]);
+  useEffect15(() => {
+    if (level !== "none") {
+      opacity.value = OPACITY[level];
+      return;
+    }
+    if (opacity.value === 0) return;
+    opacity.value = LIFT_FROM;
+    opacity.value = withTiming6(0, { duration: durations.veil, easing: easings.easeOut, reduceMotion: ReduceMotion2.System });
+  }, [level, opacity]);
+  const style = useAnimatedStyle5(() => {
+    "worklet";
+    return { opacity: opacity.value };
+  });
+  return /* @__PURE__ */ jsx28(Animated10.View, { pointerEvents: level === "none" ? "none" : "auto", style: [StyleSheet19.absoluteFill, { backgroundColor: colors.canvas }, style], testID: "limbo.veil" });
+}
+
+// src/status/StatusPage.tsx
+import { forwardRef as forwardRef3, memo as memo12, useEffect as useEffect16, useRef as useRef11 } from "react";
+import { AccessibilityInfo as AccessibilityInfo2, findNodeHandle as findNodeHandle2, Pressable as Pressable14, StyleSheet as StyleSheet20, View as View19 } from "react-native";
+import Animated11, { useAnimatedStyle as useAnimatedStyle6 } from "react-native-reanimated";
+import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
+function pageFor(outcome, callName) {
+  switch (outcome) {
+    case "left":
+      return { title: `You left ${callName}`, actions: ["rejoin", "home"] };
+    case "ended":
+      return { title: "The call ended", actions: ["rejoin", "home"] };
+    case "failed":
+      return { title: `Couldn\u2019t connect to ${callName}`, detail: "Check your internet connection, then try again.", actions: ["rejoin", "home"], rejoinLabel: "Try again" };
+    case "removed":
+      return { title: `You were removed from ${callName}`, detail: "The host removed you from this call.", actions: ["home"] };
+    case "exited":
+      return { title: `You\u2019re no longer in ${callName}`, actions: ["rejoin", "home"] };
+    case "full":
+      return { title: "This call is full", detail: `${callName} has reached 100 people. Ask the host to make room, then try again.`, actions: ["rejoin", "home"], rejoinLabel: "Try again" };
+  }
+}
+function StatusPage({ outcome, callName, onRejoin, onHome }) {
+  const { colors } = useTheme();
+  const page = pageFor(outcome, callName);
+  const pageStyle = [styles19.page, { backgroundColor: colors.canvas }];
+  const ref = useMeasuredRef("status.page", pageStyle);
+  const firstAction = useRef11(null);
+  useEffect16(() => {
+    const node = firstAction.current && findNodeHandle2(firstAction.current);
+    if (node) AccessibilityInfo2.setAccessibilityFocus(node);
+  }, [outcome]);
+  return /* @__PURE__ */ jsxs20(View19, { accessibilityViewIsModal: true, ref, style: pageStyle, testID: "status.page", children: [
+    /* @__PURE__ */ jsx29(ChalkText, { accessibilityRole: "header", style: styles19.center, testID: "status.title", variant: "statusTitle", children: page.title }),
+    page.detail ? /* @__PURE__ */ jsx29(ChalkText, { style: styles19.center, testID: "status.detail", tone: "textMuted", children: page.detail }) : null,
+    /* @__PURE__ */ jsx29(View19, { style: styles19.actions, children: page.actions.map(
+      (action, index) => action === "rejoin" ? /* @__PURE__ */ jsx29(StatusAction, { icon: "retry", label: page.rejoinLabel ?? "Rejoin", onPress: onRejoin, ref: index === 0 ? firstAction : void 0, testID: "status.rejoin" }, action) : /* @__PURE__ */ jsx29(StatusAction, { icon: "home", label: "Home", onPress: onHome, ref: index === 0 ? firstAction : void 0, testID: "status.home" }, action)
+    ) })
+  ] });
+}
+var StatusAction = memo12(
+  forwardRef3(function StatusAction2({ icon, label, onPress, testID }, ref) {
+    const { colors } = useTheme();
+    const press = usePressAnimation("round");
+    const { down } = press;
+    const roundStyle = [styles19.round, { backgroundColor: colors.raised }];
+    const roundRef = useMeasuredRef(`${testID}.button`, roundStyle);
+    const raised = colors.raised;
+    const pressed = colors.pressed;
+    const background = useAnimatedStyle6(() => {
+      "worklet";
+      return { backgroundColor: down.value ? pressed : raised };
+    });
+    return /* @__PURE__ */ jsxs20(Pressable14, { accessibilityLabel: label, accessibilityRole: "button", onPress, onPressIn: press.onPressIn, onPressOut: press.onPressOut, ref, style: styles19.action, testID, children: [
+      /* @__PURE__ */ jsx29(Animated11.View, { ref: roundRef, style: [roundStyle, background, press.scaleStyle], children: /* @__PURE__ */ jsx29(Icon, { color: colors.text, name: icon }) }),
+      /* @__PURE__ */ jsx29(ChalkText, { style: styles19.actionLabel, testID: `${testID}.label`, tone: "textSoft", variant: "meta", children: label })
+    ] });
+  })
+);
+var styles19 = StyleSheet20.create({
+  page: { ...StyleSheet20.absoluteFillObject, alignItems: "center", justifyContent: "center", gap: 12, padding: 24 },
+  center: { textAlign: "center" },
+  actions: { flexDirection: "row", gap: 28, marginTop: 20 },
+  action: { alignItems: "center", gap: 8 },
+  round: { width: 56, height: 56, borderRadius: 28, alignItems: "center", justifyContent: "center" },
+  // `.act` is 13 pt at weight 500; the type scale has 13 pt only at 400 and 600.
+  actionLabel: { fontFamily: fontFamilies[500] }
+});
+
+// src/status/CallOverlays.tsx
+import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
+function CallOverlays({ screen, callName, rejoining, onHold, onRejoin, onHome }) {
+  const recording2 = useRecording().current?.status === "recording";
+  const queuedMessages = useChat().pendingSends.filter((send) => send.status === "queued").length;
+  useBackHandler(screen.kind === "status", onHome);
+  const { clear } = useToasts();
+  const clearsNotices = screen.kind === "status" || screen.kind === "joining";
+  useEffect17(() => {
+    if (clearsNotices) clear();
+  }, [clear, clearsNotices]);
+  const limbo = screen.kind === "joining" ? { kind: "joining", rejoining } : screen.kind === "reconnecting" ? { kind: "reconnecting", queuedMessages } : screen.kind === "call" && onHold ? { kind: "hold" } : null;
+  const veil = limbo === null ? "none" : limbo.kind === "joining" ? "limbo" : "paused";
+  return /* @__PURE__ */ jsxs21(View20, { pointerEvents: "box-none", style: StyleSheet21.absoluteFill, children: [
+    /* @__PURE__ */ jsx30(Veil, { level: screen.kind === "status" ? "none" : veil }),
+    limbo ? /* @__PURE__ */ jsx30(Limbo, { callName, recording: recording2, state: limbo }) : null,
+    screen.kind === "status" ? /* @__PURE__ */ jsx30(StatusPage, { callName, onHome, onRejoin, outcome: screen.outcome }) : null
+  ] });
+}
+
+// src/status/ChalkArrival.tsx
+import { StyleSheet as StyleSheet22, View as View21 } from "react-native";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { jsx as jsx31 } from "react/jsx-runtime";
+function ChalkArrival({ colorScheme = "dark", ...props }) {
+  return /* @__PURE__ */ jsx31(SafeAreaProvider, { children: /* @__PURE__ */ jsx31(ThemeProvider, { colorScheme, children: /* @__PURE__ */ jsx31(ArrivalScreen, { ...props }) }) });
+}
+function ArrivalScreen({ state, callName, onCancel, onRetry, recording: recording2 = false }) {
+  const { colors } = useTheme();
+  useBackHandler(true, onCancel);
+  return /* @__PURE__ */ jsx31(View21, { style: [styles20.screen, { backgroundColor: colors.canvas }], testID: "arrival.screen", children: state === "full" ? /* @__PURE__ */ jsx31(StatusPage, { callName, onHome: onCancel, onRejoin: onRetry, outcome: "full" }) : /* @__PURE__ */ jsx31(Limbo, { callName, recording: recording2, state: state === "knocking" ? { kind: "knocking", onCancel } : { kind: "refused", onAskAgain: onRetry } }) });
+}
+var styles20 = StyleSheet22.create({
+  screen: { flex: 1 }
+});
+
+// src/status/call-screen.ts
+function callScreen(connection, leftByChoice) {
+  if (connection.episodeEnded || connection.lastError?.code === "episode.ended") return { kind: "status", outcome: "ended" };
+  switch (connection.status) {
+    case "idle":
+    case "joining":
+      return { kind: "joining" };
+    case "reconnecting":
+      return { kind: "reconnecting" };
+    case "live":
+    case "leaving":
+      return { kind: "call" };
+    case "left":
+      if (leftByChoice) return { kind: "status", outcome: "left" };
+      return { kind: "status", outcome: connection.removedByHost ? "removed" : "exited" };
+    case "failed":
+      return { kind: "status", outcome: "failed" };
+  }
+}
+
+// src/toasts/CallEventToasts.tsx
+import { SpaceClientError } from "@q9labsai/chalk-client";
+import { useCallback as useCallback14, useEffect as useEffect18, useRef as useRef12 } from "react";
+import { Linking as Linking2, Platform as Platform7 } from "react-native";
+
+// src/toasts/notices.ts
+function callNotices(previous, next, ownMicrophoneChange) {
+  if (previous.connection.status !== "live" || next.connection.status !== "live") return [];
+  const self = next.self.participantId;
+  const before = new Map(previous.participants.roster.map((participant) => [participant.participantId, participant]));
+  const after = new Map(next.participants.roster.map((participant) => [participant.participantId, participant]));
+  const notices = [];
+  const departed = [...before.values()].filter((participant) => !after.has(participant.participantId) && participant.participantId !== self);
+  const becameHost = !previous.self.can("endEpisode") && next.self.can("endEpisode");
+  const departedHost = becameHost ? departed.find(isHost) : void 0;
+  if (departedHost) notices.push({ kind: "newHost", previousHost: firstName2(departedHost.displayName) });
+  for (const participant of after.values()) if (!before.has(participant.participantId) && participant.participantId !== self) notices.push({ kind: "joined", name: participant.displayName });
+  for (const participant of departed) if (participant !== departedHost) notices.push({ kind: "left", name: participant.displayName });
+  for (const participant of after.values()) {
+    if (participant.participantId === self) continue;
+    if (before.get(participant.participantId)?.media.screenShare === "active" && participant.media.screenShare !== "active") notices.push({ kind: "shareStopped", name: firstName2(participant.displayName) });
+  }
+  if (previous.media.local.microphone.state === "enabled" && next.media.local.microphone.state === "disabled" && !ownMicrophoneChange) {
+    const muters = next.participants.roster.filter((participant) => participant.participantId !== self && participant.capabilities.includes("muteOthers"));
+    notices.push({ kind: "mutedByHost", by: muters.length === 1 && muters[0] ? firstName2(muters[0].displayName) : null });
+  }
+  const known = new Set(previous.media.incomingRequests.map((request) => request.requestId));
+  for (const request of next.media.incomingRequests) if (!known.has(request.requestId)) notices.push({ kind: "mediaRequest", request });
+  const wasRecording = previous.recording.current?.status === "recording";
+  const isRecording = next.recording.current?.status === "recording";
+  if (!wasRecording && isRecording) notices.push({ kind: "recordingStarted" });
+  if (wasRecording && !isRecording) notices.push({ kind: "recordingStopped" });
+  return notices;
+}
+function isHost(participant) {
+  return participant.capabilities.includes("endEpisode");
+}
+function firstName2(name) {
+  return name.trim().split(/\s+/)[0] ?? name;
+}
+
+// src/toasts/CallEventToasts.tsx
+import { jsx as jsx32 } from "react/jsx-runtime";
+function useCallEventToasts({ onOpenSettings, resumedAfterSettings }) {
+  const client = useSpaceClient();
+  const toasts = useToasts();
+  const { colors } = useTheme();
+  const { soundsEnabled } = usePreferences();
+  const ownMicrophoneChange = useRef12(false);
+  const latest = useRef12({ colors, soundsEnabled });
+  latest.current = { colors, soundsEnabled };
+  useEffect18(() => {
+    let previous = client.getSnapshot();
+    return client.subscribe(() => {
+      const next = client.getSnapshot();
+      if (next === previous) return;
+      const notices = callNotices(previous, next, ownMicrophoneChange.current);
+      if (previous.media.local.microphone.state !== next.media.local.microphone.state) ownMicrophoneChange.current = false;
+      previous = next;
+      for (const notice of notices) {
+        let id = 0;
+        const { input, sound } = noticeToast(notice, { client, toasts, colors: latest.current.colors, dismiss: () => toasts.dismiss(id) });
+        id = toasts.show(input);
+        if (sound) playSound(sound, latest.current.soundsEnabled);
+      }
+    });
+  }, [client, toasts]);
+  useResumedAfterSettings(resumedAfterSettings, toasts);
+  const noteOwnMicrophoneChange = useCallback14(() => {
+    ownMicrophoneChange.current = true;
+  }, []);
+  const reportMediaFailure = useCallback14(
+    (permission, cause, retry) => {
+      const code = cause instanceof SpaceClientError ? cause.code : null;
+      const icon = permission === "microphone" ? "micOff" : "camOff";
+      const leading = /* @__PURE__ */ jsx32(Icon, { color: latest.current.colors.dangerText, name: icon });
+      playSound("error", latest.current.soundsEnabled);
+      if (code === "media.permission_denied") {
+        const id = toasts.show({
+          kind: "error",
+          leading,
+          wrap: true,
+          dismissible: true,
+          testID: `toast.${permission}-denied`,
+          message: [{ strong: `Chalk can\u2019t use your ${permission}.` }, Platform7.OS === "ios" ? ` Allow it in Settings, then turn your ${permission} back on.` : " Allow it in Settings."],
+          actions: [
+            {
+              label: "Open Settings",
+              testID: "toast.open-settings",
+              onPress: () => {
+                toasts.dismiss(id);
+                onOpenSettings?.(permission);
+                void Linking2.openSettings();
+              }
+            }
+          ]
+        });
+        return;
+      }
+      if (code === "media.device_busy") {
+        const id = toasts.show({
+          kind: "error",
+          leading,
+          wrap: true,
+          dismissible: true,
+          testID: `toast.${permission}-busy`,
+          message: `Another app is using your ${permission}`,
+          actions: [
+            {
+              label: "Try again",
+              testID: "toast.try-again",
+              onPress: () => {
+                toasts.dismiss(id);
+                retry();
+              }
+            }
+          ]
+        });
+        return;
+      }
+      toasts.show({ kind: "error", leading, dismissible: true, wrap: true, message: cause instanceof Error ? `Couldn\u2019t turn on your ${permission}. ${cause.message}` : `Couldn\u2019t turn on your ${permission}.` });
+    },
+    [onOpenSettings, toasts]
+  );
+  return { noteOwnMicrophoneChange, reportMediaFailure };
+}
+function useResumedAfterSettings(permission, toasts) {
+  const client = useSpaceClient();
+  const { colors } = useTheme();
+  const shown = useRef12(false);
+  useEffect18(() => {
+    if (!permission) return;
+    const check = () => {
+      if (shown.current || client.getSnapshot().connection.status !== "live") return;
+      shown.current = true;
+      toasts.show({ leading: /* @__PURE__ */ jsx32(Icon, { color: colors.textMuted, name: "check" }), message: `You\u2019re back in the call. Chalk can use your ${permission} now.`, testID: "toast.resumed" });
+    };
+    check();
+    return client.subscribe(check);
+  }, [client, colors, permission, toasts]);
+}
+function noticeToast(notice, { client, toasts, colors, dismiss }) {
+  const icon = (name, tone = "muted") => /* @__PURE__ */ jsx32(Icon, { color: tone === "danger" ? colors.dangerText : colors.textMuted, name });
+  const avatar = (name) => /* @__PURE__ */ jsx32(FaceAvatar, { name, size: 28 });
+  switch (notice.kind) {
+    case "joined":
+      return { input: { leading: avatar(notice.name), message: [{ strong: notice.name }, " joined"], testID: "toast.joined" }, sound: "join" };
+    case "left":
+      return { input: { leading: avatar(notice.name), message: [{ strong: notice.name }, " left"], testID: "toast.left" }, sound: "leave" };
+    case "mutedByHost":
+      return {
+        input: notice.by ? { leading: avatar(notice.by), message: [{ strong: notice.by }, " muted you. Unmute when you\u2019re ready."], testID: "toast.muted-by-host" } : { leading: icon("micOff"), message: "You were muted. Unmute when you\u2019re ready.", testID: "toast.muted-by-host" },
+        sound: "mute"
+      };
+    case "mediaRequest": {
+      const { request } = notice;
+      const who = request.actorDisplayName ? firstName2(request.actorDisplayName) : "The host";
+      const unmute2 = request.kind === "unmute";
+      const accept = () => {
+        dismiss();
+        client.media.acceptRequest(request.requestId).catch(() => toasts.show({ kind: "error", dismissible: true, message: unmute2 ? "Couldn\u2019t unmute you." : "Couldn\u2019t turn on your camera." }));
+      };
+      return {
+        input: {
+          leading: icon(unmute2 ? "mic" : "cam"),
+          message: unmute2 ? `${who} asks you to unmute` : `${who} asks you to turn on your camera`,
+          testID: "toast.media-request",
+          actions: [{ label: unmute2 ? "Unmute" : "Turn on", variant: "primary", testID: "toast.accept-request", onPress: accept }]
+        }
+      };
+    }
+    case "newHost":
+      return { input: { leading: icon("users"), message: [{ strong: notice.previousHost }, " left. You\u2019re now the host."], testID: "toast.new-host" }, sound: "leave" };
+    case "shareStopped":
+      return { input: { leading: icon("shareOff"), message: [{ strong: notice.name }, " stopped sharing"], testID: "toast.share-stopped" } };
+    case "recordingStarted":
+      return { input: { leading: icon("rec", "danger"), message: [{ strong: "Recording started." }, " Everyone in the call can see it."], testID: "toast.recording-started" }, sound: "recording" };
+    case "recordingStopped":
+      return { input: { leading: icon("rec"), message: "Recording stopped", testID: "toast.recording-stopped" } };
+  }
+}
+
+// src/frame/CallFrame.tsx
+import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
+function CallFrame({ displayName, callName = "Call", inviteLink, onLeave, onOpenSettings, onRejoin, resumedAfterSettings }) {
+  const client = useSpaceClient();
+  const connection = useConnection();
+  const media = useMedia();
+  const { colors, scheme } = useTheme();
+  const layout = useDeviceLayout();
+  const { soundsEnabled } = usePreferences();
+  const toasts = useToasts();
+  const callEvents = useCallEventToasts({ onOpenSettings, resumedAfterSettings });
+  const [leftByChoice, setLeftByChoice] = useState13(false);
+  const [sheet, setSheet] = useState13(null);
+  const moreRef = useRef13(null);
+  const leaveRef = useRef13(null);
+  const nameRef = useRef13(null);
+  const canEnd = useCan("endEpisode");
+  const [leaveMenuOpen, setLeaveMenuOpen] = useState13(false);
+  const sheetCount = usePortalCount("sheets");
+  const menuCount = usePortalCount("menus");
+  const layered = sheetCount > 0 || menuCount > 0;
+  const regions = useMemo12(() => frameRegions(layout.arrangement, layout.width, layout.height, layout.insets), [layout]);
+  const screenStyle = [styles21.root, { backgroundColor: colors.canvas }];
+  const screenRef = useMeasuredRef("frame.screen", screenStyle);
+  const join2 = useCallback15(() => {
+    setLeftByChoice(false);
+    client.join({ displayName, microphone: false, camera: false }).catch(() => void 0);
+  }, [client, displayName]);
+  useEffect19(() => {
+    if (client.getSnapshot().connection.status === "idle") join2();
+  }, [client, join2]);
+  useAndroidCallService();
+  const microphoneOn = media.local.microphone.state === "enabled";
+  const cameraOn = media.local.camera.state === "enabled";
+  const { noteOwnMicrophoneChange, reportMediaFailure } = callEvents;
+  const toggleMicrophone = useCallback15(() => {
+    haptics.mute();
+    playSound(microphoneOn ? "mute" : "unmute", soundsEnabled);
+    if (microphoneOn) noteOwnMicrophoneChange();
+    const turnOn = () => client.media.setMicrophoneEnabled(true).catch((cause) => reportMediaFailure("microphone", cause, turnOn));
+    if (microphoneOn) client.media.setMicrophoneEnabled(false).catch(() => toasts.show({ kind: "error", dismissible: true, message: "Couldn\u2019t mute your microphone." }));
+    else void turnOn();
+  }, [client, microphoneOn, noteOwnMicrophoneChange, reportMediaFailure, soundsEnabled, toasts]);
+  const toggleCamera = useCallback15(() => {
+    const turnOn = () => client.media.setCameraEnabled(true).catch((cause) => reportMediaFailure("camera", cause, turnOn));
+    if (cameraOn) client.media.setCameraEnabled(false).catch(() => toasts.show({ kind: "error", dismissible: true, message: "Couldn\u2019t turn off your camera." }));
+    else void turnOn();
+  }, [cameraOn, client, reportMediaFailure, toasts]);
+  const exit = useCallback15(
+    (how) => {
+      setSheet(null);
+      setLeaveMenuOpen(false);
+      setLeftByChoice(true);
+      (how === "end" ? client.endEpisode() : client.leave()).catch(() => {
+        toasts.show({ kind: "error", dismissible: true, message: how === "end" ? "Couldn\u2019t end the call." : "Couldn\u2019t leave the call." });
+      });
+    },
+    [client, toasts]
+  );
+  const pressLeave = useCallback15(() => {
+    haptics.leave();
+    if (canEnd) setLeaveMenuOpen((open) => !open);
+    else exit("leave");
+  }, [canEnd, exit]);
+  const devScenario = useDevScenario();
+  useEffect19(() => {
+    if (devScenario.sheet && devScenario.sheet !== "route") setSheet(devScenario.sheet);
+    if (devScenario.menu === "leave") setLeaveMenuOpen(true);
+  }, [devScenario]);
+  const chrome = useLandscapeChrome(layout.arrangement === "landscape" && sheet === null && !layered);
+  const forced = devScenario.callState;
+  const screen = forced === "hold" ? { kind: "call" } : forced === "left" || forced === "ended" || forced === "failed" || forced === "removed" || forced === "exited" ? { kind: "status", outcome: forced } : callScreen(connection, leftByChoice);
+  return /* @__PURE__ */ jsxs22(View22, { ref: screenRef, style: screenStyle, testID: "frame.screen", children: [
+    /* @__PURE__ */ jsx33(StatusBar, { barStyle: scheme === "dark" ? "light-content" : "dark-content" }),
+    /* @__PURE__ */ jsxs22(View22, { accessibilityElementsHidden: layered, importantForAccessibility: layered ? "no-hide-descendants" : "auto", style: StyleSheet23.absoluteFill, children: [
+      /* @__PURE__ */ jsx33(Stage, { frame: regions.stage, onOpenPeople: () => setSheet("people") }),
+      chrome.hidden ? /* @__PURE__ */ jsx33(Pressable15, { accessibilityLabel: "Show call controls", onPress: chrome.show, style: StyleSheet23.absoluteFill, testID: "frame.show-controls" }) : null,
+      /* @__PURE__ */ jsx33(Animated12.View, { pointerEvents: chrome.hidden ? "none" : "box-none", style: [styles21.region, frameStyle(regions.header), chrome.style], children: /* @__PURE__ */ jsx33(Header, { arrangement: layout.arrangement, callName, detailsOpen: sheet === "details", onOpenDetails: () => setSheet("details"), ref: nameRef }) }),
+      /* @__PURE__ */ jsx33(Animated12.View, { pointerEvents: chrome.hidden ? "none" : "box-none", style: [styles21.region, frameStyle(regions.dock), chrome.style], children: /* @__PURE__ */ jsx33(
+        Dock,
+        {
+          arrangement: layout.arrangement,
+          cameraOn,
+          microphoneOn,
+          leaveOpen: canEnd ? leaveMenuOpen : void 0,
+          leaveRef,
+          moreOpen: sheet === "more",
+          moreRef,
+          onLeave: pressLeave,
+          onOpenMore: () => setSheet("more"),
+          onToggleCamera: toggleCamera,
+          onToggleMicrophone: toggleMicrophone
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs22(View22, { pointerEvents: "box-none", style: StyleSheet23.absoluteFill, testID: "frame.sheets", children: [
+      /* @__PURE__ */ jsx33(MoreSheet, { inviteLink, onClose: () => setSheet(null), onOpenChat: () => setSheet("chat"), onOpenPeople: () => setSheet("people"), open: sheet === "more", returnFocusRef: sheet === null ? moreRef : void 0 }),
+      /* @__PURE__ */ jsx33(CallDetailsSheet, { callName, inviteLink, onClose: () => setSheet(null), open: sheet === "details", returnFocusRef: nameRef }),
+      /* @__PURE__ */ jsx33(PeopleChatSheet, { onClose: () => setSheet(null), onTabChange: setSheet, open: sheet === "people" || sheet === "chat", returnFocusRef: sheet === null ? moreRef : void 0, tab: sheet === "chat" ? "chat" : "people" }),
+      /* @__PURE__ */ jsx33(PortalHost, { layer: "sheets" })
+    ] }),
+    /* @__PURE__ */ jsx33(View22, { pointerEvents: "box-none", style: StyleSheet23.absoluteFill, testID: "frame.overlays", children: forced === "knocking" || forced === "refused" || forced === "full" ? /* @__PURE__ */ jsx33(ArrivalScreen, { callName, onCancel: () => onLeave?.(), onRetry: join2, state: forced }) : /* @__PURE__ */ jsx33(CallOverlays, { callName, onHold: forced === "hold", onHome: () => onLeave?.(), onRejoin, rejoining: resumedAfterSettings !== void 0, screen }) }),
+    /* @__PURE__ */ jsxs22(View22, { pointerEvents: "box-none", style: StyleSheet23.absoluteFill, testID: "frame.menus", children: [
+      /* @__PURE__ */ jsx33(LeaveMenu, { anchorRef: leaveRef, onClose: () => setLeaveMenuOpen(false), onEnd: () => exit("end"), onLeave: () => exit("leave"), open: leaveMenuOpen }),
+      /* @__PURE__ */ jsx33(PortalHost, { layer: "menus" })
+    ] }),
+    /* @__PURE__ */ jsx33(ToastStack, {}),
+    /* @__PURE__ */ jsx33(ChatNotices, { chatVisible: sheet === "chat", onOpenChat: () => setSheet("chat"), sheetOpen: sheet === "people" || sheet === "chat" })
+  ] });
+}
+function useLandscapeChrome(fades) {
+  const [hidden, setHidden] = useState13(false);
+  const [shownAt, setShownAt] = useState13(0);
+  const opacity = useSharedValue5(1);
+  useEffect19(() => {
+    opacity.value = withTiming7(hidden ? 0 : 1, timings.fade);
+  }, [hidden, opacity]);
+  useEffect19(() => {
+    if (!fades) {
+      setHidden(false);
+      return;
+    }
+    const timer = setTimeout(() => setHidden(true), durations.landscapeHide);
+    return () => clearTimeout(timer);
+  }, [fades, shownAt]);
+  const show = useCallback15(() => {
+    setHidden(false);
+    setShownAt(Date.now());
+  }, []);
+  const style = useAnimatedStyle7(() => {
+    "worklet";
+    return { opacity: opacity.value };
+  });
+  return { hidden, show, style };
+}
+function frameStyle(frame) {
+  return { left: frame.x, top: frame.y, width: frame.width, height: frame.height };
+}
+var styles21 = StyleSheet23.create({
+  root: { flex: 1 },
+  region: { position: "absolute" }
+});
+
+// src/frame/Chalk.tsx
+import { jsx as jsx34 } from "react/jsx-runtime";
+function Chalk({ client, colorScheme, onColorSchemeChange, soundsEnabled, onSoundsEnabledChange, ...frame }) {
+  useEffect20(() => releaseSounds, []);
+  return /* @__PURE__ */ jsx34(GestureHandlerRootView, { style: styles22.root, children: /* @__PURE__ */ jsx34(SafeAreaProvider2, { children: /* @__PURE__ */ jsx34(PreferencesProvider, { colorScheme, onColorSchemeChange, onSoundsEnabledChange, soundsEnabled, children: (preferences) => /* @__PURE__ */ jsx34(ThemeProvider, { colorScheme: preferences.colorScheme, children: /* @__PURE__ */ jsx34(DeviceLayoutProvider, { children: /* @__PURE__ */ jsx34(PortalProvider, { children: /* @__PURE__ */ jsx34(ToastProvider, { children: /* @__PURE__ */ jsx34(ChalkProvider, { client, children: /* @__PURE__ */ jsx34(StageViewProvider, { children: /* @__PURE__ */ jsx34(CallFrame, { ...frame }) }) }) }) }) }) }) }) }) });
+}
+var styles22 = StyleSheet24.create({
+  root: { flex: 1 }
+});
+
+// src/utils/build-chalk-invite-link.ts
+var PUBLIC_INVITE_ORIGIN = "https://chalkmeet.com";
+function buildChalkInviteLink(spaceSlug, spaceInviteToken, origin = PUBLIC_INVITE_ORIGIN) {
+  const link = new URL(`/space/${encodeURIComponent(spaceSlug)}`, origin.replace(/\/+$/u, ""));
+  link.hash = new URLSearchParams({ spaceInviteToken }).toString();
+  return link.toString();
+}
 export {
   Chalk,
+  ChalkArrival,
   ChalkProvider,
-  Entrance,
-  Logo,
-  THEME_PALETTES,
-  THEME_TEXTURES,
-  Theme,
   buildChalkInviteLink,
-  createNativeTheme,
   extractSpaceInviteFromLink,
   getClipboardInviteSuggestion,
-  getThemeMode,
-  isDarkThemePalette,
   parseSpaceInviteLink,
-  resolveNativeAppearance,
   useCan,
   useChat,
   useConnection,