@rapidmx/meet-plugin 0.6.0 → 0.8.1

package/dist/apps/meet/_EffectsPanel.js

@@ -0,0 +1,60 @@
+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 picker for the video filters (`apps/shared/media/filters/`): a background, a colour effect and a face accessory,
+ * each one of a short list, chosen independently so they combine. Shared by the lobby (on the page's light theme) and
+ * the in-call control bar (on its dark one) - `tone` picks the colours, nothing else differs.
+ *
+ * The background can also be a picture from the participant's own device: choosing "Custom image" with none picked yet
+ * opens the file picker, and once one is picked "Change image" is offered beside the options. The picture is read and
+ * kept in the browser (`filters/backgroundImage.ts`) - it is never uploaded.
+ */
+import { useRef, useState } from "react";
+import { ACCESSORY_OPTIONS, BACKGROUND_OPTIONS, EFFECT_OPTIONS, } from "../shared/media/filters/filterTypes.js";
+const CHIP = "flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm transition-colors focus:outline-none focus-visible:ring-2";
+const TONES = {
+    light: {
+        idle: "border border-border bg-surface text-text hover:bg-surface-alt",
+        selected: "border border-primary bg-surface-alt text-text font-semibold",
+        muted: "text-text-muted",
+        ring: "focus-visible:ring-primary",
+        link: "text-primary",
+    },
+    dark: {
+        idle: "bg-[#3c4043] text-white hover:bg-[#4b4f53]",
+        selected: "bg-[#a8c7fa] text-[#062e6f] hover:bg-[#8ab4f8]",
+        muted: "text-white/70",
+        ring: "focus-visible:ring-white/80",
+        link: "text-[#8ab4f8]",
+    },
+};
+export default function EffectsPanel({ media, tone }) {
+    const colors = TONES[tone];
+    const fileInput = useRef(null);
+    const [fileError, setFileError] = useState(null);
+    const { filters, filterStatus } = media;
+    function group(key, label, options, onChoose) {
+        return (_jsxs("div", { role: "group", "aria-label": label, className: "mt-3 first:mt-0", children: [_jsx("p", { className: `text-xs font-semibold uppercase tracking-wide mb-1.5 ${colors.muted}`, children: label }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: options.map((option) => (_jsxs("button", { type: "button", className: `${CHIP} ${colors.ring} ${filters[key] === option.id ? colors.selected : colors.idle}`, "aria-pressed": filters[key] === option.id, onClick: () => onChoose(option.id), children: [_jsx("span", { "aria-hidden": "true", children: option.emoji }), option.label] }, option.id))) })] }));
+    }
+    async function handleFile(event) {
+        const input = event.target;
+        const file = input.files?.[0];
+        // Cleared so picking the same file again still counts as a change.
+        input.value = "";
+        if (file) {
+            setFileError(await media.chooseBackgroundImage(file));
+        }
+    }
+    function chooseBackground(id) {
+        setFileError(null);
+        if (id === "image" && !media.hasBackgroundImage) {
+            fileInput.current?.click();
+            return;
+        }
+        media.setFilters({ background: id });
+    }
+    return (_jsxs("div", { children: [group("background", "Background", BACKGROUND_OPTIONS, chooseBackground), media.hasBackgroundImage && (_jsx("button", { type: "button", className: `mt-1.5 text-sm underline ${colors.link} focus:outline-none focus-visible:ring-2 ${colors.ring}`, onClick: () => fileInput.current?.click(), children: "Change image" })), _jsx("input", { ref: fileInput, type: "file", accept: "image/*", className: "hidden", "aria-label": "Background image", onChange: handleFile }), fileError && (_jsx("p", { role: "alert", className: "mt-1.5 text-sm text-[#d93025]", children: fileError })), group("effect", "Look", EFFECT_OPTIONS, (id) => media.setFilters({ effect: id })), group("accessory", "Fun", ACCESSORY_OPTIONS, (id) => media.setFilters({ accessory: id })), filterStatus.loading && (_jsx("p", { role: "status", className: `mt-3 text-sm ${colors.muted}`, children: "Loading effects\u2026" })), filterStatus.error && (_jsx("p", { role: "alert", className: "mt-3 text-sm text-[#d93025]", children: filterStatus.error })), !media.cameraOn && _jsx("p", { className: `mt-3 text-sm ${colors.muted}`, children: "Turn on your camera to see effects." })] }));
+}

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

