@q9labsai/chalk-react-native 4.0.0

package/src/hooks/entrance-preview-store.test.ts

@@ -0,0 +1,79 @@
+import { describe, expect, it, vi } from "vitest";
+import type { NativeMediaStream, NativeMediaStreamTrack } from "../media/native-webrtc";
+import { createEntrancePreviewStore } from "./entrance-preview-store";
+
+function createStream(withVideoTrack: boolean): { stream: NativeMediaStream; wasStopped: () => boolean } {
+  let stopped = false;
+  const track: NativeMediaStreamTrack = {
+    id: "camera-track",
+    kind: "video",
+    enabled: true,
+    muted: false,
+    readyState: "live",
+    stop: () => {
+      stopped = true;
+    },
+  };
+  const stream: NativeMediaStream = {
+    toURL: () => "camera-stream",
+    getTracks: () => (withVideoTrack ? [track] : []),
+    getVideoTracks: () => (withVideoTrack ? [track] : []),
+    getAudioTracks: () => [],
+  };
+
+  return { stream, wasStopped: () => stopped };
+}
+
+describe("createEntrancePreviewStore", () => {
+  it("starts the camera on subscription and stops it on cleanup", async () => {
+    const camera = createStream(true);
+    const getUserMedia = vi.fn(async () => camera.stream);
+    const store = createEntrancePreviewStore({
+      enabled: true,
+      simulatorVideoDisabled: false,
+      simulatorVideoMessage: "simulator",
+      getUserMedia,
+    });
+
+    const unsubscribe = store.subscribe(() => {});
+    await Promise.resolve();
+
+    expect(getUserMedia).toHaveBeenCalledWith({ audio: false, video: { facingMode: "user" } });
+    expect(store.getSnapshot()).toEqual({ previewStream: camera.stream, previewError: null });
+
+    unsubscribe();
+    expect(camera.wasStopped()).toBe(true);
+  });
+
+  it("reports simulator video as unavailable without opening the camera", () => {
+    const getUserMedia = vi.fn(async () => createStream(true).stream);
+    const store = createEntrancePreviewStore({
+      enabled: true,
+      simulatorVideoDisabled: true,
+      simulatorVideoMessage: "Video is unavailable in the iOS simulator",
+      getUserMedia,
+    });
+
+    const unsubscribe = store.subscribe(() => {});
+
+    expect(store.getSnapshot()).toEqual({ previewStream: null, previewError: "Video is unavailable in the iOS simulator" });
+    expect(getUserMedia).not.toHaveBeenCalled();
+    unsubscribe();
+  });
+
+  it("keeps the preview disabled when Entrance disables preview", () => {
+    const getUserMedia = vi.fn(async () => createStream(true).stream);
+    const store = createEntrancePreviewStore({
+      enabled: false,
+      simulatorVideoDisabled: false,
+      simulatorVideoMessage: "simulator",
+      getUserMedia,
+    });
+
+    const unsubscribe = store.subscribe(() => {});
+
+    expect(store.getSnapshot()).toEqual({ previewStream: null, previewError: null });
+    expect(getUserMedia).not.toHaveBeenCalled();
+    unsubscribe();
+  });
+});

package/src/hooks/entrance-preview-store.ts

