@rapidmx/meet-plugin 0.14.1 → 0.16.0

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;

package/dist/apps/meet/_ColorWheel.js

@@ -0,0 +1,82 @@
+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 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 { useEffect, useRef, useState } from "react";
+import { hexToHsv, hsvToHex, hsvToRgb, wheelPoint } from "../shared/collab/color.js";
+/** How far one arrow-key press turns the hue (degrees) or moves the saturation. */
+const HUE_STEP = 5;
+const SATURATION_STEP = 0.05;
+export default function ColorWheel({ color, onChange, size = 168 }) {
+    const canvasRef = useRef(null);
+    const [hsv, setHsv] = useState(() => hexToHsv(color));
+    const radius = size / 2;
+    // Follows a color chosen elsewhere (a swatch) - unless it is the one this wheel just produced, which would
+    // otherwise snap the hue of a gray (where hue is meaningless) back to red.
+    useEffect(() => {
+        setHsv((prev) => (hsvToHex(prev) === color ? prev : hexToHsv(color)));
+    }, [color]);
+    useEffect(() => {
+        const ctx = canvasRef.current?.getContext("2d");
+        if (!ctx) {
+            return;
+        }
+        const image = ctx.createImageData(size, size);
+        for (let y = 0; y < size; y++) {
+            for (let x = 0; x < size; x++) {
+                const offset = (y * size + x) * 4;
+                if (Math.hypot(x - radius, y - radius) > radius) {
+                    continue;
+                }
+                const { h, s } = wheelPoint(x, y, radius);
+                const [r, g, b] = hsvToRgb({ h, s, v: hsv.v });
+                image.data[offset] = r;
+                image.data[offset + 1] = g;
+                image.data[offset + 2] = b;
+                image.data[offset + 3] = 255;
+            }
+        }
+        ctx.putImageData(image, 0, 0);
+    }, [hsv.v, size, radius]);
+    function pick(next) {
+        setHsv(next);
+        onChange(hsvToHex(next));
+    }
+    function pickAt(event) {
+        const rect = event.currentTarget.getBoundingClientRect();
+        const scale = rect.width > 0 ? size / rect.width : 1;
+        const { h, s } = wheelPoint((event.clientX - rect.left) * scale, (event.clientY - rect.top) * scale, radius);
+        pick({ ...hsv, h, s });
+    }
+    function handleKeyDown(event) {
+        const moves = {
+            ArrowLeft: { h: (hsv.h - HUE_STEP + 360) % 360 },
+            ArrowRight: { h: (hsv.h + HUE_STEP) % 360 },
+            ArrowUp: { s: Math.min(1, hsv.s + SATURATION_STEP) },
+            ArrowDown: { s: Math.max(0, hsv.s - SATURATION_STEP) },
+        };
+        const move = moves[event.key];
+        if (move) {
+            event.preventDefault();
+            pick({ ...hsv, ...move });
+        }
+    }
+    const angle = (hsv.h * Math.PI) / 180;
+    const markerX = radius + Math.cos(angle) * hsv.s * radius;
+    const markerY = radius + Math.sin(angle) * hsv.s * radius;
+    return (_jsxs("div", { className: "flex flex-col items-center gap-3", "data-testid": "color-wheel", children: [_jsxs("div", { className: "relative", style: { width: size, height: size }, children: [_jsx("canvas", { ref: canvasRef, width: size, height: size, tabIndex: 0, role: "slider", "aria-label": "Hue and saturation", "aria-valuemin": 0, "aria-valuemax": 359, "aria-valuenow": Math.round(hsv.h), "aria-valuetext": `Hue ${Math.round(hsv.h)} degrees, saturation ${Math.round(hsv.s * 100)}%`, className: "rounded-full cursor-crosshair touch-none focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", onPointerDown: (event) => {
+                            event.currentTarget.setPointerCapture?.(event.pointerId);
+                            pickAt(event);
+                        }, onPointerMove: (event) => {
+                            if (event.buttons & 1) {
+                                pickAt(event);
+                            }
+                        }, onKeyDown: handleKeyDown }), _jsx("span", { className: "pointer-events-none absolute w-4 h-4 -ml-2 -mt-2 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.5)]", style: { left: markerX, top: markerY, backgroundColor: hsvToHex(hsv) }, "aria-hidden": "true" })] }), _jsxs("label", { className: "w-full flex items-center gap-2 text-xs text-white/70", children: [_jsx("span", { className: "shrink-0", children: "Brightness" }), _jsx("input", { type: "range", min: 0, max: 100, value: Math.round(hsv.v * 100), "aria-label": "Brightness", className: "flex-1", style: { accentColor: hsvToHex({ ...hsv, v: Math.max(hsv.v, 0.3) }) }, onChange: (event) => pick({ ...hsv, v: Number(event.target.value) / 100 }) })] })] }));
+}

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

