@q9labsai/chalk-react-native 4.1.17 → 5.0.1

package/src/theme/tokens.ts

@@ -0,0 +1,247 @@
+import { Easing } from "react-native-reanimated";
+
+/**
+ * Design tokens for the call, copied from the approved mobile mockup
+ * (`.dev` and `.dev.light` in mobile-mockup.html) and named by role as in design.md.
+ * This file and `fixed` below are the only places a colour literal may appear.
+ */
+export type ColorScheme = "dark" | "light";
+
+export type Palette = {
+  /** Call background and status pages. */
+  readonly canvas: string;
+  /** Sheets, cards, the people pill and header buttons. */
+  readonly surface: string;
+  /** Tile background and the letterbox colour of shared content. */
+  readonly tile: string;
+  /** Round dock buttons, fields, chat bubbles, selected rows. */
+  readonly raised: string;
+  /** Menus, popovers and toasts. */
+  readonly popover: string;
+  /** Pressed row, expanded control, the default pill button. */
+  readonly hover: string;
+  /** Pressed surface of a raised control, switch track when off. */
+  readonly pressed: string;
+  readonly line: string;
+  readonly lineStrong: string;
+  readonly text: string;
+  readonly textStrong: string;
+  readonly textSoft: string;
+  readonly textMuted: string;
+  /** Focus ring: the mockup draws `outline: 2px solid var(--tx)`. */
+  readonly focus: string;
+  readonly danger: string;
+  readonly dangerPressed: string;
+  readonly dangerText: string;
+  readonly success: string;
+  readonly warning: string;
+  /** The call's accent: unread dots and your own reactions. */
+  readonly info: string;
+};
+
+const dark: Palette = {
+  canvas: "#0B0C0E",
+  surface: "#151619",
+  tile: "#151619",
+  raised: "#1D1F23",
+  popover: "#1D1F23",
+  hover: "#272A2F",
+  pressed: "#30333A",
+  line: "rgba(255,255,255,0.08)",
+  lineStrong: "rgba(255,255,255,0.14)",
+  text: "#ECECEE",
+  textStrong: "#FFFFFF",
+  textSoft: "#C4C6CC",
+  textMuted: "#9A9CA3",
+  focus: "#ECECEE",
+  danger: "#E5484D",
+  dangerPressed: "#C93D42",
+  dangerText: "#FF6B6B",
+  success: "#80B879",
+  warning: "#D9B641",
+  info: "#55AAC9",
+};
+
+const light: Palette = {
+  canvas: "#F3F3F5",
+  surface: "#FFFFFF",
+  tile: "#E2E2E7",
+  raised: "#ECECF0",
+  popover: "#FFFFFF",
+  hover: "#E1E1E6",
+  pressed: "#D3D3D9",
+  line: "rgba(0,0,0,0.09)",
+  lineStrong: "rgba(0,0,0,0.15)",
+  text: "#18181B",
+  textStrong: "#000000",
+  textSoft: "#3D3E45",
+  textMuted: "#5C5D65",
+  focus: "#18181B",
+  danger: "#D93A3F",
+  dangerPressed: "#C93D42",
+  dangerText: "#BF272C",
+  success: "#2B8A3E",
+  warning: "#8A6400",
+  info: "#1B70A0",
+};
+
+export const palettes: Readonly<Record<ColorScheme, Palette>> = { dark, light };
+
+/** Colours that stay the same in both themes, because they sit on video or carry a fixed meaning. */
+export const fixed = {
+  overlay: "rgba(12,14,18,0.75)",
+  overlayStrong: "rgba(12,14,18,0.82)",
+  overlayPressed: "rgba(40,42,48,0.95)",
+  overlayText: "#FFFFFF",
+  overlayDanger: "#FF6B6B",
+  overlayWarning: "#E2BD3A",
+  onDanger: "#FFFFFF",
+  hand: "#DCB740",
+  handText: "#16140C",
+  scrim: "rgba(0,0,0,0.55)",
+  liveRing: "rgba(255,255,255,0.9)",
+  liveRingShade: "rgba(0,0,0,0.35)",
+  switchKnob: "#FFFFFF",
+  /** QR codes stay black on white in both themes so every camera reads them. */
+  qrLight: "#FFFFFF",
+  qrDark: "#000000",
+  shadow: "#000000",
+  transparent: "transparent",
+  /** The selected segment of a compact segmented control. */
+  segmentShadow: "0px 1px 2px rgba(0,0,0,0.2)",
+} as const;
+
+/** File badges in chat (`.t-pdf` and friends); the same in both themes because the badge carries its own colour. */
+export const fileKindColors = { pdf: "#C42B2B", doc: "#2F5FB3", xls: "#1E7A46", ppt: "#B8481E", other: "#5C5D65" } as const;
+
+/** Shades over chat photos: "+N" on the last thumbnail (`.thm`) and a file still uploading (`.chip.up`). */
+export const chatOverlays = { photoMore: "rgba(0,0,0,0.5)", uploading: "rgba(0,0,0,0.45)", ring: "#FFFFFF" } as const;
+
+/** The photo viewer is dark in both themes (`.lbw`). */
+export const viewer = {
+  backdrop: "rgba(8,8,10,0.94)",
+  text: "#ECECEE",
+  textMuted: "#A1A2A9",
+  button: "rgba(255,255,255,0.08)",
+  buttonPressed: "rgba(255,255,255,0.16)",
+} as const;
+
+/** Avatar backgrounds, chosen by a hash of the person's name. */
+export const identityColors = ["#315F72", "#5C6650", "#6B5B4F", "#64576B", "#49645D", "#665D42", "#4D5D73", "#6D5158"] as const;
+
+/**
+ * Shadows. In the light theme, controls that sit on the canvas carry a one-pixel `line` ring
+ * and floating surfaces add a soft shadow; the dark theme uses the heavier mockup shadows.
+ */
+export type Elevation = {
+  readonly popover: string;
+  readonly toast: string;
+  /** The small tile floating over the other person when two are in the call (`.tile.float`). */
+  readonly floatTile: string;
+  /** Controls on the canvas (dock buttons, people pill) get a one-pixel ring in light. */
+  readonly ringOnCanvas: boolean;
+};
+
+export const elevations: Readonly<Record<ColorScheme, Elevation>> = {
+  dark: { popover: "0px 12px 32px rgba(0,0,0,0.5)", toast: "0px 8px 24px rgba(0,0,0,0.4)", floatTile: "0px 0px 0px 1px rgba(255,255,255,0.14), 0px 6px 18px rgba(0,0,0,0.5)", ringOnCanvas: false },
+  light: { popover: "0px 0px 0px 1px rgba(0,0,0,0.09), 0px 12px 32px rgba(0,0,0,0.12)", toast: "0px 0px 0px 1px rgba(0,0,0,0.09), 0px 12px 32px rgba(0,0,0,0.12)", floatTile: "0px 0px 0px 1px rgba(0,0,0,0.15), 0px 6px 18px rgba(0,0,0,0.5)", ringOnCanvas: true },
+};
+
+export type FontWeight = 400 | 500 | 600 | 700;
+
+/** Figtree is embedded by the app; these are its PostScript names, which iOS and Android both resolve. */
+export const fontFamilies: Readonly<Record<FontWeight, string>> = {
+  400: "Figtree-Regular",
+  500: "Figtree-Medium",
+  600: "Figtree-SemiBold",
+  700: "Figtree-Bold",
+};
+
+const LINE_HEIGHT = 1.4;
+
+function textStyle(fontSize: number, weight: FontWeight) {
+  return { fontFamily: fontFamilies[weight], fontSize, lineHeight: fontSize * LINE_HEIGHT } as const;
+}
+
+/** The call type scale. Text is Figtree at a line height of 1.4, in sentence case. */
+export const type = {
+  statusTitle: textStyle(22, 600),
+  limboTitle: textStyle(20, 600),
+  progress: textStyle(17, 600),
+  sheetTitle: textStyle(16, 600),
+  phoneRow: textStyle(16, 400),
+  cardTitle: textStyle(15, 600),
+  wideButton: textStyle(15, 600),
+  body: textStyle(14, 400),
+  bodyMedium: textStyle(14, 500),
+  bodyStrong: textStyle(14, 600),
+  button: textStyle(13, 600),
+  meta: textStyle(13, 400),
+  label: textStyle(12, 500),
+  section: textStyle(12, 600),
+  caption: textStyle(11, 600),
+} as const;
+
+export type TypeStyle = keyof typeof type;
+
+export const radii = {
+  tag: 6,
+  field: 10,
+  menuRow: 9,
+  menu: 12,
+  tile: 12,
+  tilePhone: 14,
+  card: 16,
+  sheet: 24,
+  round: 999,
+} as const;
+
+/** Four-point grid. */
+export const space = { 1: 4, 2: 8, 3: 12, 4: 16, 5: 20, 6: 24, 8: 32, 10: 40 } as const;
+
+export const sizes = {
+  control: 44,
+  dockPhone: 52,
+  headerButton: 40,
+  menuRow: 40,
+  menuRowPhone: 48,
+  toastMinHeight: 48,
+  handleWidth: 36,
+  handleHeight: 5,
+} as const;
+
+/** Durations in milliseconds, from the mockup's CSS transitions. */
+export const durations = {
+  press: 150,
+  chromeFade: 250,
+  menu: 180,
+  toastIn: 200,
+  toastOut: 160,
+  card: 200,
+  sheet: 240,
+  scrim: 200,
+  move: 220,
+  enter: 220,
+  leave: 160,
+  copyMorph: 200,
+  copyReset: 2000,
+  veil: 300,
+  avatarTurn: 300,
+  speakingLevel: 90,
+  landscapeHide: 4000,
+  toastInfo: 5000,
+} as const;
+
+/** `--ease` in the mockup: menus, toasts, cards, sheets, the copy morph. */
+const emphasized = Easing.bezier(0.16, 1, 0.3, 1);
+/** `EASE` in the mockup: tiles moving between frames. */
+const move = Easing.bezier(0.2, 0.8, 0.2, 1);
+/** CSS `ease-out`: presses, fades, the scrim. */
+const easeOut = Easing.bezier(0, 0, 0.58, 1);
+/** The avatar's turn to the front. */
+const standard = Easing.bezier(0.4, 0, 0.2, 1);
+
+export const easings = { emphasized, move, easeOut, standard, linear: Easing.linear } as const;
+
+/** Scale of a pressed control, per control family. */
+export const pressScale = { round: 0.94, pill: 0.97, small: 0.92, big: 0.98 } as const;

