@rapidmx/meet-plugin 0.1.0

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

@@ -0,0 +1,41 @@
+/**
+ * The in-call view: connects the full-mesh `MeshConnectionManager` to the meeting's signaling channel
+ * (`GuestSignalingClient`), mirrors its events into React state, and renders the grid/focused/presentation
+ * layouts - see `apps/shared/webrtc/MeshConnectionManager.ts`'s doc comment for the who-calls-whom and
+ * single-presenter rules this view relies on rather than re-deciding. These reusable, non-UI modules live under
+ * `apps/shared/` rather than this plugin's backend `src/` - `tsconfig.apps.json` builds `apps/` as its own
+ * program rooted at `apps/`, which cannot reference files outside it (`TS6059`), matching `booking-plugin`'s own
+ * identical `apps/shared/` convention for reusable frontend-only code.
+ *
+ * ## Layout precedence
+ *
+ * `computeMainUid()` decides who is shown large, in this order: an active presenter always wins (presentation
+ * mode, forcing a focused-like layout regardless of `viewMode`); otherwise a manually pinned participant; else the
+ * auto-detected active speaker (silently ignored while presenting, so it never fights the presenter for the main
+ * slot); else, in focus mode with nobody yet speaking, the first other participant - so focus mode never shows an
+ * empty main slot once someone else has joined.
+ */
+import React from "react";
+export interface CallViewProps {
+    channel: string;
+    /** Omitted when the caller already authenticated as a real RapidMX identity in `join()` - there is then no
+     * guest token to hand `GuestSignalingClient`, which relies entirely on the browser's own already-existing
+     * `jwt` session cookie instead (see its own doc comment). */
+    token?: string;
+    selfUid: string;
+    selfName: string;
+    iceServers: RTCIceServer[];
+    initialStream: MediaStream;
+    initialMicOn: boolean;
+    initialCameraOn: boolean;
+    onLeave: () => void;
+}
+/** Who is shown large - see this module's doc comment. `undefined` when nobody but the local participant has
+ * joined yet (the grid/focus toggle still works, there's just nobody else to focus on). */
+export declare function computeMainUid(options: {
+    presenterUid?: string;
+    pinnedUid?: string;
+    activeSpeakerUid?: string;
+    otherUids: readonly string[];
+}): string | undefined;
+export default function CallView({ channel, token, selfUid, selfName, iceServers, initialStream, initialMicOn, initialCameraOn, onLeave, }: CallViewProps): React.JSX.Element;

package/dist/apps/meet/_CallView.js