@@ -6,9 +6,11 @@
  * (`MeshParticipant.diagnostics`, refreshed every few seconds by `MeshConnectionManager`'s own poller - see its doc
  * comment). Purely informational and entirely local: nothing here is sent anywhere.
  *
- * `diagnostics` is `undefined` until the first poll completes (shortly after a connection comes up) and always
- * absent for a `"websocket"`-relayed participant (there is no `RTCPeerConnection` to poll there) - both cases show
- * "Not available" rather than a blank space, so it never looks like the panel forgot to load.
+ * `diagnostics` is `undefined` until the first poll completes (shortly after a connection comes up, or the pair moves
+ * to the server relay), shown as "Not available yet" rather than a blank space, so it never looks like the panel
+ * forgot to load. For a `"websocket"`-relayed participant the round trip is this browser's own leg to the relay
+ * server (the relay has no direct path to the peer), and the relay's own counters follow (`RelayRows`): how much of this browser's microphone audio the capture path
+ * delivered and how much of it was digital silence, and how this peer's audio is playing back here.
  */
 import React from "react";
 import type { MeshParticipant } from "../shared/webrtc/types.js";

package/dist/apps/meet/_DiagnosticsPanel.js

@@ -24,9 +24,25 @@ function StreamRow({ kind, packetsLost, jitter, bytesSent, bytesReceived }) {
     return (_jsxs("div", { className: ROW, children: [_jsx("span", { className: LABEL, children: kind }), _jsxs("span", { children: [packetsLost !== undefined && `${packetsLost} lost`, jitter !== undefined && ` · ${formatMs(jitter)} jitter`, (bytesSent !== undefined || bytesReceived !== undefined) &&
                         ` · ${[bytesSent !== undefined && `↑${formatBytes(bytesSent)}`, bytesReceived !== undefined && `↓${formatBytes(bytesReceived)}`].filter(Boolean).join(" ")}`] })] }));
 }