package/src/toasts/CallEventToasts.tsx

@@ -0,0 +1,192 @@
+import { SpaceClientError, type SpaceClient } from "@q9labsai/chalk-client";
+import { useCallback, useEffect, useRef } from "react";
+import { Linking, Platform } from "react-native";
+import { FaceAvatar } from "../avatar/FaceAvatar";
+import { useSpaceClient } from "../context/space-client-context";
+import { usePreferences } from "../frame/preferences";
+import { Icon, type IconName } from "../icons/Icon";
+import type { ToastInput } from "../primitives/toast/toast-store";
+import { useToasts } from "../primitives/toast/ToastStack";
+import { playSound, type SoundName } from "../sounds/sounds";
+import { useTheme } from "../theme/theme";
+import type { Palette } from "../theme/tokens";
+import { callNotices, firstName, type Notice } from "./notices";
+
+/** A device the call asks the OS for. */
+export type Permission = "microphone" | "camera";
+
+type Toasts = ReturnType<typeof useToasts>;
+
+export type CallEventToasts = {
+  /** Call before the person turns their own microphone off, so it isn't reported as a host mute. */
+  readonly noteOwnMicrophoneChange: () => void;
+  /** Says why turning on the microphone or camera failed, with the way forward (F1, K1, K2). */
+  readonly reportMediaFailure: (permission: Permission, cause: unknown, retry: () => void) => void;
+};
+
+export type CallEventToastsOptions = {
+  /** Called just before Open Settings leaves the app, so the app can rejoin after iOS restarts it. */
+  readonly onOpenSettings?: (permission: Permission) => void;
+  /** The app restarted after the person allowed this in Settings; says so once the call is live. */
+  readonly resumedAfterSettings?: Permission;
+};
+
+/**
+ * Turns call events into notices and sounds through the one toast stack: people joining and
+ * leaving (F5, F6), a host muting you (F8), requests to unmute (F3), a new host (F10), a share
+ * ending (F11), recording starting and stopping, and failed microphone or camera changes.
+ */
+export function useCallEventToasts({ onOpenSettings, resumedAfterSettings }: CallEventToastsOptions): CallEventToasts {
+  const client = useSpaceClient();
+  const toasts = useToasts();
+  const { colors } = useTheme();
+  const { soundsEnabled } = usePreferences();
+  const ownMicrophoneChange = useRef(false);
+  const latest = useRef({ colors, soundsEnabled });
+  latest.current = { colors, soundsEnabled };
+
+  useEffect(() => {
+    let previous = client.getSnapshot();
+    return client.subscribe(() => {
+      const next = client.getSnapshot();
+      if (next === previous) return;
+      const notices = callNotices(previous, next, ownMicrophoneChange.current);
+      if (previous.media.local.microphone.state !== next.media.local.microphone.state) ownMicrophoneChange.current = false;
+      previous = next;
+      for (const notice of notices) {
+        let id = 0;
+        const { input, sound } = noticeToast(notice, { client, toasts, colors: latest.current.colors, dismiss: () => toasts.dismiss(id) });
+        id = toasts.show(input);
+        if (sound) playSound(sound, latest.current.soundsEnabled);
+      }
+    });
+  }, [client, toasts]);
+
+  useResumedAfterSettings(resumedAfterSettings, toasts);
+
+  const noteOwnMicrophoneChange = useCallback(() => {
+    ownMicrophoneChange.current = true;
+  }, []);
+
+  const reportMediaFailure = useCallback(
+    (permission: Permission, cause: unknown, retry: () => void) => {
+      const code = cause instanceof SpaceClientError ? cause.code : null;
+      const icon: IconName = permission === "microphone" ? "micOff" : "camOff";
+      const leading = <Icon color={latest.current.colors.dangerText} name={icon} />;
+      playSound("error", latest.current.soundsEnabled);
+      if (code === "media.permission_denied") {
+        const id = toasts.show({
+          kind: "error",
+          leading,
+          wrap: true,
+          dismissible: true,
+          testID: `toast.${permission}-denied`,
+          message: [{ strong: `Chalk can’t use your ${permission}.` }, Platform.OS === "ios" ? ` Allow it in Settings, then turn your ${permission} back on.` : " Allow it in Settings."],
+          actions: [
+            {
+              label: "Open Settings",
+              testID: "toast.open-settings",
+              onPress: () => {
+                toasts.dismiss(id);
+                onOpenSettings?.(permission);
+                void Linking.openSettings();
+              },
+            },
+          ],
+        });
+        return;
+      }
+      if (code === "media.device_busy") {
+        const id = toasts.show({
+          kind: "error",
+          leading,
+          wrap: true,
+          dismissible: true,
+          testID: `toast.${permission}-busy`,
+          message: `Another app is using your ${permission}`,
+          actions: [
+            {
+              label: "Try again",
+              testID: "toast.try-again",
+              onPress: () => {
+                toasts.dismiss(id);
+                retry();
+              },
+            },
+          ],
+        });
+        return;
+      }
+      toasts.show({ kind: "error", leading, dismissible: true, wrap: true, message: cause instanceof Error ? `Couldn’t turn on your ${permission}. ${cause.message}` : `Couldn’t turn on your ${permission}.` });
+    },
+    [onOpenSettings, toasts],
+  );
+
+  return { noteOwnMicrophoneChange, reportMediaFailure };
+}
+
+/** After Open Settings on iOS the OS restarts Chalk; once the call is live again, say why it rejoined. */
+function useResumedAfterSettings(permission: Permission | undefined, toasts: Toasts): void {
+  const client = useSpaceClient();
+  const { colors } = useTheme();
+  const shown = useRef(false);
+  useEffect(() => {
+    if (!permission) return;
+    const check = () => {
+      if (shown.current || client.getSnapshot().connection.status !== "live") return;
+      shown.current = true;
+      toasts.show({ leading: <Icon color={colors.textMuted} name="check" />, message: `You’re back in the call. Chalk can use your ${permission} now.`, testID: "toast.resumed" });
+    };
+    check();
+    return client.subscribe(check);
+  }, [client, colors, permission, toasts]);
+}
+
+type NoticeContext = {
+  readonly client: SpaceClient;
+  readonly toasts: Toasts;
+  readonly colors: Palette;
+  /** Dismisses this notice, for actions that act on it. */
+  readonly dismiss: () => void;
+};
+
+function noticeToast(notice: Notice, { client, toasts, colors, dismiss }: NoticeContext): { readonly input: ToastInput; readonly sound?: SoundName } {
+  const icon = (name: IconName, tone: "muted" | "danger" = "muted") => <Icon color={tone === "danger" ? colors.dangerText : colors.textMuted} name={name} />;
+  const avatar = (name: string) => <FaceAvatar name={name} size={28} />;
+  switch (notice.kind) {
+    case "joined":
+      return { input: { leading: avatar(notice.name), message: [{ strong: notice.name }, " joined"], testID: "toast.joined" }, sound: "join" };
+    case "left":
+      return { input: { leading: avatar(notice.name), message: [{ strong: notice.name }, " left"], testID: "toast.left" }, sound: "leave" };
+    case "mutedByHost":
+      return {
+        input: notice.by ? { leading: avatar(notice.by), message: [{ strong: notice.by }, " muted you. Unmute when you’re ready."], testID: "toast.muted-by-host" } : { leading: icon("micOff"), message: "You were muted. Unmute when you’re ready.", testID: "toast.muted-by-host" },
+        sound: "mute",
+      };
+    case "mediaRequest": {
+      const { request } = notice;
+      const who = request.actorDisplayName ? firstName(request.actorDisplayName) : "The host";
+      const unmute = request.kind === "unmute";
+      const accept = () => {
+        dismiss();
+        client.media.acceptRequest(request.requestId).catch(() => toasts.show({ kind: "error", dismissible: true, message: unmute ? "Couldn’t unmute you." : "Couldn’t turn on your camera." }));
+      };
+      return {
+        input: {
+          leading: icon(unmute ? "mic" : "cam"),
+          message: unmute ? `${who} asks you to unmute` : `${who} asks you to turn on your camera`,
+          testID: "toast.media-request",
+          actions: [{ label: unmute ? "Unmute" : "Turn on", variant: "primary", testID: "toast.accept-request", onPress: accept }],
+        },
+      };
+    }
+    case "newHost":
+      return { input: { leading: icon("users"), message: [{ strong: notice.previousHost }, " left. You’re now the host."], testID: "toast.new-host" }, sound: "leave" };
+    case "shareStopped":
+      return { input: { leading: icon("shareOff"), message: [{ strong: notice.name }, " stopped sharing"], testID: "toast.share-stopped" } };
+    case "recordingStarted":
+      return { input: { leading: icon("rec", "danger"), message: [{ strong: "Recording started." }, " Everyone in the call can see it."], testID: "toast.recording-started" }, sound: "recording" };
+    case "recordingStopped":
+      return { input: { leading: icon("rec"), message: "Recording stopped", testID: "toast.recording-stopped" } };
+  }
+}