@@ -0,0 +1,225 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz. All rights reserved.
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * The in-call view: connects the full-mesh `MeshConnectionManager` to the meeting's signaling channel
+ * (`GuestSignalingClient`), mirrors its events into React state, and renders the grid/focused/presentation
+ * layouts - see `apps/shared/webrtc/MeshConnectionManager.ts`'s doc comment for the who-calls-whom and
+ * single-presenter rules this view relies on rather than re-deciding. These reusable, non-UI modules live under
+ * `apps/shared/` rather than this plugin's backend `src/` - `tsconfig.apps.json` builds `apps/` as its own
+ * program rooted at `apps/`, which cannot reference files outside it (`TS6059`), matching `booking-plugin`'s own
+ * identical `apps/shared/` convention for reusable frontend-only code.
+ *
+ * ## Layout precedence
+ *
+ * `computeMainUid()` decides who is shown large, in this order: an active presenter always wins (presentation
+ * mode, forcing a focused-like layout regardless of `viewMode`); otherwise a manually pinned participant; else the
+ * auto-detected active speaker (silently ignored while presenting, so it never fights the presenter for the main
+ * slot); else, in focus mode with nobody yet speaking, the first other participant - so focus mode never shows an
+ * empty main slot once someone else has joined.
+ */
+import { useEffect, useRef, useState } from "react";
+import { pickActiveSpeaker } from "../shared/media/activeSpeaker.js";
+import { startLevelMeter } from "../shared/media/levelMeter.js";
+import { requestDisplayMedia, setTracksEnabled, stopStream } from "../shared/media/deviceMedia.js";
+import { createBrowserPeerConnection } from "../shared/webrtc/realPeerConnection.js";
+import { MeshConnectionManager } from "../shared/webrtc/MeshConnectionManager.js";
+import { GuestSignalingClient } from "../shared/push/GuestSignalingClient.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import CallControls from "./_CallControls.js";
+import ParticipantTile from "./_ParticipantTile.js";
+/** Who is shown large - see this module's doc comment. `undefined` when nobody but the local participant has
+ * joined yet (the grid/focus toggle still works, there's just nobody else to focus on). */
+export function computeMainUid(options) {
+    if (options.presenterUid) {
+        return options.presenterUid;
+    }
+    if (options.pinnedUid) {
+        return options.pinnedUid;
+    }
+    if (options.activeSpeakerUid) {
+        return options.activeSpeakerUid;
+    }
+    return options.otherUids[0];
+}
+export default function CallView({ channel, token, selfUid, selfName, iceServers, initialStream, initialMicOn, initialCameraOn, onLeave, }) {
+    const [connectError, setConnectError] = useState(null);
+    const [participants, setParticipants] = useState([]);
+    const [remoteStreams, setRemoteStreams] = useState({});
+    const [levels, setLevels] = useState({});
+    const [presenterUid, setPresenterUid] = useState(undefined);
+    const [micOn, setMicOn] = useState(initialMicOn);
+    const [cameraOn, setCameraOn] = useState(initialCameraOn);
+    const [isPresenting, setIsPresenting] = useState(false);
+    const [viewMode, setViewMode] = useState("grid");
+    const [pinnedUid, setPinnedUid] = useState(undefined);
+    const [activeSpeakerUid, setActiveSpeakerUid] = useState(undefined);
+    const managerRef = useRef(null);
+    const clientRef = useRef(null);
+    const localStreamRef = useRef(initialStream);
+    const screenStreamRef = useRef(null);
+    const cameraTrackRef = useRef(initialStream.getVideoTracks()[0] ?? null);
+    const levelMetersRef = useRef({});
+    const isPresentingRef = useRef(false);
+    useEffect(() => {
+        let cancelled = false;
+        const client = new GuestSignalingClient({ channel, token });
+        clientRef.current = client;
+        const manager = new MeshConnectionManager({
+            selfUid,
+            selfName,
+            iceServers,
+            channel: client,
+            createPeerConnection: createBrowserPeerConnection,
+            localStream: localStreamRef.current,
+        });
+        managerRef.current = manager;
+        const unsubscribe = manager.onEvent((event) => {
+            switch (event.type) {
+                case "participant-joined":
+                    setParticipants((prev) => [...prev.filter((p) => p.uid !== event.participant.uid), event.participant]);
+                    return;
+                case "participant-left":
+                    setParticipants((prev) => prev.filter((p) => p.uid !== event.uid));
+                    setRemoteStreams((prev) => {
+                        const { [event.uid]: _removed, ...rest } = prev;
+                        return rest;
+                    });
+                    stopLevelMeter(levelMetersRef, event.uid);
+                    setLevels((prev) => {
+                        const { [event.uid]: _removed, ...rest } = prev;
+                        return rest;
+                    });
+                    setPinnedUid((prev) => (prev === event.uid ? undefined : prev));
+                    return;
+                case "remote-stream":
+                    setRemoteStreams((prev) => ({ ...prev, [event.uid]: event.stream }));
+                    startTrackingLevel(levelMetersRef, event.uid, event.stream, (level) => setLevels((prev) => ({ ...prev, [event.uid]: level })));
+                    return;
+                case "presenter-changed":
+                    setPresenterUid(event.uid);
+                    if (event.uid !== selfUid && isPresentingRef.current) {
+                        // Lost a presenter-claim collision (see `MeshConnectionManager`'s doc comment) - stop our
+                        // own capture without re-sending a release the manager already handled internally.
+                        stopLocalPresentation(false);
+                    }
+                    return;
+            }
+        });
+        client
+            .connect()
+            .then(() => {
+            if (!cancelled) {
+                manager.start();
+            }
+        })
+            .catch((err) => {
+            if (!cancelled) {
+                setConnectError(err.message);
+            }
+        });
+        return () => {
+            cancelled = true;
+            unsubscribe();
+            manager.stop();
+            client.close();
+            for (const handle of Object.values(levelMetersRef.current)) {
+                handle.stop();
+            }
+            levelMetersRef.current = {};
+            stopStream(localStreamRef.current);
+            stopStream(screenStreamRef.current);
+        };
+        // Deliberately runs once - the call's identity (channel/token/selfUid) never changes for the life of this
+        // component; a real identity change is a new call, which unmounts/remounts this view from `[token].tsx`.
+    }, []);
+    useEffect(() => {
+        if (!presenterUid) {
+            setActiveSpeakerUid((prev) => pickActiveSpeaker(levels, prev));
+        }
+    }, [levels, presenterUid]);
+    function stopLocalPresentation(alsoRelease) {
+        isPresentingRef.current = false;
+        setIsPresenting(false);
+        if (alsoRelease) {
+            managerRef.current?.releasePresenter();
+        }
+        stopStream(screenStreamRef.current);
+        screenStreamRef.current = null;
+        // Restores the camera track as the outgoing video sender - its own `enabled` flag (toggled by
+        // `handleToggleCamera`, untouched by presenting) already governs whether it actually sends frames, so
+        // this is correct whether or not the camera happens to be off right now.
+        managerRef.current?.replaceLocalVideoTrack(cameraTrackRef.current);
+    }
+    async function handleToggleShare() {
+        if (isPresenting) {
+            stopLocalPresentation(true);
+            return;
+        }
+        const result = await requestDisplayMedia();
+        if (!result.ok) {
+            setConnectError(result.error.message);
+            return;
+        }
+        const claimed = managerRef.current?.claimPresenter() ?? false;
+        if (!claimed) {
+            stopStream(result.value);
+            return;
+        }
+        screenStreamRef.current = result.value;
+        const [screenTrack] = result.value.getVideoTracks();
+        managerRef.current?.replaceLocalVideoTrack(screenTrack);
+        isPresentingRef.current = true;
+        setIsPresenting(true);
+        screenTrack.onended = () => stopLocalPresentation(true);
+    }
+    function handleToggleMic() {
+        setMicOn((prev) => {
+            const next = !prev;
+            setTracksEnabled(localStreamRef.current, "audio", next);
+            return next;
+        });
+    }
+    function handleToggleCamera() {
+        setCameraOn((prev) => {
+            const next = !prev;
+            // Just the track's own `enabled` flag (see `deviceMedia.ts`'s `setTracksEnabled()` doc comment) -
+            // whether that track is actually the one being sent (camera) or has been swapped out for a screen
+            // share (`replaceLocalVideoTrack()`) is an orthogonal concern this toggle never touches.
+            setTracksEnabled(localStreamRef.current, "video", next);
+            return next;
+        });
+    }
+    function handleLeave() {
+        onLeave();
+    }
+    function togglePin(uid) {
+        setPinnedUid((prev) => (prev === uid ? undefined : uid));
+    }
+    const otherUids = participants.map((p) => p.uid);
+    const showFocusLayout = !!presenterUid || viewMode === "focus";
+    const mainUid = showFocusLayout ? computeMainUid({ presenterUid, pinnedUid, activeSpeakerUid, otherUids }) : undefined;
+    const presenterName = presenterUid ? (presenterUid === selfUid ? selfName : (participants.find((p) => p.uid === presenterUid)?.name ?? "Someone")) : undefined;
+    const localTile = (_jsx(ParticipantTile, { name: selfName, stream: isPresenting ? null : localStreamRef.current, isLocal: true, cameraOff: !cameraOn && !isPresenting, micMuted: !micOn, isFocused: mainUid === selfUid, onClick: () => togglePin(selfUid) }, "__self"));
+    const remoteTiles = participants.map((p) => (_jsx(ParticipantTile, { name: p.name, stream: remoteStreams[p.uid] ?? null, cameraOff: !remoteStreams[p.uid], isFocused: mainUid === p.uid, onClick: () => togglePin(p.uid) }, p.uid)));
+    const allTiles = [localTile, ...remoteTiles];
+    // The presenter's own screen content is rendered from their local capture, not their (replaced) outgoing
+    // video sender - `mainStream` picks whichever is right for `mainUid`.
+    const mainStream = mainUid === selfUid ? (isPresenting ? screenStreamRef.current : localStreamRef.current) : mainUid ? (remoteStreams[mainUid] ?? null) : null;
+    const mainName = mainUid === selfUid ? selfName : (participants.find((p) => p.uid === mainUid)?.name ?? "");
+    const thumbnailTiles = showFocusLayout ? allTiles.filter((tile) => tile.key !== (mainUid === selfUid ? "__self" : mainUid)) : allTiles;
+    return (_jsxs("div", { className: "min-h-screen flex flex-col bg-surface-alt", children: [connectError && _jsx(Alert, { children: connectError }), _jsx("div", { className: "flex-1 p-3 flex flex-col gap-3 min-h-0", children: showFocusLayout && mainUid ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex-1 min-h-0", children: _jsx(ParticipantTile, { name: mainName, stream: mainStream, isLocal: mainUid === selfUid, isFocused: true, className: "h-full" }) }), _jsx("div", { className: "flex gap-2 overflow-x-auto h-24 shrink-0", children: thumbnailTiles.map((tile) => (_jsx("div", { className: "w-32 shrink-0", children: tile }, tile.key))) })] })) : (_jsx("div", { className: "flex-1 grid gap-2 [grid-template-columns:repeat(auto-fit,minmax(180px,1fr))]", children: allTiles })) }), _jsx(CallControls, { micOn: micOn, onToggleMic: handleToggleMic, cameraOn: cameraOn, onToggleCamera: handleToggleCamera, isPresenting: isPresenting, presentingElsewhereName: presenterUid && presenterUid !== selfUid ? presenterName : undefined, onToggleShare: handleToggleShare, viewMode: viewMode, onToggleViewMode: () => setViewMode((prev) => (prev === "grid" ? "focus" : "grid")), onLeave: handleLeave })] }));
+}
+function stopLevelMeter(ref, uid) {
+    ref.current[uid]?.stop();
+    delete ref.current[uid];
+}
+function startTrackingLevel(ref, uid, stream, onLevel) {
+    stopLevelMeter(ref, uid);
+    const handle = startLevelMeter(stream, onLevel);
+    if (handle) {
+        ref.current[uid] = handle;
+    }
+}

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

@@ -0,0 +1,13 @@
+/** The frame shared by every page in this app: the deployment's branding header/footer around a centered card, the
+ * same `booking-plugin`'s `_BookingChrome.tsx` shell-component pattern this plugin's Phase 2 spec calls for. Not a
+ * page itself: `_`-prefixed files in `apps/` aren't routed. */
+import React, { PropsWithChildren } from "react";
+import { Branding } from "@rapidmx/react-shared/branding/brandingApi.js";
+export declare function MeetPageShell({ branding, children }: PropsWithChildren<{
+    branding: Branding | null;
+}>): React.JSX.Element;
+/** The white card the lobby (and the "meeting not found" state) is drawn in - the in-call view (`_CallView.tsx`)
+ * deliberately does NOT use this: a video call wants the full viewport, not a centered card. */
+export declare function MeetCard({ maxWidth, children }: PropsWithChildren<{
+    maxWidth?: string;
+}>): React.JSX.Element;

package/dist/apps/meet/_MeetChrome.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BrandingFooter, BrandingHeader } from "@rapidmx/web-client/shared/components/layout/BrandingChrome.js";
+export function MeetPageShell({ branding, children }) {
+    return (_jsxs("div", { className: "min-h-screen flex flex-col", children: [_jsx(BrandingHeader, { branding: branding }), _jsx("main", { className: "flex-1 bg-surface-alt px-4 py-6 sm:py-10", children: children }), _jsx(BrandingFooter, { branding: branding })] }));
+}
+/** The white card the lobby (and the "meeting not found" state) is drawn in - the in-call view (`_CallView.tsx`)
+ * deliberately does NOT use this: a video call wants the full viewport, not a centered card. */
+export function MeetCard({ maxWidth = "max-w-2xl", children }) {
+    return (_jsx("div", { className: `mx-auto w-full ${maxWidth} overflow-hidden rounded-lg border border-border bg-surface shadow-sm p-6 sm:p-10`, children: children }));
+}

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

@@ -0,0 +1,29 @@
+/**
+ * The join/lobby step: name entry, device preview and pickers, mute/camera-off starting preferences, and the
+ * "Join" button. Per this plugin's Phase 2 spec, the name field is always editable - it is only ever *prefilled*
+ * when a session is genuinely known (see this component's `initialName` prop and `[token].tsx`'s own doc comment
+ * on why that never actually happens on this page today).
+ *
+ * Device support/permission errors (`navigator.mediaDevices` missing entirely - e.g. a non-HTTPS context in some
+ * browsers - a denied prompt, or no camera/microphone at all) are shown as a plain message rather than crashing;
+ * joining is still allowed with no local media in that case (a signaling-only participant - see this plugin's
+ * Phase 2 report's known-limitations note on why that participant's peer connections can carry no media at all
+ * without this design's simpler, renegotiation-free mesh needing to grow one).
+ */
+import React from "react";
+import type { PublicVideoMeeting } from "./_meetApi.js";
+export interface JoinPreferences {
+    name: string;
+    micOn: boolean;
+    cameraOn: boolean;
+    /** Never `null` - an empty `MediaStream` when no device access was ever obtained, so the call view always has
+     * a stream to work with. */
+    stream: MediaStream;
+}
+export interface MeetLobbyProps {
+    meeting: PublicVideoMeeting;
+    /** Prefilled from `Profile.givenName` when a session was detected - still always editable. */
+    initialName?: string;
+    onJoin: (preferences: JoinPreferences) => void;
+}
+export default function MeetLobby({ meeting, initialName, onJoin }: MeetLobbyProps): React.JSX.Element;

package/dist/apps/meet/_MeetLobby.js

@@ -0,0 +1,120 @@
+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 join/lobby step: name entry, device preview and pickers, mute/camera-off starting preferences, and the
+ * "Join" button. Per this plugin's Phase 2 spec, the name field is always editable - it is only ever *prefilled*
+ * when a session is genuinely known (see this component's `initialName` prop and `[token].tsx`'s own doc comment
+ * on why that never actually happens on this page today).
+ *
+ * Device support/permission errors (`navigator.mediaDevices` missing entirely - e.g. a non-HTTPS context in some
+ * browsers - a denied prompt, or no camera/microphone at all) are shown as a plain message rather than crashing;
+ * joining is still allowed with no local media in that case (a signaling-only participant - see this plugin's
+ * Phase 2 report's known-limitations note on why that participant's peer connections can carry no media at all
+ * without this design's simpler, renegotiation-free mesh needing to grow one).
+ */
+import { useEffect, useRef, useState } from "react";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
+import { isMediaDevicesSupported, listDevices, requestUserMedia, setTracksEnabled, stopStream, } from "../shared/media/deviceMedia.js";
+const INPUT_CLASS = "w-full text-base py-2.5 px-3.5 border border-border rounded-md bg-surface text-text focus:outline-none focus:border-primary";
+export default function MeetLobby({ meeting, initialName, onJoin }) {
+    const [name, setName] = useState(initialName ?? "");
+    const [micOn, setMicOn] = useState(true);
+    const [cameraOn, setCameraOn] = useState(true);
+    const [stream, setStream] = useState(null);
+    const [devices, setDevices] = useState({ cameras: [], microphones: [] });
+    const [error, setError] = useState(null);
+    const [supported, setSupported] = useState(true);
+    const videoRef = useRef(null);
+    // Requests device access once, on mount - never re-requested just because `micOn`/`cameraOn` toggle (those
+    // toggles disable/enable the already-granted tracks instead, see `handleToggleMic`/`handleToggleCamera`).
+    useEffect(() => {
+        let cancelled = false;
+        if (!isMediaDevicesSupported()) {
+            setSupported(false);
+            return;
+        }
+        void requestUserMedia({ audio: true, video: true }).then(async (result) => {
+            if (cancelled) {
+                return;
+            }
+            if (!result.ok) {
+                setError(result.error);
+                return;
+            }
+            setStream(result.value);
+            const list = await listDevices();
+            if (!cancelled && list.ok) {
+                setDevices(list.value);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+        // Intentionally empty deps - see this effect's own comment on why this never re-runs.
+    }, []);
+    // Releases the camera/microphone the moment this component unmounts (leaving the lobby without joining, or
+    // transitioning into the call - `[token].tsx` requests its own continuation of these tracks first).
+    useEffect(() => stopOnUnmount(stream), [stream]);
+    useEffect(() => {
+        if (videoRef.current) {
+            videoRef.current.srcObject = stream;
+        }
+    }, [stream]);
+    function handleToggleMic() {
+        setMicOn((prev) => {
+            const next = !prev;
+            setTracksEnabled(stream, "audio", next);
+            return next;
+        });
+    }
+    function handleToggleCamera() {
+        setCameraOn((prev) => {
+            const next = !prev;
+            setTracksEnabled(stream, "video", next);
+            return next;
+        });
+    }
+    async function handleSwitchDevice(kind, deviceId) {
+        const result = await requestUserMedia({ [kind]: { deviceId: { exact: deviceId } }, [kind === "audio" ? "video" : "audio"]: false });
+        if (!result.ok) {
+            setError(result.error);
+            return;
+        }
+        const [newTrack] = kind === "audio" ? result.value.getAudioTracks() : result.value.getVideoTracks();
+        // `stream` is always set by the time this can be called - the device picker this is wired to only ever
+        // renders once `devices` is populated, which itself only happens after an initial successful
+        // `requestUserMedia()` call has already set `stream` (see the mount effect above).
+        if (!newTrack) {
+            return;
+        }
+        const [oldTrack] = kind === "audio" ? stream.getAudioTracks() : stream.getVideoTracks();
+        if (oldTrack) {
+            stream.removeTrack(oldTrack);
+            oldTrack.stop();
+        }
+        newTrack.enabled = kind === "audio" ? micOn : cameraOn;
+        stream.addTrack(newTrack);
+        // Re-triggers the preview `<video>` binding and any downstream consumer without minting a whole new
+        // `MediaStream` object (the mesh's already-negotiated connections keep the same stream identity).
+        setStream((current) => current);
+    }
+    function handleJoin() {
+        onJoin({
+            name: name.trim(),
+            micOn,
+            cameraOn,
+            stream: stream ?? new MediaStream(),
+        });
+    }
+    return (_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: meeting.title }), meeting.hostDisplayName && _jsxs("p", { className: "text-sm text-text-muted mt-1", children: ["Hosted by ", meeting.hostDisplayName] }), _jsxs("div", { className: "mt-6 grid sm:grid-cols-2 gap-6", children: [_jsxs("div", { children: [_jsx("div", { className: "aspect-video bg-black/80 rounded-md overflow-hidden flex items-center justify-center", children: stream && cameraOn ? (_jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, className: "w-full h-full object-cover" })) : (_jsx("p", { className: "text-white/70 text-sm", children: cameraOn ? "No camera preview" : "Camera is off" })) }), _jsxs("div", { className: "flex gap-2 mt-3", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: handleToggleMic, disabled: !stream, children: micOn ? "Mute mic" : "Unmute mic" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: handleToggleCamera, disabled: !stream, children: cameraOn ? "Turn camera off" : "Turn camera on" })] }), !supported && _jsx(Alert, { children: "This browser (or this page's connection) doesn't support camera/microphone access." }), error && _jsx(Alert, { children: error.message }), devices.cameras.length > 1 && (_jsxs("label", { className: "block text-sm mt-3", children: ["Camera", _jsx("select", { className: `${INPUT_CLASS} mt-1`, onChange: (e) => handleSwitchDevice("video", e.target.value), children: devices.cameras.map((d) => (_jsx("option", { value: d.deviceId, children: d.label || "Camera" }, d.deviceId))) })] })), devices.microphones.length > 1 && (_jsxs("label", { className: "block text-sm mt-3", children: ["Microphone", _jsx("select", { className: `${INPUT_CLASS} mt-1`, onChange: (e) => handleSwitchDevice("audio", e.target.value), children: devices.microphones.map((d) => (_jsx("option", { value: d.deviceId, children: d.label || "Microphone" }, d.deviceId))) })] }))] }), _jsxs("div", { className: "flex flex-col justify-center gap-3", children: [_jsx(FormField, { label: "Your name", htmlFor: "meet-name", children: _jsx("input", { id: "meet-name", type: "text", className: INPUT_CLASS, value: name, onChange: (e) => setName(e.target.value), placeholder: "Enter your name" }) }), _jsx(Button, { type: "button", className: "!w-auto", disabled: !name.trim(), onClick: handleJoin, children: "Join meeting" })] })] })] }));
+}
+/** `useEffect` cleanup helper for stopping a lobby preview stream on unmount/replacement - a named function
+ * (rather than an inline arrow) purely so its intent reads clearly at the call site. */
+function stopOnUnmount(stream) {
+    return () => stopStream(stream);
+}

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

