@ai-matrx/meet 0.7.3 → 0.7.6

package/dist/react.cjs

@@ -51,19 +51,23 @@ __export(react_exports, {
   ControlBar: () => ControlBar,
   ControlButton: () => ControlButton,
   DATA_TOPICS: () => DATA_TOPICS,
+  DEFAULT_EFFECTS: () => DEFAULT_EFFECTS,
   DEFAULT_PAGE_SIZE: () => DEFAULT_PAGE_SIZE,
   END_MEETING_NOT_SERVED: () => END_MEETING_NOT_SERVED,
   FILE_SESSION_PATH: () => FILE_SESSION_PATH,
+  FlagIcon: () => FlagIcon,
   GUEST_RECORD_ACCESS_CHOICES: () => GUEST_RECORD_ACCESS_CHOICES,
   GUEST_RECORD_ACCESS_LEVELS: () => GUEST_RECORD_ACCESS_LEVELS,
   GUEST_RECORD_ACCESS_METADATA_KEY: () => GUEST_RECORD_ACCESS_METADATA_KEY,
   GUEST_RECORD_NOT_SHARED: () => GUEST_RECORD_NOT_SHARED,
   GuestRecordAccessControl: () => GuestRecordAccessControl,
   HandIcon: () => HandIcon,
+  HostMenu: () => HostMenu,
   IDLE_MEDIA: () => IDLE_MEDIA,
   IDLE_TRACK: () => IDLE_TRACK,
   IncomingCallCard: () => IncomingCallCard,
   IncomingCallHost: () => IncomingCallHost,
+  KeyboardIcon: () => KeyboardIcon,
   LISTEN_ONLY_NOTICE: () => LISTEN_ONLY_NOTICE,
   LayoutIcon: () => LayoutIcon,
   LobbyPanel: () => LobbyPanel,
@@ -73,15 +77,20 @@ __export(react_exports, {
   MEET_ANSWER_CONTEXT_EVENT: () => MEET_ANSWER_CONTEXT_EVENT,
   MEET_ANSWER_EVENTS: () => MEET_ANSWER_EVENTS,
   MEET_EVENTS: () => MEET_EVENTS,
+  MEET_REACTIONS: () => MEET_REACTIONS,
   MEET_ROUTES: () => MEET_ROUTES,
   MEET_SCHEMA: () => MEET_SCHEMA,
+  MEET_SHORTCUTS: () => MEET_SHORTCUTS,
+  MODERATION_ACTIONS: () => MODERATION_ACTIONS,
   MeetError: () => MeetError,
   MeetProvider: () => MeetProvider,
   MeetingList: () => MeetingList,
+  MeetingOverlays: () => MeetingOverlays,
   MeetingRecordView: () => MeetingRecordView,
   MeetingRoom: () => MeetingRoom,
   MicIcon: () => MicIcon,
   MicOffIcon: () => MicOffIcon,
+  MoreIcon: () => MoreIcon,
   NOTE_TAKER_IDENTITY_PREFIX: () => NOTE_TAKER_IDENTITY_PREFIX,
   NOTE_TAKER_METADATA_KEY: () => NOTE_TAKER_METADATA_KEY,
   NO_GRANTS: () => NO_GRANTS,
@@ -89,12 +98,15 @@ __export(react_exports, {
   PARTICIPANT_CAN_RECORD_ATTRIBUTE: () => PARTICIPANT_CAN_RECORD_ATTRIBUTE,
   PARTICIPANT_ROLE_ATTRIBUTE: () => PARTICIPANT_ROLE_ATTRIBUTE,
   ParticipantTile: () => ParticipantTile,
+  PencilIcon: () => PencilIcon,
   PeopleIcon: () => PeopleIcon,
   PeoplePanel: () => PeoplePanel,
+  PersonMenu: () => PersonMenu,
   PhoneIcon: () => PhoneIcon,
   PhoneOffIcon: () => PhoneOffIcon,
   PinIcon: () => PinIcon,
   PreJoin: () => PreJoin,
+  QualityBars: () => QualityBars,
   REACTION_TTL_MS: () => REACTION_TTL_MS,
   REFUSED_ABSENCE: () => REFUSED_ABSENCE,
   ROLE_RANK: () => ROLE_RANK,
@@ -108,8 +120,15 @@ __export(react_exports, {
   RecordingPlayer: () => RecordingPlayer,
   ScheduleMeeting: () => ScheduleMeeting,
   ScreenShareIcon: () => ScreenShareIcon,
+  SearchIcon: () => SearchIcon,
   SettingsIcon: () => SettingsIcon,
+  SettingsPanel: () => SettingsPanel,
+  ShortcutsSheet: () => ShortcutsSheet,
+  SignalIcon: () => SignalIcon,
+  SmileIcon: () => SmileIcon,
   SparklesIcon: () => SparklesIcon,
+  SpeakerIcon: () => SpeakerIcon,
+  SpotlightIcon: () => SpotlightIcon,
   Stage: () => Stage,
   TABLES: () => TABLES,
   TRANSCRIPTION_ATTRIBUTES: () => TRANSCRIPTION_ATTRIBUTES,
@@ -137,6 +156,7 @@ __export(react_exports, {
   createCallCenter: () => createCallCenter,
   createCallInviteHandler: () => createCallInviteHandler,
   createDeviceManager: () => createDeviceManager,
+  createInRoomClient: () => createInRoomClient,
   createLiveKitDriver: () => createLiveKitDriver,
   createMeetAi: () => createMeetAi,
   createMeetApi: () => createMeetApi,
@@ -149,6 +169,7 @@ __export(react_exports, {
   createRoomEngine: () => createRoomEngine,
   createTokenClient: () => createTokenClient,
   createWebDeviceStorage: () => createWebDeviceStorage,
+  createWebEffectsStorage: () => createWebEffectsStorage,
   createWebRoomTokenStorage: () => createWebRoomTokenStorage,
   displayNameFor: () => displayNameFor,
   fileDownloadPath: () => fileDownloadPath,
@@ -212,6 +233,7 @@ __export(react_exports, {
   settingsPatch: () => settingsPatch,
   snapshotParticipant: () => snapshotParticipant,
   unavailableFrom: () => unavailableFrom,
+  useAudioLevel: () => useAudioLevel,
   useCalls: () => useCalls,
   useCanModerate: () => useCanModerate,
   useCanRecord: () => useCanRecord,
@@ -220,19 +242,23 @@ __export(react_exports, {
   useElapsed: () => useElapsed,
   useEndMeeting: () => useEndMeeting,
   useGuestRecordAccess: () => useGuestRecordAccess,
+  useHandQueue: () => useHandQueue,
   useHostControls: () => useHostControls,
   useIsHost: () => useIsHost,
   useListenOnlyNotice: () => useListenOnlyNotice,
   useLobby: () => useLobby,
   useLocalMedia: () => useLocalMedia,
   useLocalUserId: () => useLocalUserId,
+  useMediaEffects: () => useMediaEffects,
   useMeetAi: () => useMeetAi,
   useMeetHost: () => useMeetHost,
+  useMeetShortcuts: () => useMeetShortcuts,
   useMeetSnapshot: () => useMeetSnapshot,
   useMeeting: () => useMeeting,
   useMeetingId: () => useMeetingId,
   useMeetingRecord: () => useMeetingRecord,
   useMeetings: () => useMeetings,
+  useModerationNotice: () => useModerationNotice,
   useReactions: () => useReactions,
   useRecording: () => useRecording,
   useRequiredMeetHost: () => useRequiredMeetHost,
@@ -442,7 +468,16 @@ var MEET_ROUTES = {
    */
   meetingAnnounce: "/api/v1/meet/meetings/{meeting_id}/announce",
   /** Put a one-off meeting on the caller's own Google Calendar (gated by the server). */
-  meetingGoogleCalendar: "/api/v1/meet/meetings/{meeting_id}/google-calendar"
+  meetingGoogleCalendar: "/api/v1/meet/meetings/{meeting_id}/google-calendar",
+  /**
+   * Meet wave 2: EVERY in-meeting host power (mute, stop video, mute all, ask to
+   * unmute, spotlight, lower hands, co-host, hand over, rename, remove, report).
+   * Decided by the server from the meeting itself; a guest's pass rides
+   * `x-meet-room-token`.
+   */
+  moderate: "/api/v1/meet/moderate",
+  /** Meet wave 2: the SAVED chat — `POST` sends to everyone, `GET ?meeting_id=` reads history. */
+  chat: "/api/v1/meet/chat"
 };
 function meetingPath(template, meetingId) {
   return template.replace("{meeting_id}", encodeURIComponent(meetingId));
@@ -1747,6 +1782,11 @@ function captionSegment(args) {
 }
 
 // src/core/store.ts
+var DEFAULT_EFFECTS = {
+  noiseSuppression: true,
+  background: "none",
+  backgroundImage: null
+};
 var NO_GRANTS = {
   role: "participant",
   canRecord: false,
@@ -1769,7 +1809,13 @@ var EMPTY = {
   recordingSource: "local",
   recordingId: null,
   chat: [],
+  chatLoaded: false,
+  chatHistoryError: null,
   reactions: [],
+  spotlight: null,
+  moderationNotice: null,
+  actionNotice: null,
+  effects: DEFAULT_EFFECTS,
   transcript: [],
   notes: [],
   names: {},
@@ -1808,6 +1854,7 @@ function createMeetStore(initial = {}) {
     setParticipants(participants) {
       const names = learnNames(state.names, participants);
       const hands = new Map(state.participants.map((p) => [p.identity, p.handRaised]));
+      const handTimes = new Map(state.participants.map((p) => [p.identity, p.handRaisedAt ?? null]));
       const quality = new Map(state.participants.map((p) => [p.identity, p.quality]));
       commit({
         ...state,
@@ -1821,6 +1868,7 @@ function createMeetStore(initial = {}) {
           // name book. `roster-names.test.ts` fails if a token ever gets past it.
           displayName: displayNameFor(names, participant.identity, participant.displayName),
           handRaised: hands.get(participant.identity) ?? participant.handRaised,
+          handRaisedAt: handTimes.get(participant.identity) ?? participant.handRaisedAt ?? null,
           quality: participant.quality === "unknown" ? quality.get(participant.identity) ?? "unknown" : participant.quality
         }))
       });
@@ -1843,11 +1891,17 @@ function createMeetStore(initial = {}) {
         )
       });
     },
-    setHand(identity, raised) {
+    setHand(identity, raised, at) {
       commit({
         ...state,
         participants: state.participants.map(
-          (participant) => participant.identity === identity ? { ...participant, handRaised: raised } : participant
+          (participant) => participant.identity === identity ? {
+            ...participant,
+            handRaised: raised,
+            // A hand that is ALREADY up keeps its place in the queue when
+            // it is re-announced (to a late joiner): the first time wins.
+            handRaisedAt: raised ? participant.handRaised && participant.handRaisedAt != null ? participant.handRaisedAt : at ?? Date.now() : null
+          } : participant
         )
       });
     },
@@ -1857,6 +1911,31 @@ function createMeetStore(initial = {}) {
       const names = learnName(state.names, message.identity, message.displayName);
       commit({ ...state, chat: chat.slice(-CHAT_LIMIT), names });
     },
+    loadChat(messages) {
+      const known = new Set(state.chat.map((message) => message.id));
+      const merged = [...messages.filter((message) => !known.has(message.id)), ...state.chat].sort(
+        (a, b) => a.at < b.at ? -1 : a.at > b.at ? 1 : 0
+      );
+      const names = learnNames(
+        state.names,
+        messages.map((message) => ({ identity: message.identity, displayName: message.displayName }))
+      );
+      commit({ ...state, chat: merged.slice(-CHAT_LIMIT), chatLoaded: true, chatHistoryError: null, names });
+    },
+    settleChat(localId, next) {
+      const index = state.chat.findIndex((message) => message.id === localId);
+      if (index === -1) return;
+      const current = state.chat[index];
+      let replacement;
+      if ("failed" in next && typeof next.failed === "string" && !("id" in next)) {
+        replacement = { ...current, failed: next.failed };
+      } else {
+        replacement = next;
+      }
+      const duplicate = replacement.id !== localId && state.chat.some((message) => message.id === replacement.id);
+      const chat = duplicate ? state.chat.filter((message) => message.id !== localId) : state.chat.map((message, position) => position === index ? replacement : message);
+      commit({ ...state, chat });
+    },
     addReaction(reaction) {
       commit({ ...state, reactions: [...state.reactions, reaction] });
     },
@@ -1947,7 +2026,7 @@ function createMeetStore(initial = {}) {
       commit({ ...state, media: { ...state.media, [kind]: next } });
     },
     reset() {
-      commit({ ...EMPTY });
+      commit({ ...EMPTY, effects: state.effects });
     }
   };
 }
@@ -3202,7 +3281,19 @@ var ROOM_EVENTS = {
    * production 2026-09-09 the guest lane showed no indicator at all while the
    * host recorded (MRI-C8).
    */
-  recording: "matrx.meet.recording"
+  recording: "matrx.meet.recording",
+  /**
+   * A chat message to everyone was SAVED (Meet wave 2). Payload
+   * `{ message: { id, meeting_id, sender_identity, sender_name, body, created_at } }`.
+   */
+  chat: "matrx.meet.chat",
+  /**
+   * A host or co-host acted (Meet wave 2). Payload `{ meeting_id, kind, … }`:
+   * `muted {source, by}` · `ask-unmute {by}` · `removed {by}` — addressed to the
+   * person concerned; `lower-hands {identities: [...] | "*"}` · `role {identity,
+   * role}` — to everyone.
+   */
+  moderation: "matrx.meet.moderation"
 };
 function isRoomEventTopic(topic) {
   return topic.startsWith(ROOM_EVENT_PREFIX);
@@ -3238,6 +3329,10 @@ function applyRoomEvent(args) {
       return applyEnded(store, payload);
     case ROOM_EVENTS.recording:
       return applyRecording(store, payload);
+    case ROOM_EVENTS.chat:
+      return applyChat(store, payload);
+    case ROOM_EVENTS.moderation:
+      return applyModeration(store, payload, now);
     default:
       return ignored(`${topic} is not known to this version of @ai-matrx/meet`);
   }
@@ -3329,6 +3424,101 @@ function applyEnded(store, payload) {
   store.patch({ meeting: { ...meeting, endedAt } });
   return HANDLED;
 }
+function chatFromRow(row) {
+  const id = text2(row["id"]);
+  const identity = text2(row["sender_identity"]);
+  const body = text2(row["body"]);
+  if (id === null || identity === null || body === null) return null;
+  return {
+    id,
+    identity: asParticipantIdentity(identity),
+    displayName: text2(row["sender_name"]) ?? "Participant",
+    text: body,
+    at: text2(row["created_at"]) ?? (/* @__PURE__ */ new Date()).toISOString(),
+    // `false` only from a server whose chat table has not landed: the room heard
+    // it, nobody will see it later — and the line says so.
+    saved: row["saved"] !== false
+  };
+}
+function applyChat(store, payload) {
+  const row = object(payload["message"]);
+  if (row === null) return ignored("a chat event with no `message` row");
+  const meeting = store.snapshot().meeting;
+  if (meeting !== null && text2(row["meeting_id"]) !== null && row["meeting_id"] !== meeting.id) {
+    return ignored("a chat message for a different meeting");
+  }
+  const message = chatFromRow(row);
+  if (message === null) return ignored("a chat row with no id, sender or body");
+  store.addChat(message);
+  return HANDLED;
+}
+function moderationText(kind, payload) {
+  const by = text2(payload["by"]) ?? "The host";
+  switch (kind) {
+    case "muted": {
+      const source = text2(payload["source"]) ?? "microphone";
+      return source === "microphone" ? `${by} muted you.` : source === "camera" ? `${by} turned off your camera.` : `${by} stopped your screen share.`;
+    }
+    case "ask-unmute":
+      return `${by} is asking you to unmute.`;
+    case "removed":
+      return `${by} removed you from this meeting.`;
+    default:
+      return null;
+  }
+}
+function applyModeration(store, payload, now) {
+  const snapshot = store.snapshot();
+  const meetingId = text2(payload["meeting_id"]);
+  if (snapshot.meeting !== null && meetingId !== null && meetingId !== snapshot.meeting.id) {
+    return ignored("a moderation event for a different meeting");
+  }
+  const kind = text2(payload["kind"]);
+  switch (kind) {
+    case "lower-hands": {
+      const raw = payload["identities"];
+      const everyone = raw === "*";
+      const named = new Set(
+        Array.isArray(raw) ? raw.filter((value) => typeof value === "string") : []
+      );
+      for (const participant of snapshot.participants) {
+        if (participant.handRaised && (everyone || named.has(participant.identity))) {
+          store.setHand(participant.identity, false);
+        }
+      }
+      return HANDLED;
+    }
+    case "role": {
+      const identity = text2(payload["identity"]);
+      const role = text2(payload["role"]);
+      if (identity === null || role === null || !ROLES.includes(role)) {
+        return ignored("a role event with no identity or an unknown role");
+      }
+      if (identity === snapshot.localIdentity) {
+        store.patch({
+          grants: { ...snapshot.grants, role },
+          moderationNotice: {
+            kind: "role",
+            text: role === "host" ? "You are now the host." : role === "cohost" ? "You are now a co-host." : "You are no longer a co-host.",
+            at: now()
+          }
+        });
+      }
+      return HANDLED;
+    }
+    case "muted":
+    case "ask-unmute":
+    case "removed": {
+      const sentence = moderationText(kind, payload);
+      if (sentence === null) return ignored("a moderation event with no sentence");
+      store.patch({ moderationNotice: { kind, text: sentence, at: now() } });
+      return HANDLED;
+    }
+    default:
+      return ignored(`a moderation kind this version does not know: ${String(kind)}`);
+  }
+}
+var ROLES = ["host", "cohost", "participant", "guest"];
 
 // src/core/note-taker.ts
 var NOTE_TAKER_IDENTITY_PREFIX = "agent:note_taker:";
@@ -3393,8 +3583,7 @@ function noteTakerLabel(status) {
 var DATA_TOPICS = {
   hand: "mx.hand",
   reaction: "mx.reaction",
-  chat: "mx.chat",
-  hostAction: "mx.host"
+  chat: "mx.chat"
 };
 var TRANSCRIPTION_TOPIC = "lk.transcription";
 var TRANSCRIPTION_ATTRIBUTES = {
@@ -3530,7 +3719,37 @@ function createRoomEngine(options) {
   const handlers = {
     participants(list) {
       const joinedAt = new Date(now()).toISOString();
+      const before = new Set(store.snapshot().participants.map((p) => p.identity));
       store.setParticipants(list.map((entry) => projectParticipant(entry, joinedAt)));
+      const snapshot = store.snapshot();
+      const newcomer = snapshot.participants.some(
+        (participant) => !participant.isLocal && !before.has(participant.identity)
+      );
+      const me = snapshot.participants.find((p) => p.identity === snapshot.localIdentity);
+      if (newcomer && before.size > 0 && me?.handRaised === true) {
+        void publish(DATA_TOPICS.hand, { raised: true, raisedAt: me.handRaisedAt ?? now() }).catch(
+          () => void 0
+        );
+      }
+    },
+    roomMetadata(metadata) {
+      let spotlight = null;
+      if (metadata.length > 0) {
+        try {
+          const parsed = JSON.parse(metadata);
+          if (typeof parsed === "object" && parsed !== null) {
+            const value = parsed.spotlight;
+            if (typeof value === "string" && value.length > 0) spotlight = asParticipantIdentity(value);
+          }
+        } catch {
+          report(
+            "warn",
+            "meet: the room's metadata is not JSON, so no spotlight was read from it",
+            "Only aidream writes room metadata; check services/meet/moderation.py."
+          );
+        }
+      }
+      if (store.snapshot().spotlight !== spotlight) store.patch({ spotlight });
     },
     activeSpeakers(identities) {
       store.setSpeaking(identities.map(asParticipantIdentity));
@@ -3634,7 +3853,11 @@ function createRoomEngine(options) {
       const sender = asParticipantIdentity(from ?? "");
       switch (topic) {
         case DATA_TOPICS.hand:
-          store.setHand(sender, envelope.raised === true);
+          store.setHand(
+            sender,
+            envelope.raised === true,
+            typeof envelope.raisedAt === "number" ? envelope.raisedAt : now()
+          );
           return;
         case DATA_TOPICS.reaction:
           if (typeof envelope.emoji === "string") {
@@ -3648,12 +3871,14 @@ function createRoomEngine(options) {
           return;
         case DATA_TOPICS.chat:
           if (typeof envelope.text === "string") {
+            const local = store.snapshot().localIdentity;
             store.addChat({
               id: envelope.id ?? `${sender}-${now()}`,
               identity: sender,
               displayName: envelope.name ?? sender,
               text: envelope.text,
-              at: envelope.at ?? new Date(now()).toISOString()
+              at: envelope.at ?? new Date(now()).toISOString(),
+              ...typeof envelope.to === "string" && local !== null ? { to: local } : {}
             });
           }
           return;
@@ -3699,6 +3924,24 @@ function createRoomEngine(options) {
     store.patch({ phase: "connected", failure: null });
     store.setLocalTrack("microphone", IDLE_TRACK);
     store.setLocalTrack("camera", IDLE_TRACK);
+    const effects = options.effectsStorage?.load() ?? store.snapshot().effects;
+    store.patch({ effects });
+    if (!effects.noiseSuppression || effects.background !== "none") {
+      try {
+        await applyEffects(created, effects);
+      } catch {
+      }
+    }
+    for (const kind of ["audioinput", "videoinput", "audiooutput"]) {
+      const chosen = options.resolveDevice?.(kind) ?? null;
+      if (chosen === null || chosen === "default") continue;
+      try {
+        await created.switchDevice(kind, chosen);
+      } catch (error) {
+        const normalized = normalizeDeviceError(error, `meet.switchDevice(${kind})`);
+        report("warn", normalized.message, normalized.remedy);
+      }
+    }
     if (request.mode === "video") {
       await enableTrack(created, "camera", true);
     }
@@ -3721,9 +3964,30 @@ function createRoomEngine(options) {
       return state;
     }
   }
-  async function publish(topic, body) {
+  async function publish(topic, body, to) {
     if (driver === null) return;
-    await driver.publishData(topic, JSON.stringify(body));
+    await driver.publishData(topic, JSON.stringify(body), to);
+  }
+  async function applyEffects(target, effects) {
+    try {
+      await target.setAudioProcessing?.({
+        noiseSuppression: effects.noiseSuppression,
+        echoCancellation: true,
+        autoGainControl: true
+      });
+    } catch (error) {
+      report("warn", `meet: noise suppression could not be applied: ${String(error)}`, "The microphone keeps working without it.");
+    }
+    if (target.setVideoEffect === void 0) return;
+    const effect = effects.background === "blur" ? { kind: "blur" } : effects.background === "image" && effects.backgroundImage !== null ? { kind: "image", imageUrl: effects.backgroundImage } : { kind: "none" };
+    if (effect.kind !== "none" && target.supportsVideoEffects?.() === false) return;
+    try {
+      await target.setVideoEffect(effect);
+    } catch (error) {
+      const normalized = normalizeMeetError(error, "meet.setVideoEffect");
+      report("warn", normalized.message, normalized.remedy);
+      throw normalized;
+    }
   }
   return {
     join(request) {
@@ -3779,7 +4043,7 @@ function createRoomEngine(options) {
     async raiseHand(raised) {
       const local = store.snapshot().localIdentity;
       if (local !== null) store.setHand(local, raised);
-      await publish(DATA_TOPICS.hand, { raised });
+      await publish(DATA_TOPICS.hand, { raised, raisedAt: now() });
     },
     async react(emoji) {
       const local = store.snapshot().localIdentity;
@@ -3789,32 +4053,41 @@ function createRoomEngine(options) {
       }
       await publish(DATA_TOPICS.reaction, { id, emoji });
     },
-    async sendChat(text3) {
+    async sendPrivateChat(to, text3) {
       const trimmed = text3.trim();
       if (trimmed.length === 0) return;
       const local = store.snapshot().localIdentity;
       const id = `${local ?? "local"}-${now()}`;
       const at = new Date(now()).toISOString();
       if (local !== null) {
-        store.addChat({
-          id,
-          identity: local,
-          displayName: identity.displayName,
-          text: trimmed,
-          at
-        });
+        store.addChat({ id, identity: local, displayName: identity.displayName, text: trimmed, at, to });
       }
-      await publish(DATA_TOPICS.chat, { id, text: trimmed, at, name: identity.displayName });
+      await publish(
+        DATA_TOPICS.chat,
+        { id, text: trimmed, at, name: identity.displayName, to },
+        [to]
+      );
     },
-    async publishHostAction(action) {
-      if (!isHostRole(effectiveRole(store.snapshot()))) {
-        throw new MeetError(
-          "forbidden",
-          `meet.hostAction(${action.kind}): this participant is not a host`,
-          "Host powers come from the server-minted token metadata. Hide the control instead of rendering a dead button (no dead ends)."
-        );
+    async setEffects(next) {
+      const previous = store.snapshot().effects;
+      const merged = { ...previous, ...next };
+      store.patch({ effects: merged });
+      options.effectsStorage?.save(merged);
+      if (driver === null) return;
+      try {
+        await applyEffects(driver, merged);
+      } catch {
+        const reverted = { ...merged, background: previous.background, backgroundImage: previous.backgroundImage };
+        store.patch({ effects: reverted });
+        options.effectsStorage?.save(reverted);
       }
-      await publish(DATA_TOPICS.hostAction, { ...action });
+    },
+    supportsVideoEffects() {
+      return driver?.supportsVideoEffects?.() ?? false;
+    },
+    async switchDevice(kind, deviceId2) {
+      if (driver === null) return;
+      await driver.switchDevice(kind, deviceId2);
     },
     pin(who) {
       store.patch({ pinned: who, layout: who === null ? "grid" : "speaker" });
@@ -3845,6 +4118,192 @@ function hostUserIds(participants) {
   return participants.filter((participant) => participant.role === "host" && participant.userId !== null).map((participant) => participant.userId);
 }
 
+// src/core/effects.ts
+function coerce(value) {
+  if (typeof value !== "object" || value === null) return DEFAULT_EFFECTS;
+  const row = value;
+  const background = row["background"] === "blur" || row["background"] === "image" ? row["background"] : "none";
+  const backgroundImage = typeof row["backgroundImage"] === "string" ? row["backgroundImage"] : null;
+  return {
+    noiseSuppression: row["noiseSuppression"] !== false,
+    background: background === "image" && backgroundImage === null ? "none" : background,
+    backgroundImage
+  };
+}
+function createWebEffectsStorage(key = "mx.meet.effects") {
+  let memory = DEFAULT_EFFECTS;
+  const storage = globalThis.localStorage;
+  return {
+    load() {
+      if (storage === void 0) return memory;
+      try {
+        const raw = storage.getItem(key);
+        return raw === null ? memory : coerce(JSON.parse(raw));
+      } catch {
+        return memory;
+      }
+    },
+    save(effects) {
+      memory = effects;
+      try {
+        storage?.setItem(key, JSON.stringify(effects));
+      } catch {
+      }
+    }
+  };
+}
+
+// src/core/in-room.ts
+var MODERATION_ACTIONS = [
+  "mute",
+  "stop_video",
+  "stop_screen",
+  "mute_all",
+  "ask_unmute",
+  "ask_all_unmute",
+  "spotlight",
+  "lower_hand",
+  "lower_all_hands",
+  "make_cohost",
+  "revoke_cohost",
+  "transfer_host",
+  "rename",
+  "remove",
+  "report"
+];
+function createInRoomClient(options) {
+  const { api, store } = options;
+  const now = options.now ?? (() => Date.now());
+  function meetingId(operation) {
+    const meeting = store.snapshot().meeting;
+    if (meeting === null) {
+      throw new MeetError(
+        "not-found",
+        `${operation}: this room has no meeting record`,
+        "Moderation and saved chat belong to a meeting. An ad-hoc call has neither."
+      );
+    }
+    return meeting.id;
+  }
+  function headers() {
+    const token = options.resolveRoomToken();
+    return token === null ? void 0 : { [ROOM_TOKEN_HEADER]: token };
+  }
+  async function refusal2(response, operation, remedy) {
+    let body = null;
+    try {
+      body = await response.json();
+    } catch {
+      body = null;
+    }
+    const said = readServerRefusal(body);
+    return new MeetError(
+      response.status === 403 || response.status === 401 ? "forbidden" : response.status === 404 ? "not-found" : response.status === 409 ? "conflict" : "transport",
+      said?.reason ?? `${operation}: the server answered ${response.status}`,
+      said?.remedy !== void 0 && said.remedy.length > 0 ? said.remedy : remedy
+    );
+  }
+  return {
+    async moderate(request) {
+      const operation = `meet.moderate(${request.action})`;
+      const hdrs = headers();
+      const response = await api.request({
+        path: MEET_ROUTES.moderate,
+        method: "POST",
+        operation,
+        body: {
+          meeting_id: meetingId(operation),
+          action: request.action,
+          ...request.identity != null ? { identity: request.identity } : {},
+          ...request.name !== void 0 ? { name: request.name } : {},
+          ...request.reason !== void 0 ? { reason: request.reason } : {}
+        },
+        ...hdrs !== void 0 ? { headers: hdrs } : {}
+      });
+      if (!response.ok) {
+        throw await refusal2(
+          response,
+          operation,
+          "Nothing was changed. The server decides host powers from the meeting itself."
+        );
+      }
+      const payload = await response.json();
+      return {
+        action: request.action,
+        affected: Array.isArray(payload["affected"]) ? payload["affected"].filter((value) => typeof value === "string") : [],
+        message: typeof payload["message"] === "string" ? payload["message"] : "Done."
+      };
+    },
+    async sendChat(text3) {
+      const body = text3.trim();
+      if (body.length === 0) return;
+      const operation = "meet.sendChat";
+      const id = meetingId(operation);
+      const snapshot = store.snapshot();
+      const me = snapshot.participants.find((p) => p.identity === snapshot.localIdentity);
+      const localId = `pending-${now()}`;
+      const pending = {
+        id: localId,
+        identity: snapshot.localIdentity ?? "local",
+        displayName: me?.displayName ?? "You",
+        text: body,
+        at: new Date(now()).toISOString(),
+        saved: false
+      };
+      store.addChat(pending);
+      const hdrs = headers();
+      let response;
+      try {
+        response = await api.request({
+          path: MEET_ROUTES.chat,
+          method: "POST",
+          operation,
+          body: { meeting_id: id, body },
+          ...hdrs !== void 0 ? { headers: hdrs } : {}
+        });
+      } catch (error) {
+        store.settleChat(localId, { failed: "Not sent \u2014 the server could not be reached." });
+        throw error;
+      }
+      if (!response.ok) {
+        const error = await refusal2(response, operation, "Your message was not sent.");
+        store.settleChat(localId, { failed: error.message });
+        throw error;
+      }
+      const saved = chatFromRow(await response.json());
+      if (saved === null) {
+        store.settleChat(localId, { failed: "The server's answer could not be read." });
+        return;
+      }
+      store.settleChat(localId, saved);
+    },
+    async loadChat() {
+      const operation = "meet.loadChat";
+      const id = meetingId(operation);
+      const hdrs = headers();
+      const response = await api.request({
+        path: `${MEET_ROUTES.chat}?meeting_id=${encodeURIComponent(id)}`,
+        method: "GET",
+        operation,
+        ...hdrs !== void 0 ? { headers: hdrs } : {}
+      });
+      if (!response.ok) {
+        throw await refusal2(
+          response,
+          operation,
+          "Messages sent before you joined could not be read. New messages still arrive."
+        );
+      }
+      const payload = await response.json();
+      const rows = Array.isArray(payload.messages) ? payload.messages : [];
+      const messages = rows.map(
+        (row) => typeof row === "object" && row !== null ? chatFromRow(row) : null
+      ).filter((message) => message !== null);
+      store.loadChat(messages);
+    }
+  };
+}
+
 // src/core/livekit-driver.ts
 function mapQuality(quality) {
   switch (quality) {
@@ -3889,11 +4348,48 @@ function snapshotParticipant(participant, isLocal) {
     screenSharing: participant.isScreenShareEnabled
   };
 }
+var DEFAULT_AUDIO_PROCESSING = {
+  noiseSuppression: true,
+  echoCancellation: true,
+  autoGainControl: true
+};
+function videoEffectsSupported() {
+  const scope = globalThis;
+  if (typeof scope.OffscreenCanvas === "undefined" || scope.document === void 0) return false;
+  try {
+    return scope.document.createElement("canvas").getContext("webgl2") !== null;
+  } catch {
+    return false;
+  }
+}
+async function applyVideoEffect(target, effect) {
+  const { Track } = await import("livekit-client");
+  const track = target.localParticipant.getTrackPublication(Track.Source.Camera)?.track;
+  if (track === void 0) return;
+  try {
+    if (effect.kind === "none") {
+      await track.stopProcessor();
+      return;
+    }
+    const processors = await import("@livekit/track-processors");
+    const processor = effect.kind === "blur" ? processors.BackgroundBlur(effect.radius ?? 12) : processors.VirtualBackground(effect.imageUrl);
+    await track.setProcessor(processor);
+  } catch (error) {
+    throw new MeetError(
+      "media-unsupported",
+      "The background effect could not start on this camera",
+      "Background effects need a browser with WebGL2 (current Chrome, Edge, Firefox or Safari). Your video continues without the effect.",
+      error
+    );
+  }
+}
 var encoder = new TextEncoder();
 var decoder = new TextDecoder();
 function createLiveKitDriver(handlers, options = {}) {
   let room = null;
   let projectRoster = null;
+  let audioCapture = DEFAULT_AUDIO_PROCESSING;
+  let videoEffect = { kind: "none" };
   async function load() {
     if (room !== null) return room;
     let module2;
@@ -3922,7 +4418,9 @@ function createLiveKitDriver(handlers, options = {}) {
       handlers.participants([local, ...remotes]);
     };
     projectRoster = roster;
-    created.on(RoomEvent.ParticipantConnected, roster).on(RoomEvent.ParticipantDisconnected, roster).on(RoomEvent.TrackSubscribed, roster).on(RoomEvent.TrackUnsubscribed, roster).on(RoomEvent.TrackMuted, roster).on(RoomEvent.TrackUnmuted, roster).on(RoomEvent.LocalTrackPublished, roster).on(RoomEvent.LocalTrackUnpublished, roster).on(RoomEvent.ActiveSpeakersChanged, (speakers) => {
+    created.on(RoomEvent.ParticipantConnected, roster).on(RoomEvent.ParticipantDisconnected, roster).on(RoomEvent.TrackSubscribed, roster).on(RoomEvent.TrackUnsubscribed, roster).on(RoomEvent.TrackMuted, roster).on(RoomEvent.TrackUnmuted, roster).on(RoomEvent.LocalTrackPublished, roster).on(RoomEvent.LocalTrackUnpublished, roster).on(RoomEvent.ParticipantNameChanged, roster).on(RoomEvent.ParticipantAttributesChanged, roster).on(RoomEvent.ParticipantMetadataChanged, roster).on(RoomEvent.RoomMetadataChanged, (metadata) => {
+      handlers.roomMetadata?.(metadata ?? "");
+    }).on(RoomEvent.ActiveSpeakersChanged, (speakers) => {
       handlers.activeSpeakers(speakers.map((speaker) => speaker.identity));
     }).on(RoomEvent.ConnectionQualityChanged, (quality, participant) => {
       handlers.quality(participant.identity, mapQuality(quality));
@@ -3999,6 +4497,7 @@ function createLiveKitDriver(handlers, options = {}) {
         throw normalizeDeviceError(error, "meet.connect");
       }
       projectRoster?.();
+      handlers.roomMetadata?.(target.metadata ?? "");
     },
     async disconnect() {
       if (room === null) return;
@@ -4013,14 +4512,19 @@ function createLiveKitDriver(handlers, options = {}) {
     },
     async setMicrophoneEnabled(enabled) {
       try {
-        await requireRoom("setMicrophoneEnabled").localParticipant.setMicrophoneEnabled(enabled);
+        await requireRoom("setMicrophoneEnabled").localParticipant.setMicrophoneEnabled(
+          enabled,
+          audioCapture
+        );
       } catch (error) {
         throw normalizeDeviceError(error, "meet.setMicrophoneEnabled");
       }
     },
     async setCameraEnabled(enabled) {
       try {
-        await requireRoom("setCameraEnabled").localParticipant.setCameraEnabled(enabled);
+        const target = requireRoom("setCameraEnabled");
+        await target.localParticipant.setCameraEnabled(enabled);
+        if (enabled && videoEffect.kind !== "none") await applyVideoEffect(target, videoEffect);
       } catch (error) {
         throw normalizeDeviceError(error, "meet.setCameraEnabled");
       }
@@ -4032,14 +4536,40 @@ function createLiveKitDriver(handlers, options = {}) {
         throw normalizeDeviceError(error, "meet.setScreenShareEnabled");
       }
     },
-    async publishData(topic, payload) {
+    async publishData(topic, payload, to) {
       await requireRoom("publishData").localParticipant.publishData(
         // `reliable` is not optional for a control plane: a dropped
         // "hand lowered" leaves a hand up on every other screen forever.
         encoder.encode(payload),
-        { reliable: true, topic }
+        to === void 0 || to.length === 0 ? { reliable: true, topic } : { reliable: true, topic, destinationIdentities: [...to] }
       );
     },
+    async setAudioProcessing(processing) {
+      audioCapture = { ...audioCapture, ...processing };
+      const target = room;
+      if (target === null) return;
+      const { Track } = await import("livekit-client");
+      const publication = target.localParticipant.getTrackPublication(Track.Source.Microphone);
+      const track = publication?.track;
+      if (track === void 0 || publication?.isMuted === true) return;
+      try {
+        await track.restartTrack({
+          ...audioCapture,
+          ...target.getActiveDevice("audioinput") !== void 0 ? { deviceId: target.getActiveDevice("audioinput") } : {}
+        });
+      } catch (error) {
+        throw normalizeDeviceError(error, "meet.setAudioProcessing");
+      }
+    },
+    async setVideoEffect(effect) {
+      videoEffect = effect;
+      const target = room;
+      if (target === null) return;
+      await applyVideoEffect(target, effect);
+    },
+    supportsVideoEffects() {
+      return videoEffectsSupported();
+    },
     attach(identity, kind, element) {
       const target = requireRoom("attach");
       const source = sources?.[kind];
@@ -4073,6 +4603,52 @@ function createLiveKitDriver(handlers, options = {}) {
     }
   };
 }
+async function createCameraPreview(deviceId2, effect) {
+  let module2;
+  try {
+    module2 = await import("livekit-client");
+  } catch (error) {
+    throw new MeetError(
+      "misconfigured",
+      "livekit-client could not be loaded for the camera preview",
+      "The bundler excluded `livekit-client`; remove it from any `external` list.",
+      error
+    );
+  }
+  let track;
+  try {
+    track = await module2.createLocalVideoTrack(deviceId2 === null ? {} : { deviceId: deviceId2 });
+  } catch (error) {
+    throw normalizeDeviceError(error, "meet.cameraPreview");
+  }
+  const target = track;
+  async function apply(next) {
+    if (next.kind === "none") {
+      await target.stopProcessor();
+      return;
+    }
+    const processors = await import("@livekit/track-processors");
+    await target.setProcessor(
+      next.kind === "blur" ? processors.BackgroundBlur(next.radius ?? 12) : processors.VirtualBackground(next.imageUrl)
+    );
+  }
+  if (effect.kind !== "none" && videoEffectsSupported()) {
+    try {
+      await apply(effect);
+    } catch {
+    }
+  }
+  return {
+    attach(element) {
+      track.attach(element);
+    },
+    setEffect: apply,
+    stop() {
+      track.stop();
+      track.detach();
+    }
+  };
+}
 
 // src/react/provider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -4182,7 +4758,9 @@ function MeetRuntime(props) {
       avatarUrl: props.avatarUrl ?? null,
       deviceId: deviceId()
     };
-    const store = createMeetStore();
+    const effectsStorage = createWebEffectsStorage();
+    const store = createMeetStore({ effects: effectsStorage.load() });
+    const devicesHolder = { current: null };
     const api = createMeetApi({
       baseUrl,
       organizationId: identity.organizationId,
@@ -4201,7 +4779,9 @@ function MeetRuntime(props) {
       identity,
       resolveMeeting: (slug) => repository.meetingBySlug(slug),
       driverFactory: (handlers) => (driverRef.current ?? createLiveKitDriver)(handlers),
-      onDiagnostic: report
+      onDiagnostic: report,
+      effectsStorage,
+      resolveDevice: (kind) => devicesHolder.current?.resolve(kind) ?? null
     });
     const meetings = createMeetingSession({
       manager,
@@ -4216,16 +4796,36 @@ function MeetRuntime(props) {
         void engine.rejoin();
       }
     });
-    const ai = createMeetAi({
-      api,
-      store,
-      resolveRoomToken: () => {
-        const roomName = store.snapshot().meeting?.roomName;
-        if (roomName === void 0) return null;
-        const active = engine.token();
-        if (active?.roomName === roomName && active.token.length > 0) return active.token;
-        return tokens.remembered(roomName)?.token ?? null;
+    const resolveRoomToken = () => {
+      const roomName = store.snapshot().meeting?.roomName;
+      if (roomName === void 0) return null;
+      const active = engine.token();
+      if (active?.roomName === roomName && active.token.length > 0) return active.token;
+      return tokens.remembered(roomName)?.token ?? null;
+    };
+    const ai = createMeetAi({ api, store, resolveRoomToken });
+    const inRoom = createInRoomClient({ api, store, resolveRoomToken });
+    let chatReadFor = null;
+    store.subscribe(() => {
+      const snapshot = store.snapshot();
+      if (snapshot.phase !== "connected" || snapshot.meeting === null) {
+        if (snapshot.phase === "left" || snapshot.phase === "idle") chatReadFor = null;
+        return;
       }
+      if (chatReadFor === snapshot.meeting.id) return;
+      chatReadFor = snapshot.meeting.id;
+      void inRoom.loadChat().catch((error) => {
+        const normalized = error;
+        store.patch({
+          chatLoaded: true,
+          chatHistoryError: normalized.remedy ?? "Messages sent before you joined could not be read. New messages still arrive."
+        });
+        report({
+          level: "warn",
+          message: normalized.message ?? "meet: the saved chat could not be read",
+          ...normalized.remedy !== void 0 ? { remedy: normalized.remedy } : {}
+        });
+      });
     });
     const recording = createRecordingController({
       api,
@@ -4247,6 +4847,7 @@ function MeetRuntime(props) {
       },
       storage: createWebDeviceStorage()
     });
+    devicesHolder.current = devices;
     const calls = identity.userId === null ? null : createCallCenter({
       manager,
       repository,
@@ -4261,6 +4862,7 @@ function MeetRuntime(props) {
       engine,
       calls,
       meetings,
+      inRoom,
       recording,
       devices,
       repository,
@@ -4382,7 +4984,8 @@ function computeStage(args) {
   const ordered = orderParticipants(args.participants, args.activeSpeakers);
   const sharer = ordered.find((participant) => participant.screenSharing) ?? null;
   const pinnedParticipant = args.pinned === null ? null : ordered.find((participant) => participant.identity === args.pinned) ?? null;
-  const feature = sharer !== null ? sharer : args.layout === "grid" ? null : pinnedParticipant ?? ordered[0] ?? null;
+  const spotlit = args.spotlight == null ? null : ordered.find((participant) => participant.identity === args.spotlight) ?? null;
+  const feature = sharer !== null ? sharer : pinnedParticipant !== null && args.layout !== "grid" ? pinnedParticipant : spotlit !== null ? spotlit : args.layout === "grid" ? null : ordered[0] ?? null;
   const rest = feature === null ? ordered : ordered.filter((participant) => participant.identity !== feature.identity);
   const pageCount = Math.max(1, Math.ceil(rest.length / pageSize));
   const page = Math.min(Math.max(0, args.page ?? 0), pageCount - 1);
@@ -4861,7 +5464,14 @@ function useRoom() {
       [engine]
     ),
     sendChat: (0, import_react3.useCallback)(
-      async (text3) => requireEngine(engine, "sendChat").sendChat(text3),
+      async (text3) => {
+        if (host === null) throw noRuntime("sendChat");
+        await host.inRoom.sendChat(text3);
+      },
+      [host]
+    ),
+    sendPrivateChat: (0, import_react3.useCallback)(
+      async (to, text3) => requireEngine(engine, "sendPrivateChat").sendPrivateChat(to, text3),
       [engine]
     ),
     pin: (0, import_react3.useCallback)(
@@ -4882,6 +5492,7 @@ function useStage(pageSize = DEFAULT_PAGE_SIZE) {
       participants: snapshot?.participants ?? [],
       layout: snapshot?.layout ?? "grid",
       pinned: snapshot?.pinned ?? null,
+      spotlight: snapshot?.spotlight ?? null,
       activeSpeakers: snapshot?.activeSpeakers ?? [],
       pageSize,
       page
@@ -5214,33 +5825,160 @@ function useHostControls() {
   const host = useMeetHost();
   const snapshot = useMeetSnapshot();
   const role = useRole();
-  const engine = host?.engine ?? null;
   const me = snapshot?.participants.find(
     (participant) => participant.identity === snapshot.localIdentity
   );
   const actor = me === void 0 ? void 0 : { ...me, role };
+  const [busy, setBusy] = (0, import_react3.useState)(false);
+  const inRoom = host?.inRoom ?? null;
+  const store = host?.store ?? null;
+  const notice = snapshot?.actionNotice ?? null;
+  const setNotice = (0, import_react3.useCallback)(
+    (next) => store?.patch({ actionNotice: next === null ? null : { ...next, at: Date.now() } }),
+    [store]
+  );
+  const run = (0, import_react3.useCallback)(
+    async (request) => {
+      if (inRoom === null) throw noRuntime(`moderate(${request.action})`);
+      setBusy(true);
+      try {
+        const result = await inRoom.moderate(request);
+        setNotice({ text: result.message, failed: false });
+        return result;
+      } catch (thrown) {
+        const error = thrown;
+        setNotice({
+          text: [error.message, error.remedy].filter(Boolean).join(" "),
+          failed: true
+        });
+        return null;
+      } finally {
+        setBusy(false);
+      }
+    },
+    [inRoom, setNotice]
+  );
   return {
     isHost: isHostRole(role),
+    isOwner: role === "host",
+    notice,
+    busy,
+    clearNotice: (0, import_react3.useCallback)(() => setNotice(null), [setNotice]),
     canModerate: (0, import_react3.useCallback)(
       (target) => canModerateParticipant(actor, target),
       [actor]
     ),
+    run,
     mute: (0, import_react3.useCallback)(
-      async (target) => requireEngine(engine, "muteParticipant").publishHostAction({
-        kind: "mute",
-        identity: target.identity
-      }),
-      [engine]
+      async (target) => {
+        await run({ action: "mute", identity: target.identity });
+      },
+      [run]
     ),
     remove: (0, import_react3.useCallback)(
-      async (target) => requireEngine(engine, "removeParticipant").publishHostAction({
-        kind: "remove",
-        identity: target.identity
-      }),
+      async (target) => {
+        await run({ action: "remove", identity: target.identity });
+      },
+      [run]
+    )
+  };
+}
+function useHandQueue() {
+  const snapshot = useMeetSnapshot();
+  return (0, import_react3.useMemo)(
+    () => (snapshot?.participants ?? []).filter((participant) => participant.handRaised).sort((a, b) => (a.handRaisedAt ?? 0) - (b.handRaisedAt ?? 0)),
+    [snapshot?.participants]
+  );
+}
+function useMediaEffects() {
+  const host = useMeetHost();
+  const snapshot = useMeetSnapshot();
+  const engine = host?.engine ?? null;
+  return {
+    effects: snapshot?.effects ?? DEFAULT_EFFECTS,
+    backgroundsSupported: engine?.supportsVideoEffects() ?? false,
+    set: (0, import_react3.useCallback)(
+      async (next) => requireEngine(engine, "setEffects").setEffects(next),
       [engine]
     )
   };
 }
+function useModerationNotice() {
+  const host = useMeetHost();
+  const snapshot = useMeetSnapshot();
+  return {
+    notice: snapshot?.moderationNotice ?? null,
+    dismiss: (0, import_react3.useCallback)(() => host?.store.patch({ moderationNotice: null }), [host])
+  };
+}
+function useAudioLevel(stream) {
+  const [level, setLevel] = (0, import_react3.useState)(0);
+  (0, import_react3.useEffect)(() => {
+    if (stream === null || stream.getAudioTracks().length === 0) {
+      setLevel(0);
+      return void 0;
+    }
+    const Context = globalThis.AudioContext ?? globalThis.webkitAudioContext;
+    if (Context === void 0) return void 0;
+    const context = new Context();
+    const source = context.createMediaStreamSource(stream);
+    const analyser = context.createAnalyser();
+    analyser.fftSize = 512;
+    source.connect(analyser);
+    const samples = new Uint8Array(analyser.fftSize);
+    let frame = 0;
+    const tick = () => {
+      analyser.getByteTimeDomainData(samples);
+      let peak = 0;
+      for (const sample of samples) peak = Math.max(peak, Math.abs(sample - 128) / 128);
+      setLevel((previous) => Math.abs(previous - peak) > 0.02 ? peak : previous);
+      frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => {
+      cancelAnimationFrame(frame);
+      source.disconnect();
+      void context.close();
+    };
+  }, [stream]);
+  return level;
+}
+var MEET_SHORTCUTS = [
+  { id: "mic", keys: "\u2318/Ctrl + D", label: "Mute or unmute your microphone" },
+  { id: "camera", keys: "\u2318/Ctrl + E", label: "Turn your camera on or off" },
+  { id: "hand", keys: "\u2318/Ctrl + Alt + H", label: "Raise or lower your hand" },
+  { id: "chat", keys: "\u2318/Ctrl + Alt + C", label: "Open or close chat" },
+  { id: "people", keys: "\u2318/Ctrl + Alt + P", label: "Open or close people" },
+  { id: "help", keys: "Shift + ?", label: "Show keyboard shortcuts" }
+];
+function useMeetShortcuts(handlers) {
+  const ref = (0, import_react3.useRef)(handlers);
+  ref.current = handlers;
+  (0, import_react3.useEffect)(() => {
+    const target = globalThis.window;
+    if (target === void 0) return void 0;
+    const onKey = (event) => {
+      const element = event.target;
+      const typing = element !== null && (element.isContentEditable || element.tagName === "INPUT" || element.tagName === "TEXTAREA" || element.tagName === "SELECT");
+      const mod = event.metaKey || event.ctrlKey;
+      const key = event.key.toLowerCase();
+      let id = null;
+      if (mod && !event.altKey && !event.shiftKey && key === "d") id = "mic";
+      else if (mod && !event.altKey && !event.shiftKey && key === "e") id = "camera";
+      else if (mod && event.altKey && (event.code === "KeyH" || key === "h")) id = "hand";
+      else if (mod && event.altKey && (event.code === "KeyC" || key === "c")) id = "chat";
+      else if (mod && event.altKey && (event.code === "KeyP" || key === "p")) id = "people";
+      else if (!mod && !typing && event.key === "?") id = "help";
+      if (id === null) return;
+      const handler = ref.current[id];
+      if (handler === void 0) return;
+      event.preventDefault();
+      handler();
+    };
+    target.addEventListener("keydown", onKey);
+    return () => target.removeEventListener("keydown", onKey);
+  }, []);
+}
 function useMeeting() {
   return useMeetSnapshot()?.meeting ?? null;
 }
@@ -5587,12 +6325,66 @@ function WifiLowIcon(props) {
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M8.5 16.5a5 5 0 0 1 7 0" })
   ] });
 }
-
-// src/react/components.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function InertNotice({ what }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mx-meet__empty", role: "status", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "mx-meet__empty-title", children: [
+function SmileIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "9", x2: "9.01", y1: "9", y2: "9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "15", x2: "15.01", y1: "9", y2: "9" })
+  ] });
+}
+function MoreIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "19", cy: "12", r: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "5", cy: "12", r: "1" })
+  ] });
+}
+function SearchIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m21 21-4.3-4.3" })
+  ] });
+}
+function KeyboardIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M10 8h.01M12 12h.01M14 8h.01M16 12h.01M18 8h.01M6 8h.01M7 16h10M8 12h.01" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "20", height: "16", x: "2", y: "4", rx: "2" })
+  ] });
+}
+function SpotlightIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 2 15 8.5 22 9.3 17 14 18.2 21 12 17.6 5.8 21 7 14 2 9.3 9 8.5Z" }) });
+}
+function SignalIcon({ bars, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M4 20v-2", opacity: bars >= 1 ? 1 : 0.3 }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M10 20v-6", opacity: bars >= 2 ? 1 : 0.3 }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M16 20V9", opacity: bars >= 3 ? 1 : 0.3 }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M22 20V4", opacity: bars >= 3 ? 1 : 0.3 })
+  ] });
+}
+function SpeakerIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M11 5 6 9H2v6h4l5 4V5Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14" })
+  ] });
+}
+function FlagIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "4", x2: "4", y1: "22", y2: "15" })
+  ] });
+}
+function PencilIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }) });
+}
+
+// src/react/components.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function InertNotice({ what }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mx-meet__empty", role: "status", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "mx-meet__empty-title", children: [
       what,
       " is not ready yet"
     ] }),
@@ -5687,12 +6479,17 @@ function ParticipantTile({
   featured = false
 }) {
   const host = useMeetHost();
-  const canModerate2 = useCanModerate(participant);
+  const snapshot = useMeetSnapshot();
+  const queue = useHandQueue();
+  const [menu, setMenu] = (0, import_react4.useState)(false);
   const videoRef = useTrack(
     participant.identity,
     participant.screenSharing ? "screen" : "camera"
   );
   const showVideo = participant.cameraEnabled || participant.screenSharing;
+  const pinnedHere = snapshot?.pinned === participant.identity;
+  const spotlit = snapshot?.spotlight === participant.identity;
+  const handPosition = participant.handRaised ? queue.findIndex((entry) => entry.identity === participant.identity) + 1 : 0;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
@@ -5713,44 +6510,59 @@ function ParticipantTile({
             muted: participant.isLocal
           }
         ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mx-meet__tile-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Avatar, { name: participant.displayName, url: participant.avatarUrl, size: featured ? 96 : 56 }) }),
+        participant.handRaised ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "mx-meet__tile-hand", title: `Hand raised \xB7 ${ordinal(handPosition)} in line`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HandIcon, { width: 14, height: 14 }),
+          handPosition > 0 ? handPosition : null
+        ] }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mx-meet__tile-bar", children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "mx-meet__tile-name", children: [
+            spotlit ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { title: "Spotlighted for everyone", className: "mx-meet__tile-flag", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SpotlightIcon, { width: 12, height: 12 }) }) : null,
             participant.displayName,
             participant.isLocal ? " (you)" : "",
             participant.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "mx-meet__badge", children: "AI" }) : null,
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RoleBadge, { role: participant.role })
           ] }),
           !participant.micEnabled ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MicOffIcon, { width: 14, height: 14 }) : null,