package/src/toasts/notices.test.ts

@@ -0,0 +1,92 @@
+import type { Capability, Participant, SpaceSnapshot } from "@q9labsai/chalk-client";
+import { describe, expect, it } from "vitest";
+import { callNotices } from "./notices";
+
+const HOST: readonly Capability[] = ["endEpisode", "muteOthers"];
+
+function person(participantId: string, displayName: string, capabilities: readonly Capability[] = [], screenShare: "active" | "inactive" = "inactive"): Participant {
+  return {
+    participantId,
+    displayName,
+    role: capabilities.length ? "host" : "guest",
+    eligibleRoles: [],
+    capabilities,
+    handRaised: false,
+    media: { microphone: "inactive", camera: "inactive", screenShare },
+    presence: { state: "connected", speaking: false, activeSpeaker: false },
+  };
+}
+
+type Shape = {
+  readonly status?: SpaceSnapshot["connection"]["status"];
+  readonly roster?: readonly Participant[];
+  readonly selfCapabilities?: readonly Capability[];
+  readonly microphone?: "enabled" | "disabled";
+  readonly requests?: SpaceSnapshot["media"]["incomingRequests"];
+  readonly recording?: "recording" | "stopped";
+};
+
+function snapshot({ status = "live", roster = [], selfCapabilities = [], microphone = "disabled", requests = [], recording }: Shape): SpaceSnapshot {
+  const local = (state: "enabled" | "disabled") => ({ source: "microphone" as const, state, track: null });
+  return {
+    connection: { status, episode: null, lastError: null },
+    self: { participantId: "me", displayName: "Hasan", role: null, capabilities: selfCapabilities, handRaised: false, can: (capability) => selfCapabilities.includes(capability) },
+    participants: { roster: [person("me", "Hasan", selfCapabilities), ...roster], admissionQueue: [] },
+    media: {
+      devices: { microphones: [], cameras: [], speakers: [] },
+      selection: { microphone: null, camera: null, speaker: null },
+      local: { microphone: local(microphone), camera: { ...local("disabled"), source: "camera" }, screen: { ...local("disabled"), source: "screen" } },
+      remote: [],
+      screenShare: { ...local("disabled"), source: "screen" },
+      incomingRequests: requests,
+    },
+    chat: { status: "ready", messages: [], pendingSends: [], readReceipts: [], unreadCount: 0, pagination: { cursor: null, hasOlder: false, historyTruncated: false }, lastError: null },
+    reactions: { active: [] },
+    recording: { current: recording ? { recordingId: "r1", status: recording, failureCode: null } : null },
+    whiteboard: { open: false, engine: { status: "unsubscribed", sceneId: null, revision: null, presenting: false, error: null } },
+    offline: { pending: [], decisionNeeded: false, policy: "ask" },
+  };
+}
+
+const nora = person("nora", "Nora Lindqvist", HOST);
+const sam = person("sam", "Sam Okafor");
+
+describe("callNotices", () => {
+  it("says nothing while the roster arrives on join or empties on leave", () => {
+    expect(callNotices(snapshot({ status: "joining" }), snapshot({ roster: [nora, sam] }), false)).toEqual([]);
+    expect(callNotices(snapshot({ roster: [nora, sam] }), snapshot({ status: "left" }), false)).toEqual([]);
+  });
+
+  it("names people who join and leave, but never you", () => {
+    expect(callNotices(snapshot({ roster: [nora] }), snapshot({ roster: [nora, sam] }), false)).toEqual([{ kind: "joined", name: "Sam Okafor" }]);
+    expect(callNotices(snapshot({ roster: [nora, sam] }), snapshot({ roster: [nora] }), false)).toEqual([{ kind: "left", name: "Sam Okafor" }]);
+  });
+
+  it("tells you the host left and you're the host now, instead of a plain leave", () => {
+    const notices = callNotices(snapshot({ roster: [nora, sam] }), snapshot({ roster: [sam], selfCapabilities: HOST }), false);
+    expect(notices).toEqual([{ kind: "newHost", previousHost: "Nora" }]);
+  });
+
+  it("reports a host mute only when you didn't mute yourself", () => {
+    const before = snapshot({ roster: [nora, sam], microphone: "enabled" });
+    const after = snapshot({ roster: [nora, sam], microphone: "disabled" });
+    expect(callNotices(before, after, false)).toEqual([{ kind: "mutedByHost", by: "Nora" }]);
+    expect(callNotices(before, after, true)).toEqual([]);
+  });
+
+  it("reports each new request to unmute once", () => {
+    const request = { requestId: "q1", kind: "unmute" as const, actorParticipantId: "nora", actorDisplayName: "Nora Lindqvist", expiresAt: "2026-10-18T12:00:00Z" };
+    expect(callNotices(snapshot({ roster: [nora] }), snapshot({ roster: [nora], requests: [request] }), false)).toEqual([{ kind: "mediaRequest", request }]);
+    expect(callNotices(snapshot({ roster: [nora], requests: [request] }), snapshot({ roster: [nora], requests: [request] }), false)).toEqual([]);
+  });
+
+  it("reports when someone else stops sharing", () => {
+    const sharing = person("sam", "Sam Okafor", [], "active");
+    expect(callNotices(snapshot({ roster: [sharing] }), snapshot({ roster: [sam] }), false)).toEqual([{ kind: "shareStopped", name: "Sam" }]);
+  });
+
+  it("reports recording starting and stopping", () => {
+    expect(callNotices(snapshot({}), snapshot({ recording: "recording" }), false)).toEqual([{ kind: "recordingStarted" }]);
+    expect(callNotices(snapshot({ recording: "recording" }), snapshot({ recording: "stopped" }), false)).toEqual([{ kind: "recordingStopped" }]);
+  });
+});