@@ -2,7 +2,7 @@
  * 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";
+import { Branding } from "@rapidmx/web-client/lib/branding/brandingApi.js";
 export declare function MeetPageShell({ branding, children }: PropsWithChildren<{
     branding: Branding | null;
 }>): React.JSX.Element;

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

@@ -4,11 +4,19 @@
  * the page (`[token].tsx`) rather than by this component - the tracks previewed here are the tracks the call sends,
  * so leaving the lobby for the call must not (and does not) stop them.
  *
+ * The "Effects" section opens the video filter picker (`_EffectsPanel.tsx`), so the participant sees themselves with
+ * a blurred or replaced background, or a fun accessory, before anyone else does. What they chose last time is
+ * already applied when the lobby opens (`useLocalMedia()` remembers it).
+ *
  * Access is requested when the lobby opens, and again from the "Allow" / "Try again" button: a click is a user
  * gesture, which some browsers require before they will show a permission prompt at all. When access is refused, or
  * there is no camera or microphone, the lobby says so and why, and joining is still allowed - a participant with
  * nothing to send can still see and hear the call, and turn a camera or microphone on later from the call controls.
  *
+ * The preview is mirrored, like a real mirror, so it feels natural - except with a custom background image, a fixed
+ * picture rather than a live reflection: mirroring it would show it backwards to no one but the participant
+ * themselves (see `_ParticipantTile.tsx`'s doc comment, which the in-call tile follows for the same reason).
+ *
  * 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).

package/dist/apps/meet/_MeetLobby.js

@@ -9,20 +9,30 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * the page (`[token].tsx`) rather than by this component - the tracks previewed here are the tracks the call sends,
  * so leaving the lobby for the call must not (and does not) stop them.
  *
+ * The "Effects" section opens the video filter picker (`_EffectsPanel.tsx`), so the participant sees themselves with
+ * a blurred or replaced background, or a fun accessory, before anyone else does. What they chose last time is
+ * already applied when the lobby opens (`useLocalMedia()` remembers it).
+ *
  * Access is requested when the lobby opens, and again from the "Allow" / "Try again" button: a click is a user
  * gesture, which some browsers require before they will show a permission prompt at all. When access is refused, or
  * there is no camera or microphone, the lobby says so and why, and joining is still allowed - a participant with
  * nothing to send can still see and hear the call, and turn a camera or microphone on later from the call controls.
  *
+ * The preview is mirrored, like a real mirror, so it feels natural - except with a custom background image, a fixed
+ * picture rather than a live reflection: mirroring it would show it backwards to no one but the participant
+ * themselves (see `_ParticipantTile.tsx`'s doc comment, which the in-call tile follows for the same reason).
+ *
  * 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).
  */
 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 Alert from "@rapidmx/web-client/lib/components/feedback/Alert.js";
+import Button from "@rapidmx/web-client/lib/components/buttons/Button.js";
+import FormField from "@rapidmx/web-client/lib/components/forms/FormField.js";
 import { LevelBars } from "./_CallControls.js";
+import EffectsPanel from "./_EffectsPanel.js";
+import { filtersActive } from "../shared/media/filters/filterTypes.js";
 import { MicIcon, MicOffIcon, VideoIcon, VideoOffIcon } from "./_icons.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";
 const ROUND_BUTTON = "flex items-center justify-center gap-1.5 h-12 min-w-12 px-3 rounded-full transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80";