-          participant.handRaised ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HandIcon, { width: 14, height: 14 }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ConnectionDot, { quality: participant.quality })
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(QualityBars, { quality: participant.quality })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mx-meet__tile-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: menu ? "mx-meet__tile-actions mx-meet__tile-actions--open" : "mx-meet__tile-actions", children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             ControlButton,
             {
-              label: featured ? "Unpin" : `Pin ${participant.displayName}`,
-              onClick: () => host?.engine.pin(featured ? null : participant.identity),
+              label: pinnedHere ? "Unpin" : `Pin ${participant.displayName} for me`,
+              active: pinnedHere,
+              onClick: () => host?.engine.pin(pinnedHere ? null : participant.identity),
               children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PinIcon, { width: 16, height: 16 })
             }
           ),
-          canModerate2 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            ControlButton,
-            {
-              label: `Mute ${participant.displayName}`,
-              onClick: () => {
-                void host?.engine.publishHostAction({
-                  kind: "mute",
-                  identity: participant.identity
-                });
-              },
-              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MicOffIcon, { width: 16, height: 16 })
-            }
-          ) : null
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "mx-meet__anchor", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              ControlButton,
+              {
+                label: `More for ${participant.displayName}`,
+                active: menu,
+                onClick: () => setMenu(!menu),
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MoreIcon, { width: 16, height: 16 })
+              }
+            ),
+            menu ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PersonMenu, { participant, onClose: () => setMenu(false), placement: "down" }) : null
+          ] })
         ] })
       ]
     }
   );
 }
