@rapidmx/meet-plugin 0.15.0 → 0.16.0

package/dist/apps/meet/[token].js

@@ -190,7 +190,7 @@ function MeetJoinContent({ token, branding }) {
         return (_jsx(CallView, { channel: joinResult.meeting.uid, 
             // `token` is present only for the common anonymous case (`authenticated: false`) - when the
             // caller's own existing session already authenticated them (`authenticated: true`), there is no
-            // guest token to apply as a cookie at all, and `GuestSignalingClient` relies entirely on the
+            // guest token to apply as a cookie at all, and `SignalingClient` relies entirely on the
             // browser's own already-existing `jwt` session cookie instead (see its own doc comment and
             // `VideoMeetingJoinResult`'s doc comment in `_meetApi.ts`).
             token: joinResult.token, selfUid: joinResult.selfUid, selfName: name, meetingTitle: joinResult.meeting.title, iceServers: joinResult.iceServers, relayEnabled: joinResult.relayEnabled, hostUid: joinResult.meeting.hostUid, initialForceMuteOnJoin: !!joinResult.meeting.forceMuteOnJoin, initialHasPassword: !!joinResult.meeting.hasPassword, initialWaitingRoomEnabled: !!joinResult.meeting.waitingRoomEnabled, media: media, onLeave: handleLeave }));

package/dist/apps/meet/_CallControls.d.ts

@@ -2,7 +2,7 @@
  * The in-call control bar, fixed to the bottom of the call (`_CallView.tsx` lays it out below the tiles, never over
  * them). Its menus open upward, centered on the whole bar on a phone (where the bar wraps onto two rows and a menu
  * hung from its own button would run off the edge) and from their own button on a wider window: microphone and camera (each a mute/unmute or on/off button next to a menu that picks the device), share
- * screen, reactions, raise hand, grid/focus and leave. The effects button opens the video filter picker
+ * screen, whiteboard, reactions, raise hand, grid/focus and leave. The effects button opens the video filter picker
  * (`_EffectsPanel.tsx`) and lights up while any filter is on.
  *
  * The microphone button shows a live level while it is unmuted - bars that move with the sound the microphone is
@@ -43,9 +43,17 @@ export interface CallControlsProps {
     onToggleHand: () => void;
     onReaction: (emoji: string) => void;
     viewMode: CallViewMode;
-    /** Disabled whenever `participants.length < 2` - grid and focused view render the exact same single tile with
-     * only one other participant (or none), so there is nothing for this to visibly toggle yet. */
+    /** Disabled while alone (`participants.length === 0`) - with nobody else here, grid and focused view both just
+     * show the local tile filling the stage, so there is nothing for this to visibly toggle yet. Enabled from the
+     * very first other participant: focus view corners the local tile and gives the other participant the main
+     * slot, which already looks different from grid view's two equal-sized tiles - see `_CallView.tsx`'s doc
+     * comment on where the local tile appears. */
     onToggleViewMode: () => void;
+    /** Whether this participant has the shared whiteboard open - see `_CallView.tsx`'s doc comment. */
+    whiteboardOpen: boolean;
+    /** Someone drew on the whiteboard while it was closed here - its button shows a dot. */
+    whiteboardActivity?: boolean;
+    onToggleWhiteboard: () => void;
     /** True while talking-stick mode is on and this participant doesn't currently hold it - see `_CallView.tsx`'s
      * doc comment on talking-stick mode. Disables the microphone toggle (not the device-picker chevron, which
      * doesn't change whether anyone can hear them) rather than merely nudging it, unlike a `mute-request`. */
@@ -66,4 +74,4 @@ export interface CallControlsProps {
 export declare function LevelBars({ level }: {
     level: number;
 }): React.JSX.Element;
-export default function CallControls({ media, participants, isPresenting, presentingElsewhereName, onToggleShare, screenTransform, onRotateScreen, onFlipScreen, handRaised, onToggleHand, onReaction, viewMode, onToggleViewMode, micLocked, isHost, transportMode, onSetTransportMode, onOpenDiagnostics, onOpenSettings, selfHidden, onToggleSelfHidden, onLeave, }: CallControlsProps): React.JSX.Element;
+export default function CallControls({ media, participants, isPresenting, presentingElsewhereName, onToggleShare, screenTransform, onRotateScreen, onFlipScreen, handRaised, onToggleHand, onReaction, viewMode, onToggleViewMode, whiteboardOpen, whiteboardActivity, onToggleWhiteboard, micLocked, isHost, transportMode, onSetTransportMode, onOpenDiagnostics, onOpenSettings, selfHidden, onToggleSelfHidden, onLeave, }: CallControlsProps): React.JSX.Element;

package/dist/apps/meet/_CallControls.js

@@ -7,7 +7,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * The in-call control bar, fixed to the bottom of the call (`_CallView.tsx` lays it out below the tiles, never over
  * them). Its menus open upward, centered on the whole bar on a phone (where the bar wraps onto two rows and a menu
  * hung from its own button would run off the edge) and from their own button on a wider window: microphone and camera (each a mute/unmute or on/off button next to a menu that picks the device), share
- * screen, reactions, raise hand, grid/focus and leave. The effects button opens the video filter picker
+ * screen, whiteboard, reactions, raise hand, grid/focus and leave. The effects button opens the video filter picker
  * (`_EffectsPanel.tsx`) and lights up while any filter is on.
  *
  * The microphone button shows a live level while it is unmuted - bars that move with the sound the microphone is
@@ -32,7 +32,7 @@ import { useEffect, useRef, useState } from "react";
 import { filtersActive } from "../shared/media/filters/filterTypes.js";
 import { REACTION_EMOJIS } from "../shared/webrtc/types.js";
 import EffectsPanel from "./_EffectsPanel.js";
-import { ChevronUpIcon, EffectsIcon, EmojiIcon, FlipIcon, FocusIcon, GridIcon, HandIcon, LeaveIcon, MicIcon, MicOffIcon, OverflowIcon, RotateIcon, ScreenShareIcon, VideoIcon, VideoOffIcon, } from "./_icons.js";
+import { ChevronUpIcon, EffectsIcon, EmojiIcon, FlipIcon, FocusIcon, GridIcon, HandIcon, LeaveIcon, MicIcon, MicOffIcon, OverflowIcon, RotateIcon, ScreenShareIcon, VideoIcon, VideoOffIcon, WhiteboardIcon, } from "./_icons.js";
 /** The "…" menu's "Connection method" options, in display order - see `TransportMode`'s own doc comment. */
 const TRANSPORT_MODE_OPTIONS = [
     { mode: "auto", label: "Auto" },
@@ -48,7 +48,7 @@ const ACTIVE = "bg-[#a8c7fa] text-[#062e6f] hover:bg-[#8ab4f8]";
 export function LevelBars({ level }) {
     return (_jsx("span", { className: "flex items-center gap-[2px] h-5", "data-testid": "mic-level", "data-level": level, "aria-hidden": "true", children: [0.6, 1, 0.6].map((weight, i) => (_jsx("span", { className: `w-[3px] rounded-full ${level > 0 ? "bg-[#8ab4f8]" : "bg-white/50"}`, style: { height: `${4 + weight * level * 3}px` } }, i))) }));
 }
-export default function CallControls({ media, participants, isPresenting, presentingElsewhereName, onToggleShare, screenTransform, onRotateScreen, onFlipScreen, handRaised, onToggleHand, onReaction, viewMode, onToggleViewMode, micLocked, isHost, transportMode, onSetTransportMode, onOpenDiagnostics, onOpenSettings, selfHidden, onToggleSelfHidden, onLeave, }) {
+export default function CallControls({ media, participants, isPresenting, presentingElsewhereName, onToggleShare, screenTransform, onRotateScreen, onFlipScreen, handRaised, onToggleHand, onReaction, viewMode, onToggleViewMode, whiteboardOpen, whiteboardActivity, onToggleWhiteboard, micLocked, isHost, transportMode, onSetTransportMode, onOpenDiagnostics, onOpenSettings, selfHidden, onToggleSelfHidden, onLeave, }) {
     const [openMenu, setOpenMenu] = useState(null);
     const barRef = useRef(null);
     const shareDisabled = !isPresenting && !!presentingElsewhereName;
@@ -77,10 +77,10 @@ export default function CallControls({ media, participants, isPresenting, presen
     function toggleMenu(menu) {
         setOpenMenu((prev) => (prev === menu ? null : menu));
     }
-    return (_jsxs("div", { ref: barRef, className: "relative flex flex-wrap items-center justify-center gap-2 px-3", role: "toolbar", "aria-label": "Call controls", children: [_jsxs("div", { className: "sm:relative flex items-stretch gap-px", children: [_jsx("button", { type: "button", className: `${BUTTON} w-9 rounded-r-none ${media.micOn ? NEUTRAL : ALERT}`, "aria-label": "Choose microphone", "aria-haspopup": "menu", "aria-expanded": openMenu === "audio", onClick: () => toggleMenu("audio"), children: _jsx(ChevronUpIcon, {}) }), _jsxs("button", { type: "button", className: `${BUTTON} min-w-14 gap-1.5 px-3 rounded-l-none ${media.micOn ? NEUTRAL : ALERT} disabled:opacity-50 disabled:cursor-not-allowed`, "aria-label": media.micOn ? "Mute microphone" : "Unmute microphone", "aria-pressed": !media.micOn, disabled: micLocked, title: micLocked ? "Only the current talking-stick holder can unmute." : undefined, onClick: () => void media.toggleMic(), children: [media.micOn && _jsx(LevelBars, { level: media.audioLevel }), media.micOn ? _jsx(MicIcon, {}) : _jsx(MicOffIcon, {})] }), openMenu === "audio" && _jsx(DeviceMenu, { kind: "audio", media: media, onClose: () => setOpenMenu(null) })] }), _jsxs("div", { className: "sm:relative flex items-stretch gap-px", children: [_jsx("button", { type: "button", className: `${BUTTON} w-9 rounded-r-none ${media.cameraOn ? NEUTRAL : ALERT}`, "aria-label": "Choose camera", "aria-haspopup": "menu", "aria-expanded": openMenu === "video", onClick: () => toggleMenu("video"), children: _jsx(ChevronUpIcon, {}) }), _jsxs("button", { type: "button", className: `${BUTTON} relative min-w-14 px-3 rounded-l-none ${media.cameraOn ? NEUTRAL : ALERT}`, "aria-label": media.cameraOn ? "Turn off camera" : "Turn on camera", "aria-pressed": !media.cameraOn, onClick: () => void media.toggleCamera(), children: [media.cameraOn ? _jsx(VideoIcon, {}) : _jsx(VideoOffIcon, {}), media.cameraOn && (_jsx("span", { className: "absolute top-2 right-2 w-2 h-2 rounded-full bg-[#34a853] animate-pulse", "data-testid": "camera-live", title: "Your camera is sending" }))] }), openMenu === "video" && _jsx(DeviceMenu, { kind: "video", media: media, onClose: () => setOpenMenu(null) })] }), _jsxs("div", { className: "sm:relative", children: [_jsx("button", { type: "button", className: `${BUTTON} w-12 ${filtersActive(media.filters) ? ACTIVE : NEUTRAL}`, "aria-label": "Video effects", "aria-haspopup": "dialog", "aria-expanded": openMenu === "effects", onClick: () => toggleMenu("effects"), children: _jsx(EffectsIcon, {}) }), openMenu === "effects" && (_jsx("div", { role: "dialog", "aria-label": "Video effects", className: "absolute bottom-full mb-3 left-1/2 -translate-x-1/2 w-96 max-w-[calc(100vw-1rem)] max-h-[60vh] overflow-y-auto p-3 rounded-2xl bg-[#2b2d30] text-white shadow-xl", children: _jsx(EffectsPanel, { media: media, tone: "dark" }) }))] }), _jsx("button", { type: "button", className: `${BUTTON} w-12 ${isPresenting ? ACTIVE : NEUTRAL} disabled:opacity-40 disabled:cursor-not-allowed`, "aria-label": isPresenting ? "Stop sharing" : "Share screen", "aria-pressed": isPresenting, disabled: shareDisabled, title: shareDisabled ? `${presentingElsewhereName} is presenting - stop their share to present yourself.` : undefined, onClick: onToggleShare, children: _jsx(ScreenShareIcon, {}) }), isPresenting && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: `${BUTTON} w-12 ${NEUTRAL}`, "aria-label": "Rotate shared screen", title: "If your shared window looks sideways or upside down to everyone, rotate it here - this is a correction for your own capture, not a browser bug this app can fix automatically.", onClick: onRotateScreen, children: _jsx(RotateIcon, {}) }), _jsx("button", { type: "button", className: `${BUTTON} w-12 ${screenTransform.flipped ? ACTIVE : NEUTRAL}`, "aria-label": screenTransform.flipped ? "Unflip shared screen" : "Flip shared screen", "aria-pressed": screenTransform.flipped, onClick: onFlipScreen, children: _jsx(FlipIcon, {}) })] })), _jsxs("div", { className: "sm:relative", children: [_jsx("button", { type: "button", className: `${BUTTON} w-12 ${NEUTRAL}`, "aria-label": "Send a reaction", "aria-haspopup": "menu", "aria-expanded": openMenu === "emoji", onClick: () => toggleMenu("emoji"), children: _jsx(EmojiIcon, {}) }), openMenu === "emoji" && (_jsx("div", { role: "menu", "aria-label": "Reactions", className: "absolute bottom-full mb-3 left-1/2 -translate-x-1/2 w-max grid grid-cols-4 gap-1 p-2 rounded-2xl bg-[#2b2d30] shadow-xl", children: REACTION_EMOJIS.map((emoji) => (_jsx("button", { type: "button", role: "menuitem", className: "w-11 h-11 rounded-lg text-2xl hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", "aria-label": `Send ${emoji}`, onClick: () => {
+    return (_jsxs("div", { ref: barRef, className: "relative flex flex-wrap items-center justify-center gap-2 px-3", role: "toolbar", "aria-label": "Call controls", children: [_jsxs("div", { className: "sm:relative flex items-stretch gap-px", children: [_jsx("button", { type: "button", className: `${BUTTON} w-9 rounded-r-none ${media.micOn ? NEUTRAL : ALERT}`, "aria-label": "Choose microphone", "aria-haspopup": "menu", "aria-expanded": openMenu === "audio", onClick: () => toggleMenu("audio"), children: _jsx(ChevronUpIcon, {}) }), _jsxs("button", { type: "button", className: `${BUTTON} min-w-14 gap-1.5 px-3 rounded-l-none ${media.micOn ? NEUTRAL : ALERT} disabled:opacity-50 disabled:cursor-not-allowed`, "aria-label": media.micOn ? "Mute microphone" : "Unmute microphone", "aria-pressed": !media.micOn, disabled: micLocked, title: micLocked ? "Only the current talking-stick holder can unmute." : undefined, onClick: () => void media.toggleMic(), children: [media.micOn && _jsx(LevelBars, { level: media.audioLevel }), media.micOn ? _jsx(MicIcon, {}) : _jsx(MicOffIcon, {})] }), openMenu === "audio" && _jsx(DeviceMenu, { kind: "audio", media: media, onClose: () => setOpenMenu(null) })] }), _jsxs("div", { className: "sm:relative flex items-stretch gap-px", children: [_jsx("button", { type: "button", className: `${BUTTON} w-9 rounded-r-none ${media.cameraOn ? NEUTRAL : ALERT}`, "aria-label": "Choose camera", "aria-haspopup": "menu", "aria-expanded": openMenu === "video", onClick: () => toggleMenu("video"), children: _jsx(ChevronUpIcon, {}) }), _jsxs("button", { type: "button", className: `${BUTTON} relative min-w-14 px-3 rounded-l-none ${media.cameraOn ? NEUTRAL : ALERT}`, "aria-label": media.cameraOn ? "Turn off camera" : "Turn on camera", "aria-pressed": !media.cameraOn, onClick: () => void media.toggleCamera(), children: [media.cameraOn ? _jsx(VideoIcon, {}) : _jsx(VideoOffIcon, {}), media.cameraOn && (_jsx("span", { className: "absolute top-2 right-2 w-2 h-2 rounded-full bg-[#34a853] animate-pulse", "data-testid": "camera-live", title: "Your camera is sending" }))] }), openMenu === "video" && _jsx(DeviceMenu, { kind: "video", media: media, onClose: () => setOpenMenu(null) })] }), _jsxs("div", { className: "sm:relative", children: [_jsx("button", { type: "button", className: `${BUTTON} w-12 ${filtersActive(media.filters) ? ACTIVE : NEUTRAL}`, "aria-label": "Video effects", "aria-haspopup": "dialog", "aria-expanded": openMenu === "effects", onClick: () => toggleMenu("effects"), children: _jsx(EffectsIcon, {}) }), openMenu === "effects" && (_jsx("div", { role: "dialog", "aria-label": "Video effects", className: "absolute bottom-full mb-3 left-1/2 -translate-x-1/2 w-96 max-w-[calc(100vw-1rem)] max-h-[60vh] overflow-y-auto p-3 rounded-2xl bg-[#2b2d30] text-white shadow-xl", children: _jsx(EffectsPanel, { media: media, tone: "dark" }) }))] }), _jsx("button", { type: "button", className: `${BUTTON} w-12 ${isPresenting ? ACTIVE : NEUTRAL} disabled:opacity-40 disabled:cursor-not-allowed`, "aria-label": isPresenting ? "Stop sharing" : "Share screen", "aria-pressed": isPresenting, disabled: shareDisabled, title: shareDisabled ? `${presentingElsewhereName} is presenting - stop their share to present yourself.` : undefined, onClick: onToggleShare, children: _jsx(ScreenShareIcon, {}) }), isPresenting && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: `${BUTTON} w-12 ${NEUTRAL}`, "aria-label": "Rotate shared screen", title: "If your shared window looks sideways or upside down to everyone, rotate it here - this is a correction for your own capture, not a browser bug this app can fix automatically.", onClick: onRotateScreen, children: _jsx(RotateIcon, {}) }), _jsx("button", { type: "button", className: `${BUTTON} w-12 ${screenTransform.flipped ? ACTIVE : NEUTRAL}`, "aria-label": screenTransform.flipped ? "Unflip shared screen" : "Flip shared screen", "aria-pressed": screenTransform.flipped, onClick: onFlipScreen, children: _jsx(FlipIcon, {}) })] })), _jsxs("button", { type: "button", className: `${BUTTON} relative w-12 ${whiteboardOpen ? ACTIVE : NEUTRAL}`, "aria-label": whiteboardOpen ? "Close whiteboard" : whiteboardActivity ? "Open whiteboard, new drawing" : "Open whiteboard", "aria-pressed": whiteboardOpen, onClick: onToggleWhiteboard, children: [_jsx(WhiteboardIcon, {}), whiteboardActivity && !whiteboardOpen && (_jsx("span", { className: "absolute top-2 right-2 w-2 h-2 rounded-full bg-[#fbbc04]", "data-testid": "whiteboard-activity" }))] }), _jsxs("div", { className: "sm:relative", children: [_jsx("button", { type: "button", className: `${BUTTON} w-12 ${NEUTRAL}`, "aria-label": "Send a reaction", "aria-haspopup": "menu", "aria-expanded": openMenu === "emoji", onClick: () => toggleMenu("emoji"), children: _jsx(EmojiIcon, {}) }), openMenu === "emoji" && (_jsx("div", { role: "menu", "aria-label": "Reactions", className: "absolute bottom-full mb-3 left-1/2 -translate-x-1/2 w-max grid grid-cols-4 gap-1 p-2 rounded-2xl bg-[#2b2d30] shadow-xl", children: REACTION_EMOJIS.map((emoji) => (_jsx("button", { type: "button", role: "menuitem", className: "w-11 h-11 rounded-lg text-2xl hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", "aria-label": `Send ${emoji}`, onClick: () => {
                                 onReaction(emoji);
                                 setOpenMenu(null);
-                            }, children: emoji }, emoji))) }))] }), _jsx("button", { type: "button", className: `${BUTTON} w-12 ${handRaised ? ACTIVE : NEUTRAL}`, "aria-label": handRaised ? "Lower hand" : "Raise hand", "aria-pressed": handRaised, onClick: onToggleHand, children: _jsx(HandIcon, {}) }), _jsx("button", { type: "button", className: `${BUTTON} w-12 ${NEUTRAL} disabled:opacity-40 disabled:cursor-not-allowed`, "aria-label": viewMode === "grid" ? "Switch to focused view" : "Switch to grid view", disabled: participants.length < 2, title: participants.length < 2 ? "Grid and focused view look the same with only one other participant." : undefined, onClick: onToggleViewMode, children: viewMode === "grid" ? _jsx(FocusIcon, {}) : _jsx(GridIcon, {}) }), _jsxs("div", { className: "sm:relative", children: [_jsx("button", { type: "button", className: `${BUTTON} w-12 ${openMenu === "overflow" ? ACTIVE : NEUTRAL}`, "aria-label": "More options", "aria-haspopup": "menu", "aria-expanded": openMenu === "overflow", onClick: () => toggleMenu("overflow"), children: _jsx(OverflowIcon, {}) }), openMenu === "overflow" && (_jsxs("div", { role: "menu", "aria-label": "More options", className: "absolute bottom-full mb-3 right-0 w-56 max-w-[calc(100vw-1rem)] rounded-2xl bg-[#2b2d30] text-white shadow-xl py-1 text-sm", children: [_jsx("button", { type: "button", role: "menuitem", className: "w-full px-3 py-2 text-left hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", onClick: () => {
+                            }, children: emoji }, emoji))) }))] }), _jsx("button", { type: "button", className: `${BUTTON} w-12 ${handRaised ? ACTIVE : NEUTRAL}`, "aria-label": handRaised ? "Lower hand" : "Raise hand", "aria-pressed": handRaised, onClick: onToggleHand, children: _jsx(HandIcon, {}) }), _jsx("button", { type: "button", className: `${BUTTON} w-12 ${NEUTRAL} disabled:opacity-40 disabled:cursor-not-allowed`, "aria-label": viewMode === "grid" ? "Switch to focused view" : "Switch to grid view", disabled: participants.length === 0, title: participants.length === 0 ? "Grid and focused view look the same while you're alone." : undefined, onClick: onToggleViewMode, children: viewMode === "grid" ? _jsx(FocusIcon, {}) : _jsx(GridIcon, {}) }), _jsxs("div", { className: "sm:relative", children: [_jsx("button", { type: "button", className: `${BUTTON} w-12 ${openMenu === "overflow" ? ACTIVE : NEUTRAL}`, "aria-label": "More options", "aria-haspopup": "menu", "aria-expanded": openMenu === "overflow", onClick: () => toggleMenu("overflow"), children: _jsx(OverflowIcon, {}) }), openMenu === "overflow" && (_jsxs("div", { role: "menu", "aria-label": "More options", className: "absolute bottom-full mb-3 right-0 w-56 max-w-[calc(100vw-1rem)] rounded-2xl bg-[#2b2d30] text-white shadow-xl py-1 text-sm", children: [_jsx("button", { type: "button", role: "menuitem", className: "w-full px-3 py-2 text-left hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", onClick: () => {
                                     onOpenDiagnostics();
                                     setOpenMenu(null);
                                 }, children: "Diagnostics" }), _jsx("button", { type: "button", role: "menuitem", className: "w-full px-3 py-2 text-left hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", onClick: () => {

package/dist/apps/meet/_CallView.d.ts

@@ -1,6 +1,6 @@
 /**
  * The in-call view: connects the full-mesh `MeshConnectionManager` to the meeting's signaling channel
- * (`GuestSignalingClient`), mirrors its events into React state, and renders the grid/focused/presentation
+ * (`SignalingClient`, this plugin's own WebSocket), mirrors its events into React state, and renders the grid/focused/presentation
  * layouts - see `apps/shared/webrtc/MeshConnectionManager.ts`'s doc comment for the who-calls-whom and
  * single-presenter rules this view relies on rather than re-deciding. These reusable, non-UI modules live under
  * `apps/shared/` rather than this plugin's backend `src/` - `tsconfig.apps.json` builds `apps/` as its own
@@ -11,7 +11,10 @@
  *
  * The call fills the viewport (`fixed inset-0`) as three rows - a slim header, the tiles (which take whatever room
  * is left and never scroll the page), and the control bar pinned to the bottom - instead of being laid out inside
- * the branded page shell, whose header, footer and padding pushed it off the screen.
+ * the branded page shell, whose header, footer and padding pushed it off the screen. In plain grid view, each tile
+ * keeps its capture device's aspect ratio (`aspect-video`) instead of being stretched to fill an equal share of the
+ * available height - the grid area itself may scroll (vertically, within that middle row) once enough
+ * aspect-ratio-sized tiles no longer all fit, rather than cropping or distorting any of them to force a fit.
  *
  * ## Where the local tile appears
  *
@@ -61,6 +64,18 @@
  * `MeshConnectionManager`'s own doc comment on why that needs no extra code - the header chip then says nobody has
  * the floor, until the host picks someone (or themselves) again.
  *
+ * ## Chat and whiteboard
+ *
+ * Both run on `CollabSession` (`apps/shared/collab/CollabSession.ts`), over the same signaling channel as the mesh,
+ * and last as long as the call. The chat opens in a drawer (`_ChatPanel.tsx`) from the header's chat button - in
+ * place of the participants drawer, since one side drawer at a time is all a narrow window has room for - which
+ * counts unread messages while it is closed. The whiteboard (`_Whiteboard.tsx`) takes the stage when opened from
+ * the control bar, with everyone's video in a strip below it and the local tile in its corner, like presenting; it
+ * is a per-participant view of one shared board, so opening or closing it changes nobody else's screen. Its button
+ * shows a dot when someone draws while it is closed. Everyone's pointer shows on everyone's board with their name;
+ * while talking-stick mode is on only the holder may draw (`CollabSession.setDrawPolicy()`), the same rule as the
+ * microphone. History a late joiner receives is shown but not counted as unread.
+ *
  * ## Diagnostics, connection method and settings
  *
  * All three are opened from `_CallControls.tsx`'s own "…" menu (its doc comment covers the menu itself) via
@@ -78,8 +93,8 @@ import type { LocalMedia } from "../shared/media/useLocalMedia.js";
 export interface CallViewProps {
     channel: string;
     /** Omitted when the caller already authenticated as a real RapidMX identity in `join()` - there is then no
-     * guest token to hand `GuestSignalingClient`, which relies entirely on the browser's own already-existing
-     * `jwt` session cookie instead (see its own doc comment). */
+     * guest token to hand `SignalingClient`, which relies entirely on the browser's own already-existing `jwt`
+     * session cookie instead (see its own doc comment). */
     token?: string;
     selfUid: string;
     selfName: string;

package/dist/apps/meet/_CallView.js

@@ -5,7 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 ///////////////////////////////////////////////////////////////////////////////
 /**
  * The in-call view: connects the full-mesh `MeshConnectionManager` to the meeting's signaling channel
- * (`GuestSignalingClient`), mirrors its events into React state, and renders the grid/focused/presentation
+ * (`SignalingClient`, this plugin's own WebSocket), mirrors its events into React state, and renders the grid/focused/presentation
  * layouts - see `apps/shared/webrtc/MeshConnectionManager.ts`'s doc comment for the who-calls-whom and
  * single-presenter rules this view relies on rather than re-deciding. These reusable, non-UI modules live under
  * `apps/shared/` rather than this plugin's backend `src/` - `tsconfig.apps.json` builds `apps/` as its own
@@ -16,7 +16,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * The call fills the viewport (`fixed inset-0`) as three rows - a slim header, the tiles (which take whatever room
  * is left and never scroll the page), and the control bar pinned to the bottom - instead of being laid out inside
- * the branded page shell, whose header, footer and padding pushed it off the screen.
+ * the branded page shell, whose header, footer and padding pushed it off the screen. In plain grid view, each tile
+ * keeps its capture device's aspect ratio (`aspect-video`) instead of being stretched to fill an equal share of the
+ * available height - the grid area itself may scroll (vertically, within that middle row) once enough
+ * aspect-ratio-sized tiles no longer all fit, rather than cropping or distorting any of them to force a fit.
  *
  * ## Where the local tile appears
  *
@@ -66,6 +69,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * `MeshConnectionManager`'s own doc comment on why that needs no extra code - the header chip then says nobody has
  * the floor, until the host picks someone (or themselves) again.
  *
+ * ## Chat and whiteboard
+ *
+ * Both run on `CollabSession` (`apps/shared/collab/CollabSession.ts`), over the same signaling channel as the mesh,
+ * and last as long as the call. The chat opens in a drawer (`_ChatPanel.tsx`) from the header's chat button - in
+ * place of the participants drawer, since one side drawer at a time is all a narrow window has room for - which
+ * counts unread messages while it is closed. The whiteboard (`_Whiteboard.tsx`) takes the stage when opened from
+ * the control bar, with everyone's video in a strip below it and the local tile in its corner, like presenting; it
+ * is a per-participant view of one shared board, so opening or closing it changes nobody else's screen. Its button
+ * shows a dot when someone draws while it is closed. Everyone's pointer shows on everyone's board with their name;
+ * while talking-stick mode is on only the holder may draw (`CollabSession.setDrawPolicy()`), the same rule as the
+ * microphone. History a late joiner receives is shown but not counted as unread.
+ *
  * ## Diagnostics, connection method and settings
  *
  * All three are opened from `_CallControls.tsx`'s own "…" menu (its doc comment covers the menu itself) via
@@ -87,15 +102,18 @@ import { NO_SCREEN_TRANSFORM, ScreenTransformProcessor, rotateClockwise } from "
 import { createBrowserPeerConnection } from "../shared/webrtc/realPeerConnection.js";
 import { MeshConnectionManager } from "../shared/webrtc/MeshConnectionManager.js";
 import { createRelayTransport } from "../shared/relay/RelayTransport.js";
-import { GuestSignalingClient } from "../shared/push/GuestSignalingClient.js";
+import { SIGNALING_EVICTED_REASON, SignalingClient } from "../shared/signaling/SignalingClient.js";
+import { CollabSession } from "../shared/collab/CollabSession.js";
 import CallControls from "./_CallControls.js";
-import { BatonIcon } from "./_icons.js";
+import ChatPanel from "./_ChatPanel.js";
+import { BatonIcon, ChatIcon } from "./_icons.js";
 import { admitParticipant, denyParticipant, kickParticipant, listWaitingParticipants, setForceMuteOnJoin as apiSetForceMuteOnJoin, setMeetingPassword, setWaitingRoomEnabled as apiSetWaitingRoomEnabled, } from "./_meetApi.js";
 import DiagnosticsPanel from "./_DiagnosticsPanel.js";
 import DiagnosticsWindow from "./_DiagnosticsWindow.js";
 import ParticipantTile from "./_ParticipantTile.js";
 import ParticipantsDrawer from "./_ParticipantsDrawer.js";
 import SettingsModal from "./_SettingsModal.js";
+import Whiteboard from "./_Whiteboard.js";
 /** How long a reaction floats on screen. */
 const REACTION_MS = 4000;
 /** The most reactions shown at once - a burst beyond this drops the oldest. */
@@ -160,7 +178,22 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
     const [settingsOpen, setSettingsOpen] = useState(false);
     const [transportMode, setTransportModeState] = useState("auto");
     const [selfHidden, setSelfHidden] = useState(false);
+    const [chatOpen, setChatOpen] = useState(false);
+    const [chatEntries, setChatEntries] = useState([]);
+    const [unreadChat, setUnreadChat] = useState(0);
+    const [whiteboardOpen, setWhiteboardOpen] = useState(false);
+    const [boardRevision, setBoardRevision] = useState(0);
+    const [whiteboardActivity, setWhiteboardActivity] = useState(false);
+    const [boardCursors, setBoardCursors] = useState([]);
     const managerRef = useRef(null);
+    const collabRef = useRef(null);
+    /** Whether the chat drawer / whiteboard is open, for the collab-event handler - set up once, like the mesh's. */
+    const chatOpenRef = useRef(chatOpen);
+    const whiteboardOpenRef = useRef(whiteboardOpen);
+    useEffect(() => {
+        chatOpenRef.current = chatOpen;
+        whiteboardOpenRef.current = whiteboardOpen;
+    }, [chatOpen, whiteboardOpen]);
     /** The raw capture from `getDisplayMedia()` - only ever used to stop it (releasing the OS's own share
      * indicator) and to notice the participant ending the share from the browser's own UI (`track.onended`). What's
      * actually shown and sent is `screenTransformRef`'s output (`screenStream` state) - see `handleToggleShare()`. */
@@ -187,7 +220,14 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
     }, []);
     useEffect(() => {
         let cancelled = false;
-        const client = new GuestSignalingClient({ channel, token });
+        const client = new SignalingClient({
+            meetingUid: channel,
+            peerId,
+            token,
+            // The server closed the socket for good: being removed reads as the host's doing (the cooperative `kicked`
+            // usually got here first), anything else - the meeting ended, the grant is gone - as a connection error.
+            onClosed: (reason) => (reason === SIGNALING_EVICTED_REASON ? onLeave("The host removed you from this call.") : setConnectError(reason)),
+        });
         const manager = new MeshConnectionManager({
             selfUid,
             peerId,
@@ -201,6 +241,27 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
             localState: { audioOn: media.micOn, videoOn: media.cameraOn },
         });
         managerRef.current = manager;
+        const collab = new CollabSession({ channel: client, selfUid, peerId, selfName });
+        collabRef.current = collab;
+        const unsubscribeCollab = collab.onEvent((event) => {
+            if (event.type === "board") {
+                setBoardRevision(collab.board.revision);
+                if (!whiteboardOpenRef.current) {
+                    setWhiteboardActivity(true);
+                }
+                return;
+            }
+            if (event.type === "cursors") {
+                setBoardCursors(collab.cursors);
+                return;
+            }
+            setChatEntries(collab.chat);
+            // What was said before this participant arrived (a catch-up), or a message only renamed, is not news to them.
+            if (!event.entry.self && !event.history && !event.renamed && !chatOpenRef.current) {
+                setUnreadChat((prev) => prev + 1);
+                setAnnouncement(`${event.entry.name}: ${event.entry.text.slice(0, 140)}`);
+            }
+        });
         const unsubscribe = manager.onEvent((event) => {
             switch (event.type) {
                 case "participant-joined":
@@ -259,6 +320,8 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
             .connect()
             .then(() => {
             if (!cancelled) {
+                // Listening before the mesh says hello, so no answering hello is missed - see `CollabSession`.
+                collab.start();
                 manager.start();
                 setSignalingReady(true);
             }
@@ -277,6 +340,8 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
             cancelled = true;
             window.removeEventListener("pagehide", onPageHide);
             unsubscribe();
+            unsubscribeCollab();
+            collab.stop();
             manager.stop();
             client.close();
             for (const handle of Object.values(levelMetersRef.current)) {
@@ -324,6 +389,10 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
             void mediaRef.current.toggleMic();
         }
     }, [talkingStickActive, selfHasTalkingStick]);
+    // Talking stick also decides who may draw on the whiteboard: only the holder, while it is on - see `CollabSession`.
+    useEffect(() => {
+        collabRef.current?.setDrawPolicy(talkingStickActive ? (peer) => peer === talkingStickHolder : undefined);
+    }, [talkingStickActive, talkingStickHolder]);
     useEffect(() => {
         if (!presenterUid) {
             setActiveSpeakerUid((prev) => pickActiveSpeaker(levels, prev));
@@ -404,6 +473,19 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
             showReaction(emoji, "You");
         }
     }
+    function handleToggleChat() {
+        setChatOpen((prev) => !prev);
+        setDrawerOpen(false);
+        setUnreadChat(0);
+    }
+    function handleToggleParticipants() {
+        setDrawerOpen((prev) => !prev);
+        setChatOpen(false);
+    }
+    function handleToggleWhiteboard() {
+        setWhiteboardOpen((prev) => !prev);
+        setWhiteboardActivity(false);
+    }
     function togglePin(uid) {
         setPinnedUid((prev) => (prev === uid ? undefined : uid));
     }
@@ -515,7 +597,7 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
     const otherUids = participants.map((p) => p.uid);
     // A pin or an active-speaker pick can name someone who has just left, until the state catches up.
     const stillHere = (uid) => (uid && otherUids.includes(uid) ? uid : undefined);
-    const showFocusLayout = !!presenterUid || viewMode === "focus";
+    const showFocusLayout = !!presenterUid || viewMode === "focus" || whiteboardOpen;
     const mainUid = showFocusLayout
         ? computeMainUid({ presenterUid, pinnedUid: stillHere(pinnedUid), activeSpeakerUid: stillHere(activeSpeakerUid), otherUids })
         : undefined;
@@ -541,7 +623,11 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
     const mainParticipant = participants.find((p) => p.uid === mainUid);
     const thumbnails = participants.filter((p) => p.uid !== mainUid);
     let stage;
-    if (alone) {
+    if (whiteboardOpen && collabRef.current) {
+        // The board takes the main slot, everyone else's video the strip below it - see this module's doc comment.
+        stage = (_jsxs("div", { className: "h-full flex flex-col gap-2", children: [_jsx("div", { className: "flex-1 min-h-0", children: _jsx(Whiteboard, { session: collabRef.current, revision: boardRevision, cursors: boardCursors, canDraw: !talkingStickActive || selfHasTalkingStick, drawLockedTo: talkingStickHolderName, onClose: handleToggleWhiteboard }) }), participants.length > 0 && (_jsx("div", { className: "flex gap-2 overflow-x-auto h-24 shrink-0", "data-testid": "thumbnails", children: participants.map((p) => (_jsx("div", { className: "w-36 shrink-0", children: remoteTile(p, "h-full") }, p.uid))) }))] }));
+    }
+    else if (alone) {
         // Nobody else yet: the local participant fills the tile area, presenting or not - and is never hideable,
         // since there'd be nothing left to look at (see this module's doc comment on hiding the local tile).
         stage = isPresenting ? (_jsx(ParticipantTile, { name: selfName, stream: screenStream, isLocal: true, contain: true, isFocused: true, className: "h-full" })) : (selfTile("h-full"));
@@ -551,13 +637,16 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
     }
     else {
         // Plain grid, nobody presenting: the local tile joins the grid as an ordinary tile (unless hidden) instead
-        // of floating in a corner - see this module's doc comment.
-        stage = (_jsxs("div", { className: "h-full grid gap-2 auto-rows-fr [grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))]", children: [!selfHidden && selfTile("h-full", true), participants.map((p) => remoteTile(p, "h-full"))] }));
+        // of floating in a corner - see this module's doc comment. Each tile keeps a video aspect ratio
+        // (`aspect-video`) rather than being stretched to fill whatever height an equal-row grid would otherwise
+        // force on it, so rows size to their own content (`content-start`, with a scrollbar if that overflows)
+        // instead of a fixed `auto-rows-fr` share of the stage.
+        stage = (_jsxs("div", { className: "h-full content-start overflow-y-auto grid gap-2 [grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))]", children: [!selfHidden && selfTile("aspect-video", true), participants.map((p) => remoteTile(p, "aspect-video"))] }));
     }
-    return (_jsxs("div", { className: "fixed inset-0 z-50 flex bg-[#202124] text-white overflow-hidden", children: [_jsx("style", { children: `@keyframes meet-float { 0% { transform: translateY(0) scale(.6); opacity: 0; } 12% { opacity: 1; transform: translateY(-4vh) scale(1); } 100% { transform: translateY(-45vh) scale(1); opacity: 0; } }` }), _jsxs("div", { className: "relative flex-1 min-w-0 flex flex-col overflow-hidden", children: [_jsxs("header", { className: "shrink-0 flex items-center justify-between gap-3 px-4 py-3", children: [_jsx("h1", { className: "min-w-0 truncate text-base font-medium", children: meetingTitle }), _jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [raisedNames.length > 0 && (_jsxs("span", { className: "max-w-[45vw] truncate px-3 py-1.5 rounded-full bg-[#a8c7fa] text-[#062e6f] text-sm font-medium", "data-testid": "raised-hands", children: ["\u270B ", raisedNames.join(", ")] })), talkingStickActive && (_jsxs("span", { className: "max-w-[45vw] truncate px-3 py-1.5 rounded-full bg-[#a8c7fa] text-[#062e6f] text-sm font-medium", "data-testid": "talking-stick-status", children: ["\uD83C\uDF99\uFE0F ", talkingStickHolderName ? `${talkingStickHolderName} ${talkingStickHolderName === "You" ? "have" : "has"} the floor` : "Waiting for the host to choose a speaker"] })), isHost && (_jsx("button", { type: "button", className: `w-9 h-9 flex items-center justify-center rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 ${talkingStickActive ? "bg-[#a8c7fa] text-[#062e6f] hover:bg-[#8ab4f8]" : "bg-[#3c4043] hover:bg-[#4b4f53]"}`, "aria-label": talkingStickActive ? "End talking stick" : "Talking stick", "aria-pressed": talkingStickActive, title: talkingStickActive ? "End talking stick" : "Start talking stick mode", onClick: handleToggleTalkingStick, children: _jsx(BatonIcon, {}) })), _jsx("button", { type: "button", className: "px-3 py-1.5 rounded-full bg-[#3c4043] hover:bg-[#4b4f53] text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", "aria-label": `${participants.length + 1} participants`, "aria-haspopup": "dialog", "aria-expanded": drawerOpen, onClick: () => setDrawerOpen((prev) => !prev), children: participants.length + 1 })] })] }), connectError && (_jsx("div", { role: "alert", className: "shrink-0 mx-3 mb-2 px-3 py-2 rounded-lg bg-[#601410] text-[#f9dedc] text-sm", children: connectError })), audioBlocked && (_jsx("button", { type: "button", className: "shrink-0 mx-3 mb-2 px-3 py-2 rounded-lg bg-[#a8c7fa] text-[#062e6f] text-sm font-medium", onClick: handleResumeAudio, children: "Click here to turn on sound" })), _jsxs("main", { className: "relative flex-1 min-h-0 px-3 pb-3", children: [stage, presenterName && presenterUid !== peerId && (_jsxs("p", { className: "absolute top-2 left-5 px-2 py-0.5 rounded bg-black/60 text-sm", children: [presenterName, " is presenting"] }))] }), _jsx("footer", { className: "shrink-0 pt-1 pb-[max(0.75rem,env(safe-area-inset-bottom))]", children: _jsx(CallControls, { media: media, participants: participants, isPresenting: isPresenting, presentingElsewhereName: presenterUid && presenterUid !== peerId ? presenterName : undefined, onToggleShare: () => void handleToggleShare(), screenTransform: screenTransform, onRotateScreen: handleRotateScreen, onFlipScreen: handleFlipScreen, handRaised: handRaised, onToggleHand: handleToggleHand, onReaction: handleReaction, viewMode: viewMode, onToggleViewMode: () => setViewMode((prev) => (prev === "grid" ? "focus" : "grid")), micLocked: micLocked, selfHidden: selfHidden, onToggleSelfHidden: handleToggleSelfHidden, isHost: isHost, transportMode: transportMode, onSetTransportMode: handleSetTransportMode, onOpenDiagnostics: () => setDiagnosticsOpen(true), onOpenSettings: () => setSettingsOpen(true), onLeave: onLeave }) }), !alone && !selfHidden && showFocusLayout && (_jsx("div", { className: "absolute z-10 right-3 top-14 w-28 sm:top-auto sm:bottom-24 sm:w-52 aspect-video shadow-xl xl:right-4 xl:bottom-4", "data-testid": "self-view", children: selfTile("h-full", true) })), _jsx("div", { className: "pointer-events-none absolute left-4 bottom-28 w-40 h-[45vh]", "aria-hidden": "true", children: reactions.map((reaction) => (_jsxs("div", { className: "absolute bottom-0 flex flex-col items-center", style: { left: `${(reaction.id % 4) * 36}px`, animation: `meet-float ${REACTION_MS}ms ease-out forwards` }, "data-testid": "reaction", children: [_jsx("span", { className: "text-4xl leading-none", children: reaction.emoji }), _jsx("span", { className: "mt-1 px-1.5 rounded-full bg-[#a8c7fa] text-[#062e6f] text-xs", children: reaction.name })] }, reaction.id))) }), participants.map((p) => {
+    return (_jsxs("div", { className: "fixed inset-0 z-50 flex bg-[#202124] text-white overflow-hidden", children: [_jsx("style", { children: `@keyframes meet-float { 0% { transform: translateY(0) scale(.6); opacity: 0; } 12% { opacity: 1; transform: translateY(-4vh) scale(1); } 100% { transform: translateY(-45vh) scale(1); opacity: 0; } }` }), _jsxs("div", { className: "relative flex-1 min-w-0 flex flex-col overflow-hidden", children: [_jsxs("header", { className: "shrink-0 flex items-center justify-between gap-3 px-4 py-3", children: [_jsx("h1", { className: "min-w-0 truncate text-base font-medium", children: meetingTitle }), _jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [raisedNames.length > 0 && (_jsxs("span", { className: "max-w-[45vw] truncate px-3 py-1.5 rounded-full bg-[#a8c7fa] text-[#062e6f] text-sm font-medium", "data-testid": "raised-hands", children: ["\u270B ", raisedNames.join(", ")] })), talkingStickActive && (_jsxs("span", { className: "max-w-[45vw] truncate px-3 py-1.5 rounded-full bg-[#a8c7fa] text-[#062e6f] text-sm font-medium", "data-testid": "talking-stick-status", children: ["\uD83C\uDF99\uFE0F ", talkingStickHolderName ? `${talkingStickHolderName} ${talkingStickHolderName === "You" ? "have" : "has"} the floor` : "Waiting for the host to choose a speaker"] })), isHost && (_jsx("button", { type: "button", className: `w-9 h-9 flex items-center justify-center rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 ${talkingStickActive ? "bg-[#a8c7fa] text-[#062e6f] hover:bg-[#8ab4f8]" : "bg-[#3c4043] hover:bg-[#4b4f53]"}`, "aria-label": talkingStickActive ? "End talking stick" : "Talking stick", "aria-pressed": talkingStickActive, title: talkingStickActive ? "End talking stick" : "Start talking stick mode", onClick: handleToggleTalkingStick, children: _jsx(BatonIcon, {}) })), _jsxs("button", { type: "button", className: `relative w-9 h-9 flex items-center justify-center rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 ${chatOpen ? "bg-[#a8c7fa] text-[#062e6f] hover:bg-[#8ab4f8]" : "bg-[#3c4043] hover:bg-[#4b4f53]"}`, "aria-label": unreadChat > 0 ? `Chat, ${unreadChat} unread` : "Chat", "aria-haspopup": "dialog", "aria-expanded": chatOpen, onClick: handleToggleChat, children: [_jsx(ChatIcon, {}), unreadChat > 0 && (_jsx("span", { className: "absolute -top-1 -right-1 min-w-5 h-5 px-1 flex items-center justify-center rounded-full bg-[#d93025] text-white text-[11px] font-semibold", "data-testid": "chat-unread", children: unreadChat > 99 ? "99+" : unreadChat }))] }), _jsx("button", { type: "button", className: "px-3 py-1.5 rounded-full bg-[#3c4043] hover:bg-[#4b4f53] text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", "aria-label": `${participants.length + 1} participants`, "aria-haspopup": "dialog", "aria-expanded": drawerOpen, onClick: handleToggleParticipants, children: participants.length + 1 })] })] }), connectError && (_jsx("div", { role: "alert", className: "shrink-0 mx-3 mb-2 px-3 py-2 rounded-lg bg-[#601410] text-[#f9dedc] text-sm", children: connectError })), audioBlocked && (_jsx("button", { type: "button", className: "shrink-0 mx-3 mb-2 px-3 py-2 rounded-lg bg-[#a8c7fa] text-[#062e6f] text-sm font-medium", onClick: handleResumeAudio, children: "Click here to turn on sound" })), _jsxs("main", { className: "relative flex-1 min-h-0 px-3 pb-3", children: [stage, presenterName && presenterUid !== peerId && (_jsxs("p", { className: "absolute top-2 left-5 px-2 py-0.5 rounded bg-black/60 text-sm", children: [presenterName, " is presenting"] }))] }), _jsx("footer", { className: "shrink-0 pt-1 pb-[max(0.75rem,env(safe-area-inset-bottom))]", children: _jsx(CallControls, { media: media, participants: participants, isPresenting: isPresenting, presentingElsewhereName: presenterUid && presenterUid !== peerId ? presenterName : undefined, onToggleShare: () => void handleToggleShare(), screenTransform: screenTransform, onRotateScreen: handleRotateScreen, onFlipScreen: handleFlipScreen, handRaised: handRaised, onToggleHand: handleToggleHand, onReaction: handleReaction, viewMode: viewMode, onToggleViewMode: () => setViewMode((prev) => (prev === "grid" ? "focus" : "grid")), whiteboardOpen: whiteboardOpen, whiteboardActivity: whiteboardActivity, onToggleWhiteboard: handleToggleWhiteboard, micLocked: micLocked, selfHidden: selfHidden, onToggleSelfHidden: handleToggleSelfHidden, isHost: isHost, transportMode: transportMode, onSetTransportMode: handleSetTransportMode, onOpenDiagnostics: () => setDiagnosticsOpen(true), onOpenSettings: () => setSettingsOpen(true), onLeave: onLeave }) }), !alone && !selfHidden && showFocusLayout && (_jsx("div", { className: "absolute z-10 right-3 top-14 w-28 sm:top-auto sm:bottom-24 sm:w-52 aspect-video shadow-xl xl:right-4 xl:bottom-4", "data-testid": "self-view", children: selfTile("h-full", true) })), _jsx("div", { className: "pointer-events-none absolute left-4 bottom-28 w-40 h-[45vh]", "aria-hidden": "true", children: reactions.map((reaction) => (_jsxs("div", { className: "absolute bottom-0 flex flex-col items-center", style: { left: `${(reaction.id % 4) * 36}px`, animation: `meet-float ${REACTION_MS}ms ease-out forwards` }, "data-testid": "reaction", children: [_jsx("span", { className: "text-4xl leading-none", children: reaction.emoji }), _jsx("span", { className: "mt-1 px-1.5 rounded-full bg-[#a8c7fa] text-[#062e6f] text-xs", children: reaction.name })] }, reaction.id))) }), participants.map((p) => {
                         const stream = remoteStreams[p.uid];
                         return stream ? _jsx(RemoteAudio, { stream: stream, onBlocked: handleAudioBlocked }, `${p.uid}:${audioNonce}`) : null;
-                    }), _jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", children: announcement })] }), drawerOpen && (_jsx(ParticipantsDrawer, { selfName: selfName, micOn: media.micOn, handRaised: handRaised, participants: participants, isSelfHost: isHost, isParticipantHost: isParticipantHost, onMute: handleMuteParticipant, onKick: handleKickParticipant, waitingRoomEnabled: waitingRoomEnabled, waitingParticipants: waitingParticipants, onAdmit: handleAdmitParticipant, onDeny: handleDenyParticipant, talkingStickActive: talkingStickActive, selfPeerId: peerId, talkingStickHolder: talkingStickHolder, onGiveTalkingStick: handleGiveTalkingStick, onClose: () => setDrawerOpen(false) })), diagnosticsOpen && (_jsx(DiagnosticsWindow, { onClose: () => setDiagnosticsOpen(false), children: _jsx(DiagnosticsPanel, { selfName: selfName, micOn: media.micOn, cameraOn: media.cameraOn, participants: participants }) })), settingsOpen && isHost && (_jsx(SettingsModal, { forceMuteOnJoin: forceMuteOnJoin, onToggleForceMuteOnJoin: handleToggleForceMuteOnJoin, hasPassword: hasPassword, onSetPassword: handleSetPassword, waitingRoomEnabled: waitingRoomEnabled, onToggleWaitingRoomEnabled: handleToggleWaitingRoomEnabled, onClose: () => setSettingsOpen(false) }))] }));
+                    }), _jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", children: announcement })] }), drawerOpen && (_jsx(ParticipantsDrawer, { selfName: selfName, micOn: media.micOn, handRaised: handRaised, participants: participants, isSelfHost: isHost, isParticipantHost: isParticipantHost, onMute: handleMuteParticipant, onKick: handleKickParticipant, waitingRoomEnabled: waitingRoomEnabled, waitingParticipants: waitingParticipants, onAdmit: handleAdmitParticipant, onDeny: handleDenyParticipant, talkingStickActive: talkingStickActive, selfPeerId: peerId, talkingStickHolder: talkingStickHolder, onGiveTalkingStick: handleGiveTalkingStick, onClose: () => setDrawerOpen(false) })), chatOpen && collabRef.current && (_jsx(ChatPanel, { entries: chatEntries, onSend: (text) => collabRef.current.sendChat(text), onClose: handleToggleChat })), diagnosticsOpen && (_jsx(DiagnosticsWindow, { onClose: () => setDiagnosticsOpen(false), children: _jsx(DiagnosticsPanel, { selfName: selfName, micOn: media.micOn, cameraOn: media.cameraOn, participants: participants }) })), settingsOpen && isHost && (_jsx(SettingsModal, { forceMuteOnJoin: forceMuteOnJoin, onToggleForceMuteOnJoin: handleToggleForceMuteOnJoin, hasPassword: hasPassword, onSetPassword: handleSetPassword, waitingRoomEnabled: waitingRoomEnabled, onToggleWaitingRoomEnabled: handleToggleWaitingRoomEnabled, onClose: () => setSettingsOpen(false) }))] }));
 }
 /** Plays one remote participant's stream through a hidden `<audio>` element. `onBlocked` fires if the browser
  * refuses to start it (an autoplay policy) - the view then asks for a click. */

package/dist/apps/meet/_ChatPanel.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The in-call chat drawer, beside the call like the participants drawer (`_ParticipantsDrawer.tsx`) - `_CallView.tsx`
+ * shows one or the other. The messages come from `CollabSession` (`apps/shared/collab/CollabSession.ts`) and are
+ * rendered as Markdown by `ChatMarkdown` (bare links become links, image links become images).
+ *
+ * The composer is a textarea: Enter sends, Shift+Enter starts a new line. Its emoji button opens the web client's own
+ * emoji picker and inserts at the cursor; its GIF button opens the web client's own Giphy picker, and picking a GIF
+ * sends it at once as a message holding just its address - which every participant's chat then shows as the GIF
+ * itself. Both pickers are the very components the mail composer uses (`@rapidmx/web-client`'s `EmojiPicker` and
+ * `GifPicker`); GIF search goes through the server's own Giphy proxy, which a guest's token authenticates like a
+ * signed-in user's session.
+ *
+ * The list follows new messages only while it is already scrolled to the bottom, so reading back through the history
+ * isn't interrupted by someone else's message.
+ */
+import React from "react";
+import type { ChatEntry } from "../shared/collab/CollabSession.js";
+export interface ChatPanelProps {
+    entries: readonly ChatEntry[];
+    /** Sends a message; `false` when it could not be sent (blank or too long). */
+    onSend: (text: string) => boolean;
+    onClose: () => void;
+}
+export default function ChatPanel({ entries, onSend, onClose }: ChatPanelProps): React.JSX.Element;

package/dist/apps/meet/_ChatPanel.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz. All rights reserved.
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * The in-call chat drawer, beside the call like the participants drawer (`_ParticipantsDrawer.tsx`) - `_CallView.tsx`
+ * shows one or the other. The messages come from `CollabSession` (`apps/shared/collab/CollabSession.ts`) and are
+ * rendered as Markdown by `ChatMarkdown` (bare links become links, image links become images).
+ *
+ * The composer is a textarea: Enter sends, Shift+Enter starts a new line. Its emoji button opens the web client's own
+ * emoji picker and inserts at the cursor; its GIF button opens the web client's own Giphy picker, and picking a GIF
+ * sends it at once as a message holding just its address - which every participant's chat then shows as the GIF
+ * itself. Both pickers are the very components the mail composer uses (`@rapidmx/web-client`'s `EmojiPicker` and
+ * `GifPicker`); GIF search goes through the server's own Giphy proxy, which a guest's token authenticates like a
+ * signed-in user's session.
+ *
+ * The list follows new messages only while it is already scrolled to the bottom, so reading back through the history
+ * isn't interrupted by someone else's message.
+ */
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import EmojiPicker from "@rapidmx/web-client/shared/components/mail/compose/EmojiPicker.js";
+import GifPicker from "@rapidmx/web-client/shared/components/mail/compose/GifPicker.js";
+import ChatMarkdown from "../shared/collab/chatMarkdown.js";
+import { MAX_CHAT_LENGTH } from "../shared/collab/protocol.js";
+import { EmojiIcon, GifIcon, SendIcon } from "./_icons.js";
+/** How close to the bottom (px) still counts as "at the bottom" for following new messages. */
+const STICK_THRESHOLD_PX = 48;
+/** Within this many characters of `MAX_CHAT_LENGTH`, the composer shows how many are left. */
+const COUNTER_THRESHOLD = 200;
+/** Two messages from the same person this close together (ms) share one name heading. */
+const GROUP_WINDOW_MS = 2 * 60000;
+const ICON_BUTTON = "w-9 h-9 shrink-0 flex items-center justify-center rounded-full hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 disabled:opacity-40 disabled:cursor-not-allowed";
+function formatTime(ms) {
+    return new Date(ms).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+}
+export default function ChatPanel({ entries, onSend, onClose }) {
+    const [draft, setDraft] = useState("");
+    const [picker, setPicker] = useState(null);
+    const panelRef = useRef(null);
+    const listRef = useRef(null);
+    const inputRef = useRef(null);
+    const emojiButtonRef = useRef(null);
+    const gifButtonRef = useRef(null);
+    const stickRef = useRef(true);
+    useEffect(() => {
+        inputRef.current?.focus();
+    }, []);
+    useEffect(() => {
+        // Only an Escape meant for the chat - with focus in it - closes it, not one closing a menu elsewhere.
+        const onKeyDown = (event) => {
+            if (event.key === "Escape" && !picker && panelRef.current?.contains(document.activeElement)) {
+                onClose();
+            }
+        };
+        document.addEventListener("keydown", onKeyDown);
+        return () => document.removeEventListener("keydown", onKeyDown);
+    }, [onClose, picker]);
+    useLayoutEffect(() => {
+        const list = listRef.current;
+        if (list && stickRef.current) {
+            list.scrollTop = list.scrollHeight;
+        }
+    }, [entries]);
+    function handleScroll() {
+        const list = listRef.current;
+        stickRef.current = list.scrollHeight - list.scrollTop - list.clientHeight <= STICK_THRESHOLD_PX;
+    }
+    function send(text) {
+        if (onSend(text)) {
+            stickRef.current = true;
+            return true;
+        }
+        return false;
+    }
+    function handleSubmit(event) {
+        event?.preventDefault();
+        if (send(draft)) {
+            setDraft("");
+        }
+    }
+    function handleKeyDown(event) {
+        if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+            event.preventDefault();
+            handleSubmit();
+        }
+    }
+    function insertEmoji(native) {
+        const input = inputRef.current;
+        const start = input.selectionStart ?? draft.length;
+        const end = input.selectionEnd ?? draft.length;
+        setPicker(null);
+        const next = draft.slice(0, start) + native + draft.slice(end);
+        // Past the limit the emoji is left out whole, never cut in half.
+        if (next.length > MAX_CHAT_LENGTH) {
+            input.focus();
+            return;
+        }
+        setDraft(next);
+        requestAnimationFrame(() => {
+            input.focus();
+            input.setSelectionRange(start + native.length, start + native.length);
+        });
+    }
+    function sendGif(url) {
+        setPicker(null);
+        send(url);
+        inputRef.current?.focus();
+    }
+    const remaining = MAX_CHAT_LENGTH - draft.length;
+    return (_jsxs("aside", { ref: panelRef, role: "dialog", "aria-label": "Chat", className: "relative z-10 shrink-0 w-80 max-w-[85vw] h-full flex flex-col bg-[#2b2d30] text-white shadow-xl border-l border-white/10", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-3 border-b border-white/10", children: [_jsx("h2", { className: "text-sm font-medium", children: "Chat" }), _jsx("button", { type: "button", className: ICON_BUTTON, "aria-label": "Close chat", onClick: onClose, children: "\u2715" })] }), _jsxs("div", { ref: listRef, onScroll: handleScroll, className: "flex-1 min-h-0 overflow-y-auto px-3 py-2", role: "log", "aria-label": "Messages", "aria-live": "polite", children: [entries.length === 0 && _jsx("p", { className: "mt-6 text-center text-sm text-white/60", children: "Messages are visible to everyone in the call and disappear when it ends." }), entries.map((entry, index) => {
+                        const previous = entries[index - 1];
+                        const grouped = !!previous && previous.peer === entry.peer && entry.sentAt - previous.sentAt < GROUP_WINDOW_MS && entry.sentAt >= previous.sentAt;
+                        return (_jsxs("div", { className: grouped ? "mt-1" : "mt-3", "data-testid": "chat-message", children: [!grouped && (_jsxs("p", { className: "flex items-baseline gap-2 text-xs", children: [_jsx("span", { className: "font-semibold text-white", children: entry.self ? "You" : entry.name }), _jsx("span", { className: "text-white/50", children: formatTime(entry.sentAt) })] })), _jsx("div", { className: "mt-0.5 text-white/90", children: _jsx(ChatMarkdown, { text: entry.text }) })] }, entry.key));
+                    })] }), _jsxs("form", { onSubmit: handleSubmit, className: "shrink-0 border-t border-white/10 p-2", children: [_jsxs("div", { className: "flex items-end gap-1 rounded-2xl bg-[#3c4043] px-1 py-1", children: [_jsx("button", { ref: emojiButtonRef, type: "button", className: ICON_BUTTON, "aria-label": "Insert emoji", "aria-expanded": picker === "emoji", onClick: () => setPicker((prev) => (prev === "emoji" ? null : "emoji")), children: _jsx(EmojiIcon, {}) }), _jsx("button", { ref: gifButtonRef, type: "button", className: ICON_BUTTON, "aria-label": "Send a GIF", "aria-expanded": picker === "gif", onClick: () => setPicker((prev) => (prev === "gif" ? null : "gif")), children: _jsx(GifIcon, {}) }), _jsx("textarea", { ref: inputRef, rows: 1, value: draft, maxLength: MAX_CHAT_LENGTH, "aria-label": "Message", placeholder: "Send a message", className: "flex-1 min-w-0 max-h-32 resize-none bg-transparent py-2 px-1 text-sm placeholder:text-white/50 focus:outline-none [field-sizing:content]", onChange: (event) => setDraft(event.target.value), onKeyDown: handleKeyDown }), _jsx("button", { type: "submit", className: ICON_BUTTON, "aria-label": "Send message", disabled: !draft.trim(), children: _jsx(SendIcon, {}) })] }), _jsxs("p", { className: "mt-1 px-2 flex justify-between gap-2 text-[11px] text-white/50", children: [_jsx("span", { children: "**bold** *italic* `code` - Shift+Enter for a new line" }), remaining <= COUNTER_THRESHOLD && _jsxs("span", { "aria-live": "polite", children: [remaining, " left"] })] })] }), picker === "emoji" && _jsx(EmojiPicker, { anchorRef: emojiButtonRef, onSelect: insertEmoji, onClose: () => setPicker(null) }), picker === "gif" && _jsx(GifPicker, { anchorRef: gifButtonRef, onSelect: sendGif, onClose: () => setPicker(null) })] }));
+}

package/dist/apps/meet/_ColorWheel.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The whiteboard's custom color picker: a hue/saturation wheel (hue around it, saturation out from its center) and a
+ * brightness slider below it, for any color the swatches don't offer. Dragging on the wheel, or using the arrow keys
+ * on it (left/right turn the hue, up/down change the saturation), picks a color; `onChange` gets every pick as
+ * `#rrggbb`.
+ */
+import React from "react";
+export interface ColorWheelProps {
+    color: string;
+    onChange: (color: string) => void;
+    /** The wheel's diameter, in CSS pixels. */
+    size?: number;
+}
+export default function ColorWheel({ color, onChange, size }: ColorWheelProps): React.JSX.Element;