@rapidmx/meet-plugin 0.14.1 → 0.16.0

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

@@ -21,3 +21,19 @@ export declare const FlipIcon: () => React.JSX.Element;
  * needs to light up (`currentColor`) the same way every other control icon here does. */
 export declare const BatonIcon: () => React.JSX.Element;
 export declare const OverflowIcon: () => React.JSX.Element;
+/** A plain "X" - removing a participant from the call (the participants drawer's "Remove" row button). Drawn with
+ * 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

@@ -22,3 +22,19 @@ export const FlipIcon = () => (_jsx(Icon, { path: "M15 21h2v-2h-2v2zm4-12h2V7h-2
  * needs to light up (`currentColor`) the same way every other control icon here does. */
 export const BatonIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", className: "w-6 h-6", fill: "currentColor", "aria-hidden": "true", focusable: "false", children: _jsxs("g", { transform: "rotate(45 12 12)", children: [_jsx("rect", { x: "5", y: "10.5", width: "13", height: "3", rx: "1.5" }), _jsx("circle", { cx: "19", cy: "12", r: "3" })] }) }));
 export const OverflowIcon = () => _jsx(Icon, { path: "M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" });
+/** A plain "X" - removing a participant from the call (the participants drawer's "Remove" row button). Drawn with
+ * 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) {

package/dist/apps/shared/collab/CollabSession.d.ts

@@ -0,0 +1,208 @@
+/**
+ * The call's text chat and shared whiteboard, over the same signaling channel the mesh uses (`../webrtc/types.ts`'s
+ * `chat`, `whiteboard`, `collab-sync-request` and `collab-sync` messages). Like everything else in a call they live
+ * only as long as the call does - there is no server-side copy; each participant's tab holds them.
+ *
+ * ## Chat
+ *
+ * `sendChat()` broadcasts one `chat` message and shows it locally at once (the server never echoes a sender's own
+ * messages). A received one is shown under the name its sender announced in their `hello`. At most
+ * `MAX_CHAT_HISTORY` messages are kept.
+ *
+ * ## Whiteboard
+ *
+ * Every drawing action becomes a `WhiteboardOp`, applied to this tab's own `WhiteboardModel` at once and broadcast. A
+ * stroke being drawn sends its points in batches every `POINT_FLUSH_MS` rather than one message per pointer move, so
+ * the others watch it being drawn without a message per pixel. `undo()` erases this participant's own most recent
+ * element still on the board.
+ *
+ * ## Pointers
+ *
+ * While a participant's pointer is over the board, `moveCursor()` tells everyone where it is and as which tool and
+ * color, at most every `CURSOR_INTERVAL_MS`; `hideCursor()` says it left. While they are drawing a stroke, no pointer
+ * messages are sent at all - everyone else moves their pointer along the stroke's own points instead. Pointers are
+ * never stored or caught up on; one not heard from for `CURSOR_IDLE_MS` is dropped, as is a participant's on `bye`.
+ *
+ * ## Who may draw
+ *
+ * `setDrawPolicy()` limits who may change the board (talking-stick mode: only whoever holds the stick). This
+ * participant's own drawing calls then do nothing unless it is allowed, and a received change from a participant who
+ * isn't is ignored - as cooperative as every other moderation signal in the call (see `../webrtc/types.ts`): each
+ * participant's own tab decides. A change in flight when the stick moves may land on some boards and not others.
+ * Pointers still show for everyone - pointing at something isn't drawing it.
+ *
+ * ## Catching up
+ *
+ * Someone joining a call already under way asks one participant for what they missed: on the first `hello` it hears
+ * within `SYNC_WINDOW_MS` of starting (an existing participant answering its own `hello`), it sends that participant a
+ * `collab-sync-request`; the answer is the chat history and the board as ops, split into `collab-sync` parts that
+ * each fit the server's message limit and paced `SYNC_PACE_MS` apart to stay inside its rate limit. When nothing has
+ * arrived from that participant for `SYNC_TIMEOUT_MS` (first part or next), the next one is asked - as it is when the
+ * whole answer was empty, which is what another newcomer who arrived moments earlier would send. Only the participant
+ * asked is listened to, and a participant answers the same requester at most once per `SYNC_ANSWER_COOLDOWN_MS`. A catch-up is that one participant's account of the call, which this tab cannot check - the chat history it
+ * carries names who said what, and the server stamps only the catch-up's own sender - so it is merged under the same
+ * validation as live messages, and live messages win wherever the two overlap.
+ */
+import { type CursorTool, type PenType, type Stamp, type StencilShape } from "./protocol.js";
+import { WhiteboardModel } from "./WhiteboardModel.js";
+import type { SignalingChannel } from "../webrtc/types.js";
+/** How often the points of a stroke being drawn are sent. */
+export declare const POINT_FLUSH_MS = 60;
+/** How long after starting a `hello` still counts as an existing participant answering ours - see this module's doc. */
+export declare const SYNC_WINDOW_MS = 15000;
+/** How long to wait for a catch-up to start arriving before asking someone else. */
+export declare const SYNC_TIMEOUT_MS = 5000;
+/** The gap between two parts of a catch-up this participant sends. */
+export declare const SYNC_PACE_MS = 250;
+/** Room left in each catch-up part for the message's own envelope. */
+export declare const SYNC_ENVELOPE_BYTES = 1024;
+/** The most stroke points one catch-up op carries, so one op always fits the server's smallest message limit. */
+export declare const SYNC_POINTS_PER_OP = 600;
+/** The least time between two pointer messages this participant sends. */
+export declare const CURSOR_INTERVAL_MS = 80;
+/** How long a participant's pointer stays on the board without news of it. */
+export declare const CURSOR_IDLE_MS = 30000;
+/** How long a participant waits before answering the same requester's catch-up request again. */
+export declare const SYNC_ANSWER_COOLDOWN_MS = 10000;
+/** One chat message as shown. */
+export interface ChatEntry {
+    /** Unique within the call: the sender's peer id and their own message id. */
+    key: string;
+    id: string;
+    peer: string;
+    name: string;
+    text: string;
+    sentAt: number;
+    self: boolean;
+}
+/** Another participant's pointer on the board. */
+export interface RemoteCursor {
+    peer: string;
+    name: string;
+    x: number;
+    y: number;
+    tool: CursorTool;
+    color: string;
+    stamp?: Stamp;
+    /** When it last moved, by this tab's clock. */
+    at: number;
+}
+/** A `chat` event with `history` set is a message from a catch-up - said before this participant arrived; one with
+ * `renamed` set is a message already shown, now under its sender's name. Neither is news. */
+export type CollabEvent = {
+    type: "chat";
+    entry: ChatEntry;
+    history?: boolean;
+    renamed?: boolean;
+} | {
+    type: "board";
+} | {
+    type: "cursors";
+};
+/** What `CollabSession` needs from the signaling channel - `SignalingClient` is one. */
+export interface CollabChannel extends SignalingChannel {
+    /** The server's per-message limit, in bytes - `SignalingClient.maxMessageBytes`. */
+    readonly maxMessageBytes?: number;
+}
+export interface CollabSessionOptions {
+    channel: CollabChannel;
+    /** The authenticated uid every message is sent `from`. */
+    selfUid: string;
+    /** This tab's peer id - the author of its chat messages and the prefix of its board elements' ids. */
+    peerId: string;
+    selfName: string;
+    now?: () => number;
+}
+export declare class CollabSession {
+    private readonly options;
+    readonly board: WhiteboardModel;
+    private chatEntries;
+    /** How many of `chatEntries`, from the front, came from a catch-up - the next part's history goes after them. */
+    private historyCount;
+    private readonly chatKeys;
+    private readonly names;
+    private readonly listeners;
+    private readonly ownIds;
+    private readonly outgoingPoints;
+    private readonly timers;
+    private flushTimer;
+    private syncTimer;
+    private syncTarget;
+    private readonly syncTried;
+    private readonly knownPeers;
+    private unsubscribe;
+    private startedAt;
+    private seq;
+    private stopped;
+    private readonly remoteCursors;
+    private cursorPending;
+    private cursorTimer;
+    private cursorShown;
+    private lastCursorSent;
+    private pruneTimer;
+    /** The stroke this participant is drawing, between `beginStroke()` and `endStroke()`. */
+    private activeStroke;
+    private drawPolicy;
+    private readonly syncAnswered;
+    private syncReceivedAnything;
+    constructor(options: CollabSessionOptions);
+    /** Every chat message, oldest first. */
+    get chat(): readonly ChatEntry[];
+    /** Everyone else's pointers currently on the board. */
+    get cursors(): RemoteCursor[];
+    /** Whether this participant may change the board now - see this module's doc comment on who may draw. */
+    get canDraw(): boolean;
+    /** Limits who may change the board to the peers `policy` accepts; `undefined` lets everyone. */
+    setDrawPolicy(policy: ((peer: string) => boolean) | undefined): void;
+    onEvent(listener: (event: CollabEvent) => void): () => void;
+    start(): void;
+    stop(): void;
+    /** Sends `text` as a chat message. Returns `false`, sending nothing, for blank or overlong text. */
+    sendChat(text: string): boolean;
+    /** Starts a stroke at (`x`, `y`); returns its id, or `undefined` when the board is full. */
+    beginStroke(pen: PenType, color: string, size: number, x: number, y: number): string | undefined;
+    /** Adds a point to this participant's own stroke `id` - sent with the next batch. */
+    extendStroke(id: string, x: number, y: number): void;
+    /** Finishes a stroke: whatever points are still waiting go out now. */
+    endStroke(): void;
+    addShape(shape: StencilShape, color: string, size: number, x1: number, y1: number, x2: number, y2: number): string | undefined;
+    addStamp(stamp: Stamp, size: number, x: number, y: number): string | undefined;
+    /** Erases `ids` - anyone's elements, see `protocol.ts`. */
+    erase(ids: string[]): void;
+    /** Erases this participant's own most recent element still on the board; `false` when there is none. */
+    undo(): boolean;
+    /** Clears the board for everyone. */
+    clear(): void;
+    /** Says this participant's pointer is at (`x`, `y`) on the board, as `tool` in `color` (with `stamp` for the stamp
+     * tool) - sent now, or with the latest position once `CURSOR_INTERVAL_MS` has passed since the last one. */
+    moveCursor(x: number, y: number, tool: CursorTool, color: string, stamp?: Stamp): void;
+    /** Says this participant's pointer has left the board. */
+    hideCursor(): void;
+    private flushCursor;
+    private handleCursor;
+    /** Moves `sender`'s pointer to where their stroke just got to - see this module's doc comment on pointers. */
+    private followStroke;
+    private pruneCursors;
+    private mayDraw;
+    private addElement;
+    private applyAndSend;
+    private flushPoints;
+    private handleMessage;
+    private handleHello;
+    private requestSync;
+    /** Asks the next participant not yet asked, if any - after a silence or an empty answer. */
+    private askNext;
+    private armSyncTimeout;
+    private receiveSync;
+    /** Sends `peer` everything said and drawn so far - see this module's doc comment. */
+    private sendSync;
+    private mergeHistory;
+    private addChat;
+    /** Keeps the latest `MAX_CHAT_HISTORY` of `entries`. */
+    private setChat;
+    private send;
+    private emit;
+    private nextId;
+    private nextElementId;
+    private now;
+}