@q9labsai/chalk-react-native 4.0.0 → 4.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q9labsai/chalk-react-native",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -150,15 +150,15 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@q9labsai/chalk-client": "^4.0.0",
-    "@q9labsai/chalk-whiteboard": "^4.0.0",
-    "@q9labsai/facehash": "^4.0.0"
+    "@q9labsai/chalk-client": "^4.1.0",
+    "@q9labsai/chalk-whiteboard": "^4.1.0",
+    "@q9labsai/facehash": "^4.1.0"
   },
   "devDependencies": {
-    "@types/node": "^24.10.1",
-    "@types/react": "^19.0.0",
+    "@types/node": "^26.2.0",
+    "@types/react": "^19.2.18",
     "react-native-webview": "13.16.1",
-    "typescript": "^5.7.2"
+    "typescript": "^6.0.3"
   },
   "peerDependencies": {
     "@cloudflare/react-native-webrtc": "~125.0.1 || ~125.0.3",

package/src/components/Chalk.test.tsx

@@ -13,6 +13,7 @@ const testingLibrary = createRequire(import.meta.url)(join(process.cwd(), "../re
 const { act, cleanup, render } = testingLibrary;
 
 const nativeClientFactory = vi.hoisted(() => vi.fn());
+const spaceViewSpy = vi.hoisted(() => vi.fn(() => <div data-testid="space" />));
 
 vi.mock("react-native", () => ({
   StyleSheet: { create: <T,>(styles: T) => styles },
@@ -21,7 +22,7 @@ vi.mock("react-native", () => ({
   Pressable: ({ children }: { readonly children?: ReactNode }) => children,
 }));
 vi.mock("../space-client/create-native-space-client", () => ({ createNativeSpaceClient: nativeClientFactory }));
-vi.mock("./SpaceView", () => ({ SpaceView: () => <div data-testid="space" /> }));
+vi.mock("./SpaceView", () => ({ SpaceView: spaceViewSpy }));
 vi.mock("./Entrance", () => ({ Entrance: () => <div data-testid="entrance" /> }));
 
 import { Chalk } from "./Chalk";
@@ -29,6 +30,7 @@ import { Chalk } from "./Chalk";
 afterEach(() => {
   cleanup();
   nativeClientFactory.mockReset();
+  spaceViewSpy.mockClear();
 });
 
 describe("Chalk", () => {
@@ -55,6 +57,14 @@ describe("Chalk", () => {
     expect(onJoined).not.toHaveBeenCalled();
   });
 
+  it("forwards the optional diagnostics action to the live Space", () => {
+    const client = createClient("live");
+    const onOpenDiagnostics = vi.fn();
+    render(<Chalk client={client.client} onOpenDiagnostics={onOpenDiagnostics} />);
+
+    expect(spaceViewSpy).toHaveBeenCalledWith(expect.objectContaining({ onOpenDiagnostics }), undefined);
+  });
+
   it("forwards canonical client events and cleans their subscriptions up", () => {
     const client = createClient("live");
     const handlers = new Map<string, (event: unknown) => void>();

package/src/components/Chalk.tsx

@@ -64,6 +64,7 @@ type ChalkCommonProps = ChalkCallbacks & {
   readonly inviteLink?: string;
   readonly layout?: SpaceLayout;
   readonly onLayoutChange?: (layout: SpaceLayout) => void;
+  readonly onOpenDiagnostics?: () => void;
 };
 
 export type ChalkProps = ChalkCommonProps &
@@ -264,7 +265,19 @@ function SpaceExperience(props: ChalkProps): React.JSX.Element {
       </AppearanceLayer>
     );
 
-  return <NativeSpaceView features={props.features} inviteLink={props.inviteLink} layout={props.layout} logoUrl={props.logoUrl} onLayoutChange={props.onLayoutChange} pickChatFiles={props.pickChatFiles} reconnecting={connection.status === "reconnecting"} spaceName={spaceName} />;
+  return (
+    <NativeSpaceView
+      features={props.features}
+      inviteLink={props.inviteLink}
+      layout={props.layout}
+      logoUrl={props.logoUrl}
+      onLayoutChange={props.onLayoutChange}
+      onOpenDiagnostics={props.onOpenDiagnostics}
+      pickChatFiles={props.pickChatFiles}
+      reconnecting={connection.status === "reconnecting"}
+      spaceName={spaceName}
+    />
+  );
 }
 
 function defaultJoinOptions(props: ChalkProps): Parameters<SpaceClient["join"]>[0] {
@@ -282,18 +295,31 @@ type NativeSpaceViewProps = {
   readonly layout?: SpaceLayout;
   readonly logoUrl?: string;
   readonly onLayoutChange?: (layout: SpaceLayout) => void;
+  readonly onOpenDiagnostics?: () => void;
   readonly pickChatFiles?: () => Promise<readonly ChatUploadFile[]>;
   readonly reconnecting: boolean;
   readonly spaceName: string;
 };
 
-function NativeSpaceView({ features, inviteLink, layout, logoUrl, onLayoutChange, pickChatFiles, reconnecting, spaceName }: NativeSpaceViewProps): React.JSX.Element {
+function NativeSpaceView({ features, inviteLink, layout, logoUrl, onLayoutChange, onOpenDiagnostics, pickChatFiles, reconnecting, spaceName }: NativeSpaceViewProps): React.JSX.Element {
   const client = useSpaceClient();
   const theme = useNativeTheme();
 
   return (
     <View style={[styles.space, { backgroundColor: theme.colors.background }]}>
-      <SpaceView features={features} inviteLink={inviteLink} layout={layout} logoUrl={logoUrl} onEndEpisode={() => client.endEpisode()} onLayoutChange={onLayoutChange} onLeave={() => client.leave()} pickChatFiles={pickChatFiles} reconnecting={reconnecting} spaceName={spaceName} />
+      <SpaceView
+        features={features}
+        inviteLink={inviteLink}
+        layout={layout}
+        logoUrl={logoUrl}
+        onEndEpisode={() => client.endEpisode()}
+        onLayoutChange={onLayoutChange}
+        onLeave={() => client.leave()}
+        onOpenDiagnostics={onOpenDiagnostics}
+        pickChatFiles={pickChatFiles}
+        reconnecting={reconnecting}
+        spaceName={spaceName}
+      />
       <NativeTextureOverlay />
     </View>
   );

package/src/components/SpaceView.shared.test.tsx

@@ -67,13 +67,14 @@ describe("SpaceViewShared", () => {
   });
 
   it("passes reconnecting state and capability-gated controls to the native surface", () => {
-    const props = { onLeave: vi.fn(), reconnecting: true, logoUrl: "https://cdn.example.test/logo.png", spaceName: "Design space" };
+    const props = { onLeave: vi.fn(), onOpenDiagnostics: vi.fn(), reconnecting: true, logoUrl: "https://cdn.example.test/logo.png", spaceName: "Design space" };
     const tree = SpaceViewShared(props);
 
     expect(state.useSpaceViewController).toHaveBeenCalledWith(props);
     expect(findText(tree)).toContain("Reconnecting… controls will resume shortly.");
     expect(findElement(tree, "SpaceTopBarAndroid")).toMatchObject({ props: { logoUrl: props.logoUrl, spaceName: props.spaceName } });
     expect(findElement(tree, "SpaceBottomDockAndroid")).toMatchObject({ props: { onOpenChat: expect.any(Function), unreadChatCount: 0 } });
+    expect(findElement(tree, "SpaceActionMenu")).toMatchObject({ props: { onOpenDiagnostics: props.onOpenDiagnostics } });
   });
 
   it("renders the whiteboard surface instead of a stage or grid when it is open", () => {

package/src/components/SpaceView.shared.tsx

@@ -72,7 +72,7 @@ export function SpaceViewShared(props: SpaceViewProps): React.JSX.Element {
         simulatorMediaDisabled={controller.simulatorMediaDisabled}
         unreadChatCount={controller.chat.unreadCount}
       />
-      <SpaceActionMenu controller={controller} />
+      <SpaceActionMenu controller={controller} onOpenDiagnostics={props.onOpenDiagnostics} />
       {controller.panel === "settings" ? <SettingsSheet controller={controller} isOpen onClose={controller.closePanel} /> : <SpacePanelSheet controller={controller} />}
       <ReactionPicker isOpen={controller.reactionPickerOpen} onClose={() => controller.setReactionPickerOpen(false)} onSelect={(reaction) => selectSpaceReaction(controller, reaction)} />
     </View>

package/src/components/SpaceView.tsx

@@ -29,6 +29,7 @@ export interface SpaceViewProps {
   features?: SpaceViewFeatures;
   onLeave: () => void | Promise<void>;
   onEndEpisode?: () => void | Promise<void>;
+  onOpenDiagnostics?: () => void;
   onDiagnosticsChange?: (snapshot: SpaceViewDiagnosticsSnapshot) => void;
   /** Selects files; the SDK owns bounds, upload, and send sequencing. */
   pickChatFiles?: () => Promise<readonly ChatUploadFile[]>;

package/src/components/native-space-view/SpaceActionMenu.test.tsx

@@ -59,6 +59,22 @@ describe("SpaceActionMenu", () => {
     expect(sendReaction).toHaveBeenCalledWith("🎉");
   });
 
+  it("shows diagnostics only when its open handler is provided", () => {
+    const setActionsOpen = vi.fn();
+    const onOpenDiagnostics = vi.fn();
+    const controller = actionController({ setActionsOpen });
+
+    expect(findText(SpaceActionMenu({ controller }))).not.toContain("Diagnostics");
+
+    const tree = SpaceActionMenu({ controller, onOpenDiagnostics });
+    const diagnostics = findElements(tree, "Pressable").find((element) => findText(element).length === 1 && findText(element).includes("Diagnostics"));
+    const onPress = diagnostics?.props?.onPress;
+    if (typeof onPress === "function") onPress();
+
+    expect(setActionsOpen).toHaveBeenCalledWith(false);
+    expect(onOpenDiagnostics).toHaveBeenCalledTimes(1);
+  });
+
   it("leaves chat and settings panel ownership to canonical mounted sheets", () => {
     expect(source).not.toContain("ChatPanel");
     expect(source).not.toContain("<SpacePanel");

package/src/components/native-space-view/SpaceActionMenu.tsx

@@ -7,7 +7,7 @@ import type { useSpaceViewController } from "./useSpaceViewController";
 
 type Controller = ReturnType<typeof useSpaceViewController>;
 
-export function SpaceActionMenu({ controller }: { readonly controller: Controller }): React.JSX.Element {
+export function SpaceActionMenu({ controller, onOpenDiagnostics }: { readonly controller: Controller; readonly onOpenDiagnostics?: () => void }): React.JSX.Element {
   const theme = useNativeTheme();
   const actions = [
     ...(controller.canInvite ? [{ label: "Invite participants", onPress: controller.handleInviteParticipants }] : []),
@@ -28,6 +28,17 @@ export function SpaceActionMenu({ controller }: { readonly controller: Controlle
         ]
       : []),
     ...(controller.canSettings ? [{ label: "Settings", onPress: () => controller.openPanel("settings") }] : []),
+    ...(onOpenDiagnostics
+      ? [
+          {
+            label: "Diagnostics",
+            onPress: () => {
+              controller.setActionsOpen(false);
+              onOpenDiagnostics();
+            },
+          },
+        ]
+      : []),
     ...(["grid", "focus", "presentation"] as const).map((layout) => ({
       label: `${layout === "grid" ? "Grid" : layout === "focus" ? "Focus" : "Presentation"} layout${controller.layout.layout === layout ? " (selected)" : ""}`,
       onPress: () => {

package/src/public-surface.test.ts

@@ -11,6 +11,7 @@ test("the turnkey and entrance props use the ratified names", () => {
     readonly defaults?: { readonly microphone?: boolean; readonly camera?: boolean };
     readonly features?: object;
     readonly layout?: SpaceLayout;
+    readonly onOpenDiagnostics?: () => void;
   }>();
   expectTypeOf<EntranceProps>().toMatchTypeOf<{
     readonly defaults?: { readonly microphone?: boolean; readonly camera?: boolean };

package/src/test-support/test-renderer.ts

@@ -1,3 +1,5 @@
+/// <reference types="node" />
+
 import { createRequire } from "node:module";
 import { join } from "node:path";
 import type { ComponentType, ReactNode } from "react";