@@ -0,0 +1,99 @@
+import type { NativeMediaStream } from "../media/native-webrtc";
+import type { ExternalStore } from "./external-store";
+
+export interface PreviewSnapshot {
+  readonly previewStream: NativeMediaStream | null;
+  readonly previewError: string | null;
+}
+
+export type EntrancePreviewStore = ExternalStore<PreviewSnapshot>;
+
+interface EntrancePreviewStoreOptions {
+  readonly enabled: boolean;
+  readonly simulatorVideoDisabled: boolean;
+  readonly simulatorVideoMessage: string;
+  readonly getUserMedia: (constraints: unknown) => Promise<NativeMediaStream>;
+}
+
+function stopPreviewTracks(stream: NativeMediaStream | null): void {
+  stream?.getTracks?.().forEach((track) => {
+    try {
+      track.stop();
+    } catch {
+      // Best effort only.
+    }
+  });
+}
+
+export function createEntrancePreviewStore(options: EntrancePreviewStoreOptions): EntrancePreviewStore {
+  const initialSnapshot: PreviewSnapshot = {
+    previewStream: null,
+    previewError: options.enabled && options.simulatorVideoDisabled ? options.simulatorVideoMessage : null,
+  };
+  let snapshot = initialSnapshot;
+  let activeStream: NativeMediaStream | null = null;
+  let requestGeneration = 0;
+  const listeners = new Set<() => void>();
+
+  const notify = (): void => {
+    listeners.forEach((listener) => listener());
+  };
+
+  const reset = (): void => {
+    requestGeneration += 1;
+    stopPreviewTracks(activeStream);
+    activeStream = null;
+    snapshot = initialSnapshot;
+  };
+
+  const start = (): void => {
+    if (!options.enabled || options.simulatorVideoDisabled) return;
+
+    const generation = ++requestGeneration;
+    void options
+      .getUserMedia({ audio: false, video: { facingMode: "user" } })
+      .then((stream) => {
+        if (generation !== requestGeneration) {
+          stopPreviewTracks(stream);
+          return;
+        }
+
+        const videoTrack = stream.getVideoTracks?.()[0] ?? null;
+        if (!videoTrack) {
+          stopPreviewTracks(stream);
+          snapshot = { previewStream: null, previewError: "No camera track available" };
+          notify();
+          return;
+        }
+
+        stopPreviewTracks(activeStream);
+        activeStream = stream;
+        snapshot = { previewStream: stream, previewError: null };
+        notify();
+      })
+      .catch((cause: unknown) => {
+        if (generation !== requestGeneration) return;
+        snapshot = {
+          previewStream: null,
+          previewError: cause instanceof Error ? cause.message : "Unable to start camera preview",
+        };
+        notify();
+      });
+  };
+
+  const subscribe = (listener: () => void): (() => void) => {
+    listeners.add(listener);
+    if (listeners.size === 1) start();
+
+    return () => {
+      listeners.delete(listener);
+      if (listeners.size !== 0) return;
+      reset();
+    };
+  };
+
+  return {
+    getSnapshot: () => snapshot,
+    subscribe,
+  };
+}

package/src/hooks/external-store.ts

@@ -0,0 +1,18 @@
+import { useCallback, useSyncExternalStore } from "react";
+
+export interface ExternalStateManager<State> {
+  getState: () => State;
+  subscribe: (listener: (state: State) => void) => () => void;
+}
+
+export interface ExternalStore<State> {
+  getSnapshot: () => State;
+  subscribe: (listener: () => void) => () => void;
+}
+
+export function useManagerState<State>(manager: ExternalStateManager<State>): State {
+  const subscribe = useCallback((onStoreChange: () => void) => manager.subscribe(() => onStoreChange()), [manager]);
+  const getSnapshot = useCallback(() => manager.getState(), [manager]);
+
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}

package/src/hooks/space-hooks.test.ts

@@ -0,0 +1,76 @@
+import type { SpaceClient, SpaceSnapshot } from "@q9labsai/chalk-client";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const state = vi.hoisted(() => ({ client: null as SpaceClient | null }));
+
+vi.mock("../context/space-client-context", () => ({
+  useSpaceClient: () => {
+    if (!state.client) throw new Error("missing client");
+    return state.client;
+  },
+}));
+
+vi.mock("react", async (importOriginal) => {
+  const react = await importOriginal<typeof import("react")>();
+  return {
+    ...react,
+    useCallback: <T>(callback: T) => callback,
+    useSyncExternalStore: (_subscribe: unknown, getSnapshot: () => unknown) => getSnapshot(),
+  };
+});
+
+import { useCan, useChat, useConnection, useMedia, useParticipants, useReactions, useSelf, useWhiteboard } from "./space-hooks";
+
+describe("SpaceSnapshot hooks", () => {
+  beforeEach(() => {
+    state.client = client(snapshot());
+  });
+
+  it("returns the exact stable slices from SpaceSnapshot", () => {
+    const current = state.client!.getSnapshot();
+
+    expect(useConnection()).toBe(current.connection);
+    expect(useSelf()).toBe(current.self);
+    expect(useParticipants()).toBe(current.participants);
+    expect(useMedia()).toBe(current.media);
+    expect(useChat()).toBe(current.chat);
+    expect(useReactions()).toBe(current.reactions);
+    expect(useWhiteboard()).toBe(current.whiteboard);
+  });
+
+  it("derives capabilities from the self slice", () => {
+    expect(useCan("sendChat")).toBe(true);
+    expect(useCan("endEpisode")).toBe(false);
+  });
+});
+
+function client(current: SpaceSnapshot): SpaceClient {
+  return {
+    getSnapshot: () => current,
+    subscribe: () => () => undefined,
+  } as SpaceClient;
+}
+
+function snapshot(): SpaceSnapshot {
+  const capabilities = ["sendChat"] as const;
+  return {
+    connection: { status: "live", episode: null, lastError: null },
+    self: { participantId: "participant-1", displayName: "Ada", role: "collaborator", capabilities, handRaised: false, can: (capability) => capabilities.includes(capability as (typeof capabilities)[number]) },
+    participants: { roster: [], admissionQueue: [] },
+    media: {
+      devices: { microphones: [], cameras: [], speakers: [] },
+      selection: { microphone: null, camera: null, speaker: null },
+      local: {
+        microphone: { source: "microphone", state: "disabled", track: null },
+        camera: { source: "camera", state: "disabled", track: null },
+        screen: { source: "screen", state: "disabled", track: null },
+      },
+      remote: [],
+      screenShare: { source: "screen", state: "disabled", track: null },
+      incomingRequests: [],
+    },
+    chat: { status: "idle", messages: [], pendingSends: [], readReceipts: [], unreadCount: 0, pagination: { cursor: null, hasOlder: false, historyTruncated: false }, lastError: null },
+    reactions: { active: [] },
+    whiteboard: { open: false, engine: { status: "unsubscribed", sceneId: null, revision: null, error: null } },
+  };
+}