@@ -0,0 +1,18 @@
+/** One participant's video tile - used by both the grid and the focused/thumbnail-strip layouts in `_CallView.tsx`.
+ * Renders a placeholder (the participant's initial) instead of a `<video>` element whenever there's no stream or
+ * their camera is off, rather than showing a black/frozen frame. */
+import React from "react";
+export interface ParticipantTileProps {
+    name: string;
+    stream?: MediaStream | null;
+    /** The local participant's own tile must be `muted` (never plays back its own audio) - a real remote tile
+     * never sets this. */
+    isLocal?: boolean;
+    cameraOff?: boolean;
+    micMuted?: boolean;
+    /** Highlights this tile as the current presenter/focus. */
+    isFocused?: boolean;
+    onClick?: () => void;
+    className?: string;
+}
+export default function ParticipantTile({ name, stream, isLocal, cameraOff, micMuted, isFocused, onClick, className }: ParticipantTileProps): React.JSX.Element;

package/dist/apps/meet/_ParticipantTile.js

@@ -0,0 +1,25 @@
+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
+///////////////////////////////////////////////////////////////////////////////
+/** One participant's video tile - used by both the grid and the focused/thumbnail-strip layouts in `_CallView.tsx`.
+ * Renders a placeholder (the participant's initial) instead of a `<video>` element whenever there's no stream or
+ * their camera is off, rather than showing a black/frozen frame. */
+import { useEffect, useRef } from "react";
+function initialOf(name) {
+    return (Array.from(name.trim())[0] ?? "?").toUpperCase();
+}
+export default function ParticipantTile({ name, stream, isLocal, cameraOff, micMuted, isFocused, onClick, className }) {
+    const videoRef = useRef(null);
+    const showVideo = !!stream && !cameraOff;
+    useEffect(() => {
+        if (videoRef.current) {
+            /* v8 ignore next -- unreachable via real usage: the `<video>` element only ever renders at all when
+               `showVideo` (`!!stream && !cameraOff`) is true, so `stream` is always truthy whenever `videoRef.current`
+               is non-null here; the `?? null` exists purely to satisfy `srcObject`'s type, not for a real code path. */
+            videoRef.current.srcObject = stream ?? null;
+        }
+    }, [stream]);
+    return (_jsxs("div", { className: `relative overflow-hidden rounded-md bg-black/80 flex items-center justify-center min-h-[90px] ${isFocused ? "ring-2 ring-accent" : ""} ${className ?? ""}`, onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, children: [showVideo ? (_jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: isLocal, className: "w-full h-full object-cover" })) : (_jsx("div", { className: "w-14 h-14 rounded-full bg-primary text-white flex items-center justify-center text-xl font-bold", "aria-hidden": "true", children: initialOf(name) })), _jsxs("div", { className: "absolute bottom-1.5 left-1.5 flex items-center gap-1.5 px-2 py-0.5 rounded bg-black/60 text-white text-xs", children: [micMuted && _jsx("span", { title: "Muted", children: "(muted)" }), _jsxs("span", { children: [name, isLocal ? " (you)" : ""] })] })] }));
+}

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

