@q9labsai/chalk-react-native 5.2.0 → 5.2.2

package/dist/index.js

@@ -4,8 +4,9 @@ import {
 import {
   extractSpaceInviteFromLink,
   getClipboardInviteSuggestion,
+  parseChalkInviteLink,
   parseSpaceInviteLink
-} from "./chunk-4L5GXJ36.js";
+} from "./chunk-BXDD5BE4.js";
 import {
   BottomSheet,
   ChalkText,
@@ -53,13 +54,13 @@ import {
   useTheme,
   useToasts,
   viewer
-} from "./chunk-MBZRE4US.js";
+} from "./chunk-PPQSOU35.js";
 import {
   useMeasuredRef
 } from "./chunk-GYVZSOGQ.js";
 
 // src/frame/Chalk.tsx
-import { useEffect as useEffect20 } from "react";
+import { useEffect as useEffect23 } from "react";
 import { StyleSheet as StyleSheet24 } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { SafeAreaProvider as SafeAreaProvider2 } from "react-native-safe-area-context";
@@ -114,6 +115,8 @@ var StageViewContext = createContext2(null);
 function StageViewProvider({ children }) {
   const [layout, setLayout] = useState("spotlight");
   const [pinned, setPinned] = useState(null);
+  const [boardOpen, setBoardOpen] = useState(null);
+  const [following, setFollowing] = useState(null);
   const [mirror, setMirror] = useState(true);
   const dev = useDevScenario();
   useEffect(() => {
@@ -124,6 +127,10 @@ function StageViewProvider({ children }) {
     () => ({
       layout,
       pinned,
+      boardOpen,
+      setBoardOpen,
+      following,
+      setFollowing,
       mirror,
       setLayout: (next) => {
         setLayout(next);
@@ -143,7 +150,7 @@ function StageViewProvider({ children }) {
       },
       setMirror
     }),
-    [layout, mirror, pinned]
+    [layout, mirror, pinned, following, boardOpen]
   );
   return /* @__PURE__ */ jsx2(StageViewContext.Provider, { value, children });
 }
@@ -154,7 +161,7 @@ function useStageView() {
 }
 
 // src/frame/CallFrame.tsx
-import { useCallback as useCallback15, useEffect as useEffect19, useMemo as useMemo12, useRef as useRef13, useState as useState13 } from "react";
+import { useCallback as useCallback17, useEffect as useEffect22, useMemo as useMemo12, useRef as useRef13, useState as useState15 } from "react";
 import { Pressable as Pressable15, StatusBar, StyleSheet as StyleSheet23, View as View22 } from "react-native";
 import Animated12, { useAnimatedStyle as useAnimatedStyle7, useSharedValue as useSharedValue5, withTiming as withTiming7 } from "react-native-reanimated";
 
@@ -295,13 +302,27 @@ function RoutePicker({ open, onClose, onSelect, output, anchorRef }) {
 import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
 var Dock = memo(function Dock2({ arrangement, microphoneOn, cameraOn, onToggleMicrophone, onToggleCamera, onOpenMore, onLeave, moreOpen, leaveOpen, moreRef, leaveRef }) {
   const live = useConnection().status === "live";
+  const { local } = useMedia();
   const size = arrangement === "pad" ? 44 : 52;
   const dockStyle = [styles.dock, arrangement === "pad" ? styles.pad : arrangement === "landscape" ? styles.landscape : styles.portrait];
   const dockRef = useMeasuredRef("frame.dock", dockStyle);
   const output = useAudioOutput();
   return /* @__PURE__ */ jsxs(View, { accessibilityLabel: "Call controls", accessibilityRole: "toolbar", pointerEvents: "box-none", ref: dockRef, style: dockStyle, testID: "frame.dock", children: [
-    /* @__PURE__ */ jsx4(IconButton, { accessibilityLabel: microphoneOn ? "Mute microphone" : "Unmute microphone", icon: microphoneOn ? "mic" : "micOff", off: !microphoneOn, disabled: !live && !microphoneOn, onCanvas: true, onPress: onToggleMicrophone, size, testID: "dock.microphone" }),
-    /* @__PURE__ */ jsx4(IconButton, { accessibilityLabel: cameraOn ? "Turn off camera" : "Turn on camera", icon: cameraOn ? "cam" : "camOff", off: !cameraOn, disabled: !live && !cameraOn, onCanvas: true, onPress: onToggleCamera, size, testID: "dock.camera" }),
+    /* @__PURE__ */ jsx4(
+      IconButton,
+      {
+        accessibilityLabel: microphoneOn ? "Mute microphone" : "Unmute microphone",
+        busy: local.microphone.state === "requesting",
+        icon: microphoneOn ? "mic" : "micOff",
+        off: !microphoneOn,
+        disabled: !live && !microphoneOn,
+        onCanvas: true,
+        onPress: onToggleMicrophone,
+        size,
+        testID: "dock.microphone"
+      }
+    ),
+    /* @__PURE__ */ jsx4(IconButton, { accessibilityLabel: cameraOn ? "Turn off camera" : "Turn on camera", busy: local.camera.state === "requesting", icon: cameraOn ? "cam" : "camOff", off: !cameraOn, disabled: !live && !cameraOn, onCanvas: true, onPress: onToggleCamera, size, testID: "dock.camera" }),
     output ? /* @__PURE__ */ jsx4(AudioOutputButton, { captioned: arrangement === "portrait", output, size }) : null,
     /* @__PURE__ */ jsx4(IconButton, { accessibilityLabel: "More options", expanded: moreOpen, icon: "more", onCanvas: true, onPress: onOpenMore, ref: moreRef, size, testID: "dock.more" }),
     arrangement === "pad" ? /* @__PURE__ */ jsx4(View, { style: styles.gap }) : null,
@@ -403,12 +424,14 @@ var REACTIONS = [
 function MoreSheet({ open, onClose, onOpenPeople, onOpenChat, inviteLink, returnFocusRef }) {
   const client = useSpaceClient();
   const self = useSelf();
+  const stage = useStageView();
   const people2 = useParticipants().roster.length;
   const toasts = useToasts();
   const { soundsEnabled } = usePreferences();
   const canRaiseHand = useCan("raiseHand");
   const live = useConnection().status === "live";
   const canReact = useCan("sendReaction") && live;
+  const canManageBoard = useCan("manageWhiteboard");
   const fail = useCallback5((message2) => () => toasts.show({ kind: "error", dismissible: true, message: message2 }), [toasts]);
   const toggleHand = useCallback5(() => {
     onClose();
@@ -436,6 +459,27 @@ function MoreSheet({ open, onClose, onOpenPeople, onOpenChat, inviteLink, return
     /* @__PURE__ */ jsxs3(SheetGroup, { children: [
       inviteLink ? /* @__PURE__ */ jsx7(CopyLinkRow, { link: inviteLink }) : null,
       inviteLink ? /* @__PURE__ */ jsx7(SheetRow, { icon: "iosShare", label: "Share link", onPress: () => shareLink(inviteLink), testID: "more.share" }) : null,
+      /* @__PURE__ */ jsx7(
+        SheetRow,
+        {
+          icon: "pen",
+          label: "Board",
+          onPress: () => {
+            onClose();
+            const transport = client.whiteboard.transport();
+            if (!transport) {
+              fail("The board is unavailable in this call.")();
+              return;
+            }
+            void transport.startSceneSubscription().then(async () => {
+              if (canManageBoard) await transport.setPresentation?.(true);
+              stage.setBoardOpen(true);
+              stage.showContent();
+            }).catch(fail("Couldn\u2019t open the board. Try again."));
+          },
+          testID: "more.board"
+        }
+      ),
       /* @__PURE__ */ jsx7(RecordingRow, { onDone: onClose }),
       /* @__PURE__ */ jsx7(ChatRow, { onPress: onOpenChat }),
       /* @__PURE__ */ jsx7(SheetRow, { end: /* @__PURE__ */ jsx7(PeopleCount, { count: people2 }), icon: "users", label: "People", onPress: onOpenPeople, testID: "more.people" }),
@@ -1606,10 +1650,33 @@ var styles11 = StyleSheet11.create({
 });
 
 // src/stage/Stage.tsx
-import { memo as memo11, useCallback as useCallback13, useMemo as useMemo11, useState as useState12 } from "react";
+import { memo as memo11, useCallback as useCallback14, useEffect as useEffect16, useMemo as useMemo11, useState as useState13 } from "react";
 import { Pressable as Pressable13, StyleSheet as StyleSheet18, View as View18 } from "react-native";
 import Animated9 from "react-native-reanimated";
 
+// src/whiteboard/native-board-session.ts
+function ownNativeBoardSession(client, onError) {
+  const transport = client.whiteboard.transport();
+  if (!transport) return () => {
+  };
+  let started = false;
+  let active = true;
+  const observe = () => {
+    if (started || client.getSnapshot().connection.status !== "live") return;
+    started = true;
+    void transport.startSceneSubscription().catch(() => {
+      if (active) onError();
+    });
+  };
+  const unsubscribe = client.subscribe(observe);
+  observe();
+  return () => {
+    active = false;
+    unsubscribe();
+    if (started) void transport.stopSceneSubscription();
+  };
+}
+
 // src/motion/MovingFrame.tsx
 import { useEffect as useEffect11, useRef as useRef7 } from "react";
 import { StyleSheet as StyleSheet12 } from "react-native";
@@ -1688,13 +1755,37 @@ var tileLeaving = () => {
 };
 
 // src/stage/ContentTile.tsx
-import { memo as memo8, useMemo as useMemo8, useRef as useRef10 } from "react";
+import { ChalkWhiteboardViewBounds } from "@q9labsai/chalk-client";
+import { memo as memo8, useCallback as useCallback11, useContext as useContext4, useEffect as useEffect13, useMemo as useMemo8, useRef as useRef10, useState as useState12 } from "react";
 import { Pressable as Pressable11, StyleSheet as StyleSheet14, View as View14 } from "react-native";
 
 // src/components/EmbeddedWhiteboard.tsx
 import { ChalkWhiteboardController } from "@q9labsai/chalk-whiteboard/embedded";
 import { useCallback as useCallback9, useEffect as useEffect12, useMemo as useMemo7, useRef as useRef8, useState as useState11 } from "react";
 import { ActivityIndicator as ActivityIndicator2, Pressable as Pressable10, Text as Text2, useWindowDimensions, View as View12 } from "react-native";
+
+// src/whiteboard/export-board-image.ts
+import { setImageAsync } from "expo-clipboard";
+import { File as File2, Paths } from "expo-file-system";
+import { isAvailableAsync, shareAsync } from "expo-sharing";
+async function exportBoardImage(value) {
+  if (value.format !== "png" || !value.dataURL.startsWith("data:image/png;base64,")) throw new Error("Board export is not a PNG image");
+  const base64 = value.dataURL.slice("data:image/png;base64,".length);
+  if (value.action === "copy") {
+    await setImageAsync(base64);
+    return;
+  }
+  if (!await isAvailableAsync()) throw new Error("Image sharing is unavailable on this device");
+  const file = new File2(Paths.cache, `chalk-board-${Date.now()}.png`);
+  try {
+    file.write(base64, { encoding: "base64" });
+    await shareAsync(file.uri, { mimeType: "image/png", UTI: "public.png", dialogTitle: "Save or share the board", anchor: { x: 16, y: 16, width: 1, height: 1 } });
+  } finally {
+    if (file.exists) file.delete();
+  }
+}
+
+// src/components/EmbeddedWhiteboard.tsx
 import WebView from "react-native-webview";
 
 // src/whiteboard/embedded-whiteboard-assets.ts
@@ -1743,7 +1834,7 @@ var embeddedWhiteboardWebViewSecurityPolicy = Object.freeze({
   allowFileAccessFromFileURLs: false,
   allowUniversalAccessFromFileURLs: false,
   cacheEnabled: false,
-  domStorageEnabled: false,
+  domStorageEnabled: true,
   javaScriptCanOpenWindowsAutomatically: false,
   javaScriptEnabled: true,
   mixedContentMode: "never",
@@ -1751,11 +1842,41 @@ var embeddedWhiteboardWebViewSecurityPolicy = Object.freeze({
   sharedCookiesEnabled: false,
   thirdPartyCookiesEnabled: false
 });
-function EmbeddedWhiteboard({ transport, journeyId, traceparent, tracestate, canDraw, canClear, theme: themeOverride, localParticipantColor, rendererURL: rendererURLOverride, style, testID, onMetric, onError, onUserExport }) {
+function EmbeddedWhiteboard({
+  board,
+  onFollow,
+  onCloseBoard,
+  transport,
+  journeyId,
+  traceparent,
+  tracestate,
+  canDraw,
+  canClear,
+  theme: themeOverride,
+  localParticipantColor,
+  rendererURL: rendererURLOverride,
+  style,
+  testID,
+  onMetric,
+  onError,
+  onUserExport
+}) {
+  const toasts = useToasts();
+  const noticesRef = useRef8(/* @__PURE__ */ new Map());
+  const clearNotices = useCallback9(() => {
+    noticesRef.current.forEach((id) => toasts.dismiss(id));
+    noticesRef.current.clear();
+  }, [toasts]);
   const theme = themeOverride ?? "light";
   const webViewRef = useRef8(null);
   const controllerRef = useRef8(null);
   const listenersRef = useRef8(/* @__PURE__ */ new Set());
+  const boardRef = useRef8(board);
+  boardRef.current = board;
+  const onFollowRef = useRef8(onFollow);
+  onFollowRef.current = onFollow;
+  const onCloseBoardRef = useRef8(onCloseBoard);
+  onCloseBoardRef.current = onCloseBoard;
   const onMetricRef = useRef8(onMetric);
   const onErrorRef = useRef8(onError);
   const onUserExportRef = useRef8(onUserExport);
@@ -1784,7 +1905,13 @@ function EmbeddedWhiteboard({ transport, journeyId, traceparent, tracestate, can
   );
   const handleControllerError = useCallback9((error2) => onErrorRef.current?.(error2), []);
   const handleControllerMetric = useCallback9((metric) => onMetricRef.current?.(metric), []);
-  const handleControllerUserExport = useCallback9((value) => onUserExportRef.current?.(value), []);
+  const handleControllerUserExport = useCallback9(async (value) => {
+    if (onUserExportRef.current) {
+      await onUserExportRef.current(value);
+      return;
+    }
+    await exportBoardImage(value);
+  }, []);
   useEffect12(() => {
     let active = true;
     setLoadError(null);
@@ -1808,6 +1935,41 @@ function EmbeddedWhiteboard({ transport, journeyId, traceparent, tracestate, can
       journeyId,
       ...traceparent ? { traceparent } : {},
       ...tracestate ? { tracestate } : {},
+      board: boardRef.current,
+      manageSceneSubscription: false,
+      onNotice: (notice) => {
+        if (!notice) {
+          clearNotices();
+          return;
+        }
+        const toastId = toasts.show({
+          kind: notice.kind,
+          message: notice.message,
+          dismissible: notice.kind === "error",
+          ...notice.actionLabel ? {
+            actions: [
+              {
+                label: notice.actionLabel,
+                onPress: () => {
+                  controller.performNoticeAction(notice.id);
+                  const id = noticesRef.current.get(notice.id);
+                  if (id !== void 0) toasts.dismiss(id);
+                }
+              }
+            ]
+          } : {}
+        });
+        noticesRef.current.set(notice.id, toastId);
+        if (noticesRef.current.size > 8) {
+          const oldest = noticesRef.current.entries().next().value;
+          if (oldest) {
+            toasts.dismiss(oldest[1]);
+            noticesRef.current.delete(oldest[0]);
+          }
+        }
+      },
+      onFollow: (id) => onFollowRef.current?.(id),
+      onCloseBoard: () => onCloseBoardRef.current?.(),
       canDraw,
       canClear,
       theme,
@@ -1823,8 +1985,12 @@ function EmbeddedWhiteboard({ transport, journeyId, traceparent, tracestate, can
     return () => {
       if (controllerRef.current === controller) controllerRef.current = null;
       controller.stop();
+      clearNotices();
     };
-  }, [handleControllerError, handleControllerMetric, handleControllerUserExport, journeyId, localParticipantColor, rendererPort, theme, traceparent, tracestate, transport]);
+  }, [clearNotices, toasts, handleControllerError, handleControllerMetric, handleControllerUserExport, journeyId, localParticipantColor, rendererPort, theme, traceparent, tracestate, transport]);
+  useEffect12(() => {
+    controllerRef.current?.setBoard(board);
+  }, [board]);
   useEffect12(() => {
     controllerRef.current?.setCapabilities({ canDraw, canClear });
   }, [canClear, canDraw]);
@@ -1842,6 +2008,7 @@ function EmbeddedWhiteboard({ transport, journeyId, traceparent, tracestate, can
   };
   const allowNavigation = (request) => Boolean(rendererURL && isEmbeddedWhiteboardNavigationAllowed(request.url, rendererURL));
   const reloadRenderer = () => {
+    clearNotices();
     controllerRef.current?.rendererReloaded();
     setRendererGeneration(createRendererGeneration());
   };
@@ -1928,16 +2095,21 @@ function RtcVideoView(props) {
   return /* @__PURE__ */ jsx21(RtcView, { ...props });
 }
 
+// src/frame/call-controls.ts
+import { createContext as createContext4 } from "react";
+var LandscapeControlsContext = createContext4(false);
+
 // src/primitives/NameTag.tsx
 import { memo as memo7 } from "react";
 import { StyleSheet as StyleSheet13, View as View13 } from "react-native";
 import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
-var NameTag = memo7(function NameTag2({ name, muted = false, pinned = false, icon, you = false, handRaised = false, handOrder, testID }) {
+var NameTag = memo7(function NameTag2({ name, muted = false, pinned = false, following = false, icon, you = false, handRaised = false, handOrder, testID }) {
   const tagRef = useMeasuredRef(testID, styles13.tag);
   return /* @__PURE__ */ jsx22(View13, { pointerEvents: "none", style: styles13.slot, children: /* @__PURE__ */ jsxs14(View13, { ref: tagRef, style: styles13.tag, testID, children: [
     pinned ? /* @__PURE__ */ jsx22(Icon, { color: fixed.overlayText, name: "pin", size: 14 }) : null,
     icon ? /* @__PURE__ */ jsx22(Icon, { color: fixed.overlayText, name: icon, size: 14 }) : null,
     /* @__PURE__ */ jsx22(ChalkText, { color: fixed.overlayText, numberOfLines: 1, style: styles13.name, variant: "label", children: name }),
+    following ? /* @__PURE__ */ jsx22(ChalkText, { color: fixed.overlayText, variant: "label", children: "following" }) : null,
     you ? /* @__PURE__ */ jsx22(ChalkText, { color: fixed.overlayText, style: styles13.you, variant: "label", children: "(You)" }) : null,
     muted ? /* @__PURE__ */ jsx22(Icon, { color: fixed.overlayDanger, name: "micOff", size: 14 }) : null,
     handRaised ? /* @__PURE__ */ jsxs14(View13, { style: styles13.hand, children: [
@@ -2006,30 +2178,72 @@ function ScreenShare({ sharerId, inner, mini, onShowInSpotlight }) {
   ] });
 }
 var selectBoard = (snapshot) => snapshot.whiteboard.engine.status;
+var selectRoster = (snapshot) => snapshot.participants.roster;
+var selectSelfId = (snapshot) => snapshot.self.participantId;
+var selectConnection = (snapshot) => snapshot.connection.status;
+var selectAccess = (snapshot) => snapshot.whiteboard.access;
+var selectCanManage = (snapshot) => snapshot.self.can("manageWhiteboard");
+var selectSceneId = (snapshot) => snapshot.whiteboard.engine.sceneId;
 function Board({ mini, onShowInSpotlight }) {
   const client = useSpaceClient();
   const { colors, scheme } = useTheme();
+  const view = useStageView();
+  const { width, height } = useDeviceLayout();
+  const landscapeControlsVisible = useContext4(LandscapeControlsContext);
+  const phone = Math.min(width, height) < 600;
   const status = useSpaceSelector(selectBoard);
-  const chipStyle = [styles14.viewOnly, { backgroundColor: colors.surface, borderColor: colors.lineStrong }];
-  const chipRef = useMeasuredRef("tile.content.view-only", chipStyle);
+  const roster = useSpaceSelector(selectRoster);
+  const selfId = useSpaceSelector(selectSelfId);
+  const connectionStatus = useSpaceSelector(selectConnection);
+  const sceneId = useSpaceSelector(selectSceneId);
+  const access = useSpaceSelector(selectAccess);
+  const canManage = useSpaceSelector(selectCanManage);
+  const toasts = useToasts();
   const transport = useMemo8(() => client.whiteboard.transport(), [client, status]);
+  const [capabilities, setCapabilities] = useState12({ canDraw: false, canClear: false, viewsAvailable: false });
+  useEffect13(() => transport?.subscribeSummary?.((summary) => setCapabilities({ canDraw: summary.canDraw, canClear: summary.canClear, viewsAvailable: transport.supportsViews === true })), [transport]);
+  const board = useMemo8(
+    () => ({
+      primary: !mini,
+      phone,
+      landscapeControlsVisible,
+      following: view.following,
+      ownParticipantId: selfId,
+      people: roster.map((person) => ({ id: person.participantId, displayName: person.displayName })),
+      viewBounds: ChalkWhiteboardViewBounds,
+      sceneId,
+      sceneStatus: status,
+      connectionStatus,
+      viewsAvailable: capabilities.viewsAvailable,
+      ...canManage && access.policy !== null && transport?.setDrawPolicy ? {
+        whoCanDraw: {
+          policy: access.policy,
+          people: roster.filter((person) => person.participantId !== selfId && !person.capabilities.includes("manageWhiteboard")).map((person) => ({ id: person.participantId, name: person.displayName, picked: access.permissions.some((permission) => permission.participantId === person.participantId && permission.canDraw) }))
+        }
+      } : {},
+      colors
+    }),
+    [mini, phone, landscapeControlsVisible, view.following, selfId, roster, sceneId, status, connectionStatus, capabilities.viewsAvailable, canManage, access, transport, colors]
+  );
+  const onClose = useCallback11(() => {
+    void (async () => {
+      if (canManage) await transport?.setPresentation?.(false);
+      view.setBoardOpen(false);
+      view.setFollowing(null);
+    })().catch(() => toasts.show({ kind: "error", dismissible: true, message: "Couldn\u2019t close the board. Try again." }));
+  }, [canManage, transport, toasts, view.setBoardOpen, view.setFollowing]);
   const journeyId = useRef10(`board-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`).current;
   return /* @__PURE__ */ jsxs15(Fragment4, { children: [
-    transport ? /* @__PURE__ */ jsx23(EmbeddedWhiteboard, { canClear: false, canDraw: false, journeyId, style: StyleSheet14.absoluteFill, testID: "tile.content.board", theme: scheme, transport }) : null,
+    transport ? /* @__PURE__ */ jsx23(EmbeddedWhiteboard, { board, canClear: capabilities.canClear, canDraw: !mini && capabilities.canDraw, journeyId, onCloseBoard: onClose, onFollow: view.setFollowing, style: StyleSheet14.absoluteFill, testID: "tile.content.board", theme: scheme, transport }) : null,
     mini ? /* @__PURE__ */ jsxs15(Fragment4, { children: [
       /* @__PURE__ */ jsx23(Pressable11, { accessibilityLabel: "Show the board in spotlight", accessibilityRole: "button", onPress: onShowInSpotlight, style: StyleSheet14.absoluteFill, testID: "tile.content.open" }),
       /* @__PURE__ */ jsx23(NameTag, { icon: "pen", name: "Board", testID: "tile.content.name" })
-    ] }) : /* @__PURE__ */ jsxs15(View14, { accessibilityLiveRegion: "polite", accessibilityRole: "text", accessible: true, ref: chipRef, style: chipStyle, testID: "tile.content.view-only", children: [
-      /* @__PURE__ */ jsx23(Icon, { color: colors.textMuted, name: "lock", size: 16 }),
-      /* @__PURE__ */ jsx23(ChalkText, { tone: "textSoft", variant: "section", children: "View only" })
-    ] })
+    ] }) : null
   ] });
 }
 var styles14 = StyleSheet14.create({
   tile: { flex: 1, overflow: "hidden", borderRadius: radii.tilePhone },
-  box: { position: "absolute", overflow: "hidden" },
-  // `.vchip`: a 30 pt pill 12 pt in from the board's top-left corner, with a one-pixel ring.
-  viewOnly: { position: "absolute", left: 12, top: 12, height: 30, paddingHorizontal: 12, borderRadius: radii.round, borderWidth: 1, flexDirection: "row", alignItems: "center", gap: 6, zIndex: 3 }
+  box: { position: "absolute", overflow: "hidden" }
 });
 
 // src/stage/layout.ts
@@ -2198,7 +2412,7 @@ function nextStageOrder(previous, present, selfId, speaker) {
 }
 
 // src/stage/ParticipantTile.tsx
-import { memo as memo10, useCallback as useCallback11, useEffect as useEffect14, useMemo as useMemo9 } from "react";
+import { memo as memo10, useCallback as useCallback12, useEffect as useEffect15, useMemo as useMemo9 } from "react";
 import { Pressable as Pressable12, StyleSheet as StyleSheet16, View as View16 } from "react-native";
 import { useSharedValue as useSharedValue3, withTiming as withTiming5 } from "react-native-reanimated";
 
@@ -2208,17 +2422,17 @@ function tileAvatarSize(width, height) {
 }
 
 // src/primitives/TileShell.tsx
-import { memo as memo9, useEffect as useEffect13 } from "react";
+import { memo as memo9, useEffect as useEffect14 } from "react";
 import { StyleSheet as StyleSheet15, View as View15 } from "react-native";
 import Animated8, { useAnimatedStyle as useAnimatedStyle4, useSharedValue as useSharedValue2, withTiming as withTiming4 } from "react-native-reanimated";
 import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
-var TileShell = memo9(function TileShell2({ children, speaking = false, cameraOn = false, level, testID }) {
+var TileShell = memo9(function TileShell2({ children, selected = false, speaking = false, cameraOn = false, level, testID }) {
   const { colors } = useTheme();
   const { phone } = useDeviceLayout();
   const radius = phone ? radii.tilePhone : radii.tile;
   const live = useSharedValue2(0);
   const showRing = speaking && cameraOn;
-  useEffect13(() => {
+  useEffect14(() => {
     live.value = withTiming4(showRing ? 1 : 0, timings.scrim);
   }, [live, showRing]);
   const ringStyle = useAnimatedStyle4(() => {
@@ -2227,6 +2441,7 @@ var TileShell = memo9(function TileShell2({ children, speaking = false, cameraOn
   });
   return /* @__PURE__ */ jsxs16(View15, { style: [styles15.tile, { borderRadius: radius, backgroundColor: colors.tile }], testID, children: [
     children,
+    selected ? /* @__PURE__ */ jsx24(View15, { pointerEvents: "none", style: [StyleSheet15.absoluteFill, { borderRadius: radius, borderWidth: 2, borderColor: colors.text, zIndex: 6 }] }) : null,
     /* @__PURE__ */ jsx24(Animated8.View, { pointerEvents: "none", style: [styles15.ring, { borderRadius: radius }, ringStyle], testID: testID ? `${testID}.ring` : void 0, children: /* @__PURE__ */ jsx24(View15, { style: [styles15.ringShade, { borderRadius: radius - 3 }] }) })
   ] });
 });
@@ -2270,12 +2485,12 @@ function selectTile(id) {
     };
   };
 }
-var ParticipantTile = memo10(function ParticipantTile2({ id, width, height, float, pinned, mirror, onOpen }) {
+var ParticipantTile = memo10(function ParticipantTile2({ id, width, height, float, pinned, following = false, mirror, onOpen, onOptions }) {
   const select = useMemo9(() => selectTile(id), [id]);
   const tile = useSpaceSelector(select, shallowEqual);
   const slot = useDevScenario().videoSlots?.[id];
   const level = useSharedValue3(0);
-  useEffect14(() => {
+  useEffect15(() => {
     level.value = withTiming5(tile.speaking ? 0.6 : 0, timings.level);
   }, [level, tile.speaking]);
   const streamURL = useMemo9(() => tile.track ? createNativeMediaStream(tile.track).toURL() : null, [tile.track]);
@@ -2286,10 +2501,10 @@ var ParticipantTile = memo10(function ParticipantTile2({ id, width, height, floa
   const state = `${tile.muted ? ", microphone off" : ""}${tile.handRaised ? ", hand raised" : ""}`;
   const hitRef = useMeasuredRef(`tile.${id}.open`, StyleSheet16.absoluteFill);
   const label = `Options for ${tile.name}${tile.isSelf ? " (you)" : ""}${pinned ? ", pinned" : ""}${state}`;
-  return /* @__PURE__ */ jsxs17(TileShell, { cameraOn: video !== null, level, speaking: tile.speaking, testID: `tile.${id}`, children: [
+  return /* @__PURE__ */ jsxs17(TileShell, { selected: following, cameraOn: video !== null, level, speaking: tile.speaking, testID: `tile.${id}`, children: [
     video ?? /* @__PURE__ */ jsx25(View16, { style: styles16.center, children: /* @__PURE__ */ jsx25(FaceAvatar, { level, lookAround: true, name: tile.name, size: tileAvatarSize(width, height - nameTagZone), style: "bold" }) }),
-    /* @__PURE__ */ jsx25(Pressable12, { accessibilityHint: "Opens a sheet", accessibilityLabel: label, accessibilityRole: "button", onPress: () => onOpen(id), ref: hitRef, style: StyleSheet16.absoluteFill, testID: `tile.${id}.open` }),
-    /* @__PURE__ */ jsx25(NameTag, { handRaised: tile.handRaised, muted: tile.muted, name, pinned, testID: `tile.${id}.name`, you }),
+    /* @__PURE__ */ jsx25(Pressable12, { accessibilityHint: "Opens a sheet", accessibilityLabel: label, accessibilityRole: "button", onPress: () => onOpen(id), onLongPress: () => onOptions?.(id), ref: hitRef, style: StyleSheet16.absoluteFill, testID: `tile.${id}.open` }),
+    /* @__PURE__ */ jsx25(NameTag, { following, handRaised: tile.handRaised, muted: tile.muted, name, pinned, testID: `tile.${id}.name`, you }),
     tile.isSelf && video !== null ? /* @__PURE__ */ jsx25(FlipCameraButton, { back: tile.back, float, testID: `tile.${id}.flip` }) : null
   ] });
 });
@@ -2303,7 +2518,7 @@ function FlipCameraButton({ back, float, testID }) {
   const client = useSpaceClient();
   const toasts = useToasts();
   const other = useSpaceSelector(selectOtherCamera);
-  const flip = useCallback11(() => {
+  const flip = useCallback12(() => {
     if (other === null) return;
     client.media.selectCamera(other).catch(() => toasts.show({ kind: "error", dismissible: true, message: "Couldn't switch the camera." }));
   }, [client, other, toasts]);
@@ -2321,10 +2536,10 @@ var styles16 = StyleSheet16.create({
 });
 
 // src/stage/TileSheet.tsx
-import { useCallback as useCallback12, useMemo as useMemo10 } from "react";
+import { useCallback as useCallback13, useMemo as useMemo10 } from "react";
 import { StyleSheet as StyleSheet17, View as View17 } from "react-native";
 import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
-var closed = { name: "", isSelf: false, cameraOn: false, back: false, otherCamera: null, muted: false, canMute: false, canRemove: false };
+var closed = { boardOpen: false, name: "", isSelf: false, cameraOn: false, back: false, otherCamera: null, muted: false, canMute: false, canRemove: false };
 function TileSheet({ participantId, open, onClose }) {
   const client = useSpaceClient();
   const toasts = useToasts();
@@ -2335,6 +2550,7 @@ function TileSheet({ participantId, open, onClose }) {
       const person2 = snapshot.participants.roster.find((participant) => participant.participantId === participantId);
       const isSelf = snapshot.self.participantId === participantId;
       return {
+        boardOpen: snapshot.whiteboard.engine.presenting,
         name: person2?.displayName ?? snapshot.self.displayName ?? "",
         isSelf,
         cameraOn: isSelf && snapshot.media.local.camera.state === "enabled",
@@ -2348,8 +2564,10 @@ function TileSheet({ participantId, open, onClose }) {
     [participantId]
   );
   const person = useSpaceSelector(select, shallowEqual);
+  const selectViewsAvailable = useCallback13(() => client.whiteboard.transport()?.supportsViews === true, [client]);
+  const viewsAvailable = useSpaceSelector(selectViewsAvailable);
   const id = participantId ?? "";
-  const failed = useCallback12((message2) => () => toasts.show({ kind: "error", dismissible: true, message: message2 }), [toasts]);
+  const failed = useCallback13((message2) => () => toasts.show({ kind: "error", dismissible: true, message: message2 }), [toasts]);
   const run = (action) => () => {
     onClose();
     action();
@@ -2360,6 +2578,18 @@ function TileSheet({ participantId, open, onClose }) {
       /* @__PURE__ */ jsx26(ChalkText, { numberOfLines: 1, style: styles17.name, variant: "sheetTitle", children: `${person.name}${person.isSelf ? " (You)" : ""}` })
     ] }),
     /* @__PURE__ */ jsxs18(SheetGroup, { children: [
+      (view.boardOpen ?? person.boardOpen) && viewsAvailable && !person.isSelf ? /* @__PURE__ */ jsx26(
+        SheetRow,
+        {
+          icon: "pin",
+          label: view.following === participantId ? "Stop following" : "Follow",
+          onPress: run(() => {
+            view.showContent();
+            view.setFollowing(view.following === participantId ? null : id);
+          }),
+          testID: "tile-sheet.follow"
+        }
+      ) : null,
       /* @__PURE__ */ jsx26(SheetRow, { icon: "pin", label: view.pinned === participantId ? "Unpin" : "Pin", onPress: run(() => view.togglePin(id)), testID: "tile-sheet.pin" }),
       person.cameraOn && person.otherCamera !== null ? /* @__PURE__ */ jsx26(
         SheetRow,
@@ -2411,20 +2641,33 @@ function selectStructure(snapshot) {
     present: (hasSelf && selfId !== null ? [selfId, ...others] : others).join("\n"),
     speaker: roster.find((person) => person.presence.activeSpeaker)?.participantId ?? null,
     sharer: roster.find((person) => person.participantId !== selfId && person.media.screenShare === "active")?.participantId ?? null,
-    board: snapshot.whiteboard.open
+    board: snapshot.whiteboard.engine.presenting
   };
 }
 var Stage = memo11(function Stage2({ frame, onOpenPeople }) {
+  const client = useSpaceClient();
+  const toasts = useToasts();
+  useEffect16(() => ownNativeBoardSession(client, () => toasts.show({ kind: "error", dismissible: true, message: "Couldn\u2019t open the board. Try again from More." })), [client, toasts]);
   const structure = useSpaceSelector(selectStructure, shallowEqual);
+  const selectViewsAvailable = useCallback14(() => client.whiteboard.transport()?.supportsViews === true, [client]);
+  const viewsAvailable = useSpaceSelector(selectViewsAvailable);
   const view = useStageView();
   const { arrangement } = useDeviceLayout();
   const { shareAspect } = useDevScenario();
-  const [sheet, setSheet] = useState12({ id: null, open: false });
+  const [sheet, setSheet] = useState13({ id: null, open: false });
+  useEffect16(() => {
+    if (view.following && !structure.present.split("\n").includes(view.following)) view.setFollowing(null);
+  }, [structure.present, view.following, view.setFollowing]);
   const present = useMemo11(() => structure.present ? structure.present.split("\n") : [], [structure.present]);
-  const [order, setOrder] = useState12({ order: [], spot: null });
+  const [order, setOrder] = useState13({ order: [], spot: null });
   const next = nextStageOrder(order, present, structure.selfId, structure.speaker);
   if (next !== order) setOrder(next);
-  const content = useMemo11(() => structure.board ? { kind: "board" } : structure.sharer !== null ? { kind: "screen", sharerId: structure.sharer } : null, [structure.board, structure.sharer]);
+  useEffect16(() => {
+    view.setBoardOpen(null);
+    view.setFollowing(null);
+  }, [structure.board, view.setBoardOpen, view.setFollowing]);
+  const boardVisible = view.boardOpen ?? structure.board;
+  const content = useMemo11(() => boardVisible ? { kind: "board" } : structure.sharer !== null ? { kind: "screen", sharerId: structure.sharer } : null, [boardVisible, structure.sharer]);
   const pinned = view.pinned !== null && present.includes(view.pinned) ? view.pinned : null;
   const items = useMemo11(
     () => stageLayout({
@@ -2439,21 +2682,32 @@ var Stage = memo11(function Stage2({ frame, onOpenPeople }) {
     }),
     [arrangement, content, frame, next, pinned, shareAspect, view.layout]
   );
-  const openTile = useCallback13((id) => setSheet({ id, open: true }), []);
-  const closeTile = useCallback13(() => setSheet((current) => ({ ...current, open: false })), []);
+  const followTile = useCallback14(
+    (id) => {
+      if (!boardVisible || !viewsAvailable || id === structure.selfId) {
+        setSheet({ id, open: true });
+        return;
+      }
+      view.showContent();
+      view.setFollowing(view.following === id ? null : id);
+    },
+    [boardVisible, viewsAvailable, structure.selfId, view]
+  );
+  const openTile = useCallback14((id) => setSheet({ id, open: true }), []);
+  const closeTile = useCallback14(() => setSheet((current) => ({ ...current, open: false })), []);
   const stageRef = useMeasuredRef("frame.stage", styles18.layer);
   return /* @__PURE__ */ jsxs19(View18, { pointerEvents: "box-none", ref: stageRef, style: styles18.layer, testID: "frame.stage", children: [
-    items.map((item) => /* @__PURE__ */ jsx27(StageTile, { content, item, mirror: view.mirror, onOpenPeople, onOpenTile: openTile, onShowContent: view.showContent, peopleCount: present.length, pinned }, itemKey(item))),
+    items.map((item) => /* @__PURE__ */ jsx27(StageTile, { content, item, mirror: view.mirror, onOpenPeople, onOpenTile: followTile, onTileOptions: openTile, following: view.following, onShowContent: view.showContent, peopleCount: present.length, pinned }, itemKey(item))),
     /* @__PURE__ */ jsx27(TileSheet, { onClose: closeTile, open: sheet.open, participantId: sheet.id })
   ] });
 });
 function itemKey(item) {
   return item.kind === "person" ? `person:${item.id}` : item.kind;
 }
-function StageTile({ item, content, pinned, mirror, peopleCount, onOpenTile, onOpenPeople, onShowContent }) {
+function StageTile({ item, content, pinned, mirror, peopleCount, onOpenTile, onOpenPeople, onShowContent, following, onTileOptions }) {
   const { scheme } = useTheme();
   const float = item.kind === "person" && item.float;
-  return /* @__PURE__ */ jsx27(MovingFrame, { frame: item.frame, style: float ? [styles18.float, { boxShadow: elevations[scheme].floatTile }] : null, children: /* @__PURE__ */ jsx27(Animated9.View, { entering: tileEntering, exiting: tileLeaving, style: styles18.fill, children: item.kind === "person" ? /* @__PURE__ */ jsx27(ParticipantTile, { float, height: item.frame.height, id: item.id, mirror, onOpen: onOpenTile, pinned: pinned === item.id, width: item.frame.width }) : item.kind === "content" && content ? /* @__PURE__ */ jsx27(ContentTile, { content, inner: item.inner, mini: item.mini, onShowInSpotlight: onShowContent }) : item.kind === "more" ? /* @__PURE__ */ jsx27(MoreTile, { count: item.count, onPress: onOpenPeople, peopleCount }) : null }) });
+  return /* @__PURE__ */ jsx27(MovingFrame, { frame: item.frame, style: float ? [styles18.float, { boxShadow: elevations[scheme].floatTile }] : null, children: /* @__PURE__ */ jsx27(Animated9.View, { entering: tileEntering, exiting: tileLeaving, style: styles18.fill, children: item.kind === "person" ? /* @__PURE__ */ jsx27(ParticipantTile, { float, height: item.frame.height, id: item.id, mirror, onOpen: onOpenTile, onOptions: onTileOptions, following: following === item.id, pinned: pinned === item.id, width: item.frame.width }) : item.kind === "content" && content ? /* @__PURE__ */ jsx27(ContentTile, { content, inner: item.inner, mini: item.mini, onShowInSpotlight: onShowContent }) : item.kind === "more" ? /* @__PURE__ */ jsx27(MoreTile, { count: item.count, onPress: onOpenPeople, peopleCount }) : null }) });
 }
 var MoreTile = memo11(function MoreTile2({ count, peopleCount, onPress }) {
   const { colors } = useTheme();
@@ -2469,12 +2723,33 @@ var styles18 = StyleSheet18.create({
   moreText: { fontFamily: fontFamilies[600], fontSize: 22, lineHeight: 22 * 1.4 }
 });
 
+// src/frame/use-landscape-chrome.ts
+import { useCallback as useCallback15, useEffect as useEffect17, useState as useState14 } from "react";
+function useLandscapeChrome({ fades, boardVisible }) {
+  const canHide = fades && !boardVisible;
+  const [hidden, setHidden] = useState14(false);
+  const [shownAt, setShownAt] = useState14(0);
+  useEffect17(() => {
+    if (!canHide) {
+      setHidden(false);
+      return;
+    }
+    const timer = setTimeout(() => setHidden(true), durations.landscapeHide);
+    return () => clearTimeout(timer);
+  }, [canHide, shownAt]);
+  const show = useCallback15(() => {
+    setHidden(false);
+    setShownAt(Date.now());
+  }, []);
+  return { hidden: canHide && hidden, show };
+}
+
 // src/status/CallOverlays.tsx
-import { useEffect as useEffect17 } from "react";
+import { useEffect as useEffect20 } from "react";
 import { StyleSheet as StyleSheet21, View as View20 } from "react-native";
 
 // src/limbo/Veil.tsx
-import { useEffect as useEffect15 } from "react";
+import { useEffect as useEffect18 } from "react";
 import { StyleSheet as StyleSheet19 } from "react-native";
 import Animated10, { ReduceMotion as ReduceMotion2, useAnimatedStyle as useAnimatedStyle5, useSharedValue as useSharedValue4, withTiming as withTiming6 } from "react-native-reanimated";
 import { jsx as jsx28 } from "react/jsx-runtime";
@@ -2483,7 +2758,7 @@ var LIFT_FROM = 0.6;
 function Veil({ level }) {
   const { colors } = useTheme();
   const opacity = useSharedValue4(OPACITY[level]);
-  useEffect15(() => {
+  useEffect18(() => {
     if (level !== "none") {
       opacity.value = OPACITY[level];
       return;
@@ -2500,7 +2775,8 @@ function Veil({ level }) {
 }
 
 // src/status/StatusPage.tsx
-import { forwardRef as forwardRef3, memo as memo12, useEffect as useEffect16, useRef as useRef11 } from "react";
+import { forwardRef as forwardRef3, memo as memo12, useEffect as useEffect19, useRef as useRef11 } from "react";
+import { formatSyncConnectDiagnostic, getConnectionFailureDetail } from "@q9labsai/chalk-client";
 import { AccessibilityInfo as AccessibilityInfo2, findNodeHandle as findNodeHandle2, Pressable as Pressable14, StyleSheet as StyleSheet20, View as View19 } from "react-native";
 import Animated11, { useAnimatedStyle as useAnimatedStyle6 } from "react-native-reanimated";
 import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
@@ -2511,7 +2787,7 @@ function pageFor(outcome, callName) {
     case "ended":
       return { title: "The call ended", actions: ["rejoin", "home"] };
     case "failed":
-      return { title: `Couldn\u2019t connect to ${callName}`, detail: "Check your internet connection, then try again.", actions: ["rejoin", "home"], rejoinLabel: "Try again" };
+      return { title: `Couldn\u2019t connect to ${callName}`, actions: ["rejoin", "home"], rejoinLabel: "Try again" };
     case "removed":
       return { title: `You were removed from ${callName}`, detail: "The host removed you from this call.", actions: ["home"] };
     case "exited":
@@ -2520,19 +2796,21 @@ function pageFor(outcome, callName) {
       return { title: "This call is full", detail: `${callName} has reached 100 people. Ask the host to make room, then try again.`, actions: ["rejoin", "home"], rejoinLabel: "Try again" };
   }
 }
-function StatusPage({ outcome, callName, onRejoin, onHome }) {
+function StatusPage({ outcome, callName, failure, onRejoin, onHome }) {
   const { colors } = useTheme();
   const page = pageFor(outcome, callName);
+  const detail = outcome === "failed" ? getConnectionFailureDetail({ code: failure?.code, sync: failure?.sync }) : page.detail;
   const pageStyle = [styles19.page, { backgroundColor: colors.canvas }];
   const ref = useMeasuredRef("status.page", pageStyle);
   const firstAction = useRef11(null);
-  useEffect16(() => {
+  useEffect19(() => {
     const node = firstAction.current && findNodeHandle2(firstAction.current);
     if (node) AccessibilityInfo2.setAccessibilityFocus(node);
   }, [outcome]);
   return /* @__PURE__ */ jsxs20(View19, { accessibilityViewIsModal: true, ref, style: pageStyle, testID: "status.page", children: [
     /* @__PURE__ */ jsx29(ChalkText, { accessibilityRole: "header", style: styles19.center, testID: "status.title", variant: "statusTitle", children: page.title }),
-    page.detail ? /* @__PURE__ */ jsx29(ChalkText, { style: styles19.center, testID: "status.detail", tone: "textMuted", children: page.detail }) : null,
+    detail ? /* @__PURE__ */ jsx29(ChalkText, { style: styles19.center, testID: "status.detail", tone: "textMuted", children: detail }) : null,
+    outcome === "failed" && failure ? /* @__PURE__ */ jsx29(ChalkText, { style: styles19.center, testID: "status.reference", tone: "textMuted", variant: "caption", children: `Reference: ${failure.code}${failure.sync ? ` ${formatSyncConnectDiagnostic(failure.sync)}` : ""}` }) : null,
     /* @__PURE__ */ jsx29(View19, { style: styles19.actions, children: page.actions.map(
       (action, index) => action === "rejoin" ? /* @__PURE__ */ jsx29(StatusAction, { icon: "retry", label: page.rejoinLabel ?? "Rejoin", onPress: onRejoin, ref: index === 0 ? firstAction : void 0, testID: "status.rejoin" }, action) : /* @__PURE__ */ jsx29(StatusAction, { icon: "home", label: "Home", onPress: onHome, ref: index === 0 ? firstAction : void 0, testID: "status.home" }, action)
     ) })
@@ -2579,7 +2857,7 @@ function CallOverlays({ screen, callName, rejoining, onHold, onRejoin, onHome })
   useBackHandler(screen.kind === "status", onHome);
   const { clear } = useToasts();
   const clearsNotices = screen.kind === "status" || screen.kind === "joining";
-  useEffect17(() => {
+  useEffect20(() => {
     if (clearsNotices) clear();
   }, [clear, clearsNotices]);
   const limbo = screen.kind === "joining" ? { kind: "joining", rejoining } : screen.kind === "call" && onHold ? { kind: "hold" } : null;
@@ -2588,7 +2866,7 @@ function CallOverlays({ screen, callName, rejoining, onHold, onRejoin, onHome })
     /* @__PURE__ */ jsx30(Veil, { level: screen.kind === "status" ? "none" : veil }),
     screen.kind === "reconnecting" || screen.kind === "call" && connection.syncHealth === "degraded" ? /* @__PURE__ */ jsx30(View20, { pointerEvents: "none", style: { position: "absolute", top: header.y + header.height + 4, left: layout.insets.left + 16, right: layout.insets.right + 16, alignItems: "center" }, testID: "connection.notice", children: /* @__PURE__ */ jsx30(ChalkText, { accessibilityLiveRegion: "polite", variant: "caption", style: { backgroundColor: colors.surface, borderRadius: 12, paddingHorizontal: 12, paddingVertical: 6 }, children: screen.kind === "reconnecting" ? `Reconnecting\u2026${queuedMessages ? ` ${queuedMessages} messages waiting to send.` : ""}` : "Connection is slow" }) }) : null,
     limbo ? /* @__PURE__ */ jsx30(Limbo, { callName, recording: recording2, state: limbo }) : null,
-    screen.kind === "status" ? /* @__PURE__ */ jsx30(StatusPage, { callName, onHome, onRejoin, outcome: screen.outcome }) : null
+    screen.kind === "status" ? /* @__PURE__ */ jsx30(StatusPage, { callName, failure: connection.lastError, onHome, onRejoin, outcome: screen.outcome }) : null
   ] });
 }
 
@@ -2630,7 +2908,7 @@ function callScreen(connection, leftByChoice) {
 
 // src/toasts/CallEventToasts.tsx
 import { SpaceClientError } from "@q9labsai/chalk-client";
-import { useCallback as useCallback14, useEffect as useEffect18, useRef as useRef12 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect21, useRef as useRef12 } from "react";
 import { Linking as Linking2, Platform as Platform7 } from "react-native";
 
 // src/toasts/media-failure-copy.ts
@@ -2688,7 +2966,7 @@ function useCallEventToasts({ onOpenSettings, resumedAfterSettings }) {
   const ownMicrophoneChange = useRef12(false);
   const latest = useRef12({ colors, soundsEnabled });
   latest.current = { colors, soundsEnabled };
-  useEffect18(() => {
+  useEffect21(() => {
     let previous = client.getSnapshot();
     return client.subscribe(() => {
       const next = client.getSnapshot();
@@ -2705,10 +2983,10 @@ function useCallEventToasts({ onOpenSettings, resumedAfterSettings }) {
     });
   }, [client, toasts]);
   useResumedAfterSettings(resumedAfterSettings, toasts);
-  const noteOwnMicrophoneChange = useCallback14(() => {
+  const noteOwnMicrophoneChange = useCallback16(() => {
     ownMicrophoneChange.current = true;
   }, []);
-  const reportMediaFailure = useCallback14(
+  const reportMediaFailure = useCallback16(
     function reportMediaFailure2(permission, cause, retry) {
       const code = cause instanceof SpaceClientError ? cause.code : null;
       const icon = permission === "microphone" ? "micOff" : "camOff";
@@ -2773,7 +3051,7 @@ function useResumedAfterSettings(permission, toasts) {
   const client = useSpaceClient();
   const { colors } = useTheme();
   const shown = useRef12(false);
-  useEffect18(() => {
+  useEffect21(() => {
     if (!permission) return;
     const check = () => {
       if (shown.current || client.getSnapshot().connection.status !== "live") return;
@@ -2838,31 +3116,31 @@ function CallFrame({ displayName, callName = "Call", inviteLink, onLeave, onOpen
   const { soundsEnabled } = usePreferences();
   const toasts = useToasts();
   const callEvents = useCallEventToasts({ onOpenSettings, resumedAfterSettings });
-  const [leftByChoice, setLeftByChoice] = useState13(false);
-  const [sheet, setSheet] = useState13(null);
+  const [leftByChoice, setLeftByChoice] = useState15(false);
+  const [sheet, setSheet] = useState15(null);
   const moreRef = useRef13(null);
   const leaveRef = useRef13(null);
   const nameRef = useRef13(null);
   const canEnd = useCan("endEpisode");
-  const [leaveMenuOpen, setLeaveMenuOpen] = useState13(false);
+  const [leaveMenuOpen, setLeaveMenuOpen] = useState15(false);
   const sheetCount = usePortalCount("sheets");
   const menuCount = usePortalCount("menus");
   const layered = sheetCount > 0 || menuCount > 0;
   const regions = useMemo12(() => frameRegions(layout.arrangement, layout.width, layout.height, layout.insets), [layout]);
   const screenStyle = [styles21.root, { backgroundColor: colors.canvas }];
   const screenRef = useMeasuredRef("frame.screen", screenStyle);
-  const join2 = useCallback15(() => {
+  const join2 = useCallback17(() => {
     setLeftByChoice(false);
     client.join({ displayName, microphone: false, camera: false }).catch(() => void 0);
   }, [client, displayName]);
-  useEffect19(() => {
+  useEffect22(() => {
     if (client.getSnapshot().connection.status === "idle") join2();
   }, [client, join2]);
   useAndroidCallService();
   const microphoneOn = media.local.microphone.state === "enabled";
   const cameraOn = media.local.camera.state === "enabled";
   const { noteOwnMicrophoneChange, reportMediaFailure } = callEvents;
-  const toggleMicrophone = useCallback15(() => {
+  const toggleMicrophone = useCallback17(() => {
     haptics.mute();
     playSound(microphoneOn ? "mute" : "unmute", soundsEnabled);
     if (microphoneOn) noteOwnMicrophoneChange();
@@ -2870,12 +3148,12 @@ function CallFrame({ displayName, callName = "Call", inviteLink, onLeave, onOpen
     if (microphoneOn) client.media.setMicrophoneEnabled(false).catch(() => toasts.show({ kind: "error", dismissible: true, message: "Couldn\u2019t mute your microphone." }));
     else void turnOn().catch((cause) => reportMediaFailure("microphone", cause, turnOn));
   }, [client, microphoneOn, noteOwnMicrophoneChange, reportMediaFailure, soundsEnabled, toasts]);
-  const toggleCamera = useCallback15(() => {
+  const toggleCamera = useCallback17(() => {
     const turnOn = () => client.media.setCameraEnabled(true);
     if (cameraOn) client.media.setCameraEnabled(false).catch(() => toasts.show({ kind: "error", dismissible: true, message: "Couldn\u2019t turn off your camera." }));
     else void turnOn().catch((cause) => reportMediaFailure("camera", cause, turnOn));
   }, [cameraOn, client, reportMediaFailure, toasts]);
-  const exit = useCallback15(
+  const exit = useCallback17(
     (how) => {
       setSheet(null);
       setLeaveMenuOpen(false);
@@ -2886,26 +3164,36 @@ function CallFrame({ displayName, callName = "Call", inviteLink, onLeave, onOpen
     },
     [client, toasts]
   );
-  const pressLeave = useCallback15(() => {
+  const pressLeave = useCallback17(() => {
     haptics.leave();
     if (canEnd) setLeaveMenuOpen((open) => !open);
     else exit("leave");
   }, [canEnd, exit]);
   const devScenario = useDevScenario();
-  useEffect19(() => {
+  useEffect22(() => {
     if (devScenario.sheet && devScenario.sheet !== "route") setSheet(devScenario.sheet);
     if (devScenario.menu === "leave") setLeaveMenuOpen(true);
   }, [devScenario]);
-  const chrome = useLandscapeChrome(layout.arrangement === "landscape" && sheet === null && !layered);
+  const sharedBoard = useWhiteboard().engine.presenting;
+  const boardVisible = useStageView().boardOpen ?? sharedBoard;
+  const chrome = useLandscapeChrome({ fades: layout.arrangement === "landscape" && sheet === null && !layered, boardVisible });
+  const chromeOpacity = useSharedValue5(1);
+  useEffect22(() => {
+    chromeOpacity.value = withTiming7(chrome.hidden ? 0 : 1, timings.fade);
+  }, [chrome.hidden, chromeOpacity]);
+  const chromeStyle = useAnimatedStyle7(() => {
+    "worklet";
+    return { opacity: chromeOpacity.value };
+  });
   const forced = devScenario.callState;
   const screen = forced === "hold" ? { kind: "call" } : forced === "left" || forced === "ended" || forced === "failed" || forced === "removed" || forced === "exited" ? { kind: "status", outcome: forced } : callScreen(connection, leftByChoice);
   return /* @__PURE__ */ jsxs22(View22, { ref: screenRef, style: screenStyle, testID: "frame.screen", children: [
     /* @__PURE__ */ jsx33(StatusBar, { barStyle: scheme === "dark" ? "light-content" : "dark-content" }),
     /* @__PURE__ */ jsxs22(View22, { accessibilityElementsHidden: layered, importantForAccessibility: layered ? "no-hide-descendants" : "auto", style: StyleSheet23.absoluteFill, children: [
-      /* @__PURE__ */ jsx33(Stage, { frame: regions.stage, onOpenPeople: () => setSheet("people") }),
+      /* @__PURE__ */ jsx33(LandscapeControlsContext.Provider, { value: layout.arrangement === "landscape" && !chrome.hidden, children: /* @__PURE__ */ jsx33(Stage, { frame: regions.stage, onOpenPeople: () => setSheet("people") }) }),
       chrome.hidden ? /* @__PURE__ */ jsx33(Pressable15, { accessibilityLabel: "Show call controls", onPress: chrome.show, style: StyleSheet23.absoluteFill, testID: "frame.show-controls" }) : null,
-      /* @__PURE__ */ jsx33(Animated12.View, { pointerEvents: chrome.hidden ? "none" : "box-none", style: [styles21.region, frameStyle(regions.header), chrome.style], children: /* @__PURE__ */ jsx33(Header, { arrangement: layout.arrangement, callName, detailsOpen: sheet === "details", onOpenDetails: () => setSheet("details"), ref: nameRef }) }),
-      /* @__PURE__ */ jsx33(Animated12.View, { pointerEvents: chrome.hidden ? "none" : "box-none", style: [styles21.region, frameStyle(regions.dock), chrome.style], children: /* @__PURE__ */ jsx33(
+      /* @__PURE__ */ jsx33(Animated12.View, { pointerEvents: chrome.hidden ? "none" : "box-none", style: [styles21.region, frameStyle(regions.header), chromeStyle], children: /* @__PURE__ */ jsx33(Header, { arrangement: layout.arrangement, callName, detailsOpen: sheet === "details", onOpenDetails: () => setSheet("details"), ref: nameRef }) }),
+      /* @__PURE__ */ jsx33(Animated12.View, { pointerEvents: chrome.hidden ? "none" : "box-none", style: [styles21.region, frameStyle(regions.dock), chromeStyle], children: /* @__PURE__ */ jsx33(
         Dock,
         {
           arrangement: layout.arrangement,
@@ -2937,31 +3225,6 @@ function CallFrame({ displayName, callName = "Call", inviteLink, onLeave, onOpen
     /* @__PURE__ */ jsx33(ChatNotices, { chatVisible: sheet === "chat", onOpenChat: () => setSheet("chat"), sheetOpen: sheet === "people" || sheet === "chat" })
   ] });
 }
-function useLandscapeChrome(fades) {
-  const [hidden, setHidden] = useState13(false);
-  const [shownAt, setShownAt] = useState13(0);
-  const opacity = useSharedValue5(1);
-  useEffect19(() => {
-    opacity.value = withTiming7(hidden ? 0 : 1, timings.fade);
-  }, [hidden, opacity]);
-  useEffect19(() => {
-    if (!fades) {
-      setHidden(false);
-      return;
-    }
-    const timer = setTimeout(() => setHidden(true), durations.landscapeHide);
-    return () => clearTimeout(timer);
-  }, [fades, shownAt]);
-  const show = useCallback15(() => {
-    setHidden(false);
-    setShownAt(Date.now());
-  }, []);
-  const style = useAnimatedStyle7(() => {
-    "worklet";
-    return { opacity: opacity.value };
-  });
-  return { hidden, show, style };
-}
 function frameStyle(frame) {
   return { left: frame.x, top: frame.y, width: frame.width, height: frame.height };
 }
@@ -2973,7 +3236,7 @@ var styles21 = StyleSheet23.create({
 // src/frame/Chalk.tsx
 import { jsx as jsx34 } from "react/jsx-runtime";
 function Chalk({ client, colorScheme, onColorSchemeChange, soundsEnabled, onSoundsEnabledChange, ...frame }) {
-  useEffect20(() => releaseSounds, []);
+  useEffect23(() => releaseSounds, []);
   return /* @__PURE__ */ jsx34(GestureHandlerRootView, { style: styles22.root, children: /* @__PURE__ */ jsx34(SafeAreaProvider2, { children: /* @__PURE__ */ jsx34(PreferencesProvider, { colorScheme, onColorSchemeChange, onSoundsEnabledChange, soundsEnabled, children: (preferences) => /* @__PURE__ */ jsx34(ThemeProvider, { colorScheme: preferences.colorScheme, children: /* @__PURE__ */ jsx34(DeviceLayoutProvider, { children: /* @__PURE__ */ jsx34(PortalProvider, { children: /* @__PURE__ */ jsx34(ToastProvider, { children: /* @__PURE__ */ jsx34(ChalkProvider, { client, children: /* @__PURE__ */ jsx34(StageViewProvider, { children: /* @__PURE__ */ jsx34(CallFrame, { ...frame }) }) }) }) }) }) }) }) }) });
 }
 var styles22 = StyleSheet24.create({
@@ -2994,6 +3257,7 @@ export {
   buildChalkInviteLink,
   extractSpaceInviteFromLink,
   getClipboardInviteSuggestion,
+  parseChalkInviteLink,
   parseSpaceInviteLink,
   useCan,
   useChat,