@q9labsai/chalk-react-native 4.1.17 → 5.0.1

package/src/stage/ParticipantTile.tsx

@@ -0,0 +1,140 @@
+import type { SpaceSnapshot } from "@q9labsai/chalk-client";
+import { memo, useCallback, useEffect, useMemo, type ReactNode } from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import { useSharedValue, withTiming } from "react-native-reanimated";
+import { FaceAvatar } from "../avatar/FaceAvatar";
+import { tileAvatarSize } from "../avatar/tile-avatar-size";
+import { RtcVideoView } from "../components/RtcVideoView";
+import { useSpaceClient } from "../context/space-client-context";
+import { useDevScenario } from "../frame/dev-scenario";
+import { useMeasuredRef } from "../frame/measurement";
+import { Icon } from "../icons/Icon";
+import { createNativeMediaStream } from "../media/native-webrtc";
+import { timings } from "../motion/motion";
+import { NameTag, nameTagZone } from "../primitives/NameTag";
+import { TileShell } from "../primitives/TileShell";
+import { useToasts } from "../primitives/toast/ToastStack";
+import { fixed, pressScale } from "../theme/tokens";
+import { cameraFacing, otherCamera } from "./camera";
+import { shallowEqual, useSpaceSelector } from "./space-selector";
+
+export type ParticipantTileProps = {
+  readonly id: string;
+  readonly width: number;
+  readonly height: number;
+  /** The small tile floating over the other person when two are in the call. */
+  readonly float: boolean;
+  readonly pinned: boolean;
+  /** Your own front-camera video is mirrored while this is on. */
+  readonly mirror: boolean;
+  readonly onOpen: (participantId: string) => void;
+};
+
+type TileModel = {
+  readonly name: string;
+  readonly isSelf: boolean;
+  readonly muted: boolean;
+  readonly handRaised: boolean;
+  readonly speaking: boolean;
+  readonly track: MediaStreamTrack | null;
+  readonly back: boolean;
+};
+
+/** Below this width your own tile reads "You", because "<name> (You)" leaves no room for the name. */
+const SELF_NAME_MIN_WIDTH = 120;
+
+function selectTile(id: string) {
+  return (snapshot: SpaceSnapshot): TileModel => {
+    const participant = snapshot.participants.roster.find((person) => person.participantId === id);
+    const isSelf = snapshot.self.participantId === id;
+    const { local, remote } = snapshot.media;
+    const track = isSelf ? (local.camera.state === "enabled" ? local.camera.track : null) : participant?.media.camera === "active" ? (remote.find((media) => media.participantId === id && media.source === "camera")?.track ?? null) : null;
+    return {
+      name: participant?.displayName ?? snapshot.self.displayName ?? "",
+      isSelf,
+      muted: isSelf ? local.microphone.state !== "enabled" : participant?.media.microphone !== "active",
+      handRaised: isSelf ? snapshot.self.handRaised : (participant?.handRaised ?? false),
+      speaking: participant?.presence.speaking ?? false,
+      track,
+      back: isSelf && cameraFacing(snapshot.media) === "back",
+    };
+  };
+}
+
+/**
+ * One person's tile: their camera, or their bold facehash when the camera is off, the name tag,
+ * and the speaking ring. It subscribes to that person alone, so nobody else's change re-renders
+ * it, and the stage keeps it mounted across every move so the video view keeps its surface.
+ */
+export const ParticipantTile = memo(function ParticipantTile({ id, width, height, float, pinned, mirror, onOpen }: ParticipantTileProps): React.JSX.Element {
+  const select = useMemo(() => selectTile(id), [id]);
+  const tile = useSpaceSelector(select, shallowEqual);
+  const slot = useDevScenario().videoSlots?.[id];
+  const level = useSharedValue(0);
+  useEffect(() => {
+    level.value = withTiming(tile.speaking ? 0.6 : 0, timings.level);
+  }, [level, tile.speaking]);
+
+  const streamURL = useMemo(() => (tile.track ? createNativeMediaStream(tile.track).toURL() : null), [tile.track]);
+  const video = tileVideo(slot, streamURL, tile.isSelf && !tile.back && mirror);
+  const youOnly = tile.isSelf && (float || width < SELF_NAME_MIN_WIDTH);
+  const name = youOnly ? "You" : tile.name;
+  const you = tile.isSelf && !youOnly;
+  const state = `${tile.muted ? ", microphone off" : ""}${tile.handRaised ? ", hand raised" : ""}`;
+  const hitRef = useMeasuredRef<View>(`tile.${id}.open`, StyleSheet.absoluteFill);
+  const label = `Options for ${tile.name}${tile.isSelf ? " (you)" : ""}${pinned ? ", pinned" : ""}${state}`;
+
+  return (
+    <TileShell cameraOn={video !== null} level={level} speaking={tile.speaking} testID={`tile.${id}`}>
+      {video ?? (
+        <View style={styles.center}>
+          <FaceAvatar level={level} lookAround name={tile.name} size={tileAvatarSize(width, height - nameTagZone)} style="bold" />
+        </View>
+      )}
+      <Pressable accessibilityHint="Opens a sheet" accessibilityLabel={label} accessibilityRole="button" onPress={() => onOpen(id)} ref={hitRef} style={StyleSheet.absoluteFill} testID={`tile.${id}.open`} />
+      <NameTag handRaised={tile.handRaised} muted={tile.muted} name={name} pinned={pinned} testID={`tile.${id}.name`} you={you} />
+      {tile.isSelf && video !== null ? <FlipCameraButton back={tile.back} float={float} testID={`tile.${id}.flip`} /> : null}
+    </TileShell>
+  );
+});
+
+/** A harness's fake video slot wins over the camera, so fixtures can show video without media. */
+function tileVideo(slot: ReactNode, streamURL: string | null, mirror: boolean): React.JSX.Element | null {
+  if (slot !== undefined) return <View style={[StyleSheet.absoluteFill, mirror ? styles.mirrored : null]}>{slot}</View>;
+  if (streamURL) return <RtcVideoView mirror={mirror} objectFit="cover" streamURL={streamURL} style={StyleSheet.absoluteFill} />;
+  return null;
+}
+
+const selectOtherCamera = (snapshot: SpaceSnapshot) => otherCamera(snapshot.media)?.deviceId ?? null;
+
+/** `.flip`: switches between the front and back camera, top right of your own video. */
+function FlipCameraButton({ back, float, testID }: { readonly back: boolean; readonly float: boolean; readonly testID: string }): React.JSX.Element | null {
+  const client = useSpaceClient();
+  const toasts = useToasts();
+  const other = useSpaceSelector(selectOtherCamera);
+  const flip = useCallback(() => {
+    if (other === null) return;
+    client.media.selectCamera(other).catch(() => toasts.show({ kind: "error", dismissible: true, message: "Couldn't switch the camera." }));
+  }, [client, other, toasts]);
+  if (other === null) return null;
+
+  return (
+    <Pressable accessibilityLabel={`Switch to the ${back ? "front" : "back"} camera`} accessibilityRole="button" onPress={flip} style={[styles.flip, float ? styles.flipFloat : null]} testID={testID}>
+      {({ pressed }) => (
+        <View style={[styles.flipKnob, { backgroundColor: pressed ? fixed.overlayPressed : fixed.overlay }, pressed ? styles.flipPressed : null]}>
+          <Icon color={fixed.overlayText} name="flip" size={17} />
+        </View>
+      )}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  // Centred above the name tag, so a short strip tile never hides the face behind the tag.
+  center: { ...StyleSheet.absoluteFillObject, bottom: nameTagZone, alignItems: "center", justifyContent: "center" },
+  mirrored: { transform: [{ scaleX: -1 }] },
+  flip: { position: "absolute", top: 2, right: 2, width: 44, height: 44, alignItems: "center", justifyContent: "center", zIndex: 4 },
+  flipFloat: { top: 0, right: 0 },
+  flipKnob: { width: 32, height: 32, borderRadius: 16, alignItems: "center", justifyContent: "center" },
+  flipPressed: { transform: [{ scale: pressScale.small }] },
+});

