@ai-matrx/meet 0.7.3 → 0.7.5

package/dist/react.js

@@ -211,7 +211,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));
@@ -1516,6 +1525,11 @@ function captionSegment(args) {
 }
 
 // src/core/store.ts
+var DEFAULT_EFFECTS = {
+  noiseSuppression: true,
+  background: "none",
+  backgroundImage: null
+};
 var NO_GRANTS = {
   role: "participant",
   canRecord: false,
@@ -1538,7 +1552,12 @@ var EMPTY = {
   recordingSource: "local",
   recordingId: null,
   chat: [],
+  chatLoaded: false,
   reactions: [],
+  spotlight: null,
+  moderationNotice: null,
+  actionNotice: null,
+  effects: DEFAULT_EFFECTS,
   transcript: [],
   notes: [],
   names: {},
@@ -1577,6 +1596,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,
@@ -1590,6 +1610,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
         }))
       });
@@ -1612,11 +1633,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
         )
       });
     },
@@ -1626,6 +1653,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, 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] });
     },
@@ -1716,7 +1768,7 @@ function createMeetStore(initial = {}) {
       commit({ ...state, media: { ...state.media, [kind]: next } });
     },
     reset() {
-      commit({ ...EMPTY });
+      commit({ ...EMPTY, effects: state.effects });
     }
   };
 }
