@q9labsai/chalk-react-native 5.2.0 → 5.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q9labsai/chalk-react-native",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -106,20 +106,24 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@q9labsai/chalk-client": "^5.2.0",
-    "@q9labsai/chalk-whiteboard": "^5.2.0",
-    "@q9labsai/facehash": "^5.2.0",
+    "@q9labsai/chalk-client": "^5.2.1",
+    "@q9labsai/chalk-whiteboard": "^5.2.1",
+    "@q9labsai/facehash": "^5.2.1",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@types/node": "^26.2.0",
     "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.3",
     "expo-audio": "~55.0.18",
     "expo-clipboard": "~55.0.9",
     "expo-crypto": "~55.0.19",
     "expo-document-picker": "~55.0.15",
     "expo-file-system": "~55.0.24",
     "expo-haptics": "~55.0.18",
+    "expo-sharing": "55.0.11",
+    "happy-dom": "^21.0.4",
+    "react-dom": "19.2.7",
     "react-native-gesture-handler": "~2.30.1",
     "react-native-reanimated": "4.2.1",
     "react-native-safe-area-context": "~5.6.2",
@@ -136,6 +140,7 @@
     "expo-document-picker": "~55.0.15",
     "expo-file-system": "~55.0.24",
     "expo-haptics": "~55.0.18",
+    "expo-sharing": "55.0.11",
     "react": "^18.0.0 || ^19.0.0",
     "react-native": ">=0.77",
     "react-native-gesture-handler": "~2.30.1",