@@ -50,6 +60,7 @@ function previewMessage(media) {
 }
 export default function MeetLobby({ meeting, media, initialName, onJoin }) {
     const [name, setName] = useState(initialName ?? "");
+    const [showEffects, setShowEffects] = useState(false);
     const videoRef = useRef(null);
     const { requestAccess } = media;
     // Asks once, when the lobby opens - see this module's doc comment for the button that asks again.
@@ -66,5 +77,5 @@ export default function MeetLobby({ meeting, media, initialName, onJoin }) {
     const cameraOk = media.status.video === "live" || media.status.video === "off";
     const needsAccess = media.supported && !media.requesting && (media.status.audio !== "live" || !cameraOk);
     const nothingToSend = !media.audioTrack && !media.videoTrack && !media.requesting;
-    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: [_jsxs("div", { className: "relative aspect-video bg-[#202124] rounded-lg overflow-hidden flex items-center justify-center", children: [media.videoStream ? (_jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, className: "w-full h-full object-cover [transform:scaleX(-1)]" })) : (_jsx("p", { className: "px-4 text-center text-white/70 text-sm", children: previewMessage(media) })), _jsxs("div", { className: "absolute bottom-3 inset-x-0 flex justify-center gap-3", children: [_jsxs("button", { type: "button", className: `${ROUND_BUTTON} ${media.micOn ? "bg-[#3c4043] text-white hover:bg-[#4b4f53]" : "bg-[#f9dedc] text-[#8c1d18] hover:bg-[#f2c4c0]"}`, "aria-label": media.micOn ? "Mute microphone" : "Unmute microphone", "aria-pressed": !media.micOn, onClick: () => void media.toggleMic(), children: [media.micOn && _jsx(LevelBars, { level: media.audioLevel }), media.micOn ? _jsx(MicIcon, {}) : _jsx(MicOffIcon, {})] }), _jsx("button", { type: "button", className: `${ROUND_BUTTON} ${media.cameraOn ? "bg-[#3c4043] text-white hover:bg-[#4b4f53]" : "bg-[#f9dedc] text-[#8c1d18] hover:bg-[#f2c4c0]"}`, "aria-label": media.cameraOn ? "Turn off camera" : "Turn on camera", "aria-pressed": !media.cameraOn, onClick: () => void media.toggleCamera(), children: media.cameraOn ? _jsx(VideoIcon, {}) : _jsx(VideoOffIcon, {}) })] })] }), !media.supported && (_jsx(Alert, { children: "This browser (or this page's connection) doesn't support camera/microphone access. Try a current browser over HTTPS - a link opened inside another app often needs to be opened in the browser itself." })), media.error && _jsx(Alert, { children: media.error.message }), needsAccess && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto mt-3", onClick: () => void requestAccess(), children: media.error ? "Try again" : "Allow camera and microphone" })), nothingToSend && _jsx("p", { className: "text-sm text-text-muted mt-3", children: "You'll join without a camera or microphone." }), media.devices.cameras.length > 1 && (_jsxs("label", { className: "block text-sm mt-3", children: ["Camera", _jsxs("select", { className: `${INPUT_CLASS} mt-1`, value: media.selectedDeviceIds.video ?? "", onChange: (e) => void media.selectDevice("video", e.target.value), children: [!media.selectedDeviceIds.video && _jsx("option", { value: "", children: "Choose a camera" }), media.devices.cameras.map((d, i) => (_jsx("option", { value: d.deviceId, children: d.label || `Camera ${i + 1}` }, d.deviceId)))] })] })), media.devices.microphones.length > 1 && (_jsxs("label", { className: "block text-sm mt-3", children: ["Microphone", _jsxs("select", { className: `${INPUT_CLASS} mt-1`, value: media.selectedDeviceIds.audio ?? "", onChange: (e) => void media.selectDevice("audio", e.target.value), children: [!media.selectedDeviceIds.audio && _jsx("option", { value: "", children: "Choose a microphone" }), media.devices.microphones.map((d, i) => (_jsx("option", { value: d.deviceId, children: d.label || `Microphone ${i + 1}` }, 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: () => onJoin(name.trim()), children: "Join meeting" })] })] })] }));
+    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: [_jsxs("div", { className: "relative aspect-video bg-[#202124] rounded-lg overflow-hidden flex items-center justify-center", children: [media.videoStream ? (_jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, className: `w-full h-full object-cover ${media.filters.background !== "image" ? "[transform:scaleX(-1)]" : ""}` })) : (_jsx("p", { className: "px-4 text-center text-white/70 text-sm", children: previewMessage(media) })), _jsxs("div", { className: "absolute bottom-3 inset-x-0 flex justify-center gap-3", children: [_jsxs("button", { type: "button", className: `${ROUND_BUTTON} ${media.micOn ? "bg-[#3c4043] text-white hover:bg-[#4b4f53]" : "bg-[#f9dedc] text-[#8c1d18] hover:bg-[#f2c4c0]"}`, "aria-label": media.micOn ? "Mute microphone" : "Unmute microphone", "aria-pressed": !media.micOn, onClick: () => void media.toggleMic(), children: [media.micOn && _jsx(LevelBars, { level: media.audioLevel }), media.micOn ? _jsx(MicIcon, {}) : _jsx(MicOffIcon, {})] }), _jsx("button", { type: "button", className: `${ROUND_BUTTON} ${media.cameraOn ? "bg-[#3c4043] text-white hover:bg-[#4b4f53]" : "bg-[#f9dedc] text-[#8c1d18] hover:bg-[#f2c4c0]"}`, "aria-label": media.cameraOn ? "Turn off camera" : "Turn on camera", "aria-pressed": !media.cameraOn, onClick: () => void media.toggleCamera(), children: media.cameraOn ? _jsx(VideoIcon, {}) : _jsx(VideoOffIcon, {}) })] })] }), !media.supported && (_jsx(Alert, { children: "This browser (or this page's connection) doesn't support camera/microphone access. Try a current browser over HTTPS - a link opened inside another app often needs to be opened in the browser itself." })), media.error && _jsx(Alert, { children: media.error.message }), needsAccess && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto mt-3", onClick: () => void requestAccess(), children: media.error ? "Try again" : "Allow camera and microphone" })), nothingToSend && _jsx("p", { className: "text-sm text-text-muted mt-3", children: "You'll join without a camera or microphone." }), media.devices.cameras.length > 1 && (_jsxs("label", { className: "block text-sm mt-3", children: ["Camera", _jsxs("select", { className: `${INPUT_CLASS} mt-1`, value: media.selectedDeviceIds.video ?? "", onChange: (e) => void media.selectDevice("video", e.target.value), children: [!media.selectedDeviceIds.video && _jsx("option", { value: "", children: "Choose a camera" }), media.devices.cameras.map((d, i) => (_jsx("option", { value: d.deviceId, children: d.label || `Camera ${i + 1}` }, d.deviceId)))] })] })), _jsxs("div", { className: "mt-3", children: [_jsx("button", { type: "button", className: "text-sm text-primary underline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary", "aria-expanded": showEffects, onClick: () => setShowEffects((shown) => !shown), children: filtersActive(media.filters) ? "Effects (on)" : "Effects" }), showEffects && (_jsx("div", { className: "mt-2", children: _jsx(EffectsPanel, { media: media, tone: "light" }) }))] }), media.devices.microphones.length > 1 && (_jsxs("label", { className: "block text-sm mt-3", children: ["Microphone", _jsxs("select", { className: `${INPUT_CLASS} mt-1`, value: media.selectedDeviceIds.audio ?? "", onChange: (e) => void media.selectDevice("audio", e.target.value), children: [!media.selectedDeviceIds.audio && _jsx("option", { value: "", children: "Choose a microphone" }), media.devices.microphones.map((d, i) => (_jsx("option", { value: d.deviceId, children: d.label || `Microphone ${i + 1}` }, 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: () => onJoin(name.trim()), children: "Join meeting" })] })] })] }));
 }

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