package/src/toasts/notices.ts

@@ -0,0 +1,62 @@
+import type { IncomingMediaRequest, Participant, SpaceSnapshot } from "@q9labsai/chalk-client";
+
+/** A call event worth a notice, read from the difference between two snapshots. */
+export type Notice =
+  | { readonly kind: "joined"; readonly name: string }
+  | { readonly kind: "left"; readonly name: string }
+  | { readonly kind: "mutedByHost"; readonly by: string | null }
+  | { readonly kind: "mediaRequest"; readonly request: IncomingMediaRequest }
+  | { readonly kind: "newHost"; readonly previousHost: string }
+  | { readonly kind: "shareStopped"; readonly name: string }
+  | { readonly kind: "recordingStarted" }
+  | { readonly kind: "recordingStopped" };
+
+/**
+ * Notices for what changed between `previous` and `next`. Only changes inside a live call count,
+ * so the roster arriving on join or emptying on leave says nothing. `ownMicrophoneChange` is true
+ * when the person turned their own microphone off since the last snapshot.
+ */
+export function callNotices(previous: SpaceSnapshot, next: SpaceSnapshot, ownMicrophoneChange: boolean): readonly Notice[] {
+  if (previous.connection.status !== "live" || next.connection.status !== "live") return [];
+  const self = next.self.participantId;
+  const before = new Map(previous.participants.roster.map((participant) => [participant.participantId, participant]));
+  const after = new Map(next.participants.roster.map((participant) => [participant.participantId, participant]));
+  const notices: Notice[] = [];
+
+  const departed = [...before.values()].filter((participant) => !after.has(participant.participantId) && participant.participantId !== self);
+  const becameHost = !previous.self.can("endEpisode") && next.self.can("endEpisode");
+  const departedHost = becameHost ? departed.find(isHost) : undefined;
+  if (departedHost) notices.push({ kind: "newHost", previousHost: firstName(departedHost.displayName) });
+
+  for (const participant of after.values()) if (!before.has(participant.participantId) && participant.participantId !== self) notices.push({ kind: "joined", name: participant.displayName });
+  for (const participant of departed) if (participant !== departedHost) notices.push({ kind: "left", name: participant.displayName });
+
+  for (const participant of after.values()) {
+    if (participant.participantId === self) continue;
+    if (before.get(participant.participantId)?.media.screenShare === "active" && participant.media.screenShare !== "active") notices.push({ kind: "shareStopped", name: firstName(participant.displayName) });
+  }
+
+  if (previous.media.local.microphone.state === "enabled" && next.media.local.microphone.state === "disabled" && !ownMicrophoneChange) {
+    const muters = next.participants.roster.filter((participant) => participant.participantId !== self && participant.capabilities.includes("muteOthers"));
+    notices.push({ kind: "mutedByHost", by: muters.length === 1 && muters[0] ? firstName(muters[0].displayName) : null });
+  }
+
+  const known = new Set(previous.media.incomingRequests.map((request) => request.requestId));
+  for (const request of next.media.incomingRequests) if (!known.has(request.requestId)) notices.push({ kind: "mediaRequest", request });
+
+  const wasRecording = previous.recording.current?.status === "recording";
+  const isRecording = next.recording.current?.status === "recording";
+  if (!wasRecording && isRecording) notices.push({ kind: "recordingStarted" });
+  if (wasRecording && !isRecording) notices.push({ kind: "recordingStopped" });
+
+  return notices;
+}
+
+function isHost(participant: Participant): boolean {
+  return participant.capabilities.includes("endEpisode");
+}
+
+/** The mockup names people by their first name in notices that ask something of you. */
+export function firstName(name: string): string {
+  return name.trim().split(/\s+/)[0] ?? name;
+}