package/src/stage/Stage.tsx

@@ -0,0 +1,152 @@
+import type { SpaceSnapshot } from "@q9labsai/chalk-client";
+import { memo, useCallback, useMemo, useState } from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import Animated from "react-native-reanimated";
+import { useDevScenario } from "../frame/dev-scenario";
+import { useDeviceLayout } from "../frame/device-layout";
+import { useMeasuredRef } from "../frame/measurement";
+import { MovingFrame, type Frame } from "../motion/MovingFrame";
+import { tileEntering, tileLeaving } from "../motion/presence";
+import { ChalkText } from "../primitives/ChalkText";
+import { useTheme } from "../theme/theme";
+import { elevations, fontFamilies, radii } from "../theme/tokens";
+import { ContentTile, type SharedContent } from "./ContentTile";
+import { nextStageOrder, stageLayout, type StageItem, type StageOrder } from "./layout";
+import { ParticipantTile } from "./ParticipantTile";
+import { shallowEqual, useSpaceSelector } from "./space-selector";
+import { useStageView } from "./stage-view";
+import { TileSheet } from "./TileSheet";
+
+export type StageProps = {
+  /** The stage box in screen points, from `frameRegions`. */
+  readonly frame: Frame;
+  /** The "+N" tile opens People. */
+  readonly onOpenPeople: () => void;
+};
+
+type Structure = {
+  readonly selfId: string | null;
+  /** Everyone present, you first, joined by newlines so the selector compares one string. */
+  readonly present: string;
+  readonly speaker: string | null;
+  readonly sharer: string | null;
+  readonly board: boolean;
+};
+
+/** Only what decides where tiles go, so a mute or a hand raise never re-renders the stage. */
+function selectStructure(snapshot: SpaceSnapshot): Structure {
+  const selfId = snapshot.self.participantId;
+  const { roster } = snapshot.participants;
+  const others = roster.filter((person) => person.participantId !== selfId).map((person) => person.participantId);
+  const hasSelf = roster.some((person) => person.participantId === selfId);
+  return {
+    selfId,
+    present: (hasSelf && selfId !== null ? [selfId, ...others] : others).join("\n"),
+    speaker: roster.find((person) => person.presence.activeSpeaker)?.participantId ?? null,
+    sharer: roster.find((person) => person.participantId !== selfId && person.media.screenShare === "active")?.participantId ?? null,
+    board: snapshot.whiteboard.open,
+  };
+}
+
+/**
+ * The stage: Spotlight or Grid, smart placement of everyone present, and the shared screen or
+ * board. Tiles are keyed by participant and moved with `MovingFrame`, so a video view is never
+ * remounted by a move, a layout switch or a sheet; only tiles on the stage subscribe to video.
+ */
+export const Stage = memo(function Stage({ frame, onOpenPeople }: StageProps): React.JSX.Element {
+  const structure = useSpaceSelector(selectStructure, shallowEqual);
+  const view = useStageView();
+  const { arrangement } = useDeviceLayout();
+  const { shareAspect } = useDevScenario();
+  const [sheet, setSheet] = useState<{ readonly id: string | null; readonly open: boolean }>({ id: null, open: false });
+
+  const present = useMemo(() => (structure.present ? structure.present.split("\n") : []), [structure.present]);
+  const [order, setOrder] = useState<StageOrder>({ order: [], spot: null });
+  const next = nextStageOrder(order, present, structure.selfId, structure.speaker);
+  if (next !== order) setOrder(next);
+
+  const content = useMemo<SharedContent | null>(() => (structure.board ? { kind: "board" } : structure.sharer !== null ? { kind: "screen", sharerId: structure.sharer } : null), [structure.board, structure.sharer]);
+  const pinned = view.pinned !== null && present.includes(view.pinned) ? view.pinned : null;
+  const items = useMemo(
+    () =>
+      stageLayout({
+        stage: frame,
+        // The iPad uses the phone layout today.
+        portrait: arrangement !== "landscape",
+        layout: view.layout,
+        order: next.order,
+        spot: next.spot,
+        pinned,
+        content: content ? { kind: content.kind, aspect: content.kind === "board" ? null : (shareAspect ?? 16 / 9) } : null,
+      }),
+    [arrangement, content, frame, next, pinned, shareAspect, view.layout],
+  );
+
+  const openTile = useCallback((id: string) => setSheet({ id, open: true }), []);
+  const closeTile = useCallback(() => setSheet((current) => ({ ...current, open: false })), []);
+  // Like the mockup's `.stage`, the stage is a full-screen layer: tiles are placed in screen points
+  // inside `frame`, so they can move across regions.
+  const stageRef = useMeasuredRef<View>("frame.stage", styles.layer);
+
+  return (
+    <View pointerEvents="box-none" ref={stageRef} style={styles.layer} testID="frame.stage">
+      {items.map((item) => (
+        <StageTile content={content} item={item} key={itemKey(item)} mirror={view.mirror} onOpenPeople={onOpenPeople} onOpenTile={openTile} onShowContent={view.showContent} peopleCount={present.length} pinned={pinned} />
+      ))}
+      <TileSheet onClose={closeTile} open={sheet.open} participantId={sheet.id} />
+    </View>
+  );
+});
+
+function itemKey(item: StageItem): string {
+  return item.kind === "person" ? `person:${item.id}` : item.kind;
+}
+
+type StageTileProps = {
+  readonly item: StageItem;
+  readonly content: SharedContent | null;
+  readonly pinned: string | null;
+  readonly mirror: boolean;
+  readonly peopleCount: number;
+  readonly onOpenTile: (participantId: string) => void;
+  readonly onOpenPeople: () => void;
+  readonly onShowContent: () => void;
+};
+
+function StageTile({ item, content, pinned, mirror, peopleCount, onOpenTile, onOpenPeople, onShowContent }: StageTileProps): React.JSX.Element | null {
+  const { scheme } = useTheme();
+  const float = item.kind === "person" && item.float;
+  return (
+    <MovingFrame frame={item.frame} style={float ? [styles.float, { boxShadow: elevations[scheme].floatTile }] : null}>
+      <Animated.View entering={tileEntering} exiting={tileLeaving} style={styles.fill}>
+        {item.kind === "person" ? (
+          <ParticipantTile float={float} height={item.frame.height} id={item.id} mirror={mirror} onOpen={onOpenTile} pinned={pinned === item.id} width={item.frame.width} />
+        ) : item.kind === "content" && content ? (
+          <ContentTile content={content} inner={item.inner} mini={item.mini} onShowInSpotlight={onShowContent} />
+        ) : item.kind === "more" ? (
+          <MoreTile count={item.count} onPress={onOpenPeople} peopleCount={peopleCount} />
+        ) : null}
+      </Animated.View>
+    </MovingFrame>
+  );
+}
+
+/** `.more`: the last tile when the rest don't fit, showing how many more people there are. */
+const MoreTile = memo(function MoreTile({ count, peopleCount, onPress }: { readonly count: number; readonly peopleCount: number; readonly onPress: () => void }): React.JSX.Element {
+  const { colors } = useTheme();
+  const restStyle = [styles.more, { backgroundColor: colors.raised }];
+  const moreRef = useMeasuredRef<View>("tile.more", restStyle);
+  return (
+    <Pressable accessibilityLabel={`Show all ${peopleCount} people`} accessibilityRole="button" onPress={onPress} ref={moreRef} style={({ pressed }) => (pressed ? [styles.more, { backgroundColor: colors.hover }] : restStyle)} testID="tile.more">
+      <ChalkText style={styles.moreText}>{`+${count}`}</ChalkText>
+    </Pressable>
+  );
+});
+
+const styles = StyleSheet.create({
+  fill: { flex: 1 },
+  layer: StyleSheet.absoluteFillObject,
+  float: { zIndex: 12, borderRadius: radii.tilePhone },
+  more: { flex: 1, borderRadius: radii.tilePhone, alignItems: "center", justifyContent: "center" },
+  moreText: { fontFamily: fontFamilies[600], fontSize: 22, lineHeight: 22 * 1.4 },
+});