@@ -0,0 +1,9 @@
+import React, { PropsWithChildren } from "react";
+import { Branding } from "@rapidmx/react-shared/branding/brandingApi.js";
+export interface LayoutProps {
+    /** Supplied by the server's public page route (`PublicPageRoute`), which every `public` plugin app's route
+     * extends - see `booking-plugin`'s `apps/book/_layout.tsx`'s identical `LayoutProps` doc comment for the
+     * mechanism this mirrors. */
+    branding?: Branding;
+}
+export default function Layout({ children, branding }: PropsWithChildren<LayoutProps>): React.JSX.Element;

package/dist/apps/meet/_layout.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CUSTOM_STYLESHEET_LINK_ID } from "@rapidmx/react-shared/branding/useBranding.js";
+export default function Layout({ children, branding }) {
+    const title = branding?.title || branding?.companyName ? `${branding?.title || branding?.companyName}: Meet` : "RapidMX: Meet";
+    const iconHref = branding?.iconUrl || branding?.logoUrl || "/images/logo.svg";
+    const stylesheetHref = branding?.stylesheetUrl;
+    return (_jsxs("html", { lang: "en", children: [_jsxs("head", { children: [_jsx("meta", { charSet: "utf-8" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }), _jsx("title", { children: title }), _jsx("link", { rel: "icon", type: "image/svg+xml", href: iconHref }), _jsx("link", { rel: "alternate icon", href: "/favicon.ico" }), stylesheetHref && _jsx("link", { rel: "stylesheet", href: stylesheetHref, id: CUSTOM_STYLESHEET_LINK_ID })] }), _jsx("body", { children: children })] }));
+}

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