package/src/ui/ChalkUI.tsx

@@ -0,0 +1,49 @@
+import type { ReactNode } from "react";
+import { StyleSheet, View } from "react-native";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { DeviceLayoutProvider } from "../frame/device-layout";
+import { PortalHost, PortalProvider } from "../frame/portal";
+import { ToastProvider, ToastStack } from "../primitives/toast/ToastStack";
+import { ThemeProvider } from "../theme/theme";
+import type { ColorScheme } from "../theme/tokens";
+
+export type ChalkUIProps = {
+  readonly colorScheme: ColorScheme;
+  readonly children: ReactNode;
+};
+
+/**
+ * Everything the call's primitives need, for the screens an app draws around `Chalk` (its Home, for
+ * example): theme, safe areas, sheets, menus and toasts. Sheets and menus open above `children`.
+ */
+export function ChalkUI({ colorScheme, children }: ChalkUIProps): React.JSX.Element {
+  return (
+    <GestureHandlerRootView style={styles.root}>
+      <SafeAreaProvider>
+        <ThemeProvider colorScheme={colorScheme}>
+          <DeviceLayoutProvider>
+            <PortalProvider>
+              <ToastProvider>
+                <View style={styles.root}>
+                  {children}
+                  <View pointerEvents="box-none" style={StyleSheet.absoluteFill}>
+                    <PortalHost layer="sheets" />
+                  </View>
+                  <View pointerEvents="box-none" style={StyleSheet.absoluteFill}>
+                    <PortalHost layer="menus" />
+                  </View>
+                  <ToastStack />
+                </View>
+              </ToastProvider>
+            </PortalProvider>
+          </DeviceLayoutProvider>
+        </ThemeProvider>
+      </SafeAreaProvider>
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1 },
+});