@@ -146,9 +151,9 @@
     "react-native-worklets": "0.7.2"
   },
   "scripts": {
-    "build": "rm -rf ./dist && tsup ./src/index.ts ./src/client.ts ./src/runtime.ts ./src/clipboard.ts ./src/diagnostics.ts ./src/dev.ts ./src/invites.ts ./src/ui.ts --format esm --out-dir ./dist --platform browser --external react --external react-native --external react-native-webview --external @q9labsai/chalk-whiteboard --external @cloudflare/react-native-webrtc --external expo-audio --external expo-clipboard --external expo-crypto --external expo-document-picker --external expo-file-system --external expo-haptics --external react-native-gesture-handler --external react-native-reanimated --external react-native-safe-area-context --external react-native-svg --loader .wav=copy && pnpm run build:types && pnpm run sync:whiteboard-assets",
+    "build": "rm -rf ./dist && tsup ./src/index.ts ./src/client.ts ./src/runtime.ts ./src/clipboard.ts ./src/diagnostics.ts ./src/dev.ts ./src/invites.ts ./src/ui.ts --format esm --out-dir ./dist --platform browser --external react --external react-native --external react-native-webview --external @q9labsai/chalk-whiteboard --external @cloudflare/react-native-webrtc --external expo-audio --external expo-clipboard --external expo-crypto --external expo-document-picker --external expo-file-system --external expo-sharing --external expo-haptics --external react-native-gesture-handler --external react-native-reanimated --external react-native-safe-area-context --external react-native-svg --loader .wav=copy && pnpm run build:types && pnpm run sync:whiteboard-assets",
     "build:types": "rm -f tsconfig.tsbuildinfo && tsc --build tsconfig.json",
-    "dev": "tsup ./src/index.ts ./src/client.ts ./src/runtime.ts ./src/clipboard.ts ./src/diagnostics.ts ./src/dev.ts ./src/invites.ts ./src/ui.ts --format esm --out-dir ./dist --platform browser --external react --external react-native --external react-native-webview --external @q9labsai/chalk-whiteboard --external @cloudflare/react-native-webrtc --external expo-audio --external expo-clipboard --external expo-crypto --external expo-document-picker --external expo-file-system --external expo-haptics --external react-native-gesture-handler --external react-native-reanimated --external react-native-safe-area-context --external react-native-svg --loader .wav=copy --watch",
+    "dev": "tsup ./src/index.ts ./src/client.ts ./src/runtime.ts ./src/clipboard.ts ./src/diagnostics.ts ./src/dev.ts ./src/invites.ts ./src/ui.ts --format esm --out-dir ./dist --platform browser --external react --external react-native --external react-native-webview --external @q9labsai/chalk-whiteboard --external @cloudflare/react-native-webrtc --external expo-audio --external expo-clipboard --external expo-crypto --external expo-document-picker --external expo-file-system --external expo-sharing --external expo-haptics --external react-native-gesture-handler --external react-native-reanimated --external react-native-safe-area-context --external react-native-svg --loader .wav=copy --watch",
     "sync:whiteboard-assets": "node ./scripts/sync-whiteboard-assets.mjs",
     "test": "pnpm exec vitest run",
     "check-types": "tsc-rs --project tsconfig.check-types.json --noEmit",

package/src/components/EmbeddedWhiteboard.tsx

@@ -1,12 +1,17 @@
-import { ChalkWhiteboardController, type ChalkEmbeddedWhiteboardTransport, type ChalkEmbeddedWhiteboardViewport } from "@q9labsai/chalk-whiteboard/embedded";
+import { ChalkWhiteboardController, type ChalkEmbeddedWhiteboardTransport, type ChalkEmbeddedBoardContext, type ChalkEmbeddedWhiteboardViewport } from "@q9labsai/chalk-whiteboard/embedded";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ActivityIndicator, Pressable, Text, useWindowDimensions, View, type LayoutChangeEvent, type StyleProp, type ViewStyle } from "react-native";
+import { exportBoardImage } from "../whiteboard/export-board-image";
+import { useToasts } from "../primitives/toast/ToastStack";
 import WebView, { type WebViewMessageEvent, type WebViewNavigation } from "react-native-webview";
 
 import { isEmbeddedWhiteboardNavigationAllowed, rendererURLWithContext, resolveEmbeddedWhiteboardRendererURL } from "../whiteboard/embedded-whiteboard-assets";
 import { createEmbeddedWhiteboardViewport } from "../whiteboard/embedded-whiteboard-viewport";
 
 export interface EmbeddedWhiteboardProps {
+  readonly board: ChalkEmbeddedBoardContext;
+  readonly onFollow?: (participantId: string | null) => void;
+  readonly onCloseBoard?: () => void;
   readonly transport: ChalkEmbeddedWhiteboardTransport;
   readonly journeyId: string;
   readonly traceparent?: string;
@@ -20,7 +25,7 @@ export interface EmbeddedWhiteboardProps {
   readonly testID?: string;
   readonly onMetric?: (metric: { readonly name: string; readonly value: number; readonly attributes?: Readonly<Record<string, string | number | boolean>> }) => void;
   readonly onError?: (error: { readonly code: string; readonly message: string; readonly recoverable: boolean }) => void;
-  readonly onUserExport?: (value: { readonly requestId: string; readonly format: "png" | "svg"; readonly mimeType: string; readonly dataURL: string }) => void;
+  readonly onUserExport?: (value: { readonly requestId: string; readonly format: "png" | "svg"; readonly mimeType: string; readonly dataURL: string; readonly action?: "download" | "copy" }) => void | Promise<void>;
 }
 
 export const embeddedWhiteboardWebViewSecurityPolicy = Object.freeze({
@@ -28,7 +33,7 @@ export const embeddedWhiteboardWebViewSecurityPolicy = Object.freeze({
   allowFileAccessFromFileURLs: false,
   allowUniversalAccessFromFileURLs: false,
   cacheEnabled: false,
-  domStorageEnabled: false,
+  domStorageEnabled: true,
   javaScriptCanOpenWindowsAutomatically: false,
   javaScriptEnabled: true,
   mixedContentMode: "never" as const,
@@ -37,11 +42,41 @@ export const embeddedWhiteboardWebViewSecurityPolicy = Object.freeze({
   thirdPartyCookiesEnabled: false,
 });
 
-export function EmbeddedWhiteboard({ transport, journeyId, traceparent, tracestate, canDraw, canClear, theme: themeOverride, localParticipantColor, rendererURL: rendererURLOverride, style, testID, onMetric, onError, onUserExport }: EmbeddedWhiteboardProps): React.JSX.Element {
+export function EmbeddedWhiteboard({
+  board,
+  onFollow,
+  onCloseBoard,
+  transport,
+  journeyId,
+  traceparent,
+  tracestate,
+  canDraw,
+  canClear,
+  theme: themeOverride,
+  localParticipantColor,
+  rendererURL: rendererURLOverride,
+  style,
+  testID,
+  onMetric,
+  onError,
+  onUserExport,
+}: EmbeddedWhiteboardProps): React.JSX.Element {
+  const toasts = useToasts();
+  const noticesRef = useRef(new Map<string, number>());
+  const clearNotices = useCallback(() => {
+    noticesRef.current.forEach((id) => toasts.dismiss(id));
+    noticesRef.current.clear();
+  }, [toasts]);
   const theme = themeOverride ?? "light";
   const webViewRef = useRef<WebView>(null);
   const controllerRef = useRef<ChalkWhiteboardController | null>(null);
   const listenersRef = useRef(new Set<(message: string) => void>());
+  const boardRef = useRef(board);
+  boardRef.current = board;
+  const onFollowRef = useRef(onFollow);
+  onFollowRef.current = onFollow;
+  const onCloseBoardRef = useRef(onCloseBoard);
+  onCloseBoardRef.current = onCloseBoard;
   const onMetricRef = useRef(onMetric);
   const onErrorRef = useRef(onError);
   const onUserExportRef = useRef(onUserExport);
@@ -71,7 +106,13 @@ export function EmbeddedWhiteboard({ transport, journeyId, traceparent, tracesta
   );
   const handleControllerError = useCallback((error: { readonly code: string; readonly message: string; readonly recoverable: boolean }) => onErrorRef.current?.(error), []);
   const handleControllerMetric = useCallback((metric: { readonly name: string; readonly value: number; readonly attributes?: Readonly<Record<string, string | number | boolean>> }) => onMetricRef.current?.(metric), []);
-  const handleControllerUserExport = useCallback((value: { readonly requestId: string; readonly format: "png" | "svg"; readonly mimeType: string; readonly dataURL: string }) => onUserExportRef.current?.(value), []);
+  const handleControllerUserExport = useCallback(async (value: { readonly requestId: string; readonly format: "png" | "svg"; readonly mimeType: string; readonly dataURL: string; readonly action?: "download" | "copy" }) => {
+    if (onUserExportRef.current) {
+      await onUserExportRef.current(value);
+      return;
+    }
+    await exportBoardImage(value);
+  }, []);
 
   useEffect(() => {
     let active = true;
@@ -99,6 +140,43 @@ export function EmbeddedWhiteboard({ transport, journeyId, traceparent, tracesta
       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 !== undefined) 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,
@@ -114,8 +192,13 @@ export function EmbeddedWhiteboard({ transport, journeyId, traceparent, tracesta
     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]);
+
+  useEffect(() => {
+    controllerRef.current?.setBoard(board);
+  }, [board]);
 
   useEffect(() => {
     controllerRef.current?.setCapabilities({ canDraw, canClear });
@@ -136,6 +219,7 @@ export function EmbeddedWhiteboard({ transport, journeyId, traceparent, tracesta
   };
   const allowNavigation = (request: WebViewNavigation): boolean => Boolean(rendererURL && isEmbeddedWhiteboardNavigationAllowed(request.url, rendererURL));
   const reloadRenderer = (): void => {
+    clearNotices();
     controllerRef.current?.rendererReloaded();
     setRendererGeneration(createRendererGeneration());
   };

package/src/dock/Dock.tsx

@@ -1,4 +1,4 @@
-import { useConnection } from "../hooks/space-hooks";
+import { useConnection, useMedia } from "../hooks/space-hooks";
 import { memo, useCallback, useEffect, useRef, useState, type RefObject } from "react";
 import { StyleSheet, View } from "react-native";
 import { useDevScenario } from "../frame/dev-scenario";
@@ -31,14 +31,25 @@ export type DockProps = {
  */
 export const Dock = memo(function Dock({ arrangement, microphoneOn, cameraOn, onToggleMicrophone, onToggleCamera, onOpenMore, onLeave, moreOpen, leaveOpen, moreRef, leaveRef }: DockProps) {
   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<View>("frame.dock", dockStyle);
   const output = useAudioOutput();
   return (
     <View accessibilityLabel="Call controls" accessibilityRole="toolbar" pointerEvents="box-none" ref={dockRef} style={dockStyle} testID="frame.dock">
-      <IconButton accessibilityLabel={microphoneOn ? "Mute microphone" : "Unmute microphone"} icon={microphoneOn ? "mic" : "micOff"} off={!microphoneOn} disabled={!live && !microphoneOn} onCanvas onPress={onToggleMicrophone} size={size} testID="dock.microphone" />
-      <IconButton accessibilityLabel={cameraOn ? "Turn off camera" : "Turn on camera"} icon={cameraOn ? "cam" : "camOff"} off={!cameraOn} disabled={!live && !cameraOn} onCanvas onPress={onToggleCamera} size={size} testID="dock.camera" />
+      <IconButton
+        accessibilityLabel={microphoneOn ? "Mute microphone" : "Unmute microphone"}
+        busy={local.microphone.state === "requesting"}
+        icon={microphoneOn ? "mic" : "micOff"}
+        off={!microphoneOn}
+        disabled={!live && !microphoneOn}
+        onCanvas
+        onPress={onToggleMicrophone}
+        size={size}
+        testID="dock.microphone"
+      />
+      <IconButton accessibilityLabel={cameraOn ? "Turn off camera" : "Turn on camera"} busy={local.camera.state === "requesting"} icon={cameraOn ? "cam" : "camOff"} off={!cameraOn} disabled={!live && !cameraOn} onCanvas onPress={onToggleCamera} size={size} testID="dock.camera" />
       {output ? <AudioOutputButton captioned={arrangement === "portrait"} output={output} size={size} /> : null}
       <IconButton accessibilityLabel="More options" expanded={moreOpen} icon="more" onCanvas onPress={onOpenMore} ref={moreRef} size={size} testID="dock.more" />
       {arrangement === "pad" ? <View style={styles.gap} /> : null}

package/src/dock/MoreSheet.tsx

@@ -48,12 +48,14 @@ const REACTIONS: readonly (readonly [Reaction, string])[] = [
 export function MoreSheet({ open, onClose, onOpenPeople, onOpenChat, inviteLink, returnFocusRef }: MoreSheetProps): React.JSX.Element {
   const client = useSpaceClient();
   const self = useSelf();
+  const stage = useStageView();
   const people = 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 = useCallback((message: string) => () => toasts.show({ kind: "error", dismissible: true, message }), [toasts]);
   const toggleHand = useCallback(() => {
@@ -86,6 +88,27 @@ export function MoreSheet({ open, onClose, onOpenPeople, onOpenChat, inviteLink,
       <SheetGroup>
         {inviteLink ? <CopyLinkRow link={inviteLink} /> : null}
         {inviteLink ? <SheetRow icon="iosShare" label="Share link" onPress={() => shareLink(inviteLink)} testID="more.share" /> : null}
+        <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’t open the board. Try again."));
+          }}
+          testID="more.board"
+        />
         <RecordingRow onDone={onClose} />
         <ChatRow onPress={onOpenChat} />
         <SheetRow end={<PeopleCount count={people} />} icon="users" label="People" onPress={onOpenPeople} testID="more.people" />

package/src/frame/CallFrame.tsx

@@ -9,18 +9,19 @@ import { MoreSheet } from "../dock/MoreSheet";
 import { haptics } from "../haptics/haptics";
 import { CallDetailsSheet } from "../header/CallDetailsSheet";
 import { Header } from "../header/Header";
-import { useCan, useConnection, useMedia } from "../hooks/space-hooks";
+import { useCan, useConnection, useMedia, useWhiteboard } from "../hooks/space-hooks";
 import { timings } from "../motion/motion";
 import { ToastStack, useToasts } from "../primitives/toast/ToastStack";
 import { ChatNotices } from "../sheets/people-chat/ChatNotices";
 import { PeopleChatSheet } from "../sheets/people-chat/PeopleChatSheet";
 import { playSound } from "../sounds/sounds";
 import { Stage } from "../stage/Stage";
+import { useStageView } from "../stage/stage-view";
+import { useLandscapeChrome } from "./use-landscape-chrome";
 import { CallOverlays } from "../status/CallOverlays";
 import { ArrivalScreen } from "../status/ChalkArrival";
 import { callScreen } from "../status/call-screen";
 import { useTheme } from "../theme/theme";
-import { durations } from "../theme/tokens";
 import { useCallEventToasts, type Permission } from "../toasts/CallEventToasts";
 import { useDevScenario } from "./dev-scenario";
 import { useDeviceLayout } from "./device-layout";
@@ -28,6 +29,7 @@ import { PortalHost, usePortalCount } from "./portal";
 import { useMeasuredRef } from "./measurement";
 import { usePreferences } from "./preferences";
 import { frameRegions } from "./regions";
+import { LandscapeControlsContext } from "./call-controls";
 
 export type CallFrameProps = {
   readonly displayName?: string;
@@ -119,7 +121,17 @@ export function CallFrame({ displayName, callName = "Call", inviteLink, onLeave,
     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 = useSharedValue(1);
+  useEffect(() => {
+    chromeOpacity.value = withTiming(chrome.hidden ? 0 : 1, timings.fade);
+  }, [chrome.hidden, chromeOpacity]);
+  const chromeStyle = useAnimatedStyle(() => {
+    "worklet";
+    return { opacity: chromeOpacity.value };
+  });
   const forced = devScenario.callState;
   const screen = forced === "hold" ? { kind: "call" as const } : forced === "left" || forced === "ended" || forced === "failed" || forced === "removed" || forced === "exited" ? { kind: "status" as const, outcome: forced } : callScreen(connection, leftByChoice);
 
@@ -127,12 +139,14 @@ export function CallFrame({ displayName, callName = "Call", inviteLink, onLeave,
     <View ref={screenRef} style={screenStyle} testID="frame.screen">
       <StatusBar barStyle={scheme === "dark" ? "light-content" : "dark-content"} />
       <View accessibilityElementsHidden={layered} importantForAccessibility={layered ? "no-hide-descendants" : "auto"} style={StyleSheet.absoluteFill}>
-        <Stage frame={regions.stage} onOpenPeople={() => setSheet("people")} />
+        <LandscapeControlsContext.Provider value={layout.arrangement === "landscape" && !chrome.hidden}>
+          <Stage frame={regions.stage} onOpenPeople={() => setSheet("people")} />
+        </LandscapeControlsContext.Provider>
         {chrome.hidden ? <Pressable accessibilityLabel="Show call controls" onPress={chrome.show} style={StyleSheet.absoluteFill} testID="frame.show-controls" /> : null}
-        <Animated.View pointerEvents={chrome.hidden ? "none" : "box-none"} style={[styles.region, frameStyle(regions.header), chrome.style]}>
+        <Animated.View pointerEvents={chrome.hidden ? "none" : "box-none"} style={[styles.region, frameStyle(regions.header), chromeStyle]}>
           <Header arrangement={layout.arrangement} callName={callName} detailsOpen={sheet === "details"} onOpenDetails={() => setSheet("details")} ref={nameRef} />
         </Animated.View>
-        <Animated.View pointerEvents={chrome.hidden ? "none" : "box-none"} style={[styles.region, frameStyle(regions.dock), chrome.style]}>
+        <Animated.View pointerEvents={chrome.hidden ? "none" : "box-none"} style={[styles.region, frameStyle(regions.dock), chromeStyle]}>
           <Dock
             arrangement={layout.arrangement}
             cameraOn={cameraOn}
@@ -172,33 +186,6 @@ export function CallFrame({ displayName, callName = "Call", inviteLink, onLeave,
   );
 }
 
-/** Phone landscape (L1): the controls fade after 4 s and come back on a tap. */
-function useLandscapeChrome(fades: boolean): { readonly hidden: boolean; readonly show: () => void; readonly style: ReturnType<typeof useAnimatedStyle> } {
-  const [hidden, setHidden] = useState(false);
-  const [shownAt, setShownAt] = useState(0);
-  const opacity = useSharedValue(1);
-  useEffect(() => {
-    opacity.value = withTiming(hidden ? 0 : 1, timings.fade);
-  }, [hidden, opacity]);
-  useEffect(() => {
-    if (!fades) {
-      setHidden(false);
-      return;
-    }
-    const timer = setTimeout(() => setHidden(true), durations.landscapeHide);
-    return () => clearTimeout(timer);
-  }, [fades, shownAt]);
-  const show = useCallback(() => {
-    setHidden(false);
-    setShownAt(Date.now());
-  }, []);
-  const style = useAnimatedStyle(() => {
-    "worklet";
-    return { opacity: opacity.value };
-  });
-  return { hidden, show, style };
-}
-
 function frameStyle(frame: { readonly x: number; readonly y: number; readonly width: number; readonly height: number }) {
   return { left: frame.x, top: frame.y, width: frame.width, height: frame.height };
 }

package/src/frame/call-controls.ts

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+
+/** Landscape controls overlay the stage, so board tools need room above them. */
+export const LandscapeControlsContext = createContext(false);

package/src/frame/use-landscape-chrome.ts

@@ -0,0 +1,22 @@
+import { useCallback, useEffect, useState } from "react";
+import { durations } from "../theme/tokens";
+
+/** A visible board stays interactive instead of acquiring the tap-to-reveal overlay. */
+export function useLandscapeChrome({ fades, boardVisible }: { readonly fades: boolean; readonly boardVisible: boolean }) {
+  const canHide = fades && !boardVisible;
+  const [hidden, setHidden] = useState(false);
+  const [shownAt, setShownAt] = useState(0);
+  useEffect(() => {
+    if (!canHide) {
+      setHidden(false);
+      return;
+    }
+    const timer = setTimeout(() => setHidden(true), durations.landscapeHide);
+    return () => clearTimeout(timer);
+  }, [canHide, shownAt]);
+  const show = useCallback(() => {
+    setHidden(false);
+    setShownAt(Date.now());
+  }, []);
+  return { hidden: canHide && hidden, show };
+}

package/src/index.ts

@@ -7,6 +7,6 @@ export type { ColorScheme, Palette } from "./theme/tokens";
 export { ChalkProvider, useSpaceClient } from "./context/space-client-context";
 export type { ChalkProviderProps } from "./context/space-client-context";
 export { useCan, useChat, useConnection, useMedia, useParticipants, useReactions, useRecording, useSelf, useWhiteboard } from "./hooks/space-hooks";
-export { extractSpaceInviteFromLink, getClipboardInviteSuggestion, parseSpaceInviteLink } from "./invites";
-export type { SpaceInviteLink } from "./invites";
+export { extractSpaceInviteFromLink, getClipboardInviteSuggestion, parseChalkInviteLink, parseSpaceInviteLink } from "./invites";
+export type { ChalkInviteLink, SpaceInviteLink } from "./invites";
 export { buildChalkInviteLink } from "./utils/build-chalk-invite-link";

package/src/invites.ts

@@ -1,3 +1,5 @@
+import { parseInviteCode } from "@q9labsai/chalk-client/invites";
+
 const CHALK_INVITE_HOSTS: readonly string[] = ["chalkmeet.com", "chalk.q9labs.ai"];
 const CHALK_CUSTOM_PROTOCOLS = new Set(["chalk:", "ai.q9labs.chalk.mobile:"]);
 const SPACE_SLUG_PATTERN = /^[A-Za-z0-9][A-Za-z0-9_-]{0,127}$/u;
@@ -8,6 +10,11 @@ export type SpaceInviteLink = {
   readonly spaceInviteToken: string;
 };
 
+export type ChalkInviteLink = {
+  readonly slug?: string;
+  readonly spaceInviteToken: string;
+};
+
 export function parseSpaceInviteLink(input: string): SpaceInviteLink | null {
   const trimmed = input.trim();
   if (!trimmed) {
@@ -36,6 +43,30 @@ export function parseSpaceInviteLink(input: string): SpaceInviteLink | null {
   }
 }
 
+export function parseChalkInviteLink(input: string): ChalkInviteLink | null {
+  const trimmed = input.trim();
+  const code = parseInviteCode(trimmed);
+  if (code) return { spaceInviteToken: code };
+
+  const legacy = parseSpaceInviteLink(trimmed);
+  if (legacy) return legacy;
+
+  const normalized = trimmed.includes("://") ? trimmed : CHALK_INVITE_HOSTS.some((host) => trimmed.startsWith(`${host}/`)) ? `https://${trimmed}` : null;
+  if (!normalized) return null;
+
+  try {
+    const parsed = new URL(normalized);
+    if (!CHALK_CUSTOM_PROTOCOLS.has(parsed.protocol) && !isAllowedWebInviteOrigin(parsed)) return null;
+    const pathSegments = parsed.pathname.split("/").filter(Boolean);
+    if (CHALK_CUSTOM_PROTOCOLS.has(parsed.protocol)) pathSegments.unshift(parsed.hostname);
+    if (pathSegments.length !== 1 || parsed.search || parsed.hash) return null;
+    const pathCode = parseInviteCode(decodeURIComponent(pathSegments[0] ?? ""));
+    return pathCode ? { spaceInviteToken: pathCode } : null;
+  } catch {
+    return null;
+  }
+}
+
 function isChalkInviteHost(hostname: string): boolean {
   return CHALK_INVITE_HOSTS.some((host) => host === hostname);
 }
@@ -63,5 +94,5 @@ export function getClipboardInviteSuggestion(clipboardText: string | null | unde
     return null;
   }
 
-  return parseSpaceInviteLink(normalizedClipboardText) ? normalizedClipboardText : null;
+  return parseChalkInviteLink(normalizedClipboardText) ? normalizedClipboardText : null;
 }

package/src/primitives/IconButton.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, memo } from "react";
-import { Pressable, StyleSheet, View, type View as ViewType } from "react-native";
+import { ActivityIndicator, Pressable, StyleSheet, View, type View as ViewType } from "react-native";
 import Animated, { useAnimatedStyle } from "react-native-reanimated";
 import { Icon, type IconName } from "../icons/Icon";
 import { usePressAnimation } from "../motion/press";
@@ -27,12 +27,13 @@ export type IconButtonProps = {
   /** Sits directly on the call canvas (dock, header); the light theme rings it with a hairline. */
   readonly onCanvas?: boolean;
   readonly disabled?: boolean;
+  readonly busy?: boolean;
   readonly testID?: string;
 };
 
 /** The mockup's round button (`.rb`): press scale 0.94 over 150 ms, background switches at once. */
 export const IconButton = memo(
-  forwardRef<ViewType, IconButtonProps>(function IconButton({ icon, accessibilityLabel, onPress, size = 44, tone = "raised", selected = false, off = false, caption, expanded, onCanvas = false, disabled = false, testID }, ref) {
+  forwardRef<ViewType, IconButtonProps>(function IconButton({ icon, accessibilityLabel, onPress, size = 44, tone = "raised", selected = false, off = false, caption, expanded, onCanvas = false, disabled = false, busy = false, testID }, ref) {
     const { colors, elevation } = useTheme();
     const press = usePressAnimation("round");
     const base = selected ? colors.text : BASE[tone](colors);
@@ -51,8 +52,8 @@ export const IconButton = memo(
       <Pressable
         accessibilityLabel={accessibilityLabel}
         accessibilityRole="button"
-        accessibilityState={{ selected, disabled, expanded }}
-        disabled={disabled}
+        accessibilityState={{ selected, disabled: disabled || busy, expanded, busy }}
+        disabled={disabled || busy}
         hitSlop={size < 44 ? (44 - size) / 2 : undefined}
         onPress={onPress}
         onPressIn={press.onPressIn}
@@ -61,7 +62,7 @@ export const IconButton = memo(
         testID={testID}
       >
         <Animated.View ref={roundRef} style={[roundStyle, background, press.scaleStyle]}>
-          <Icon color={iconColor} name={icon} size={tone === "ghost" ? 18 : 20} />
+          {busy ? <ActivityIndicator color={iconColor} size="small" /> : <Icon color={iconColor} name={icon} size={tone === "ghost" ? 18 : 20} />}
         </Animated.View>
         {caption ? (
           <View pointerEvents="none" style={styles.captionBox}>

package/src/primitives/NameTag.tsx

@@ -8,6 +8,7 @@ import { ChalkText } from "./ChalkText";
 export type NameTagProps = {
   readonly name: string;
   readonly muted?: boolean;
+  readonly following?: boolean;
   readonly pinned?: boolean;
   /** A leading icon for a tile that isn't a person, such as `share` on a shared screen or `pen` on the board. */
   readonly icon?: IconName;
@@ -20,7 +21,7 @@ export type NameTagProps = {
 };
 
 /** The mockup's name tag (`.tag`): bottom-left of a tile, white on the dark overlay in both themes. */
-export const NameTag = memo(function NameTag({ name, muted = false, pinned = false, icon, you = false, handRaised = false, handOrder, testID }: NameTagProps): React.JSX.Element {
+export const NameTag = memo(function NameTag({ name, muted = false, pinned = false, following = false, icon, you = false, handRaised = false, handOrder, testID }: NameTagProps): React.JSX.Element {
   const tagRef = useMeasuredRef<View>(testID, styles.tag);
   return (
     <View pointerEvents="none" style={styles.slot}>
@@ -30,6 +31,11 @@ export const NameTag = memo(function NameTag({ name, muted = false, pinned = fal
         <ChalkText color={fixed.overlayText} numberOfLines={1} style={styles.name} variant="label">
           {name}
         </ChalkText>
+        {following ? (
+          <ChalkText color={fixed.overlayText} variant="label">
+            following
+          </ChalkText>
+        ) : null}
         {you ? (
           <ChalkText color={fixed.overlayText} style={styles.you} variant="label">
             (You)

package/src/primitives/TileShell.tsx

@@ -9,6 +9,7 @@ import { fixed, radii } from "../theme/tokens";
 export type TileShellProps = {
   readonly children: ReactNode;
   /** The live ring shows only on a speaking person whose camera is on; a camera-off face reacts instead. */
+  readonly selected?: boolean;
   readonly speaking?: boolean;
   readonly cameraOn?: boolean;
   /** Speaking level from 0 to 1; the ring's opacity follows it (0.3 + 0.7 × level). */
@@ -21,7 +22,7 @@ export type TileShellProps = {
  * content, and the live ring drawn over the video. The stage fills it with video or an
  * avatar and a `NameTag`.
  */
-export const TileShell = memo(function TileShell({ children, speaking = false, cameraOn = false, level, testID }: TileShellProps): React.JSX.Element {
+export const TileShell = memo(function TileShell({ children, selected = false, speaking = false, cameraOn = false, level, testID }: TileShellProps): React.JSX.Element {
   const { colors } = useTheme();
   const { phone } = useDeviceLayout();
   const radius = phone ? radii.tilePhone : radii.tile;
@@ -38,6 +39,7 @@ export const TileShell = memo(function TileShell({ children, speaking = false, c
   return (
     <View style={[styles.tile, { borderRadius: radius, backgroundColor: colors.tile }]} testID={testID}>
       {children}
+      {selected ? <View pointerEvents="none" style={[StyleSheet.absoluteFill, { borderRadius: radius, borderWidth: 2, borderColor: colors.text, zIndex: 6 }]} /> : null}
       <Animated.View pointerEvents="none" style={[styles.ring, { borderRadius: radius }, ringStyle]} testID={testID ? `${testID}.ring` : undefined}>
         <View style={[styles.ringShade, { borderRadius: radius - 3 }]} />
       </Animated.View>