package/src/hooks/space-hooks.ts

@@ -0,0 +1,43 @@
+import type { Capability, SpaceSnapshot } from "@q9labsai/chalk-client";
+import { useCallback, useSyncExternalStore } from "react";
+
+import { useSpaceClient } from "../context/space-client-context";
+
+function useSpaceSlice<TSlice extends keyof SpaceSnapshot>(slice: TSlice): SpaceSnapshot[TSlice] {
+  const client = useSpaceClient();
+  const subscribe = useCallback((listener: () => void) => client.subscribe(listener), [client]);
+  const getSnapshot = useCallback(() => client.getSnapshot()[slice], [client, slice]);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+
+export function useConnection(): SpaceSnapshot["connection"] {
+  return useSpaceSlice("connection");
+}
+
+export function useSelf(): SpaceSnapshot["self"] {
+  return useSpaceSlice("self");
+}
+
+export function useParticipants(): SpaceSnapshot["participants"] {
+  return useSpaceSlice("participants");
+}
+
+export function useMedia(): SpaceSnapshot["media"] {
+  return useSpaceSlice("media");
+}
+
+export function useChat(): SpaceSnapshot["chat"] {
+  return useSpaceSlice("chat");
+}
+
+export function useReactions(): SpaceSnapshot["reactions"] {
+  return useSpaceSlice("reactions");
+}
+
+export function useWhiteboard(): SpaceSnapshot["whiteboard"] {
+  return useSpaceSlice("whiteboard");
+}
+
+export function useCan(capability: Capability): boolean {
+  return useSelf().can(capability);
+}

package/src/hooks/useEntrancePreview.ts

@@ -0,0 +1,26 @@
+import { mediaDevices, type NativeMediaStream } from "../media/native-webrtc";
+import { useMemo, useSyncExternalStore } from "react";
+import { getIosSimulatorVideoMessage, isIosSimulator } from "../utils/ios-simulator";
+import { createEntrancePreviewStore } from "./entrance-preview-store";
+
+export interface UseEntrancePreviewReturn {
+  previewStream: NativeMediaStream | null;
+  previewError: string | null;
+}
+
+export function useEntrancePreview(enabled: boolean): UseEntrancePreviewReturn {
+  const simulatorVideoDisabled = isIosSimulator();
+  const store = useMemo(
+    () =>
+      createEntrancePreviewStore({
+        enabled,
+        simulatorVideoDisabled,
+        simulatorVideoMessage: getIosSimulatorVideoMessage(),
+        getUserMedia: mediaDevices.getUserMedia,
+      }),
+    [enabled, simulatorVideoDisabled],
+  );
+  const { previewStream, previewError } = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+
+  return { previewStream, previewError };
+}

package/src/hooks/useLayout.test.ts

@@ -0,0 +1,16 @@
+// @vitest-environment happy-dom
+
+import { describe, expect, it } from "vitest";
+
+import { act, renderHook } from "../test-support/test-renderer";
+import { useLayout } from "./useLayout";
+
+describe("useLayout", () => {
+  it("synchronizes a controlled layout without replacing the hook", () => {
+    const { result, rerender } = renderHook(({ layout }) => useLayout({ layout }), { initialProps: { layout: "grid" as const } });
+
+    expect(result.current.layout).toBe("grid");
+    act(() => rerender({ layout: "presentation" }));
+    expect(result.current.layout).toBe("presentation");
+  });
+});

package/src/hooks/useLayout.ts

@@ -0,0 +1,37 @@
+import { useCallback, useEffect, useState } from "react";
+
+import type { Layout } from "../ui/native-types";
+
+export interface UseLayoutReturn {
+  readonly layout: Layout;
+  readonly isMobileView: boolean;
+  readonly isFullscreen: boolean;
+  readonly setLayout: (layout: Layout) => void;
+  readonly toggleLayout: () => void;
+  readonly toggleFullscreen: () => Promise<void>;
+}
+
+type UseLayoutOptions = {
+  readonly layout?: Layout;
+  readonly onLayoutChange?: (layout: Layout) => void;
+};
+
+export function useLayout({ layout: controlledLayout, onLayoutChange }: UseLayoutOptions = {}): UseLayoutReturn {
+  const [uncontrolledLayout, setUncontrolledLayout] = useState<Layout>(controlledLayout ?? "focus");
+  const [isFullscreen, setFullscreen] = useState(false);
+  const layout = controlledLayout ?? uncontrolledLayout;
+  useEffect(() => {
+    if (controlledLayout) setUncontrolledLayout(controlledLayout);
+  }, [controlledLayout]);
+  const setLayout = useCallback(
+    (nextLayout: Layout) => {
+      if (!controlledLayout) setUncontrolledLayout(nextLayout);
+      onLayoutChange?.(nextLayout);
+    },
+    [controlledLayout, onLayoutChange],
+  );
+  const toggleLayout = useCallback(() => setLayout(layout === "grid" ? "focus" : "grid"), [layout, setLayout]);
+  const toggleFullscreen = useCallback(async () => setFullscreen((current) => !current), []);
+
+  return { layout, isMobileView: true, isFullscreen, setLayout, toggleLayout, toggleFullscreen };
+}

package/src/hooks/usePanels.ts

@@ -0,0 +1,30 @@
+import { useCallback, useState } from "react";
+
+import type { NativePanel } from "../ui/native-types";
+
+export interface UsePanelsReturn {
+  readonly activePanel: NativePanel;
+  readonly controlsVisible: boolean;
+  readonly openPanel: (panel: NativePanel) => void;
+  readonly closePanel: () => void;
+  readonly togglePanel: (panel: Exclude<NativePanel, null>) => void;
+  readonly showControls: () => void;
+  readonly hideControls: () => void;
+}
+
+export function usePanels(): UsePanelsReturn {
+  const [activePanel, setActivePanel] = useState<NativePanel>(null);
+  const [controlsVisible, setControlsVisible] = useState(true);
+  const closePanel = useCallback(() => setActivePanel(null), []);
+  const togglePanel = useCallback((panel: Exclude<NativePanel, null>) => setActivePanel((current) => (current === panel ? null : panel)), []);
+
+  return {
+    activePanel,
+    controlsVisible,
+    openPanel: setActivePanel,
+    closePanel,
+    togglePanel,
+    showControls: () => setControlsVisible(true),
+    hideControls: () => setControlsVisible(false),
+  };
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+export { Chalk } from "./components/Chalk";
+export type { ChalkFeatures, ChalkProps, ChalkTheme, ChalkThemeTokens, SpaceLayout } from "./components/Chalk";
+export { Entrance } from "./components/Entrance";
+export type { EntranceProps, EntranceSettings } from "./components/Entrance";
+export { ChalkProvider, useSpaceClient } from "./context/space-client-context";
+export type { ChalkProviderProps } from "./context/space-client-context";
+export { useCan, useChat, useConnection, useMedia, useParticipants, useReactions, useSelf, useWhiteboard } from "./hooks/space-hooks";
+export { Theme, createNativeTheme } from "./ui/theme";
+export { getThemeMode, isDarkThemePalette, resolveNativeAppearance, THEME_PALETTES, THEME_TEXTURES } from "./ui/appearance";
+export type { NativeAppearance, NativeAppearanceTokens, NativeShadowToken, NativeTextureBlendMode, NativeTextureDescriptor, NativeTextureKind, ThemeAppearance, ThemeMode, ThemePalette, ThemeTexture } from "./ui/appearance";

package/src/invites.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it } from "vitest";
+import { extractJoinTokenFromInviteLink, getClipboardInviteSuggestion } from "./invites";
+
+describe("extractJoinTokenFromInviteLink", () => {
+  const inviteToken = "i".repeat(43);
+
+  it("accepts Chalk https invite links", () => {
+    expect(extractJoinTokenFromInviteLink(`https://chalk.q9labs.ai/j/${inviteToken}`)).toBe(inviteToken);
+  });
+
+  it("accepts the new Chalk meet host", () => {
+    expect(extractJoinTokenFromInviteLink(`https://chalkmeet.com/j/${inviteToken}`)).toBe(inviteToken);
+  });
+
+  it("accepts the canonical access hash", () => {
+    expect(extractJoinTokenFromInviteLink(`https://chalkmeet.com/#access=${inviteToken}`)).toBe(inviteToken);
+  });
+
+  it("accepts bare Chalk invite hostnames", () => {
+    expect(extractJoinTokenFromInviteLink(`chalk.q9labs.ai/j/${inviteToken}`)).toBe(inviteToken);
+  });
+
+  it("accepts bare Chalk meet hostnames", () => {
+    expect(extractJoinTokenFromInviteLink(`chalkmeet.com/j/${inviteToken}`)).toBe(inviteToken);
+  });
+
+  it("accepts native Chalk deep links", () => {
+    expect(extractJoinTokenFromInviteLink(`chalk://j/${inviteToken}`)).toBe(inviteToken);
+  });
+
+  it("accepts bundle-scheme Chalk deep links", () => {
+    expect(extractJoinTokenFromInviteLink(`ai.q9labs.chalk.mobile://j/${inviteToken}`)).toBe(inviteToken);
+  });
+
+  it("rejects direct Space links and raw codes", () => {
+    expect(extractJoinTokenFromInviteLink("https://chalk.q9labs.ai/space/2f0b302b-2449-43f5-ae3b-de57decb9f09")).toBeNull();
+    expect(extractJoinTokenFromInviteLink(`https://attacker.test/j/${inviteToken}`)).toBeNull();
+    expect(extractJoinTokenFromInviteLink("ABC123")).toBeNull();
+  });
+});
+
+describe("getClipboardInviteSuggestion", () => {
+  const inviteToken = "i".repeat(43);
+
+  it("returns a copied Chalk invite link when it differs from the current input", () => {
+    expect(getClipboardInviteSuggestion(`https://chalkmeet.com/j/${inviteToken}`, "")).toBe(`https://chalkmeet.com/j/${inviteToken}`);
+  });
+
+  it("hides the suggestion when the input already matches the clipboard", () => {
+    expect(getClipboardInviteSuggestion(`https://chalkmeet.com/j/${inviteToken}`, `https://chalkmeet.com/j/${inviteToken}`)).toBeNull();
+  });
+
+  it("ignores non-invite clipboard values", () => {
+    expect(getClipboardInviteSuggestion("ABC123", "")).toBeNull();
+  });
+});

package/src/invites.ts

@@ -0,0 +1,43 @@
+const CHALK_INVITE_HOSTS = ["chalkmeet.com", "chalk.q9labs.ai"] as const;
+const CHALK_CUSTOM_PROTOCOLS = new Set(["chalk:", "ai.q9labs.chalk.mobile:"]);
+const capabilityPattern = /^[A-Za-z0-9_-]{43}$/u;
+
+export function extractJoinTokenFromInviteLink(input: string): string | null {
+  const trimmed = input.trim();
+  if (!trimmed) {
+    return null;
+  }
+
+  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) && (parsed.protocol !== "https:" || !CHALK_INVITE_HOSTS.includes(parsed.hostname as (typeof CHALK_INVITE_HOSTS)[number]))) {
+      return null;
+    }
+    const pathSegments = CHALK_CUSTOM_PROTOCOLS.has(parsed.protocol) ? [parsed.hostname, ...parsed.pathname.split("/").filter(Boolean)] : parsed.pathname.split("/").filter(Boolean);
+    const [head, tail] = pathSegments;
+    const hashInvite = new URLSearchParams(parsed.hash.replace(/^#/u, "")).get("access");
+    const token = head === "j" && tail ? tail : hashInvite?.trim();
+
+    return token && capabilityPattern.test(token) ? token : null;
+  } catch {
+    return null;
+  }
+}
+
+export function getClipboardInviteSuggestion(clipboardText: string | null | undefined, currentInput = ""): string | null {
+  const normalizedClipboardText = clipboardText?.trim();
+  if (!normalizedClipboardText) {
+    return null;
+  }
+
+  if (normalizedClipboardText === currentInput.trim()) {
+    return null;
+  }
+
+  return extractJoinTokenFromInviteLink(normalizedClipboardText) ? normalizedClipboardText : null;
+}

