@q9labsai/chalk-react-native 4.0.0

package/dist/chunk-BXIZIHIO.js

@@ -0,0 +1,4501 @@
+import {
+  THEME_PALETTES,
+  THEME_TEXTURES,
+  resolveNativeAppearance
+} from "./chunk-IMKSYT7R.js";
+import {
+  DEFAULT_CHALK_THEME_TOKENS,
+  LIGHT_CHALK_THEME_TOKENS,
+  Theme,
+  createNativeTheme
+} from "./chunk-JB4LNWVP.js";
+import {
+  createNativeSpaceClient,
+  getNativeJourneyContext
+} from "./chunk-HXYIJ75K.js";
+
+// src/components/Chalk.tsx
+import { useCallback as useCallback9, useEffect as useEffect8, useMemo as useMemo15, useRef as useRef5, useState as useState9 } from "react";
+import { Pressable as Pressable16, StyleSheet as StyleSheet25, Text as Text19, View as View24 } from "react-native";
+
+// 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/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 useWhiteboard() {
+  return useSpaceSlice("whiteboard");
+}
+function useCan(capability) {
+  return useSelf().can(capability);
+}
+
+// src/ui/native-appearance-context.tsx
+import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useEffect, useMemo as useMemo2, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var NativeAppearanceContext = createContext2(null);
+function NativeAppearanceProvider({ children, initialAppearance }) {
+  const [selection, setSelection] = useState({ palette: initialAppearance?.palette ?? "light", texture: initialAppearance?.texture ?? "none" });
+  useEffect(() => {
+    if (initialAppearance?.palette === void 0 && initialAppearance?.texture === void 0) return;
+    setSelection((current) => {
+      const next = {
+        palette: initialAppearance?.palette ?? current.palette,
+        texture: initialAppearance?.texture ?? current.texture
+      };
+      return next.palette === current.palette && next.texture === current.texture ? current : next;
+    });
+  }, [initialAppearance?.palette, initialAppearance?.texture]);
+  const appearance = useMemo2(() => resolveNativeAppearance(selection), [selection]);
+  const updateSelection = useCallback2((next) => {
+    setSelection(next);
+  }, []);
+  const value = useMemo2(
+    () => ({
+      appearance,
+      setPalette: (palette) => updateSelection({ ...selection, palette }),
+      setTexture: (texture) => updateSelection({ ...selection, texture })
+    }),
+    [appearance, selection, updateSelection]
+  );
+  return /* @__PURE__ */ jsx2(NativeAppearanceContext.Provider, { value, children });
+}
+function useNativeAppearance() {
+  const value = useContext2(NativeAppearanceContext);
+  if (!value) throw new Error("useNativeAppearance must be used inside NativeAppearanceProvider");
+  return value;
+}
+function NativeTextureOverlay() {
+  const { appearance } = useNativeAppearance();
+  const descriptor = appearance.textureDescriptor;
+  if (descriptor.kind === "none") return null;
+  const marks = descriptor.kind === "paper-grain" ? 44 : 26;
+  return /* @__PURE__ */ jsx2(View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", pointerEvents: "none", style: [StyleSheet.absoluteFill, styles.overlay, { opacity: descriptor.opacity }], children: Array.from({ length: marks }, (_, index) => {
+    const size = descriptor.kind === "paper-grain" ? 1 + index % 2 : 1;
+    return /* @__PURE__ */ jsx2(View, { style: [styles.mark, descriptor.kind === "slate" && styles.slateMark, { backgroundColor: appearance.tokens.text, height: size, left: `${index * 37 % 97}%`, top: `${index * 53 % 96}%`, width: descriptor.kind === "slate" ? 38 : size }] }, index);
+  }) });
+}
+var styles = StyleSheet.create({
+  overlay: { overflow: "hidden" },
+  mark: { borderRadius: 2, position: "absolute" },
+  slateMark: { opacity: 0.48, transform: [{ rotate: "7deg" }] }
+});
+
+// src/ui/native-theme.tsx
+import { createContext as createContext3, useContext as useContext3, useMemo as useMemo3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var NativeThemeContext = createContext3(Theme);
+function resolveNativeTheme(input, appearance) {
+  const colorScheme = input?.colorScheme ?? appearance?.mode ?? "dark";
+  const base = appearance ? themeTokensFromAppearance(appearance) : colorScheme === "light" ? LIGHT_CHALK_THEME_TOKENS : DEFAULT_CHALK_THEME_TOKENS;
+  const accent = input?.accent;
+  return createNativeTheme(
+    {
+      ...base,
+      ...input?.tokens,
+      ...accent ? { accent, focus: accent } : {}
+    },
+    colorScheme
+  );
+}
+function NativeThemeProvider({ appearance, children, theme }) {
+  const value = useMemo3(() => resolveNativeTheme(theme, appearance), [appearance, theme?.accent, theme?.colorScheme, theme?.tokens]);
+  return /* @__PURE__ */ jsx3(NativeThemeContext.Provider, { value, children });
+}
+function useNativeTheme() {
+  return useContext3(NativeThemeContext);
+}
+function themeTokensFromAppearance(appearance) {
+  const tokens = appearance.tokens;
+  const base = appearance.mode === "light" ? LIGHT_CHALK_THEME_TOKENS : DEFAULT_CHALK_THEME_TOKENS;
+  return {
+    ...base,
+    canvas: tokens.canvas,
+    chrome: tokens.panel,
+    surface: tokens.panel,
+    stage: tokens.stage,
+    text: tokens.text,
+    mutedText: tokens.textMuted,
+    line: tokens.line,
+    focus: tokens.controlActiveLine,
+    accent: tokens.controlPrimary,
+    accentText: tokens.messageLocalText
+  };
+}
+
+// src/platform/platform.ts
+import { Dimensions, Platform } from "react-native";
+function getIsPad() {
+  const maybeIsPad = Platform.isPad;
+  if (typeof maybeIsPad === "boolean") {
+    return maybeIsPad;
+  }
+  if (Platform.OS !== "ios") {
+    return false;
+  }
+  const { width, height } = Dimensions.get("window");
+  return Math.min(width, height) >= 768;
+}
+function resolvePlatformVariant() {
+  const platformOS = Platform.OS;
+  switch (platformOS) {
+    case "android":
+      return "android";
+    case "ios":
+      return getIsPad() ? "ios-pad" : "ios-phone";
+    case "macos":
+      return "macos";
+    case "tvos":
+      return "tvos";
+    default:
+      return "android";
+  }
+}
+
+// src/components/SpaceView.shared.tsx
+import { Alert as Alert3, StyleSheet as StyleSheet20, Text as Text14, View as View19 } from "react-native";
+
+// src/utils/ios-simulator.ts
+import { NativeModules, Platform as Platform2 } from "react-native";
+var IOS_SIMULATOR_MEDIA_MESSAGE = "Camera and microphone are unavailable in the iOS Simulator. Join starts with media off.";
+var EMPTY_RTP_CAPABILITIES = Object.freeze({
+  codecs: [],
+  headerExtensions: []
+});
+function isIosSimulator() {
+  if (Platform2.OS !== "ios") {
+    return false;
+  }
+  const runtimeInfo = NativeModules.ChalkRuntimeInfo;
+  return runtimeInfo?.isSimulator === true;
+}
+function getIosSimulatorVideoMessage() {
+  return IOS_SIMULATOR_MEDIA_MESSAGE;
+}
+function getIosSimulatorMediaMessage() {
+  return IOS_SIMULATOR_MEDIA_MESSAGE;
+}
+
+// src/components/ReactionPicker.tsx
+import { memo } from "react";
+import { Modal, Pressable, StyleSheet as StyleSheet2, Text, View as View2 } from "react-native";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var DEFAULT_REACTIONS = ["\u{1F44D}", "\u2764\uFE0F", "\u{1F602}", "\u{1F62E}", "\u{1F622}", "\u{1F389}"];
+function ReactionPickerBase({ isOpen, onClose, onSelect }) {
+  return /* @__PURE__ */ jsx4(Modal, { animationType: "fade", transparent: true, visible: isOpen, onRequestClose: onClose, children: /* @__PURE__ */ jsxs(View2, { style: styles2.overlay, children: [
+    /* @__PURE__ */ jsx4(Pressable, { accessibilityLabel: "Close Reactions", onPress: onClose, style: styles2.backdrop }),
+    /* @__PURE__ */ jsxs(View2, { style: styles2.picker, children: [
+      /* @__PURE__ */ jsxs(View2, { style: styles2.header, children: [
+        /* @__PURE__ */ jsx4(Text, { accessibilityRole: "header", style: styles2.title, children: "Reactions" }),
+        /* @__PURE__ */ jsx4(Pressable, { accessibilityLabel: "Close Reactions", accessibilityRole: "button", onPress: onClose, style: ({ pressed }) => [styles2.closeButton, pressed && styles2.pressed], children: /* @__PURE__ */ jsx4(Text, { style: styles2.closeText, children: "\xD7" }) })
+      ] }),
+      DEFAULT_REACTIONS.map((emoji) => /* @__PURE__ */ jsx4(
+        Pressable,
+        {
+          accessibilityLabel: `Send ${emoji} reaction`,
+          accessibilityRole: "button",
+          onPress: () => {
+            onSelect(emoji);
+            onClose();
+          },
+          style: ({ pressed }) => [styles2.emojiButton, pressed && styles2.emojiButtonPressed],
+          children: /* @__PURE__ */ jsx4(Text, { style: styles2.emojiText, children: emoji })
+        },
+        emoji
+      ))
+    ] })
+  ] }) });
+}
+var styles2 = StyleSheet2.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: Theme.colors.darkOverlay30,
+    justifyContent: "flex-end",
+    alignItems: "center",
+    paddingBottom: 100
+  },
+  backdrop: {
+    ...StyleSheet2.absoluteFillObject,
+    backgroundColor: Theme.colors.darkOverlay30
+  },
+  picker: {
+    flexDirection: "column",
+    backgroundColor: Theme.colors.insetSurface,
+    borderRadius: 28,
+    padding: 6,
+    gap: 4,
+    borderWidth: 1,
+    borderColor: Theme.colors.whiteOverlay08,
+    shadowColor: Theme.colors.darkCanvas,
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.4,
+    shadowRadius: 16,
+    elevation: 12
+  },
+  header: { alignItems: "center", flexDirection: "row", justifyContent: "space-between", minHeight: 46, paddingHorizontal: 8, width: "100%" },
+  title: { color: Theme.colors.foreground, fontSize: 16, fontWeight: "700" },
+  closeButton: { alignItems: "center", borderColor: Theme.colors.border, borderRadius: Theme.radius.full, borderWidth: 1, height: 36, justifyContent: "center", width: 36 },
+  closeText: { color: Theme.colors.foreground, fontSize: 23, fontWeight: "400", lineHeight: 24 },
+  emojiButton: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  emojiButtonPressed: {
+    backgroundColor: Theme.colors.whiteOverlay12,
+    transform: [{ scale: 0.88 }]
+  },
+  pressed: {
+    opacity: 0.72,
+    transform: [{ scale: 0.96 }]
+  },
+  emojiText: {
+    fontSize: 26
+  }
+});
+var ReactionPicker = memo(ReactionPickerBase);
+
+// src/components/native-space-view/SpaceGrid.android.tsx
+import { useCallback as useCallback3, useMemo as useMemo7, useRef, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { FlatList, StyleSheet as StyleSheet6, Text as Text2, View as View6, useWindowDimensions } from "react-native";
+import MicOff01Icon from "@hugeicons/core-free-icons/dist/esm/MicOff01Icon";
+import { HugeiconsIcon } from "@hugeicons/react-native";
+
+// 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/MediaView.tsx
+import { useEffect as useEffect2, useMemo as useMemo6 } from "react";
+import { StyleSheet as StyleSheet5, View as View5 } from "react-native";
+
+// src/components/native-media-visibility.ts
+function shouldRenderNativeMediaTrack({ participant, track, mediaKind = "camera" }) {
+  if (!track) {
+    return false;
+  }
+  if (track.readyState === "ended") {
+    return false;
+  }
+  if (mediaKind === "camera" && participant && !participant.videoEnabled) {
+    return false;
+  }
+  return true;
+}
+
+// src/ui/participant-avatar.ts
+var palettes = Theme.avatarPalettes;
+var PARTICIPANT_AVATAR_PALETTE = palettes.map(([primary, , surface]) => ({ primary, surface }));
+function getParticipantInitials(name) {
+  const parts = (name ?? "").trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  return `${parts[0]?.[0] ?? "?"}${parts[1]?.[0] ?? ""}`.toUpperCase();
+}
+function getParticipantColor(seed = "guest", _preference) {
+  const palette = palettes[hashString(seed) % palettes.length] ?? palettes[0];
+  return {
+    primary: palette[0],
+    gradientEnd: palette[0],
+    surface: palette[2]
+  };
+}
+function getParticipantAvatarRecipe(seed = "guest", preference) {
+  const colors = getParticipantColor(seed, preference);
+  return {
+    colors,
+    gradientStops: [
+      { color: colors.primary, offset: "0%" },
+      { color: colors.primary, offset: "100%" }
+    ],
+    facehashColors: [colors.primary, colors.primary, colors.primary]
+  };
+}
+function hashString(value) {
+  let hash = 0;
+  for (let index = 0; index < value.length; index += 1) {
+    hash = hash * 31 + value.charCodeAt(index) >>> 0;
+  }
+  return hash;
+}
+
+// src/components/FaceAvatar.tsx
+import { FacehashNative } from "@q9labsai/facehash/react-native";
+import { memo as memo3, useMemo as useMemo5, useState as useState2 } from "react";
+import { Image, StyleSheet as StyleSheet4, View as View4 } from "react-native";
+
+// src/components/GradientSurface.tsx
+import { memo as memo2, useMemo as useMemo4 } from "react";
+import { StyleSheet as StyleSheet3, View as View3 } from "react-native";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function GradientSurfaceBase({ participantId, gradientPreference, borderRadius = 0, opacity = 1, variant = "surface" }) {
+  const colors = useMemo4(() => getParticipantColor(participantId, gradientPreference), [gradientPreference, participantId]);
+  const backgroundColor = variant === "avatar" ? colors.primary : colors.surface;
+  return /* @__PURE__ */ jsx5(View3, { pointerEvents: "none", style: [StyleSheet3.absoluteFillObject, { backgroundColor, borderRadius, opacity }] });
+}
+var GradientSurface = memo2(GradientSurfaceBase);
+
+// src/components/FaceAvatar.tsx
+import { Fragment, jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var sizeMap = {
+  xs: { size: 24 },
+  sm: { size: 32 },
+  md: { size: 48 },
+  lg: { size: 64 },
+  xl: { size: 96 },
+  "2xl": { size: 120 }
+};
+var statusColorMap = {
+  online: Theme.colors.success,
+  away: Theme.colors.warning,
+  busy: Theme.colors.error,
+  offline: Theme.colors.statusOffline
+};
+function FaceAvatarBase({ name, src, size = "md", status, gradientPreference, audioLevel = 0 }) {
+  const [imageError, setImageError] = useState2(false);
+  const hasUploadedImage = Boolean(src) && !imageError;
+  const { pxSize } = useMemo5(() => {
+    if (typeof size === "number") {
+      return { pxSize: size };
+    }
+    const mapped = sizeMap[size];
+    return { pxSize: mapped.size };
+  }, [size]);
+  const avatarRecipe = useMemo5(() => getParticipantAvatarRecipe(name || "unknown", gradientPreference), [gradientPreference, name]);
+  const wrapperStyle = useMemo5(
+    () => ({
+      height: pxSize,
+      width: pxSize,
+      transform: [{ scale: 1 + Math.min(0.06, Math.max(0, audioLevel) * 0.04) }]
+    }),
+    [pxSize, audioLevel]
+  );
+  const avatarStyle = useMemo5(
+    () => ({
+      borderRadius: pxSize / 2,
+      height: pxSize,
+      width: pxSize
+    }),
+    [pxSize]
+  );
+  const statusSize = Math.max(8, pxSize / 4);
+  return /* @__PURE__ */ jsxs2(View4, { style: [styles3.wrapper, wrapperStyle], children: [
+    /* @__PURE__ */ jsx6(View4, { style: [styles3.avatar, avatarStyle], children: hasUploadedImage ? /* @__PURE__ */ jsx6(Image, { source: { uri: src }, style: { width: pxSize, height: pxSize, borderRadius: pxSize / 2 }, onError: () => setImageError(true) }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx6(GradientSurface, { variant: "avatar", participantId: name, gradientPreference, borderRadius: pxSize / 2 }),
+      /* @__PURE__ */ jsx6(View4, { style: StyleSheet4.absoluteFillObject, children: /* @__PURE__ */ jsx6(FacehashNative, { colors: avatarRecipe.facehashColors, enableBlink: true, interactive: true, name: name || "guest", size: pxSize, testID: "native-facehash" }) })
+    ] }) }),
+    status && /* @__PURE__ */ jsx6(
+      View4,
+      {
+        style: [
+          styles3.statusIndicator,
+          {
+            width: statusSize,
+            height: statusSize,
+            borderRadius: statusSize / 2,
+            backgroundColor: statusColorMap[status],
+            borderWidth: 2,
+            borderColor: Theme.colors.darkCanvas
+          }
+        ]
+      }
+    )
+  ] });
+}
+var styles3 = StyleSheet4.create({
+  wrapper: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  avatar: {
+    overflow: "hidden"
+  },
+  statusIndicator: {
+    position: "absolute",
+    bottom: 0,
+    right: 0
+  }
+});
+var FaceAvatar = memo3(FaceAvatarBase);
+
+// 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 jsx7 } from "react/jsx-runtime";
+function hasRtcVideoView() {
+  return canRenderRtcVideoView(RTCView);
+}
+function RtcVideoView(props) {
+  if (!canRenderRtcVideoView(RTCView)) {
+    return null;
+  }
+  const RtcView = RTCView;
+  return /* @__PURE__ */ jsx7(RtcView, { ...props });
+}
+
+// src/components/episode-diagnostic-render-observer.ts
+var REGISTRY = /* @__PURE__ */ Symbol.for("@chalk/private/episode-diagnostic-render-registry/v1");
+function observeNativeFrameNotObservable(track) {
+  try {
+    globalThis[REGISTRY]?.get(track)?.("not_observable");
+  } catch {
+  }
+}
+
+// src/components/MediaView.tsx
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+function MediaView({ participant, track, mediaKind = "camera", label, mirror = false, objectFit = "cover", zOrder = 0 }) {
+  const theme = useNativeTheme();
+  const shouldRenderVideo = shouldRenderNativeMediaTrack({ participant, track, mediaKind });
+  const canRenderPreview = hasRtcVideoView();
+  const stream = useMemo6(() => {
+    if (!shouldRenderVideo || !track) {
+      return null;
+    }
+    return createNativeMediaStream(track);
+  }, [shouldRenderVideo, track]);
+  const name = participant?.displayName?.trim() || label || "Participant";
+  const showStream = Boolean(stream && canRenderPreview);
+  const streamURL = showStream && stream ? stream.toURL() : null;
+  useEffect2(() => {
+    if (shouldRenderVideo && track) observeNativeFrameNotObservable(track);
+  }, [shouldRenderVideo, track]);
+  return /* @__PURE__ */ jsxs3(View5, { style: [styles4.surface, { backgroundColor: theme.colors.stageBackground }], children: [
+    streamURL ? /* @__PURE__ */ jsx8(RtcVideoView, { mirror, objectFit, streamURL, style: StyleSheet5.absoluteFillObject, zOrder: Math.max(1, zOrder) }) : null,
+    !showStream ? /* @__PURE__ */ jsxs3(View5, { style: styles4.fallback, children: [
+      /* @__PURE__ */ jsx8(GradientSurface, { borderRadius: 0, opacity: 0.92, participantId: name }),
+      /* @__PURE__ */ jsx8(FaceAvatar, { name, size: 88, textSize: 34 })
+    ] }) : null
+  ] });
+}
+var styles4 = StyleSheet5.create({
+  surface: {
+    flex: 1,
+    minHeight: 80,
+    width: "100%",
+    height: "100%",
+    overflow: "hidden",
+    backgroundColor: Theme.colors.stageBackground,
+    borderRadius: Theme.radius.md,
+    position: "relative"
+  },
+  fallback: {
+    ...StyleSheet5.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    height: "100%"
+  }
+});
+
+// src/components/native-space-view/native-space-page-store.ts
+function createSpacePageStore() {
+  let page = 0;
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    getSnapshot: () => page,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    setPage: (nextPage) => {
+      const nextPageIndex = Math.max(0, nextPage);
+      if (nextPageIndex === page) {
+        return;
+      }
+      page = nextPageIndex;
+      for (const listener of listeners) {
+        listener();
+      }
+    },
+    clampToPageCount: (pageCount) => {
+      const nextPageIndex = Math.min(page, Math.max(0, pageCount - 1));
+      if (nextPageIndex === page) {
+        return;
+      }
+      page = nextPageIndex;
+      for (const listener of listeners) {
+        listener();
+      }
+    }
+  };
+}
+
+// src/components/native-space-view/native-space-grid-keys.ts
+function nativeSpaceGridKey(prefix, participants) {
+  const participantIds = participants.map((participant) => participant.id).join("|");
+  return `${prefix}-${participantIds || "empty"}`;
+}
+
+// src/components/native-space-view/SpaceGrid.android.tsx
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+function buildWideParticipantRows(participants, columnCount) {
+  if (participants.length === 0) {
+    return [];
+  }
+  const rows = [];
+  for (let index = 0; index < participants.length; index += columnCount) {
+    rows.push(participants.slice(index, index + columnCount));
+  }
+  return rows;
+}
+function SpaceGridAndroid({ participants, gridPages }) {
+  const theme = useNativeTheme();
+  const { width, height } = useWindowDimensions();
+  const isTablet = width >= 768;
+  const pageStoreRef = useRef(null);
+  const pageStore = pageStoreRef.current ?? (pageStoreRef.current = createSpacePageStore());
+  const finalPages = useMemo7(() => {
+    if (!isTablet) {
+      return gridPages;
+    }
+    const perPage = 6;
+    const pages = [];
+    for (let index = 0; index < participants.length; index += perPage) {
+      pages.push(participants.slice(index, index + perPage));
+    }
+    return pages;
+  }, [gridPages, isTablet, participants]);
+  const requestedPage = useSyncExternalStore2(pageStore.subscribe, pageStore.getSnapshot, pageStore.getSnapshot);
+  const activePage = Math.min(requestedPage, Math.max(0, finalPages.length - 1));
+  const activePageKey = nativeSpaceGridKey("indicator", finalPages[activePage] ?? []);
+  const clampPageRef = useCallback3(
+    (node) => {
+      if (node !== null) {
+        pageStore.clampToPageCount(finalPages.length);
+      }
+    },
+    [finalPages.length, pageStore]
+  );
+  if (participants.length === 0) {
+    return /* @__PURE__ */ jsxs4(View6, { ref: clampPageRef, style: [styles5.emptyState, { backgroundColor: theme.colors.darkCanvas }], children: [
+      /* @__PURE__ */ jsx9(Text2, { style: [styles5.emptyEyebrow, { color: theme.colors.primary }], children: "Space ready" }),
+      /* @__PURE__ */ jsx9(Text2, { style: [styles5.emptyTitle, { color: theme.colors.foreground }], children: "You're the first one here" }),
+      /* @__PURE__ */ jsx9(Text2, { style: [styles5.emptyCopy, { color: theme.colors.mutedForeground }], children: "Others will appear when they join. Invite someone to get started." })
+    ] });
+  }
+  if (participants.length === 1) {
+    return /* @__PURE__ */ jsx9(View6, { ref: clampPageRef, style: styles5.singleTile, children: /* @__PURE__ */ jsx9(ParticipantTile, { participant: participants[0] }) });
+  }
+  if (!isTablet && participants.length <= 4) {
+    if (participants.length === 2) {
+      return /* @__PURE__ */ jsx9(View6, { ref: clampPageRef, style: styles5.compactTwoUp, children: participants.map((participant) => /* @__PURE__ */ jsx9(ParticipantTile, { participant }, participant.id)) });
+    }
+    if (participants.length === 3) {
+      return /* @__PURE__ */ jsxs4(View6, { ref: clampPageRef, style: styles5.compactThree, children: [
+        /* @__PURE__ */ jsx9(View6, { style: styles5.compactThreeTop, children: /* @__PURE__ */ jsx9(ParticipantTile, { participant: participants[0] }) }),
+        /* @__PURE__ */ jsxs4(View6, { style: styles5.compactThreeBottom, children: [
+          /* @__PURE__ */ jsx9(ParticipantTile, { participant: participants[1] }),
+          /* @__PURE__ */ jsx9(ParticipantTile, { participant: participants[2] })
+        ] })
+      ] });
+    }
+    if (participants.length === 4) {
+      return /* @__PURE__ */ jsxs4(View6, { ref: clampPageRef, style: styles5.compactFour, children: [
+        /* @__PURE__ */ jsxs4(View6, { style: styles5.gridRow, children: [
+          /* @__PURE__ */ jsx9(ParticipantTile, { participant: participants[0] }),
+          /* @__PURE__ */ jsx9(ParticipantTile, { participant: participants[1] })
+        ] }),
+        /* @__PURE__ */ jsxs4(View6, { style: styles5.gridRow, children: [
+          /* @__PURE__ */ jsx9(ParticipantTile, { participant: participants[2] }),
+          /* @__PURE__ */ jsx9(ParticipantTile, { participant: participants[3] })
+        ] })
+      ] });
+    }
+  }
+  return /* @__PURE__ */ jsxs4(View6, { ref: clampPageRef, style: styles5.pagedContainer, children: [
+    /* @__PURE__ */ jsx9(
+      FlatList,
+      {
+        data: finalPages,
+        horizontal: true,
+        keyExtractor: (page) => nativeSpaceGridKey("page", page),
+        onMomentumScrollEnd: (event) => {
+          const measuredPageWidth = Math.max(1, event.nativeEvent.layoutMeasurement.width);
+          pageStore.setPage(Math.round(event.nativeEvent.contentOffset.x / measuredPageWidth));
+        },
+        pagingEnabled: true,
+        snapToInterval: width,
+        snapToAlignment: "center",
+        decelerationRate: "fast",
+        disableIntervalMomentum: true,
+        scrollEventThrottle: 16,
+        removeClippedSubviews: false,
+        showsHorizontalScrollIndicator: false,
+        windowSize: 3,
+        renderItem: ({ item: page }) => {
+          const columns = isTablet ? width > height ? 3 : 2 : 2;
+          const rows = buildWideParticipantRows(page, columns);
+          return /* @__PURE__ */ jsx9(View6, { style: [styles5.page, { width }], children: /* @__PURE__ */ jsxs4(View6, { style: styles5.gridContainer, children: [
+            rows.map((row) => /* @__PURE__ */ jsxs4(View6, { style: styles5.gridRow, children: [
+              row.map((participant) => /* @__PURE__ */ jsx9(ParticipantTile, { participant }, participant.id)),
+              row.length < columns && Array.from({ length: columns - row.length }, (_, fillerSlot) => fillerSlot + row.length).map((slot) => /* @__PURE__ */ jsx9(View6, { style: [styles5.gridTile, { backgroundColor: theme.colors.transparent }] }, nativeSpaceGridKey(`filler-${slot}`, row)))
+            ] }, nativeSpaceGridKey("row", row))),
+            isTablet && rows.length < (width > height ? 2 : 3) ? /* @__PURE__ */ jsx9(View6, { style: { flex: (width > height ? 2 : 3) - rows.length } }) : null
+          ] }) });
+        }
+      }
+    ),
+    finalPages.length > 1 ? /* @__PURE__ */ jsx9(View6, { style: styles5.pageIndicators, children: finalPages.map((page) => /* @__PURE__ */ jsx9(View6, { style: [styles5.pageIndicator, { backgroundColor: theme.colors.mutedForeground }, nativeSpaceGridKey("indicator", page) === activePageKey && { backgroundColor: theme.colors.primary }] }, nativeSpaceGridKey("indicator", page))) }) : null
+  ] });
+}
+function ParticipantTile({ participant, width, height }) {
+  const theme = useNativeTheme();
+  return /* @__PURE__ */ jsxs4(View6, { style: [styles5.tile, { backgroundColor: theme.colors.tileBackground, borderColor: theme.colors.border }, width !== void 0 && { width }, height !== void 0 && { height }], children: [
+    /* @__PURE__ */ jsx9(MediaView, { participant, track: participant.videoTrack ?? null }),
+    /* @__PURE__ */ jsxs4(View6, { style: [styles5.identityPuck, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border, shadowColor: theme.colors.darkCanvas }], children: [
+      /* @__PURE__ */ jsx9(Text2, { style: [styles5.participantName, { color: theme.colors.foreground }], numberOfLines: 1, children: participant.displayName || "Participant" }),
+      !participant.audioEnabled && /* @__PURE__ */ jsx9(View6, { style: styles5.muteDot, children: /* @__PURE__ */ jsx9(HugeiconsIcon, { icon: MicOff01Icon, size: 10, color: theme.colors.primaryForeground }) })
+    ] })
+  ] });
+}
+var styles5 = StyleSheet6.create({
+  emptyState: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: Theme.spacing["3xl"],
+    gap: Theme.spacing.sm
+  },
+  emptyEyebrow: {
+    ...Theme.typography.eyebrow,
+    color: Theme.colors.primary
+  },
+  emptyTitle: {
+    ...Theme.typography.heading,
+    color: Theme.colors.foreground
+  },
+  emptyCopy: {
+    ...Theme.typography.body,
+    color: Theme.colors.mutedForeground,
+    textAlign: "center"
+  },
+  singleTile: {
+    flex: 1,
+    padding: 10
+  },
+  compactTwoUp: {
+    flex: 1,
+    gap: 10,
+    padding: 10
+  },
+  compactThree: {
+    flex: 1,
+    gap: 10,
+    padding: 10
+  },
+  compactThreeTop: {
+    flex: 3,
+    minHeight: 0,
+    overflow: "hidden"
+  },
+  compactThreeBottom: {
+    flex: 2,
+    flexDirection: "row",
+    gap: 10,
+    minHeight: 0
+  },
+  compactFour: {
+    flex: 1,
+    gap: 10,
+    padding: 10
+  },
+  pagedContainer: {
+    flex: 1,
+    width: "100%",
+    paddingBottom: 20
+  },
+  page: {
+    flex: 1
+  },
+  gridContainer: {
+    flex: 1,
+    gap: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 10
+  },
+  gridRow: {
+    flex: 1,
+    flexDirection: "row",
+    gap: 10
+  },
+  gridTile: {
+    flex: 1
+  },
+  pageIndicators: {
+    flexDirection: "row",
+    alignSelf: "center",
+    gap: 6,
+    paddingTop: 4
+  },
+  pageIndicator: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: Theme.colors.whiteOverlay20
+  },
+  pageIndicatorActive: {
+    width: 18,
+    backgroundColor: Theme.colors.primary
+  },
+  tile: {
+    borderRadius: 32,
+    overflow: "hidden",
+    backgroundColor: Theme.colors.nearDarkSurface,
+    borderWidth: 1,
+    borderColor: Theme.colors.whiteOverlay08,
+    flex: 1
+  },
+  identityPuck: {
+    position: "absolute",
+    left: 16,
+    bottom: 16,
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: Theme.colors.chromeOverlay82,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderRadius: 20,
+    gap: 8,
+    borderWidth: 1,
+    borderColor: Theme.colors.whiteOverlay12,
+    shadowColor: Theme.colors.darkCanvas,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8
+  },
+  participantName: {
+    color: Theme.colors.onDark,
+    fontSize: 13,
+    fontWeight: "800",
+    maxWidth: 140
+  },
+  muteDot: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    backgroundColor: Theme.colors.error,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+
+// src/components/native-space-view/SpaceBottomDock.android.tsx
+import CallEnd01Icon from "@hugeicons/core-free-icons/dist/esm/CallEnd01Icon";
+import Chat01Icon from "@hugeicons/core-free-icons/dist/esm/Chat01Icon";
+import Mic01Icon from "@hugeicons/core-free-icons/dist/esm/Mic01Icon";
+import MicOff01Icon2 from "@hugeicons/core-free-icons/dist/esm/MicOff01Icon";
+import MoreHorizontalIcon from "@hugeicons/core-free-icons/dist/esm/MoreHorizontalIcon";
+import Video01Icon from "@hugeicons/core-free-icons/dist/esm/Video01Icon";
+import VideoOffIcon from "@hugeicons/core-free-icons/dist/esm/VideoOffIcon";
+import { HugeiconsIcon as HugeiconsIcon2 } from "@hugeicons/react-native";
+import { Platform as Platform3, Pressable as Pressable2, StyleSheet as StyleSheet7, Text as Text3, View as View7 } from "react-native";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+function SpaceBottomDockAndroid({ simulatorMediaDisabled, isMuted, isCameraOff, unreadChatCount, onToggleAudio, onToggleVideo, onOpenChat, onOpenMore, onLeave }) {
+  const theme = useNativeTheme();
+  return /* @__PURE__ */ jsx10(View7, { style: [styles6.bottomDock, { backgroundColor: theme.colors.darkCanvas, borderColor: theme.colors.border }], children: /* @__PURE__ */ jsxs5(View7, { style: styles6.controlPill, children: [
+    /* @__PURE__ */ jsx10(
+      Pressable2,
+      {
+        disabled: simulatorMediaDisabled,
+        onPress: onToggleAudio,
+        style: ({ pressed }) => [styles6.controlButton, { backgroundColor: isMuted ? theme.colors.error : theme.colors.controlsBackground }, simulatorMediaDisabled && styles6.controlButtonDisabled, pressed && styles6.controlButtonPressed],
+        children: /* @__PURE__ */ jsx10(HugeiconsIcon2, { color: isMuted ? theme.colors.onDark : theme.colors.primary, icon: isMuted ? MicOff01Icon2 : Mic01Icon, size: 22 })
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      Pressable2,
+      {
+        disabled: simulatorMediaDisabled,
+        onPress: onToggleVideo,
+        style: ({ pressed }) => [styles6.controlButton, { backgroundColor: isCameraOff ? theme.colors.error : theme.colors.controlsBackground }, simulatorMediaDisabled && styles6.controlButtonDisabled, pressed && styles6.controlButtonPressed],
+        children: /* @__PURE__ */ jsx10(HugeiconsIcon2, { color: isCameraOff ? theme.colors.onDark : theme.colors.primary, icon: isCameraOff ? VideoOffIcon : Video01Icon, size: 22 })
+      }
+    ),
+    onOpenChat ? /* @__PURE__ */ jsxs5(Pressable2, { onPress: onOpenChat, style: ({ pressed }) => [styles6.controlButton, { backgroundColor: theme.colors.controlsBackground }, pressed && styles6.controlButtonPressed], children: [
+      /* @__PURE__ */ jsx10(HugeiconsIcon2, { color: theme.colors.onDark, icon: Chat01Icon, size: 22 }),
+      unreadChatCount > 0 ? /* @__PURE__ */ jsx10(View7, { style: [styles6.controlBadge, { backgroundColor: theme.colors.primary, borderColor: theme.colors.darkCanvas }], children: /* @__PURE__ */ jsx10(Text3, { style: [styles6.controlBadgeText, { color: theme.colors.primaryForeground }], children: unreadChatCount > 9 ? "9+" : String(unreadChatCount) }) }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx10(Pressable2, { onPress: onOpenMore, style: ({ pressed }) => [styles6.controlButton, { backgroundColor: theme.colors.controlsBackground }, pressed && styles6.controlButtonPressed], children: /* @__PURE__ */ jsx10(HugeiconsIcon2, { color: theme.colors.onDark, icon: MoreHorizontalIcon, size: 22 }) }),
+    /* @__PURE__ */ jsx10(Pressable2, { onPress: onLeave, style: ({ pressed }) => [styles6.controlButton, styles6.controlButtonEndCall, { backgroundColor: theme.colors.error }, pressed && styles6.controlButtonPressed], children: /* @__PURE__ */ jsx10(HugeiconsIcon2, { color: theme.colors.onDark, icon: CallEnd01Icon, size: 22 }) })
+  ] }) });
+}
+var styles6 = StyleSheet7.create({
+  bottomDock: {
+    paddingTop: 20,
+    paddingBottom: Platform3.OS === "ios" ? 38 : 24,
+    paddingHorizontal: 24,
+    backgroundColor: Theme.colors.darkCanvas,
+    borderTopWidth: 1,
+    borderColor: Theme.colors.whiteOverlay06,
+    width: "100%"
+  },
+  controlPill: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%"
+  },
+  controlButton: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: Theme.colors.whiteOverlay08
+  },
+  controlButtonDisabled: {
+    opacity: 0.45
+  },
+  controlButtonPressed: {
+    opacity: 0.7,
+    transform: [{ scale: 0.92 }]
+  },
+  controlButtonDanger: {
+    backgroundColor: Theme.colors.dangerStrong
+  },
+  controlButtonEndCall: {
+    backgroundColor: Theme.colors.error,
+    width: 68,
+    borderRadius: 18
+  },
+  controlBadge: {
+    position: "absolute",
+    top: -2,
+    right: -2,
+    minWidth: 18,
+    height: 18,
+    borderRadius: 9,
+    backgroundColor: Theme.colors.primary,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 4,
+    borderWidth: 2,
+    borderColor: Theme.colors.darkCanvas
+  },
+  controlBadgeText: {
+    color: Theme.colors.onDark,
+    fontSize: 10,
+    fontWeight: "800"
+  }
+});
+
+// src/components/native-space-view/SpaceActionMenu.tsx
+import { Modal as Modal2, Pressable as Pressable3, StyleSheet as StyleSheet8, Text as Text4, View as View8 } from "react-native";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+function SpaceActionMenu({ controller }) {
+  const theme = useNativeTheme();
+  const actions = [
+    ...controller.canInvite ? [{ label: "Invite participants", onPress: controller.handleInviteParticipants }] : [],
+    ...controller.canParticipants ? [{ label: "Participants", onPress: () => controller.openPanel("participants") }] : [],
+    ...controller.canChat ? [{ label: "Chat", onPress: () => controller.openPanel("chat") }] : [],
+    ...controller.canScreenShare ? [{ label: controller.screenShare.isLocalSharing ? "Stop presenting" : "Present screen", onPress: controller.toggleScreenShare }] : [],
+    ...controller.canHandRaise ? [{ label: controller.handRaised ? "Lower hand" : "Raise hand", onPress: controller.toggleHand }] : [],
+    ...controller.canWhiteboard ? [{ label: controller.whiteboard.isOpen ? "Close whiteboard" : "Open whiteboard", onPress: controller.whiteboard.toggle }] : [],
+    ...controller.canReactions ? [
+      {
+        label: "Reactions",
+        onPress: () => {
+          controller.setActionsOpen(false);
+          controller.setReactionPickerOpen(true);
+        }
+      }
+    ] : [],
+    ...controller.canSettings ? [{ label: "Settings", onPress: () => controller.openPanel("settings") }] : [],
+    ...["grid", "focus", "presentation"].map((layout) => ({
+      label: `${layout === "grid" ? "Grid" : layout === "focus" ? "Focus" : "Presentation"} layout${controller.layout.layout === layout ? " (selected)" : ""}`,
+      onPress: () => {
+        controller.layout.setLayout(layout);
+        controller.setActionsOpen(false);
+      }
+    }))
+  ];
+  return /* @__PURE__ */ jsx11(Modal2, { animationType: "slide", onRequestClose: () => controller.setActionsOpen(false), transparent: true, visible: controller.actionsOpen, children: /* @__PURE__ */ jsx11(Pressable3, { onPress: () => controller.setActionsOpen(false), style: styles7.backdrop, children: /* @__PURE__ */ jsxs6(View8, { style: [styles7.sheet, { backgroundColor: theme.colors.background }], children: [
+    /* @__PURE__ */ jsx11(Text4, { style: [styles7.title, { color: theme.colors.foreground }], children: "Space actions" }),
+    actions.map((action) => /* @__PURE__ */ jsx11(Pressable3, { onPress: action.onPress, style: ({ pressed }) => [styles7.action, { backgroundColor: theme.colors.card }, pressed && styles7.pressed], children: /* @__PURE__ */ jsx11(Text4, { style: [styles7.actionText, { color: theme.colors.foreground }], children: action.label }) }, action.label)),
+    /* @__PURE__ */ jsx11(Pressable3, { onPress: controller.handleLeave, style: [styles7.action, styles7.dangerAction, { backgroundColor: theme.colors.card, borderColor: theme.colors.error }], children: /* @__PURE__ */ jsx11(Text4, { style: [styles7.actionText, styles7.dangerText, { color: theme.colors.error }], children: "Leave space" }) })
+  ] }) }) });
+}
+function selectSpaceReaction(controller, reaction) {
+  controller.sendReaction(reaction);
+}
+var styles7 = StyleSheet8.create({
+  backdrop: { flex: 1, justifyContent: "flex-end", backgroundColor: Theme.colors.darkOverlay55 },
+  sheet: {
+    gap: 8,
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    backgroundColor: Theme.colors.background,
+    padding: 24,
+    paddingBottom: 40
+  },
+  title: { ...Theme.typography.title, color: Theme.colors.foreground },
+  action: { borderRadius: 14, backgroundColor: Theme.colors.card, padding: 16 },
+  actionText: { color: Theme.colors.foreground, fontSize: 16, fontWeight: "600" },
+  dangerAction: { marginTop: 8, borderWidth: 1, borderColor: Theme.colors.error },
+  dangerText: { color: Theme.colors.error, fontWeight: "700" },
+  pressed: { opacity: 0.65 }
+});
+
+// src/components/native-space-view/SpaceStage.android.tsx
+import ComputerScreenShareIcon from "@hugeicons/core-free-icons/dist/esm/ComputerScreenShareIcon";
+import MicOff01Icon3 from "@hugeicons/core-free-icons/dist/esm/MicOff01Icon";
+import Presentation01Icon from "@hugeicons/core-free-icons/dist/esm/Presentation01Icon";
+import WavingHand01Icon from "@hugeicons/core-free-icons/dist/esm/WavingHand01Icon";
+import { HugeiconsIcon as HugeiconsIcon3 } from "@hugeicons/react-native";
+import { FlatList as FlatList2, StyleSheet as StyleSheet9, Text as Text5, View as View9 } from "react-native";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+function getParticipantStripTrack(participant) {
+  return participant.videoTrack ?? null;
+}
+function StageSurface({ children }) {
+  const theme = useNativeTheme();
+  return /* @__PURE__ */ jsx12(View9, { style: [styles8.surface, { backgroundColor: theme.colors.stageBackground }], children });
+}
+function InfoChip({ icon, label, align = "left" }) {
+  const theme = useNativeTheme();
+  return /* @__PURE__ */ jsxs7(View9, { style: [styles8.infoChip, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }, align === "right" ? styles8.infoChipRight : styles8.infoChipLeft], children: [
+    /* @__PURE__ */ jsx12(HugeiconsIcon3, { color: theme.colors.foreground, icon, size: 14 }),
+    /* @__PURE__ */ jsx12(Text5, { style: [styles8.infoChipText, { color: theme.colors.foreground }], children: label })
+  ] });
+}
+function NativeWhiteboardPlaceholder({ whiteboard }) {
+  return /* @__PURE__ */ jsxs7(StageSurface, { children: [
+    /* @__PURE__ */ jsx12(GradientSurface, { angle: "diagonal", borderRadius: 24, opacity: 0.6, participantId: "whiteboard-stage" }),
+    /* @__PURE__ */ jsxs7(View9, { style: styles8.placeholderCenter, children: [
+      /* @__PURE__ */ jsx12(View9, { style: styles8.presentingIconCircle, children: /* @__PURE__ */ jsx12(HugeiconsIcon3, { color: Theme.colors.primary, icon: Presentation01Icon, size: 32 }) }),
+      /* @__PURE__ */ jsx12(Text5, { style: styles8.placeholderEyebrow, children: "SHARED CANVAS" }),
+      /* @__PURE__ */ jsx12(Text5, { style: styles8.placeholderTitle, children: "Whiteboard active" }),
+      /* @__PURE__ */ jsx12(Text5, { style: styles8.placeholderCopy, children: whiteboard.canDraw ? "Collaborative board is open." : "Board is open in view-only mode." })
+    ] })
+  ] });
+}
+function NativeLocalSharePlaceholder() {
+  return /* @__PURE__ */ jsxs7(StageSurface, { children: [
+    /* @__PURE__ */ jsx12(GradientSurface, { angle: "diagonal", borderRadius: 24, opacity: 0.4, participantId: "local-presenting" }),
+    /* @__PURE__ */ jsxs7(View9, { style: styles8.placeholderCenter, children: [
+      /* @__PURE__ */ jsx12(View9, { style: styles8.presentingIconCircle, children: /* @__PURE__ */ jsx12(HugeiconsIcon3, { color: Theme.colors.primary, icon: ComputerScreenShareIcon, size: 32 }) }),
+      /* @__PURE__ */ jsx12(Text5, { style: styles8.placeholderEyebrow, children: "YOU ARE PRESENTING" }),
+      /* @__PURE__ */ jsx12(Text5, { style: styles8.placeholderTitle, children: "Screen sharing active" }),
+      /* @__PURE__ */ jsx12(Text5, { style: styles8.placeholderCopy, children: "Your preview is hidden here to prevent an infinite mirror effect. Everyone else can see your screen." })
+    ] })
+  ] });
+}
+function NativeParticipantStrip({ participants, vertical }) {
+  return /* @__PURE__ */ jsx12(
+    FlatList2,
+    {
+      contentContainerStyle: [styles8.stripContent, vertical ? styles8.stripVertical : styles8.stripHorizontal],
+      data: participants,
+      horizontal: !vertical,
+      initialNumToRender: vertical ? 4 : 5,
+      keyExtractor: (participant, index) => `${participant.id}-${index}`,
+      maxToRenderPerBatch: vertical ? 5 : 6,
+      removeClippedSubviews: true,
+      renderItem: ({ item: participant }) => /* @__PURE__ */ jsx12(View9, { style: [styles8.stripTile, vertical ? styles8.stripTileVertical : styles8.stripTileHorizontal], children: /* @__PURE__ */ jsx12(MediaView, { emphasizeMuted: true, participant, track: getParticipantStripTrack(participant) }) }),
+      showsHorizontalScrollIndicator: false,
+      showsVerticalScrollIndicator: false,
+      windowSize: 4
+    }
+  );
+}
+function SpaceStageAndroid({ layoutMode, isCompactViewport, primaryContent, screenSharer, screenShareTrack, stripParticipants, selfName, isMuted, handRaised, raisedHandCount, activeReactions, whiteboard }) {
+  const theme = useNativeTheme();
+  const verticalStrip = !isCompactViewport && layoutMode === "focus";
+  let primaryStage;
+  if (primaryContent === "whiteboard") {
+    primaryStage = /* @__PURE__ */ jsx12(NativeWhiteboardPlaceholder, { whiteboard });
+  } else if (primaryContent === "screen-share-placeholder") {
+    primaryStage = /* @__PURE__ */ jsx12(NativeLocalSharePlaceholder, {});
+  } else if (primaryContent === "split") {
+    primaryStage = /* @__PURE__ */ jsxs7(View9, { style: styles8.splitStage, children: [
+      /* @__PURE__ */ jsx12(View9, { style: styles8.splitPanel, children: /* @__PURE__ */ jsx12(StageSurface, { children: /* @__PURE__ */ jsx12(MediaView, { participant: screenSharer, track: screenShareTrack, objectFit: "contain" }) }) }),
+      /* @__PURE__ */ jsx12(View9, { style: styles8.splitPanel, children: /* @__PURE__ */ jsx12(NativeWhiteboardPlaceholder, { whiteboard }) })
+    ] });
+  } else {
+    primaryStage = /* @__PURE__ */ jsx12(StageSurface, { children: /* @__PURE__ */ jsx12(MediaView, { participant: screenSharer, track: screenShareTrack, label: screenSharer?.displayName || "Participant", objectFit: "contain" }) });
+  }
+  return /* @__PURE__ */ jsxs7(View9, { style: [styles8.container, { backgroundColor: theme.colors.darkCanvas }, verticalStrip && styles8.containerVertical], children: [
+    /* @__PURE__ */ jsxs7(View9, { style: styles8.primaryFrame, children: [
+      primaryStage,
+      raisedHandCount > 0 ? /* @__PURE__ */ jsx12(InfoChip, { icon: WavingHand01Icon, label: raisedHandCount === 1 ? "1 hand raised" : `${raisedHandCount} hands raised` }) : null,
+      activeReactions.length > 0 ? /* @__PURE__ */ jsx12(View9, { style: styles8.reactionRail, children: activeReactions.map((reaction, index) => /* @__PURE__ */ jsxs7(View9, { style: [styles8.reactionBubble, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }], children: [
+        /* @__PURE__ */ jsx12(Text5, { style: styles8.reactionEmoji, children: reaction.emoji }),
+        /* @__PURE__ */ jsx12(Text5, { numberOfLines: 1, style: [styles8.reactionName, { color: theme.colors.foreground }], children: reaction.participantName })
+      ] }, `${reaction.id}-${index}`)) }) : null,
+      /* @__PURE__ */ jsxs7(View9, { style: [styles8.identityBar, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }], children: [
+        /* @__PURE__ */ jsx12(Text5, { style: [styles8.nameLabel, { color: theme.colors.foreground }], numberOfLines: 1, children: selfName }),
+        isMuted ? /* @__PURE__ */ jsx12(View9, { style: styles8.muteIndicator, children: /* @__PURE__ */ jsx12(HugeiconsIcon3, { color: theme.colors.primaryForeground, icon: MicOff01Icon3, size: 10 }) }) : null,
+        handRaised ? /* @__PURE__ */ jsx12(View9, { style: styles8.handIndicator, children: /* @__PURE__ */ jsx12(HugeiconsIcon3, { color: theme.colors.primaryForeground, icon: WavingHand01Icon, size: 10 }) }) : null
+      ] })
+    ] }),
+    stripParticipants.length > 0 ? /* @__PURE__ */ jsx12(View9, { style: [styles8.stripShell, verticalStrip ? styles8.stripShellVertical : styles8.stripShellHorizontal], children: /* @__PURE__ */ jsx12(NativeParticipantStrip, { participants: stripParticipants, vertical: verticalStrip }) }) : null
+  ] });
+}
+var styles8 = StyleSheet9.create({
+  container: {
+    flex: 1,
+    width: "100%",
+    paddingHorizontal: 12
+  },
+  containerVertical: {
+    flexDirection: "row"
+  },
+  primaryFrame: {
+    flex: 1,
+    minHeight: 0,
+    width: "100%",
+    marginBottom: 12
+  },
+  surface: {
+    flex: 1,
+    backgroundColor: Theme.colors.stageBackground,
+    width: "100%",
+    borderRadius: 24,
+    overflow: "hidden"
+  },
+  splitStage: {
+    flex: 1,
+    flexDirection: "row",
+    gap: 10
+  },
+  splitPanel: {
+    flex: 1
+  },
+  placeholderCenter: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: Theme.spacing["3xl"],
+    gap: 12
+  },
+  presentingIconCircle: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: Theme.colors.whiteOverlay06,
+    borderWidth: 1,
+    borderColor: Theme.colors.whiteOverlay12,
+    marginBottom: 8
+  },
+  placeholderEyebrow: {
+    fontSize: 11,
+    fontWeight: "800",
+    color: Theme.colors.primary,
+    letterSpacing: 1
+  },
+  placeholderTitle: {
+    fontSize: 22,
+    fontWeight: "800",
+    color: Theme.colors.onDark,
+    textAlign: "center",
+    letterSpacing: -0.5
+  },
+  placeholderCopy: {
+    fontSize: 14,
+    color: Theme.colors.whiteOverlay50,
+    textAlign: "center",
+    lineHeight: 20,
+    paddingHorizontal: 20
+  },
+  infoChip: {
+    position: "absolute",
+    top: 20,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 5,
+    backgroundColor: Theme.colors.darkOverlay50,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 999,
+    borderWidth: 1,
+    borderColor: Theme.colors.whiteOverlay06
+  },
+  infoChipLeft: {
+    left: 20
+  },
+  infoChipRight: {
+    right: 20
+  },
+  infoChipText: {
+    color: Theme.colors.onDark,
+    fontSize: 12,
+    fontWeight: "700"
+  },
+  reactionRail: {
+    position: "absolute",
+    right: 16,
+    bottom: 24,
+    gap: 8,
+    maxWidth: 180
+  },
+  reactionBubble: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    backgroundColor: Theme.colors.darkOverlay45,
+    borderRadius: 999,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderWidth: 1,
+    borderColor: Theme.colors.whiteOverlay08
+  },
+  reactionEmoji: {
+    fontSize: 16
+  },
+  reactionName: {
+    flex: 1,
+    color: Theme.colors.onDark,
+    fontSize: 12,
+    fontWeight: "700"
+  },
+  identityBar: {
+    position: "absolute",
+    left: 20,
+    bottom: 20,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    backgroundColor: Theme.colors.darkOverlay50,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 999,
+    borderWidth: 1,
+    borderColor: Theme.colors.whiteOverlay06,
+    maxWidth: "70%"
+  },
+  nameLabel: {
+    color: Theme.colors.onDark,
+    fontSize: 12,
+    fontWeight: "700"
+  },
+  muteIndicator: {
+    width: 18,
+    height: 18,
+    borderRadius: 9,
+    backgroundColor: Theme.colors.dangerStrong,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  handIndicator: {
+    width: 18,
+    height: 18,
+    borderRadius: 9,
+    backgroundColor: Theme.colors.warning,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  stripShell: {
+    minHeight: 96
+  },
+  stripShellHorizontal: {
+    height: 110
+  },
+  stripShellVertical: {
+    width: 110,
+    marginLeft: 12
+  },
+  stripContent: {
+    gap: 10
+  },
+  stripHorizontal: {
+    paddingBottom: 8
+  },
+  stripVertical: {
+    paddingRight: 8
+  },
+  stripTile: {
+    overflow: "hidden",
+    borderRadius: 18
+  },
+  stripTileHorizontal: {
+    width: 132,
+    height: 100
+  },
+  stripTileVertical: {
+    width: 100,
+    height: 132
+  }
+});
+
+// src/components/native-space-view/SpaceTopBar.android.tsx
+import UserGroupIcon from "@hugeicons/core-free-icons/dist/esm/UserGroupIcon";
+import { HugeiconsIcon as HugeiconsIcon4 } from "@hugeicons/react-native";
+import { Image as Image2, Platform as Platform4, StyleSheet as StyleSheet10, Text as Text6, View as View10 } from "react-native";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+function SpaceTopBarAndroid({ spaceName, participantCount, formattedDuration, logoUrl }) {
+  const theme = useNativeTheme();
+  return /* @__PURE__ */ jsxs8(View10, { style: [styles9.topBar, { backgroundColor: theme.colors.darkCanvas, borderColor: theme.colors.border }], children: [
+    /* @__PURE__ */ jsxs8(View10, { style: styles9.topBarLeft, children: [
+      logoUrl ? /* @__PURE__ */ jsx13(Image2, { accessibilityLabel: "Chalk", source: { uri: logoUrl }, style: styles9.logo }) : null,
+      /* @__PURE__ */ jsx13(View10, { style: [styles9.connectionDot, { backgroundColor: theme.colors.success }] }),
+      /* @__PURE__ */ jsx13(Text6, { style: [styles9.topBarSpaceName, { color: theme.colors.foreground }], numberOfLines: 1, children: spaceName }),
+      /* @__PURE__ */ jsx13(View10, { style: [styles9.timerBadge, { backgroundColor: theme.colors.surface }], children: /* @__PURE__ */ jsx13(Text6, { style: [styles9.timerText, { color: theme.colors.mutedForeground }], children: formattedDuration }) })
+    ] }),
+    /* @__PURE__ */ jsxs8(View10, { style: [styles9.topBarRight, { backgroundColor: theme.colors.surface }], children: [
+      /* @__PURE__ */ jsx13(HugeiconsIcon4, { icon: UserGroupIcon, size: 14, color: theme.colors.foreground }),
+      /* @__PURE__ */ jsx13(Text6, { style: [styles9.topBarCount, { color: theme.colors.foreground }], children: participantCount })
+    ] })
+  ] });
+}
+var styles9 = StyleSheet10.create({
+  topBar: {
+    paddingTop: Platform4.OS === "ios" ? 54 : 42,
+    paddingBottom: 14,
+    paddingHorizontal: 24,
+    backgroundColor: Theme.colors.darkCanvas,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    borderBottomWidth: 1,
+    borderColor: Theme.colors.whiteOverlay06,
+    width: "100%"
+  },
+  topBarLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    flex: 1
+  },
+  logo: { width: 24, height: 24, borderRadius: 6 },
+  connectionDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: Theme.colors.success
+  },
+  topBarSpaceName: {
+    color: Theme.colors.onDark,
+    fontSize: 14,
+    fontWeight: "800",
+    letterSpacing: -0.2
+  },
+  timerBadge: {
+    backgroundColor: Theme.colors.whiteOverlay10,
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 6,
+    marginLeft: 4
+  },
+  timerText: {
+    color: Theme.colors.whiteOverlay60,
+    fontSize: 11,
+    fontWeight: "700",
+    fontVariant: ["tabular-nums"]
+  },
+  topBarRight: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    backgroundColor: Theme.colors.whiteOverlay08,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 10
+  },
+  topBarCount: {
+    color: Theme.colors.onDark,
+    fontSize: 12,
+    fontWeight: "800"
+  }
+});
+
+// src/components/native-space-view/SpaceWhiteboardSurface.tsx
+import { useCallback as useCallback5 } from "react";
+import { StyleSheet as StyleSheet12 } from "react-native";
+
+// src/components/EmbeddedWhiteboard.tsx
+import { ChalkWhiteboardController } from "@q9labsai/chalk-whiteboard/embedded";
+import { useCallback as useCallback4, useEffect as useEffect3, useMemo as useMemo8, useRef as useRef2, useState as useState3 } from "react";
+import { ActivityIndicator, Pressable as Pressable4, StyleSheet as StyleSheet11, Text as Text7, useWindowDimensions as useWindowDimensions2, View as View11 } from "react-native";
+import WebView from "react-native-webview";
+
+// src/whiteboard/embedded-whiteboard-assets.ts
+import { NativeModules as NativeModules2, Platform as Platform5 } from "react-native";
+var ANDROID_RENDERER_URL = "file:///android_asset/chalk-whiteboard/index.html";
+async function resolveEmbeddedWhiteboardRendererURL(override) {
+  if (override) return requireLocalRendererURL(override);
+  if (Platform5.OS === "android") return ANDROID_RENDERER_URL;
+  const module = NativeModules2.ChalkWhiteboardAssets;
+  if (!module?.rendererURL) throw new Error(`Chalk embedded whiteboard assets are unavailable on ${Platform5.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/components/EmbeddedWhiteboard.tsx
+import { jsx as jsx14, jsxs as jsxs9 } 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 nativeTheme = useNativeTheme();
+  const theme = themeOverride ?? nativeTheme.colorScheme;
+  const webViewRef = useRef2(null);
+  const controllerRef = useRef2(null);
+  const listenersRef = useRef2(/* @__PURE__ */ new Set());
+  const onMetricRef = useRef2(onMetric);
+  const onErrorRef = useRef2(onError);
+  const onUserExportRef = useRef2(onUserExport);
+  const [rendererURL, setRendererURL] = useState3(null);
+  const [rendererGeneration, setRendererGeneration] = useState3(createRendererGeneration);
+  const [loadAttempt, setLoadAttempt] = useState3(0);
+  const [loadError, setLoadError] = useState3(null);
+  const [compatibilityNotice, setCompatibilityNotice] = useState3(null);
+  const { width, height, scale } = useWindowDimensions2();
+  onMetricRef.current = onMetric;
+  onErrorRef.current = onError;
+  onUserExportRef.current = onUserExport;
+  const rendererPort = useMemo8(
+    () => ({
+      postMessage: (message) => webViewRef.current?.postMessage(message),
+      subscribe: (listener) => {
+        listenersRef.current.add(listener);
+        return () => listenersRef.current.delete(listener);
+      }
+    }),
+    []
+  );
+  const handleControllerError = useCallback4((error) => onErrorRef.current?.(error), []);
+  const handleControllerMetric = useCallback4((metric) => onMetricRef.current?.(metric), []);
+  const handleControllerUserExport = useCallback4((value) => onUserExportRef.current?.(value), []);
+  useEffect3(() => {
+    let active = true;
+    setLoadError(null);
+    void resolveEmbeddedWhiteboardRendererURL(rendererURLOverride).then((url) => {
+      if (active) setRendererURL(url);
+    }).catch((cause) => {
+      if (!active) return;
+      const message = cause instanceof Error ? cause.message : "Chalk whiteboard assets are unavailable";
+      setLoadError(message);
+      onError?.({ code: "renderer_asset_unavailable", message, recoverable: false });
+    });
+    return () => {
+      active = false;
+    };
+  }, [loadAttempt, onError, rendererURLOverride]);
+  useEffect3(() => {
+    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();
+    controllerRef.current = controller;
+    return () => {
+      if (controllerRef.current === controller) controllerRef.current = null;
+      controller.stop();
+    };
+  }, [handleControllerError, handleControllerMetric, handleControllerUserExport, journeyId, localParticipantColor, rendererPort, theme, traceparent, tracestate, transport]);
+  useEffect3(() => {
+    controllerRef.current?.setCapabilities({ canDraw, canClear });
+  }, [canClear, canDraw]);
+  const viewport = useMemo8(() => ({ width, height, scale }), [height, scale, width]);
+  useEffect3(() => {
+    controllerRef.current?.setViewport(viewport);
+  }, [viewport]);
+  const sourceURL = rendererURL ? rendererURLWithContext(rendererURL, { journeyId, rendererGeneration }) : null;
+  const handleMessage = (event) => {
+    const message = event.nativeEvent.data;
+    listenersRef.current.forEach((listener) => listener(message));
+  };
+  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__ */ jsxs9(View11, { style: [styles10.status, { backgroundColor: nativeTheme.colors.lightSurface }, style], testID, children: [
+      /* @__PURE__ */ jsx14(Text7, { style: [styles10.errorTitle, { color: nativeTheme.colors.lightText }], children: "Whiteboard unavailable" }),
+      /* @__PURE__ */ jsx14(Text7, { style: [styles10.errorMessage, { color: nativeTheme.colors.lightSubtleText }], children: loadError }),
+      /* @__PURE__ */ jsx14(Pressable4, { accessibilityRole: "button", onPress: retryRenderer, style: ({ pressed }) => [styles10.retryButton, { backgroundColor: nativeTheme.colors.info }, pressed && styles10.retryButtonPressed], children: /* @__PURE__ */ jsx14(Text7, { style: [styles10.retryButtonText, { color: nativeTheme.colors.onDark }], children: "Retry" }) })
+    ] });
+  }
+  if (!sourceURL || !rendererURL) {
+    return /* @__PURE__ */ jsxs9(View11, { style: [styles10.status, { backgroundColor: nativeTheme.colors.lightSurface }, style], testID, children: [
+      /* @__PURE__ */ jsx14(ActivityIndicator, { color: nativeTheme.colors.info }),
+      /* @__PURE__ */ jsx14(Text7, { style: [styles10.loadingMessage, { color: nativeTheme.colors.lightMutedText }], children: "Loading whiteboard\u2026" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs9(View11, { style: [styles10.container, style], testID, children: [
+    /* @__PURE__ */ jsx14(
+      WebView,
+      {
+        ref: webViewRef,
+        ...embeddedWhiteboardWebViewSecurityPolicy,
+        allowingReadAccessToURL: rendererURL.slice(0, rendererURL.lastIndexOf("/") + 1),
+        mediaPlaybackRequiresUserAction: true,
+        onContentProcessDidTerminate: handleRendererTermination,
+        onError: (event) => {
+          const message = event.nativeEvent.description || "The whiteboard renderer failed to load";
+          setLoadError(message);
+          handleControllerError({ code: "renderer_load_failed", message, recoverable: true });
+        },
+        onMessage: handleMessage,
+        onRenderProcessGone: handleRendererTermination,
+        onShouldStartLoadWithRequest: allowNavigation,
+        originWhitelist: ["file://*"],
+        pullToRefreshEnabled: false,
+        scrollEnabled: false,
+        source: { uri: sourceURL },
+        style: [styles10.webView, { backgroundColor: nativeTheme.colors.lightSurface }],
+        webviewDebuggingEnabled: typeof __DEV__ !== "undefined" && __DEV__
+      },
+      rendererGeneration
+    ),
+    compatibilityNotice ? /* @__PURE__ */ jsx14(View11, { pointerEvents: "none", style: [styles10.compatibilityNotice, { backgroundColor: nativeTheme.colors.dangerSurfaceOverlay94 }], children: /* @__PURE__ */ jsx14(Text7, { style: [styles10.compatibilityNoticeText, { color: nativeTheme.colors.onDark }], children: compatibilityNotice }) }) : null
+  ] });
+}
+function createRendererGeneration() {
+  return globalThis.crypto?.randomUUID?.() ?? `whiteboard-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+var styles10 = StyleSheet11.create({
+  container: {
+    flex: 1,
+    overflow: "hidden"
+  },
+  webView: {
+    flex: 1
+  },
+  compatibilityNotice: {
+    position: "absolute",
+    top: 12,
+    left: 12,
+    right: 12,
+    borderRadius: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 10
+  },
+  compatibilityNoticeText: {
+    fontSize: 13,
+    fontWeight: "700",
+    textAlign: "center"
+  },
+  status: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 10,
+    padding: 24
+  },
+  loadingMessage: {
+    fontSize: 14,
+    fontWeight: "600"
+  },
+  errorTitle: {
+    fontSize: 17,
+    fontWeight: "700"
+  },
+  errorMessage: {
+    fontSize: 13,
+    textAlign: "center"
+  },
+  retryButton: {
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 10
+  },
+  retryButtonPressed: {
+    opacity: 0.75
+  },
+  retryButtonText: {
+    fontSize: 14,
+    fontWeight: "700"
+  }
+});
+
+// src/components/native-space-view/SpaceWhiteboardSurface.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+function shouldRenderNativeSpaceWhiteboard(whiteboard) {
+  return whiteboard.isOpen && whiteboard.transport !== null;
+}
+function forwardNativeSpaceWhiteboardMetric(metric, onMetric) {
+  onMetric?.(metric);
+}
+function forwardNativeSpaceWhiteboardFailure(error, onMetric) {
+  onMetric?.({
+    name: "whiteboard.renderer.failure",
+    value: 1,
+    attributes: { code: error.code, recoverable: error.recoverable }
+  });
+}
+function SpaceWhiteboardSurface({ whiteboard }) {
+  const nativeTheme = useNativeTheme();
+  const handleError = useCallback5(
+    (error) => {
+      forwardNativeSpaceWhiteboardFailure(error, whiteboard.onMetric);
+    },
+    [whiteboard.onMetric]
+  );
+  const handleMetric = useCallback5(
+    (metric) => {
+      forwardNativeSpaceWhiteboardMetric(metric, whiteboard.onMetric);
+    },
+    [whiteboard.onMetric]
+  );
+  if (!shouldRenderNativeSpaceWhiteboard(whiteboard)) return null;
+  return /* @__PURE__ */ jsx15(
+    EmbeddedWhiteboard,
+    {
+      canClear: whiteboard.canClear,
+      canDraw: whiteboard.canDraw,
+      journeyId: whiteboard.journeyId,
+      onError: handleError,
+      onMetric: handleMetric,
+      style: styles11.surface,
+      theme: nativeTheme.colorScheme,
+      transport: whiteboard.transport,
+      ...whiteboard.traceparent ? { traceparent: whiteboard.traceparent } : {},
+      ...whiteboard.tracestate ? { tracestate: whiteboard.tracestate } : {}
+    }
+  );
+}
+var styles11 = StyleSheet12.create({
+  surface: {
+    flex: 1,
+    width: "100%"
+  }
+});
+
+// src/components/native-space-view/SettingsSheet.tsx
+import CheckmarkCircle01Icon2 from "@hugeicons/core-free-icons/dist/esm/CheckmarkCircle01Icon";
+import Mic01Icon2 from "@hugeicons/core-free-icons/dist/esm/Mic01Icon";
+import MicOff01Icon4 from "@hugeicons/core-free-icons/dist/esm/MicOff01Icon";
+import Speaker01Icon from "@hugeicons/core-free-icons/dist/esm/Speaker01Icon";
+import Video01Icon2 from "@hugeicons/core-free-icons/dist/esm/Video01Icon";
+import VideoOffIcon2 from "@hugeicons/core-free-icons/dist/esm/VideoOffIcon";
+import { HugeiconsIcon as HugeiconsIcon7 } from "@hugeicons/react-native";
+import { useEffect as useEffect4, useState as useState4 } from "react";
+import { Modal as Modal3, Platform as Platform6, Pressable as Pressable7, ScrollView, StyleSheet as StyleSheet15, Text as Text10, View as View14 } from "react-native";
+
+// src/components/native-space-view/SpaceSurfacePrimitives.tsx
+import { HugeiconsIcon as HugeiconsIcon5 } from "@hugeicons/react-native";
+import { Pressable as Pressable5, StyleSheet as StyleSheet13, Text as Text8, View as View12 } from "react-native";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+function SheetGrip() {
+  return /* @__PURE__ */ jsx16(View12, { accessibilityElementsHidden: true, style: styles12.grip });
+}
+function CloseButton({ label, onPress }) {
+  return /* @__PURE__ */ jsx16(Pressable5, { accessibilityLabel: label, accessibilityRole: "button", hitSlop: 6, onPress, style: ({ pressed }) => [styles12.closeButton, pressed && styles12.pressed], children: /* @__PURE__ */ jsx16(Text8, { style: styles12.closeGlyph, children: "\xD7" }) });
+}
+function SurfaceHeader({ title, count, subtitle, onClose, closeLabel }) {
+  return /* @__PURE__ */ jsxs10(View12, { style: styles12.header, children: [
+    /* @__PURE__ */ jsxs10(View12, { style: styles12.headerCopy, children: [
+      /* @__PURE__ */ jsxs10(View12, { style: styles12.titleRow, children: [
+        /* @__PURE__ */ jsx16(Text8, { style: styles12.title, children: title }),
+        count !== void 0 ? /* @__PURE__ */ jsx16(View12, { style: styles12.countPill, children: /* @__PURE__ */ jsx16(Text8, { style: styles12.countText, children: count }) }) : null
+      ] }),
+      subtitle ? /* @__PURE__ */ jsx16(Text8, { style: styles12.subtitle, children: subtitle }) : null
+    ] }),
+    /* @__PURE__ */ jsx16(CloseButton, { label: closeLabel, onPress: onClose })
+  ] });
+}
+function InitialsAvatar({ name, size = 52, style }) {
+  const color = getParticipantColor(name);
+  return /* @__PURE__ */ jsx16(View12, { style: [styles12.avatar, { backgroundColor: color.primary, borderRadius: size / 2, height: size, width: size }, style], children: /* @__PURE__ */ jsx16(Text8, { allowFontScaling: false, style: [styles12.avatarText, { fontSize: Math.max(16, Math.round(size * 0.34)) }], children: getParticipantInitials(name) }) });
+}
+function IconTile({ icon, symbol, color = Theme.colors.ink, wash = Theme.colors.surface }) {
+  return /* @__PURE__ */ jsx16(View12, { style: [styles12.iconTile, { backgroundColor: wash }], children: icon ? /* @__PURE__ */ jsx16(HugeiconsIcon5, { color, icon, size: 22 }) : /* @__PURE__ */ jsx16(Text8, { style: [styles12.symbol, { color }], children: symbol }) });
+}
+var styles12 = StyleSheet13.create({
+  grip: { alignSelf: "center", backgroundColor: Theme.colors.lineStrong, borderRadius: Theme.radius.full, height: 5, marginTop: Theme.spacing.sm, width: 48 },
+  closeButton: { alignItems: "center", borderColor: Theme.colors.line, borderRadius: Theme.radius.full, borderWidth: 1, height: 46, justifyContent: "center", width: 46 },
+  closeGlyph: { color: Theme.colors.ink, fontSize: 28, fontWeight: "400", lineHeight: 30 },
+  header: { alignItems: "center", borderBottomColor: Theme.colors.line, borderBottomWidth: 1, flexDirection: "row", justifyContent: "space-between", minHeight: 88, paddingHorizontal: Theme.spacing.lg, paddingVertical: Theme.spacing.md },
+  headerCopy: { flex: 1, minWidth: 0, paddingRight: Theme.spacing.md },
+  titleRow: { alignItems: "center", flexDirection: "row", gap: Theme.spacing.sm },
+  title: { ...Theme.typography.heading, color: Theme.colors.ink },
+  subtitle: { ...Theme.typography.meta, color: Theme.colors.ink2, marginTop: 2 },
+  countPill: { alignItems: "center", backgroundColor: Theme.colors.paper2, borderRadius: Theme.radius.sm, justifyContent: "center", minHeight: 32, minWidth: 36, paddingHorizontal: Theme.spacing.sm },
+  countText: { ...Theme.typography.label, color: Theme.colors.ink },
+  avatar: { alignItems: "center", justifyContent: "center", overflow: "hidden" },
+  avatarText: { color: Theme.colors.surface, fontWeight: "500", includeFontPadding: false, textAlign: "center" },
+  iconTile: { alignItems: "center", borderColor: Theme.colors.line, borderRadius: Theme.radius.md, borderWidth: 1, height: 44, justifyContent: "center", width: 44 },
+  symbol: { fontSize: 24, fontWeight: "500", includeFontPadding: false },
+  pressed: { opacity: 0.72, transform: [{ scale: 0.98 }] }
+});
+
+// src/components/native-space-view/AppearanceSettings.tsx
+import CheckmarkCircle01Icon from "@hugeicons/core-free-icons/dist/esm/CheckmarkCircle01Icon";
+import { HugeiconsIcon as HugeiconsIcon6 } from "@hugeicons/react-native";
+import { Pressable as Pressable6, StyleSheet as StyleSheet14, Text as Text9, View as View13 } from "react-native";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+function AppearanceSettings() {
+  const { appearance, setPalette, setTexture } = useNativeAppearance();
+  const theme = useNativeTheme();
+  return /* @__PURE__ */ jsxs11(View13, { style: styles13.section, children: [
+    /* @__PURE__ */ jsx17(Text9, { style: [styles13.intro, { color: theme.colors.ink2 }], children: "Choose a complete color family, then layer in a material texture. Every combination is available on mobile." }),
+    ["light", "dark"].map((mode) => /* @__PURE__ */ jsx17(PaletteGroup, { mode, selectedPalette: appearance.palette, theme, onSelect: setPalette }, mode)),
+    /* @__PURE__ */ jsxs11(View13, { style: styles13.textureSection, children: [
+      /* @__PURE__ */ jsx17(Text9, { style: styles13.groupLabel, children: "Texture" }),
+      /* @__PURE__ */ jsx17(View13, { style: styles13.textureGrid, children: THEME_TEXTURES.map((texture) => {
+        const selected = texture.value === appearance.texture;
+        return /* @__PURE__ */ jsxs11(
+          Pressable6,
+          {
+            accessibilityLabel: `Use ${texture.label} texture`,
+            accessibilityRole: "button",
+            accessibilityState: { selected },
+            onPress: () => setTexture(texture.value),
+            style: ({ pressed }) => [styles13.texture, { backgroundColor: theme.colors.surfaceMuted, borderColor: theme.colors.line }, selected && [styles13.selected, { borderColor: theme.colors.primary }], pressed && styles13.pressed],
+            children: [
+              /* @__PURE__ */ jsx17(TexturePreview, { kind: texture.value, background: appearance.tokens.stage, foreground: appearance.tokens.textMuted }),
+              /* @__PURE__ */ jsx17(Text9, { numberOfLines: 1, style: [styles13.textureLabel, { color: theme.colors.ink }], children: texture.label })
+            ]
+          },
+          texture.value
+        );
+      }) })
+    ] })
+  ] });
+}
+function PaletteGroup({ mode, selectedPalette, theme, onSelect }) {
+  return /* @__PURE__ */ jsxs11(View13, { style: styles13.group, children: [
+    /* @__PURE__ */ jsx17(Text9, { style: styles13.groupLabel, children: mode === "light" ? "Light palettes" : "Dark palettes" }),
+    /* @__PURE__ */ jsx17(View13, { style: styles13.paletteGrid, children: THEME_PALETTES.filter((palette) => palette.mode === mode).map((palette) => {
+      const selected = palette.value === selectedPalette;
+      return /* @__PURE__ */ jsxs11(
+        Pressable6,
+        {
+          accessibilityLabel: `Use ${palette.label} palette`,
+          accessibilityRole: "button",
+          accessibilityState: { selected },
+          onPress: () => onSelect(palette.value),
+          style: ({ pressed }) => [styles13.palette, { backgroundColor: theme.colors.surfaceMuted, borderColor: theme.colors.line }, selected && [styles13.selected, { borderColor: theme.colors.primary }], pressed && styles13.pressed],
+          children: [
+            /* @__PURE__ */ jsx17(View13, { style: styles13.swatches, children: palette.swatch.map((color) => /* @__PURE__ */ jsx17(View13, { style: [styles13.swatch, { backgroundColor: color }] }, color)) }),
+            /* @__PURE__ */ jsxs11(View13, { style: styles13.paletteCopy, children: [
+              /* @__PURE__ */ jsx17(Text9, { numberOfLines: 1, style: [styles13.paletteLabel, { color: theme.colors.ink }], children: palette.label }),
+              /* @__PURE__ */ jsx17(Text9, { numberOfLines: 1, style: [styles13.family, { color: theme.colors.ink3 }], children: palette.family })
+            ] }),
+            selected ? /* @__PURE__ */ jsx17(HugeiconsIcon6, { color: theme.colors.success, icon: CheckmarkCircle01Icon, size: 18 }) : null
+          ]
+        },
+        palette.value
+      );
+    }) })
+  ] });
+}
+function TexturePreview({ background, foreground, kind }) {
+  return /* @__PURE__ */ jsxs11(View13, { style: [styles13.texturePreview, { backgroundColor: background }], children: [
+    kind === "paper" ? Array.from({ length: 11 }, (_, index) => /* @__PURE__ */ jsx17(View13, { style: [styles13.grain, { backgroundColor: foreground, left: `${index * 29 % 91}%`, top: `${index * 43 % 88}%` }] }, index)) : null,
+    kind === "slate" ? Array.from({ length: 5 }, (_, index) => /* @__PURE__ */ jsx17(View13, { style: [styles13.slateLine, { backgroundColor: foreground, top: 4 + index * 8 }] }, index)) : null
+  ] });
+}
+var styles13 = StyleSheet14.create({
+  section: { gap: Theme.spacing.xl },
+  intro: { color: Theme.colors.ink2, fontSize: 14, lineHeight: 20 },
+  group: { gap: Theme.spacing.sm },
+  groupLabel: { color: Theme.colors.ink3, fontSize: 11, fontWeight: "800", letterSpacing: 1, textTransform: "uppercase" },
+  paletteGrid: { flexDirection: "row", flexWrap: "wrap", gap: Theme.spacing.sm },
+  palette: { alignItems: "center", backgroundColor: Theme.colors.surfaceMuted, borderColor: Theme.colors.line, borderRadius: Theme.radius.md, borderWidth: 1, flexDirection: "row", gap: 9, minHeight: 66, padding: 9, width: "48.6%" },
+  selected: { borderColor: Theme.colors.chalkBlue, borderWidth: 2, padding: 8 },
+  swatches: { borderColor: Theme.colors.line, borderRadius: 7, borderWidth: 1, height: 42, overflow: "hidden", width: 42 },
+  swatch: { flex: 1 },
+  paletteCopy: { flex: 1, minWidth: 0 },
+  paletteLabel: { color: Theme.colors.ink, fontSize: 13, fontWeight: "700" },
+  family: { color: Theme.colors.ink3, fontSize: 11, marginTop: 2 },
+  textureSection: { gap: Theme.spacing.sm },
+  textureGrid: { flexDirection: "row", gap: Theme.spacing.sm },
+  texture: { backgroundColor: Theme.colors.surfaceMuted, borderColor: Theme.colors.line, borderRadius: Theme.radius.md, borderWidth: 1, flex: 1, overflow: "hidden", padding: 9 },
+  texturePreview: { borderColor: Theme.colors.line, borderRadius: Theme.radius.sm, borderWidth: 1, height: 44, overflow: "hidden", position: "relative" },
+  textureLabel: { color: Theme.colors.ink, fontSize: 12, fontWeight: "700", marginTop: 7, textAlign: "center" },
+  grain: { borderRadius: 1, height: 2, opacity: 0.18, position: "absolute", width: 2 },
+  slateLine: { height: 1, left: -5, opacity: 0.15, position: "absolute", transform: [{ rotate: "7deg" }], width: "120%" },
+  pressed: { opacity: 0.7, transform: [{ scale: 0.98 }] }
+});
+
+// src/components/native-space-view/SettingsSheet.tsx
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+function SettingsSheet({ controller, isOpen, onClose }) {
+  const [tab, setTab] = useState4("devices");
+  useEffect4(() => {
+    if (!isOpen) setTab("devices");
+  }, [isOpen]);
+  return /* @__PURE__ */ jsx18(Modal3, { animationType: "slide", onRequestClose: onClose, transparent: true, visible: isOpen, children: /* @__PURE__ */ jsxs12(View14, { style: styles14.modalRoot, children: [
+    /* @__PURE__ */ jsx18(Pressable7, { accessibilityLabel: "Close Settings", onPress: onClose, style: styles14.backdrop }),
+    /* @__PURE__ */ jsxs12(View14, { style: styles14.sheet, children: [
+      /* @__PURE__ */ jsx18(SheetGrip, {}),
+      /* @__PURE__ */ jsxs12(View14, { style: styles14.header, children: [
+        /* @__PURE__ */ jsx18(Text10, { style: styles14.title, children: "Settings" }),
+        /* @__PURE__ */ jsx18(CloseButton, { label: "Close Settings", onPress: onClose })
+      ] }),
+      /* @__PURE__ */ jsx18(View14, { accessibilityRole: "tablist", style: styles14.tabs, children: ["devices", "appearance", "space"].map((nextTab) => /* @__PURE__ */ jsx18(Pressable7, { accessibilityRole: "tab", accessibilityState: { selected: tab === nextTab }, onPress: () => setTab(nextTab), style: ({ pressed }) => [styles14.tab, tab === nextTab && styles14.tabSelected, pressed && styles14.pressed], children: /* @__PURE__ */ jsx18(Text10, { style: [styles14.tabText, tab === nextTab && styles14.tabTextSelected], children: nextTab[0].toUpperCase() + nextTab.slice(1) }) }, nextTab)) }),
+      /* @__PURE__ */ jsxs12(ScrollView, { contentContainerStyle: styles14.content, showsVerticalScrollIndicator: false, children: [
+        tab === "devices" ? /* @__PURE__ */ jsx18(DevicesSettings, { controller }) : null,
+        tab === "appearance" ? /* @__PURE__ */ jsx18(AppearanceSettings, {}) : null,
+        tab === "space" ? /* @__PURE__ */ jsx18(SpaceSettings, { controller }) : null
+      ] }),
+      /* @__PURE__ */ jsx18(Pressable7, { accessibilityRole: "button", onPress: onClose, style: ({ pressed }) => [styles14.doneButton, pressed && styles14.pressed], children: /* @__PURE__ */ jsx18(Text10, { style: styles14.doneText, children: "Done" }) })
+    ] })
+  ] }) });
+}
+function DevicesSettings({ controller }) {
+  const microphoneEnabled = !controller.isMuted;
+  const cameraEnabled = !controller.isCameraOff;
+  return /* @__PURE__ */ jsxs12(View14, { style: styles14.section, children: [
+    /* @__PURE__ */ jsx18(Text10, { style: styles14.sectionIntro, children: "Use the controls below to set what you share in this Episode." }),
+    /* @__PURE__ */ jsx18(DeviceControl, { disabled: controller.simulatorMediaDisabled, enabled: microphoneEnabled, icon: microphoneEnabled ? Mic01Icon2 : MicOff01Icon4, label: "Microphone", onPress: controller.toggleAudio, value: microphoneEnabled ? "On" : "Off" }),
+    /* @__PURE__ */ jsx18(DeviceControl, { disabled: controller.simulatorMediaDisabled, enabled: cameraEnabled, icon: cameraEnabled ? Video01Icon2 : VideoOffIcon2, label: "Camera", onPress: controller.toggleVideo, value: cameraEnabled ? "On" : "Off" }),
+    /* @__PURE__ */ jsxs12(View14, { style: styles14.deviceRow, children: [
+      /* @__PURE__ */ jsx18(IconTile, { icon: Speaker01Icon }),
+      /* @__PURE__ */ jsxs12(View14, { style: styles14.rowCopy, children: [
+        /* @__PURE__ */ jsx18(Text10, { style: styles14.rowLabel, children: "Speaker" }),
+        /* @__PURE__ */ jsx18(Text10, { style: styles14.rowMeta, children: "System audio output" })
+      ] }),
+      /* @__PURE__ */ jsx18(Text10, { style: styles14.rowValue, children: "Automatic" })
+    ] }),
+    /* @__PURE__ */ jsxs12(View14, { style: styles14.readyCard, children: [
+      /* @__PURE__ */ jsx18(HugeiconsIcon7, { color: Theme.colors.success, icon: CheckmarkCircle01Icon2, size: 22 }),
+      /* @__PURE__ */ jsx18(Text10, { style: styles14.readyText, children: controller.simulatorMediaDisabled ? "Device controls are unavailable here" : "Devices are ready" })
+    ] })
+  ] });
+}
+function DeviceControl({ disabled, enabled, icon, label, onPress, value }) {
+  return /* @__PURE__ */ jsxs12(Pressable7, { accessibilityLabel: `${label} ${value}`, accessibilityRole: "button", disabled, onPress, style: ({ pressed }) => [styles14.deviceRow, disabled && styles14.disabled, pressed && styles14.pressed], children: [
+    /* @__PURE__ */ jsx18(IconTile, { icon, color: enabled ? Theme.colors.ink : Theme.colors.error, wash: enabled ? Theme.colors.surface : Theme.colors.washPink }),
+    /* @__PURE__ */ jsxs12(View14, { style: styles14.rowCopy, children: [
+      /* @__PURE__ */ jsx18(Text10, { style: styles14.rowLabel, children: label }),
+      /* @__PURE__ */ jsx18(Text10, { style: styles14.rowMeta, children: disabled ? "Unavailable on this device" : "Tap to change state" })
+    ] }),
+    /* @__PURE__ */ jsx18(Text10, { style: [styles14.rowValue, !enabled && styles14.valueOff], children: value })
+  ] });
+}
+function SpaceSettings({ controller }) {
+  return /* @__PURE__ */ jsxs12(View14, { style: styles14.section, children: [
+    /* @__PURE__ */ jsx18(Text10, { style: styles14.sectionIntro, children: "Canonical information about this Space and its current Episode." }),
+    /* @__PURE__ */ jsx18(InfoRow, { label: "Space", value: "Current Space" }),
+    /* @__PURE__ */ jsx18(InfoRow, { label: "Episode", value: controller.formattedDuration }),
+    /* @__PURE__ */ jsx18(InfoRow, { label: "People", value: String(controller.participantCount) }),
+    /* @__PURE__ */ jsxs12(View14, { style: styles14.infoCard, children: [
+      /* @__PURE__ */ jsx18(Text10, { style: styles14.infoTitle, children: "Space content stays here" }),
+      /* @__PURE__ */ jsx18(Text10, { style: styles14.infoText, children: "Chat and Board content belong to this Space and remain available across Episodes." })
+    ] })
+  ] });
+}
+function InfoRow({ label, value }) {
+  return /* @__PURE__ */ jsxs12(View14, { style: styles14.infoRow, children: [
+    /* @__PURE__ */ jsx18(Text10, { style: styles14.rowLabel, children: label }),
+    /* @__PURE__ */ jsx18(Text10, { numberOfLines: 1, style: styles14.infoValue, children: value || "\u2014" })
+  ] });
+}
+var styles14 = StyleSheet15.create({
+  modalRoot: { flex: 1, justifyContent: "flex-end" },
+  backdrop: { ...StyleSheet15.absoluteFillObject, backgroundColor: Theme.colors.darkOverlay22 },
+  sheet: {
+    backgroundColor: Theme.colors.surface,
+    borderColor: Theme.colors.line,
+    borderTopLeftRadius: Theme.radius.xl,
+    borderTopRightRadius: Theme.radius.xl,
+    elevation: 8,
+    flex: 1,
+    marginTop: 72,
+    overflow: "hidden",
+    paddingBottom: Platform6.OS === "ios" ? Theme.spacing.md : Theme.spacing.xs,
+    shadowColor: Theme.colors.ink,
+    shadowOffset: { height: -8, width: 0 },
+    shadowOpacity: 0.12,
+    shadowRadius: 22
+  },
+  header: { alignItems: "center", borderBottomColor: Theme.colors.line, borderBottomWidth: 1, flexDirection: "row", justifyContent: "space-between", minHeight: 78, paddingHorizontal: Theme.spacing.lg },
+  title: { ...Theme.typography.heading, color: Theme.colors.ink },
+  tabs: { backgroundColor: Theme.colors.paper2, borderColor: Theme.colors.line, borderRadius: Theme.radius.md, borderWidth: 1, flexDirection: "row", margin: Theme.spacing.lg, padding: 3 },
+  tab: { alignItems: "center", borderRadius: Theme.radius.sm, flex: 1, justifyContent: "center", minHeight: 46, paddingHorizontal: Theme.spacing.sm },
+  tabSelected: { backgroundColor: Theme.colors.surface, ...Theme.shadows.sm },
+  tabText: { color: Theme.colors.ink2, fontSize: 14, fontWeight: "500" },
+  tabTextSelected: { color: Theme.colors.ink, fontWeight: "700" },
+  content: { paddingBottom: Theme.spacing.lg, paddingHorizontal: Theme.spacing.lg },
+  section: { gap: Theme.spacing.md },
+  sectionIntro: { ...Theme.typography.body, color: Theme.colors.ink2, marginBottom: Theme.spacing.sm },
+  deviceRow: { alignItems: "center", borderColor: Theme.colors.line, borderRadius: Theme.radius.md, borderWidth: 1, flexDirection: "row", gap: Theme.spacing.md, minHeight: 70, padding: Theme.spacing.md },
+  rowCopy: { flex: 1, minWidth: 0 },
+  rowLabel: { color: Theme.colors.ink, fontSize: 16, fontWeight: "600" },
+  rowMeta: { color: Theme.colors.ink2, fontSize: 13, lineHeight: 18, marginTop: 3 },
+  rowValue: { color: Theme.colors.success, fontSize: 14, fontWeight: "700" },
+  valueOff: { color: Theme.colors.error },
+  readyCard: { alignItems: "center", backgroundColor: Theme.colors.successBackground, borderColor: Theme.colors.line, borderRadius: Theme.radius.md, borderWidth: 1, flexDirection: "row", gap: Theme.spacing.sm, minHeight: 58, paddingHorizontal: Theme.spacing.md },
+  readyText: { color: Theme.colors.ink2, fontSize: 15, fontWeight: "600" },
+  disabled: { opacity: 0.52 },
+  infoRow: { alignItems: "center", borderBottomColor: Theme.colors.line, borderBottomWidth: 1, flexDirection: "row", justifyContent: "space-between", minHeight: 54, paddingHorizontal: Theme.spacing.sm },
+  infoValue: { color: Theme.colors.ink2, flexShrink: 1, fontSize: 15, marginLeft: Theme.spacing.md, maxWidth: "62%", textAlign: "right" },
+  infoCard: { backgroundColor: Theme.colors.washBlue, borderColor: Theme.colors.line, borderRadius: Theme.radius.md, borderWidth: 1, gap: Theme.spacing.sm, marginTop: Theme.spacing.sm, padding: Theme.spacing.md },
+  infoTitle: { color: Theme.colors.ink, fontSize: 15, fontWeight: "700" },
+  infoText: { color: Theme.colors.ink2, fontSize: 14, lineHeight: 20 },
+  doneButton: { alignItems: "center", borderColor: Theme.colors.lineStrong, borderRadius: Theme.radius.md, borderWidth: 1, justifyContent: "center", margin: Theme.spacing.lg, minHeight: 52 },
+  doneText: { color: Theme.colors.ink, fontSize: 16, fontWeight: "700" },
+  pressed: { opacity: 0.72, transform: [{ scale: 0.985 }] }
+});
+
+// src/components/native-space-view/SpacePanelSheet.tsx
+import { Modal as Modal5, Platform as Platform9, Pressable as Pressable11, SafeAreaView, StyleSheet as StyleSheet19, View as View18 } from "react-native";
+
+// src/components/native-space-view/SpaceChatSheet.tsx
+import Message01Icon from "@hugeicons/core-free-icons/dist/esm/Message01Icon";
+import Navigation03Icon from "@hugeicons/core-free-icons/dist/esm/Navigation03Icon";
+import { HugeiconsIcon as HugeiconsIcon8 } from "@hugeicons/react-native";
+import { useMemo as useMemo9 } from "react";
+import { FlatList as FlatList3, KeyboardAvoidingView, Platform as Platform7, Pressable as Pressable8, StyleSheet as StyleSheet16, Text as Text11, TextInput, View as View15 } from "react-native";
+
+// src/components/native-space-view/space-progressive-surface-helpers.ts
+function buildParticipantActionDescriptors(availability) {
+  const actions = [];
+  if (availability.canMuteParticipants) actions.push({ kind: "mute", label: "Mute microphone" });
+  if (availability.canRequestMedia) {
+    actions.push({ kind: "requestUnmute", label: "Ask to unmute" });
+    actions.push({ kind: "requestCamera", label: "Ask to turn on camera" });
+  }
+  if (availability.canStopParticipantCamera) actions.push({ kind: "stopCamera", label: "Stop camera" });
+  if (availability.canStopParticipantScreenShare) actions.push({ kind: "stopScreenShare", label: "Stop sharing" });
+  if (availability.canRemoveParticipants) actions.push({ kind: "remove", label: "Remove Participant", destructive: true });
+  return actions;
+}
+function formatChatTimestamp(timestamp) {
+  if (!Number.isFinite(timestamp) || timestamp <= 0) return "";
+  return new Date(timestamp).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+}
+
+// src/components/native-space-view/SpaceChatSheet.tsx
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+function SpaceChatSheet({ controller }) {
+  const localParticipantId = controller.participants.localParticipant?.id ?? null;
+  const sendDisabled = !controller.chatDraft.trim() && controller.chatAttachments.length === 0 || controller.chatAttachmentUploading;
+  const messages = useMemo9(() => controller.chat.messages, [controller.chat.messages]);
+  return /* @__PURE__ */ jsxs13(View15, { style: styles15.content, children: [
+    controller.chat.hasMore ? /* @__PURE__ */ jsx19(Pressable8, { accessibilityRole: "button", disabled: controller.chat.isLoadingOlder, onPress: () => void controller.chat.loadOlderMessages(), style: ({ pressed }) => [styles15.loadOlder, pressed && styles15.pressed], children: /* @__PURE__ */ jsx19(Text11, { style: styles15.loadOlderText, children: controller.chat.isLoadingOlder ? "Loading\u2026" : "Load earlier messages" }) }) : null,
+    /* @__PURE__ */ jsx19(
+      FlatList3,
+      {
+        accessibilityLabel: "Chat messages",
+        contentContainerStyle: styles15.messageList,
+        data: messages,
+        keyExtractor: (message) => message.id,
+        ListEmptyComponent: /* @__PURE__ */ jsx19(EmptyChat, {}),
+        onViewableItemsChanged: ({ viewableItems }) => {
+          const sequence = viewableItems.at(-1)?.item.sequence;
+          if (sequence) controller.markChatMessageVisible(sequence);
+        },
+        renderItem: ({ item }) => /* @__PURE__ */ jsx19(ChatMessage, { isLocal: item.senderId === localParticipantId, message: item, onOpenAttachment: controller.openChatAttachment }),
+        showsVerticalScrollIndicator: false
+      }
+    ),
+    controller.chat.pendingMessages.map((message) => /* @__PURE__ */ jsxs13(View15, { style: styles15.pendingMessage, children: [
+      /* @__PURE__ */ jsx19(Text11, { style: styles15.pendingText, children: message.text }),
+      /* @__PURE__ */ jsx19(Text11, { style: styles15.pendingMeta, children: message.state === "sending" ? "Sending\u2026" : message.error?.message ?? "Send failed" }),
+      message.state === "failed" ? /* @__PURE__ */ jsx19(Pressable8, { accessibilityRole: "button", onPress: () => void controller.chat.retryMessage(message.clientMessageId), children: /* @__PURE__ */ jsx19(Text11, { style: styles15.retry, children: "Retry" }) }) : null
+    ] }, message.clientMessageId)),
+    controller.chatAttachments.length ? /* @__PURE__ */ jsx19(View15, { accessibilityLabel: "Selected attachments", style: styles15.selectedAttachments, children: controller.chatAttachments.map((attachment, index) => /* @__PURE__ */ jsxs13(View15, { style: styles15.selectedAttachment, children: [
+      /* @__PURE__ */ jsx19(Text11, { numberOfLines: 1, style: styles15.selectedAttachmentText, children: attachment.fileName }),
+      /* @__PURE__ */ jsx19(Pressable8, { accessibilityLabel: `Remove ${attachment.fileName}`, accessibilityRole: "button", disabled: controller.chatAttachmentUploading, onPress: () => controller.removeChatAttachment(index), children: /* @__PURE__ */ jsx19(Text11, { style: styles15.removeAttachment, children: "Remove" }) })
+    ] }, `${attachment.fileName}-${index}`)) }) : null,
+    controller.chatAttachmentError ? /* @__PURE__ */ jsx19(Text11, { accessibilityLiveRegion: "polite", style: styles15.attachmentError, children: controller.chatAttachmentError }) : null,
+    /* @__PURE__ */ jsx19(KeyboardAvoidingView, { behavior: Platform7.OS === "ios" ? "padding" : void 0, keyboardVerticalOffset: Platform7.OS === "ios" ? 12 : 0, children: /* @__PURE__ */ jsxs13(View15, { style: styles15.composer, children: [
+      controller.canPickChatFiles ? /* @__PURE__ */ jsx19(
+        Pressable8,
+        {
+          accessibilityLabel: "Attach file",
+          accessibilityRole: "button",
+          disabled: controller.chatAttachmentPicking || controller.chatAttachmentUploading,
+          onPress: () => void controller.pickChatFiles(),
+          style: ({ pressed }) => [styles15.composerButton, (controller.chatAttachmentPicking || controller.chatAttachmentUploading) && styles15.sendDisabled, pressed && styles15.pressed],
+          children: /* @__PURE__ */ jsx19(Text11, { style: styles15.composerButtonText, children: controller.chatAttachmentPicking ? "Choosing\u2026" : "Attach" })
+        }
+      ) : null,
+      /* @__PURE__ */ jsx19(
+        TextInput,
+        {
+          accessibilityLabel: "Message the Space",
+          editable: !controller.chatAttachmentUploading,
+          multiline: true,
+          onChangeText: controller.setChatDraft,
+          onSubmitEditing: controller.sendChatMessage,
+          placeholder: "Message the Space",
+          placeholderTextColor: Theme.colors.placeholder,
+          style: styles15.input,
+          value: controller.chatDraft
+        }
+      ),
+      /* @__PURE__ */ jsx19(Pressable8, { accessibilityLabel: "Send message", accessibilityRole: "button", disabled: sendDisabled, onPress: controller.sendChatMessage, style: ({ pressed }) => [styles15.sendButton, sendDisabled && styles15.sendDisabled, pressed && styles15.pressed], children: controller.chatAttachmentUploading ? /* @__PURE__ */ jsx19(Text11, { style: styles15.uploadingText, children: "\u2026" }) : /* @__PURE__ */ jsx19(HugeiconsIcon8, { color: Theme.colors.primaryForeground, icon: Navigation03Icon, size: 21 }) })
+    ] }) })
+  ] });
+}
+function ChatMessage({ isLocal, message, onOpenAttachment }) {
+  const timestamp = formatChatTimestamp(message.timestamp);
+  return /* @__PURE__ */ jsxs13(View15, { style: [styles15.messageRow, isLocal && styles15.messageRowLocal], children: [
+    !isLocal ? /* @__PURE__ */ jsx19(InitialsAvatar, { name: message.senderName, size: 42 }) : null,
+    /* @__PURE__ */ jsxs13(View15, { style: [styles15.messageCopy, isLocal && styles15.messageCopyLocal], children: [
+      /* @__PURE__ */ jsx19(Text11, { style: [styles15.sender, isLocal && styles15.senderLocal], children: isLocal ? `${message.senderName} (You)` : message.senderName }),
+      /* @__PURE__ */ jsxs13(View15, { style: [styles15.bubble, isLocal ? styles15.localBubble : styles15.remoteBubble], children: [
+        message.text ? /* @__PURE__ */ jsx19(Text11, { style: [styles15.messageText, isLocal && styles15.localMessageText], children: message.text }) : null,
+        message.attachments.map((attachment) => /* @__PURE__ */ jsx19(Pressable8, { accessibilityRole: "link", onPress: () => onOpenAttachment(attachment.attachmentId), style: ({ pressed }) => [styles15.attachmentLink, pressed && styles15.pressed], children: /* @__PURE__ */ jsx19(Text11, { numberOfLines: 1, style: [styles15.attachment, isLocal && styles15.localMessageText], children: attachment.fileName }) }, attachment.attachmentId))
+      ] }),
+      /* @__PURE__ */ jsx19(Text11, { style: [styles15.timestamp, isLocal && styles15.timestampLocal], children: timestamp }),
+      message.readBy.length ? /* @__PURE__ */ jsxs13(Text11, { style: [styles15.readBy, isLocal && styles15.timestampLocal], children: [
+        "Read by ",
+        message.readBy.map((reader) => reader.displayName).join(", ")
+      ] }) : null
+    ] }),
+    isLocal ? /* @__PURE__ */ jsx19(InitialsAvatar, { name: message.senderName, size: 42 }) : null
+  ] });
+}
+function EmptyChat() {
+  return /* @__PURE__ */ jsxs13(View15, { style: styles15.emptyState, children: [
+    /* @__PURE__ */ jsx19(View15, { style: styles15.emptyIcon, children: /* @__PURE__ */ jsx19(HugeiconsIcon8, { color: Theme.colors.ink2, icon: Message01Icon, size: 26 }) }),
+    /* @__PURE__ */ jsx19(Text11, { style: styles15.emptyTitle, children: "No messages yet" }),
+    /* @__PURE__ */ jsx19(Text11, { style: styles15.emptyText, children: "Send a message to start the conversation." })
+  ] });
+}
+var styles15 = StyleSheet16.create({
+  content: { flex: 1, minHeight: 0 },
+  loadOlder: { alignSelf: "center", minHeight: 44, paddingHorizontal: Theme.spacing.md, paddingVertical: Theme.spacing.sm, justifyContent: "center" },
+  loadOlderText: { color: Theme.colors.information, fontSize: 14, fontWeight: "700" },
+  messageList: { flexGrow: 1, gap: Theme.spacing.lg, paddingHorizontal: Theme.spacing.lg, paddingVertical: Theme.spacing.lg },
+  messageRow: { alignItems: "flex-start", flexDirection: "row", gap: Theme.spacing.sm, maxWidth: "92%" },
+  messageRowLocal: { alignSelf: "flex-end", justifyContent: "flex-end" },
+  messageCopy: { flexShrink: 1, minWidth: 0 },
+  messageCopyLocal: { alignItems: "flex-end" },
+  sender: { color: Theme.colors.ink, fontSize: 15, fontWeight: "600", marginBottom: 6, paddingHorizontal: 4 },
+  senderLocal: { textAlign: "right" },
+  bubble: { borderRadius: Theme.radius.md, borderWidth: 1, maxWidth: "100%", paddingHorizontal: Theme.spacing.md, paddingVertical: Theme.spacing.md },
+  remoteBubble: { backgroundColor: Theme.colors.surfaceMuted, borderColor: Theme.colors.line, borderTopLeftRadius: 5 },
+  localBubble: { backgroundColor: Theme.colors.ink, borderColor: Theme.colors.ink, borderTopRightRadius: 5 },
+  messageText: { color: Theme.colors.ink, fontSize: 17, lineHeight: 24 },
+  localMessageText: { color: Theme.colors.surface },
+  attachmentLink: { justifyContent: "center", marginTop: 4, maxWidth: "100%", minHeight: 32 },
+  attachment: { color: Theme.colors.information, fontSize: 14 },
+  timestamp: { color: Theme.colors.ink3, fontSize: 12, marginTop: 5, paddingHorizontal: 4 },
+  timestampLocal: { textAlign: "right" },
+  readBy: { color: Theme.colors.ink3, fontSize: 11, marginTop: 3, paddingHorizontal: 4 },
+  pendingMessage: { borderColor: Theme.colors.line, borderRadius: Theme.radius.md, borderWidth: 1, marginHorizontal: Theme.spacing.lg, marginBottom: Theme.spacing.sm, padding: Theme.spacing.md },
+  pendingText: { color: Theme.colors.ink, fontSize: 14 },
+  pendingMeta: { color: Theme.colors.ink2, fontSize: 12, marginTop: 4 },
+  retry: { color: Theme.colors.information, fontSize: 13, fontWeight: "700", marginTop: 6 },
+  selectedAttachments: { flexDirection: "row", flexWrap: "wrap", gap: Theme.spacing.sm, paddingHorizontal: Theme.spacing.lg, paddingBottom: Theme.spacing.sm },
+  selectedAttachment: { backgroundColor: Theme.colors.paper2, borderColor: Theme.colors.line, borderRadius: Theme.radius.sm, borderWidth: 1, maxWidth: "100%", minHeight: 36, paddingHorizontal: Theme.spacing.sm, paddingVertical: 8 },
+  selectedAttachmentText: { color: Theme.colors.ink2, fontSize: 13 },
+  removeAttachment: { color: Theme.colors.information, fontSize: 12, fontWeight: "700", marginTop: 4 },
+  attachmentError: { color: Theme.colors.danger, fontSize: 13, paddingHorizontal: Theme.spacing.lg, paddingBottom: Theme.spacing.sm },
+  composer: { alignItems: "flex-end", borderTopColor: Theme.colors.line, borderTopWidth: 1, flexDirection: "row", gap: Theme.spacing.sm, padding: Theme.spacing.md },
+  composerButton: { alignItems: "center", borderColor: Theme.colors.line, borderRadius: Theme.radius.md, borderWidth: 1, height: 50, justifyContent: "center", width: 50 },
+  composerButtonText: { color: Theme.colors.ink2, fontSize: 12, fontWeight: "700" },
+  uploadingText: { color: Theme.colors.primaryForeground, fontSize: 18, fontWeight: "700" },
+  input: { backgroundColor: Theme.colors.surfaceMuted, borderColor: Theme.colors.lineStrong, borderRadius: Theme.radius.md, borderWidth: 1, color: Theme.colors.ink, flex: 1, fontSize: 16, maxHeight: 112, minHeight: 50, paddingHorizontal: Theme.spacing.md, paddingVertical: 12 },
+  sendButton: { alignItems: "center", backgroundColor: Theme.colors.ink, borderRadius: Theme.radius.full, height: 50, justifyContent: "center", width: 50 },
+  sendDisabled: { backgroundColor: Theme.colors.lineStrong },
+  emptyState: { alignItems: "center", flex: 1, justifyContent: "center", minHeight: 220, paddingHorizontal: Theme.spacing["3xl"] },
+  emptyIcon: { alignItems: "center", backgroundColor: Theme.colors.washBlue, borderRadius: Theme.radius.full, height: 58, justifyContent: "center", marginBottom: Theme.spacing.md, width: 58 },
+  emptyTitle: { color: Theme.colors.ink, fontSize: 16, fontWeight: "700" },
+  emptyText: { color: Theme.colors.ink2, fontSize: 14, marginTop: 6, textAlign: "center" },
+  pressed: { opacity: 0.72, transform: [{ scale: 0.98 }] }
+});
+
+// src/components/native-space-view/SpacePeopleSheet.tsx
+import Mic01Icon3 from "@hugeicons/core-free-icons/dist/esm/Mic01Icon";
+import MicOff01Icon6 from "@hugeicons/core-free-icons/dist/esm/MicOff01Icon";
+import MoreHorizontalIcon2 from "@hugeicons/core-free-icons/dist/esm/MoreHorizontalIcon";
+import Video01Icon4 from "@hugeicons/core-free-icons/dist/esm/Video01Icon";
+import VideoOffIcon3 from "@hugeicons/core-free-icons/dist/esm/VideoOffIcon";
+import { HugeiconsIcon as HugeiconsIcon10 } from "@hugeicons/react-native";
+import { useState as useState5 } from "react";
+import { Pressable as Pressable10, ScrollView as ScrollView2, StyleSheet as StyleSheet18, Text as Text13, View as View17 } from "react-native";
+
+// src/components/native-space-view/ParticipantActionSheet.tsx
+import CancelCircleIcon from "@hugeicons/core-free-icons/dist/esm/CancelCircleIcon";
+import MicOff01Icon5 from "@hugeicons/core-free-icons/dist/esm/MicOff01Icon";
+import UserIcon from "@hugeicons/core-free-icons/dist/esm/UserIcon";
+import Video01Icon3 from "@hugeicons/core-free-icons/dist/esm/Video01Icon";
+import { HugeiconsIcon as HugeiconsIcon9 } from "@hugeicons/react-native";
+import { Modal as Modal4, Platform as Platform8, Pressable as Pressable9, StyleSheet as StyleSheet17, Text as Text12, View as View16 } from "react-native";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+function ParticipantActionSheet({ controller, participantId, onClose }) {
+  const participant = participantId ? controller.participants.participants.find((item) => item.id === participantId) : void 0;
+  const descriptors = buildParticipantActionDescriptors({
+    canMuteParticipants: controller.canMuteParticipants,
+    canRequestMedia: controller.canRequestMedia,
+    canStopParticipantCamera: controller.canStopParticipantCamera,
+    canStopParticipantScreenShare: controller.canStopParticipantScreenShare,
+    canRemoveParticipants: controller.canRemoveParticipants
+  });
+  const run = (descriptor) => {
+    if (!participantId) return;
+    onClose();
+    if (descriptor.kind === "mute") controller.muteParticipant(participantId);
+    if (descriptor.kind === "requestUnmute") controller.requestUnmuteParticipant(participantId);
+    if (descriptor.kind === "requestCamera") controller.requestStartParticipantCamera(participantId);
+    if (descriptor.kind === "stopCamera") controller.stopParticipantCamera(participantId);
+    if (descriptor.kind === "stopScreenShare") controller.stopParticipantScreenShare(participantId);
+    if (descriptor.kind === "remove") controller.removeParticipant(participantId);
+  };
+  return /* @__PURE__ */ jsx20(Modal4, { animationType: "fade", onRequestClose: onClose, transparent: true, visible: participantId !== null, children: /* @__PURE__ */ jsxs14(View16, { style: styles16.modalRoot, children: [
+    /* @__PURE__ */ jsx20(Pressable9, { accessibilityLabel: "Close Participant actions", onPress: onClose, style: styles16.backdrop }),
+    /* @__PURE__ */ jsxs14(View16, { style: styles16.card, children: [
+      /* @__PURE__ */ jsxs14(View16, { style: styles16.cardHeader, children: [
+        participant ? /* @__PURE__ */ jsx20(InitialsAvatar, { name: participant.displayName, size: 44 }) : /* @__PURE__ */ jsx20(IconTile, { icon: UserIcon }),
+        /* @__PURE__ */ jsx20(View16, { style: styles16.headerCopy, children: /* @__PURE__ */ jsx20(Text12, { numberOfLines: 1, style: styles16.name, children: participant?.displayName ?? "Participant" }) }),
+        /* @__PURE__ */ jsx20(CloseButton, { label: "Close Participant actions", onPress: onClose })
+      ] }),
+      /* @__PURE__ */ jsxs14(View16, { style: styles16.actions, children: [
+        descriptors.filter((descriptor) => !descriptor.destructive).map((descriptor) => /* @__PURE__ */ jsx20(ParticipantActionRow, { descriptor, onPress: () => run(descriptor) }, descriptor.kind)),
+        descriptors.some((descriptor) => descriptor.destructive) ? /* @__PURE__ */ jsx20(View16, { style: styles16.divider }) : null,
+        descriptors.filter((descriptor) => descriptor.destructive).map((descriptor) => /* @__PURE__ */ jsx20(ParticipantActionRow, { descriptor, onPress: () => run(descriptor) }, descriptor.kind))
+      ] }),
+      !descriptors.length ? /* @__PURE__ */ jsx20(Text12, { style: styles16.emptyText, children: "No actions are available for this Participant." }) : null
+    ] })
+  ] }) });
+}
+function ParticipantActionRow({ descriptor, onPress }) {
+  const icon = descriptor.kind === "mute" || descriptor.kind === "requestUnmute" ? MicOff01Icon5 : descriptor.kind === "requestCamera" || descriptor.kind === "stopCamera" ? Video01Icon3 : CancelCircleIcon;
+  return /* @__PURE__ */ jsxs14(Pressable9, { accessibilityLabel: descriptor.label, accessibilityRole: "button", onPress, style: ({ pressed }) => [styles16.actionRow, descriptor.destructive && styles16.destructiveRow, pressed && styles16.pressed], children: [
+    /* @__PURE__ */ jsx20(HugeiconsIcon9, { color: descriptor.destructive ? Theme.colors.error : Theme.colors.ink, icon, size: 21 }),
+    /* @__PURE__ */ jsx20(Text12, { style: [styles16.actionLabel, descriptor.destructive && styles16.destructiveText], children: descriptor.label })
+  ] });
+}
+var styles16 = StyleSheet17.create({
+  modalRoot: { alignItems: "center", flex: 1, justifyContent: "flex-end", paddingBottom: Platform8.OS === "ios" ? Theme.spacing["2xl"] : Theme.spacing.lg, paddingHorizontal: Theme.spacing.lg, paddingTop: Theme.spacing.lg },
+  backdrop: { ...StyleSheet17.absoluteFillObject, backgroundColor: Theme.colors.darkOverlay22 },
+  card: { backgroundColor: Theme.colors.surface, borderColor: Theme.colors.line, borderRadius: Theme.radius.lg, elevation: 8, maxHeight: "78%", overflow: "hidden", shadowColor: Theme.colors.ink, shadowOffset: { height: 4, width: 0 }, shadowOpacity: 0.14, shadowRadius: 20, width: "100%" },
+  cardHeader: { alignItems: "center", borderBottomColor: Theme.colors.line, borderBottomWidth: 1, flexDirection: "row", gap: Theme.spacing.md, minHeight: 78, paddingHorizontal: Theme.spacing.md },
+  headerCopy: { flex: 1, minWidth: 0 },
+  name: { color: Theme.colors.ink, fontSize: 17, fontWeight: "700" },
+  actions: { padding: Theme.spacing.sm },
+  actionRow: { alignItems: "center", borderRadius: Theme.radius.sm, flexDirection: "row", gap: Theme.spacing.md, minHeight: 52, paddingHorizontal: Theme.spacing.md },
+  actionLabel: { color: Theme.colors.ink, flex: 1, fontSize: 15 },
+  destructiveRow: { backgroundColor: Theme.colors.washPink, marginTop: Theme.spacing.xs },
+  destructiveText: { color: Theme.colors.error, fontWeight: "700" },
+  divider: { backgroundColor: Theme.colors.line, height: 1, marginHorizontal: Theme.spacing.md, marginVertical: Theme.spacing.xs },
+  emptyText: { color: Theme.colors.ink2, fontSize: 14, padding: Theme.spacing.lg },
+  pressed: { opacity: 0.72, transform: [{ scale: 0.985 }] }
+});
+
+// src/components/native-space-view/SpacePeopleSheet.tsx
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+function SpacePeopleSheet({ controller }) {
+  const [actionParticipantId, setActionParticipantId] = useState5(null);
+  const closeActions = () => {
+    setActionParticipantId(null);
+  };
+  const openActions = (participantId) => {
+    setActionParticipantId(participantId);
+  };
+  return /* @__PURE__ */ jsxs15(View17, { style: styles17.content, children: [
+    /* @__PURE__ */ jsxs15(ScrollView2, { contentContainerStyle: styles17.list, showsVerticalScrollIndicator: false, children: [
+      controller.admissionRequests.map((request) => /* @__PURE__ */ jsxs15(View17, { style: styles17.admissionRequest, children: [
+        /* @__PURE__ */ jsx21(InitialsAvatar, { name: request.displayName, size: 48 }),
+        /* @__PURE__ */ jsxs15(View17, { style: styles17.rowCopy, children: [
+          /* @__PURE__ */ jsx21(Text13, { numberOfLines: 1, style: styles17.name, children: request.displayName }),
+          /* @__PURE__ */ jsx21(Text13, { style: styles17.meta, children: "At the Entrance" })
+        ] }),
+        controller.canManageAdmission ? /* @__PURE__ */ jsxs15(View17, { style: styles17.admissionActions, children: [
+          /* @__PURE__ */ jsx21(Pressable10, { accessibilityRole: "button", onPress: () => controller.denyAdmission(request.requestId), style: ({ pressed }) => [styles17.denyButton, pressed && styles17.pressed], children: /* @__PURE__ */ jsx21(Text13, { style: styles17.denyText, children: "Deny" }) }),
+          /* @__PURE__ */ jsx21(Pressable10, { accessibilityRole: "button", onPress: () => controller.admitParticipant(request.requestId), style: ({ pressed }) => [styles17.admitButton, pressed && styles17.pressed], children: /* @__PURE__ */ jsx21(Text13, { style: styles17.admitText, children: "Admit" }) })
+        ] }) : null
+      ] }, request.requestId)),
+      controller.participants.participants.map((participant) => {
+        const local = participant.id === controller.participants.localParticipant?.id;
+        const canAct = !local && canActOnParticipant(controller);
+        return /* @__PURE__ */ jsxs15(View17, { style: styles17.participantRow, children: [
+          /* @__PURE__ */ jsx21(InitialsAvatar, { name: participant.displayName, size: 54 }),
+          /* @__PURE__ */ jsx21(View17, { style: styles17.rowCopy, children: /* @__PURE__ */ jsxs15(Text13, { numberOfLines: 1, style: styles17.name, children: [
+            participant.displayName,
+            local ? " (You)" : ""
+          ] }) }),
+          /* @__PURE__ */ jsxs15(View17, { style: styles17.mediaStatus, children: [
+            /* @__PURE__ */ jsx21(HugeiconsIcon10, { color: participant.audioEnabled ? Theme.colors.success : Theme.colors.error, icon: participant.audioEnabled ? Mic01Icon3 : MicOff01Icon6, size: 22 }),
+            /* @__PURE__ */ jsx21(View17, { style: [styles17.statusDot, { backgroundColor: participant.audioEnabled ? Theme.colors.chalkGreen : Theme.colors.chalkPink }] })
+          ] }),
+          /* @__PURE__ */ jsxs15(View17, { style: styles17.mediaStatus, children: [
+            /* @__PURE__ */ jsx21(HugeiconsIcon10, { color: participant.videoEnabled ? Theme.colors.success : Theme.colors.error, icon: participant.videoEnabled ? Video01Icon4 : VideoOffIcon3, size: 22 }),
+            /* @__PURE__ */ jsx21(View17, { style: [styles17.statusDot, { backgroundColor: participant.videoEnabled ? Theme.colors.chalkGreen : Theme.colors.chalkPink }] })
+          ] }),
+          canAct ? /* @__PURE__ */ jsx21(Pressable10, { accessibilityLabel: `Actions for ${participant.displayName}`, accessibilityRole: "button", onPress: () => openActions(participant.id), style: ({ pressed }) => [styles17.moreButton, pressed && styles17.pressed], children: /* @__PURE__ */ jsx21(HugeiconsIcon10, { color: Theme.colors.ink, icon: MoreHorizontalIcon2, size: 22 }) }) : null
+        ] }, participant.id);
+      }),
+      !controller.participants.participants.length && !controller.admissionRequests.length ? /* @__PURE__ */ jsx21(EmptyPeople, {}) : null
+    ] }),
+    /* @__PURE__ */ jsx21(ParticipantActionSheet, { controller, onClose: closeActions, participantId: actionParticipantId })
+  ] });
+}
+function canActOnParticipant(controller) {
+  return controller.canMuteParticipants || controller.canRequestMedia || controller.canStopParticipantCamera || controller.canStopParticipantScreenShare || controller.canRemoveParticipants;
+}
+function EmptyPeople() {
+  return /* @__PURE__ */ jsxs15(View17, { style: styles17.emptyState, children: [
+    /* @__PURE__ */ jsx21(Text13, { style: styles17.emptyTitle, children: "No People yet" }),
+    /* @__PURE__ */ jsx21(Text13, { style: styles17.emptyText, children: "People will appear here as they join the Space." })
+  ] });
+}
+var styles17 = StyleSheet18.create({
+  content: { flex: 1, minHeight: 0 },
+  list: { paddingHorizontal: Theme.spacing.lg, paddingVertical: Theme.spacing.sm },
+  participantRow: { alignItems: "center", borderBottomColor: Theme.colors.line, borderBottomWidth: 1, flexDirection: "row", gap: Theme.spacing.sm, minHeight: 84, paddingVertical: Theme.spacing.md },
+  rowCopy: { flex: 1, minWidth: 0, paddingHorizontal: Theme.spacing.xs },
+  name: { color: Theme.colors.ink, fontSize: 16, fontWeight: "700" },
+  meta: { color: Theme.colors.ink2, fontSize: 14, marginTop: 4 },
+  mediaStatus: { alignItems: "center", justifyContent: "center", minHeight: 44, minWidth: 34 },
+  statusDot: { borderRadius: Theme.radius.full, height: 6, marginTop: 2, width: 6 },
+  moreButton: { alignItems: "center", borderColor: Theme.colors.line, borderRadius: Theme.radius.full, borderWidth: 1, height: 46, justifyContent: "center", width: 46 },
+  admissionRequest: { alignItems: "center", backgroundColor: Theme.colors.washYellow, borderColor: Theme.colors.line, borderRadius: Theme.radius.md, borderWidth: 1, flexDirection: "row", gap: Theme.spacing.sm, marginVertical: Theme.spacing.sm, padding: Theme.spacing.md },
+  admissionActions: { alignItems: "center", flexDirection: "row", gap: Theme.spacing.sm },
+  denyButton: { alignItems: "center", borderColor: Theme.colors.lineStrong, borderRadius: Theme.radius.sm, borderWidth: 1, justifyContent: "center", minHeight: 44, minWidth: 68, paddingHorizontal: Theme.spacing.md },
+  denyText: { color: Theme.colors.ink, fontSize: 14, fontWeight: "600" },
+  admitButton: { alignItems: "center", backgroundColor: Theme.colors.ink, borderRadius: Theme.radius.sm, justifyContent: "center", minHeight: 44, minWidth: 68, paddingHorizontal: Theme.spacing.md },
+  admitText: { color: Theme.colors.surface, fontSize: 14, fontWeight: "700" },
+  emptyState: { alignItems: "center", justifyContent: "center", minHeight: 220, paddingHorizontal: Theme.spacing["3xl"] },
+  emptyTitle: { color: Theme.colors.ink, fontSize: 16, fontWeight: "700" },
+  emptyText: { color: Theme.colors.ink2, fontSize: 14, marginTop: 6, textAlign: "center" },
+  pressed: { opacity: 0.72, transform: [{ scale: 0.98 }] }
+});
+
+// src/components/native-space-view/SpacePanelSheet.tsx
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+function SpacePanelSheet({ controller }) {
+  const visible = controller.panel !== null;
+  const close = controller.closePanel;
+  const isChat = controller.panel === "chat";
+  return /* @__PURE__ */ jsx22(Modal5, { animationType: "slide", onRequestClose: close, transparent: true, visible, children: /* @__PURE__ */ jsxs16(View18, { style: styles18.modalRoot, children: [
+    /* @__PURE__ */ jsx22(Pressable11, { accessibilityLabel: "Close panel", onPress: close, style: styles18.backdrop }),
+    /* @__PURE__ */ jsxs16(SafeAreaView, { style: styles18.sheet, children: [
+      /* @__PURE__ */ jsx22(SheetGrip, {}),
+      /* @__PURE__ */ jsx22(SurfaceHeader, { closeLabel: `Close ${isChat ? "Chat" : "People"}`, count: !isChat ? controller.participantCount : void 0, onClose: close, title: isChat ? "Chat" : "People" }),
+      isChat ? /* @__PURE__ */ jsx22(SpaceChatSheet, { controller }) : /* @__PURE__ */ jsx22(SpacePeopleSheet, { controller })
+    ] })
+  ] }) });
+}
+var styles18 = StyleSheet19.create({
+  modalRoot: { flex: 1, justifyContent: "flex-end" },
+  backdrop: { ...StyleSheet19.absoluteFillObject, backgroundColor: Theme.colors.darkOverlay22 },
+  sheet: {
+    backgroundColor: Theme.colors.surface,
+    borderColor: Theme.colors.line,
+    borderTopLeftRadius: Theme.radius.xl,
+    borderTopRightRadius: Theme.radius.xl,
+    elevation: 8,
+    flex: 1,
+    marginTop: 78,
+    overflow: "hidden",
+    paddingBottom: Platform9.OS === "android" ? Theme.spacing.sm : 0,
+    shadowColor: Theme.colors.ink,
+    shadowOffset: { height: -8, width: 0 },
+    shadowOpacity: 0.12,
+    shadowRadius: 22
+  }
+});
+
+// src/components/native-space-view/useSpaceViewController.ts
+import { useCallback as useCallback8, useEffect as useEffect7, useMemo as useMemo12, useState as useState8 } from "react";
+import { Alert as Alert2, Linking } from "react-native";
+
+// src/components/native-space-view/diagnostics.ts
+function buildSpaceViewDiagnosticsSnapshot(input) {
+  const availability = (enabled, feature) => enabled ? enabledAction() : disabledAction(`features.${feature}=false`);
+  const screenShare = input.screenShareAvailability ?? availability(input.featureFlags.screenShare, "screenShare");
+  return {
+    canEndEpisode: input.canEndEpisode,
+    participantCount: input.participantCount,
+    raisedHandCount: input.raisedHandCount,
+    unreadChatCount: input.unreadChatCount,
+    featureFlags: input.featureFlags,
+    actionAvailability: {
+      screenShare: {
+        ...screenShare,
+        isActive: input.isScreenShareActive,
+        isLocalSharing: input.isLocalScreenSharing,
+        sharerParticipantId: input.screenShareSharerParticipantId,
+        visibleInBottomDock: false,
+        enabledInActionsSheet: screenShare.enabled
+      },
+      reactions: availability(input.featureFlags.reactions, "reactions"),
+      handRaise: availability(input.featureFlags.handRaise, "handRaise"),
+      chat: availability(input.featureFlags.chat, "chat"),
+      participants: availability(input.featureFlags.participants, "participants"),
+      whiteboard: availability(input.featureFlags.whiteboard, "whiteboard"),
+      moderation: input.canModerate ? enabledAction() : { enabled: false, reason: "capability-unavailable", detail: "The local participant cannot moderate participants" }
+    }
+  };
+}
+function enabledAction() {
+  return { enabled: true, reason: null, detail: null };
+}
+function disabledAction(detail) {
+  return { enabled: false, reason: "feature-disabled", detail };
+}
+
+// src/components/native-space-view/useSpaceViewDerived.ts
+import { useMemo as useMemo10 } from "react";
+import { useWindowDimensions as useWindowDimensions3 } from "react-native";
+
+// src/utils/native-space-layout.ts
+var NATIVE_COMPACT_VIEWPORT_MAX_WIDTH = 768;
+var NATIVE_COMPACT_GRID_PAGE_SIZE = 4;
+function isSameParticipant(a, b) {
+  return Boolean(a && b && a.id === b.id);
+}
+function isRenderableTrack(track) {
+  if (!track) {
+    return false;
+  }
+  const readyState = "readyState" in track ? track.readyState : void 0;
+  return readyState == null || readyState === "live";
+}
+function normalizeStageParticipants(participants, localParticipant) {
+  const seen = /* @__PURE__ */ new Set();
+  const normalized = [];
+  if (localParticipant) {
+    normalized.push(localParticipant);
+    seen.add(localParticipant.id);
+  }
+  for (const participant of participants) {
+    if (seen.has(participant.id)) {
+      continue;
+    }
+    normalized.push(participant);
+    seen.add(participant.id);
+  }
+  return normalized;
+}
+function buildCompactParticipantPages(participants, pageSize = NATIVE_COMPACT_GRID_PAGE_SIZE) {
+  if (participants.length === 0) {
+    return [];
+  }
+  const pages = [];
+  for (let index = 0; index < participants.length; index += pageSize) {
+    pages.push(participants.slice(index, index + pageSize));
+  }
+  return pages;
+}
+function resolveScreenShareSource(participants, localParticipant, screenShare) {
+  const sharerById = screenShare.sharerParticipantId ? participants.find((participant) => participant.id === screenShare.sharerParticipantId) ?? (localParticipant?.id === screenShare.sharerParticipantId ? localParticipant : null) : null;
+  const localIsSharer = screenShare.isLocalSharing || isSameParticipant(sharerById, localParticipant);
+  const fallbackTrack = sharerById?.screenShareTrack ?? null;
+  const screenShareTrack = isRenderableTrack(screenShare.videoTrack) ? screenShare.videoTrack : isRenderableTrack(fallbackTrack) ? fallbackTrack : null;
+  const screenSharer = sharerById ?? (localIsSharer ? localParticipant : null);
+  return {
+    screenSharer,
+    screenShareTrack,
+    isLocalScreenShare: Boolean(localIsSharer && screenShareTrack),
+    showScreenShare: Boolean(screenShare.isActive && screenShareTrack)
+  };
+}
+function resolveNativeSpaceLayout({ participants, localParticipant, screenShare, isWhiteboardOpen, isCompactViewport }) {
+  const allParticipants = normalizeStageParticipants(participants, localParticipant);
+  const gridPages = buildCompactParticipantPages(allParticipants);
+  const { screenSharer, screenShareTrack, isLocalScreenShare, showScreenShare } = resolveScreenShareSource(participants, localParticipant, screenShare);
+  const isSplit = !isCompactViewport && isWhiteboardOpen && showScreenShare;
+  let primaryContent = "grid";
+  if (isSplit) {
+    primaryContent = "split";
+  } else if (isWhiteboardOpen) {
+    primaryContent = "whiteboard";
+  } else if (showScreenShare) {
+    primaryContent = isLocalScreenShare ? "screen-share-placeholder" : "screen-share";
+  }
+  return {
+    allParticipants,
+    gridPages,
+    primaryContent,
+    isStageMode: primaryContent !== "grid",
+    isSplit,
+    showScreenShare,
+    isCompactViewport,
+    screenSharer,
+    screenShareTrack,
+    isLocalScreenShare
+  };
+}
+
+// src/components/native-space-view/useSpaceViewDerived.ts
+function useSpaceViewDerived({ participants, localParticipant, screenShare, isWhiteboardOpen }) {
+  const { width } = useWindowDimensions3();
+  return useMemo10(
+    () => resolveNativeSpaceLayout({
+      participants,
+      localParticipant,
+      screenShare,
+      isWhiteboardOpen,
+      isCompactViewport: width < NATIVE_COMPACT_VIEWPORT_MAX_WIDTH
+    }),
+    [participants, localParticipant, screenShare, isWhiteboardOpen, width]
+  );
+}
+
+// src/components/native-space-view/useSpaceViewPanels.ts
+import { useCallback as useCallback7, useEffect as useEffect6, useMemo as useMemo11, useRef as useRef3, useState as useState7 } from "react";
+import { Alert, Share } from "react-native";
+
+// src/hooks/useLayout.ts
+import { useCallback as useCallback6, useEffect as useEffect5, useState as useState6 } from "react";
+function useLayout({ layout: controlledLayout, onLayoutChange } = {}) {
+  const [uncontrolledLayout, setUncontrolledLayout] = useState6(controlledLayout ?? "focus");
+  const [isFullscreen, setFullscreen] = useState6(false);
+  const layout = controlledLayout ?? uncontrolledLayout;
+  useEffect5(() => {
+    if (controlledLayout) setUncontrolledLayout(controlledLayout);
+  }, [controlledLayout]);
+  const setLayout = useCallback6(
+    (nextLayout) => {
+      if (!controlledLayout) setUncontrolledLayout(nextLayout);
+      onLayoutChange?.(nextLayout);
+    },
+    [controlledLayout, onLayoutChange]
+  );
+  const toggleLayout = useCallback6(() => setLayout(layout === "grid" ? "focus" : "grid"), [layout, setLayout]);
+  const toggleFullscreen = useCallback6(async () => setFullscreen((current) => !current), []);
+  return { layout, isMobileView: true, isFullscreen, setLayout, toggleLayout, toggleFullscreen };
+}
+
+// src/components/native-space-view/format-space-duration.ts
+function formatSpaceDuration(secondsElapsed) {
+  return `${Math.floor(secondsElapsed / 60)}:${String(secondsElapsed % 60).padStart(2, "0")}`;
+}
+
+// src/components/native-space-view/useSpaceViewPanels.ts
+var emptyElements = Object.freeze([]);
+var emptyParticipants = Object.freeze([]);
+function useSpaceViewPanels({ spaceName, inviteLink, layout: controlledLayout, onLayoutChange, canWhiteboard, canDraw, canClear, canEndEpisode, transport, onLeave, onEndEpisode, run, journeyContext, initialState, controlledState }) {
+  const fixtureLayout = controlledState?.layout ?? initialState?.layout ?? controlledLayout;
+  const layout = useLayout({ layout: fixtureLayout, onLayoutChange });
+  const [panel, setPanel] = useState7(initialState?.panel ?? null);
+  const [actionsOpen, setActionsOpen] = useState7(initialState?.actionsOpen ?? false);
+  const [reactionPickerOpen, setReactionPickerOpen] = useState7(initialState?.reactionPickerOpen ?? false);
+  const [secondsElapsed, setSecondsElapsed] = useState7(0);
+  const [settingsOpen, setSettingsOpen] = useState7(initialState?.settingsOpen ?? false);
+  const [whiteboardOpen, setWhiteboardOpen] = useState7(initialState?.whiteboardOpen ?? false);
+  const generatedJourneyId = useRef3(globalThis.crypto?.randomUUID?.() ?? `native-whiteboard-${Date.now()}-${Math.random().toString(36).slice(2)}`);
+  useEffect6(() => {
+    const durationSeconds = Math.max(0, Math.floor(controlledState?.durationSeconds ?? initialState?.durationSeconds ?? 0));
+    const startedAt = Date.now() - durationSeconds * 1e3;
+    const update = () => setSecondsElapsed(Math.max(0, Math.floor((Date.now() - startedAt) / 1e3)));
+    update();
+    const timer = globalThis.setInterval(update, 1e3);
+    return () => globalThis.clearInterval(timer);
+  }, [controlledState?.durationSeconds, initialState?.durationSeconds]);
+  useEffect6(() => {
+    if (controlledState?.panel !== void 0) setPanel(controlledState.panel ?? null);
+    if (controlledState?.actionsOpen !== void 0) setActionsOpen(controlledState.actionsOpen);
+    if (controlledState?.reactionPickerOpen !== void 0) setReactionPickerOpen(controlledState.reactionPickerOpen);
+    if (controlledState?.settingsOpen !== void 0) setSettingsOpen(controlledState.settingsOpen);
+    if (controlledState?.whiteboardOpen !== void 0) setWhiteboardOpen(controlledState.whiteboardOpen);
+  }, [controlledState]);
+  const whiteboard = useMemo11(
+    () => ({
+      isOpen: canWhiteboard && whiteboardOpen,
+      canDraw: canWhiteboard && canDraw,
+      canClear: canWhiteboard && canClear,
+      elements: emptyElements,
+      openParticipants: emptyParticipants,
+      transport,
+      journeyId: journeyContext?.journeyId ?? generatedJourneyId.current,
+      ...journeyContext?.traceparent ? { traceparent: journeyContext.traceparent } : {},
+      ...journeyContext?.tracestate ? { tracestate: journeyContext.tracestate } : {},
+      ...journeyContext ? { onMetric: journeyContext.recordWhiteboardMetric } : {},
+      open: () => canWhiteboard && setWhiteboardOpen(true),
+      close: () => setWhiteboardOpen(false),
+      toggle: () => canWhiteboard && setWhiteboardOpen((value) => !value),
+      requestSync: () => void run(() => transport?.requestSnapshot()),
+      clear: () => void run(() => transport?.clear())
+    }),
+    [canClear, canDraw, canWhiteboard, journeyContext, run, transport, whiteboardOpen]
+  );
+  const handleLeave = useCallback7(() => {
+    const buttons = [
+      { text: "Cancel", style: "cancel" },
+      { text: "Leave", style: "destructive", onPress: () => void run(onLeave) }
+    ];
+    if (canEndEpisode && onEndEpisode) {
+      buttons.splice(1, 0, {
+        text: "End for All",
+        style: "destructive",
+        onPress: () => void run(onEndEpisode)
+      });
+    }
+    Alert.alert("Leave Space?", "Choose how you want to leave.", buttons);
+  }, [canEndEpisode, onEndEpisode, onLeave, run]);
+  const handleInviteParticipants = useCallback7(() => {
+    void run(async () => {
+      if (!inviteLink) throw new Error("The Space invite is not ready yet.");
+      await Share.share({ message: inviteLink, title: spaceName || "Chalk Space", url: inviteLink });
+    });
+  }, [inviteLink, run, spaceName]);
+  return {
+    layout,
+    panel,
+    secondsElapsed,
+    formattedDuration: formatSpaceDuration(secondsElapsed),
+    actionsOpen,
+    reactionPickerOpen,
+    whiteboard,
+    settingsOpen,
+    setActionsOpen,
+    setReactionPickerOpen,
+    handleLeave,
+    openPanel: (nextPanel) => {
+      setActionsOpen(false);
+      if (nextPanel === "whiteboard") whiteboard.open();
+      else setPanel(nextPanel);
+    },
+    closePanel: () => setPanel(null),
+    handleInviteParticipants
+  };
+}
+
+// src/components/native-space-view/screen-share-availability.ts
+function resolveNativeScreenShareAvailability({ featureEnabled }) {
+  if (!featureEnabled) {
+    return {
+      enabled: false,
+      reason: "feature-disabled",
+      detail: "features.screenShare=false in SpaceView props"
+    };
+  }
+  return {
+    enabled: true,
+    reason: null,
+    detail: null
+  };
+}
+
+// src/components/native-space-view/space-chat-attachments.ts
+import { CHALK_CHAT_ATTACHMENT_LIMITS, CHALK_CHAT_ATTACHMENT_MIME_TYPES } from "@q9labsai/chalk-client";
+var allowedMimeTypes = new Set(CHALK_CHAT_ATTACHMENT_MIME_TYPES);
+var encoder = new TextEncoder();
+function describeChatUploadFile(file) {
+  if ("bytes" in file) {
+    return { file, fileName: file.fileName, mimeType: file.mimeType, byteLength: file.bytes.byteLength };
+  }
+  return { file, fileName: file.name, mimeType: file.type, byteLength: file.size };
+}
+function validateChatFileDraft(draft) {
+  if (!draft.fileName || encoder.encode(draft.fileName).byteLength > CHALK_CHAT_ATTACHMENT_LIMITS.maximumFileNameBytes) return "This file name is too long.";
+  if (!Number.isSafeInteger(draft.byteLength) || draft.byteLength < 1 || draft.byteLength > CHALK_CHAT_ATTACHMENT_LIMITS.maximumByteLength) return "This file is too large or empty.";
+  if (!allowedMimeTypes.has(draft.mimeType)) return "This file type is not supported in Space chat.";
+  return null;
+}
+function normalizeChatFileDrafts(files) {
+  if (files.length > CHALK_CHAT_ATTACHMENT_LIMITS.maximumPerMessage) {
+    return { files: [], error: `You can attach up to ${CHALK_CHAT_ATTACHMENT_LIMITS.maximumPerMessage} files per message.` };
+  }
+  const drafts = files.map(describeChatUploadFile);
+  const error = drafts.map(validateChatFileDraft).find((message) => message !== null) ?? null;
+  return error ? { files: [], error } : { files: drafts, error: null };
+}
+async function uploadAndSendNativeChatAttachments(files, text, upload, send) {
+  const attachments = await Promise.all(files.map((draft) => upload(draft.file)));
+  await send({ text, ...attachments.length ? { attachments } : {} });
+}
+
+// src/components/native-space-view/useSpaceViewController.ts
+var spaceReactions = /* @__PURE__ */ new Set(["\u{1F44D}", "\u2764\uFE0F", "\u{1F602}", "\u{1F62E}", "\u{1F622}", "\u{1F389}"]);
+function useSpaceViewController({ spaceName, inviteLink, layout: controlledLayout, onLayoutChange, features, onLeave, onEndEpisode, onDiagnosticsChange, pickChatFiles: pickChatFilesInput }) {
+  const client = useSpaceClient();
+  const self = useSelf();
+  const participantSlice = useParticipants();
+  const media = useMedia();
+  const chatSlice = useChat();
+  const reactionSlice = useReactions();
+  const whiteboardSlice = useWhiteboard();
+  const journeyContext = getNativeJourneyContext(client);
+  const [actionsOpen, setActionsOpen] = useState8(false);
+  const [reactionPickerOpen, setReactionPickerOpen] = useState8(false);
+  const [chatDraft, setChatDraft] = useState8("");
+  const [chatAttachments, setChatAttachments] = useState8([]);
+  const [chatAttachmentError, setChatAttachmentError] = useState8(null);
+  const [chatAttachmentPicking, setChatAttachmentPicking] = useState8(false);
+  const [chatAttachmentUploading, setChatAttachmentUploading] = useState8(false);
+  const run = useCallback8(async (action) => {
+    try {
+      await action();
+    } catch (cause) {
+      Alert2.alert("Action failed", cause instanceof Error ? cause.message : "Chalk could not complete the action.");
+    }
+  }, []);
+  const localParticipantId = self.participantId;
+  const participants = useMemo12(
+    () => participantSlice.roster.map((participant) => {
+      const local = participant.participantId === localParticipantId;
+      const remoteMedia = media.remote.filter((publication) => publication.participantId === participant.participantId);
+      return {
+        ...participant,
+        id: participant.participantId,
+        audioEnabled: local ? media.local.microphone.state === "enabled" || media.local.microphone.state === "requesting" : participant.media.microphone === "active",
+        videoEnabled: local ? media.local.camera.state === "enabled" || media.local.camera.state === "requesting" : participant.media.camera === "active",
+        audioTrack: local ? media.local.microphone.track : remoteMedia.find((publication) => publication.source === "microphone")?.track ?? null,
+        videoTrack: local ? media.local.camera.track : remoteMedia.find((publication) => publication.source === "camera")?.track ?? null,
+        screenShareTrack: local ? media.screenShare.track : remoteMedia.find((publication) => publication.source === "screen")?.track ?? null
+      };
+    }),
+    [localParticipantId, media.local.camera, media.local.microphone, media.remote, media.screenShare.track, participantSlice.roster]
+  );
+  const localParticipant = useMemo12(() => participants.find((participant) => participant.id === localParticipantId) ?? null, [localParticipantId, participants]);
+  const spaceParticipants = useMemo12(
+    () => ({
+      participants,
+      localParticipant,
+      remoteParticipants: participants.filter((participant) => participant.id !== localParticipantId),
+      activeSpeaker: null,
+      count: participants.length,
+      participantCount: participants.length,
+      getParticipant: (participantId) => participants.find((participant) => participant.id === participantId),
+      updateDisplayName: (displayName) => client.participants.renameSelf(displayName)
+    }),
+    [client.participants, localParticipant, localParticipantId, participants]
+  );
+  const isLocalSharing = media.screenShare.state === "enabled" || media.screenShare.state === "requesting";
+  const remoteScreenShare = useMemo12(() => media.remote.find((publication) => publication.source === "screen") ?? null, [media.remote]);
+  const screenShare = useMemo12(
+    () => ({
+      isActive: isLocalSharing || remoteScreenShare !== null,
+      isStarting: media.screenShare.state === "requesting",
+      isLocalSharing,
+      sharerParticipantId: isLocalSharing ? localParticipantId : remoteScreenShare?.participantId ?? null,
+      videoTrack: isLocalSharing ? media.screenShare.track : remoteScreenShare?.track ?? null,
+      audioTrack: null,
+      start: async () => {
+        await client.media.setScreenShareEnabled(true);
+        return true;
+      },
+      stop: () => client.media.setScreenShareEnabled(false),
+      toggle: async () => {
+        const enabled = !isLocalSharing;
+        await client.media.setScreenShareEnabled(enabled);
+        return enabled;
+      }
+    }),
+    [client.media, isLocalSharing, localParticipantId, media.screenShare.state, media.screenShare.track, remoteScreenShare]
+  );
+  const interactionState = useMemo12(() => {
+    const raisedHands = participantSlice.roster.filter((participant) => participant.handRaised).map((participant) => participant.participantId);
+    const activeReactions = reactionSlice.active.map((reaction) => ({
+      id: reaction.eventId,
+      emoji: reaction.reaction,
+      participantId: reaction.participantId,
+      participantName: reaction.displayName
+    }));
+    return {
+      isHandRaised: self.handRaised,
+      raisedHands,
+      raisedHandCount: raisedHands.length,
+      activeReactions,
+      reactionEnabled: self.can("sendReaction"),
+      raiseHand: () => client.participants.raiseHand(),
+      lowerHand: () => client.participants.lowerHand(),
+      toggleHand: () => self.handRaised ? client.participants.lowerHand() : client.participants.raiseHand(),
+      sendReaction: (reaction) => client.reactions.send(reaction)
+    };
+  }, [client.participants, client.reactions, participantSlice.roster, reactionSlice.active, self]);
+  const chat = useMemo12(() => {
+    const messages = chatSlice.messages.map((message) => ({
+      id: message.messageId,
+      sequence: message.sequence,
+      senderId: message.participantId,
+      senderName: message.displayName,
+      text: message.text,
+      content: message.text,
+      attachments: message.attachments,
+      readBy: chatSlice.readReceipts.filter((receipt) => receipt.participantId !== message.participantId && receipt.participantId !== localParticipantId && sequenceAtOrAfter(receipt.readThroughSequence, message.sequence)).map((receipt) => ({
+        ...receipt,
+        displayName: participantSlice.roster.find((participant) => participant.participantId === receipt.participantId)?.displayName ?? "Participant"
+      })),
+      timestamp: Date.parse(message.createdAt)
+    }));
+    const pendingMessages = chatSlice.pendingSends.map((pending) => ({ ...pending, state: pending.status }));
+    const sendMessage = (content) => client.chat.send(typeof content === "string" ? { text: content } : content).then(() => void 0);
+    const markAsRead = (throughSequence) => {
+      const target = throughSequence ? chatSlice.messages.find((message) => message.sequence === throughSequence) : chatSlice.messages.at(-1);
+      return target ? client.chat.markRead(target.messageId) : Promise.resolve(null);
+    };
+    return {
+      messages,
+      isEnabled: self.can("sendChat"),
+      count: messages.length,
+      unreadCount: chatSlice.unreadCount,
+      pendingMessages,
+      hasMore: chatSlice.pagination.hasOlder,
+      isLoadingOlder: chatSlice.status === "loading",
+      sendMessage,
+      retryMessage: (clientMessageId) => {
+        const pending = chatSlice.pendingSends.find((message) => message.clientMessageId === clientMessageId);
+        return pending ? client.chat.send({ text: pending.text, attachments: pending.attachments }).then(() => void 0) : Promise.reject(new Error("The pending message is no longer available."));
+      },
+      loadOlderMessages: () => client.chat.loadOlder().then(() => void 0),
+      reactToMessage: () => {
+        throw new Error("Per-message reactions are not part of the actions contract.");
+      },
+      markAsRead,
+      markAsHidden: markAsRead,
+      getMessage: (id) => messages.find((message) => message.id === id)
+    };
+  }, [chatSlice, client.chat, localParticipantId, participantSlice.roster, self]);
+  const canWhiteboard = features?.whiteboard !== false && whiteboardSlice.engine.status !== "unsubscribed";
+  const canDraw = canWhiteboard && self.can("drawWhiteboard");
+  const canClear = canWhiteboard && self.can("manageWhiteboard");
+  const whiteboardTransport = useMemo12(() => client.whiteboard.transport(), [client.whiteboard, whiteboardSlice.engine.status]);
+  const canEndEpisode = self.can("endEpisode");
+  const screenShareAvailability = useMemo12(() => resolveNativeScreenShareAvailability({ featureEnabled: features?.screenShare !== false }), [features?.screenShare]);
+  const capabilities = useMemo12(
+    () => ({
+      canEndEpisode,
+      canChat: features?.chat !== false && self.can("sendChat"),
+      canParticipants: features?.participants !== false,
+      canScreenShare: screenShareAvailability.enabled && self.can("publishScreen"),
+      canReactions: features?.reactions !== false && self.can("sendReaction"),
+      canHandRaise: features?.handRaise !== false && self.can("raiseHand"),
+      canInvite: features?.info !== false && Boolean(inviteLink),
+      canSettings: features?.settings !== false,
+      canWhiteboard,
+      canManageAdmission: features?.admission !== false && self.can("manageAdmission"),
+      canRequestMedia: self.can("requestMediaOthers"),
+      canMuteParticipants: self.can("muteOthers"),
+      canRemoveParticipants: self.can("removeParticipant"),
+      canStopParticipantCamera: self.can("stopVideoOthers"),
+      canStopParticipantScreenShare: self.can("stopScreenOthers"),
+      canModerate: self.can("manageAdmission") || self.can("assignRoles") || self.can("requestMediaOthers") || self.can("muteOthers") || self.can("removeParticipant") || self.can("stopVideoOthers") || self.can("stopScreenOthers"),
+      screenShareAvailability
+    }),
+    [canEndEpisode, canWhiteboard, features?.admission, features?.chat, features?.handRaise, features?.info, features?.participants, features?.reactions, features?.settings, inviteLink, screenShareAvailability, self]
+  );
+  const spacePanels = useSpaceViewPanels({
+    spaceName,
+    inviteLink,
+    layout: controlledLayout,
+    onLayoutChange,
+    canWhiteboard,
+    canDraw,
+    canClear,
+    canEndEpisode,
+    transport: whiteboardTransport,
+    onLeave,
+    onEndEpisode,
+    run,
+    journeyContext
+  });
+  const derived = useSpaceViewDerived({ participants, localParticipant, screenShare, isWhiteboardOpen: spacePanels.whiteboard.isOpen });
+  useEffect7(() => {
+    const request = media.incomingRequests[0];
+    if (!request) return;
+    Alert2.alert(request.kind === "unmute" ? "Unmute request" : "Camera request", `${request.actorDisplayName ?? "A Space organizer"} is asking you to ${request.kind === "unmute" ? "unmute" : "start your camera"}.`, [
+      { text: "Not now", style: "cancel", onPress: () => void run(() => client.media.declineRequest(request.requestId)) },
+      { text: "Allow", onPress: () => void run(() => client.media.acceptRequest(request.requestId)) }
+    ]);
+  }, [client.media, media.incomingRequests, run]);
+  const spaceDiagnostics = useMemo12(
+    () => buildSpaceViewDiagnosticsSnapshot({
+      featureFlags: {
+        chat: capabilities.canChat,
+        participants: capabilities.canParticipants,
+        screenShare: capabilities.canScreenShare,
+        reactions: capabilities.canReactions,
+        handRaise: capabilities.canHandRaise,
+        whiteboard: capabilities.canWhiteboard
+      },
+      canEndEpisode: capabilities.canEndEpisode,
+      participantCount: spaceParticipants.participantCount,
+      raisedHandCount: interactionState.raisedHandCount,
+      unreadChatCount: chat.unreadCount,
+      isScreenShareActive: screenShare.isActive,
+      isLocalScreenSharing: screenShare.isLocalSharing,
+      screenShareSharerParticipantId: screenShare.sharerParticipantId,
+      canModerate: capabilities.canModerate,
+      screenShareAvailability
+    }),
+    [capabilities, chat.unreadCount, interactionState.raisedHandCount, spaceParticipants.participantCount, screenShare.isActive, screenShare.isLocalSharing, screenShare.sharerParticipantId, screenShareAvailability]
+  );
+  useEffect7(() => onDiagnosticsChange?.(spaceDiagnostics), [onDiagnosticsChange, spaceDiagnostics]);
+  const pickChatFiles = useCallback8(async () => {
+    if (!pickChatFilesInput) return;
+    setChatAttachmentPicking(true);
+    try {
+      const picked = normalizeChatFileDrafts(await pickChatFilesInput());
+      if (picked.error) {
+        setChatAttachmentError(picked.error);
+        return;
+      }
+      const combined = normalizeChatFileDrafts([...chatAttachments.map((draft) => draft.file), ...picked.files.map((draft) => draft.file)]);
+      if (combined.error) {
+        setChatAttachmentError(combined.error);
+        return;
+      }
+      setChatAttachmentError(null);
+      setChatAttachments(combined.files);
+    } catch (cause) {
+      setChatAttachmentError(cause instanceof Error ? cause.message : "Could not read the selected files.");
+    } finally {
+      setChatAttachmentPicking(false);
+    }
+  }, [chatAttachments, pickChatFilesInput]);
+  const removeChatAttachment = useCallback8((index) => {
+    setChatAttachments((current) => current.filter((_, currentIndex) => currentIndex !== index));
+    setChatAttachmentError(null);
+  }, []);
+  const sendChatMessage = useCallback8(() => {
+    const text = chatDraft.trim();
+    if (!text && chatAttachments.length === 0) return;
+    void run(async () => {
+      setChatAttachmentUploading(true);
+      setChatAttachmentError(null);
+      try {
+        await uploadAndSendNativeChatAttachments(chatAttachments, text, client.chat.files.upload, chat.sendMessage);
+        setChatDraft("");
+        setChatAttachments([]);
+      } catch (cause) {
+        setChatAttachmentError(cause instanceof Error ? cause.message : "Could not send the attachments.");
+        throw cause;
+      } finally {
+        setChatAttachmentUploading(false);
+      }
+    });
+  }, [chat, chatAttachments, chatDraft, client.chat.files, run]);
+  return {
+    simulatorMediaDisabled: isIosSimulator(),
+    spaceName: spaceName || "Space",
+    panel: spacePanels.panel,
+    selfName: self.displayName || "Participant",
+    isMuted: !(media.local.microphone.state === "enabled" || media.local.microphone.state === "requesting"),
+    isCameraOff: !(media.local.camera.state === "enabled" || media.local.camera.state === "requesting"),
+    handRaised: interactionState.isHandRaised,
+    raisedHandCount: interactionState.raisedHandCount,
+    activeReactions: interactionState.activeReactions.slice(-3),
+    secondsElapsed: spacePanels.secondsElapsed,
+    formattedDuration: spacePanels.formattedDuration,
+    actionsOpen,
+    reactionPickerOpen,
+    chatDraft,
+    chatAttachments,
+    chatAttachmentError,
+    chatAttachmentPicking,
+    chatAttachmentUploading,
+    canPickChatFiles: Boolean(pickChatFilesInput),
+    participantCount: spaceParticipants.participantCount,
+    canChat: capabilities.canChat,
+    canParticipants: capabilities.canParticipants,
+    canScreenShare: capabilities.canScreenShare,
+    canReactions: capabilities.canReactions,
+    canHandRaise: capabilities.canHandRaise,
+    canInvite: capabilities.canInvite,
+    canSettings: capabilities.canSettings,
+    canWhiteboard: capabilities.canWhiteboard,
+    canManageAdmission: capabilities.canManageAdmission,
+    canRequestMedia: capabilities.canRequestMedia,
+    canMuteParticipants: capabilities.canMuteParticipants,
+    canRemoveParticipants: capabilities.canRemoveParticipants,
+    canStopParticipantCamera: capabilities.canStopParticipantCamera,
+    canStopParticipantScreenShare: capabilities.canStopParticipantScreenShare,
+    admissionRequests: participantSlice.admissionQueue,
+    spaceDiagnostics,
+    participants: spaceParticipants,
+    settings: {
+      displayName: self.displayName ?? "",
+      microphoneEnabled: media.local.microphone.state === "enabled" || media.local.microphone.state === "requesting",
+      cameraEnabled: media.local.camera.state === "enabled" || media.local.camera.state === "requesting",
+      devices: media.devices,
+      selection: media.selection,
+      updateDisplayName: (displayName) => {
+        const nextDisplayName = displayName.trim();
+        if (nextDisplayName) void run(() => client.participants.renameSelf(nextDisplayName));
+      },
+      selectMicrophone: (deviceId) => void run(() => client.media.selectMicrophone(deviceId)),
+      selectCamera: (deviceId) => void run(() => client.media.selectCamera(deviceId)),
+      selectSpeaker: (deviceId) => void run(() => client.media.selectSpeaker(deviceId))
+    },
+    chat,
+    interactions: interactionState,
+    screenShare,
+    layout: spacePanels.layout,
+    whiteboard: spacePanels.whiteboard,
+    derived,
+    setActionsOpen,
+    setReactionPickerOpen,
+    setChatDraft,
+    pickChatFiles,
+    removeChatAttachment,
+    handleLeave: spacePanels.handleLeave,
+    openPanel: spacePanels.openPanel,
+    closePanel: spacePanels.closePanel,
+    handleInviteParticipants: spacePanels.handleInviteParticipants,
+    toggleAudio: () => void run(() => client.media.setMicrophoneEnabled(!(media.local.microphone.state === "enabled" || media.local.microphone.state === "requesting"))),
+    toggleVideo: () => void run(() => client.media.setCameraEnabled(!(media.local.camera.state === "enabled" || media.local.camera.state === "requesting"))),
+    toggleScreenShare: () => void run(screenShare.toggle),
+    toggleHand: () => void run(interactionState.toggleHand),
+    sendReaction: (reaction) => {
+      if (!spaceReactions.has(reaction)) return;
+      void run(() => interactionState.sendReaction(reaction));
+    },
+    sendChatMessage,
+    openChatAttachment: (attachmentId) => {
+      const attachment = chat.messages.flatMap((message) => message.attachments).find((candidate) => candidate.attachmentId === attachmentId);
+      if (attachment) void run(() => Linking.openURL(client.chat.files.url(attachment)));
+    },
+    markChatMessageVisible: (sequence) => void run(() => chat.markAsRead(sequence)),
+    admitParticipant: (requestId) => void run(() => client.participants.admit(requestId)),
+    denyAdmission: (requestId) => void run(() => client.participants.deny(requestId)),
+    removeParticipant: (participantId) => void run(() => client.participants.remove(participantId)),
+    muteParticipant: (participantId) => void run(() => client.participants.mute(participantId)),
+    requestUnmuteParticipant: (participantId) => void run(() => client.participants.requestMedia(participantId, "microphone")),
+    requestStartParticipantCamera: (participantId) => void run(() => client.participants.requestMedia(participantId, "camera")),
+    stopParticipantCamera: (participantId) => void run(() => client.participants.stopVideo(participantId)),
+    stopParticipantScreenShare: (participantId) => void run(() => client.participants.stopScreenShare(participantId))
+  };
+}
+function sequenceAtOrAfter(value, floor) {
+  const normalizedValue = value.replace(/^0+(?=\d)/, "");
+  const normalizedFloor = floor.replace(/^0+(?=\d)/, "");
+  return normalizedValue.length > normalizedFloor.length || normalizedValue.length === normalizedFloor.length && normalizedValue >= normalizedFloor;
+}
+
+// src/components/SpaceView.shared.tsx
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+function SpaceViewShared(props) {
+  const controller = useSpaceViewController(props);
+  const theme = useNativeTheme();
+  const toggleMedia = (action) => {
+    if (controller.simulatorMediaDisabled) {
+      Alert3.alert("Media unavailable", getIosSimulatorMediaMessage());
+      return;
+    }
+    action();
+  };
+  return /* @__PURE__ */ jsxs17(View19, { style: [styles19.space, { backgroundColor: theme.colors.darkCanvas }], children: [
+    /* @__PURE__ */ jsx23(SpaceTopBarAndroid, { formattedDuration: controller.formattedDuration, logoUrl: props.logoUrl, participantCount: controller.participantCount, spaceName: controller.spaceName }),
+    props.reconnecting ? /* @__PURE__ */ jsx23(View19, { accessibilityLiveRegion: "polite", style: [styles19.recovery, { backgroundColor: theme.colors.primary }], children: /* @__PURE__ */ jsx23(Text14, { style: [styles19.recoveryText, { color: theme.colors.primaryForeground }], children: "Reconnecting\u2026 controls will resume shortly." }) }) : null,
+    /* @__PURE__ */ jsx23(View19, { style: styles19.stage, children: controller.whiteboard.isOpen ? /* @__PURE__ */ jsx23(SpaceWhiteboardSurface, { whiteboard: controller.whiteboard }) : controller.derived.isStageMode || controller.layout.layout !== "grid" ? /* @__PURE__ */ jsx23(
+      SpaceStageAndroid,
+      {
+        activeReactions: controller.activeReactions,
+        handRaised: controller.handRaised,
+        isCompactViewport: controller.derived.isCompactViewport,
+        isMuted: controller.isMuted,
+        layoutMode: controller.layout.layout,
+        primaryContent: controller.derived.primaryContent,
+        raisedHandCount: controller.raisedHandCount,
+        screenShareTrack: controller.derived.screenShareTrack,
+        screenSharer: controller.derived.screenSharer,
+        selfName: controller.selfName,
+        stripParticipants: controller.derived.allParticipants,
+        whiteboard: {
+          isOpen: controller.whiteboard.isOpen,
+          canDraw: controller.whiteboard.canDraw,
+          elementCount: controller.whiteboard.elements.length,
+          participantCount: controller.whiteboard.openParticipants.length
+        }
+      }
+    ) : /* @__PURE__ */ jsx23(SpaceGridAndroid, { gridPages: controller.derived.gridPages, participants: controller.derived.allParticipants }) }),
+    /* @__PURE__ */ jsx23(
+      SpaceBottomDockAndroid,
+      {
+        isCameraOff: controller.isCameraOff,
+        isMuted: controller.isMuted,
+        onLeave: controller.handleLeave,
+        onOpenChat: controller.canChat ? () => controller.openPanel("chat") : void 0,
+        onOpenMore: () => controller.setActionsOpen(true),
+        onToggleAudio: () => toggleMedia(controller.toggleAudio),
+        onToggleVideo: () => toggleMedia(controller.toggleVideo),
+        simulatorMediaDisabled: controller.simulatorMediaDisabled,
+        unreadChatCount: controller.chat.unreadCount
+      }
+    ),
+    /* @__PURE__ */ jsx23(SpaceActionMenu, { controller }),
+    controller.panel === "settings" ? /* @__PURE__ */ jsx23(SettingsSheet, { controller, isOpen: true, onClose: controller.closePanel }) : /* @__PURE__ */ jsx23(SpacePanelSheet, { controller }),
+    /* @__PURE__ */ jsx23(ReactionPicker, { isOpen: controller.reactionPickerOpen, onClose: () => controller.setReactionPickerOpen(false), onSelect: (reaction) => selectSpaceReaction(controller, reaction) })
+  ] });
+}
+var styles19 = StyleSheet20.create({
+  space: { flex: 1, backgroundColor: Theme.colors.darkCanvas },
+  stage: { flex: 1, width: "100%", overflow: "hidden", justifyContent: "center" },
+  recovery: { alignItems: "center", paddingHorizontal: 16, paddingVertical: 8 },
+  recoveryText: { fontSize: 13, fontWeight: "700" }
+});
+
+// src/components/SpaceView.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+function SpaceView(props) {
+  switch (resolvePlatformVariant()) {
+    case "ios-pad":
+      return /* @__PURE__ */ jsx24(SpaceViewShared, { ...props });
+    case "ios-phone":
+      return /* @__PURE__ */ jsx24(SpaceViewShared, { ...props });
+    case "macos":
+      return /* @__PURE__ */ jsx24(SpaceViewShared, { ...props });
+    case "tvos":
+    case "android":
+    default:
+      return /* @__PURE__ */ jsx24(SpaceViewShared, { ...props });
+  }
+}
+
+// src/components/EntranceView.android.tsx
+import ArrowLeft01Icon from "@hugeicons/core-free-icons/dist/esm/ArrowLeft01Icon";
+import Mic01Icon4 from "@hugeicons/core-free-icons/dist/esm/Mic01Icon";
+import MicOff01Icon7 from "@hugeicons/core-free-icons/dist/esm/MicOff01Icon";
+import UserIcon2 from "@hugeicons/core-free-icons/dist/esm/UserIcon";
+import Video01Icon5 from "@hugeicons/core-free-icons/dist/esm/Video01Icon";
+import VideoOffIcon4 from "@hugeicons/core-free-icons/dist/esm/VideoOffIcon";
+import { HugeiconsIcon as HugeiconsIcon11 } from "@hugeicons/react-native";
+import { KeyboardAvoidingView as KeyboardAvoidingView2, Platform as Platform10, Pressable as Pressable12, StyleSheet as StyleSheet21, Text as Text15, TextInput as TextInput2, View as View20 } from "react-native";
+
+// src/components/native-entrance/useEntranceController.ts
+import { useMemo as useMemo14, useSyncExternalStore as useSyncExternalStore4 } from "react";
+
+// src/hooks/useEntrancePreview.ts
+import { useMemo as useMemo13, useSyncExternalStore as useSyncExternalStore3 } from "react";
+
+// src/hooks/entrance-preview-store.ts
+function stopPreviewTracks(stream) {
+  stream?.getTracks?.().forEach((track) => {
+    try {
+      track.stop();
+    } catch {
+    }
+  });
+}
+function createEntrancePreviewStore(options) {
+  const initialSnapshot = {
+    previewStream: null,
+    previewError: options.enabled && options.simulatorVideoDisabled ? options.simulatorVideoMessage : null
+  };
+  let snapshot = initialSnapshot;
+  let activeStream = null;
+  let requestGeneration = 0;
+  const listeners = /* @__PURE__ */ new Set();
+  const notify = () => {
+    listeners.forEach((listener) => listener());
+  };
+  const reset = () => {
+    requestGeneration += 1;
+    stopPreviewTracks(activeStream);
+    activeStream = null;
+    snapshot = initialSnapshot;
+  };
+  const start = () => {
+    if (!options.enabled || options.simulatorVideoDisabled) return;
+    const generation = ++requestGeneration;
+    void options.getUserMedia({ audio: false, video: { facingMode: "user" } }).then((stream) => {
+      if (generation !== requestGeneration) {
+        stopPreviewTracks(stream);
+        return;
+      }
+      const videoTrack = stream.getVideoTracks?.()[0] ?? null;
+      if (!videoTrack) {
+        stopPreviewTracks(stream);
+        snapshot = { previewStream: null, previewError: "No camera track available" };
+        notify();
+        return;
+      }
+      stopPreviewTracks(activeStream);
+      activeStream = stream;
+      snapshot = { previewStream: stream, previewError: null };
+      notify();
+    }).catch((cause) => {
+      if (generation !== requestGeneration) return;
+      snapshot = {
+        previewStream: null,
+        previewError: cause instanceof Error ? cause.message : "Unable to start camera preview"
+      };
+      notify();
+    });
+  };
+  const subscribe = (listener) => {
+    listeners.add(listener);
+    if (listeners.size === 1) start();
+    return () => {
+      listeners.delete(listener);
+      if (listeners.size !== 0) return;
+      reset();
+    };
+  };
+  return {
+    getSnapshot: () => snapshot,
+    subscribe
+  };
+}
+
+// src/hooks/useEntrancePreview.ts
+function useEntrancePreview(enabled) {
+  const simulatorVideoDisabled = isIosSimulator();
+  const store = useMemo13(
+    () => createEntrancePreviewStore({
+      enabled,
+      simulatorVideoDisabled,
+      simulatorVideoMessage: getIosSimulatorVideoMessage(),
+      getUserMedia: mediaDevices.getUserMedia
+    }),
+    [enabled, simulatorVideoDisabled]
+  );
+  const { previewStream, previewError } = useSyncExternalStore3(store.subscribe, store.getSnapshot, store.getSnapshot);
+  return { previewStream, previewError };
+}
+
+// src/components/native-entrance/entrance-controller-store.ts
+var EntranceControllerStore = class {
+  #snapshot;
+  #listeners = /* @__PURE__ */ new Set();
+  #simulatorMediaDisabled;
+  #joinDisabled;
+  #submitLatch = false;
+  #onJoin;
+  constructor({ displayName, initialAudioEnabled, initialVideoEnabled, simulatorMediaDisabled, joinDisabled, onJoin }) {
+    this.#simulatorMediaDisabled = simulatorMediaDisabled;
+    this.#joinDisabled = joinDisabled;
+    this.#onJoin = onJoin;
+    this.#snapshot = {
+      displayName,
+      audioEnabled: initialAudioEnabled && !simulatorMediaDisabled,
+      videoEnabled: initialVideoEnabled && !simulatorMediaDisabled,
+      isSubmitting: false,
+      isInputFocused: false
+    };
+  }
+  getSnapshot = () => this.#snapshot;
+  subscribe = (listener) => {
+    this.#listeners.add(listener);
+    return () => {
+      this.#listeners.delete(listener);
+    };
+  };
+  update = ({ simulatorMediaDisabled, joinDisabled, onJoin }) => {
+    this.#onJoin = onJoin;
+    if (!this.#simulatorMediaDisabled && simulatorMediaDisabled) {
+      this.#update({ audioEnabled: false, videoEnabled: false });
+    }
+    if (this.#joinDisabled && !joinDisabled) {
+      this.#submitLatch = false;
+      this.#update({ isSubmitting: false });
+    }
+    this.#simulatorMediaDisabled = simulatorMediaDisabled;
+    this.#joinDisabled = joinDisabled;
+  };
+  setDisplayName = (displayName) => {
+    this.#update({ displayName });
+  };
+  setInputFocused = (isInputFocused) => {
+    this.#update({ isInputFocused });
+  };
+  toggleAudio = () => {
+    if (this.#simulatorMediaDisabled) return;
+    this.#update({ audioEnabled: !this.#snapshot.audioEnabled });
+  };
+  toggleVideo = () => {
+    if (this.#simulatorMediaDisabled) return;
+    this.#update({ videoEnabled: !this.#snapshot.videoEnabled });
+  };
+  handleJoin = () => {
+    const displayName = this.#snapshot.displayName.trim();
+    if (!displayName || this.#joinDisabled || this.#snapshot.isSubmitting || this.#submitLatch) return;
+    this.#submitLatch = true;
+    this.#update({ isSubmitting: true });
+    this.#onJoin({
+      displayName,
+      microphoneEnabled: this.#snapshot.audioEnabled,
+      cameraEnabled: this.#snapshot.videoEnabled
+    });
+  };
+  #update(next) {
+    const snapshot = { ...this.#snapshot, ...next };
+    if (snapshot.displayName === this.#snapshot.displayName && snapshot.audioEnabled === this.#snapshot.audioEnabled && snapshot.videoEnabled === this.#snapshot.videoEnabled && snapshot.isSubmitting === this.#snapshot.isSubmitting && snapshot.isInputFocused === this.#snapshot.isInputFocused) {
+      return;
+    }
+    this.#snapshot = snapshot;
+    for (const listener of this.#listeners) listener();
+  }
+};
+
+// src/components/native-entrance/useEntranceController.ts
+function useEntranceController({ displayName = "", initialAudioEnabled = false, initialVideoEnabled = false, joinDisabled = false, onJoin }) {
+  const simulatorMediaDisabled = isIosSimulator();
+  const store = useMemo14(
+    () => new EntranceControllerStore({
+      displayName,
+      initialAudioEnabled,
+      initialVideoEnabled,
+      simulatorMediaDisabled,
+      joinDisabled,
+      onJoin
+    }),
+    []
+  );
+  store.update({
+    simulatorMediaDisabled,
+    joinDisabled,
+    onJoin
+  });
+  const snapshot = useSyncExternalStore4(store.subscribe, store.getSnapshot, store.getSnapshot);
+  const { previewError, previewStream } = useEntrancePreview(snapshot.videoEnabled);
+  return {
+    displayName: snapshot.displayName,
+    audioEnabled: snapshot.audioEnabled,
+    videoEnabled: snapshot.videoEnabled,
+    isSubmitting: snapshot.isSubmitting,
+    isInputFocused: snapshot.isInputFocused,
+    previewError,
+    previewStream,
+    simulatorMediaDisabled,
+    setDisplayName: store.setDisplayName,
+    setInputFocused: store.setInputFocused,
+    toggleAudio: store.toggleAudio,
+    toggleVideo: store.toggleVideo,
+    handleJoin: store.handleJoin
+  };
+}
+
+// src/components/EntranceView.android.tsx
+import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+function EntranceViewAndroid({ spaceName, error, joinDisabled = false, onCancel, ...props }) {
+  const controller = useEntranceController({ ...props, joinDisabled });
+  const theme = useNativeTheme();
+  const canJoin = controller.displayName.trim().length > 0 && !joinDisabled && !controller.isSubmitting;
+  return /* @__PURE__ */ jsx25(KeyboardAvoidingView2, { behavior: Platform10.OS === "ios" ? "padding" : "height", style: [styles20.screen, { backgroundColor: theme.colors.background }], children: /* @__PURE__ */ jsxs18(View20, { style: styles20.content, children: [
+    /* @__PURE__ */ jsxs18(View20, { style: styles20.previewContainer, children: [
+      /* @__PURE__ */ jsxs18(View20, { style: [styles20.previewSurface, { backgroundColor: theme.colors.raisedSurface, borderColor: theme.colors.border }], children: [
+        controller.previewStream && controller.videoEnabled ? /* @__PURE__ */ jsx25(RTCView, { mirror: true, objectFit: "cover", streamURL: controller.previewStream.toURL(), style: styles20.previewVideo, zOrder: 0 }) : /* @__PURE__ */ jsx25(View20, { style: [styles20.avatarContainer, { backgroundColor: theme.colors.insetSurface }], children: /* @__PURE__ */ jsx25(FaceAvatar, { name: controller.displayName, size: 140, textSize: 52 }) }),
+        onCancel ? /* @__PURE__ */ jsx25(Pressable12, { accessibilityLabel: "Cancel and leave Entrance", accessibilityRole: "button", onPress: onCancel, style: ({ pressed }) => [styles20.floatingBack, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }, pressed && styles20.topIconButtonPressed], children: /* @__PURE__ */ jsx25(HugeiconsIcon11, { icon: ArrowLeft01Icon, size: 22, color: theme.colors.foreground }) }) : null
+      ] }),
+      controller.previewError && controller.videoEnabled ? /* @__PURE__ */ jsx25(Text15, { style: styles20.previewError, children: controller.previewError }) : null,
+      controller.simulatorMediaDisabled ? /* @__PURE__ */ jsx25(Text15, { style: styles20.previewHint, children: getIosSimulatorMediaMessage() }) : null
+    ] }),
+    /* @__PURE__ */ jsxs18(View20, { style: [styles20.sheetContainer, { backgroundColor: theme.colors.card, borderColor: theme.colors.border, shadowColor: theme.colors.darkCanvas }], children: [
+      /* @__PURE__ */ jsx25(View20, { style: styles20.sheetHandle }),
+      /* @__PURE__ */ jsx25(View20, { style: styles20.sheetHeader, children: /* @__PURE__ */ jsx25(Text15, { style: [styles20.spaceName, { color: theme.colors.foreground }], numberOfLines: 1, children: spaceName }) }),
+      /* @__PURE__ */ jsxs18(View20, { style: [styles20.inputCard, { backgroundColor: theme.colors.surface, borderColor: controller.isInputFocused ? theme.colors.ring : theme.colors.border }], children: [
+        /* @__PURE__ */ jsx25(HugeiconsIcon11, { icon: UserIcon2, size: 18, color: controller.isInputFocused ? theme.colors.primary : theme.colors.mutedForeground, style: styles20.inputIcon }),
+        /* @__PURE__ */ jsx25(
+          TextInput2,
+          {
+            onChangeText: controller.setDisplayName,
+            onFocus: () => controller.setInputFocused(true),
+            onBlur: () => controller.setInputFocused(false),
+            placeholder: "Enter your name",
+            placeholderTextColor: theme.colors.mutedForeground,
+            style: [styles20.nameInput, { color: theme.colors.foreground }],
+            value: controller.displayName,
+            maxLength: 30,
+            returnKeyType: "join",
+            onSubmitEditing: controller.handleJoin
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs18(View20, { style: styles20.mediaRow, children: [
+        /* @__PURE__ */ jsx25(
+          Pressable12,
+          {
+            disabled: controller.simulatorMediaDisabled,
+            onPress: controller.toggleAudio,
+            style: ({ pressed }) => [styles20.controlCircle, { backgroundColor: controller.audioEnabled ? theme.colors.controlsBackground : theme.colors.error, borderColor: theme.colors.border }, controller.simulatorMediaDisabled && styles20.toggleCircleDisabled, pressed && styles20.togglePressed],
+            children: /* @__PURE__ */ jsx25(HugeiconsIcon11, { icon: controller.audioEnabled ? Mic01Icon4 : MicOff01Icon7, size: 24, color: theme.colors.primaryForeground })
+          }
+        ),
+        /* @__PURE__ */ jsx25(
+          Pressable12,
+          {
+            disabled: controller.simulatorMediaDisabled,
+            onPress: controller.toggleVideo,
+            style: ({ pressed }) => [styles20.controlCircle, { backgroundColor: controller.videoEnabled ? theme.colors.controlsBackground : theme.colors.error, borderColor: theme.colors.border }, controller.simulatorMediaDisabled && styles20.toggleCircleDisabled, pressed && styles20.togglePressed],
+            children: /* @__PURE__ */ jsx25(HugeiconsIcon11, { icon: controller.videoEnabled ? Video01Icon5 : VideoOffIcon4, size: 24, color: theme.colors.primaryForeground })
+          }
+        )
+      ] }),
+      error ? /* @__PURE__ */ jsx25(Text15, { style: [styles20.globalError, { color: theme.colors.error }], children: error }) : null,
+      /* @__PURE__ */ jsx25(Pressable12, { disabled: !canJoin, onPress: controller.handleJoin, style: ({ pressed }) => [styles20.joinButton, { backgroundColor: canJoin ? theme.colors.primary : theme.colors.muted }, !canJoin && styles20.joinButtonDisabled, pressed && styles20.togglePressed], children: /* @__PURE__ */ jsx25(Text15, { style: [styles20.joinButtonText, { color: theme.colors.primaryForeground }], children: controller.isSubmitting || joinDisabled ? "Joining..." : "Enter Space" }) })
+    ] })
+  ] }) });
+}
+var styles20 = StyleSheet21.create({
+  screen: {
+    flex: 1,
+    backgroundColor: Theme.colors.background
+  },
+  content: {
+    flex: 1
+  },
+  floatingBack: {
+    position: "absolute",
+    top: Platform10.OS === "ios" ? 24 : 20,
+    left: 20,
+    width: 42,
+    height: 42,
+    borderRadius: 21,
+    backgroundColor: Theme.colors.darkOverlay40,
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 10,
+    borderWidth: 1,
+    borderColor: Theme.colors.whiteOverlay10
+  },
+  previewContainer: {
+    flex: 1,
+    justifyContent: "center",
+    paddingTop: Platform10.OS === "ios" ? 10 : 0,
+    marginBottom: 0
+  },
+  previewSurface: {
+    width: "100%",
+    aspectRatio: 0.72,
+    backgroundColor: Theme.colors.raisedSurface,
+    borderRadius: 32,
+    alignSelf: "center",
+    overflow: "hidden",
+    position: "relative",
+    borderWidth: 1,
+    borderColor: Theme.colors.whiteOverlay06
+  },
+  previewVideo: {
+    ...StyleSheet21.absoluteFillObject
+  },
+  avatarContainer: {
+    ...StyleSheet21.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: Theme.colors.insetSurface
+  },
+  togglePressed: {
+    opacity: 0.7,
+    transform: [{ scale: 0.9 }]
+  },
+  previewError: {
+    color: Theme.colors.error,
+    fontSize: 12,
+    marginTop: 10,
+    textAlign: "center",
+    fontWeight: "600",
+    paddingHorizontal: 24
+  },
+  previewHint: {
+    color: Theme.colors.mutedForeground,
+    fontSize: 12,
+    marginTop: 10,
+    textAlign: "center",
+    lineHeight: 18,
+    paddingHorizontal: 24
+  },
+  sheetContainer: {
+    backgroundColor: Theme.colors.elevatedSurface,
+    borderTopLeftRadius: 32,
+    borderTopRightRadius: 32,
+    paddingHorizontal: 24,
+    paddingTop: 16,
+    paddingBottom: Platform10.OS === "ios" ? 44 : 32,
+    gap: 20,
+    borderTopWidth: 1,
+    borderColor: Theme.colors.whiteOverlay08,
+    shadowColor: Theme.colors.darkCanvas,
+    shadowOffset: { width: 0, height: -12 },
+    shadowOpacity: 0.3,
+    shadowRadius: 16,
+    elevation: 20
+  },
+  sheetHandle: {
+    width: 36,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: Theme.colors.whiteOverlay10,
+    alignSelf: "center",
+    marginBottom: 8
+  },
+  sheetHeader: {
+    alignItems: "center",
+    marginBottom: 4
+  },
+  spaceName: {
+    color: Theme.colors.foreground,
+    fontSize: 22,
+    fontWeight: "800",
+    textAlign: "center",
+    letterSpacing: -0.6
+  },
+  inputCard: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: Theme.colors.whiteOverlay04,
+    borderRadius: 18,
+    paddingHorizontal: 16,
+    height: 56,
+    borderWidth: 1,
+    borderColor: Theme.colors.whiteOverlay08
+  },
+  inputCardFocused: {
+    borderColor: Theme.colors.primary,
+    backgroundColor: Theme.colors.accentOverlay04
+  },
+  inputIcon: {
+    marginRight: 24
+  },
+  nameInput: {
+    flex: 1,
+    color: Theme.colors.onDark,
+    fontSize: 16,
+    fontWeight: "600",
+    padding: 0
+  },
+  mediaRow: {
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: 20
+  },
+  controlCircle: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    backgroundColor: Theme.colors.whiteOverlay06,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1,
+    borderColor: Theme.colors.whiteOverlay10
+  },
+  toggleCircleOff: {
+    backgroundColor: Theme.colors.dangerStrong,
+    borderColor: Theme.colors.dangerStrong
+  },
+  toggleCircleDisabled: {
+    opacity: 0.45
+  },
+  joinButton: {
+    width: "100%",
+    height: 58,
+    borderRadius: 18,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  joinButtonDisabled: {
+    opacity: 0.6
+  },
+  joinButtonText: {
+    color: Theme.colors.onDark,
+    fontSize: 16,
+    fontWeight: "700"
+  },
+  globalError: {
+    color: Theme.colors.error,
+    fontSize: 13,
+    fontWeight: "600",
+    textAlign: "center"
+  },
+  topIconButtonPressed: {
+    opacity: 0.6,
+    transform: [{ scale: 0.92 }]
+  }
+});
+
+// src/components/EntranceView.ios-pad.tsx
+import ArrowLeft01Icon2 from "@hugeicons/core-free-icons/dist/esm/ArrowLeft01Icon";
+import Mic01Icon5 from "@hugeicons/core-free-icons/dist/esm/Mic01Icon";
+import MicOff01Icon8 from "@hugeicons/core-free-icons/dist/esm/MicOff01Icon";
+import Video01Icon6 from "@hugeicons/core-free-icons/dist/esm/Video01Icon";
+import VideoOffIcon5 from "@hugeicons/core-free-icons/dist/esm/VideoOffIcon";
+import ArrowRight02Icon from "@hugeicons/core-free-icons/dist/esm/ArrowRight02Icon";
+import CancelCircleIcon2 from "@hugeicons/core-free-icons/dist/esm/CancelCircleIcon";
+import { HugeiconsIcon as HugeiconsIcon12 } from "@hugeicons/react-native";
+import { KeyboardAvoidingView as KeyboardAvoidingView3, Platform as Platform11, Pressable as Pressable13, StyleSheet as StyleSheet22, Text as Text16, TextInput as TextInput3, View as View21, Animated, ActivityIndicator as ActivityIndicator2 } from "react-native";
+
+// src/components/native-animation-controller.ts
+function createAnimationRefController(createAnimations) {
+  let attached = false;
+  let animations = [];
+  return (node) => {
+    if (node === null) {
+      if (!attached) {
+        return;
+      }
+      attached = false;
+      for (const animation of animations) {
+        animation.stop();
+      }
+      animations = [];
+      return;
+    }
+    if (attached) {
+      return;
+    }
+    attached = true;
+    animations = createAnimations();
+    for (const animation of animations) {
+      animation.start();
+    }
+  };
+}
+
+// src/components/EntranceView.ios-pad.tsx
+import { useRef as useRef4 } from "react";
+import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+function EntranceViewIosPad({ spaceName, error, joinDisabled = false, onCancel, ...props }) {
+  const controller = useEntranceController({ ...props, joinDisabled });
+  const theme = useNativeTheme();
+  const canRenderPreview = hasRtcVideoView();
+  const entryAnim = useRef4(new Animated.Value(0)).current;
+  const islandAnim = useRef4(new Animated.Value(0)).current;
+  const animationRef = useRef4(null);
+  const attachEntryAnimation = animationRef.current ?? (animationRef.current = createAnimationRefController(() => [
+    Animated.stagger(300, [
+      Animated.spring(entryAnim, {
+        toValue: 1,
+        tension: 20,
+        friction: 8,
+        useNativeDriver: true
+      }),
+      Animated.spring(islandAnim, {
+        toValue: 1,
+        tension: 25,
+        friction: 9,
+        useNativeDriver: true
+      })
+    ])
+  ]));
+  const canJoin = controller.displayName.trim().length > 0 && !joinDisabled && !controller.isSubmitting;
+  const showPreview = Boolean(controller.previewStream && controller.videoEnabled && canRenderPreview);
+  const previewStreamURL = showPreview && controller.previewStream ? controller.previewStream.toURL() : null;
+  return /* @__PURE__ */ jsxs19(KeyboardAvoidingView3, { behavior: Platform11.OS === "ios" ? "padding" : "height", style: [styles21.screen, { backgroundColor: theme.colors.background }], children: [
+    /* @__PURE__ */ jsxs19(View21, { style: [styles21.immersiveContainer, { backgroundColor: theme.colors.darkCanvas }], children: [
+      previewStreamURL ? /* @__PURE__ */ jsx26(RtcVideoView, { mirror: true, objectFit: "cover", streamURL: previewStreamURL, style: styles21.fullScreenVideo, zOrder: -1 }) : /* @__PURE__ */ jsx26(View21, { style: [styles21.immersiveAvatarContainer, { backgroundColor: theme.colors.background }], children: /* @__PURE__ */ jsx26(FaceAvatar, { name: controller.displayName, size: 200, textSize: 80 }) }),
+      showPreview ? /* @__PURE__ */ jsx26(View21, { style: styles21.frostOverlay }) : null
+    ] }),
+    /* @__PURE__ */ jsxs19(View21, { style: styles21.hudLayer, children: [
+      /* @__PURE__ */ jsxs19(View21, { style: styles21.topHud, children: [
+        onCancel ? /* @__PURE__ */ jsx26(Pressable13, { accessibilityLabel: "Cancel and leave Entrance", accessibilityRole: "button", onPress: onCancel, style: ({ pressed }) => [styles21.backPuck, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }, pressed && styles21.pressed], children: /* @__PURE__ */ jsx26(HugeiconsIcon12, { icon: ArrowLeft01Icon2, size: 22, color: theme.colors.foreground }) }) : null,
+        /* @__PURE__ */ jsx26(View21, { style: styles21.spaceInfo, children: /* @__PURE__ */ jsx26(Text16, { style: [styles21.spaceTitle, { color: theme.colors.foreground }], numberOfLines: 1, children: spaceName }) }),
+        /* @__PURE__ */ jsx26(View21, { style: styles21.topHudSpacer })
+      ] }),
+      /* @__PURE__ */ jsx26(View21, { style: styles21.flexFill }),
+      /* @__PURE__ */ jsxs19(
+        Animated.View,
+        {
+          ref: attachEntryAnimation,
+          style: [
+            styles21.bottomHud,
+            {
+              opacity: islandAnim,
+              transform: [{ translateY: islandAnim.interpolate({ inputRange: [0, 1], outputRange: [40, 0] }) }]
+            }
+          ],
+          children: [
+            /* @__PURE__ */ jsxs19(View21, { style: [styles21.launchPad, { backgroundColor: theme.colors.card, borderColor: theme.colors.border, shadowColor: theme.colors.darkCanvas }], children: [
+              /* @__PURE__ */ jsxs19(View21, { style: styles21.mediaGroup, children: [
+                /* @__PURE__ */ jsx26(
+                  Pressable13,
+                  {
+                    accessibilityLabel: controller.audioEnabled ? "Mute microphone" : "Unmute microphone",
+                    accessibilityRole: "button",
+                    accessibilityState: { disabled: controller.simulatorMediaDisabled, selected: controller.audioEnabled },
+                    disabled: controller.simulatorMediaDisabled,
+                    onPress: controller.toggleAudio,
+                    style: ({ pressed }) => [styles21.mediaToggle, { backgroundColor: controller.audioEnabled ? theme.colors.controlsBackground : theme.colors.error, borderColor: theme.colors.border }, pressed && styles21.pressed],
+                    children: /* @__PURE__ */ jsx26(HugeiconsIcon12, { icon: controller.audioEnabled ? Mic01Icon5 : MicOff01Icon8, size: 22, color: theme.colors.primaryForeground })
+                  }
+                ),
+                /* @__PURE__ */ jsx26(
+                  Pressable13,
+                  {
+                    accessibilityLabel: controller.videoEnabled ? "Turn camera off" : "Turn camera on",
+                    accessibilityRole: "button",
+                    accessibilityState: { disabled: controller.simulatorMediaDisabled, selected: controller.videoEnabled },
+                    disabled: controller.simulatorMediaDisabled,
+                    onPress: controller.toggleVideo,
+                    style: ({ pressed }) => [styles21.mediaToggle, { backgroundColor: controller.videoEnabled ? theme.colors.controlsBackground : theme.colors.error, borderColor: theme.colors.border }, pressed && styles21.pressed],
+                    children: /* @__PURE__ */ jsx26(HugeiconsIcon12, { icon: controller.videoEnabled ? Video01Icon6 : VideoOffIcon5, size: 22, color: theme.colors.primaryForeground })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx26(View21, { style: styles21.islandDivider }),
+              /* @__PURE__ */ jsxs19(View21, { style: [styles21.identityArea, { backgroundColor: theme.colors.surface, borderColor: controller.isInputFocused ? theme.colors.ring : theme.colors.border }, controller.isInputFocused && styles21.identityAreaFocused], children: [
+                /* @__PURE__ */ jsx26(
+                  TextInput3,
+                  {
+                    accessibilityLabel: "Your name",
+                    onChangeText: controller.setDisplayName,
+                    onFocus: () => controller.setInputFocused(true),
+                    onBlur: () => controller.setInputFocused(false),
+                    placeholder: "Enter your name to join",
+                    placeholderTextColor: theme.colors.mutedForeground,
+                    style: [styles21.immersiveInput, { color: theme.colors.foreground }],
+                    value: controller.displayName,
+                    maxLength: 30,
+                    returnKeyType: "join",
+                    onSubmitEditing: controller.handleJoin
+                  }
+                ),
+                controller.displayName.length > 0 && /* @__PURE__ */ jsx26(Pressable13, { accessibilityLabel: "Clear name", accessibilityRole: "button", onPress: () => controller.setDisplayName(""), style: styles21.clearAction, children: /* @__PURE__ */ jsx26(HugeiconsIcon12, { icon: CancelCircleIcon2, size: 18, color: theme.colors.mutedForeground }) })
+              ] }),
+              /* @__PURE__ */ jsx26(
+                Pressable13,
+                {
+                  accessibilityLabel: "Enter Space",
+                  accessibilityRole: "button",
+                  accessibilityState: { disabled: !canJoin },
+                  disabled: !canJoin,
+                  onPress: controller.handleJoin,
+                  style: ({ pressed }) => [
+                    styles21.joinArrow,
+                    canJoin && {
+                      backgroundColor: theme.colors.primary,
+                      shadowColor: theme.colors.primary,
+                      shadowOffset: { width: 0, height: 4 },
+                      shadowOpacity: 0.3,
+                      shadowRadius: 8
+                    },
+                    pressed && canJoin && styles21.pressed,
+                    controller.isSubmitting && styles21.disabled
+                  ],
+                  children: controller.isSubmitting ? /* @__PURE__ */ jsx26(ActivityIndicator2, { color: theme.colors.primaryForeground, size: "small" }) : /* @__PURE__ */ jsx26(HugeiconsIcon12, { icon: ArrowRight02Icon, size: 28, color: canJoin ? theme.colors.primaryForeground : theme.colors.mutedForeground })
+                }
+              )
+            ] }),
+            error ? /* @__PURE__ */ jsx26(Text16, { style: [styles21.immersiveError, { color: theme.colors.error }], children: error }) : null,
+            controller.simulatorMediaDisabled && /* @__PURE__ */ jsx26(Text16, { style: [styles21.simulatorHintText, { color: theme.colors.mutedForeground }], children: getIosSimulatorMediaMessage() })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+var styles21 = StyleSheet22.create({
+  screen: {
+    flex: 1,
+    backgroundColor: Theme.colors.darkCanvas
+  },
+  immersiveContainer: {
+    ...StyleSheet22.absoluteFillObject,
+    backgroundColor: Theme.colors.darkCanvas
+  },
+  fullScreenVideo: {
+    ...StyleSheet22.absoluteFillObject
+  },
+  immersiveAvatarContainer: {
+    ...StyleSheet22.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: Theme.colors.background
+  },
+  frostOverlay: {
+    ...StyleSheet22.absoluteFillObject,
+    backgroundColor: Theme.colors.darkOverlay30
+  },
+  hudLayer: {
+    flex: 1,
+    paddingHorizontal: 60,
+    paddingTop: 40,
+    paddingBottom: 60
+  },
+  flexFill: {
+    flex: 1
+  },
+  topHud: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  backPuck: {
+    width: 52,
+    height: 52,
+    borderRadius: 26,
+    backgroundColor: Theme.colors.whiteOverlay08,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1,
+    borderColor: Theme.colors.whiteOverlay10
+  },
+  spaceInfo: {
+    alignItems: "center"
+  },
+  spaceTitle: {
+    color: Theme.colors.onDark,
+    fontSize: 28,
+    fontWeight: "900",
+    letterSpacing: -0.5
+  },
+  topHudSpacer: {
+    width: 52
+  },
+  bottomHud: {
+    width: "100%",
+    maxWidth: 700,
+    alignSelf: "center",
+    gap: 16
+  },
+  launchPad: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: Theme.colors.canvasOverlay85,
+    borderRadius: 40,
+    borderWidth: 1,
+    borderColor: Theme.colors.whiteOverlay12,
+    padding: 8,
+    height: 80,
+    shadowColor: Theme.colors.darkCanvas,
+    shadowOffset: { width: 0, height: 12 },
+    shadowOpacity: 0.5,
+    shadowRadius: 20,
+    elevation: 20
+  },
+  mediaGroup: {
+    flexDirection: "row",
+    gap: 8,
+    paddingLeft: 4
+  },
+  mediaToggle: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    backgroundColor: Theme.colors.whiteOverlay06,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1,
+    borderColor: Theme.colors.whiteOverlay05
+  },
+  toggleOff: {
+    backgroundColor: Theme.colors.error,
+    borderColor: Theme.colors.error
+  },
+  islandDivider: {
+    width: 1,
+    height: 32,
+    backgroundColor: Theme.colors.whiteOverlay10,
+    marginHorizontal: 16
+  },
+  identityArea: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    height: "100%",
+    paddingHorizontal: 8
+  },
+  identityAreaFocused: {},
+  immersiveInput: {
+    flex: 1,
+    color: Theme.colors.onDark,
+    fontSize: 20,
+    fontWeight: "700",
+    padding: 0,
+    letterSpacing: -0.5
+  },
+  clearAction: {
+    padding: 10
+  },
+  joinArrow: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    backgroundColor: Theme.colors.whiteOverlay05,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  immersiveError: {
+    color: Theme.colors.error,
+    fontSize: 14,
+    fontWeight: "700",
+    textAlign: "center",
+    marginTop: 8
+  },
+  simulatorHintText: {
+    color: Theme.colors.whiteOverlay50,
+    fontSize: 12,
+    textAlign: "center",
+    fontWeight: "600"
+  },
+  pressed: {
+    opacity: 0.7,
+    transform: [{ scale: 0.94 }]
+  },
+  disabled: {
+    opacity: 0.5
+  }
+});
+
+// src/components/EntranceView.ios-phone.tsx
+import ArrowLeft01Icon3 from "@hugeicons/core-free-icons/dist/esm/ArrowLeft01Icon";
+import Mic01Icon6 from "@hugeicons/core-free-icons/dist/esm/Mic01Icon";
+import MicOff01Icon9 from "@hugeicons/core-free-icons/dist/esm/MicOff01Icon";
+import UserIcon3 from "@hugeicons/core-free-icons/dist/esm/UserIcon";
+import Video01Icon7 from "@hugeicons/core-free-icons/dist/esm/Video01Icon";
+import VideoOffIcon6 from "@hugeicons/core-free-icons/dist/esm/VideoOffIcon";
+import { HugeiconsIcon as HugeiconsIcon13 } from "@hugeicons/react-native";
+import { KeyboardAvoidingView as KeyboardAvoidingView4, Platform as Platform12, Pressable as Pressable14, StyleSheet as StyleSheet23, Text as Text17, TextInput as TextInput4, View as View22 } from "react-native";
+import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+function EntranceViewIosPhone({ spaceName, error, joinDisabled = false, onCancel, ...props }) {
+  const controller = useEntranceController({ ...props, joinDisabled });
+  const theme = useNativeTheme();
+  const canJoin = controller.displayName.trim().length > 0 && !joinDisabled && !controller.isSubmitting;
+  return /* @__PURE__ */ jsx27(KeyboardAvoidingView4, { behavior: Platform12.OS === "ios" ? "padding" : "height", style: [styles22.screen, { backgroundColor: theme.colors.background }], children: /* @__PURE__ */ jsxs20(View22, { style: styles22.content, children: [
+    /* @__PURE__ */ jsxs20(View22, { style: styles22.previewContainer, children: [
+      /* @__PURE__ */ jsxs20(View22, { style: [styles22.previewSurface, { backgroundColor: theme.colors.raisedSurface, borderColor: theme.colors.border }], children: [
+        controller.previewStream && controller.videoEnabled ? /* @__PURE__ */ jsx27(RTCView, { mirror: true, objectFit: "cover", streamURL: controller.previewStream.toURL(), style: styles22.previewVideo, zOrder: 0 }) : /* @__PURE__ */ jsx27(View22, { style: [styles22.avatarContainer, { backgroundColor: theme.colors.insetSurface }], children: /* @__PURE__ */ jsx27(FaceAvatar, { name: controller.displayName, size: 140, textSize: 52 }) }),
+        onCancel ? /* @__PURE__ */ jsx27(Pressable14, { accessibilityLabel: "Cancel and leave Entrance", accessibilityRole: "button", onPress: onCancel, style: ({ pressed }) => [styles22.floatingBack, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }, pressed && styles22.topIconButtonPressed], children: /* @__PURE__ */ jsx27(HugeiconsIcon13, { icon: ArrowLeft01Icon3, size: 22, color: theme.colors.foreground }) }) : null
+      ] }),
+      controller.previewError && controller.videoEnabled ? /* @__PURE__ */ jsx27(Text17, { style: styles22.previewError, children: controller.previewError }) : null,
+      controller.simulatorMediaDisabled ? /* @__PURE__ */ jsx27(Text17, { style: styles22.previewHint, children: getIosSimulatorMediaMessage() }) : null
+    ] }),
+    /* @__PURE__ */ jsxs20(View22, { style: [styles22.sheetContainer, { backgroundColor: theme.colors.card, borderColor: theme.colors.border, shadowColor: theme.colors.darkCanvas }], children: [
+      /* @__PURE__ */ jsx27(View22, { style: styles22.sheetHandle }),
+      /* @__PURE__ */ jsx27(View22, { style: styles22.sheetHeader, children: /* @__PURE__ */ jsx27(Text17, { style: [styles22.spaceName, { color: theme.colors.foreground }], numberOfLines: 1, children: spaceName }) }),
+      /* @__PURE__ */ jsxs20(View22, { style: [styles22.inputCard, { backgroundColor: theme.colors.surface, borderColor: controller.isInputFocused ? theme.colors.ring : theme.colors.border }], children: [
+        /* @__PURE__ */ jsx27(HugeiconsIcon13, { icon: UserIcon3, size: 18, color: controller.isInputFocused ? theme.colors.primary : theme.colors.mutedForeground, style: styles22.inputIcon }),
+        /* @__PURE__ */ jsx27(
+          TextInput4,
+          {
+            onChangeText: controller.setDisplayName,
+            onFocus: () => controller.setInputFocused(true),
+            onBlur: () => controller.setInputFocused(false),
+            placeholder: "Enter your name",
+            placeholderTextColor: theme.colors.mutedForeground,
+            style: [styles22.nameInput, { color: theme.colors.foreground }],
+            value: controller.displayName,
+            maxLength: 30,
+            returnKeyType: "join",
+            onSubmitEditing: controller.handleJoin
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs20(View22, { style: styles22.mediaRow, children: [
+        /* @__PURE__ */ jsx27(
+          Pressable14,
+          {
+            disabled: controller.simulatorMediaDisabled,
+            onPress: controller.toggleAudio,
+            style: ({ pressed }) => [styles22.controlCircle, { backgroundColor: controller.audioEnabled ? theme.colors.controlsBackground : theme.colors.error, borderColor: theme.colors.border }, controller.simulatorMediaDisabled && styles22.toggleCircleDisabled, pressed && styles22.togglePressed],
+            children: /* @__PURE__ */ jsx27(HugeiconsIcon13, { icon: controller.audioEnabled ? Mic01Icon6 : MicOff01Icon9, size: 24, color: theme.colors.primaryForeground })
+          }
+        ),
+        /* @__PURE__ */ jsx27(
+          Pressable14,
+          {
+            disabled: controller.simulatorMediaDisabled,
+            onPress: controller.toggleVideo,
+            style: ({ pressed }) => [styles22.controlCircle, { backgroundColor: controller.videoEnabled ? theme.colors.controlsBackground : theme.colors.error, borderColor: theme.colors.border }, controller.simulatorMediaDisabled && styles22.toggleCircleDisabled, pressed && styles22.togglePressed],
+            children: /* @__PURE__ */ jsx27(HugeiconsIcon13, { icon: controller.videoEnabled ? Video01Icon7 : VideoOffIcon6, size: 24, color: theme.colors.primaryForeground })
+          }
+        )
+      ] }),
+      error ? /* @__PURE__ */ jsx27(Text17, { style: [styles22.globalError, { color: theme.colors.error }], children: error }) : null,
+      /* @__PURE__ */ jsx27(Pressable14, { disabled: !canJoin, onPress: controller.handleJoin, style: ({ pressed }) => [styles22.joinButton, { backgroundColor: canJoin ? theme.colors.primary : theme.colors.muted }, !canJoin && styles22.joinButtonDisabled, pressed && styles22.togglePressed], children: /* @__PURE__ */ jsx27(Text17, { style: [styles22.joinButtonText, { color: theme.colors.primaryForeground }], children: controller.isSubmitting || joinDisabled ? "Joining..." : "Enter Space" }) })
+    ] })
+  ] }) });
+}
+var styles22 = StyleSheet23.create({
+  screen: {
+    flex: 1,
+    backgroundColor: Theme.colors.background
+  },
+  content: {
+    flex: 1
+  },
+  floatingBack: {
+    position: "absolute",
+    left: 20,
+    width: 42,
+    height: 42,
+    borderRadius: 21,
+    backgroundColor: Theme.colors.darkOverlay40,
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 10,
+    borderWidth: 1,
+    borderColor: Theme.colors.whiteOverlay10
+  },
+  previewContainer: {
+    flex: 1,
+    justifyContent: "center",
+    paddingTop: Platform12.OS === "ios" ? 10 : 0,
+    marginBottom: 0
+  },
+  previewSurface: {
+    width: "100%",
+    aspectRatio: 0.72,
+    backgroundColor: Theme.colors.raisedSurface,
+    borderRadius: 32,
+    alignSelf: "center",
+    overflow: "hidden",
+    position: "relative",
+    borderWidth: 1,
+    borderColor: Theme.colors.whiteOverlay06
+  },
+  previewVideo: {
+    ...StyleSheet23.absoluteFillObject
+  },
+  avatarContainer: {
+    ...StyleSheet23.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: Theme.colors.insetSurface
+  },
+  togglePressed: {
+    opacity: 0.7,
+    transform: [{ scale: 0.9 }]
+  },
+  previewError: {
+    color: Theme.colors.error,
+    fontSize: 12,
+    marginTop: 10,
+    textAlign: "center",
+    fontWeight: "600",
+    paddingHorizontal: 24
+  },
+  previewHint: {
+    color: Theme.colors.mutedForeground,
+    fontSize: 12,
+    marginTop: 10,
+    textAlign: "center",
+    lineHeight: 18,
+    paddingHorizontal: 24
+  },
+  sheetContainer: {
+    backgroundColor: Theme.colors.elevatedSurface,
+    borderTopLeftRadius: 32,
+    borderTopRightRadius: 32,
+    paddingHorizontal: 24,
+    paddingTop: 16,
+    paddingBottom: Platform12.OS === "ios" ? 44 : 32,
+    gap: 20,
+    borderTopWidth: 1,
+    borderColor: Theme.colors.whiteOverlay08,
+    shadowColor: Theme.colors.darkCanvas,
+    shadowOffset: { width: 0, height: -12 },
+    shadowOpacity: 0.3,
+    shadowRadius: 16,
+    elevation: 20
+  },
+  sheetHandle: {
+    width: 36,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: Theme.colors.whiteOverlay10,
+    alignSelf: "center",
+    marginBottom: 8
+  },
+  sheetHeader: {
+    alignItems: "center",
+    marginBottom: 4
+  },
+  spaceName: {
+    color: Theme.colors.foreground,
+    fontSize: 22,
+    fontWeight: "800",
+    textAlign: "center",
+    letterSpacing: -0.6
+  },
+  inputCard: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: Theme.colors.whiteOverlay04,
+    borderRadius: 18,
+    paddingHorizontal: 16,
+    height: 56,
+    borderWidth: 1,
+    borderColor: Theme.colors.whiteOverlay08
+  },
+  inputCardFocused: {
+    borderColor: Theme.colors.primary,
+    backgroundColor: Theme.colors.accentOverlay04
+  },
+  inputIcon: {
+    marginRight: 24
+  },
+  nameInput: {
+    flex: 1,
+    color: Theme.colors.onDark,
+    fontSize: 16,
+    fontWeight: "600",
+    padding: 0
+  },
+  mediaRow: {
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: 20
+  },
+  controlCircle: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    backgroundColor: Theme.colors.whiteOverlay06,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1,
+    borderColor: Theme.colors.whiteOverlay10
+  },
+  toggleCircleOff: {
+    backgroundColor: Theme.colors.dangerStrong,
+    borderColor: Theme.colors.dangerStrong
+  },
+  toggleCircleDisabled: {
+    opacity: 0.45
+  },
+  joinButton: {
+    width: "100%",
+    height: 58,
+    borderRadius: 18,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  joinButtonDisabled: {
+    opacity: 0.6
+  },
+  joinButtonText: {
+    color: Theme.colors.onDark,
+    fontSize: 16,
+    fontWeight: "700"
+  },
+  globalError: {
+    color: Theme.colors.error,
+    fontSize: 13,
+    fontWeight: "600",
+    textAlign: "center"
+  },
+  topIconButtonPressed: {
+    opacity: 0.6,
+    transform: [{ scale: 0.92 }]
+  }
+});
+
+// src/components/EntranceView.macos.tsx
+import ArrowLeft01Icon4 from "@hugeicons/core-free-icons/dist/esm/ArrowLeft01Icon";
+import Mic01Icon7 from "@hugeicons/core-free-icons/dist/esm/Mic01Icon";
+import MicOff01Icon10 from "@hugeicons/core-free-icons/dist/esm/MicOff01Icon";
+import UserIcon4 from "@hugeicons/core-free-icons/dist/esm/UserIcon";
+import Video01Icon8 from "@hugeicons/core-free-icons/dist/esm/Video01Icon";
+import VideoOffIcon7 from "@hugeicons/core-free-icons/dist/esm/VideoOffIcon";
+import { HugeiconsIcon as HugeiconsIcon14 } from "@hugeicons/react-native";
+import { KeyboardAvoidingView as KeyboardAvoidingView5, Platform as Platform13, Pressable as Pressable15, StyleSheet as StyleSheet24, Text as Text18, TextInput as TextInput5, View as View23 } from "react-native";
+import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+function EntranceViewMacos({ spaceName, error, joinDisabled = false, onCancel, ...props }) {
+  const controller = useEntranceController({ ...props, joinDisabled });
+  const theme = useNativeTheme();
+  const canJoin = controller.displayName.trim().length > 0 && !joinDisabled && !controller.isSubmitting;
+  const canRenderPreview = hasRtcVideoView();
+  const showPreview = Boolean(controller.previewStream && controller.videoEnabled && canRenderPreview);
+  const previewStreamURL = showPreview && controller.previewStream ? controller.previewStream.toURL() : null;
+  const previewStatusMessage = controller.videoEnabled && controller.previewStream && !canRenderPreview ? "Camera preview is unavailable on this device." : controller.previewError;
+  return /* @__PURE__ */ jsx28(KeyboardAvoidingView5, { behavior: Platform13.OS === "ios" ? "padding" : "height", style: [styles23.screen, { backgroundColor: theme.colors.background }], children: /* @__PURE__ */ jsxs21(View23, { style: styles23.content, children: [
+    /* @__PURE__ */ jsxs21(View23, { style: styles23.previewContainer, children: [
+      /* @__PURE__ */ jsxs21(View23, { style: [styles23.previewSurface, { backgroundColor: theme.colors.raisedSurface, borderColor: theme.colors.border }], children: [
+        previewStreamURL ? /* @__PURE__ */ jsx28(RtcVideoView, { mirror: true, objectFit: "cover", streamURL: previewStreamURL, style: styles23.previewVideo, zOrder: 0 }) : /* @__PURE__ */ jsx28(View23, { style: [styles23.avatarContainer, { backgroundColor: theme.colors.insetSurface }], children: /* @__PURE__ */ jsx28(FaceAvatar, { name: controller.displayName, size: 140, textSize: 52 }) }),
+        onCancel ? /* @__PURE__ */ jsx28(Pressable15, { accessibilityLabel: "Cancel and leave Entrance", accessibilityRole: "button", onPress: onCancel, style: ({ pressed }) => [styles23.floatingBack, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }, pressed && styles23.topIconButtonPressed], children: /* @__PURE__ */ jsx28(HugeiconsIcon14, { icon: ArrowLeft01Icon4, size: 22, color: theme.colors.foreground }) }) : null
+      ] }),
+      previewStatusMessage ? /* @__PURE__ */ jsx28(Text18, { style: styles23.previewError, children: previewStatusMessage }) : null,
+      controller.simulatorMediaDisabled ? /* @__PURE__ */ jsx28(Text18, { style: styles23.previewHint, children: getIosSimulatorMediaMessage() }) : null
+    ] }),
+    /* @__PURE__ */ jsxs21(View23, { style: [styles23.sheetContainer, { backgroundColor: theme.colors.card, borderColor: theme.colors.border, shadowColor: theme.colors.darkCanvas }], children: [
+      /* @__PURE__ */ jsx28(View23, { style: styles23.sheetHandle }),
+      /* @__PURE__ */ jsx28(View23, { style: styles23.sheetHeader, children: /* @__PURE__ */ jsx28(Text18, { style: [styles23.spaceName, { color: theme.colors.foreground }], numberOfLines: 1, children: spaceName }) }),
+      /* @__PURE__ */ jsxs21(View23, { style: [styles23.inputCard, { backgroundColor: theme.colors.surface, borderColor: controller.isInputFocused ? theme.colors.ring : theme.colors.border }], children: [
+        /* @__PURE__ */ jsx28(HugeiconsIcon14, { icon: UserIcon4, size: 18, color: controller.isInputFocused ? theme.colors.primary : theme.colors.mutedForeground, style: styles23.inputIcon }),
+        /* @__PURE__ */ jsx28(
+          TextInput5,
+          {
+            onChangeText: controller.setDisplayName,
+            onFocus: () => controller.setInputFocused(true),
+            onBlur: () => controller.setInputFocused(false),
+            placeholder: "Enter your name",
+            placeholderTextColor: theme.colors.mutedForeground,
+            style: [styles23.nameInput, { color: theme.colors.foreground }],
+            value: controller.displayName,
+            maxLength: 30,
+            returnKeyType: "join",
+            onSubmitEditing: controller.handleJoin
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs21(View23, { style: styles23.mediaRow, children: [
+        /* @__PURE__ */ jsx28(
+          Pressable15,
+          {
+            disabled: controller.simulatorMediaDisabled,
+            onPress: controller.toggleAudio,
+            style: ({ pressed }) => [styles23.controlCircle, { backgroundColor: controller.audioEnabled ? theme.colors.controlsBackground : theme.colors.error, borderColor: theme.colors.border }, controller.simulatorMediaDisabled && styles23.toggleCircleDisabled, pressed && styles23.togglePressed],
+            children: /* @__PURE__ */ jsx28(HugeiconsIcon14, { icon: controller.audioEnabled ? Mic01Icon7 : MicOff01Icon10, size: 24, color: theme.colors.primaryForeground })
+          }
+        ),
+        /* @__PURE__ */ jsx28(
+          Pressable15,
+          {
+            disabled: controller.simulatorMediaDisabled,
+            onPress: controller.toggleVideo,
+            style: ({ pressed }) => [styles23.controlCircle, { backgroundColor: controller.videoEnabled ? theme.colors.controlsBackground : theme.colors.error, borderColor: theme.colors.border }, controller.simulatorMediaDisabled && styles23.toggleCircleDisabled, pressed && styles23.togglePressed],
+            children: /* @__PURE__ */ jsx28(HugeiconsIcon14, { icon: controller.videoEnabled ? Video01Icon8 : VideoOffIcon7, size: 24, color: theme.colors.primaryForeground })
+          }
+        )
+      ] }),
+      error ? /* @__PURE__ */ jsx28(Text18, { style: [styles23.globalError, { color: theme.colors.error }], children: error }) : null,
+      /* @__PURE__ */ jsx28(Pressable15, { disabled: !canJoin, onPress: controller.handleJoin, style: ({ pressed }) => [styles23.joinButton, { backgroundColor: canJoin ? theme.colors.primary : theme.colors.muted }, !canJoin && styles23.joinButtonDisabled, pressed && styles23.togglePressed], children: /* @__PURE__ */ jsx28(Text18, { style: [styles23.joinButtonText, { color: theme.colors.primaryForeground }], children: controller.isSubmitting || joinDisabled ? "Joining..." : "Enter Space" }) })
+    ] })
+  ] }) });
+}
+var styles23 = StyleSheet24.create({
+  screen: {
+    flex: 1,
+    backgroundColor: Theme.colors.background
+  },
+  content: {
+    flex: 1
+  },
+  floatingBack: {
+    position: "absolute",
+    top: Platform13.OS === "ios" ? 24 : 20,
+    left: 20,
+    width: 42,
+    height: 42,
+    borderRadius: 21,
+    backgroundColor: Theme.colors.darkOverlay40,
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 10,
+    borderWidth: 1,
+    borderColor: Theme.colors.whiteOverlay10
+  },
+  previewContainer: {
+    flex: 1,
+    justifyContent: "center",
+    paddingTop: Platform13.OS === "ios" ? 10 : 0,
+    marginBottom: 0
+  },
+  previewSurface: {
+    width: "100%",
+    aspectRatio: 0.72,
+    backgroundColor: Theme.colors.raisedSurface,
+    borderRadius: 32,
+    alignSelf: "center",
+    overflow: "hidden",
+    position: "relative",
+    borderWidth: 1,
+    borderColor: Theme.colors.whiteOverlay06
+  },
+  previewVideo: {
+    ...StyleSheet24.absoluteFillObject
+  },
+  avatarContainer: {
+    ...StyleSheet24.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: Theme.colors.insetSurface
+  },
+  togglePressed: {
+    opacity: 0.7,
+    transform: [{ scale: 0.9 }]
+  },
+  previewError: {
+    color: Theme.colors.error,
+    fontSize: 12,
+    marginTop: 10,
+    textAlign: "center",
+    fontWeight: "600",
+    paddingHorizontal: 24
+  },
+  previewHint: {
+    color: Theme.colors.mutedForeground,
+    fontSize: 12,
+    marginTop: 10,
+    textAlign: "center",
+    lineHeight: 18,
+    paddingHorizontal: 24
+  },
+  sheetContainer: {
+    backgroundColor: Theme.colors.elevatedSurface,
+    borderTopLeftRadius: 32,
+    borderTopRightRadius: 32,
+    paddingHorizontal: 24,
+    paddingTop: 16,
+    paddingBottom: Platform13.OS === "ios" ? 44 : 32,
+    gap: 20,
+    borderTopWidth: 1,
+    borderColor: Theme.colors.whiteOverlay08,
+    shadowColor: Theme.colors.darkCanvas,
+    shadowOffset: { width: 0, height: -12 },
+    shadowOpacity: 0.3,
+    shadowRadius: 16,
+    elevation: 20
+  },
+  sheetHandle: {
+    width: 36,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: Theme.colors.whiteOverlay10,
+    alignSelf: "center",
+    marginBottom: 8
+  },
+  sheetHeader: {
+    alignItems: "center",
+    marginBottom: 4
+  },
+  spaceName: {
+    color: Theme.colors.foreground,
+    fontSize: 22,
+    fontWeight: "800",
+    textAlign: "center",
+    letterSpacing: -0.6
+  },
+  inputCard: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: Theme.colors.whiteOverlay04,
+    borderRadius: 18,
+    paddingHorizontal: 16,
+    height: 56,
+    borderWidth: 1,
+    borderColor: Theme.colors.whiteOverlay08
+  },
+  inputCardFocused: {
+    borderColor: Theme.colors.primary,
+    backgroundColor: Theme.colors.accentOverlay04
+  },
+  inputIcon: {
+    marginRight: 24
+  },
+  nameInput: {
+    flex: 1,
+    color: Theme.colors.onDark,
+    fontSize: 16,
+    fontWeight: "600",
+    padding: 0
+  },
+  mediaRow: {
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: 20
+  },
+  controlCircle: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    backgroundColor: Theme.colors.whiteOverlay06,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1,
+    borderColor: Theme.colors.whiteOverlay10
+  },
+  toggleCircleOff: {
+    backgroundColor: Theme.colors.dangerStrong,
+    borderColor: Theme.colors.dangerStrong
+  },
+  toggleCircleDisabled: {
+    opacity: 0.45
+  },
+  joinButton: {
+    width: "100%",
+    height: 58,
+    borderRadius: 18,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  joinButtonDisabled: {
+    opacity: 0.6
+  },
+  joinButtonText: {
+    color: Theme.colors.onDark,
+    fontSize: 16,
+    fontWeight: "700"
+  },
+  globalError: {
+    color: Theme.colors.error,
+    fontSize: 13,
+    fontWeight: "600",
+    textAlign: "center"
+  },
+  topIconButtonPressed: {
+    opacity: 0.6,
+    transform: [{ scale: 0.92 }]
+  }
+});
+
+// src/components/EntranceView.tsx
+import { jsx as jsx29 } from "react/jsx-runtime";
+function EntranceView(props) {
+  switch (resolvePlatformVariant()) {
+    case "ios-pad":
+      return /* @__PURE__ */ jsx29(EntranceViewIosPad, { ...props });
+    case "ios-phone":
+      return /* @__PURE__ */ jsx29(EntranceViewIosPhone, { ...props });
+    case "macos":
+      return /* @__PURE__ */ jsx29(EntranceViewMacos, { ...props });
+    case "tvos":
+    case "android":
+    default:
+      return /* @__PURE__ */ jsx29(EntranceViewAndroid, { ...props });
+  }
+}
+
+// src/components/Entrance.tsx
+import { Image as Image3 } from "react-native";
+import { jsx as jsx30 } from "react/jsx-runtime";
+function Entrance({ spaceName, logoUrl, defaultDisplayName, defaults, error, joining = false, onCancel, onJoin }) {
+  return /* @__PURE__ */ jsx30(
+    EntranceView,
+    {
+      error,
+      initialAudioEnabled: defaults?.microphone ?? true,
+      initialVideoEnabled: defaults?.camera ?? true,
+      joinDisabled: joining,
+      logo: logoUrl ? /* @__PURE__ */ jsx30(Image3, { accessibilityLabel: "Chalk", source: { uri: logoUrl }, style: { height: 32, width: 120 } }) : void 0,
+      onCancel,
+      onJoin: ({ displayName, microphoneEnabled, cameraEnabled }) => void onJoin({ displayName, microphone: microphoneEnabled, camera: cameraEnabled }),
+      spaceName,
+      displayName: defaultDisplayName
+    }
+  );
+}
+
+// src/components/Chalk.tsx
+import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
+function Chalk(props) {
+  const suppliedClient = props.client;
+  const space = props.space;
+  const getAccess = props.getAccess;
+  const getAccessRef = useRef5(getAccess);
+  getAccessRef.current = getAccess;
+  const defaults = useRef5(props.defaults).current;
+  const getLatestAccess = useCallback9((...args) => {
+    const currentGetAccess = getAccessRef.current;
+    if (!currentGetAccess) throw new Error("Chalk requires getAccess when it creates the SpaceClient.");
+    return currentGetAccess(...args);
+  }, []);
+  const ownedClient = useMemo15(
+    () => suppliedClient ? null : createNativeSpaceClient({
+      space,
+      getAccess: getLatestAccess,
+      microphone: defaults?.microphone,
+      camera: defaults?.camera
+    }),
+    [getLatestAccess, space, suppliedClient]
+  );
+  const client = suppliedClient ?? ownedClient;
+  useEffect8(() => {
+    if (!ownedClient) return;
+    return () => {
+      void ownedClient.leave().catch(() => void 0).finally(() => ownedClient.dispose());
+    };
+  }, [ownedClient]);
+  return /* @__PURE__ */ jsx31(NativeAppearanceProvider, { initialAppearance: { palette: props.theme?.palette, texture: props.theme?.texture }, children: /* @__PURE__ */ jsx31(AppearanceThemeBridge, { theme: props.theme, children: /* @__PURE__ */ jsx31(ChalkProvider, { client, children: /* @__PURE__ */ jsx31(SpaceExperience, { ...props }) }) }) });
+}
+function AppearanceThemeBridge({ children, theme }) {
+  const { appearance } = useNativeAppearance();
+  return /* @__PURE__ */ jsx31(NativeThemeProvider, { appearance, theme, children });
+}
+function SpaceExperience(props) {
+  const client = useSpaceClient();
+  const connection = useConnection();
+  const previousStatus = useRef5(connection.status);
+  const hasObservedStatus = useRef5(false);
+  const hasBeenLive = useRef5(connection.status === "live" || connection.status === "reconnecting");
+  const autoJoinAttempted = useRef5(false);
+  const previousClient = useRef5(client);
+  const [joinError, setJoinError] = useState9(null);
+  if (previousClient.current !== client) {
+    previousClient.current = client;
+    previousStatus.current = connection.status;
+    hasObservedStatus.current = false;
+    hasBeenLive.current = connection.status === "live" || connection.status === "reconnecting";
+    autoJoinAttempted.current = false;
+  }
+  const entrance = props.entrance ?? true;
+  const spaceName = props.spaceName ?? props.space ?? "Space";
+  const join = useCallback9(
+    async (options) => {
+      try {
+        setJoinError(null);
+        await client.join(options);
+      } catch (cause) {
+        setJoinError(cause instanceof Error ? cause.message : "Could not enter this Space.");
+      }
+    },
+    [client]
+  );
+  const retryAutomaticJoin = useCallback9(() => {
+    autoJoinAttempted.current = true;
+    void join(defaultJoinOptions(props));
+  }, [join, props]);
+  useEffect8(() => {
+    setJoinError(null);
+  }, [client]);
+  useEffect8(() => {
+    const subscriptions = [
+      props.onEpisodeEnded && client.on("episodeEnded", props.onEpisodeEnded),
+      props.onParticipantJoined && client.on("participantJoined", props.onParticipantJoined),
+      props.onParticipantLeft && client.on("participantLeft", props.onParticipantLeft),
+      props.onScreenShareStarted && client.on("screenShareStarted", props.onScreenShareStarted),
+      props.onScreenShareStopped && client.on("screenShareStopped", props.onScreenShareStopped),
+      props.onError && client.on("error", props.onError)
+    ].filter((unsubscribe) => Boolean(unsubscribe));
+    return () => subscriptions.forEach((unsubscribe) => unsubscribe());
+  }, [client, props.onEpisodeEnded, props.onError, props.onParticipantJoined, props.onParticipantLeft, props.onScreenShareStarted, props.onScreenShareStopped]);
+  useEffect8(() => {
+    if (!entrance && connection.status === "idle" && !autoJoinAttempted.current) {
+      autoJoinAttempted.current = true;
+      void join(defaultJoinOptions(props));
+    }
+  }, [connection.status, entrance, join, props.defaults?.camera, props.defaults?.microphone, props.displayName]);
+  useEffect8(() => {
+    const previous = previousStatus.current;
+    if (hasObservedStatus.current) {
+      if (connection.status === "live" && previous !== "live" && previous !== "reconnecting") props.onJoined?.();
+      if (connection.status === "left" && previous !== "left") props.onLeft?.();
+    }
+    previousStatus.current = connection.status;
+    hasObservedStatus.current = true;
+    if (connection.status === "live" || connection.status === "reconnecting") hasBeenLive.current = true;
+  }, [connection.status, props.onJoined, props.onLeft]);
+  if (connection.status === "idle" && entrance) {
+    return /* @__PURE__ */ jsx31(AppearanceLayer, { children: /* @__PURE__ */ jsx31(Entrance, { defaultDisplayName: props.displayName, defaults: props.defaults, error: joinError ?? void 0, logoUrl: props.logoUrl, onJoin: join, spaceName }) });
+  }
+  if (connection.status === "idle") {
+    return /* @__PURE__ */ jsx31(AppearanceLayer, { children: /* @__PURE__ */ jsx31(SpaceStatus, { message: joinError ?? `Entering ${spaceName}\u2026`, onRetry: joinError ? retryAutomaticJoin : void 0 }) });
+  }
+  if (connection.status === "joining") {
+    if (!entrance)
+      return /* @__PURE__ */ jsx31(AppearanceLayer, { children: /* @__PURE__ */ jsx31(SpaceStatus, { message: `Entering ${spaceName}\u2026` }) });
+    return /* @__PURE__ */ jsx31(AppearanceLayer, { children: /* @__PURE__ */ jsx31(Entrance, { defaultDisplayName: props.displayName, defaults: props.defaults, joining: true, logoUrl: props.logoUrl, onJoin: join, spaceName }) });
+  }
+  if (connection.status === "failed") {
+    if (!hasBeenLive.current && entrance) {
+      return /* @__PURE__ */ jsx31(AppearanceLayer, { children: /* @__PURE__ */ jsx31(Entrance, { defaultDisplayName: props.displayName, defaults: props.defaults, error: connection.lastError?.message ?? "Unable to enter this Space.", logoUrl: props.logoUrl, onJoin: join, spaceName }) });
+    }
+    return /* @__PURE__ */ jsx31(AppearanceLayer, { children: /* @__PURE__ */ jsx31(SpaceStatus, { message: connection.lastError?.message ?? "This Space is unavailable.", onRetry: () => void join(defaultJoinOptions(props)) }) });
+  }
+  if (connection.status === "leaving")
+    return /* @__PURE__ */ jsx31(AppearanceLayer, { children: /* @__PURE__ */ jsx31(SpaceStatus, { message: `Leaving ${spaceName}\u2026` }) });
+  if (connection.status === "left")
+    return /* @__PURE__ */ jsx31(AppearanceLayer, { children: /* @__PURE__ */ jsx31(SpaceStatus, { message: "You have left this Space.", onRetry: () => void join(defaultJoinOptions(props)) }) });
+  return /* @__PURE__ */ jsx31(NativeSpaceView, { features: props.features, inviteLink: props.inviteLink, layout: props.layout, logoUrl: props.logoUrl, onLayoutChange: props.onLayoutChange, pickChatFiles: props.pickChatFiles, reconnecting: connection.status === "reconnecting", spaceName });
+}
+function defaultJoinOptions(props) {
+  const displayName = props.displayName?.trim();
+  return {
+    ...displayName ? { displayName } : {},
+    microphone: props.defaults?.microphone ?? true,
+    camera: props.defaults?.camera ?? true
+  };
+}
+function NativeSpaceView({ features, inviteLink, layout, logoUrl, onLayoutChange, pickChatFiles, reconnecting, spaceName }) {
+  const client = useSpaceClient();
+  const theme = useNativeTheme();
+  return /* @__PURE__ */ jsxs22(View24, { style: [styles24.space, { backgroundColor: theme.colors.background }], children: [
+    /* @__PURE__ */ jsx31(SpaceView, { features, inviteLink, layout, logoUrl, onEndEpisode: () => client.endEpisode(), onLayoutChange, onLeave: () => client.leave(), pickChatFiles, reconnecting, spaceName }),
+    /* @__PURE__ */ jsx31(NativeTextureOverlay, {})
+  ] });
+}
+function AppearanceLayer({ children }) {
+  const theme = useNativeTheme();
+  return /* @__PURE__ */ jsxs22(View24, { style: [styles24.appearanceLayer, { backgroundColor: theme.colors.background }], children: [
+    children,
+    /* @__PURE__ */ jsx31(NativeTextureOverlay, {})
+  ] });
+}
+function SpaceStatus({ message, onRetry }) {
+  const theme = useNativeTheme();
+  return /* @__PURE__ */ jsxs22(View24, { accessibilityLiveRegion: "polite", style: [styles24.status, { backgroundColor: theme.colors.background }], children: [
+    /* @__PURE__ */ jsx31(Text19, { style: [styles24.statusText, { color: theme.colors.foreground }], children: message }),
+    onRetry ? /* @__PURE__ */ jsx31(Pressable16, { accessibilityRole: "button", onPress: onRetry, style: [styles24.retry, { backgroundColor: theme.colors.primary }], children: /* @__PURE__ */ jsx31(Text19, { style: [styles24.retryText, { color: theme.colors.primaryForeground }], children: "Try again" }) }) : null
+  ] });
+}
+var styles24 = StyleSheet25.create({
+  space: { flex: 1 },
+  appearanceLayer: { flex: 1 },
+  status: { flex: 1, alignItems: "center", justifyContent: "center", gap: 16, padding: 24 },
+  statusText: { fontSize: 16, textAlign: "center" },
+  retry: { borderRadius: 12, paddingHorizontal: 18, paddingVertical: 12 },
+  retryText: { fontWeight: "800" }
+});
+
+export {
+  ChalkProvider,
+  useSpaceClient,
+  useConnection,
+  useSelf,
+  useParticipants,
+  useMedia,
+  useChat,
+  useReactions,
+  useWhiteboard,
+  useCan,
+  Entrance,
+  Chalk
+};