package/src/stage/TileSheet.tsx

@@ -0,0 +1,116 @@
+import type { SpaceSnapshot } from "@q9labsai/chalk-client";
+import { useCallback, useMemo } from "react";
+import { StyleSheet, View } from "react-native";
+import { FaceAvatar } from "../avatar/FaceAvatar";
+import { useSpaceClient } from "../context/space-client-context";
+import { announce } from "../primitives/announce";
+import { BottomSheet } from "../primitives/BottomSheet";
+import { ChalkText } from "../primitives/ChalkText";
+import { SheetGroup, SheetRow } from "../primitives/SheetGroup";
+import { Switch } from "../primitives/Switch";
+import { useToasts } from "../primitives/toast/ToastStack";
+import { cameraFacing, otherCamera } from "./camera";
+import { shallowEqual, useSpaceSelector } from "./space-selector";
+import { useStageView } from "./stage-view";
+
+export type TileSheetProps = {
+  /** The person whose tile was tapped last; it stays set while the sheet closes, so the rows don't empty mid-slide. */
+  readonly participantId: string | null;
+  readonly open: boolean;
+  readonly onClose: () => void;
+};
+
+type SheetModel = {
+  readonly name: string;
+  readonly isSelf: boolean;
+  readonly cameraOn: boolean;
+  readonly back: boolean;
+  readonly otherCamera: string | null;
+  readonly muted: boolean;
+  readonly canMute: boolean;
+  readonly canRemove: boolean;
+};
+
+const closed: SheetModel = { name: "", isSelf: false, cameraOn: false, back: false, otherCamera: null, muted: false, canMute: false, canRemove: false };
+
+/**
+ * The phone's tile sheet (`#tsheet` with `tileSheetHTML`): pin, your camera and mirror, and the
+ * host's mute and remove for someone else. Board following waits for board editing.
+ */
+export function TileSheet({ participantId, open, onClose }: TileSheetProps): React.JSX.Element {
+  const client = useSpaceClient();
+  const toasts = useToasts();
+  const view = useStageView();
+  const select = useMemo(
+    () =>
+      (snapshot: SpaceSnapshot): SheetModel => {
+        if (participantId === null) return closed;
+        const person = snapshot.participants.roster.find((participant) => participant.participantId === participantId);
+        const isSelf = snapshot.self.participantId === participantId;
+        return {
+          name: person?.displayName ?? snapshot.self.displayName ?? "",
+          isSelf,
+          cameraOn: isSelf && snapshot.media.local.camera.state === "enabled",
+          back: cameraFacing(snapshot.media) === "back",
+          otherCamera: otherCamera(snapshot.media)?.deviceId ?? null,
+          muted: person?.media.microphone !== "active",
+          canMute: !isSelf && snapshot.self.can("muteOthers"),
+          canRemove: !isSelf && snapshot.self.can("removeParticipant"),
+        };
+      },
+    [participantId],
+  );
+  const person = useSpaceSelector(select, shallowEqual);
+  const id = participantId ?? "";
+  const failed = useCallback((message: string) => () => toasts.show({ kind: "error", dismissible: true, message }), [toasts]);
+  const run = (action: () => void) => () => {
+    onClose();
+    action();
+  };
+
+  return (
+    <BottomSheet accessibilityLabel={`${person.name}${person.isSelf ? " (You)" : ""}`} onClose={onClose} open={open && participantId !== null} testID="sheet.tile">
+      <View style={styles.header}>
+        <FaceAvatar name={person.name} size={32} />
+        <ChalkText numberOfLines={1} style={styles.name} variant="sheetTitle">
+          {`${person.name}${person.isSelf ? " (You)" : ""}`}
+        </ChalkText>
+      </View>
+      <SheetGroup>
+        <SheetRow icon="pin" label={view.pinned === participantId ? "Unpin" : "Pin"} onPress={run(() => view.togglePin(id))} testID="tile-sheet.pin" />
+        {person.cameraOn && person.otherCamera !== null ? (
+          <SheetRow
+            icon="flip"
+            label={`Switch to the ${person.back ? "front" : "back"} camera`}
+            onPress={run(() => {
+              if (person.otherCamera) client.media.selectCamera(person.otherCamera).then(() => announce(`Switched to the ${person.back ? "front" : "back"} camera`), failed("Couldn't switch the camera."));
+            })}
+            testID="tile-sheet.flip"
+          />
+        ) : null}
+        {person.cameraOn && !person.back ? <SheetRow end={<Switch accessibilityLabel="Mirror my video" onValueChange={view.setMirror} testID="tile-sheet.mirror" value={view.mirror} />} icon="swap" label="Mirror my video" /> : null}
+        {person.canMute && !person.muted ? <SheetRow icon="micOff" label="Mute" onPress={run(() => client.participants.mute(id).catch(failed(`Couldn't mute ${person.name}.`)))} testID="tile-sheet.mute" /> : null}
+        {person.canRemove ? (
+          <SheetRow
+            danger
+            icon="x"
+            label="Remove from call"
+            onPress={run(() =>
+              client.participants
+                .remove(id)
+                .then(() => announce(`${person.name} was removed`))
+                .catch(failed(`Couldn't remove ${person.name}.`)),
+            )}
+            testID="tile-sheet.remove"
+          />
+        ) : null}
+      </SheetGroup>
+    </BottomSheet>
+  );
+}
+
+const styles = StyleSheet.create({
+  // `.shd`: the person's face and name over the rows.
+  header: { flexDirection: "row", alignItems: "center", gap: 12, paddingTop: 4, paddingHorizontal: 8, paddingBottom: 14 },
+  name: { flexShrink: 1 },
+});