package/src/ios-pad.ts

@@ -0,0 +1 @@
+export * from "./index";

package/src/ios-phone.ts

@@ -0,0 +1 @@
+export * from "./index";

package/src/ios.ts

@@ -0,0 +1 @@
+export * from "./index";

package/src/macos.ts

@@ -0,0 +1 @@
+export * from "./index";

package/src/media/native-webrtc.ts

@@ -0,0 +1,11 @@
+import { MediaStream, RTCView, mediaDevices } from "@cloudflare/react-native-webrtc";
+import type { MediaStream as NativeMediaStream, MediaStreamTrack as NativeMediaStreamTrack } from "@cloudflare/react-native-webrtc";
+
+export { MediaStream, RTCView, mediaDevices };
+export type { NativeMediaStream, NativeMediaStreamTrack };
+
+export function createNativeMediaStream(track: MediaStreamTrack | NativeMediaStreamTrack): NativeMediaStream {
+  const stream = Reflect.construct(MediaStream, [[track]]);
+  if (!(stream instanceof MediaStream)) throw new TypeError("React Native WebRTC did not create a media stream");
+  return stream;
+}

package/src/platform/platform.ts

@@ -0,0 +1,34 @@
+import { Dimensions, Platform } from "react-native";
+
+export type PlatformVariant = "android" | "ios-phone" | "ios-pad" | "macos" | "tvos";
+
+function getIsPad(): boolean {
+  const maybeIsPad = (Platform as typeof Platform & { isPad?: boolean }).isPad;
+  if (typeof maybeIsPad === "boolean") {
+    return maybeIsPad;
+  }
+
+  if (Platform.OS !== "ios") {
+    return false;
+  }
+
+  const { width, height } = Dimensions.get("window");
+  return Math.min(width, height) >= 768;
+}
+
+export function resolvePlatformVariant(): PlatformVariant {
+  const platformOS = Platform.OS as string;
+
+  switch (platformOS) {
+    case "android":
+      return "android";
+    case "ios":
+      return getIsPad() ? "ios-pad" : "ios-phone";
+    case "macos":
+      return "macos";
+    case "tvos":
+      return "tvos";
+    default:
+      return "android";
+  }
+}