+function ordinal(position) {
+  if (position <= 0) return "";
+  const suffix = position % 100 >= 11 && position % 100 <= 13 ? "th" : { 1: "st", 2: "nd", 3: "rd" }[position % 10] ?? "th";
+  return `${position}${suffix}`;
+}
+function QualityBars({ quality }) {
+  if (quality === "unknown") return null;
+  const bars = quality === "excellent" ? 3 : quality === "good" ? 2 : quality === "poor" ? 1 : 0;
+  const label = quality === "lost" ? "Connection lost" : quality === "poor" ? "Poor connection" : `Connection ${quality}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: `mx-meet__signal mx-meet__signal--${quality}`, title: label, "aria-label": label, role: "img", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SignalIcon, { bars, width: 14, height: 14 }) });
+}
 function Stage({ pageSize }) {
   const stage = useStage(pageSize);
   const columns = gridColumns(stage.tiles.length);
@@ -5779,22 +6591,52 @@ function Stage({ pageSize }) {
     ] }) : null
   ] });
 }
+var MEET_REACTIONS = ["\u{1F496}", "\u{1F44D}", "\u{1F389}", "\u{1F44F}", "\u{1F602}", "\u{1F62E}", "\u{1F622}", "\u{1F914}", "\u{1F44E}"];
 function ControlBar({ onLeave }) {
   const room = useRoom();
   const recording = useRecording();
   const [panel, setPanel] = (0, import_react4.useState)("none");
+  const [chatTo, setChatTo] = (0, import_react4.useState)(null);
+  const [popover, setPopover] = (0, import_react4.useState)("none");
+  const [shortcuts, setShortcuts] = (0, import_react4.useState)(false);
   const snapshot = useMeetSnapshot();
   const lobby = useLobby();
+  const controls = useHostControls();
+  const queue = useHandQueue();
   const micUnavailable = useLocalMedia().microphone.unavailable;
+  const unread = useUnreadChat(panel === "chat");
+  const toggle = (next) => setPanel(panel === next ? "none" : next);
+  useMeetShortcuts({
+    mic: () => void room.toggleMicrophone(),
+    camera: () => void room.toggleCamera(),
+    hand: () => void room.toggleHand(),
+    chat: () => toggle("chat"),
+    people: () => toggle("people"),
+    help: () => setShortcuts(true)
+  });
+  const hasSpotlight = snapshot?.spotlight !== null && snapshot?.spotlight !== void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    panel === "chat" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChatPanel, { onClose: () => setPanel("none") }) : null,
-    panel === "people" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PeoplePanel, { onClose: () => setPanel("none") }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MeetingOverlays, {}),
+    shortcuts ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ShortcutsSheet, { onClose: () => setShortcuts(false) }) : null,
+    panel === "chat" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChatPanel, { onClose: () => setPanel("none"), to: chatTo, onTo: setChatTo }) : null,
+    panel === "people" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      PeoplePanel,
+      {
+        onClose: () => setPanel("none"),
+        onMessage: (identity) => {
+          setChatTo(identity);
+          setPanel("chat");
+        }
+      }
+    ) : null,
     panel === "ai" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AiPanel, { onClose: () => setPanel("none") }) : null,
+    panel === "settings" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SettingsPanel, { onClose: () => setPanel("none") }) : null,
+    controls.notice !== null && panel !== "people" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Toast, { text: controls.notice.text, failed: controls.notice.failed, onDone: controls.clearNotice }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mx-meet__controls", children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         ControlButton,
         {
-          label: micUnavailable !== null ? `Unmute \u2014 ${micUnavailable.remedy}` : room.local?.micEnabled === true ? "Mute" : "Unmute",
+          label: micUnavailable !== null ? `Unmute \u2014 ${micUnavailable.remedy}` : room.local?.micEnabled === true ? "Mute (\u2318D)" : "Unmute (\u2318D)",
           active: room.local?.micEnabled === true,
           onClick: () => void room.toggleMicrophone(),
           children: room.local?.micEnabled === true ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MicIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MicOffIcon, {})
@@ -5803,7 +6645,7 @@ function ControlBar({ onLeave }) {
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         ControlButton,
         {
-          label: room.local?.cameraEnabled === true ? "Stop video" : "Start video",
+          label: room.local?.cameraEnabled === true ? "Stop video (\u2318E)" : "Start video (\u2318E)",
           active: room.local?.cameraEnabled === true,
           onClick: () => void room.toggleCamera(),
           children: room.local?.cameraEnabled === true ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CameraIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CameraOffIcon, {})
@@ -5818,31 +6660,152 @@ function ControlBar({ onLeave }) {
           children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ScreenShareIcon, {})
         }
       ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "mx-meet__anchor", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          ControlButton,
+          {
+            label: "Send a reaction",
+            active: popover === "reactions",
+            onClick: () => setPopover(popover === "reactions" ? "none" : "reactions"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SmileIcon, {})
+          }
+        ),
+        popover === "reactions" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Popover, { label: "Reactions", onClose: () => setPopover("none"), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mx-meet__emoji-bar", children: MEET_REACTIONS.map((emoji) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "mx-meet__emoji",
+            "aria-label": `React ${emoji}`,
+            onClick: () => void room.react(emoji),
+            children: emoji
+          },
+          emoji
+        )) }) }) : null
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         ControlButton,
         {
-          label: room.local?.handRaised === true ? "Lower hand" : "Raise hand",
+          label: room.local?.handRaised === true ? "Lower hand (\u2318\u2325H)" : "Raise hand (\u2318\u2325H)",
           active: room.local?.handRaised === true,
           onClick: () => void room.toggleHand(),
           children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HandIcon, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ControlButton, { label: "Chat", active: panel === "chat", onClick: () => setPanel(panel === "chat" ? "none" : "chat"), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChatIcon, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(ControlButton, { label: "Chat (\u2318\u2325C)", active: panel === "chat", onClick: () => toggle("chat"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChatIcon, {}),
+        unread > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "mx-meet__dot", "aria-hidden": "true" }) : null
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
         ControlButton,
         {
           label: lobby.waiting.length > 0 ? `People \u2014 ${lobby.waiting.length} waiting` : `People \u2014 ${(snapshot?.participants ?? []).length} in the meeting`,
           active: panel === "people",
-          onClick: () => setPanel(panel === "people" ? "none" : "people"),
+          onClick: () => toggle("people"),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PeopleIcon, {}),
-            lobby.waiting.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "mx-meet__dot", "aria-hidden": "true" }) : null
+            lobby.waiting.length > 0 || controls.isHost && queue.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "mx-meet__dot", "aria-hidden": "true" }) : null
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AiControl, { active: panel === "ai", onToggle: () => setPanel(panel === "ai" ? "none" : "ai") }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AiControl, { active: panel === "ai", onToggle: () => toggle("ai") }),
       recording.canStart ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ControlButton, { label: "Start recording", onClick: () => void recording.start(), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RecordIcon, {}) }) : null,
       recording.canStop ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ControlButton, { label: "Stop recording", active: true, onClick: () => void recording.stop(), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RecordIcon, {}) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "mx-meet__anchor", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          ControlButton,
+          {
+            label: "More options",
+            active: popover === "more" || panel === "settings",
+            onClick: () => setPopover(popover === "more" ? "none" : "more"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MoreIcon, {})
+          }
+        ),
+        popover === "more" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Popover, { label: "More options", onClose: () => setPopover("none"), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mx-meet__menu", role: "menu", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            MenuItem,
+            {
+              onSelect: () => {
+                setPopover("none");
+                setPanel("settings");
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SettingsIcon, { width: 16, height: 16 }),
+                " Audio, video and effects"
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            MenuItem,
+            {
+              onSelect: () => {
+                setPopover("none");
+                setShortcuts(true);
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(KeyboardIcon, { width: 16, height: 16 }),
+                " Keyboard shortcuts"
+              ]
+            }
+          ),
+          controls.isHost ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mx-meet__menu-sep", role: "separator" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              MenuItem,
+              {
+                onSelect: () => {
+                  setPopover("none");
+                  void controls.run({ action: "mute_all" });
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MicOffIcon, { width: 16, height: 16 }),
+                  " Mute everyone"
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              MenuItem,
+              {
+                onSelect: () => {
+                  setPopover("none");
+                  void controls.run({ action: "ask_all_unmute" });
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MicIcon, { width: 16, height: 16 }),
+                  " Ask everyone to unmute"
+                ]
+              }
+            ),
+            queue.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              MenuItem,
+              {
+                onSelect: () => {
+                  setPopover("none");
+                  void controls.run({ action: "lower_all_hands" });
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HandIcon, { width: 16, height: 16 }),
+                  " Lower all hands (",
+                  queue.length,
+                  ")"
+                ]
+              }
+            ) : null,
+            hasSpotlight ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              MenuItem,
+              {
+                onSelect: () => {
+                  setPopover("none");
+                  void controls.run({ action: "spotlight", identity: null });
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SpotlightIcon, { width: 16, height: 16 }),
+                  " Remove spotlight"
+                ]
+              }
+            ) : null
+          ] }) : null
+        ] }) }) : null
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         ControlButton,
         {
@@ -5858,6 +6821,150 @@ function ControlBar({ onLeave }) {
     ] })
   ] });
 }
+function useUnreadChat(open) {
+  const snapshot = useMeetSnapshot();
+  const chat = snapshot?.chat ?? [];
+  const local = snapshot?.localIdentity ?? null;
+  const [seen, setSeen] = (0, import_react4.useState)(0);
+  (0, import_react4.useEffect)(() => {
+    if (open) setSeen(chat.length);
+  }, [open, chat.length]);
+  const loaded = snapshot?.chatLoaded === true;
+  const [baseline, setBaseline] = (0, import_react4.useState)(null);
+  (0, import_react4.useEffect)(() => {
+    if (loaded && baseline === null) setBaseline(chat.length);
+  }, [loaded, baseline, chat.length]);
+  if (open) return 0;
+  const from = Math.max(seen, baseline ?? chat.length);
+  return chat.slice(from).filter((message) => message.identity !== local).length;
+}
+function Popover({
+  label,
+  onClose,
+  children,
+  placement = "up"
+}) {
+  const ref = (0, import_react4.useRef)(null);
+  const [style, setStyle] = (0, import_react4.useState)({ visibility: "hidden" });
+  (0, import_react4.useLayoutEffect)(() => {
+    const element = ref.current;
+    const anchor = element?.parentElement ?? null;
+    if (element === null || anchor === null) return;
+    const place = () => {
+      const rect = anchor.getBoundingClientRect();
+      const width = element.offsetWidth;
+      const height = element.offsetHeight;
+      const gutter = 8;
+      const left = Math.min(
+        Math.max(gutter, rect.left + rect.width / 2 - width / 2),
+        window.innerWidth - width - gutter
+      );
+      const fitsBelow = rect.bottom + gutter + height <= window.innerHeight;
+      const fitsAbove = rect.top - gutter - height >= 0;
+      const down = placement === "down" ? fitsBelow || !fitsAbove : !fitsAbove && fitsBelow;
+      setStyle(
+        down ? { position: "fixed", left, top: rect.bottom + gutter } : { position: "fixed", left, bottom: window.innerHeight - rect.top + gutter }
+      );
+    };
+    place();
+    window.addEventListener("resize", place);
+    return () => window.removeEventListener("resize", place);
+  }, [placement]);
+  (0, import_react4.useEffect)(() => {
+    const onKey = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    const onPointer = (event) => {
+      const anchor = ref.current?.parentElement ?? null;
+      if (anchor !== null && !anchor.contains(event.target)) onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("pointerdown", onPointer);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("pointerdown", onPointer);
+    };
+  }, [onClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref, className: "mx-meet__popover", style, role: "dialog", "aria-label": label, children });
+}
+function MenuItem({
+  onSelect,
+  danger = false,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      className: danger ? "mx-meet__menu-item mx-meet__menu-item--danger" : "mx-meet__menu-item",
+      onClick: onSelect,
+      children
+    }
+  );
+}
+function Toast({ text: text3, failed, onDone }) {
+  (0, import_react4.useEffect)(() => {
+    const timer = setTimeout(onDone, failed ? 7e3 : 4e3);
+    return () => clearTimeout(timer);
+  }, [text3, failed, onDone]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: failed ? "mx-meet__toast mx-meet__toast--failed" : "mx-meet__toast", role: "status", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: text3 }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: "mx-meet__toast-close", "aria-label": "Dismiss", onClick: onDone, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CloseIcon, { width: 14, height: 14 }) })
+  ] });
+}
+function MeetingOverlays() {
+  const reactions = useReactions();
+  const { notice, dismiss } = useModerationNotice();
+  const room = useRoom();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ReactionOverlay, { reactions }),
+    notice !== null && notice.kind !== "removed" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mx-meet__notice-bar", role: "alert", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: notice.text }),
+      notice.kind === "ask-unmute" && room.local?.micEnabled !== true ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "mx-meet__primary mx-meet__primary--small",
+          onClick: () => {
+            dismiss();
+            void room.toggleMicrophone();
+          },
+          children: "Unmute"
+        }
+      ) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: "mx-meet__toast-close", "aria-label": "Dismiss", onClick: dismiss, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CloseIcon, { width: 14, height: 14 }) })
+    ] }) : null
+  ] });
+}
+function ShortcutsSheet({ onClose }) {
+  (0, import_react4.useEffect)(() => {
+    const onKey = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mx-meet__sheet-backdrop", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: "mx-meet__sheet",
+      role: "dialog",
+      "aria-label": "Keyboard shortcuts",
+      onClick: (event) => event.stopPropagation(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("header", { className: "mx-meet__panel-head", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: "mx-meet__panel-title", children: "Keyboard shortcuts" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ControlButton, { label: "Close", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CloseIcon, { width: 16, height: 16 }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("dl", { className: "mx-meet__shortcuts", children: MEET_SHORTCUTS.map((shortcut) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mx-meet__shortcut", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("dt", { children: shortcut.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("dd", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("kbd", { className: "mx-meet__kbd", children: shortcut.keys }) })
+        ] }, shortcut.id)) })
+      ]
+    }
+  ) });
+}
 function AiControl({ active, onToggle }) {
   const snapshot = useMeetSnapshot();
   const meeting = snapshot?.meeting ?? null;
@@ -5877,117 +6984,641 @@ function PanelShell({
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mx-meet__panel-body", children })
   ] });
 }
-function ChatPanel({ onClose }) {
+function ChatPanel({
+  onClose,
+  to = null,
+  onTo
+}) {
   const snapshot = useMeetSnapshot();
   const room = useRoom();
   const [draft, setDraft] = (0, import_react4.useState)("");
+  const [recipient, setRecipient] = (0, import_react4.useState)(to);
+  const listRef = (0, import_react4.useRef)(null);
   const messages = snapshot?.chat ?? [];
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(PanelShell, { title: "In-meeting chat", onClose, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mx-meet__panel-note", children: "In-meeting chat is ephemeral \u2014 it disappears when the meeting ends." }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: "mx-meet__chat", children: messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("li", { className: "mx-meet__chat-line", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: message.displayName }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: message.text })
-    ] }, message.id)) }),
+  const local = snapshot?.localIdentity ?? null;
+  const people = (snapshot?.participants ?? []).filter(
+    (participant) => !participant.isLocal && !participant.isAgent
+  );
+  const recipientName = recipient === null ? null : people.find((p) => p.identity === recipient)?.displayName ?? null;
+  (0, import_react4.useEffect)(() => setRecipient(to), [to]);
+  (0, import_react4.useEffect)(() => {
+    const list = listRef.current;
+    if (list !== null) list.scrollTop = list.scrollHeight;
+  }, [messages.length]);
+  const choose = (next) => {
+    setRecipient(next);
+    onTo?.(next);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(PanelShell, { title: "Chat", onClose, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("ul", { className: "mx-meet__chat", ref: listRef, children: [
+      snapshot?.chatHistoryError != null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "mx-meet__panel-note", children: snapshot.chatHistoryError }) : null,
+      snapshot?.chatLoaded !== true && messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "mx-meet__panel-note", children: "Reading earlier messages\u2026" }) : messages.length === 0 && snapshot?.chatHistoryError == null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "mx-meet__panel-note", children: "No messages yet. Messages to everyone stay with the meeting, so people who join later see them." }) : null,
+      messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChatLine, { message, local, people }, message.id))
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "form",
       {
-        className: "mx-meet__composer",
+        className: "mx-meet__composer mx-meet__composer--chat",
         onSubmit: (event) => {
           event.preventDefault();
           const text3 = draft;
+          if (text3.trim().length === 0) return;
           setDraft("");
-          void room.sendChat(text3);
+          if (recipient === null) void room.sendChat(text3).catch(() => void 0);
+          else void room.sendPrivateChat(recipient, text3);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "input",
+          people.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "select",
             {
-              className: "mx-meet__input",
-              value: draft,
-              onChange: (event) => setDraft(event.target.value),
-              placeholder: "Message everyone",
-              "aria-label": "Message everyone"
+              className: "mx-meet__select mx-meet__select--compact",
+              "aria-label": "Send to",
+              value: recipient ?? "",
+              onChange: (event) => choose(event.target.value === "" ? null : event.target.value),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "", children: "Everyone" }),
+                people.map((participant) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("option", { value: participant.identity, children: [
+                  participant.displayName,
+                  " (private)"
+                ] }, participant.identity))
+              ]
             }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "submit", className: "mx-meet__send", children: "Send" })
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mx-meet__composer-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "input",
+              {
+                className: "mx-meet__input",
+                value: draft,
+                onChange: (event) => setDraft(event.target.value),
+                placeholder: recipientName === null ? "Message everyone" : `Message ${recipientName} privately`,
+                "aria-label": recipientName === null ? "Message everyone" : `Message ${recipientName} privately`,
+                maxLength: 4e3
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "submit", className: "mx-meet__send", disabled: draft.trim().length === 0, children: "Send" })
+          ] }),
+          recipientName !== null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "mx-meet__panel-note", children: [
+            "Only ",
+            recipientName,
+            " sees this. Private messages are not saved."
+          ] }) : null
         ]
       }
     )
   ] });
 }
-function PeoplePanel({ onClose }) {
+function ChatLine({
+  message,
+  local,
+  people
+}) {
+  const mine = message.identity === local;
+  const privateTo = message.to ?? null;
+  const counterpart = privateTo === null ? null : mine ? people.find((p) => p.identity === privateTo)?.displayName ?? "them" : "you";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "li",
+    {
+      className: [
+        "mx-meet__chat-line",
+        privateTo !== null ? "mx-meet__chat-line--private" : "",
+        message.failed !== void 0 ? "mx-meet__chat-line--failed" : ""
+      ].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "mx-meet__chat-meta", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: mine ? "You" : message.displayName }),
+          counterpart !== null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "mx-meet__chat-private", children: [
+            "to ",
+            counterpart,
+            " \xB7 private"
+          ] }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("time", { dateTime: message.at, children: clockOf(message.at) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "mx-meet__chat-text", children: message.text }),
+        message.failed !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "mx-meet__chat-failed", children: message.failed }) : privateTo === null && message.saved === false ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "mx-meet__chat-pending", children: message.id.startsWith("pending-") ? "Sending\u2026" : "Not saved \u2014 people who join later will not see this" }) : null
+      ]
+    }
+  );
+}
+function PeoplePanel({
+  onClose,
+  onMessage
+}) {
   const snapshot = useMeetSnapshot();
   const controls = useHostControls();
+  const queue = useHandQueue();
+  const [query, setQuery] = (0, import_react4.useState)("");
+  const [menuFor, setMenuFor] = (0, import_react4.useState)(null);
   const myRole = useRole();
   const local = snapshot?.localIdentity ?? null;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(PanelShell, { title: "People", onClose, children: [
+  const everyone = snapshot?.participants ?? [];
+  const needle = query.trim().toLowerCase();
+  const shown = needle.length === 0 ? everyone : everyone.filter((participant) => participant.displayName.toLowerCase().includes(needle));
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(PanelShell, { title: `People (${everyone.length})`, onClose, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LobbyPanel, {}),
-    snapshot?.meeting !== null && snapshot?.meeting !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GuestRecordAccessControl, { meeting: snapshot.meeting }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: "mx-meet__people", children: (snapshot?.participants ?? []).map((participant) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("li", { className: "mx-meet__person", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Avatar, { name: participant.displayName, url: participant.avatarUrl, size: 32 }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "mx-meet__person-name", children: [
-        participant.displayName,
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          RoleBadge,
+    queue.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { className: "mx-meet__section", "aria-label": "Raised hands", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("header", { className: "mx-meet__section-head", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("h3", { className: "mx-meet__section-title", children: [
+          "Raised hands \xB7 ",
+          queue.length
+        ] }),
+        controls.isHost ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
           {
-            role: participant.identity === local ? myRole : participant.role
+            type: "button",
+            className: "mx-meet__link",
+            onClick: () => void controls.run({ action: "lower_all_hands" }),
+            children: "Lower all"
           }
-        ),
-        isNoteTaker(participant) ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "mx-meet__badge", children: "Meeting assistant" }) : null
+        ) : null
       ] }),
-      !participant.micEnabled && !isNoteTaker(participant) ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MicOffIcon, { width: 14, height: 14 }) : null,
-      participant.handRaised ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HandIcon, { width: 14, height: 14 }) : null,
-      controls.canModerate(participant) ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PersonHostActions, { participant, controls }) : null
-    ] }, participant.identity)) })
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ol", { className: "mx-meet__queue", children: queue.map((participant) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("li", { className: "mx-meet__person", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Avatar, { name: participant.displayName, url: participant.avatarUrl, size: 28 }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "mx-meet__person-name", children: [
+          participant.displayName,
+          participant.identity === local ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "mx-meet__you", children: " (you)" }) : null
+        ] }),
+        controls.isHost || participant.identity === local ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "mx-meet__link",
+            onClick: () => void controls.run({ action: "lower_hand", identity: participant.identity }),
+            children: "Lower"
+          }
+        ) : null
+      ] }, participant.identity)) })
+    ] }) : null,
+    controls.isHost && everyone.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mx-meet__bulk", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { type: "button", className: "mx-meet__chip", onClick: () => void controls.run({ action: "mute_all" }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MicOffIcon, { width: 14, height: 14 }),
+        " Mute all"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: "mx-meet__chip",
+          onClick: () => void controls.run({ action: "ask_all_unmute" }),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MicIcon, { width: 14, height: 14 }),
+            " Ask all to unmute"
+          ]
+        }
+      )
+    ] }) : null,
+    everyone.length > 4 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "mx-meet__search", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SearchIcon, { width: 16, height: 16 }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "input",
+        {
+          className: "mx-meet__input mx-meet__input--bare",
+          value: query,
+          onChange: (event) => setQuery(event.target.value),
+          placeholder: "Search people",
+          "aria-label": "Search people"
+        }
+      )
+    ] }) : null,
+    controls.notice !== null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: controls.notice.failed ? "mx-meet__error" : "mx-meet__notice", role: "status", children: controls.notice.text }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("ul", { className: "mx-meet__people", children: [
+      shown.map((participant) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("li", { className: "mx-meet__person", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Avatar, { name: participant.displayName, url: participant.avatarUrl, size: 32 }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "mx-meet__person-name", children: [
+          participant.displayName,
+          participant.identity === local ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "mx-meet__you", children: " (you)" }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RoleBadge, { role: participant.identity === local ? myRole : participant.role }),
+          isNoteTaker(participant) ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "mx-meet__badge", children: "Meeting assistant" }) : null,
+          snapshot?.spotlight === participant.identity ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "mx-meet__badge", children: "Spotlight" }) : null
+        ] }),
+        participant.handRaised ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HandIcon, { width: 14, height: 14 }) : null,
+        !participant.micEnabled && !isNoteTaker(participant) ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MicOffIcon, { width: 14, height: 14 }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(QualityBars, { quality: participant.quality }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "mx-meet__anchor", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            ControlButton,
+            {
+              label: `More for ${participant.displayName}`,
+              active: menuFor === participant.identity,
+              onClick: () => setMenuFor(menuFor === participant.identity ? null : participant.identity),
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MoreIcon, { width: 16, height: 16 })
+            }
+          ),
+          menuFor === participant.identity ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            PersonMenu,
+            {
+              participant,
+              placement: "down",
+              onClose: () => setMenuFor(null),
+              ...onMessage !== void 0 ? { onMessage } : {}
+            }
+          ) : null
+        ] })
+      ] }, participant.identity)),
+      shown.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("li", { className: "mx-meet__panel-note", children: [
+        "Nobody matches \u201C",
+        query,
+        "\u201D."
+      ] }) : null
+    ] }),
+    snapshot?.meeting !== null && snapshot?.meeting !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GuestRecordAccessControl, { meeting: snapshot.meeting }) : null
   ] });
 }
-function PersonHostActions({
+function PersonMenu({
   participant,
-  controls
+  onClose,
+  onMessage,
+  placement = "down"
 }) {
-  const [confirming, setConfirming] = (0, import_react4.useState)(false);
-  if (confirming) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "mx-meet__confirm", role: "group", "aria-label": `Remove ${participant.displayName}?`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "mx-meet__confirm-text", children: [
-        "Remove ",
-        participant.displayName,
-        "? They leave the meeting immediately and have to be let back in."
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        "button",
+  const host = useMeetHost();
+  const snapshot = useMeetSnapshot();
+  const controls = useHostControls();
+  const [mode, setMode] = (0, import_react4.useState)("menu");
+  const [text3, setText] = (0, import_react4.useState)("");
+  const self = participant.identity === snapshot?.localIdentity;
+  const moderate = controls.canModerate(participant);
+  const pinned = snapshot?.pinned === participant.identity;
+  const spotlit = snapshot?.spotlight === participant.identity;
+  const hasAccount = participant.userId !== null;
+  const act = (request) => {
+    void controls.run(request).then((result) => {
+      if (result !== null) onClose();
+    });
+  };
+  if (mode === "rename" || mode === "report") {
+    const renaming = mode === "rename";
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Popover, { label: renaming ? "Rename" : "Report", onClose, placement, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "form",
+      {
+        className: "mx-meet__menu-form",
+        onSubmit: (event) => {
+          event.preventDefault();
+          if (text3.trim().length === 0) return;
+          act(
+            renaming ? { action: "rename", identity: participant.identity, name: text3.trim() } : { action: "report", identity: participant.identity, reason: text3.trim() }
+          );
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "mx-meet__field", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "mx-meet__field-label", children: renaming ? "Name shown in this meeting" : `What did ${participant.displayName} do?` }),
+            renaming ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "input",
+              {
+                className: "mx-meet__input",
+                autoFocus: true,
+                maxLength: 80,
+                value: text3,
+                onChange: (event) => setText(event.target.value)
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "textarea",
+              {
+                className: "mx-meet__input",
+                autoFocus: true,
+                rows: 3,
+                maxLength: 1e3,
+                value: text3,
+                onChange: (event) => setText(event.target.value)
+              }
+            )
+          ] }),
+          controls.notice?.failed === true ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mx-meet__error", children: controls.notice.text }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mx-meet__menu-actions", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: "mx-meet__link", onClick: () => setMode("menu"), children: "Back" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "submit", className: "mx-meet__send", disabled: text3.trim().length === 0 || controls.busy, children: renaming ? "Rename" : "Report" })
+          ] })
+        ]
+      }
+    ) });
+  }
+  if (mode === "remove" || mode === "transfer") {
+    const removing = mode === "remove";
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Popover, { label: removing ? "Remove" : "Make host", onClose, placement, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mx-meet__menu-form", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mx-meet__confirm-text", children: removing ? `Remove ${participant.displayName}? They leave immediately and cannot rejoin this meeting.` : `Make ${participant.displayName} the host? They get every host control and own this meeting. You stay on as a co-host.` }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mx-meet__menu-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: "mx-meet__link", onClick: () => setMode("menu"), children: "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            type: "button",
+            className: removing ? "mx-meet__send mx-meet__send--danger" : "mx-meet__send",
+            disabled: controls.busy,
+            onClick: () => act({ action: removing ? "remove" : "transfer_host", identity: participant.identity }),
+            children: removing ? "Remove" : "Make host"
+          }
+        )
+      ] })
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Popover, { label: `Options for ${participant.displayName}`, onClose, placement, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mx-meet__menu", role: "menu", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      MenuItem,
+      {
+        onSelect: () => {
+          host?.engine.pin(pinned ? null : participant.identity);
+          onClose();
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PinIcon, { width: 16, height: 16 }),
+          " ",
+          pinned ? "Unpin" : "Pin for me"
+        ]
+      }
+    ),
+    !self && !participant.isAgent && onMessage !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      MenuItem,
+      {
+        onSelect: () => {
+          onMessage(participant.identity);
+          onClose();
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChatIcon, { width: 16, height: 16 }),
+          " Message privately"
+        ]
+      }
+    ) : null,
+    controls.isHost ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(MenuItem, { onSelect: () => act({ action: "spotlight", identity: spotlit ? null : participant.identity }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SpotlightIcon, { width: 16, height: 16 }),
+      " ",
+      spotlit ? "Remove spotlight" : "Spotlight for everyone"
+    ] }) : null,
+    moderate ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mx-meet__menu-sep", role: "separator" }),
+      participant.micEnabled ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(MenuItem, { onSelect: () => act({ action: "mute", identity: participant.identity }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MicOffIcon, { width: 16, height: 16 }),
+        " Mute"
+      ] }) : !participant.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(MenuItem, { onSelect: () => act({ action: "ask_unmute", identity: participant.identity }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MicIcon, { width: 16, height: 16 }),
+        " Ask to unmute"
+      ] }) : null,
+      participant.cameraEnabled ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(MenuItem, { onSelect: () => act({ action: "stop_video", identity: participant.identity }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CameraOffIcon, { width: 16, height: 16 }),
+        " Stop video"
+      ] }) : null,
+      participant.screenSharing ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(MenuItem, { onSelect: () => act({ action: "stop_screen", identity: participant.identity }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ScreenShareIcon, { width: 16, height: 16 }),
+        " Stop screen share"
+      ] }) : null,
+      participant.handRaised ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(MenuItem, { onSelect: () => act({ action: "lower_hand", identity: participant.identity }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HandIcon, { width: 16, height: 16 }),
+        " Lower hand"
+      ] }) : null,
+      hasAccount && !participant.isAgent && participant.role !== "cohost" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(MenuItem, { onSelect: () => act({ action: "make_cohost", identity: participant.identity }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PeopleIcon, { width: 16, height: 16 }),
+        " Make co-host"
+      ] }) : null,
+      !participant.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        MenuItem,
         {
-          type: "button",
-          className: "mx-meet__link mx-meet__link--danger",
-          onClick: () => {
-            setConfirming(false);
-            void controls.remove(participant);
+          onSelect: () => {
+            setText(participant.displayName);
+            setMode("rename");
           },
-          children: "Remove"
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PencilIcon, { width: 16, height: 16 }),
+            " Rename"
+          ]
         }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: "mx-meet__link", onClick: () => setConfirming(false), children: "Keep them" })
-    ] });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    participant.micEnabled ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      ControlButton,
+      ) : null
+    ] }) : null,
+    controls.isOwner && participant.role === "cohost" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(MenuItem, { onSelect: () => act({ action: "revoke_cohost", identity: participant.identity }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PeopleIcon, { width: 16, height: 16 }),
+      " Remove co-host"
+    ] }) : null,
+    controls.isOwner && !self && hasAccount && !participant.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(MenuItem, { onSelect: () => setMode("transfer"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SpotlightIcon, { width: 16, height: 16 }),
+      " Make host"
+    ] }) : null,
+    self ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      MenuItem,
       {
-        label: `Mute ${participant.displayName}`,
-        onClick: () => void controls.mute(participant),
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MicOffIcon, { width: 14, height: 14 })
+        onSelect: () => {
+          setText(participant.displayName);
+          setMode("rename");
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PencilIcon, { width: 16, height: 16 }),
+          " Rename yourself"
+        ]
       }
     ) : null,
+    !self && !participant.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      MenuItem,
+      {
+        onSelect: () => {
+          setText("");
+          setMode("report");
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FlagIcon, { width: 16, height: 16 }),
+          " Report"
+        ]
+      }
+    ) : null,
+    moderate && !participant.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(MenuItem, { danger: true, onSelect: () => setMode("remove"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CloseIcon, { width: 16, height: 16 }),
+      " Remove from meeting"
+    ] }) : null
+  ] }) });
+}
+function SettingsPanel({ onClose }) {
+  const host = useRequiredMeetHost();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(PanelShell, { title: "Audio, video and effects", onClose, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      ControlButton,
+      DeviceSettings,
       {
-        label: `Remove ${participant.displayName}`,
-        danger: true,
-        onClick: () => setConfirming(true),
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CloseIcon, { width: 14, height: 14 })
+        onPick: (kind, deviceId2) => {
+          host.devices.select(kind, deviceId2);
+          void host.engine.switchDevice(kind, deviceId2);
+        }
       }
-    )
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EffectsSettings, {})
+  ] });
+}
+function DeviceSettings({
+  onPick
+}) {
+  const host = useRequiredMeetHost();
+  const devices = useDeviceSnapshot();
+  const microphone = devices?.selected.audioinput ?? host.devices.resolve("audioinput");
+  const speaker = devices?.selected.audiooutput ?? host.devices.resolve("audiooutput");
+  const stream = useMicrophoneStream(microphone);
+  const level = useAudioLevel(stream);
+  const [testing, setTesting] = (0, import_react4.useState)(false);
+  (0, import_react4.useEffect)(() => {
+    void host.devices.refresh();
+  }, [host]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { className: "mx-meet__section", "aria-label": "Devices", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DevicePicker, { kind: "audioinput", label: "Microphone", onPick }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mx-meet__meter", role: "meter", "aria-label": "Microphone level", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(level * 100), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { width: `${Math.min(100, Math.round(level * 160))}%` } }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DevicePicker, { kind: "audiooutput", label: "Speaker", onPick }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: "mx-meet__chip",
+        disabled: testing,
+        onClick: () => {
+          setTesting(true);
+          void playTestSound(speaker).finally(() => setTesting(false));
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SpeakerIcon, { width: 14, height: 14 }),
+          " ",
+          testing ? "Playing\u2026" : "Test speaker"
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DevicePicker, { kind: "videoinput", label: "Camera", onPick })
   ] });
 }
+function EffectsSettings({ preview }) {
+  const effects = useMediaEffects();
+  const [error, setError] = (0, import_react4.useState)(null);
+  const fileRef = (0, import_react4.useRef)(null);
+  const supported = effects.backgroundsSupported || preview != null || videoEffectsSupported();
+  const apply = (next) => {
+    setError(null);
+    void effects.set(next);
+    if (preview != null) {
+      const merged = { ...effects.effects, ...next };
+      void preview.setEffect(toVideoEffect(merged)).catch(
+        () => setError("This browser could not run the background effect.")
+      );
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { className: "mx-meet__section", "aria-label": "Effects", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "mx-meet__toggle", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "input",
+        {
+          type: "checkbox",
+          checked: effects.effects.noiseSuppression,
+          onChange: (event) => apply({ noiseSuppression: event.target.checked })
+        }
+      ),
+      "Noise suppression",
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "mx-meet__hint", children: "Filters keyboards, fans and background chatter." })
+    ] }),
+    supported ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mx-meet__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "mx-meet__field-label", children: "Background" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mx-meet__pills", role: "radiogroup", "aria-label": "Background", children: ["none", "blur", "image"].map((kind) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          type: "button",
+          role: "radio",
+          "aria-checked": effects.effects.background === kind,
+          className: effects.effects.background === kind ? "mx-meet__pill mx-meet__pill--on" : "mx-meet__pill",
+          onClick: () => {
+            if (kind === "image") {
+              fileRef.current?.click();
+              return;
+            }
+            apply({ background: kind });
+          },
+          children: kind === "none" ? "None" : kind === "blur" ? "Blur" : "Picture\u2026"
+        },
+        kind
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "input",
+        {
+          ref: fileRef,
+          type: "file",
+          accept: "image/*",
+          hidden: true,
+          onChange: (event) => {
+            const file = event.target.files?.[0];
+            event.target.value = "";
+            if (file === void 0) return;
+            void shrinkImage(file).then((url) => apply({ background: "image", backgroundImage: url })).catch(() => setError("That picture could not be read. Try a JPEG or PNG."));
+          }
+        }
+      ),
+      error !== null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mx-meet__error", children: error }) : null
+    ] }) : null
+  ] });
+}
+function toVideoEffect(effects) {
+  if (effects.background === "blur") return { kind: "blur" };
+  if (effects.background === "image" && effects.backgroundImage !== null) {
+    return { kind: "image", imageUrl: effects.backgroundImage };
+  }
+  return { kind: "none" };
+}
+async function shrinkImage(file) {
+  const url = URL.createObjectURL(file);
+  try {
+    const image = new Image();
+    image.src = url;
+    await image.decode();
+    const scale = Math.min(1, 1280 / image.naturalWidth);
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.round(image.naturalWidth * scale);
+    canvas.height = Math.round(image.naturalHeight * scale);
+    const context = canvas.getContext("2d");
+    if (context === null) throw new Error("no 2d context");
+    context.drawImage(image, 0, 0, canvas.width, canvas.height);
+    return canvas.toDataURL("image/jpeg", 0.85);
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}
+async function playTestSound(sinkId) {
+  const Context = globalThis.AudioContext;
+  if (Context === void 0) return;
+  const context = new Context();
+  const destination = context.createMediaStreamDestination();
+  const gain = context.createGain();
+  gain.gain.value = 0.2;
+  gain.connect(destination);
+  for (const [frequency, start] of [
+    [660, 0],
+    [880, 0.25]
+  ]) {
+    const oscillator = context.createOscillator();
+    oscillator.frequency.value = frequency;
+    oscillator.connect(gain);
+    oscillator.start(context.currentTime + start);
+    oscillator.stop(context.currentTime + start + 0.22);
+  }
+  const audio = new Audio();
+  audio.srcObject = destination.stream;
+  const sinkable = audio;
+  if (sinkId !== null && sinkId !== "default" && sinkable.setSinkId !== void 0) {
+    await sinkable.setSinkId(sinkId).catch(() => void 0);
+  }
+  await audio.play().catch(() => void 0);
+  await new Promise((resolve) => setTimeout(resolve, 700));
+  audio.pause();
+  await context.close();
+}
+function useMicrophoneStream(deviceId2) {
+  const [stream, setStream] = (0, import_react4.useState)(null);
+  (0, import_react4.useEffect)(() => {
+    if (deviceId2 === "off") return void 0;
+    let live = true;
+    let opened = null;
+    const media = globalThis.navigator?.mediaDevices;
+    if (media === void 0) return void 0;
+    void media.getUserMedia({ audio: deviceId2 === null ? true : { deviceId: { exact: deviceId2 } } }).then((next) => {
+      if (!live) {
+        next.getTracks().forEach((track) => track.stop());
+        return;
+      }
+      opened = next;
+      setStream(next);
+    }).catch(() => setStream(null));
+    return () => {
+      live = false;
+      opened?.getTracks().forEach((track) => track.stop());
+      setStream(null);
+    };
+  }, [deviceId2]);
+  return stream;
+}
 function LobbyPanel() {
   const lobby = useLobby();
   if (!lobby.canAdmit || lobby.waiting.length === 0) return null;
@@ -6213,16 +7844,40 @@ function PreJoinBody({
   const room = useRoom();
   const devices = useDeviceSnapshot();
   const recording = useRecording();
+  const effects = useMediaEffects();
+  const { notice } = useModerationNotice();
   const [mode, setMode] = (0, import_react4.useState)("video");
   const [microphone, setMicrophone] = (0, import_react4.useState)(true);
   const [joining, setJoining] = (0, import_react4.useState)(false);
+  const camera = devices?.selected.videoinput ?? host.devices.resolve("videoinput");
+  const mic = devices?.selected.audioinput ?? host.devices.resolve("audioinput");
+  const preview = useCameraPreview(mode === "video" ? camera : void 0, effects.effects);
+  const micStream = useMicrophoneStream(microphone ? mic : "off");
+  const level = useAudioLevel(micStream);
+  const [speakerTesting, setSpeakerTesting] = (0, import_react4.useState)(false);
   (0, import_react4.useEffect)(() => {
     void host.devices.refresh();
   }, [host]);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mx-meet__prejoin", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mx-meet__preview", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mx-meet__tile-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Avatar, { name: host.identity.displayName, url: host.identity.avatarUrl, size: 96 }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mx-meet__preview", children: [
+      mode === "video" && preview.preview !== null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "video",
+        {
+          className: "mx-meet__video mx-meet__video--mirror",
+          autoPlay: true,
+          playsInline: true,
+          muted: true,
+          ref: (element) => {
+            if (element !== null) preview.preview?.attach(element);
+          }
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mx-meet__tile-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Avatar, { name: host.identity.displayName, url: host.identity.avatarUrl, size: 96 }) }),
+      mode === "video" && preview.error !== null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mx-meet__preview-note", children: preview.error }) : null,
+      microphone && micStream !== null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mx-meet__meter mx-meet__meter--preview", role: "meter", "aria-label": "Microphone level", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(level * 100), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { width: `${Math.min(100, Math.round(level * 160))}%` } }) }) : null
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mx-meet__prejoin-panel", children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h1", { className: "mx-meet__prejoin-title", children: "Ready to join?" }),
+      notice?.kind === "removed" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mx-meet__warning", children: notice.text }) : null,
       devices?.labelsHidden === true ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "mx-meet__panel-note", children: [
         "Your browser is hiding device names until you allow camera and microphone access.",
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -6239,7 +7894,30 @@ function PreJoinBody({
       ] }) : null,
       devices?.fallbackNotice != null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mx-meet__warning", children: devices.fallbackNotice }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DevicePicker, { kind: "audioinput", label: "Microphone" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mx-meet__field-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DevicePicker, { kind: "audiooutput", label: "Speaker" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "button",
+          {
+            type: "button",
+            className: "mx-meet__chip",
+            disabled: speakerTesting,
+            onClick: () => {
+              setSpeakerTesting(true);
+              void playTestSound(devices?.selected.audiooutput ?? host.devices.resolve("audiooutput")).finally(
+                () => setSpeakerTesting(false)
+              );
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SpeakerIcon, { width: 14, height: 14 }),
+              " ",
+              speakerTesting ? "Playing\u2026" : "Test"
+            ]
+          }
+        )
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DevicePicker, { kind: "videoinput", label: "Camera" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EffectsSettings, { preview: preview.preview }),
       recording.consentNotice !== null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mx-meet__consent", children: recording.consentNotice }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mx-meet__prejoin-actions", children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "mx-meet__toggle", children: [
@@ -6271,6 +7949,7 @@ function PreJoinBody({
             className: "mx-meet__primary",
             onClick: () => {
               setJoining(true);
+              preview.release();
               void room.join({
                 roomName,
                 mode,
@@ -6290,9 +7969,51 @@ function PreJoinBody({
     ] })
   ] });
 }
+function useCameraPreview(deviceId2, effects) {
+  const [preview, setPreview] = (0, import_react4.useState)(null);
+  const [error, setError] = (0, import_react4.useState)(null);
+  const current = (0, import_react4.useRef)(null);
+  const initialEffect = (0, import_react4.useRef)(toVideoEffect(effects));
+  initialEffect.current = toVideoEffect(effects);
+  (0, import_react4.useEffect)(() => {
+    if (deviceId2 === void 0) return void 0;
+    let live = true;
+    setError(null);
+    void createCameraPreview(deviceId2, initialEffect.current).then((created) => {
+      if (!live) {
+        created.stop();
+        return;
+      }
+      current.current = created;
+      setPreview(created);
+    }).catch((thrown) => {
+      if (!live) return;
+      const failure = thrown;
+      const message = (failure.message ?? "").replace(/^meet\.[A-Za-z.()]+:\s*/, "");
+      const sentence = message.length > 0 ? message.charAt(0).toUpperCase() + message.slice(1) : "";
+      setError([sentence, failure.remedy].filter(Boolean).join(". ") || "The camera did not start.");
+    });
+    return () => {
+      live = false;
+      current.current?.stop();
+      current.current = null;
+      setPreview(null);
+    };
+  }, [deviceId2]);
+  return {
+    preview,
+    error,
+    release: () => {
+      current.current?.stop();
+      current.current = null;
+      setPreview(null);
+    }
+  };
+}
 function DevicePicker({
   kind,
-  label
+  label,
+  onPick
 }) {
   const host = useRequiredMeetHost();
   const devices = useDeviceSnapshot();
@@ -6305,7 +8026,10 @@ function DevicePicker({
       {
         className: "mx-meet__select",
         value: devices?.selected[kind] ?? host.devices.resolve(kind) ?? "",
-        onChange: (event) => host.devices.select(kind, event.target.value),
+        onChange: (event) => {
+          if (onPick !== void 0) onPick(kind, event.target.value);
+          else host.devices.select(kind, event.target.value);
+        },
         children: list.map((device) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: device.deviceId, children: device.label.length > 0 ? device.label : `${label} (name hidden)` }, device.deviceId))
       }
     )