@@ -4,8 +4,15 @@
  *
  * A tile never plays sound: its `<video>` is always muted, and what a participant says is played by the call view's
  * own `<audio>` elements (`_CallView.tsx`'s `RemoteAudio`), so a tile that isn't showing video - or isn't on screen
- * in the current layout - can never silence anyone. */
+ * in the current layout - can never silence anyone.
+ *
+ * The local tile is shown mirrored (`scaleX(-1)`), like a real mirror, so a participant's own movements feel
+ * natural - this is a local display transform only, never applied to the video actually sent to anyone, so
+ * everyone else always sees the participant the right way round. `mirrored={false}` (`_CallView.tsx`, when a custom
+ * background image is on) turns that off: the picture the participant chose is a fixed reference, not a live
+ * reflection, and mirroring it would show it backwards to no one but themselves. */
 import React from "react";
+import type { MediaTransport } from "../shared/webrtc/types.js";
 export interface ParticipantTileProps {
     name: string;
     stream?: MediaStream | null;
@@ -14,11 +21,19 @@ export interface ParticipantTileProps {
     cameraOff?: boolean;
     micMuted?: boolean;
     handRaised?: boolean;
+    /** How this participant's media reaches you - a badge is shown for everything but a direct or still-connecting one. */
+    transport?: MediaTransport;
+    /** Says the connection is still being made, e.g. "Connecting..." on the local tile and "Awaiting connection..." on a
+     * participant's - shown with a spinner until the caller clears it. */
+    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. */
     contain?: boolean;
+    /** Whether the local tile is shown mirrored, like a real mirror - ignored for a remote tile, which is never
+     * mirrored. Default `true`; see this module's doc comment. */
+    mirrored?: boolean;
     onClick?: () => void;
     className?: string;
 }
-export default function ParticipantTile({ name, stream, isLocal, cameraOff, micMuted, handRaised, isFocused, contain, onClick, className, }: ParticipantTileProps): React.JSX.Element;
+export default function ParticipantTile({ name, stream, isLocal, cameraOff, micMuted, handRaised, transport, status, isFocused, contain, mirrored, onClick, className, }: ParticipantTileProps): React.JSX.Element;

package/dist/apps/meet/_ParticipantTile.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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
@@ -9,13 +9,36 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * A tile never plays sound: its `<video>` is always muted, and what a participant says is played by the call view's
  * own `<audio>` elements (`_CallView.tsx`'s `RemoteAudio`), so a tile that isn't showing video - or isn't on screen
- * in the current layout - can never silence anyone. */
+ * in the current layout - can never silence anyone.
+ *
+ * The local tile is shown mirrored (`scaleX(-1)`), like a real mirror, so a participant's own movements feel
+ * natural - this is a local display transform only, never applied to the video actually sent to anyone, so
+ * everyone else always sees the participant the right way round. `mirrored={false}` (`_CallView.tsx`, when a custom
+ * background image is on) turns that off: the picture the participant chose is a fixed reference, not a live
+ * reflection, and mirroring it would show it backwards to no one but themselves. */
 import { useEffect, useRef } from "react";
 import { MicOffIcon } from "./_icons.js";
+/** What a tile says about how its participant's media is arriving, for the paths that are not the ordinary direct one
+ * (which needs no comment). Text rather than only an icon, so the reason a picture is degraded is never a guess. */
+const TRANSPORT_BADGES = {
+    turn: { label: "Relayed", title: "Connected through the relay server, because a direct connection was not possible." },
+    websocket: {
+        label: "Server relay",
+        title: "Sent through the server as a last resort, because no other connection was possible. Video is lower quality and sound may lag.",
+    },
+    failed: { label: "Can't connect", title: "This participant could not be reached from your network." },
+};
+/** A short line saying the connection is still being made, with a spinner - a polite live region (not `role="status"`,
+ * which the call view's own announcement region already is), so a participant who cannot see the tile still learns
+ * why nothing is happening yet. */
+function StatusPill({ status, className }) {
+    return (_jsxs("span", { "aria-live": "polite", "data-testid": "tile-status", className: `flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-black/60 text-white text-xs ${className ?? ""}`, children: [_jsx("span", { className: "inline-block w-3 h-3 rounded-full border-2 border-white/30 border-t-white animate-spin", "aria-hidden": "true" }), status] }));
+}
 function initialOf(name) {
     return (Array.from(name.trim())[0] ?? "?").toUpperCase();
 }
-export default function ParticipantTile({ name, stream, isLocal, cameraOff, micMuted, handRaised, isFocused, contain, onClick, className, }) {
+export default function ParticipantTile({ name, stream, isLocal, cameraOff, micMuted, handRaised, transport, status, isFocused, contain, mirrored = true, onClick, className, }) {
+    const badge = transport ? TRANSPORT_BADGES[transport] : undefined;
     const videoRef = useRef(null);
     const showVideo = !!stream && !cameraOff;
     // The `<video>` element only exists while `showVideo`, so its stream is bound whenever it (re)appears too.
@@ -24,5 +47,5 @@ export default function ParticipantTile({ name, stream, isLocal, cameraOff, micM
             videoRef.current.srcObject = stream ?? null;
         }
     }, [stream, showVideo]);
-    return (_jsxs("div", { className: `relative overflow-hidden rounded-xl bg-[#3c4043] flex items-center justify-center min-h-[90px] ${isFocused ? "ring-2 ring-[#8ab4f8]" : ""} ${className ?? ""}`, onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, "aria-label": onClick ? `${name}${isLocal ? " (you)" : ""}` : undefined, children: [showVideo ? (_jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, className: `w-full h-full ${contain ? "object-contain bg-black" : "object-cover"} ${isLocal && !contain ? "[transform:scaleX(-1)]" : ""}` })) : (_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) })), handRaised && (_jsx("span", { className: "absolute top-2 left-2 flex items-center justify-center w-8 h-8 rounded-full bg-[#a8c7fa] text-base", role: "img", "aria-label": "Hand raised", children: "\u270B" })), micMuted && (_jsx("span", { className: "absolute top-2 right-2 flex items-center justify-center w-7 h-7 rounded-full bg-black/60 text-white", role: "img", "aria-label": "Muted", children: _jsx("span", { className: "w-4 h-4 [&>svg]:w-4 [&>svg]:h-4", children: _jsx(MicOffIcon, {}) }) })), _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)" : ""] })] }));
+    return (_jsxs("div", { className: `relative overflow-hidden rounded-xl bg-[#3c4043] flex items-center justify-center min-h-[90px] ${isFocused ? "ring-2 ring-[#8ab4f8]" : ""} ${className ?? ""}`, onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, "aria-label": onClick ? `${name}${isLocal ? " (you)" : ""}` : undefined, children: [showVideo ? (_jsxs(_Fragment, { children: [_jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, className: `w-full h-full ${contain ? "object-contain bg-black" : "object-cover"} ${isLocal && !contain && mirrored ? "[transform:scaleX(-1)]" : ""}` }), status && _jsx(StatusPill, { status: status, className: "absolute top-2 left-1/2 -translate-x-1/2 whitespace-nowrap" })] })) : (_jsxs("div", { className: "flex flex-col items-center gap-2 max-w-full px-1", children: [_jsx("div", { className: "w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center text-2xl font-bold", "aria-hidden": "true", children: initialOf(name) }), status && _jsx(StatusPill, { status: status })] })), handRaised && (_jsx("span", { className: "absolute top-2 left-2 flex items-center justify-center w-8 h-8 rounded-full bg-[#a8c7fa] text-base", role: "img", "aria-label": "Hand raised", children: "\u270B" })), micMuted && (_jsx("span", { className: "absolute top-2 right-2 flex items-center justify-center w-7 h-7 rounded-full bg-black/60 text-white", role: "img", "aria-label": "Muted", children: _jsx("span", { className: "w-4 h-4 [&>svg]:w-4 [&>svg]:h-4", children: _jsx(MicOffIcon, {}) }) })), badge && (_jsx("span", { className: `absolute bottom-2 right-2 px-2 py-0.5 rounded text-xs ${transport === "failed" ? "bg-[#601410] text-[#f9dedc]" : "bg-black/60 text-white"}`, title: badge.title, "data-testid": "transport-badge", children: badge.label })), _jsxs("div", { className: "absolute bottom-2 left-2 max-w-[calc(100%-1rem)] truncate px-2 py-0.5 rounded bg-black/60 text-white text-sm", children: [name, isLocal ? " (you)" : ""] })] }));
 }

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

