@q9labsai/chalk-react-native 4.0.0

package/src/components/native-entrance/entrance-controller-store.test.ts

@@ -0,0 +1,75 @@
+import { describe, expect, it, vi } from "vitest";
+import { EntranceControllerStore } from "./entrance-controller-store";
+
+function createStore(options: Partial<ConstructorParameters<typeof EntranceControllerStore>[0]> = {}) {
+  return new EntranceControllerStore({
+    displayName: "Guest",
+    initialAudioEnabled: false,
+    initialVideoEnabled: false,
+    simulatorMediaDisabled: false,
+    joinDisabled: false,
+    onJoin: vi.fn(),
+    ...options,
+  });
+}
+
+describe("EntranceControllerStore", () => {
+  it("toggles media, edits the name, and latches join", () => {
+    const onJoin = vi.fn();
+    const store = createStore({ onJoin });
+    const listener = vi.fn();
+    const unsubscribe = store.subscribe(listener);
+
+    store.setDisplayName("Host");
+    store.toggleAudio();
+    store.toggleVideo();
+    store.setInputFocused(true);
+    store.handleJoin();
+    store.handleJoin();
+
+    expect(store.getSnapshot()).toMatchObject({
+      displayName: "Host",
+      audioEnabled: true,
+      videoEnabled: true,
+      isInputFocused: true,
+      isSubmitting: true,
+    });
+    expect(onJoin).toHaveBeenCalledTimes(1);
+    expect(onJoin).toHaveBeenCalledWith({ displayName: "Host", microphoneEnabled: true, cameraEnabled: true });
+    expect(listener).toHaveBeenCalled();
+
+    unsubscribe();
+  });
+
+  it("resets the submit latch when joining is re-enabled", () => {
+    const onJoin = vi.fn();
+    const store = createStore({ joinDisabled: true, onJoin });
+
+    store.handleJoin();
+    expect(onJoin).not.toHaveBeenCalled();
+
+    store.update({ simulatorMediaDisabled: false, joinDisabled: false, onJoin });
+    store.handleJoin();
+    expect(onJoin).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not submit a blank display name", () => {
+    const onJoin = vi.fn();
+    const store = createStore({ displayName: "   ", onJoin });
+
+    store.handleJoin();
+
+    expect(onJoin).not.toHaveBeenCalled();
+    expect(store.getSnapshot().isSubmitting).toBe(false);
+  });
+
+  it("disables media and ignores toggles on the iOS simulator", () => {
+    const store = createStore({ initialAudioEnabled: true, initialVideoEnabled: true });
+
+    store.update({ simulatorMediaDisabled: true, joinDisabled: false, onJoin: vi.fn() });
+    store.toggleAudio();
+    store.toggleVideo();
+
+    expect(store.getSnapshot()).toMatchObject({ audioEnabled: false, videoEnabled: false });
+  });
+});

package/src/components/native-entrance/entrance-controller-store.ts