@@ -2971,7 +3023,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);
@@ -3007,6 +3071,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`);
   }
@@ -3098,6 +3166,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:";
@@ -3162,8 +3325,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 = {
@@ -3299,7 +3461,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));
@@ -3403,7 +3595,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") {
@@ -3417,12 +3613,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;
@@ -3468,6 +3666,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);
     }
@@ -3490,9 +3706,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) {
@@ -3548,7 +3785,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;
@@ -3558,32 +3795,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" });
@@ -3614,6 +3860,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) {
@@ -3658,11 +4090,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 module;
@@ -3691,7 +4160,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));
@@ -3768,6 +4239,7 @@ function createLiveKitDriver(handlers, options = {}) {
         throw normalizeDeviceError(error, "meet.connect");
       }
       projectRoster?.();
+      handlers.roomMetadata?.(target.metadata ?? "");
     },
     async disconnect() {
       if (room === null) return;
@@ -3782,14 +4254,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");
       }
@@ -3801,14 +4278,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];
@@ -3842,6 +4345,52 @@ function createLiveKitDriver(handlers, options = {}) {
     }
   };
 }
+async function createCameraPreview(deviceId2, effect) {
+  let module;
+  try {
+    module = 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 module.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
 import { jsx } from "react/jsx-runtime";
@@ -3951,7 +4500,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,
@@ -3970,7 +4521,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,
@@ -3985,16 +4538,32 @@ 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;
+        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,
@@ -4016,6 +4585,7 @@ function MeetRuntime(props) {
       },
       storage: createWebDeviceStorage()
     });
+    devicesHolder.current = devices;
     const calls = identity.userId === null ? null : createCallCenter({
       manager,
       repository,
@@ -4030,6 +4600,7 @@ function MeetRuntime(props) {
       engine,
       calls,
       meetings,
+      inRoom,
       recording,
       devices,
       repository,
@@ -4151,7 +4722,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);
@@ -4630,7 +5202,14 @@ function useRoom() {
       [engine]
     ),
     sendChat: useCallback2(
-      async (text3) => requireEngine(engine, "sendChat").sendChat(text3),
+      async (text3) => {
+        if (host === null) throw noRuntime("sendChat");
+        await host.inRoom.sendChat(text3);
+      },
+      [host]
+    ),
+    sendPrivateChat: useCallback2(
+      async (to, text3) => requireEngine(engine, "sendPrivateChat").sendPrivateChat(to, text3),
       [engine]
     ),
     pin: useCallback2(
@@ -4651,6 +5230,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
@@ -4983,33 +5563,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] = useState2(false);
+  const inRoom = host?.inRoom ?? null;
+  const store = host?.store ?? null;
+  const notice = snapshot?.actionNotice ?? null;
+  const setNotice = useCallback2(
+    (next) => store?.patch({ actionNotice: next === null ? null : { ...next, at: Date.now() } }),
+    [store]
+  );
+  const run = useCallback2(
+    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: useCallback2(() => setNotice(null), [setNotice]),
     canModerate: useCallback2(
       (target) => canModerateParticipant(actor, target),
       [actor]
     ),
+    run,
     mute: useCallback2(
-      async (target) => requireEngine(engine, "muteParticipant").publishHostAction({
-        kind: "mute",
-        identity: target.identity
-      }),
-      [engine]
+      async (target) => {
+        await run({ action: "mute", identity: target.identity });
+      },
+      [run]
     ),
     remove: useCallback2(
-      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 useMemo2(
+    () => (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: useCallback2(
+      async (next) => requireEngine(engine, "setEffects").setEffects(next),
       [engine]
     )
   };
 }
+function useModerationNotice() {
+  const host = useMeetHost();
+  const snapshot = useMeetSnapshot();
+  return {
+    notice: snapshot?.moderationNotice ?? null,
+    dismiss: useCallback2(() => host?.store.patch({ moderationNotice: null }), [host])
+  };
+}
+function useAudioLevel(stream) {
+  const [level, setLevel] = useState2(0);
+  useEffect2(() => {
+    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 = useRef2(handlers);
+  ref.current = handlers;
+  useEffect2(() => {
+    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;
 }
@@ -5185,7 +5892,7 @@ function useGuestRecordAccess(meeting) {
 }
 
 // src/react/components.tsx
-import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
+import { useEffect as useEffect3, useLayoutEffect, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
 import { ErrorBox } from "@ai-matrx/design-system";
 import { avatarPaletteIndex, formatDurationMs as formatDurationMs2, getInitials } from "@ai-matrx/kit/format";
 
@@ -5356,13 +6063,67 @@ function WifiLowIcon(props) {
     /* @__PURE__ */ jsx2("path", { d: "M8.5 16.5a5 5 0 0 1 7 0" })
   ] });
 }
-
-// src/react/components.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function InertNotice({ what }) {
-  return /* @__PURE__ */ jsxs2("div", { className: "mx-meet__empty", role: "status", children: [
-    /* @__PURE__ */ jsxs2("p", { className: "mx-meet__empty-title", children: [
-      what,
+function SmileIcon(props) {
+  return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx2("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }),
+    /* @__PURE__ */ jsx2("line", { x1: "9", x2: "9.01", y1: "9", y2: "9" }),
+    /* @__PURE__ */ jsx2("line", { x1: "15", x2: "15.01", y1: "9", y2: "9" })
+  ] });
+}
+function MoreIcon(props) {
+  return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "1" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "19", cy: "12", r: "1" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "5", cy: "12", r: "1" })
+  ] });
+}
+function SearchIcon(props) {
+  return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ jsx2("path", { d: "m21 21-4.3-4.3" })
+  ] });
+}
+function KeyboardIcon(props) {
+  return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
+    /* @__PURE__ */ jsx2("path", { d: "M10 8h.01M12 12h.01M14 8h.01M16 12h.01M18 8h.01M6 8h.01M7 16h10M8 12h.01" }),
+    /* @__PURE__ */ jsx2("rect", { width: "20", height: "16", x: "2", y: "4", rx: "2" })
+  ] });
+}
+function SpotlightIcon(props) {
+  return /* @__PURE__ */ jsx2(Icon, { ...props, children: /* @__PURE__ */ jsx2("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__ */ jsxs(Icon, { ...props, children: [
+    /* @__PURE__ */ jsx2("path", { d: "M4 20v-2", opacity: bars >= 1 ? 1 : 0.3 }),
+    /* @__PURE__ */ jsx2("path", { d: "M10 20v-6", opacity: bars >= 2 ? 1 : 0.3 }),
+    /* @__PURE__ */ jsx2("path", { d: "M16 20V9", opacity: bars >= 3 ? 1 : 0.3 }),
+    /* @__PURE__ */ jsx2("path", { d: "M22 20V4", opacity: bars >= 3 ? 1 : 0.3 })
+  ] });
+}
+function SpeakerIcon(props) {
+  return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
+    /* @__PURE__ */ jsx2("path", { d: "M11 5 6 9H2v6h4l5 4V5Z" }),
+    /* @__PURE__ */ jsx2("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" }),
+    /* @__PURE__ */ jsx2("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14" })
+  ] });
+}
+function FlagIcon(props) {
+  return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
+    /* @__PURE__ */ jsx2("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__ */ jsx2("line", { x1: "4", x2: "4", y1: "22", y2: "15" })
+  ] });
+}
+function PencilIcon(props) {
+  return /* @__PURE__ */ jsx2(Icon, { ...props, children: /* @__PURE__ */ jsx2("path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }) });
+}
+
+// src/react/components.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function InertNotice({ what }) {
+  return /* @__PURE__ */ jsxs2("div", { className: "mx-meet__empty", role: "status", children: [
+    /* @__PURE__ */ jsxs2("p", { className: "mx-meet__empty-title", children: [
+      what,
       " is not ready yet"
     ] }),
     /* @__PURE__ */ jsx3("p", { className: "mx-meet__empty-body", children: "Calls and meetings need a signed-in identity and an active organization. This will appear as soon as they resolve." })
@@ -5456,12 +6217,17 @@ function ParticipantTile({
   featured = false
 }) {
   const host = useMeetHost();
-  const canModerate2 = useCanModerate(participant);
+  const snapshot = useMeetSnapshot();
+  const queue = useHandQueue();
+  const [menu, setMenu] = useState3(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__ */ jsxs2(
     "div",
     {
@@ -5482,44 +6248,59 @@ function ParticipantTile({
             muted: participant.isLocal
           }
         ) : /* @__PURE__ */ jsx3("div", { className: "mx-meet__tile-placeholder", children: /* @__PURE__ */ jsx3(Avatar, { name: participant.displayName, url: participant.avatarUrl, size: featured ? 96 : 56 }) }),
+        participant.handRaised ? /* @__PURE__ */ jsxs2("span", { className: "mx-meet__tile-hand", title: `Hand raised \xB7 ${ordinal(handPosition)} in line`, children: [
+          /* @__PURE__ */ jsx3(HandIcon, { width: 14, height: 14 }),
+          handPosition > 0 ? handPosition : null
+        ] }) : null,
         /* @__PURE__ */ jsxs2("div", { className: "mx-meet__tile-bar", children: [
           /* @__PURE__ */ jsxs2("span", { className: "mx-meet__tile-name", children: [
+            spotlit ? /* @__PURE__ */ jsx3("span", { title: "Spotlighted for everyone", className: "mx-meet__tile-flag", children: /* @__PURE__ */ jsx3(SpotlightIcon, { width: 12, height: 12 }) }) : null,
             participant.displayName,
             participant.isLocal ? " (you)" : "",
             participant.isAgent ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__badge", children: "AI" }) : null,
             /* @__PURE__ */ jsx3(RoleBadge, { role: participant.role })
           ] }),
           !participant.micEnabled ? /* @__PURE__ */ jsx3(MicOffIcon, { width: 14, height: 14 }) : null,
-          participant.handRaised ? /* @__PURE__ */ jsx3(HandIcon, { width: 14, height: 14 }) : null,
-          /* @__PURE__ */ jsx3(ConnectionDot, { quality: participant.quality })
+          /* @__PURE__ */ jsx3(QualityBars, { quality: participant.quality })
         ] }),
-        /* @__PURE__ */ jsxs2("div", { className: "mx-meet__tile-actions", children: [
+        /* @__PURE__ */ jsxs2("div", { className: menu ? "mx-meet__tile-actions mx-meet__tile-actions--open" : "mx-meet__tile-actions", children: [
           /* @__PURE__ */ jsx3(
             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__ */ jsx3(PinIcon, { width: 16, height: 16 })
             }
           ),
-          canModerate2 ? /* @__PURE__ */ jsx3(
-            ControlButton,
-            {
-              label: `Mute ${participant.displayName}`,
-              onClick: () => {
-                void host?.engine.publishHostAction({
-                  kind: "mute",
-                  identity: participant.identity
-                });
-              },
-              children: /* @__PURE__ */ jsx3(MicOffIcon, { width: 16, height: 16 })
-            }
-          ) : null
+          /* @__PURE__ */ jsxs2("span", { className: "mx-meet__anchor", children: [
+            /* @__PURE__ */ jsx3(
+              ControlButton,
+              {
+                label: `More for ${participant.displayName}`,
+                active: menu,
+                onClick: () => setMenu(!menu),
+                children: /* @__PURE__ */ jsx3(MoreIcon, { width: 16, height: 16 })
+              }
+            ),
+            menu ? /* @__PURE__ */ jsx3(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__ */ jsx3("span", { className: `mx-meet__signal mx-meet__signal--${quality}`, title: label, "aria-label": label, role: "img", children: /* @__PURE__ */ jsx3(SignalIcon, { bars, width: 14, height: 14 }) });
+}
 function Stage({ pageSize }) {
   const stage = useStage(pageSize);
   const columns = gridColumns(stage.tiles.length);
@@ -5548,22 +6329,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] = useState3("none");
+  const [chatTo, setChatTo] = useState3(null);
+  const [popover, setPopover] = useState3("none");
+  const [shortcuts, setShortcuts] = useState3(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__ */ jsxs2(Fragment, { children: [
-    panel === "chat" ? /* @__PURE__ */ jsx3(ChatPanel, { onClose: () => setPanel("none") }) : null,
-    panel === "people" ? /* @__PURE__ */ jsx3(PeoplePanel, { onClose: () => setPanel("none") }) : null,
+    /* @__PURE__ */ jsx3(MeetingOverlays, {}),
+    shortcuts ? /* @__PURE__ */ jsx3(ShortcutsSheet, { onClose: () => setShortcuts(false) }) : null,
+    panel === "chat" ? /* @__PURE__ */ jsx3(ChatPanel, { onClose: () => setPanel("none"), to: chatTo, onTo: setChatTo }) : null,
+    panel === "people" ? /* @__PURE__ */ jsx3(
+      PeoplePanel,
+      {
+        onClose: () => setPanel("none"),
+        onMessage: (identity) => {
+          setChatTo(identity);
+          setPanel("chat");
+        }
+      }
+    ) : null,
     panel === "ai" ? /* @__PURE__ */ jsx3(AiPanel, { onClose: () => setPanel("none") }) : null,
+    panel === "settings" ? /* @__PURE__ */ jsx3(SettingsPanel, { onClose: () => setPanel("none") }) : null,
+    controls.notice !== null && panel !== "people" ? /* @__PURE__ */ jsx3(Toast, { text: controls.notice.text, failed: controls.notice.failed, onDone: controls.clearNotice }) : null,
     /* @__PURE__ */ jsxs2("div", { className: "mx-meet__controls", children: [
       /* @__PURE__ */ jsx3(
         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__ */ jsx3(MicIcon, {}) : /* @__PURE__ */ jsx3(MicOffIcon, {})
@@ -5572,7 +6383,7 @@ function ControlBar({ onLeave }) {
       /* @__PURE__ */ jsx3(
         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__ */ jsx3(CameraIcon, {}) : /* @__PURE__ */ jsx3(CameraOffIcon, {})
@@ -5587,31 +6398,152 @@ function ControlBar({ onLeave }) {
           children: /* @__PURE__ */ jsx3(ScreenShareIcon, {})
         }
       ),
+      /* @__PURE__ */ jsxs2("span", { className: "mx-meet__anchor", children: [
+        /* @__PURE__ */ jsx3(
+          ControlButton,
+          {
+            label: "Send a reaction",
+            active: popover === "reactions",
+            onClick: () => setPopover(popover === "reactions" ? "none" : "reactions"),
+            children: /* @__PURE__ */ jsx3(SmileIcon, {})
+          }
+        ),
+        popover === "reactions" ? /* @__PURE__ */ jsx3(Popover, { label: "Reactions", onClose: () => setPopover("none"), children: /* @__PURE__ */ jsx3("div", { className: "mx-meet__emoji-bar", children: MEET_REACTIONS.map((emoji) => /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: "mx-meet__emoji",
+            "aria-label": `React ${emoji}`,
+            onClick: () => void room.react(emoji),
+            children: emoji
+          },
+          emoji
+        )) }) }) : null
+      ] }),
       /* @__PURE__ */ jsx3(
         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__ */ jsx3(HandIcon, {})
         }
       ),
-      /* @__PURE__ */ jsx3(ControlButton, { label: "Chat", active: panel === "chat", onClick: () => setPanel(panel === "chat" ? "none" : "chat"), children: /* @__PURE__ */ jsx3(ChatIcon, {}) }),
+      /* @__PURE__ */ jsxs2(ControlButton, { label: "Chat (\u2318\u2325C)", active: panel === "chat", onClick: () => toggle("chat"), children: [
+        /* @__PURE__ */ jsx3(ChatIcon, {}),
+        unread > 0 ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__dot", "aria-hidden": "true" }) : null
+      ] }),
       /* @__PURE__ */ jsxs2(
         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__ */ jsx3(PeopleIcon, {}),
-            lobby.waiting.length > 0 ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__dot", "aria-hidden": "true" }) : null
+            lobby.waiting.length > 0 || controls.isHost && queue.length > 0 ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__dot", "aria-hidden": "true" }) : null
           ]
         }
       ),
-      /* @__PURE__ */ jsx3(AiControl, { active: panel === "ai", onToggle: () => setPanel(panel === "ai" ? "none" : "ai") }),
+      /* @__PURE__ */ jsx3(AiControl, { active: panel === "ai", onToggle: () => toggle("ai") }),
       recording.canStart ? /* @__PURE__ */ jsx3(ControlButton, { label: "Start recording", onClick: () => void recording.start(), children: /* @__PURE__ */ jsx3(RecordIcon, {}) }) : null,
       recording.canStop ? /* @__PURE__ */ jsx3(ControlButton, { label: "Stop recording", active: true, onClick: () => void recording.stop(), children: /* @__PURE__ */ jsx3(RecordIcon, {}) }) : null,
+      /* @__PURE__ */ jsxs2("span", { className: "mx-meet__anchor", children: [
+        /* @__PURE__ */ jsx3(
+          ControlButton,
+          {
+            label: "More options",
+            active: popover === "more" || panel === "settings",
+            onClick: () => setPopover(popover === "more" ? "none" : "more"),
+            children: /* @__PURE__ */ jsx3(MoreIcon, {})
+          }
+        ),
+        popover === "more" ? /* @__PURE__ */ jsx3(Popover, { label: "More options", onClose: () => setPopover("none"), children: /* @__PURE__ */ jsxs2("div", { className: "mx-meet__menu", role: "menu", children: [
+          /* @__PURE__ */ jsxs2(
+            MenuItem,
+            {
+              onSelect: () => {
+                setPopover("none");
+                setPanel("settings");
+              },
+              children: [
+                /* @__PURE__ */ jsx3(SettingsIcon, { width: 16, height: 16 }),
+                " Audio, video and effects"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs2(
+            MenuItem,
+            {
+              onSelect: () => {
+                setPopover("none");
+                setShortcuts(true);
+              },
+              children: [
+                /* @__PURE__ */ jsx3(KeyboardIcon, { width: 16, height: 16 }),
+                " Keyboard shortcuts"
+              ]
+            }
+          ),
+          controls.isHost ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx3("div", { className: "mx-meet__menu-sep", role: "separator" }),
+            /* @__PURE__ */ jsxs2(
+              MenuItem,
+              {
+                onSelect: () => {
+                  setPopover("none");
+                  void controls.run({ action: "mute_all" });
+                },
+                children: [
+                  /* @__PURE__ */ jsx3(MicOffIcon, { width: 16, height: 16 }),
+                  " Mute everyone"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs2(
+              MenuItem,
+              {
+                onSelect: () => {
+                  setPopover("none");
+                  void controls.run({ action: "ask_all_unmute" });
+                },
+                children: [
+                  /* @__PURE__ */ jsx3(MicIcon, { width: 16, height: 16 }),
+                  " Ask everyone to unmute"
+                ]
+              }
+            ),
+            queue.length > 0 ? /* @__PURE__ */ jsxs2(
+              MenuItem,
+              {
+                onSelect: () => {
+                  setPopover("none");
+                  void controls.run({ action: "lower_all_hands" });
+                },
+                children: [
+                  /* @__PURE__ */ jsx3(HandIcon, { width: 16, height: 16 }),
+                  " Lower all hands (",
+                  queue.length,
+                  ")"
+                ]
+              }
+            ) : null,
+            hasSpotlight ? /* @__PURE__ */ jsxs2(
+              MenuItem,
+              {
+                onSelect: () => {
+                  setPopover("none");
+                  void controls.run({ action: "spotlight", identity: null });
+                },
+                children: [
+                  /* @__PURE__ */ jsx3(SpotlightIcon, { width: 16, height: 16 }),
+                  " Remove spotlight"
+                ]
+              }
+            ) : null
+          ] }) : null
+        ] }) }) : null
+      ] }),
       /* @__PURE__ */ jsx3(
         ControlButton,
         {
@@ -5627,6 +6559,150 @@ function ControlBar({ onLeave }) {
     ] })
   ] });
 }
+function useUnreadChat(open) {
+  const snapshot = useMeetSnapshot();
+  const chat = snapshot?.chat ?? [];
+  const local = snapshot?.localIdentity ?? null;
+  const [seen, setSeen] = useState3(0);
+  useEffect3(() => {
+    if (open) setSeen(chat.length);
+  }, [open, chat.length]);
+  const loaded = snapshot?.chatLoaded === true;
+  const [baseline, setBaseline] = useState3(null);
+  useEffect3(() => {
+    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 = useRef3(null);
+  const [style, setStyle] = useState3({ visibility: "hidden" });
+  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]);
+  useEffect3(() => {
+    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__ */ jsx3("div", { ref, className: "mx-meet__popover", style, role: "dialog", "aria-label": label, children });
+}
+function MenuItem({
+  onSelect,
+  danger = false,
+  children
+}) {
+  return /* @__PURE__ */ jsx3(
+    "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 }) {
+  useEffect3(() => {
+    const timer = setTimeout(onDone, failed ? 7e3 : 4e3);
+    return () => clearTimeout(timer);
+  }, [text3, failed, onDone]);
+  return /* @__PURE__ */ jsxs2("div", { className: failed ? "mx-meet__toast mx-meet__toast--failed" : "mx-meet__toast", role: "status", children: [
+    /* @__PURE__ */ jsx3("span", { children: text3 }),
+    /* @__PURE__ */ jsx3("button", { type: "button", className: "mx-meet__toast-close", "aria-label": "Dismiss", onClick: onDone, children: /* @__PURE__ */ jsx3(CloseIcon, { width: 14, height: 14 }) })
+  ] });
+}
+function MeetingOverlays() {
+  const reactions = useReactions();
+  const { notice, dismiss } = useModerationNotice();
+  const room = useRoom();
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx3(ReactionOverlay, { reactions }),
+    notice !== null && notice.kind !== "removed" ? /* @__PURE__ */ jsxs2("div", { className: "mx-meet__notice-bar", role: "alert", children: [
+      /* @__PURE__ */ jsx3("span", { children: notice.text }),
+      notice.kind === "ask-unmute" && room.local?.micEnabled !== true ? /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: "mx-meet__primary mx-meet__primary--small",
+          onClick: () => {
+            dismiss();
+            void room.toggleMicrophone();
+          },
+          children: "Unmute"
+        }
+      ) : null,
+      /* @__PURE__ */ jsx3("button", { type: "button", className: "mx-meet__toast-close", "aria-label": "Dismiss", onClick: dismiss, children: /* @__PURE__ */ jsx3(CloseIcon, { width: 14, height: 14 }) })
+    ] }) : null
+  ] });
+}
+function ShortcutsSheet({ onClose }) {
+  useEffect3(() => {
+    const onKey = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+  return /* @__PURE__ */ jsx3("div", { className: "mx-meet__sheet-backdrop", onClick: onClose, children: /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "mx-meet__sheet",
+      role: "dialog",
+      "aria-label": "Keyboard shortcuts",
+      onClick: (event) => event.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsxs2("header", { className: "mx-meet__panel-head", children: [
+          /* @__PURE__ */ jsx3("h2", { className: "mx-meet__panel-title", children: "Keyboard shortcuts" }),
+          /* @__PURE__ */ jsx3(ControlButton, { label: "Close", onClick: onClose, children: /* @__PURE__ */ jsx3(CloseIcon, { width: 16, height: 16 }) })
+        ] }),
+        /* @__PURE__ */ jsx3("dl", { className: "mx-meet__shortcuts", children: MEET_SHORTCUTS.map((shortcut) => /* @__PURE__ */ jsxs2("div", { className: "mx-meet__shortcut", children: [
+          /* @__PURE__ */ jsx3("dt", { children: shortcut.label }),
+          /* @__PURE__ */ jsx3("dd", { children: /* @__PURE__ */ jsx3("kbd", { className: "mx-meet__kbd", children: shortcut.keys }) })
+        ] }, shortcut.id)) })
+      ]
+    }
+  ) });
+}
 function AiControl({ active, onToggle }) {
   const snapshot = useMeetSnapshot();
   const meeting = snapshot?.meeting ?? null;
@@ -5646,117 +6722,640 @@ function PanelShell({
     /* @__PURE__ */ jsx3("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] = useState3("");
+  const [recipient, setRecipient] = useState3(to);
+  const listRef = useRef3(null);
   const messages = snapshot?.chat ?? [];
-  return /* @__PURE__ */ jsxs2(PanelShell, { title: "In-meeting chat", onClose, children: [
-    /* @__PURE__ */ jsx3("p", { className: "mx-meet__panel-note", children: "In-meeting chat is ephemeral \u2014 it disappears when the meeting ends." }),
-    /* @__PURE__ */ jsx3("ul", { className: "mx-meet__chat", children: messages.map((message) => /* @__PURE__ */ jsxs2("li", { className: "mx-meet__chat-line", children: [
-      /* @__PURE__ */ jsx3("strong", { children: message.displayName }),
-      /* @__PURE__ */ jsx3("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;
+  useEffect3(() => setRecipient(to), [to]);
+  useEffect3(() => {
+    const list = listRef.current;
+    if (list !== null) list.scrollTop = list.scrollHeight;
+  }, [messages.length]);
+  const choose = (next) => {
+    setRecipient(next);
+    onTo?.(next);
+  };
+  return /* @__PURE__ */ jsxs2(PanelShell, { title: "Chat", onClose, children: [
+    /* @__PURE__ */ jsxs2("ul", { className: "mx-meet__chat", ref: listRef, children: [
+      snapshot?.chatLoaded !== true && messages.length === 0 ? /* @__PURE__ */ jsx3("li", { className: "mx-meet__panel-note", children: "Reading earlier messages\u2026" }) : messages.length === 0 ? /* @__PURE__ */ jsx3("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__ */ jsx3(ChatLine, { message, local, people }, message.id))
+    ] }),
     /* @__PURE__ */ jsxs2(
       "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__ */ jsx3(
-            "input",
+          people.length > 0 ? /* @__PURE__ */ jsxs2(
+            "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__ */ jsx3("option", { value: "", children: "Everyone" }),
+                people.map((participant) => /* @__PURE__ */ jsxs2("option", { value: participant.identity, children: [
+                  participant.displayName,
+                  " (private)"
+                ] }, participant.identity))
+              ]
             }
-          ),
-          /* @__PURE__ */ jsx3("button", { type: "submit", className: "mx-meet__send", children: "Send" })
+          ) : null,
+          /* @__PURE__ */ jsxs2("div", { className: "mx-meet__composer-row", children: [
+            /* @__PURE__ */ jsx3(
+              "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__ */ jsx3("button", { type: "submit", className: "mx-meet__send", disabled: draft.trim().length === 0, children: "Send" })
+          ] }),
+          recipientName !== null ? /* @__PURE__ */ jsxs2("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__ */ jsxs2(
+    "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__ */ jsxs2("span", { className: "mx-meet__chat-meta", children: [
+          /* @__PURE__ */ jsx3("strong", { children: mine ? "You" : message.displayName }),
+          counterpart !== null ? /* @__PURE__ */ jsxs2("span", { className: "mx-meet__chat-private", children: [
+            "to ",
+            counterpart,
+            " \xB7 private"
+          ] }) : null,
+          /* @__PURE__ */ jsx3("time", { dateTime: message.at, children: clockOf(message.at) })
+        ] }),
+        /* @__PURE__ */ jsx3("span", { className: "mx-meet__chat-text", children: message.text }),
+        message.failed !== void 0 ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__chat-failed", children: message.failed }) : privateTo === null && message.saved === false ? /* @__PURE__ */ jsx3("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] = useState3("");
+  const [menuFor, setMenuFor] = useState3(null);
   const myRole = useRole();
   const local = snapshot?.localIdentity ?? null;
-  return /* @__PURE__ */ jsxs2(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__ */ jsxs2(PanelShell, { title: `People (${everyone.length})`, onClose, children: [
     /* @__PURE__ */ jsx3(LobbyPanel, {}),
-    snapshot?.meeting !== null && snapshot?.meeting !== void 0 ? /* @__PURE__ */ jsx3(GuestRecordAccessControl, { meeting: snapshot.meeting }) : null,
-    /* @__PURE__ */ jsx3("ul", { className: "mx-meet__people", children: (snapshot?.participants ?? []).map((participant) => /* @__PURE__ */ jsxs2("li", { className: "mx-meet__person", children: [
-      /* @__PURE__ */ jsx3(Avatar, { name: participant.displayName, url: participant.avatarUrl, size: 32 }),
-      /* @__PURE__ */ jsxs2("span", { className: "mx-meet__person-name", children: [
-        participant.displayName,
-        /* @__PURE__ */ jsx3(
-          RoleBadge,
+    queue.length > 0 ? /* @__PURE__ */ jsxs2("section", { className: "mx-meet__section", "aria-label": "Raised hands", children: [
+      /* @__PURE__ */ jsxs2("header", { className: "mx-meet__section-head", children: [
+        /* @__PURE__ */ jsxs2("h3", { className: "mx-meet__section-title", children: [
+          "Raised hands \xB7 ",
+          queue.length
+        ] }),
+        controls.isHost ? /* @__PURE__ */ jsx3(
+          "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__ */ jsx3("span", { className: "mx-meet__badge", children: "Meeting assistant" }) : null
+        ) : null
       ] }),
-      !participant.micEnabled && !isNoteTaker(participant) ? /* @__PURE__ */ jsx3(MicOffIcon, { width: 14, height: 14 }) : null,
-      participant.handRaised ? /* @__PURE__ */ jsx3(HandIcon, { width: 14, height: 14 }) : null,
-      controls.canModerate(participant) ? /* @__PURE__ */ jsx3(PersonHostActions, { participant, controls }) : null
-    ] }, participant.identity)) })
+      /* @__PURE__ */ jsx3("ol", { className: "mx-meet__queue", children: queue.map((participant) => /* @__PURE__ */ jsxs2("li", { className: "mx-meet__person", children: [
+        /* @__PURE__ */ jsx3(Avatar, { name: participant.displayName, url: participant.avatarUrl, size: 28 }),
+        /* @__PURE__ */ jsxs2("span", { className: "mx-meet__person-name", children: [
+          participant.displayName,
+          participant.identity === local ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__you", children: " (you)" }) : null
+        ] }),
+        controls.isHost || participant.identity === local ? /* @__PURE__ */ jsx3(
+          "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__ */ jsxs2("div", { className: "mx-meet__bulk", children: [
+      /* @__PURE__ */ jsxs2("button", { type: "button", className: "mx-meet__chip", onClick: () => void controls.run({ action: "mute_all" }), children: [
+        /* @__PURE__ */ jsx3(MicOffIcon, { width: 14, height: 14 }),
+        " Mute all"
+      ] }),
+      /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          type: "button",
+          className: "mx-meet__chip",
+          onClick: () => void controls.run({ action: "ask_all_unmute" }),
+          children: [
+            /* @__PURE__ */ jsx3(MicIcon, { width: 14, height: 14 }),
+            " Ask all to unmute"
+          ]
+        }
+      )
+    ] }) : null,
+    everyone.length > 4 ? /* @__PURE__ */ jsxs2("label", { className: "mx-meet__search", children: [
+      /* @__PURE__ */ jsx3(SearchIcon, { width: 16, height: 16 }),
+      /* @__PURE__ */ jsx3(
+        "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__ */ jsx3("p", { className: controls.notice.failed ? "mx-meet__error" : "mx-meet__notice", role: "status", children: controls.notice.text }) : null,
+    /* @__PURE__ */ jsxs2("ul", { className: "mx-meet__people", children: [
+      shown.map((participant) => /* @__PURE__ */ jsxs2("li", { className: "mx-meet__person", children: [
+        /* @__PURE__ */ jsx3(Avatar, { name: participant.displayName, url: participant.avatarUrl, size: 32 }),
+        /* @__PURE__ */ jsxs2("span", { className: "mx-meet__person-name", children: [
+          participant.displayName,
+          participant.identity === local ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__you", children: " (you)" }) : null,
+          /* @__PURE__ */ jsx3(RoleBadge, { role: participant.identity === local ? myRole : participant.role }),
+          isNoteTaker(participant) ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__badge", children: "Meeting assistant" }) : null,
+          snapshot?.spotlight === participant.identity ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__badge", children: "Spotlight" }) : null
+        ] }),
+        participant.handRaised ? /* @__PURE__ */ jsx3(HandIcon, { width: 14, height: 14 }) : null,
+        !participant.micEnabled && !isNoteTaker(participant) ? /* @__PURE__ */ jsx3(MicOffIcon, { width: 14, height: 14 }) : null,
+        /* @__PURE__ */ jsx3(QualityBars, { quality: participant.quality }),
+        /* @__PURE__ */ jsxs2("span", { className: "mx-meet__anchor", children: [
+          /* @__PURE__ */ jsx3(
+            ControlButton,
+            {
+              label: `More for ${participant.displayName}`,
+              active: menuFor === participant.identity,
+              onClick: () => setMenuFor(menuFor === participant.identity ? null : participant.identity),
+              children: /* @__PURE__ */ jsx3(MoreIcon, { width: 16, height: 16 })
+            }
+          ),
+          menuFor === participant.identity ? /* @__PURE__ */ jsx3(
+            PersonMenu,
+            {
+              participant,
+              placement: "down",
+              onClose: () => setMenuFor(null),
+              ...onMessage !== void 0 ? { onMessage } : {}
+            }
+          ) : null
+        ] })
+      ] }, participant.identity)),
+      shown.length === 0 ? /* @__PURE__ */ jsxs2("li", { className: "mx-meet__panel-note", children: [
+        "Nobody matches \u201C",
+        query,
+        "\u201D."
+      ] }) : null
+    ] }),
+    snapshot?.meeting !== null && snapshot?.meeting !== void 0 ? /* @__PURE__ */ jsx3(GuestRecordAccessControl, { meeting: snapshot.meeting }) : null
   ] });
 }
-function PersonHostActions({
+function PersonMenu({
   participant,
-  controls
+  onClose,
+  onMessage,
+  placement = "down"
 }) {
-  const [confirming, setConfirming] = useState3(false);
-  if (confirming) {
-    return /* @__PURE__ */ jsxs2("span", { className: "mx-meet__confirm", role: "group", "aria-label": `Remove ${participant.displayName}?`, children: [
-      /* @__PURE__ */ jsxs2("span", { className: "mx-meet__confirm-text", children: [
-        "Remove ",
-        participant.displayName,
-        "? They leave the meeting immediately and have to be let back in."
-      ] }),
-      /* @__PURE__ */ jsx3(
-        "button",
+  const host = useMeetHost();
+  const snapshot = useMeetSnapshot();
+  const controls = useHostControls();
+  const [mode, setMode] = useState3("menu");
+  const [text3, setText] = useState3("");
+  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__ */ jsx3(Popover, { label: renaming ? "Rename" : "Report", onClose, placement, children: /* @__PURE__ */ jsxs2(
+      "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__ */ jsxs2("label", { className: "mx-meet__field", children: [
+            /* @__PURE__ */ jsx3("span", { className: "mx-meet__field-label", children: renaming ? "Name shown in this meeting" : `What did ${participant.displayName} do?` }),
+            renaming ? /* @__PURE__ */ jsx3(
+              "input",
+              {
+                className: "mx-meet__input",
+                autoFocus: true,
+                maxLength: 80,
+                value: text3,
+                onChange: (event) => setText(event.target.value)
+              }
+            ) : /* @__PURE__ */ jsx3(
+              "textarea",
+              {
+                className: "mx-meet__input",
+                autoFocus: true,
+                rows: 3,
+                maxLength: 1e3,
+                value: text3,
+                onChange: (event) => setText(event.target.value)
+              }
+            )
+          ] }),
+          controls.notice?.failed === true ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__error", children: controls.notice.text }) : null,
+          /* @__PURE__ */ jsxs2("div", { className: "mx-meet__menu-actions", children: [
+            /* @__PURE__ */ jsx3("button", { type: "button", className: "mx-meet__link", onClick: () => setMode("menu"), children: "Back" }),
+            /* @__PURE__ */ jsx3("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__ */ jsx3(Popover, { label: removing ? "Remove" : "Make host", onClose, placement, children: /* @__PURE__ */ jsxs2("div", { className: "mx-meet__menu-form", children: [
+      /* @__PURE__ */ jsx3("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__ */ jsxs2("div", { className: "mx-meet__menu-actions", children: [
+        /* @__PURE__ */ jsx3("button", { type: "button", className: "mx-meet__link", onClick: () => setMode("menu"), children: "Cancel" }),
+        /* @__PURE__ */ jsx3(
+          "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__ */ jsx3(Popover, { label: `Options for ${participant.displayName}`, onClose, placement, children: /* @__PURE__ */ jsxs2("div", { className: "mx-meet__menu", role: "menu", children: [
+    /* @__PURE__ */ jsxs2(
+      MenuItem,
+      {
+        onSelect: () => {
+          host?.engine.pin(pinned ? null : participant.identity);
+          onClose();
+        },
+        children: [
+          /* @__PURE__ */ jsx3(PinIcon, { width: 16, height: 16 }),
+          " ",
+          pinned ? "Unpin" : "Pin for me"
+        ]
+      }
+    ),
+    !self && !participant.isAgent && onMessage !== void 0 ? /* @__PURE__ */ jsxs2(
+      MenuItem,
+      {
+        onSelect: () => {
+          onMessage(participant.identity);
+          onClose();
+        },
+        children: [
+          /* @__PURE__ */ jsx3(ChatIcon, { width: 16, height: 16 }),
+          " Message privately"
+        ]
+      }
+    ) : null,
+    controls.isHost ? /* @__PURE__ */ jsxs2(MenuItem, { onSelect: () => act({ action: "spotlight", identity: spotlit ? null : participant.identity }), children: [
+      /* @__PURE__ */ jsx3(SpotlightIcon, { width: 16, height: 16 }),
+      " ",
+      spotlit ? "Remove spotlight" : "Spotlight for everyone"
+    ] }) : null,
+    moderate ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx3("div", { className: "mx-meet__menu-sep", role: "separator" }),
+      participant.micEnabled ? /* @__PURE__ */ jsxs2(MenuItem, { onSelect: () => act({ action: "mute", identity: participant.identity }), children: [
+        /* @__PURE__ */ jsx3(MicOffIcon, { width: 16, height: 16 }),
+        " Mute"
+      ] }) : !participant.isAgent ? /* @__PURE__ */ jsxs2(MenuItem, { onSelect: () => act({ action: "ask_unmute", identity: participant.identity }), children: [
+        /* @__PURE__ */ jsx3(MicIcon, { width: 16, height: 16 }),
+        " Ask to unmute"
+      ] }) : null,
+      participant.cameraEnabled ? /* @__PURE__ */ jsxs2(MenuItem, { onSelect: () => act({ action: "stop_video", identity: participant.identity }), children: [
+        /* @__PURE__ */ jsx3(CameraOffIcon, { width: 16, height: 16 }),
+        " Stop video"
+      ] }) : null,
+      participant.screenSharing ? /* @__PURE__ */ jsxs2(MenuItem, { onSelect: () => act({ action: "stop_screen", identity: participant.identity }), children: [
+        /* @__PURE__ */ jsx3(ScreenShareIcon, { width: 16, height: 16 }),
+        " Stop screen share"
+      ] }) : null,
+      participant.handRaised ? /* @__PURE__ */ jsxs2(MenuItem, { onSelect: () => act({ action: "lower_hand", identity: participant.identity }), children: [
+        /* @__PURE__ */ jsx3(HandIcon, { width: 16, height: 16 }),
+        " Lower hand"
+      ] }) : null,
+      hasAccount && !participant.isAgent && participant.role !== "cohost" ? /* @__PURE__ */ jsxs2(MenuItem, { onSelect: () => act({ action: "make_cohost", identity: participant.identity }), children: [
+        /* @__PURE__ */ jsx3(PeopleIcon, { width: 16, height: 16 }),
+        " Make co-host"
+      ] }) : null,
+      !participant.isAgent ? /* @__PURE__ */ jsxs2(
+        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__ */ jsx3(PencilIcon, { width: 16, height: 16 }),
+            " Rename"
+          ]
         }
-      ),
-      /* @__PURE__ */ jsx3("button", { type: "button", className: "mx-meet__link", onClick: () => setConfirming(false), children: "Keep them" })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    participant.micEnabled ? /* @__PURE__ */ jsx3(
-      ControlButton,
+      ) : null
+    ] }) : null,
+    controls.isOwner && participant.role === "cohost" ? /* @__PURE__ */ jsxs2(MenuItem, { onSelect: () => act({ action: "revoke_cohost", identity: participant.identity }), children: [
+      /* @__PURE__ */ jsx3(PeopleIcon, { width: 16, height: 16 }),
+      " Remove co-host"
+    ] }) : null,
+    controls.isOwner && !self && hasAccount && !participant.isAgent ? /* @__PURE__ */ jsxs2(MenuItem, { onSelect: () => setMode("transfer"), children: [
+      /* @__PURE__ */ jsx3(SpotlightIcon, { width: 16, height: 16 }),
+      " Make host"
+    ] }) : null,
+    self ? /* @__PURE__ */ jsxs2(
+      MenuItem,
       {
-        label: `Mute ${participant.displayName}`,
-        onClick: () => void controls.mute(participant),
-        children: /* @__PURE__ */ jsx3(MicOffIcon, { width: 14, height: 14 })
+        onSelect: () => {
+          setText(participant.displayName);
+          setMode("rename");
+        },
+        children: [
+          /* @__PURE__ */ jsx3(PencilIcon, { width: 16, height: 16 }),
+          " Rename yourself"
+        ]
       }
     ) : null,
+    !self && !participant.isAgent ? /* @__PURE__ */ jsxs2(
+      MenuItem,
+      {
+        onSelect: () => {
+          setText("");
+          setMode("report");
+        },
+        children: [
+          /* @__PURE__ */ jsx3(FlagIcon, { width: 16, height: 16 }),
+          " Report"
+        ]
+      }
+    ) : null,
+    moderate && !participant.isAgent ? /* @__PURE__ */ jsxs2(MenuItem, { danger: true, onSelect: () => setMode("remove"), children: [
+      /* @__PURE__ */ jsx3(CloseIcon, { width: 16, height: 16 }),
+      " Remove from meeting"
+    ] }) : null
+  ] }) });
+}
+function SettingsPanel({ onClose }) {
+  const host = useRequiredMeetHost();
+  return /* @__PURE__ */ jsxs2(PanelShell, { title: "Audio, video and effects", onClose, children: [
     /* @__PURE__ */ jsx3(
-      ControlButton,
+      DeviceSettings,
       {
-        label: `Remove ${participant.displayName}`,
-        danger: true,
-        onClick: () => setConfirming(true),
-        children: /* @__PURE__ */ jsx3(CloseIcon, { width: 14, height: 14 })
+        onPick: (kind, deviceId2) => {
+          host.devices.select(kind, deviceId2);
+          void host.engine.switchDevice(kind, deviceId2);
+        }
       }
-    )
+    ),
+    /* @__PURE__ */ jsx3(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] = useState3(false);
+  useEffect3(() => {
+    void host.devices.refresh();
+  }, [host]);
+  return /* @__PURE__ */ jsxs2("section", { className: "mx-meet__section", "aria-label": "Devices", children: [
+    /* @__PURE__ */ jsx3(DevicePicker, { kind: "audioinput", label: "Microphone", onPick }),
+    /* @__PURE__ */ jsx3("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__ */ jsx3("span", { style: { width: `${Math.min(100, Math.round(level * 160))}%` } }) }),
+    /* @__PURE__ */ jsx3(DevicePicker, { kind: "audiooutput", label: "Speaker", onPick }),
+    /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        className: "mx-meet__chip",
+        disabled: testing,
+        onClick: () => {
+          setTesting(true);
+          void playTestSound(speaker).finally(() => setTesting(false));
+        },
+        children: [
+          /* @__PURE__ */ jsx3(SpeakerIcon, { width: 14, height: 14 }),
+          " ",
+          testing ? "Playing\u2026" : "Test speaker"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx3(DevicePicker, { kind: "videoinput", label: "Camera", onPick })
+  ] });
+}
+function EffectsSettings({ preview }) {
+  const effects = useMediaEffects();
+  const [error, setError] = useState3(null);
+  const fileRef = useRef3(null);
+  const supported = effects.backgroundsSupported || preview != null;
+  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__ */ jsxs2("section", { className: "mx-meet__section", "aria-label": "Effects", children: [
+    /* @__PURE__ */ jsxs2("label", { className: "mx-meet__toggle", children: [
+      /* @__PURE__ */ jsx3(
+        "input",
+        {
+          type: "checkbox",
+          checked: effects.effects.noiseSuppression,
+          onChange: (event) => apply({ noiseSuppression: event.target.checked })
+        }
+      ),
+      "Noise suppression",
+      /* @__PURE__ */ jsx3("span", { className: "mx-meet__hint", children: "Filters keyboards, fans and background chatter." })
+    ] }),
+    supported ? /* @__PURE__ */ jsxs2("div", { className: "mx-meet__field", children: [
+      /* @__PURE__ */ jsx3("span", { className: "mx-meet__field-label", children: "Background" }),
+      /* @__PURE__ */ jsx3("div", { className: "mx-meet__pills", role: "radiogroup", "aria-label": "Background", children: ["none", "blur", "image"].map((kind) => /* @__PURE__ */ jsx3(
+        "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__ */ jsx3(
+        "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__ */ jsx3("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] = useState3(null);
+  useEffect3(() => {
+    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;
@@ -5982,16 +7581,40 @@ function PreJoinBody({
   const room = useRoom();
   const devices = useDeviceSnapshot();
   const recording = useRecording();
+  const effects = useMediaEffects();
+  const { notice } = useModerationNotice();
   const [mode, setMode] = useState3("video");
   const [microphone, setMicrophone] = useState3(true);
   const [joining, setJoining] = useState3(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] = useState3(false);
   useEffect3(() => {
     void host.devices.refresh();
   }, [host]);
   return /* @__PURE__ */ jsxs2("div", { className: "mx-meet__prejoin", children: [
-    /* @__PURE__ */ jsx3("div", { className: "mx-meet__preview", children: /* @__PURE__ */ jsx3("div", { className: "mx-meet__tile-placeholder", children: /* @__PURE__ */ jsx3(Avatar, { name: host.identity.displayName, url: host.identity.avatarUrl, size: 96 }) }) }),
+    /* @__PURE__ */ jsxs2("div", { className: "mx-meet__preview", children: [
+      mode === "video" && preview.preview !== null ? /* @__PURE__ */ jsx3(
+        "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__ */ jsx3("div", { className: "mx-meet__tile-placeholder", children: /* @__PURE__ */ jsx3(Avatar, { name: host.identity.displayName, url: host.identity.avatarUrl, size: 96 }) }),
+      mode === "video" && preview.error !== null ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__preview-note", children: preview.error }) : null,
+      microphone ? /* @__PURE__ */ jsx3("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__ */ jsx3("span", { style: { width: `${Math.min(100, Math.round(level * 160))}%` } }) }) : null
+    ] }),
     /* @__PURE__ */ jsxs2("div", { className: "mx-meet__prejoin-panel", children: [
       /* @__PURE__ */ jsx3("h1", { className: "mx-meet__prejoin-title", children: "Ready to join?" }),
+      notice?.kind === "removed" ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__warning", children: notice.text }) : null,
       devices?.labelsHidden === true ? /* @__PURE__ */ jsxs2("p", { className: "mx-meet__panel-note", children: [
         "Your browser is hiding device names until you allow camera and microphone access.",
         /* @__PURE__ */ jsx3(
@@ -6008,7 +7631,30 @@ function PreJoinBody({
       ] }) : null,
       devices?.fallbackNotice != null ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__warning", children: devices.fallbackNotice }) : null,
       /* @__PURE__ */ jsx3(DevicePicker, { kind: "audioinput", label: "Microphone" }),
+      /* @__PURE__ */ jsxs2("div", { className: "mx-meet__field-row", children: [
+        /* @__PURE__ */ jsx3(DevicePicker, { kind: "audiooutput", label: "Speaker" }),
+        /* @__PURE__ */ jsxs2(
+          "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__ */ jsx3(SpeakerIcon, { width: 14, height: 14 }),
+              " ",
+              speakerTesting ? "Playing\u2026" : "Test"
+            ]
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsx3(DevicePicker, { kind: "videoinput", label: "Camera" }),
+      /* @__PURE__ */ jsx3(EffectsSettings, { preview: preview.preview }),
       recording.consentNotice !== null ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__consent", children: recording.consentNotice }) : null,
       /* @__PURE__ */ jsxs2("div", { className: "mx-meet__prejoin-actions", children: [
         /* @__PURE__ */ jsxs2("label", { className: "mx-meet__toggle", children: [
@@ -6040,6 +7686,7 @@ function PreJoinBody({
             className: "mx-meet__primary",
             onClick: () => {
               setJoining(true);
+              preview.release();
               void room.join({
                 roomName,
                 mode,
@@ -6059,9 +7706,49 @@ function PreJoinBody({
     ] })
   ] });
 }
+function useCameraPreview(deviceId2, effects) {
+  const [preview, setPreview] = useState3(null);
+  const [error, setError] = useState3(null);
+  const current = useRef3(null);
+  const initialEffect = useRef3(toVideoEffect(effects));
+  initialEffect.current = toVideoEffect(effects);
+  useEffect3(() => {
+    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;
+      setError([failure.message, 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();
@@ -6074,7 +7761,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__ */ jsx3("option", { value: device.deviceId, children: device.label.length > 0 ? device.label : `${label} (name hidden)` }, device.deviceId))
       }
     )
@@ -6982,19 +8672,23 @@ export {
   ControlBar,
   ControlButton,
   DATA_TOPICS,
+  DEFAULT_EFFECTS,
   DEFAULT_PAGE_SIZE,
   END_MEETING_NOT_SERVED,
   FILE_SESSION_PATH,
+  FlagIcon,
   GUEST_RECORD_ACCESS_CHOICES,
   GUEST_RECORD_ACCESS_LEVELS,
   GUEST_RECORD_ACCESS_METADATA_KEY,
   GUEST_RECORD_NOT_SHARED,
   GuestRecordAccessControl,
   HandIcon,
+  HostMenu,
   IDLE_MEDIA,
   IDLE_TRACK,
   IncomingCallCard,
   IncomingCallHost,
+  KeyboardIcon,
   LISTEN_ONLY_NOTICE,
   LayoutIcon,
   LobbyPanel,
@@ -7004,15 +8698,20 @@ export {
   MEET_ANSWER_CONTEXT_EVENT,
   MEET_ANSWER_EVENTS,
   MEET_EVENTS,
+  MEET_REACTIONS,
   MEET_ROUTES,
   MEET_SCHEMA,
+  MEET_SHORTCUTS,
+  MODERATION_ACTIONS,
   MeetError,
   MeetProvider,
   MeetingList,
+  MeetingOverlays,
   MeetingRecordView,
   MeetingRoom,
   MicIcon,
   MicOffIcon,
+  MoreIcon,
   NOTE_TAKER_IDENTITY_PREFIX,
   NOTE_TAKER_METADATA_KEY,
   NO_GRANTS,
@@ -7020,12 +8719,15 @@ export {
   PARTICIPANT_CAN_RECORD_ATTRIBUTE,
   PARTICIPANT_ROLE_ATTRIBUTE,
   ParticipantTile,
+  PencilIcon,
   PeopleIcon,
   PeoplePanel,
+  PersonMenu,
   PhoneIcon,
   PhoneOffIcon,
   PinIcon,
   PreJoin,
+  QualityBars,
   REACTION_TTL_MS,
   REFUSED_ABSENCE,
   ROLE_RANK,
@@ -7039,8 +8741,15 @@ export {
   RecordingPlayer,
   ScheduleMeeting,
   ScreenShareIcon,
+  SearchIcon,
   SettingsIcon,
+  SettingsPanel,
+  ShortcutsSheet,
+  SignalIcon,
+  SmileIcon,
   SparklesIcon,
+  SpeakerIcon,
+  SpotlightIcon,
   Stage,
   TABLES,
   TRANSCRIPTION_ATTRIBUTES,
@@ -7068,6 +8777,7 @@ export {
   createCallCenter,
   createCallInviteHandler,
   createDeviceManager,
+  createInRoomClient,
   createLiveKitDriver,
   createMeetAi,
   createMeetApi,
@@ -7080,6 +8790,7 @@ export {
   createRoomEngine,
   createTokenClient,
   createWebDeviceStorage,
+  createWebEffectsStorage,
   createWebRoomTokenStorage,
   displayNameFor,
   fileDownloadPath,
@@ -7143,6 +8854,7 @@ export {
   settingsPatch,
   snapshotParticipant,
   unavailableFrom,
+  useAudioLevel,
   useCalls,
   useCanModerate,
   useCanRecord,
@@ -7151,19 +8863,23 @@ export {
   useElapsed,
   useEndMeeting,
   useGuestRecordAccess,
+  useHandQueue,
   useHostControls,
   useIsHost,
   useListenOnlyNotice,
   useLobby,
   useLocalMedia,
   useLocalUserId,
+  useMediaEffects,
   useMeetAi,
   useMeetHost,
+  useMeetShortcuts,
   useMeetSnapshot,
   useMeeting,
   useMeetingId,
   useMeetingRecord,
   useMeetings,
+  useModerationNotice,
   useReactions,
   useRecording,
   useRequiredMeetHost,