package/src/ui.ts

@@ -0,0 +1,24 @@
+/** The call's look, for the screens an app draws around `Chalk`: Home, joining and the name step. */
+export { ChalkUI } from "./ui/ChalkUI";
+export type { ChalkUIProps } from "./ui/ChalkUI";
+export { useTheme } from "./theme/theme";
+export type { Theme } from "./theme/theme";
+export { fixed, fontFamilies, radii, type } from "./theme/tokens";
+export type { ColorScheme, Palette } from "./theme/tokens";
+export { useDeviceLayout } from "./frame/device-layout";
+export { Icon } from "./icons/Icon";
+export type { IconName } from "./icons/Icon";
+export { ChalkText } from "./primitives/ChalkText";
+export { IconButton } from "./primitives/IconButton";
+export { PillButton } from "./primitives/PillButton";
+export { BottomSheet } from "./primitives/BottomSheet";
+export { SheetGroup, SheetRow } from "./primitives/SheetGroup";
+export { Menu, MenuItem } from "./primitives/Menu";
+export { Switch } from "./primitives/Switch";
+export { SegmentedControl } from "./primitives/SegmentedControl";
+export { CopyButton } from "./primitives/CopyButton";
+export { FaceAvatar } from "./avatar/FaceAvatar";
+export { useToastClearance, useToasts } from "./primitives/toast/ToastStack";
+export { announce } from "./primitives/announce";
+export { usePressAnimation } from "./motion/press";
+export { Limbo } from "./limbo/Limbo";

package/dist/android.d.ts

@@ -1,2 +0,0 @@
-export * from "./index";
-//# sourceMappingURL=android.d.ts.map

package/dist/android.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"android.d.ts","sourceRoot":"","sources":["../src/android.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}