@@ -0,0 +1,112 @@
+import type { EntranceViewSettings } from "../EntranceView";
+
+export interface EntranceControllerSnapshot {
+  readonly displayName: string;
+  readonly audioEnabled: boolean;
+  readonly videoEnabled: boolean;
+  readonly isSubmitting: boolean;
+  readonly isInputFocused: boolean;
+}
+
+export interface EntranceControllerStoreOptions {
+  readonly displayName: string;
+  readonly initialAudioEnabled: boolean;
+  readonly initialVideoEnabled: boolean;
+  readonly simulatorMediaDisabled: boolean;
+  readonly joinDisabled: boolean;
+  readonly onJoin: (settings: EntranceViewSettings) => void;
+}
+
+export interface EntranceControllerStoreUpdate {
+  readonly simulatorMediaDisabled: boolean;
+  readonly joinDisabled: boolean;
+  readonly onJoin: (settings: EntranceViewSettings) => void;
+}
+
+export class EntranceControllerStore {
+  #snapshot: EntranceControllerSnapshot;
+  #listeners = new Set<() => void>();
+  #simulatorMediaDisabled: boolean;
+  #joinDisabled: boolean;
+  #submitLatch = false;
+  #onJoin: EntranceControllerStoreOptions["onJoin"];
+
+  constructor({ displayName, initialAudioEnabled, initialVideoEnabled, simulatorMediaDisabled, joinDisabled, onJoin }: EntranceControllerStoreOptions) {
+    this.#simulatorMediaDisabled = simulatorMediaDisabled;
+    this.#joinDisabled = joinDisabled;
+    this.#onJoin = onJoin;
+    this.#snapshot = {
+      displayName,
+      audioEnabled: initialAudioEnabled && !simulatorMediaDisabled,
+      videoEnabled: initialVideoEnabled && !simulatorMediaDisabled,
+      isSubmitting: false,
+      isInputFocused: false,
+    };
+  }
+
+  readonly getSnapshot = (): EntranceControllerSnapshot => this.#snapshot;
+
+  readonly subscribe = (listener: () => void): (() => void) => {
+    this.#listeners.add(listener);
+    return () => {
+      this.#listeners.delete(listener);
+    };
+  };
+
+  readonly update = ({ simulatorMediaDisabled, joinDisabled, onJoin }: EntranceControllerStoreUpdate): void => {
+    this.#onJoin = onJoin;
+
+    if (!this.#simulatorMediaDisabled && simulatorMediaDisabled) {
+      this.#update({ audioEnabled: false, videoEnabled: false });
+    }
+
+    if (this.#joinDisabled && !joinDisabled) {
+      this.#submitLatch = false;
+      this.#update({ isSubmitting: false });
+    }
+
+    this.#simulatorMediaDisabled = simulatorMediaDisabled;
+    this.#joinDisabled = joinDisabled;
+  };
+
+  readonly setDisplayName = (displayName: string): void => {
+    this.#update({ displayName });
+  };
+
+  readonly setInputFocused = (isInputFocused: boolean): void => {
+    this.#update({ isInputFocused });
+  };
+
+  readonly toggleAudio = (): void => {
+    if (this.#simulatorMediaDisabled) return;
+    this.#update({ audioEnabled: !this.#snapshot.audioEnabled });
+  };
+
+  readonly toggleVideo = (): void => {
+    if (this.#simulatorMediaDisabled) return;
+    this.#update({ videoEnabled: !this.#snapshot.videoEnabled });
+  };
+
+  readonly handleJoin = (): void => {
+    const displayName = this.#snapshot.displayName.trim();
+    if (!displayName || this.#joinDisabled || this.#snapshot.isSubmitting || this.#submitLatch) return;
+
+    this.#submitLatch = true;
+    this.#update({ isSubmitting: true });
+    this.#onJoin({
+      displayName,
+      microphoneEnabled: this.#snapshot.audioEnabled,
+      cameraEnabled: this.#snapshot.videoEnabled,
+    });
+  };
+
+  #update(next: Partial<EntranceControllerSnapshot>): void {
+    const snapshot = { ...this.#snapshot, ...next };
+    if (snapshot.displayName === this.#snapshot.displayName && snapshot.audioEnabled === this.#snapshot.audioEnabled && snapshot.videoEnabled === this.#snapshot.videoEnabled && snapshot.isSubmitting === this.#snapshot.isSubmitting && snapshot.isInputFocused === this.#snapshot.isInputFocused) {
+      return;
+    }
+
+    this.#snapshot = snapshot;
+    for (const listener of this.#listeners) listener();
+  }
+}

package/src/components/native-entrance/useEntranceController.ts

@@ -0,0 +1,60 @@
+import { useMemo, useSyncExternalStore } from "react";
+import { useEntrancePreview } from "../../hooks/useEntrancePreview";
+import { isIosSimulator } from "../../utils/ios-simulator";
+import type { EntranceViewProps } from "../EntranceView";
+import { EntranceControllerStore } from "./entrance-controller-store";
+
+export interface UseEntranceControllerResult {
+  displayName: string;
+  audioEnabled: boolean;
+  videoEnabled: boolean;
+  isSubmitting: boolean;
+  isInputFocused: boolean;
+  previewError: string | null;
+  previewStream: ReturnType<typeof useEntrancePreview>["previewStream"];
+  simulatorMediaDisabled: boolean;
+  setDisplayName: (value: string) => void;
+  setInputFocused: (focused: boolean) => void;
+  toggleAudio: () => void;
+  toggleVideo: () => void;
+  handleJoin: () => void;
+}
+
+export function useEntranceController({ displayName = "", initialAudioEnabled = false, initialVideoEnabled = false, joinDisabled = false, onJoin }: Pick<EntranceViewProps, "displayName" | "initialAudioEnabled" | "initialVideoEnabled" | "joinDisabled" | "onJoin">): UseEntranceControllerResult {
+  const simulatorMediaDisabled = isIosSimulator();
+  const store = useMemo(
+    () =>
+      new EntranceControllerStore({
+        displayName,
+        initialAudioEnabled,
+        initialVideoEnabled,
+        simulatorMediaDisabled,
+        joinDisabled,
+        onJoin,
+      }),
+    [],
+  );
+  store.update({
+    simulatorMediaDisabled,
+    joinDisabled,
+    onJoin,
+  });
+  const snapshot = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+  const { previewError, previewStream } = useEntrancePreview(snapshot.videoEnabled);
+
+  return {
+    displayName: snapshot.displayName,
+    audioEnabled: snapshot.audioEnabled,
+    videoEnabled: snapshot.videoEnabled,
+    isSubmitting: snapshot.isSubmitting,
+    isInputFocused: snapshot.isInputFocused,
+    previewError,
+    previewStream,
+    simulatorMediaDisabled,
+    setDisplayName: store.setDisplayName,
+    setInputFocused: store.setInputFocused,
+    toggleAudio: store.toggleAudio,
+    toggleVideo: store.toggleVideo,
+    handleJoin: store.handleJoin,
+  };
+}

package/src/components/native-joining-loading-animation.ts

@@ -0,0 +1,26 @@
+import { Animated, Easing } from "react-native";
+import { createAnimationRefController, type AnimationRefCallback } from "./native-animation-controller";
+
+export interface NativeJoiningLoadingAnimation {
+  readonly pulseAnim: Animated.Value;
+  readonly fadeAnim: Animated.Value;
+  readonly ref: AnimationRefCallback<unknown>;
+}
+
+export function createNativeJoiningLoadingAnimation(): NativeJoiningLoadingAnimation {
+  const pulseAnim = new Animated.Value(1);
+  const fadeAnim = new Animated.Value(0);
+  const pulseAnimation = Animated.sequence([Animated.timing(pulseAnim, { toValue: 1.035, duration: 180, easing: Easing.out(Easing.cubic), useNativeDriver: true }), Animated.timing(pulseAnim, { toValue: 1, duration: 220, easing: Easing.out(Easing.cubic), useNativeDriver: true })]);
+  const fadeAnimation = Animated.timing(fadeAnim, {
+    toValue: 1,
+    duration: 280,
+    easing: Easing.out(Easing.cubic),
+    useNativeDriver: true,
+  });
+
+  return {
+    pulseAnim,
+    fadeAnim,
+    ref: createAnimationRefController(() => [pulseAnimation, fadeAnimation]),
+  };
+}

package/src/components/native-media-visibility.test.ts

@@ -0,0 +1,77 @@
+import type { Participant } from "../internal/core";
+import { describe, expect, it } from "vitest";
+import { shouldRenderNativeMediaTrack } from "./native-media-visibility";
+
+function participant(overrides: Partial<Participant> = {}): Participant {
+  return {
+    id: overrides.id ?? "participant-1",
+    displayName: overrides.displayName ?? "Participant",
+    role: overrides.role ?? "participant",
+    isLocal: overrides.isLocal ?? false,
+    videoEnabled: overrides.videoEnabled ?? false,
+    audioEnabled: overrides.audioEnabled ?? true,
+    isScreenSharing: overrides.isScreenSharing ?? false,
+    isSpeaking: overrides.isSpeaking ?? false,
+    handRaised: overrides.handRaised ?? false,
+    connectionQuality: overrides.connectionQuality ?? 100,
+    videoTrack: overrides.videoTrack ?? null,
+    audioTrack: overrides.audioTrack ?? null,
+    screenShareTrack: overrides.screenShareTrack ?? null,
+    screenShareAudioTrack: overrides.screenShareAudioTrack ?? null,
+    joinedAt: overrides.joinedAt ?? new Date(),
+    metadata: overrides.metadata ?? {},
+  };
+}
+
+function track(readyState: "live" | "ended" = "live"): MediaStreamTrack {
+  return { readyState } as MediaStreamTrack;
+}
+
+describe("shouldRenderNativeMediaTrack", () => {
+  it("hides video when the participant has turned their camera off even if a stale track object remains", () => {
+    expect(
+      shouldRenderNativeMediaTrack({
+        participant: participant({
+          videoEnabled: false,
+          videoTrack: track(),
+        }),
+        track: track(),
+      }),
+    ).toBe(false);
+  });
+
+  it("hides video when the track has already ended", () => {
+    expect(
+      shouldRenderNativeMediaTrack({
+        participant: participant({
+          videoEnabled: true,
+          videoTrack: track("ended"),
+        }),
+        track: track("ended"),
+      }),
+    ).toBe(false);
+  });
+
+  it("still renders live non-participant media such as stage screen share tracks", () => {
+    expect(
+      shouldRenderNativeMediaTrack({
+        participant: null,
+        track: track(),
+      }),
+    ).toBe(true);
+  });
+
+  it("renders a live screen-share track even when the sharer camera is off", () => {
+    expect(
+      shouldRenderNativeMediaTrack({
+        participant: participant({
+          videoEnabled: false,
+          isScreenSharing: true,
+          screenShareTrack: track(),
+        }),
+        track: track(),
+        mediaKind: "screen-share",
+      }),
+    ).toBe(true);
+  });
+});

package/src/components/native-media-visibility.ts

@@ -0,0 +1,18 @@
+import type { NativeParticipant as Participant } from "../ui/native-types";
+import type { NativeMediaStreamTrack } from "../media/native-webrtc";
+
+export function shouldRenderNativeMediaTrack({ participant, track, mediaKind = "camera" }: { participant: Participant | null; track: MediaStreamTrack | NativeMediaStreamTrack | null | undefined; mediaKind?: "camera" | "screen-share" }): boolean {
+  if (!track) {
+    return false;
+  }
+
+  if (track.readyState === "ended") {
+    return false;
+  }
+
+  if (mediaKind === "camera" && participant && !participant.videoEnabled) {
+    return false;
+  }
+
+  return true;
+}

package/src/components/native-space-callkit-controller.test.ts

@@ -0,0 +1,62 @@
+import { describe, expect, it, vi } from "vitest";
+import { SpaceCallKitController, type SpaceCallKitPort, type SpaceCallKitSyncInput } from "./native-space-callkit-controller";
+
+vi.mock("react-native", () => ({
+  NativeModules: {},
+  Platform: { OS: "ios" },
+}));
+
+function createInput(overrides: Partial<SpaceCallKitSyncInput> = {}): SpaceCallKitSyncInput {
+  return {
+    callKit: true,
+    hasVideo: true,
+    isAudioEnabled: true,
+    joinNonce: 1,
+    onEndCall: vi.fn(),
+    onToggleAudio: vi.fn(async () => false),
+    phase: "joining",
+    spaceId: "space-1",
+    spaceName: "Daily Standup",
+    ...overrides,
+  };
+}
+
+describe("SpaceCallKitController", () => {
+  it("configures, starts, reports, handles mute actions, and ends the native call", async () => {
+    let eventListener: Parameters<SpaceCallKitPort["addListener"]>[0] | undefined;
+    const removeListener = vi.fn();
+    const port: SpaceCallKitPort = {
+      isSupported: true,
+      addListener: vi.fn((listener) => {
+        eventListener = listener;
+        return { remove: removeListener };
+      }),
+      configure: vi.fn(async () => ({ isSupported: true })),
+      endCall: vi.fn(async () => {}),
+      reportConnected: vi.fn(async () => {}),
+      startCall: vi.fn(async () => ({ callUUID: "call-1" })),
+    };
+    const controller = new SpaceCallKitController(port);
+    const input = createInput();
+
+    controller.start();
+    controller.sync(input);
+    await Promise.resolve();
+    expect(port.configure).toHaveBeenCalledOnce();
+    expect(port.startCall).toHaveBeenCalledOnce();
+
+    controller.sync({ ...input, phase: "live" });
+    await Promise.resolve();
+    expect(port.reportConnected).toHaveBeenCalledWith({ callUUID: "call-1" });
+
+    eventListener?.({ callUUID: "call-1", muted: true, type: "setMutedCallAction" });
+    expect(input.onToggleAudio).toHaveBeenCalledOnce();
+
+    controller.sync({ ...input, phase: "entrance" });
+    await Promise.resolve();
+    expect(port.endCall).toHaveBeenCalledWith({ callUUID: "call-1" });
+
+    controller.stop();
+    expect(removeListener).toHaveBeenCalledOnce();
+  });
+});

package/src/components/native-space-callkit-controller.ts

@@ -0,0 +1,131 @@
+import { callKit as defaultCallKit, type CallKitEndCallOptions, type CallKitEvent, type CallKitCallOptions } from "../callkit/callkit";
+import { resolveSpaceCallKitOptions, type ResolvedSpaceCallKitOptions, type SpaceCallKitOptions } from "../callkit/resolve-space-callkit-options";
+import type { SpaceLifecyclePhase } from "./space-lifecycle";
+
+export interface SpaceCallKitPort {
+  readonly isSupported: boolean;
+  addListener(listener: (event: CallKitEvent) => void): { remove(): void };
+  configure(options: ResolvedSpaceCallKitOptions): Promise<{ isSupported: boolean }>;
+  endCall(options: CallKitEndCallOptions): Promise<void>;
+  reportConnected(options: Pick<CallKitCallOptions, "callUUID">): Promise<void>;
+  startCall(options: CallKitCallOptions): Promise<{ callUUID: string } | null>;
+}
+
+export interface SpaceCallKitSyncInput {
+  readonly callKit?: SpaceCallKitOptions | boolean;
+  readonly hasVideo: boolean;
+  readonly isAudioEnabled: boolean;
+  readonly joinNonce: number;
+  readonly onEndCall: (options?: { closeAfterLeave?: boolean }) => void;
+  readonly onToggleAudio: () => Promise<boolean>;
+  readonly phase: SpaceLifecyclePhase;
+  readonly spaceId: string;
+  readonly spaceName?: string;
+}
+
+export class SpaceCallKitController {
+  readonly #port: SpaceCallKitPort;
+  #input: SpaceCallKitSyncInput | undefined;
+  #subscription: { remove(): void } | undefined;
+  #activeCallId: string | null = null;
+  #reportedConnectedCallId: string | null = null;
+  #startedJoinNonce: number | null = null;
+  #lastConfigurationSignature: string | null = null;
+
+  constructor(port: SpaceCallKitPort = defaultCallKit) {
+    this.#port = port;
+  }
+
+  readonly start = (): void => {
+    if (!this.#port.isSupported || this.#subscription) return;
+
+    this.#subscription = this.#port.addListener((event) => {
+      const input = this.#input;
+      if (!input || !this.#callKitOptions(input)) return;
+
+      if (event.type === "endCallAction") {
+        input.onEndCall({ closeAfterLeave: input.phase !== "live" });
+        return;
+      }
+
+      if (event.type === "setMutedCallAction" && event.muted === input.isAudioEnabled) {
+        void input.onToggleAudio().catch((error: unknown) => {
+          console.warn("Failed to sync CallKit mute state", error);
+        });
+      }
+    });
+  };
+
+  readonly sync = (input: SpaceCallKitSyncInput): void => {
+    this.#input = input;
+    const callKitOptions = this.#callKitOptions(input);
+    if (!callKitOptions || !this.#port.isSupported) {
+      this.#lastConfigurationSignature = null;
+      if (input.phase === "entrance" || input.phase === "left") void this.endCall();
+      return;
+    }
+
+    const configurationSignature = JSON.stringify(callKitOptions);
+    if (configurationSignature !== this.#lastConfigurationSignature) {
+      this.#lastConfigurationSignature = configurationSignature;
+      void this.#port.configure(callKitOptions).catch((error: unknown) => {
+        console.warn("Failed to configure CallKit", error);
+      });
+    }
+
+    if (input.phase === "joining" && this.#startedJoinNonce !== input.joinNonce) {
+      this.#startedJoinNonce = input.joinNonce;
+      const joinNonce = input.joinNonce;
+      void this.#port
+        .startCall(callKitOptions)
+        .then((result) => {
+          if (this.#input?.phase !== "joining" || this.#input.joinNonce !== joinNonce || !result?.callUUID) return;
+          this.#activeCallId = result.callUUID;
+          this.#reportedConnectedCallId = null;
+        })
+        .catch((error: unknown) => {
+          console.warn("Failed to start CallKit call", error);
+        });
+    }
+
+    if (input.phase === "live" && this.#activeCallId && this.#reportedConnectedCallId !== this.#activeCallId) {
+      const callUUID = this.#activeCallId;
+      this.#reportedConnectedCallId = callUUID;
+      void this.#port.reportConnected({ callUUID }).catch((error: unknown) => {
+        console.warn("Failed to report CallKit connection", error);
+      });
+    }
+
+    if (input.phase === "entrance" || input.phase === "left") void this.endCall();
+  };
+
+  readonly endCall = async (): Promise<void> => {
+    if (!this.#activeCallId) return;
+
+    const callUUID = this.#activeCallId;
+    this.#activeCallId = null;
+    this.#reportedConnectedCallId = null;
+    try {
+      await this.#port.endCall({ callUUID });
+    } catch (error: unknown) {
+      console.warn("Failed to end CallKit call", error);
+    }
+  };
+
+  readonly stop = (): void => {
+    this.#subscription?.remove();
+    this.#subscription = undefined;
+    this.#lastConfigurationSignature = null;
+    this.#startedJoinNonce = null;
+    void this.endCall();
+  };
+
+  #callKitOptions(input: SpaceCallKitSyncInput): ResolvedSpaceCallKitOptions | null {
+    return resolveSpaceCallKitOptions({
+      callKit: input.callKit,
+      hasVideo: input.hasVideo,
+      spaceId: input.spaceId,
+      spaceName: input.spaceName || input.spaceId,
+    });
+  }
+}

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