package/src/public-surface.test.ts

@@ -0,0 +1,25 @@
+import type { ClientEventMap } from "@q9labsai/chalk-client";
+import type { ThemeAppearance as ReactThemeAppearance, ThemePalette as ReactThemePalette, ThemeTexture as ReactThemeTexture } from "../../react/src/components/theme";
+import type { ChalkProps, ChalkThemeTokens, SpaceLayout } from "./components/Chalk";
+import type { EntranceProps, EntranceSettings } from "./components/Entrance";
+import type { ThemeAppearance, ThemePalette, ThemeTexture } from "./ui/appearance";
+import { expectTypeOf, test } from "vitest";
+
+test("the turnkey and entrance props use the ratified names", () => {
+  expectTypeOf<ChalkProps>().toMatchTypeOf<{
+    readonly entrance?: boolean;
+    readonly defaults?: { readonly microphone?: boolean; readonly camera?: boolean };
+    readonly features?: object;
+    readonly layout?: SpaceLayout;
+  }>();
+  expectTypeOf<EntranceProps>().toMatchTypeOf<{
+    readonly defaults?: { readonly microphone?: boolean; readonly camera?: boolean };
+    readonly onCancel?: () => void;
+  }>();
+  expectTypeOf<EntranceSettings>().toEqualTypeOf<{ readonly displayName: string; readonly microphone: boolean; readonly camera: boolean }>();
+  expectTypeOf<NonNullable<ChalkProps["onError"]>>().toEqualTypeOf<(event: ClientEventMap["error"]) => void>();
+  expectTypeOf<keyof ChalkThemeTokens>().toEqualTypeOf<"canvas" | "chrome" | "surface" | "stage" | "text" | "mutedText" | "line" | "accent" | "accentText" | "positive" | "danger" | "dangerSurface" | "focus" | "shadow">();
+  expectTypeOf<ThemePalette>().toEqualTypeOf<ReactThemePalette>();
+  expectTypeOf<ThemeTexture>().toEqualTypeOf<ReactThemeTexture>();
+  expectTypeOf<ThemeAppearance>().toEqualTypeOf<ReactThemeAppearance>();
+});