@@ -0,0 +1,47 @@
+export type VideoMeetingVisibility = "private" | "public";
+export type VideoMeetingStatus = "scheduled" | "active" | "ended" | "cancelled";
+/** Mirrors `BaseVideoMeetingRoute.ts`'s `IceServerConfig` - already the exact shape `RTCPeerConnection`'s
+ * `iceServers` constructor option expects, passed straight through with no reshaping. */
+export interface IceServerConfig {
+    urls: string;
+    username?: string;
+    credential?: string;
+}
+/** Mirrors `BaseVideoMeetingRoute.ts`'s `PublicVideoMeeting`. */
+export interface PublicVideoMeeting {
+    uid: string;
+    title: string;
+    visibility: VideoMeetingVisibility;
+    status: VideoMeetingStatus;
+    hostDisplayName?: string;
+}
+/**
+ * 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.
+ */
+export interface VideoMeetingJoinResult {
+    meeting: PublicVideoMeeting;
+    iceServers: IceServerConfig[];
+    authenticated: boolean;
+    /** 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`. */
+    token?: string;
+    /** ISO 8601 instant `token` expires at. Present only when `authenticated` is `false`. */
+    expiresAt?: string;
+}
+/** Resolves a join token (an invitee's own link) or a public meeting's slug to its meeting info, ICE servers, and
+ * either a short-lived guest signaling token (the common anonymous case) or confirmation that the caller's own
+ * existing session already grants them signaling access (`authenticated: true` - see
+ * `VideoMeetingJoinResult`'s doc comment) - see `BaseVideoMeetingRoute.join()`'s own doc comment. Rejects with
+ * `ApiRequestError` (status `404`) for a stale/unknown/malformed token, cancelled meeting, or the wrong
+ * private/public token shape for what it's being used against - the caller (`[token].tsx`) shows a single,
+ * friendly "this meeting link isn't valid" state for all of those rather than trying to distinguish them, matching
+ * `BaseVideoMeetingRoute.requireMeetingByToken()`'s own explicit "never leak which almost-matched" posture. */
+export declare function joinMeeting(token: string): Promise<VideoMeetingJoinResult>;