@@ -0,0 +1,56 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it, vi } from "vitest";
+
+const appearanceState = vi.hoisted(() => ({
+  theme: { colors: { ink: "#light-ink", ink2: "#light-muted", ink3: "#light-subtle", line: "#light-line", primary: "#light-primary", surfaceMuted: "#light-surface", success: "#light-success" } },
+  appearance: { palette: "light", texture: "none", tokens: { stage: "#light-stage", textMuted: "#light-muted" } },
+  setPalette: vi.fn(),
+  setTexture: vi.fn(),
+}));
+
+vi.mock("react-native", () => ({ Pressable: "Pressable", StyleSheet: { create: <T,>(styles: T) => styles }, Text: "Text", View: "View" }));
+vi.mock("@hugeicons/react-native", () => ({ HugeiconsIcon: "HugeiconsIcon" }));
+vi.mock("@hugeicons/core-free-icons/dist/esm/CheckmarkCircle01Icon", () => ({ default: "CheckmarkCircle01Icon" }), { virtual: true });
+vi.mock("../../ui/native-appearance-context", () => ({ useNativeAppearance: () => appearanceState }));
+vi.mock("../../ui/native-theme", () => ({ useNativeTheme: () => appearanceState.theme }));
+
+import { AppearanceSettings } from "./AppearanceSettings";
+
+const source = readFileSync(new URL("./AppearanceSettings.tsx", import.meta.url), "utf8");
+
+describe("AppearanceSettings", () => {
+  it("exposes every palette family and texture as an accessible selection", () => {
+    expect(source).toContain('(["light", "dark"] as const)');
+    expect(source).toContain("THEME_PALETTES.filter");
+    expect(source).toContain("THEME_TEXTURES.map");
+    expect(source).toContain("accessibilityState={{ selected }}");
+    expect(source).toContain("setPalette");
+    expect(source).toContain("setTexture");
+  });
+
+  it("renders palette controls with the active light and dark NativeTheme", () => {
+    appearanceState.theme.colors = { ...appearanceState.theme.colors, ink2: "#light-muted", line: "#light-line", surfaceMuted: "#light-surface" };
+    const lightTree = AppearanceSettings();
+    expect(resolveStyle(findByAccessibilityLabel(lightTree, "Use Chalk Light palette")?.style)).toEqual(expect.arrayContaining([expect.objectContaining({ backgroundColor: "#light-surface", borderColor: "#light-line" })]));
+
+    appearanceState.theme.colors = { ...appearanceState.theme.colors, ink2: "#dark-muted", line: "#dark-line", surfaceMuted: "#dark-surface" };
+    const darkTree = AppearanceSettings();
+    expect(resolveStyle(findByAccessibilityLabel(darkTree, "Use Chalk Light palette")?.style)).toEqual(expect.arrayContaining([expect.objectContaining({ backgroundColor: "#dark-surface", borderColor: "#dark-line" })]));
+  });
+});
+
+function resolveStyle(style: unknown): unknown {
+  return typeof style === "function" ? (style as (state: { readonly pressed: boolean }) => unknown)({ pressed: false }) : style;
+}
+
+function findByAccessibilityLabel(value: unknown, label: string): { readonly style?: unknown } | undefined {
+  if (Array.isArray(value)) return value.map((child) => findByAccessibilityLabel(child, label)).find(Boolean);
+  if (!value || typeof value !== "object") return undefined;
+  const element = value as { readonly props?: { readonly accessibilityLabel?: unknown; readonly children?: unknown; readonly style?: unknown } };
+  if (typeof (element as { readonly type?: unknown }).type === "function") {
+    const component = (element as { readonly type: (props: Record<string, unknown>) => unknown }).type;
+    return findByAccessibilityLabel(component((element.props ?? {}) as Record<string, unknown>), label);
+  }
+  if (element.props?.accessibilityLabel === label) return element.props;
+  return findByAccessibilityLabel(element.props?.children, label);
+}