@@ -13,3 +13,4 @@ export declare const LeaveIcon: () => React.JSX.Element;
 export declare const ChevronUpIcon: () => React.JSX.Element;
 /** A raised hand, as an emoji glyph - Material's own "back hand" path isn't among the ones bundled here. */
 export declare const HandIcon: () => React.JSX.Element;
+export declare const EffectsIcon: () => React.JSX.Element;

package/dist/apps/meet/_icons.js

@@ -14,3 +14,4 @@ export const LeaveIcon = () => (_jsx(Icon, { path: "M12 9c-1.6 0-3.15.25-4.6.72v
 export const ChevronUpIcon = () => _jsx(Icon, { path: "M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z", className: "w-5 h-5" });
 /** A raised hand, as an emoji glyph - Material's own "back hand" path isn't among the ones bundled here. */
 export const HandIcon = () => (_jsx("span", { className: "text-xl leading-none", "aria-hidden": "true", children: "\u270B" }));
+export const EffectsIcon = () => (_jsx(Icon, { path: "M19 9l1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25L19 9zm-7.5.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25L19 15z" }));

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

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from "react";
-import { Branding } from "@rapidmx/react-shared/branding/brandingApi.js";
+import { Branding } from "@rapidmx/web-client/lib/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

package/dist/apps/meet/_layout.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CUSTOM_STYLESHEET_LINK_ID } from "@rapidmx/react-shared/branding/useBranding.js";
+import { CUSTOM_STYLESHEET_LINK_ID } from "@rapidmx/web-client/lib/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";

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

@@ -35,6 +35,12 @@ export interface VideoMeetingJoinResult {
     token?: string;
     /** ISO 8601 instant `token` expires at. Present only when `authenticated` is `false`. */
     expiresAt?: string;
+    /** Whether the server offers the WebSocket media relay - the last-resort path for a participant neither a direct
+     * connection nor the TURN server can reach. Absent from a server that predates it, which reads as off. */
+    relayEnabled?: boolean;
+    /** The base URL the video filters' machine-learning runtime and models are hosted under, when the administrator
+     * hosts them (`mail:videoconf:effects:assets_url`). Absent means the public CDN defaults. */
+    effectsAssetsUrl?: 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

package/dist/apps/meet/_meetApi.js

@@ -9,7 +9,7 @@
  * 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";
+import { apiFetch } from "@rapidmx/web-client/lib/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

package/dist/apps/meet/index.js

@@ -1,6 +1,6 @@
 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 useBranding from "@rapidmx/web-client/lib/branding/useBranding.js";
+import Alert from "@rapidmx/web-client/lib/components/feedback/Alert.js";
 import { MeetCard, MeetPageShell } from "./_MeetChrome.js";
 export default function NoMeetingTokenPage() {
     const { branding } = useBranding();

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { VideoMeetingDetail } from "@rapidmx/react-shared/videoconf/videoMeetingsApi.js";
+import { VideoMeetingDetail } from "@rapidmx/web-client/lib/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 {

package/dist/apps/settings-video-conferencing/_PersonalRoomCard.js

@@ -4,10 +4,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useState } from "react";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { createVideoMeeting, updateVideoMeeting } from "@rapidmx/react-shared/videoconf/videoMeetingsApi.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { ApiRequestError } from "@rapidmx/web-client/lib/util/api.js";
+import { createVideoMeeting, updateVideoMeeting } from "@rapidmx/web-client/lib/videoconf/videoMeetingsApi.js";
+import Alert from "@rapidmx/web-client/lib/components/feedback/Alert.js";
+import Button from "@rapidmx/web-client/lib/components/buttons/Button.js";
 const INPUT_CLASS = "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 /** The title a freshly created personal room starts with - editable afterward like any other meeting's title. */
 export const PERSONAL_ROOM_TITLE = "Personal Meeting Room";

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

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from "react";
-import { Branding } from "@rapidmx/react-shared/branding/brandingApi.js";
+import { Branding } from "@rapidmx/web-client/lib/branding/brandingApi.js";
 export interface LayoutProps {
     /**
      * Supplied by the server's `WwwRoute` `fetchProps()`, which every `www` plugin app's route extends. This file

package/dist/apps/settings-video-conferencing/_layout.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CUSTOM_STYLESHEET_LINK_ID } from "@rapidmx/react-shared/branding/useBranding.js";
+import { CUSTOM_STYLESHEET_LINK_ID } from "@rapidmx/web-client/lib/branding/useBranding.js";
 export default function Layout({ children, branding }) {
     const title = branding?.title || branding?.companyName ? `${branding?.title || branding?.companyName}: Mail` : "RapidMX: Mail";
     const iconHref = branding?.iconUrl || branding?.logoUrl || "/images/logo.svg";

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { VideoMeetingDetail } from "@rapidmx/react-shared/videoconf/videoMeetingsApi.js";
+import { VideoMeetingDetail } from "@rapidmx/web-client/lib/videoconf/videoMeetingsApi.js";
 import { SettingsShellProps } from "@rapidmx/web-client/shared/components/settings/layout/SettingsShell.js";
 export type SettingsVideoConferencingPageProps = Omit<SettingsShellProps, "active">;
 export default function SettingsVideoConferencingPage(props: SettingsVideoConferencingPageProps): React.JSX.Element;

package/dist/apps/settings-video-conferencing/index.js

@@ -4,10 +4,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useState } from "react";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { listVideoMeetings, updateVideoMeeting } from "@rapidmx/react-shared/videoconf/videoMeetingsApi.js";
+import { ApiRequestError } from "@rapidmx/web-client/lib/util/api.js";
+import { listVideoMeetings, updateVideoMeeting } from "@rapidmx/web-client/lib/videoconf/videoMeetingsApi.js";
 import SettingsShell, { useSettingsShell } from "@rapidmx/web-client/shared/components/settings/layout/SettingsShell.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Alert from "@rapidmx/web-client/lib/components/feedback/Alert.js";
 import PersonalRoomCard from "./_PersonalRoomCard.js";
 /** However many of a mailbox's meetings this page ever needs to see at once - generous enough that a real user's
  * whole history fits in one request (this is a personal settings page, not a paged archive), matching

package/dist/apps/shared/media/filters/VideoFilterProcessor.d.ts

@@ -0,0 +1,78 @@
+import { type VideoFilters } from "./filterTypes.js";
+import { type FaceTracker, type PersonSegmenter } from "./mlModels.js";
+/** A picture to show behind the participant. */
+export interface BackgroundPicture {
+    source: CanvasImageSource;
+    width: number;
+    height: number;
+}
+export interface FilterStatus {
+    /** A model the current filters need is still downloading. */
+    loading: boolean;
+    /** Why a filter isn't fully working, ready to show - `null` when all is well. */
+    error: string | null;
+}
+export interface ProcessorDeps {
+    createCanvas(): HTMLCanvasElement;
+    createVideo(): HTMLVideoElement;
+    createSegmenter(assetsUrl?: string): Promise<PersonSegmenter>;
+    createFaceTracker(assetsUrl?: string): Promise<FaceTracker>;
+    now(): number;
+}
+export interface VideoFilterProcessorOptions {
+    /** The camera's track. The processor only reads it - stopping it stays with whoever owns it. */
+    source: MediaStreamTrack;
+    filters: VideoFilters;
+    backgroundImage?: BackgroundPicture | null;
+    /** Where the models are hosted, when not on the default CDN - see `mlModels.ts`. */
+    assetsUrl?: string;
+    onStatus?: (status: FilterStatus) => void;
+    frameRate?: number;
+    deps?: Partial<ProcessorDeps>;
+}
+export declare class VideoFilterProcessor {
+    /** The filtered video - what to send in place of the camera's track. */
+    readonly track: MediaStreamTrack;
+    private readonly deps;
+    private readonly assetsUrl?;
+    private readonly onStatus?;
+    private readonly interval;
+    private readonly video;
+    private readonly canvas;
+    private readonly ctx;
+    private readonly layers;
+    private filters;
+    private backgroundImage;
+    private stopped;
+    private timer;
+    private segmenter;
+    private segmenterState;
+    private faceTracker;
+    private faceState;
+    private lastFace;
+    private framesWithoutFace;
+    private lastMask;
+    private segmentTicks;
+    private faceTicks;
+    private maskImage;
+    private renderFailed;
+    private status;
+    constructor(options: VideoFilterProcessorOptions);
+    /** Changes the filters (and the background picture) without interrupting the video. Also retries a model that failed
+     * to load, so choosing a filter again is a retry. */
+    update(filters: VideoFilters, backgroundImage: BackgroundPicture | null): void;
+    stop(): void;
+    private syncModels;
+    private publishStatus;
+    private tick;
+    /** A scratch canvas of the given size, kept between frames. */
+    private layer;
+    private render;
+    /** The background, then - once the segmentation model is ready - the participant on top of it. */
+    private drawBackground;
+    private segment;
+    private applyEffect;
+    private paintAccessory;
+    /** The face's landmarks for this frame - the last known ones for a few frames after it is lost. */
+    private trackFace;
+}