package/dist/apps/meet/_meetApi.js

@@ -0,0 +1,23 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz. All rights reserved.
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * Typed client for this plugin's one public, unauthenticated endpoint - `GET /api/mail/video-meetings/join/:token`
+ * (`BaseVideoMeetingRoute.join()`) - mirroring `booking-plugin`'s own `apps/shared/bookingApi.ts` convention of
+ * redefining the response shape locally rather than importing it from `../../src/...`: `apps/` compiles under its
+ * own `tsconfig.apps.json` (bundler resolution, DOM-facing), independent of the backend's `tsconfig.json` (NodeNext),
+ * and every other plugin app in this codebase keeps that boundary the same way.
+ */
+import { apiFetch } from "@rapidmx/react-shared/util/api.js";
+/** Resolves a join token (an invitee's own link) or a public meeting's slug to its meeting info, ICE servers, and
+ * either a short-lived guest signaling token (the common anonymous case) or confirmation that the caller's own
+ * existing session already grants them signaling access (`authenticated: true` - see
+ * `VideoMeetingJoinResult`'s doc comment) - see `BaseVideoMeetingRoute.join()`'s own doc comment. Rejects with
+ * `ApiRequestError` (status `404`) for a stale/unknown/malformed token, cancelled meeting, or the wrong
+ * private/public token shape for what it's being used against - the caller (`[token].tsx`) shows a single,
+ * friendly "this meeting link isn't valid" state for all of those rather than trying to distinguish them, matching
+ * `BaseVideoMeetingRoute.requireMeetingByToken()`'s own explicit "never leak which almost-matched" posture. */
+export function joinMeeting(token) {
+    return apiFetch(`/mail/video-meetings/join/${encodeURIComponent(token)}`);
+}

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