package/src/stage/camera.ts

@@ -0,0 +1,20 @@
+import type { MediaDevice, MediaSlice } from "@q9labsai/chalk-client";
+
+export type CameraFacing = "front" | "back";
+
+const BACK = /back|rear|environment/i;
+
+function facingOf(device: MediaDevice | undefined): CameraFacing {
+  return device && BACK.test(device.label) ? "back" : "front";
+}
+
+/** Which way your selected camera faces. Without a selection the phone uses the front camera. */
+export function cameraFacing(media: MediaSlice): CameraFacing {
+  return facingOf(media.devices.cameras.find((camera) => camera.deviceId === media.selection.camera));
+}
+
+/** The camera facing the other way, or null when the phone has only one. */
+export function otherCamera(media: MediaSlice): MediaDevice | null {
+  const current = cameraFacing(media);
+  return media.devices.cameras.find((camera) => facingOf(camera) !== current) ?? null;
+}

package/src/stage/layout.test.ts

@@ -0,0 +1,77 @@
+import { describe, expect, it } from "vitest";
+import { nextStageOrder, stageLayout, type StageInput, type StageItem } from "./layout";
+
+// The D1 portrait stage from `frameRegions`. Expected frames come from the mockup's own `layout()`.
+const stage = { x: 8, y: 111, width: 377, height: 625 };
+const ids = (count: number) => Array.from({ length: count }, (_, index) => String(index));
+const input = (overrides: Partial<StageInput>): StageInput => ({ stage, portrait: true, layout: "spotlight", order: ids(6), spot: "1", pinned: null, content: null, ...overrides });
+const rounded = (item: StageItem) => [item.frame.x, item.frame.y, item.frame.width, item.frame.height].map((value) => Math.round(value * 10) / 10);
+
+describe("stageLayout", () => {
+  it("floats you over the other person when two are in the call (P2)", () => {
+    const [main, you] = stageLayout(input({ order: ids(2) }));
+    expect(main).toMatchObject({ kind: "person", id: "1", frame: stage });
+    expect(you).toMatchObject({ kind: "person", id: "0", float: true });
+    if (you) expect(rounded(you)).toEqual([277, 123, 96, 128]);
+  });
+
+  it("puts the speaker big and everyone else in justified rows below (P3, G1)", () => {
+    const items = stageLayout(input({}));
+    expect(items.map((item) => (item.kind === "person" ? item.id : item.kind))).toEqual(["1", "0", "2", "3", "4", "5"]);
+    expect(items[0]).toMatchObject({ big: true });
+    expect(items.map(rounded)).toEqual([
+      [8, 111, 377, 429],
+      [8, 548, 120.3, 90],
+      [136.3, 548, 120.3, 90],
+      [264.7, 548, 120.3, 90],
+      [8, 646, 184.5, 90],
+      [200.5, 646, 184.5, 90],
+    ]);
+  });
+
+  it("keeps a pinned person big over the speaker", () => {
+    expect(stageLayout(input({ pinned: "4" }))[0]).toMatchObject({ kind: "person", id: "4", big: true });
+  });
+
+  it("fills the stage with 24 tiles in Grid (P4, G2)", () => {
+    const items = stageLayout(input({ layout: "grid", order: ids(24) }));
+    expect(items).toHaveLength(24);
+    expect(items.every((item) => item.kind === "person" && Math.round(item.frame.width * 10) / 10 === 88.3)).toBe(true);
+  });
+
+  it("stands a phone share at full height with people beside it (C2, S4)", () => {
+    const [share, ...rest] = stageLayout(input({ content: { kind: "screen", aspect: 9 / 16 } }));
+    expect(share).toMatchObject({ kind: "content", mini: false });
+    if (share) expect(rounded(share)).toEqual([8, 111, 249, 625]);
+    expect(rest.every((item) => item.frame.x === 265 && item.frame.width === 120)).toBe(true);
+  });
+
+  it("gives a shared board the stage with one row of people and a +N tile (C3)", () => {
+    const items = stageLayout(input({ content: { kind: "board", aspect: null } }));
+    expect(items[0] && rounded(items[0])).toEqual([8, 111, 377, 511]);
+    expect(items.at(-1)).toMatchObject({ kind: "more", count: 3 });
+  });
+
+  it("shows the share as a double tile in Grid", () => {
+    const [share] = stageLayout(input({ layout: "grid", content: { kind: "screen", aspect: 16 / 9 } }));
+    expect(share).toMatchObject({ kind: "content", mini: true });
+  });
+});
+
+describe("nextStageOrder", () => {
+  it("swaps a new speaker with the person in the spotlight, so only those two tiles move", () => {
+    const start = nextStageOrder({ order: [], spot: null }, ["you", "a", "b", "c"], "you", null);
+    expect(start).toEqual({ order: ["you", "a", "b", "c"], spot: "a" });
+    expect(nextStageOrder(start, ["you", "a", "b", "c"], "you", "c")).toEqual({ order: ["you", "c", "b", "a"], spot: "c" });
+  });
+
+  it("ignores your own speech and keeps the same object when nothing changes", () => {
+    const start = nextStageOrder({ order: [], spot: null }, ["you", "a", "b"], "you", null);
+    expect(nextStageOrder(start, ["you", "a", "b"], "you", "you")).toBe(start);
+  });
+
+  it("drops leavers, appends newcomers and moves the spotlight off someone who left", () => {
+    const start = { order: ["you", "a", "b"], spot: "a" };
+    expect(nextStageOrder(start, ["you", "b", "d"], "you", null)).toEqual({ order: ["you", "b", "d"], spot: "b" });
+  });
+});