+/** `part` as a whole-number percentage of `whole`, or "—" when there is no whole yet. */
+function percent(part, whole) {
+    return whole > 0 ? `${Math.round((part / whole) * 100)}%` : "—";
+}
+function plural(count, noun) {
+    return `${count} ${noun}${count === 1 ? "" : "s"}`;
+}
+/** The server relay's own counters (see `RelayDiagnostics`). The capture row is this browser's own microphone, the
+ * playback row this peer's audio as heard here - so a mostly silent capture points at the sender, silence arriving in
+ * playback with no capture problem points at the other end's capture, and gaps point at the network. */
+function RelayRows({ relay }) {
+    const { send, receive } = relay;
+    const notSent = send.audio.framesDropped + send.video.framesDropped;
+    return (_jsxs(_Fragment, { children: [send.audioCaptureWallMs > 0 && (_jsxs("div", { className: ROW, children: [_jsx("span", { className: LABEL, children: "Your mic capture" }), _jsxs("span", { children: [percent(send.audioCapturedMs, send.audioCaptureWallMs), " of real time \u00B7 ", percent(send.audioSilentMs, send.audioCapturedMs), " silent", send.audioEncoderSkippedMs > 0 && ` · ${formatMs(send.audioEncoderSkippedMs / 1000)} skipped`] })] })), notSent > 0 && (_jsxs("div", { className: ROW, children: [_jsx("span", { className: LABEL, children: "Not sent" }), _jsxs("span", { children: [send.audio.framesDropped, " audio \u00B7 ", send.video.framesDropped, " video frames"] })] })), receive && (_jsxs("div", { className: ROW, children: [_jsx("span", { className: LABEL, children: "Playback" }), _jsx("span", { children: `${percent(receive.audio.silentMs, receive.audio.playedMs)} silent · ${plural(receive.audio.gaps, "gap")} ` +
+                            `(${formatMs(receive.audio.gapMs / 1000)}) · ${formatMs(receive.audio.bufferedMs / 1000)} buffered` })] })), receive && receive.audio.droppedLate > 0 && (_jsxs("div", { className: ROW, children: [_jsx("span", { className: LABEL, children: "Dropped late" }), _jsx("span", { children: plural(receive.audio.droppedLate, "packet") })] }))] }));
+}
 export default function DiagnosticsPanel({ selfName, micOn, cameraOn, participants }) {
     return (_jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-white/60 mb-1.5", children: "This browser" }), browserCapabilities().map(({ label, supported }) => (_jsxs("div", { className: ROW, children: [_jsx("span", { className: LABEL, children: label }), _jsx("span", { className: supported ? "text-[#8ab4f8]" : "text-[#f2b8b5]", children: supported ? "Supported" : "Not supported" })] }, label))), _jsxs("p", { className: "text-xs font-semibold uppercase tracking-wide text-white/60 mt-3 mb-1.5", children: [selfName, " ", _jsx("span", { className: "text-white/60", children: "(you)" })] }), _jsxs("div", { className: ROW, children: [_jsx("span", { className: LABEL, children: "Sending" }), _jsx("span", { children: [micOn && "audio", cameraOn && "video"].filter(Boolean).join(" + ") || "Nothing" })] }), participants.length === 0 && _jsx("p", { className: "text-white/60 mt-3", children: "Nobody else is in the call yet." }), participants.map((p) => {
                 const badge = p.transport !== "connecting" && p.transport !== "p2p" ? TRANSPORT_BADGES[p.transport] : undefined;
-                return (_jsxs("div", { children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-white/60 mt-3 mb-1.5", children: p.name }), _jsxs("div", { className: ROW, children: [_jsx("span", { className: LABEL, children: "Connection" }), _jsx("span", { title: badge?.title, children: badge?.label ?? (p.transport === "connecting" ? "Connecting…" : "Direct") })] }), p.transport === "websocket" || !p.diagnostics ? (_jsxs("p", { className: `${LABEL} py-0.5`, children: ["Not available", p.transport !== "websocket" && " yet", "."] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: ROW, children: [_jsx("span", { className: LABEL, children: "Round-trip time" }), _jsx("span", { children: formatMs(p.diagnostics.roundTripTimeSeconds) })] }), _jsx(StreamRow, { kind: "Audio", ...p.diagnostics.audio }), _jsx(StreamRow, { kind: "Video", ...p.diagnostics.video })] }))] }, p.uid));
+                return (_jsxs("div", { children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-white/60 mt-3 mb-1.5", children: p.name }), _jsxs("div", { className: ROW, children: [_jsx("span", { className: LABEL, children: "Connection" }), _jsx("span", { title: badge?.title, children: badge?.label ?? (p.transport === "connecting" ? "Connecting…" : "Direct") })] }), !p.diagnostics ? (_jsx("p", { className: `${LABEL} py-0.5`, children: "Not available yet." })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: ROW, children: [_jsx("span", { className: LABEL, title: p.diagnostics.relay ? "From this browser to the relay server and back" : undefined, children: p.diagnostics.relay ? "Round-trip to server" : "Round-trip time" }), _jsx("span", { children: formatMs(p.diagnostics.roundTripTimeSeconds) })] }), _jsx(StreamRow, { kind: "Audio", ...p.diagnostics.audio }), _jsx(StreamRow, { kind: "Video", ...p.diagnostics.video }), p.diagnostics.relay && _jsx(RelayRows, { relay: p.diagnostics.relay })] }))] }, p.uid));
             })] }));
 }

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

@@ -10,7 +10,10 @@
  * natural - this is a local display transform only, never applied to the video actually sent to anyone, so
  * everyone else always sees the participant the right way round. `mirrored={false}` (`_CallView.tsx`, when a custom
  * background image is on) turns that off: the picture the participant chose is a fixed reference, not a live
- * reflection, and mirroring it would show it backwards to no one but themselves. */
+ * reflection, and mirroring it would show it backwards to no one but themselves.
+ *
+ * `onHideSelf` adds a small "…" menu to the tile's corner, local-tile-only - see `_CallView.tsx`'s doc comment on
+ * hiding the local tile from grid view. */
 import React from "react";
 import type { MediaTransport } from "../shared/webrtc/types.js";
 /** What a tile says about how its participant's media is arriving, for the paths that are not the ordinary direct one
@@ -36,12 +39,17 @@ export interface ParticipantTileProps {
     status?: string;
     /** Highlights this tile as the current presenter/focus. */
     isFocused?: boolean;
-    /** Fits the whole picture inside the tile instead of filling it - a shared screen must not be cropped. */
+    /** Marks this tile as showing a screen share rather than a camera - a screen share is never mirrored
+     * (regardless of `mirrored`/`isLocal`), since mirroring someone else's shared content would be disorienting. */
     contain?: boolean;
     /** Whether the local tile is shown mirrored, like a real mirror - ignored for a remote tile, which is never
      * mirrored. Default `true`; see this module's doc comment. */
     mirrored?: boolean;
+    /** Offers a small "…" menu in the tile's top-right corner with one item, "Hide self" - see `_CallView.tsx`'s
+     * doc comment on hiding the local tile. Omitted everywhere that shouldn't offer it: every remote tile, and the
+     * local tile while alone in the call, where hiding it would just blank the only thing on screen. */
+    onHideSelf?: () => void;
     onClick?: () => void;
     className?: string;
 }
-export default function ParticipantTile({ name, stream, isLocal, cameraOff, micMuted, handRaised, transport, status, isFocused, contain, mirrored, onClick, className, }: ParticipantTileProps): React.JSX.Element;
+export default function ParticipantTile({ name, stream, isLocal, cameraOff, micMuted, handRaised, transport, status, isFocused, contain, mirrored, onHideSelf, onClick, className, }: ParticipantTileProps): React.JSX.Element;

package/dist/apps/meet/_ParticipantTile.js

@@ -15,9 +15,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * natural - this is a local display transform only, never applied to the video actually sent to anyone, so
  * everyone else always sees the participant the right way round. `mirrored={false}` (`_CallView.tsx`, when a custom
  * background image is on) turns that off: the picture the participant chose is a fixed reference, not a live
- * reflection, and mirroring it would show it backwards to no one but themselves. */
-import { useEffect, useRef } from "react";
-import { MicOffIcon } from "./_icons.js";
+ * reflection, and mirroring it would show it backwards to no one but themselves.
+ *
+ * `onHideSelf` adds a small "…" menu to the tile's corner, local-tile-only - see `_CallView.tsx`'s doc comment on
+ * hiding the local tile from grid view. */
+import { useEffect, useRef, useState } from "react";
+import { MicOffIcon, OverflowIcon } from "./_icons.js";
 /** What a tile says about how its participant's media is arriving, for the paths that are not the ordinary direct one
  * (which needs no comment). Text rather than only an icon, so the reason a picture is degraded is never a guess.
  * Exported so `_DiagnosticsPanel.tsx` shows the identical label/title rather than describing the same paths in
@@ -44,15 +47,43 @@ function StatusPill({ status, className }) {
 function initialOf(name) {
     return (Array.from(name.trim())[0] ?? "?").toUpperCase();
 }
-export default function ParticipantTile({ name, stream, isLocal, cameraOff, micMuted, handRaised, transport, status, isFocused, contain, mirrored = true, onClick, className, }) {
+export default function ParticipantTile({ name, stream, isLocal, cameraOff, micMuted, handRaised, transport, status, isFocused, contain, mirrored = true, onHideSelf, onClick, className, }) {
     const badge = transport ? TRANSPORT_BADGES[transport] : undefined;
     const videoRef = useRef(null);
     const showVideo = !!stream && !cameraOff;
+    const [hideMenuOpen, setHideMenuOpen] = useState(false);
+    const hideMenuRef = useRef(null);
     // The `<video>` element only exists while `showVideo`, so its stream is bound whenever it (re)appears too.
     useEffect(() => {
         if (videoRef.current) {
             videoRef.current.srcObject = stream ?? null;
         }
     }, [stream, showVideo]);
-    return (_jsxs("div", { className: `relative overflow-hidden rounded-xl bg-[#3c4043] flex items-center justify-center min-h-[90px] ${isFocused ? "ring-2 ring-[#8ab4f8]" : ""} ${className ?? ""}`, onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, "aria-label": onClick ? `${name}${isLocal ? " (you)" : ""}` : undefined, children: [showVideo ? (_jsxs(_Fragment, { children: [_jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, className: `w-full h-full ${contain ? "object-contain bg-black" : "object-cover"} ${isLocal && !contain && mirrored ? "[transform:scaleX(-1)]" : ""}` }), status && _jsx(StatusPill, { status: status, className: "absolute top-2 left-1/2 -translate-x-1/2 whitespace-nowrap" })] })) : (_jsxs("div", { className: "flex flex-col items-center gap-2 max-w-full px-1", children: [_jsx("div", { className: "w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center text-2xl font-bold", "aria-hidden": "true", children: initialOf(name) }), status && _jsx(StatusPill, { status: status })] })), handRaised && (_jsx("span", { className: "absolute top-2 left-2 flex items-center justify-center w-8 h-8 rounded-full bg-[#a8c7fa] text-base", role: "img", "aria-label": "Hand raised", children: "\u270B" })), micMuted && (_jsx("span", { className: "absolute top-2 right-2 flex items-center justify-center w-7 h-7 rounded-full bg-black/60 text-white", role: "img", "aria-label": "Muted", children: _jsx("span", { className: "w-4 h-4 [&>svg]:w-4 [&>svg]:h-4", children: _jsx(MicOffIcon, {}) }) })), badge && (_jsx("span", { className: `absolute bottom-2 right-2 px-2 py-0.5 rounded text-xs ${transport === "failed" ? "bg-[#601410] text-[#f9dedc]" : "bg-black/60 text-white"}`, title: badge.title, "data-testid": "transport-badge", children: badge.label })), _jsxs("div", { className: "absolute bottom-2 left-2 max-w-[calc(100%-1rem)] truncate px-2 py-0.5 rounded bg-black/60 text-white text-sm", children: [name, isLocal ? " (you)" : ""] })] }));
+    // The tile's own "…" menu closes on Escape or a press anywhere outside it, same shape as every other menu in
+    // this app.
+    useEffect(() => {
+        if (!hideMenuOpen) {
+            return;
+        }
+        const onPointerDown = (event) => {
+            if (!hideMenuRef.current?.contains(event.target)) {
+                setHideMenuOpen(false);
+            }
+        };
+        const onKeyDown = (event) => {
+            if (event.key === "Escape") {
+                setHideMenuOpen(false);
+            }
+        };
+        document.addEventListener("pointerdown", onPointerDown);
+        document.addEventListener("keydown", onKeyDown);
+        return () => {
+            document.removeEventListener("pointerdown", onPointerDown);
+            document.removeEventListener("keydown", onKeyDown);
+        };
+    }, [hideMenuOpen]);
+    return (_jsxs("div", { className: `relative overflow-hidden rounded-xl bg-[#3c4043] flex items-center justify-center min-h-[90px] ${isFocused ? "ring-2 ring-[#8ab4f8]" : ""} ${className ?? ""}`, onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, "aria-label": onClick ? `${name}${isLocal ? " (you)" : ""}` : undefined, children: [showVideo ? (_jsxs(_Fragment, { children: [_jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, className: `w-full h-full object-contain bg-black ${isLocal && !contain && mirrored ? "[transform:scaleX(-1)]" : ""}` }), status && _jsx(StatusPill, { status: status, className: "absolute top-2 left-1/2 -translate-x-1/2 whitespace-nowrap" })] })) : (_jsxs("div", { className: "flex flex-col items-center gap-2 max-w-full px-1", children: [_jsx("div", { className: "w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center text-2xl font-bold", "aria-hidden": "true", children: initialOf(name) }), status && _jsx(StatusPill, { status: status })] })), handRaised && (_jsx("span", { className: "absolute top-2 left-2 flex items-center justify-center w-8 h-8 rounded-full bg-[#a8c7fa] text-base", role: "img", "aria-label": "Hand raised", children: "\u270B" })), (micMuted || onHideSelf) && (_jsxs("div", { className: "absolute top-2 right-2 flex items-center gap-1", children: [micMuted && (_jsx("span", { className: "flex items-center justify-center w-7 h-7 rounded-full bg-black/60 text-white", role: "img", "aria-label": "Muted", children: _jsx("span", { className: "w-4 h-4 [&>svg]:w-4 [&>svg]:h-4", children: _jsx(MicOffIcon, {}) }) })), onHideSelf && (_jsxs("div", { className: "relative", ref: hideMenuRef, children: [_jsx("button", { type: "button", className: "flex items-center justify-center w-7 h-7 rounded-full bg-black/60 hover:bg-black/80 text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", "aria-label": "Local video options", "aria-haspopup": "menu", "aria-expanded": hideMenuOpen, onClick: () => setHideMenuOpen((prev) => !prev), children: _jsx("span", { className: "w-4 h-4 [&>svg]:w-4 [&>svg]:h-4", children: _jsx(OverflowIcon, {}) }) }), hideMenuOpen && (_jsx("div", { role: "menu", "aria-label": "Local video options", className: "absolute top-full right-0 mt-1 w-32 rounded-xl bg-[#2b2d30] text-white shadow-xl py-1 text-sm", children: _jsx("button", { type: "button", role: "menuitem", className: "w-full px-3 py-1.5 text-left hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", onClick: () => {
+                                        setHideMenuOpen(false);
+                                        onHideSelf();
+                                    }, children: "Hide self" }) }))] }))] })), badge && (_jsx("span", { className: `absolute bottom-2 right-2 px-2 py-0.5 rounded text-xs ${transport === "failed" ? "bg-[#601410] text-[#f9dedc]" : "bg-black/60 text-white"}`, title: badge.title, "data-testid": "transport-badge", children: badge.label })), _jsxs("div", { className: "absolute bottom-2 left-2 max-w-[calc(100%-1rem)] truncate px-2 py-0.5 rounded bg-black/60 text-white text-sm", children: [name, isLocal ? " (you)" : ""] })] }));
 }

package/dist/apps/meet/_ParticipantsDrawer.js

@@ -34,7 +34,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useEffect } from "react";
 import { TRANSPORT_BADGES } from "./_ParticipantTile.js";
-import { MicOffIcon } from "./_icons.js";
+import { BatonIcon, MicOffIcon, RemoveIcon } from "./_icons.js";
 /** The host-only "who's waiting" list - shown only while `waitingRoomEnabled` is on, since there is otherwise never
  * anyone to list. Says so explicitly when the list is empty, rather than rendering nothing (silence here would be
  * indistinguishable from the list just not having loaded yet). */
@@ -43,11 +43,11 @@ function WaitingSection({ waitingParticipants, onAdmit, onDeny, }) {
 }
 function Row({ name, isSelf, isHost, micMuted, handRaised, transport, canModerate, onMute, onKick, hasStick, canGiveStick, onGiveStick, }) {
     const badge = transport ? TRANSPORT_BADGES[transport] : undefined;
-    return (_jsxs("li", { className: "flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-white/5", children: [_jsxs("span", { className: "flex-1 min-w-0 truncate", children: [name, isSelf ? " (you)" : ""] }), isHost && _jsx("span", { className: "px-2 py-0.5 rounded text-xs whitespace-nowrap bg-[#a8c7fa] text-[#062e6f]", children: "Host" }), hasStick && (_jsx("span", { className: "px-2 py-0.5 rounded text-xs whitespace-nowrap bg-[#a8c7fa] text-[#062e6f]", role: "img", "aria-label": "Holding the talking stick", children: "\uD83C\uDF99\uFE0F" })), handRaised && (_jsx("span", { role: "img", "aria-label": "Hand raised", children: "\u270B" })), micMuted && (_jsx("span", { className: "w-4 h-4 text-white/70 [&>svg]:w-4 [&>svg]:h-4", role: "img", "aria-label": "Muted", children: _jsx(MicOffIcon, {}) })), badge && (_jsx("span", { className: `px-2 py-0.5 rounded text-xs whitespace-nowrap ${transport === "failed" ? "bg-[#601410] text-[#f9dedc]" : "bg-black/40 text-white"}`, title: badge.title, children: badge.label })), canGiveStick && !hasStick && (_jsx("button", { type: "button", className: "px-2 py-0.5 rounded text-xs whitespace-nowrap bg-white/10 hover:bg-white/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", "aria-label": `Give the talking stick to ${name}`, onClick: onGiveStick, children: "Give stick" })), canModerate && !micMuted && (_jsx("button", { type: "button", className: "px-2 py-0.5 rounded text-xs whitespace-nowrap bg-white/10 hover:bg-white/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", "aria-label": `Mute ${name}`, onClick: onMute, children: "Mute" })), canModerate && (_jsx("button", { type: "button", className: "px-2 py-0.5 rounded text-xs whitespace-nowrap bg-[#601410] text-[#f9dedc] hover:bg-[#7a1b16] focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", "aria-label": `Remove ${name}`, onClick: () => {
+    return (_jsxs("li", { className: "flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-white/5", children: [_jsxs("span", { className: "flex-1 min-w-0 truncate", children: [name, isSelf ? " (you)" : ""] }), isHost && _jsx("span", { className: "px-2 py-0.5 rounded text-xs whitespace-nowrap bg-[#a8c7fa] text-[#062e6f]", children: "Host" }), hasStick && (_jsx("span", { className: "px-2 py-0.5 rounded text-xs whitespace-nowrap bg-[#a8c7fa] text-[#062e6f]", role: "img", "aria-label": "Holding the talking stick", children: "\uD83C\uDF99\uFE0F" })), handRaised && (_jsx("span", { role: "img", "aria-label": "Hand raised", children: "\u270B" })), micMuted && (_jsx("span", { className: "w-4 h-4 text-white/70 [&>svg]:w-4 [&>svg]:h-4", role: "img", "aria-label": "Muted", children: _jsx(MicOffIcon, {}) })), badge && (_jsx("span", { className: `px-2 py-0.5 rounded text-xs whitespace-nowrap ${transport === "failed" ? "bg-[#601410] text-[#f9dedc]" : "bg-black/40 text-white"}`, title: badge.title, children: badge.label })), canGiveStick && !hasStick && (_jsx("button", { type: "button", className: "w-7 h-7 flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 [&>svg]:w-4 [&>svg]:h-4", "aria-label": `Give the talking stick to ${name}`, title: `Give the talking stick to ${name}`, onClick: onGiveStick, children: _jsx(BatonIcon, {}) })), canModerate && !micMuted && (_jsx("button", { type: "button", className: "w-7 h-7 flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 [&>svg]:w-4 [&>svg]:h-4", "aria-label": `Mute ${name}`, title: `Mute ${name}`, onClick: onMute, children: _jsx(MicOffIcon, {}) })), canModerate && (_jsx("button", { type: "button", className: "w-7 h-7 flex items-center justify-center rounded-full bg-[#601410] text-[#f9dedc] hover:bg-[#7a1b16] focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 [&>svg]:w-4 [&>svg]:h-4", "aria-label": `Remove ${name}`, title: `Remove ${name}`, onClick: () => {
                     if (window.confirm(`Remove ${name} from the call?`)) {
                         onKick?.();
                     }
-                }, children: "Remove" }))] }));
+                }, children: _jsx(RemoveIcon, {}) }))] }));
 }
 export default function ParticipantsDrawer({ selfName, micOn, handRaised, participants, isSelfHost, isParticipantHost, onMute, onKick, waitingRoomEnabled, waitingParticipants, onAdmit, onDeny, talkingStickActive, selfPeerId, talkingStickHolder, onGiveTalkingStick, onClose, }) {
     useEffect(() => {

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

@@ -0,0 +1,64 @@
+/**
+ * The shared whiteboard, shown in place of the video stage while a participant has it open (`_CallView.tsx`). Every
+ * participant draws on the same board - `CollabSession` (`apps/shared/collab/CollabSession.ts`) carries the drawing
+ * to everyone and `whiteboardRender.ts` draws it - but each one opens and closes their own view of it.
+ *
+ * ## Tools
+ *
+ * - **Pens** - ballpoint, sharpie, marker, crayon and coloring pencil (`PEN_TYPES`), each drawn its own way.
+ * - **Stencil** - drags out a line, arrow, rectangle, ellipse, triangle or star, previewed while dragging.
+ * - **Stamps** - places one of `STAMPS` where clicked.
+ * - **Eraser** - erases whatever it passes over, anyone's drawing.
+ *
+ * Plus a row of sizes, color swatches and a color wheel (`_ColorWheel.tsx`) for any other color, undo (also
+ * Ctrl/Cmd+Z: takes back this participant's own last drawing) and clear (for everyone, after a confirmation).
+ *
+ * ## Everyone's pointers
+ *
+ * While this participant's pointer is over the board it is shared (`CollabSession.moveCursor()`), as the tool they
+ * have picked in the color they have picked; everyone else's (`cursors`) is drawn over the canvas the same way, with
+ * their name beside it, so each can see who is pointing at - or drawing - what. They are plain elements over the
+ * canvas rather than part of the drawing, so a pointer moving never redraws the board.
+ *
+ * ## Talking stick
+ *
+ * While `canDraw` is off (talking-stick mode, and someone else holds the stick - see `_CallView.tsx`), drawing,
+ * undo and clear do nothing and a note names who may draw; picking a tool or color still works, ready for when the
+ * stick comes round. The pointer is still shared.
+ *
+ * ## The canvas
+ *
+ * The board is a fixed 16:9 space (`BOARD_WIDTH` x `BOARD_HEIGHT`) fitted into whatever room the stage has, so a
+ * stroke lands in the same place on every participant's screen whatever their window size. The canvas is backed at
+ * the display's pixel ratio so lines stay sharp, and redrawn at most once per animation frame whenever the board
+ * changes (`revision`).
+ */
+import React from "react";
+import type { CollabSession, RemoteCursor } from "../shared/collab/CollabSession.js";
+import { type PenType, type StencilShape } from "../shared/collab/protocol.js";
+export interface WhiteboardProps {
+    session: CollabSession;
+    /** `session.board.revision` - a new value redraws the board. */
+    revision: number;
+    /** Everyone else's pointers on the board - `CollabSession.cursors`. */
+    cursors?: readonly RemoteCursor[];
+    /** Whether this participant may draw now - see this module's doc comment on talking stick. Defaults to `true`. */
+    canDraw?: boolean;
+    /** Who may draw while `canDraw` is off, for the note saying so; absent while nobody holds the stick. */
+    drawLockedTo?: string;
+    onClose: () => void;
+}
+export declare const PEN_LABELS: Record<PenType, string>;
+export declare const SHAPE_LABELS: Record<StencilShape, string>;
+/** The color swatches, in display order. */
+export declare const SWATCHES: readonly ["#202124", "#ffffff", "#9aa0a6", "#d93025", "#f29900", "#fbbc04", "#188038", "#1a73e8", "#9334e6", "#e52592", "#795548", "#00bcd4"];
+/** Black or white, whichever reads better on `color` (`#rrggbb`). */
+export declare function labelTextColor(color: string): string;
+/** A participant's pointer: their tool's own shape in their color, its tip (or a stamp's center) at the point, with
+ * their name beside it. */
+export declare function CursorMarker({ cursor, left, top }: {
+    cursor: Pick<RemoteCursor, "name" | "tool" | "color" | "stamp">;
+    left: number;
+    top: number;
+}): React.JSX.Element;
+export default function Whiteboard({ session, revision, cursors, canDraw, drawLockedTo, onClose }: WhiteboardProps): React.JSX.Element;