@@ -0,0 +1,5 @@
+/** Reached only by a bare `/meet` visit with no token (e.g. a mistyped/incomplete link) - the real join/lobby flow
+ * lives at `apps/meet/[token].tsx`, `GET /meet/:token`. Mirrors `booking-plugin`'s identical `apps/book/index.tsx`.
+ * Replaces this plugin's Phase 1 one-line placeholder page (see `.claude/NOTES.md`). */
+import React from "react";
+export default function NoMeetingTokenPage(): React.JSX.Element;

package/dist/apps/meet/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import useBranding from "@rapidmx/react-shared/branding/useBranding.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import { MeetCard, MeetPageShell } from "./_MeetChrome.js";
+export default function NoMeetingTokenPage() {
+    const { branding } = useBranding();
+    return (_jsx(MeetPageShell, { branding: branding, children: _jsx(MeetCard, { children: _jsx(Alert, { children: "No meeting link specified." }) }) }));
+}

package/dist/apps/settings-video-conferencing/_PersonalRoomCard.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { VideoMeetingDetail } from "@rapidmx/react-shared/videoconf/videoMeetingsApi.js";
+/** The title a freshly created personal room starts with - editable afterward like any other meeting's title. */
+export declare const PERSONAL_ROOM_TITLE = "Personal Meeting Room";
+export interface PersonalRoomCardProps {
+    mailboxUid: string;
+    /** The mailbox's personal room, as `index.tsx`'s `findPersonalRoom()` identified it - `undefined` when the
+     * mailbox has none yet. See that function's own doc comment for the "oldest non-cancelled public meeting"
+     * convention this plugin uses instead of a dedicated field/route (`.claude/NOTES.md`'s Phase 4 entry). */
+    room: VideoMeetingDetail | undefined;
+    /** Called with the freshly created room (`createVideoMeeting()`'s own response, reshaped to a
+     * `VideoMeetingDetail`) so the parent's meeting list picks it up without a full reload. */
+    onCreated: (meeting: VideoMeetingDetail) => void;
+    /** Called after a successful rename, so the parent's meeting list (and this card, on its next render) show
+     * the new title without a full reload. */
+    onRenamed: (uid: string, title: string) => void;
+}
+/**
+ * The "get and manage your own persistent public link" card - see this plugin's `.claude/NOTES.md` Phase 4 entry
+ * for why a personal room is simply the mailbox's own oldest non-cancelled `PUBLIC` `VideoMeeting`, not a distinct
+ * model concept. Offers to create one when there is none, and otherwise shows its (editable) title and its
+ * shareable link, exactly as `create()`/`findById()` compute it server-side.
+ */
+export default function PersonalRoomCard({ mailboxUid, room, onCreated, onRenamed }: PersonalRoomCardProps): React.JSX.Element;