@rapidmx/meet-plugin 0.15.0 → 0.16.0

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/_ParticipantTile.d.ts

@@ -39,7 +39,8 @@ 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. */

package/dist/apps/meet/_ParticipantTile.js

@@ -82,7 +82,7 @@ export default function ParticipantTile({ name, stream, isLocal, cameraOff, micM
             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 ${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 || 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: () => {
+    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/_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;

package/dist/apps/meet/_Whiteboard.js

@@ -0,0 +1,312 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz. All rights reserved.
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * 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 { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { BOARD_HEIGHT, BOARD_WIDTH, PEN_TYPES, SIZES, STAMPS, STAMP_SIZES, STENCIL_SHAPES, } from "../shared/collab/protocol.js";
+import { drawElement, hitTest, renderBoard } from "../shared/collab/whiteboardRender.js";
+import ColorWheel from "./_ColorWheel.js";
+import { ClearIcon, EraserIcon, UndoIcon } from "./_icons.js";
+export const PEN_LABELS = {
+    ballpoint: "Ballpoint pen",
+    sharpie: "Sharpie",
+    marker: "Marker",
+    crayon: "Crayon",
+    pencil: "Coloring pencil",
+};
+export const SHAPE_LABELS = {
+    line: "Line",
+    arrow: "Arrow",
+    rect: "Rectangle",
+    ellipse: "Ellipse",
+    triangle: "Triangle",
+    star: "Star",
+};
+/** The color swatches, in display order. */
+export const SWATCHES = ["#202124", "#ffffff", "#9aa0a6", "#d93025", "#f29900", "#fbbc04", "#188038", "#1a73e8", "#9334e6", "#e52592", "#795548", "#00bcd4"];
+/** A freehand point closer than this (board units) to the previous one is skipped - it adds nothing visible. */
+const MIN_POINT_DISTANCE = 2;
+/** The eraser's reach around the pointer, in board units. */
+const ERASER_RADIUS = 14;
+/** A stencil drag shorter than this (board units) is a mis-click, not a shape. */
+const MIN_SHAPE_SIZE = 4;
+const TOOL_BUTTON = "w-9 h-9 shrink-0 flex items-center justify-center rounded-lg hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 aria-pressed:bg-[#a8c7fa] aria-pressed:text-[#062e6f]";
+/** A short sample of each pen's line, for its toolbar button. */
+function PenSample({ pen }) {
+    const look = {
+        ballpoint: { width: 1.5, opacity: 1, cap: "round" },
+        sharpie: { width: 3, opacity: 1, cap: "round" },
+        marker: { width: 6, opacity: 0.5, cap: "square" },
+        crayon: { width: 4, opacity: 0.8, dash: "2 1", cap: "round" },
+        pencil: { width: 1.5, opacity: 0.6, dash: "3 1", cap: "round" },
+    };
+    const { width, opacity, dash, cap } = look[pen];
+    return (_jsx("svg", { viewBox: "0 0 24 24", className: "w-6 h-6", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M3 16c3-6 6-6 9 0s6 6 9 0", fill: "none", stroke: "currentColor", strokeWidth: width, strokeOpacity: opacity, strokeDasharray: dash, strokeLinecap: cap }) }));
+}
+/** Black or white, whichever reads better on `color` (`#rrggbb`). */
+export function labelTextColor(color) {
+    const [r, g, b] = [1, 3, 5].map((i) => parseInt(color.slice(i, i + 2), 16));
+    return 0.299 * r + 0.587 * g + 0.114 * b > 150 ? "#000000" : "#ffffff";
+}
+/** 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 function CursorMarker({ cursor, left, top }) {
+    const { tool, color } = cursor;
+    let glyph;
+    if (tool === "stamp") {
+        glyph = _jsx("span", { className: "block -translate-x-1/2 -translate-y-1/2 text-2xl leading-none drop-shadow", children: cursor.stamp ?? "⭐" });
+    }
+    else if (tool === "eraser") {
+        glyph = (_jsx("svg", { viewBox: "0 0 24 24", className: "w-6 h-6 -translate-x-1/2 -translate-y-1/2", "aria-hidden": "true", children: _jsx("circle", { cx: "12", cy: "12", r: "9", fill: "#ffffff", fillOpacity: "0.6", stroke: color, strokeWidth: "2" }) }));
+    }
+    else if (tool === "stencil") {
+        glyph = (_jsxs("svg", { viewBox: "0 0 24 24", className: "w-6 h-6 -translate-x-1/2 -translate-y-1/2", fill: "none", stroke: color, strokeWidth: "2", "aria-hidden": "true", children: [_jsx("line", { x1: "12", y1: "2", x2: "12", y2: "22" }), _jsx("line", { x1: "2", y1: "12", x2: "22", y2: "12" }), _jsx("rect", { x: "15", y: "15", width: "7", height: "7" })] }));
+    }
+    else {
+        // A pen held at an angle, tip at the top-left corner: its body width and tip say which pen it is.
+        const body = {
+            ballpoint: { width: 4, tip: "M0 0l5 2-3 3z" },
+            sharpie: { width: 6, tip: "M0 0l7 3-4 4z" },
+            marker: { width: 8, tip: "M0 0h6l2 2v6H2L0 6z" },
+            crayon: { width: 6, tip: "M0 0l8 4-4 4z" },
+            pencil: { width: 5, tip: "M0 0l6 2-4 4z" },
+        };
+        const { width, tip } = body[tool];
+        glyph = (_jsxs("svg", { viewBox: "0 0 28 28", className: "w-7 h-7", "aria-hidden": "true", children: [_jsx("g", { transform: "rotate(45 0 0)", children: _jsx("rect", { x: "6", y: -width / 2, width: "20", height: width, rx: "1", fill: color, stroke: "#000000", strokeOpacity: "0.5", strokeWidth: "1" }) }), _jsx("path", { d: tip, fill: color, stroke: "#000000", strokeOpacity: "0.5", strokeWidth: "0.8" })] }));
+    }
+    return (_jsxs("div", { className: "pointer-events-none absolute transition-[left,top] duration-75 ease-linear", style: { left, top }, "data-testid": "remote-cursor", children: [glyph, _jsx("span", { className: "absolute left-4 top-4 max-w-40 truncate whitespace-nowrap rounded-full px-2 py-0.5 text-xs font-medium shadow", style: { backgroundColor: color, color: labelTextColor(color) }, children: cursor.name })] }));
+}
+/** A small outline of each stencil shape, for its button. */
+function ShapeSample({ shape }) {
+    const paths = {
+        line: _jsx("line", { x1: "4", y1: "20", x2: "20", y2: "4" }),
+        arrow: _jsx("path", { d: "M4 20L20 4m0 0h-7m7 0v7" }),
+        rect: _jsx("rect", { x: "4", y: "6", width: "16", height: "12" }),
+        ellipse: _jsx("ellipse", { cx: "12", cy: "12", rx: "9", ry: "6.5" }),
+        triangle: _jsx("path", { d: "M12 4l9 16H3z" }),
+        star: _jsx("path", { d: "M12 3l2.6 5.9 6.4.6-4.8 4.3 1.4 6.3L12 16.8 6.4 20.1l1.4-6.3L3 9.5l6.4-.6z" }),
+    };
+    return (_jsx("svg", { viewBox: "0 0 24 24", className: "w-5 h-5", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round", strokeLinecap: "round", "aria-hidden": "true", focusable: "false", children: paths[shape] }));
+}
+export default function Whiteboard({ session, revision, cursors = [], canDraw = true, drawLockedTo, onClose }) {
+    const [tool, setTool] = useState({ kind: "pen", pen: "ballpoint" });
+    const [shape, setShape] = useState("rect");
+    const [stamp, setStamp] = useState(STAMPS[0]);
+    const [color, setColor] = useState(SWATCHES[0]);
+    const [sizeIndex, setSizeIndex] = useState(1);
+    const [stampSizeIndex, setStampSizeIndex] = useState(1);
+    const [popover, setPopover] = useState(null);
+    const [confirmClear, setConfirmClear] = useState(false);
+    const [box, setBox] = useState({ width: 0, height: 0 });
+    const stageRef = useRef(null);
+    const canvasRef = useRef(null);
+    const drawingRef = useRef(null);
+    const previewRef = useRef(null);
+    const frameRef = useRef(undefined);
+    const size = SIZES[sizeIndex];
+    const stampSize = STAMP_SIZES[stampSizeIndex];
+    // The largest 16:9 box that fits the stage.
+    useLayoutEffect(() => {
+        const stage = stageRef.current;
+        const fit = () => {
+            const { width, height } = stage.getBoundingClientRect();
+            const fitted = Math.min(width, (height * BOARD_WIDTH) / BOARD_HEIGHT);
+            setBox({ width: Math.floor(fitted), height: Math.floor((fitted * BOARD_HEIGHT) / BOARD_WIDTH) });
+        };
+        fit();
+        if (typeof ResizeObserver === "undefined") {
+            return;
+        }
+        const observer = new ResizeObserver(fit);
+        observer.observe(stage);
+        return () => observer.disconnect();
+    }, []);
+    const draw = useCallback(() => {
+        frameRef.current = undefined;
+        const canvas = canvasRef.current;
+        const ctx = canvas?.getContext("2d");
+        if (!canvas || !ctx) {
+            return;
+        }
+        const scale = canvas.width / BOARD_WIDTH;
+        renderBoard(ctx, session.board.elements, scale);
+        if (previewRef.current) {
+            ctx.save();
+            ctx.setTransform(scale, 0, 0, scale, 0, 0);
+            drawElement(ctx, previewRef.current);
+            ctx.restore();
+        }
+    }, [session]);
+    const scheduleDraw = useCallback(() => {
+        if (frameRef.current === undefined) {
+            frameRef.current = requestAnimationFrame(draw);
+        }
+    }, [draw]);
+    const ratio = typeof window !== "undefined" && window.devicePixelRatio > 0 ? window.devicePixelRatio : 1;
+    // A new size or pixel ratio resizes the canvas, which wipes it - so either redraws, as a change to the board does.
+    useEffect(() => {
+        scheduleDraw();
+    }, [revision, box, ratio, scheduleDraw]);
+    // This participant's pointer leaves everyone else's board with the board itself.
+    useEffect(() => () => session.hideCursor(), [session]);
+    useEffect(() => () => {
+        if (frameRef.current !== undefined) {
+            cancelAnimationFrame(frameRef.current);
+        }
+    }, []);
+    // Ctrl/Cmd+Z takes back this participant's own last drawing - unless they are typing somewhere (the chat).
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            const target = event.target;
+            if (target?.closest?.("input, textarea, [contenteditable='true']")) {
+                return;
+            }
+            if ((event.ctrlKey || event.metaKey) && !event.shiftKey && event.key.toLowerCase() === "z" && session.canDraw) {
+                event.preventDefault();
+                session.undo();
+            }
+            else if (event.key === "Escape") {
+                setPopover(null);
+                setConfirmClear(false);
+            }
+        };
+        document.addEventListener("keydown", onKeyDown);
+        return () => document.removeEventListener("keydown", onKeyDown);
+    }, [session]);
+    function toBoard(event) {
+        const rect = canvasRef.current.getBoundingClientRect();
+        const width = rect.width || BOARD_WIDTH;
+        const height = rect.height || BOARD_HEIGHT;
+        return { x: ((event.clientX - rect.left) / width) * BOARD_WIDTH, y: ((event.clientY - rect.top) / height) * BOARD_HEIGHT };
+    }
+    function erase(x, y) {
+        const hits = session.board.elements.filter((element) => hitTest(element, x, y, ERASER_RADIUS)).map((element) => element.id);
+        session.erase(hits);
+    }
+    function cursorTool() {
+        return tool.kind === "pen" ? tool.pen : tool.kind;
+    }
+    function shareCursor(x, y) {
+        session.moveCursor(x, y, cursorTool(), color, tool.kind === "stamp" ? stamp : undefined);
+    }
+    function handlePointerDown(event) {
+        if (event.button !== 0 || !canDraw) {
+            return;
+        }
+        setPopover(null);
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        const { x, y } = toBoard(event);
+        switch (tool.kind) {
+            case "pen":
+                drawingRef.current = { strokeId: session.beginStroke(tool.pen, color, size, x, y), lastX: x, lastY: y, startX: x, startY: y };
+                return;
+            case "stencil":
+                drawingRef.current = { lastX: x, lastY: y, startX: x, startY: y };
+                return;
+            case "stamp":
+                session.addStamp(stamp, stampSize, x, y);
+                return;
+            case "eraser":
+                drawingRef.current = { lastX: x, lastY: y, startX: x, startY: y };
+                erase(x, y);
+                return;
+        }
+    }
+    function handlePointerMove(event) {
+        const drawing = drawingRef.current;
+        if (!drawing) {
+            const { x, y } = toBoard(event);
+            shareCursor(x, y);
+            return;
+        }
+        const events = typeof event.nativeEvent.getCoalescedEvents === "function" ? event.nativeEvent.getCoalescedEvents() : [];
+        for (const sample of events.length > 0 ? events : [event]) {
+            const { x, y } = toBoard(sample);
+            if (tool.kind === "pen" && drawing.strokeId) {
+                if (Math.hypot(x - drawing.lastX, y - drawing.lastY) >= MIN_POINT_DISTANCE) {
+                    session.extendStroke(drawing.strokeId, x, y);
+                    drawing.lastX = x;
+                    drawing.lastY = y;
+                }
+            }
+            else if (tool.kind === "eraser") {
+                erase(x, y);
+            }
+            else if (tool.kind === "stencil") {
+                previewRef.current = { kind: "shape", id: "preview", epoch: 0, shape, color, size, x1: drawing.startX, y1: drawing.startY, x2: x, y2: y };
+                drawing.lastX = x;
+                drawing.lastY = y;
+                scheduleDraw();
+            }
+        }
+        // Mid-stroke the stroke itself shows everyone where the pen is; anything else moves the pointer.
+        if (tool.kind !== "pen") {
+            const { x, y } = toBoard(event);
+            shareCursor(x, y);
+        }
+    }
+    function handlePointerUp() {
+        const drawing = drawingRef.current;
+        drawingRef.current = null;
+        if (!drawing) {
+            return;
+        }
+        if (tool.kind === "pen") {
+            session.endStroke();
+        }
+        else if (tool.kind === "stencil") {
+            previewRef.current = null;
+            if (Math.hypot(drawing.lastX - drawing.startX, drawing.lastY - drawing.startY) >= MIN_SHAPE_SIZE) {
+                session.addShape(shape, color, size, drawing.startX, drawing.startY, drawing.lastX, drawing.lastY);
+            }
+            scheduleDraw();
+        }
+    }
+    const cursor = tool.kind === "eraser" ? "cursor-cell" : tool.kind === "stamp" ? "cursor-copy" : "cursor-crosshair";
+    return (_jsxs("section", { "aria-label": "Whiteboard", className: "h-full flex flex-col gap-2", "data-testid": "whiteboard", children: [_jsxs("div", { role: "toolbar", "aria-label": "Whiteboard tools", className: "relative shrink-0 flex flex-wrap items-center gap-1 rounded-2xl bg-[#2b2d30] px-2 py-1.5 text-white", children: [PEN_TYPES.map((pen) => (_jsx("button", { type: "button", className: TOOL_BUTTON, "aria-label": PEN_LABELS[pen], title: PEN_LABELS[pen], "aria-pressed": tool.kind === "pen" && tool.pen === pen, onClick: () => setTool({ kind: "pen", pen }), children: _jsx(PenSample, { pen: pen }) }, pen))), _jsx("button", { type: "button", className: TOOL_BUTTON, "aria-label": "Stencil", title: "Stencil", "aria-pressed": tool.kind === "stencil", onClick: () => setTool({ kind: "stencil" }), children: _jsx(ShapeSample, { shape: shape }) }), _jsx("button", { type: "button", className: TOOL_BUTTON, "aria-label": "Stamp", title: "Stamp", "aria-pressed": tool.kind === "stamp", onClick: () => {
+                            setTool({ kind: "stamp" });
+                            setPopover((prev) => (prev === "stamps" ? null : "stamps"));
+                        }, children: _jsx("span", { className: "text-lg leading-none", children: stamp }) }), _jsx("button", { type: "button", className: TOOL_BUTTON, "aria-label": "Eraser", title: "Eraser", "aria-pressed": tool.kind === "eraser", onClick: () => setTool({ kind: "eraser" }), children: _jsx(EraserIcon, {}) }), _jsx("span", { className: "mx-1 h-6 w-px bg-white/15", "aria-hidden": "true" }), tool.kind === "stencil" && (_jsx("div", { role: "group", "aria-label": "Stencil shape", className: "flex items-center gap-0.5", children: STENCIL_SHAPES.map((candidate) => (_jsx("button", { type: "button", className: TOOL_BUTTON, "aria-label": SHAPE_LABELS[candidate], title: SHAPE_LABELS[candidate], "aria-pressed": shape === candidate, onClick: () => setShape(candidate), children: _jsx(ShapeSample, { shape: candidate }) }, candidate))) })), (tool.kind === "pen" || tool.kind === "stencil") && (_jsx("div", { role: "group", "aria-label": "Size", className: "flex items-center gap-0.5", children: SIZES.map((candidate, index) => (_jsx("button", { type: "button", className: TOOL_BUTTON, "aria-label": `Size ${index + 1}`, "aria-pressed": sizeIndex === index, onClick: () => setSizeIndex(index), children: _jsx("span", { className: "rounded-full bg-current", style: { width: 3 + index * 3, height: 3 + index * 3 } }) }, candidate))) })), tool.kind === "stamp" && (_jsx("div", { role: "group", "aria-label": "Stamp size", className: "flex items-center gap-0.5", children: STAMP_SIZES.map((candidate, index) => (_jsx("button", { type: "button", className: TOOL_BUTTON, "aria-label": `Stamp size ${index + 1}`, "aria-pressed": stampSizeIndex === index, onClick: () => setStampSizeIndex(index), children: _jsx("span", { style: { fontSize: 9 + index * 4 }, children: stamp }) }, candidate))) })), tool.kind !== "eraser" && tool.kind !== "stamp" && (_jsxs(_Fragment, { children: [_jsx("span", { className: "mx-1 h-6 w-px bg-white/15", "aria-hidden": "true" }), _jsxs("div", { role: "radiogroup", "aria-label": "Color", className: "flex flex-wrap items-center gap-1", children: [SWATCHES.map((swatch) => (_jsx("button", { type: "button", role: "radio", "aria-checked": color === swatch, "aria-label": `Color ${swatch}`, className: `w-6 h-6 rounded-full border border-white/30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 ${color === swatch ? "ring-2 ring-[#a8c7fa] ring-offset-2 ring-offset-[#2b2d30]" : ""}`, style: { backgroundColor: swatch }, onClick: () => setColor(swatch) }, swatch))), _jsx("button", { type: "button", "aria-label": "Custom color", "aria-expanded": popover === "wheel", title: "Custom color", className: `w-6 h-6 rounded-full p-[3px] bg-[conic-gradient(red,yellow,lime,cyan,blue,magenta,red)] focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 ${SWATCHES.includes(color) ? "" : "ring-2 ring-[#a8c7fa] ring-offset-2 ring-offset-[#2b2d30]"}`, onClick: () => setPopover((prev) => (prev === "wheel" ? null : "wheel")), children: _jsx("span", { className: "block w-full h-full rounded-full border border-black/30", style: { backgroundColor: color } }) })] })] })), _jsx("span", { className: "flex-1" }), _jsx("button", { type: "button", className: `${TOOL_BUTTON} disabled:opacity-40 disabled:cursor-not-allowed`, "aria-label": "Undo", title: "Undo (Ctrl+Z)", disabled: !canDraw, onClick: () => session.undo(), children: _jsx(UndoIcon, {}) }), confirmClear ? (_jsxs("span", { className: "flex items-center gap-1 text-sm", role: "group", "aria-label": "Clear the whiteboard?", children: [_jsx("span", { children: "Clear for everyone?" }), _jsx("button", { type: "button", className: "px-2 py-1 rounded-lg bg-[#d93025] hover:bg-[#b3261e] focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", onClick: () => {
+                                    session.clear();
+                                    setConfirmClear(false);
+                                }, children: "Clear" }), _jsx("button", { type: "button", className: "px-2 py-1 rounded-lg hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", onClick: () => setConfirmClear(false), children: "Cancel" })] })) : (_jsx("button", { type: "button", className: `${TOOL_BUTTON} disabled:opacity-40 disabled:cursor-not-allowed`, "aria-label": "Clear whiteboard", title: "Clear whiteboard", disabled: !canDraw, onClick: () => setConfirmClear(true), children: _jsx(ClearIcon, {}) })), _jsx("button", { type: "button", className: "ml-1 px-3 h-9 rounded-lg bg-[#3c4043] hover:bg-[#4b4f53] text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", onClick: onClose, children: "Back to video" }), popover === "wheel" && (_jsx("div", { role: "dialog", "aria-label": "Custom color", className: "absolute z-20 top-full mt-2 right-2 p-3 rounded-2xl bg-[#2b2d30] shadow-xl", children: _jsx(ColorWheel, { color: color, onChange: setColor }) })), popover === "stamps" && (_jsx("div", { role: "dialog", "aria-label": "Stamps", className: "absolute z-20 top-full mt-2 left-2 grid grid-cols-8 gap-1 p-2 rounded-2xl bg-[#2b2d30] shadow-xl", children: STAMPS.map((candidate) => (_jsx("button", { type: "button", "aria-label": `Stamp ${candidate}`, "aria-pressed": stamp === candidate, className: "w-10 h-10 rounded-lg text-2xl hover:bg-white/10 aria-pressed:bg-white/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", onClick: () => {
+                                setStamp(candidate);
+                                setPopover(null);
+                            }, children: candidate }, candidate))) }))] }), _jsxs("div", { ref: stageRef, className: "relative flex-1 min-h-0 flex items-center justify-center", children: [_jsx("canvas", { ref: canvasRef, width: Math.max(1, Math.round(box.width * ratio)), height: Math.max(1, Math.round(box.height * ratio)), style: { width: box.width, height: box.height }, className: `rounded-lg shadow-lg touch-none bg-white ${canDraw ? cursor : "cursor-not-allowed"}`, "aria-label": "Whiteboard canvas", role: "img", "data-testid": "whiteboard-canvas", onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerUp, onPointerLeave: () => session.hideCursor() }), _jsx("div", { className: "pointer-events-none absolute overflow-hidden", style: { width: box.width, height: box.height }, "aria-hidden": "true", children: cursors.map((remote) => (_jsx(CursorMarker, { cursor: remote, left: (remote.x / BOARD_WIDTH) * box.width, top: (remote.y / BOARD_HEIGHT) * box.height }, remote.peer))) }), !canDraw && (_jsxs("p", { role: "status", className: "absolute top-2 left-1/2 -translate-x-1/2 rounded-full bg-[#a8c7fa] px-3 py-1 text-sm font-medium text-[#062e6f] shadow", children: ["\uD83C\uDF99\uFE0F ", drawLockedTo ? `Only ${drawLockedTo} can draw while the talking stick is on` : "Nobody can draw until the host hands out the talking stick"] }))] })] }));
+}

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

@@ -25,3 +25,15 @@ export declare const OverflowIcon: () => React.JSX.Element;
  * strokes rather than a filled Material path, same "simple primitives, not a recalled path" reasoning as
  * `BatonIcon`. */
 export declare const RemoveIcon: () => React.JSX.Element;
+/** A speech bubble - the in-call chat. Drawn from primitives, same reasoning as `BatonIcon`. */
+export declare const ChatIcon: () => React.JSX.Element;
+/** An easel board with a squiggle on it - the shared whiteboard. */
+export declare const WhiteboardIcon: () => React.JSX.Element;
+/** The letters "GIF" in a rounded box - the chat's GIF picker. */
+export declare const GifIcon: () => React.JSX.Element;
+export declare const SendIcon: () => React.JSX.Element;
+export declare const UndoIcon: () => React.JSX.Element;
+/** A slanted eraser block. */
+export declare const EraserIcon: () => React.JSX.Element;
+/** A trash can - clearing the whole whiteboard. */
+export declare const ClearIcon: () => React.JSX.Element;

package/dist/apps/meet/_icons.js

@@ -26,3 +26,15 @@ export const OverflowIcon = () => _jsx(Icon, { path: "M6 10c-1.1 0-2 .9-2 2s.9 2
  * strokes rather than a filled Material path, same "simple primitives, not a recalled path" reasoning as
  * `BatonIcon`. */
 export const RemoveIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", className: "w-6 h-6", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", focusable: "false", children: [_jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" }), _jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" })] }));
+/** A speech bubble - the in-call chat. Drawn from primitives, same reasoning as `BatonIcon`. */
+export const ChatIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", className: "w-6 h-6", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: [_jsx("path", { d: "M4 5h16v11H9l-5 4V5z" }), _jsx("line", { x1: "8", y1: "9.5", x2: "16", y2: "9.5", strokeLinecap: "round" }), _jsx("line", { x1: "8", y1: "12.5", x2: "13", y2: "12.5", strokeLinecap: "round" })] }));
+/** An easel board with a squiggle on it - the shared whiteboard. */
+export const WhiteboardIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", className: "w-6 h-6", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: [_jsx("rect", { x: "3", y: "4", width: "18", height: "12", rx: "1" }), _jsx("path", { d: "M7 12c1.5-3 3-3 4 0s2.5 3 4-1" }), _jsx("line", { x1: "12", y1: "16", x2: "9", y2: "21" }), _jsx("line", { x1: "12", y1: "16", x2: "15", y2: "21" })] }));
+/** The letters "GIF" in a rounded box - the chat's GIF picker. */
+export const GifIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", className: "w-6 h-6", "aria-hidden": "true", focusable: "false", children: [_jsx("rect", { x: "2.5", y: "5.5", width: "19", height: "13", rx: "2.5", fill: "none", stroke: "currentColor", strokeWidth: "1.8" }), _jsx("text", { x: "12", y: "15.2", textAnchor: "middle", fontSize: "7.5", fontWeight: "700", fontFamily: "system-ui, sans-serif", fill: "currentColor", children: "GIF" })] }));
+export const SendIcon = () => _jsx(Icon, { path: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z", className: "w-5 h-5" });
+export const UndoIcon = () => _jsx(Icon, { path: "M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z", className: "w-5 h-5" });
+/** A slanted eraser block. */
+export const EraserIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", className: "w-5 h-5", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round", strokeLinecap: "round", "aria-hidden": "true", focusable: "false", children: [_jsx("path", { d: "M14 4l6 6-9 9H6l-3-3z" }), _jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" }), _jsx("line", { x1: "11", y1: "19", x2: "21", y2: "19" })] }));
+/** A trash can - clearing the whole whiteboard. */
+export const ClearIcon = () => _jsx(Icon, { path: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z", className: "w-5 h-5" });

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

@@ -32,10 +32,10 @@ export interface PublicVideoMeeting {
  * Mirrors `BaseVideoMeetingRoute.ts`'s `VideoMeetingJoinResult`. `authenticated: true` means the visiting browser
  * already held a valid session for a real RapidMX identity when it called `join()` - `token`/`expiresAt` are then
  * omitted entirely (there is no guest token to hand over), and the caller (`[token].tsx`) must not write any
- * cookie of its own before connecting to `/push`: the browser's own already-existing `jwt` session cookie already
- * authenticates it there, with zero new client-side auth handling. `authenticated: false` (the common anonymous
- * case) is unchanged from Phase 1: `token`/`expiresAt` are present, and `GuestSignalingClient` applies `token` as a
- * cookie before connecting.
+ * cookie of its own before opening the signaling socket: the browser's own already-existing `jwt` session cookie
+ * already authenticates it there, with zero new client-side auth handling. `authenticated: false` (the common
+ * anonymous case) is unchanged from Phase 1: `token`/`expiresAt` are present, and `SignalingClient` applies `token` as
+ * a cookie before connecting.
  */
 export interface VideoMeetingJoinResult {
     meeting: PublicVideoMeeting;
@@ -44,7 +44,8 @@ export interface VideoMeetingJoinResult {
     /** The identity to identify as on the signaling channel/mesh - the caller's own real uid when `authenticated`
      * is `true`, otherwise a freshly minted synthetic `guest:<random>` uid. Always present. */
     selfUid: string;
-    /** A short-lived guest JWT, usable against `/push`. Present only when `authenticated` is `false`. */
+    /** A short-lived guest JWT, usable against the meeting's signaling and relay sockets. Present only when
+     * `authenticated` is `false`. */
     token?: string;
     /** ISO 8601 instant `token` expires at. Present only when `authenticated` is `false`. */
     expiresAt?: string;
@@ -133,8 +134,8 @@ export declare function denyParticipant(meetingUid: string, uid: string): Promis
 export declare function setWaitingRoomEnabled(meetingUid: string, waitingRoomEnabled: boolean): Promise<void>;
 /** Removes a participant from the meeting - host only, enforced server-side with the caller's own authenticated
  * session (the same mailbox-ACL check every other owner-side video-meeting route uses), not by anything the
- * client claims. Revokes `uid`'s grant on the meeting's own push channel, so they can no longer signal or relay
- * media even if their client ignores the cooperative "kicked" signal a host's UI sends alongside this
+ * client claims. Revokes `uid`'s grant on the meeting and closes every signaling socket they hold in it, so they can
+ * no longer signal or relay media even if their client ignores the cooperative "kicked" signal a host's UI sends alongside this
  * (`MeshConnectionManager.sendKick()`). `uid` is the participant's real account uid (`MeshParticipant.uid` minus
  * its tab-scoped suffix - see `_CallView.tsx`'s `accountUidOf()`), not their tab-scoped peer id. */
 export declare function kickParticipant(meetingUid: string, uid: string): Promise<void>;

package/dist/apps/meet/_meetApi.js

@@ -86,8 +86,8 @@ export function setWaitingRoomEnabled(meetingUid, waitingRoomEnabled) {
 }
 /** Removes a participant from the meeting - host only, enforced server-side with the caller's own authenticated
  * session (the same mailbox-ACL check every other owner-side video-meeting route uses), not by anything the
- * client claims. Revokes `uid`'s grant on the meeting's own push channel, so they can no longer signal or relay
- * media even if their client ignores the cooperative "kicked" signal a host's UI sends alongside this
+ * client claims. Revokes `uid`'s grant on the meeting and closes every signaling socket they hold in it, so they can
+ * no longer signal or relay media even if their client ignores the cooperative "kicked" signal a host's UI sends alongside this
  * (`MeshConnectionManager.sendKick()`). `uid` is the participant's real account uid (`MeshParticipant.uid` minus
  * its tab-scoped suffix - see `_CallView.tsx`'s `accountUidOf()`), not their tab-scoped peer id. */
 export function kickParticipant(meetingUid, uid) {