@ai-matrx/meet 0.9.0 → 0.10.1

package/dist/skins/meet.cjs

@@ -107,10 +107,10 @@ __export(meet_exports, {
 module.exports = __toCommonJS(meet_exports);
 
 // src/skins/meet/components.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/react/facade.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/react/root.tsx
 var import_react3 = require("react");
@@ -289,7 +289,17 @@ var MEET_ROUTES = {
    */
   collab: "/api/v1/meet/collab",
   /** Meet wave 5: translate finished caption lines into this viewer's language. */
-  captionsTranslate: "/api/v1/meet/captions/translate"
+  captionsTranslate: "/api/v1/meet/captions/translate",
+  /**
+   * S4 — THE STATE READ (CORE-DESIGN §2.6): `GET ?meeting_id=` with `x-meet-pass`. This
+   * person's admission (lazy expiry applied), whether anyone who can admit is here, the run's
+   * phase. Read every `waiting_poll_seconds` while waiting and on every `mx.state.changed`.
+   */
+  state: "/api/v1/meet/state",
+  /** S4: `withdraw` (stop waiting) or `leave` (close this tab); the pass may ride in the body. */
+  leave: "/api/v1/meet/leave",
+  /** S4: a pass holder (guests included) saw the recording notice, for this run. */
+  consent: "/api/v1/meet/consent"
 };
 
 // src/core/recording.ts
@@ -350,6 +360,20 @@ function isLinkFollower(standing) {
 function isHostRole(role) {
   return role === "host" || role === "cohost";
 }
+function isObserverRole(role) {
+  return role === "viewer";
+}
+
+// src/core/app-panel.ts
+function appPanelOf(meeting) {
+  const raw = meeting?.metadata?.["app_panel"];
+  if (typeof raw !== "object" || raw === null || Array.isArray(raw)) return null;
+  const key = raw["key"];
+  const recordId = raw["record_id"];
+  if (typeof key !== "string" || key.length === 0) return null;
+  if (typeof recordId !== "string" || recordId.length === 0) return null;
+  return { key, recordId };
+}
 
 // src/core/collab.ts
 function assignedRoom(plan, identity) {
@@ -471,7 +495,7 @@ function observedPhase(input) {
     case "left":
       return "prejoin";
     case "lobby":
-      return "waiting:knocking";
+      return waitingPhase(snapshot);
     case "requesting-token":
     case "connecting":
       return "joining";
@@ -480,6 +504,24 @@ function observedPhase(input) {
       return "in_call";
   }
 }
+function waitingPhase(snapshot) {
+  switch (snapshot.waiting?.admission) {
+    case "waiting_host":
+      return "waiting:host_not_started";
+    case "denied":
+      return "denied";
+    case "expired":
+      return "knock_expired";
+    case "withdrawn":
+      return "left";
+    case "ended":
+      return "ended";
+    case "removed":
+      return "refused:removed";
+    default:
+      return "waiting:knocking";
+  }
+}
 var ADMITTER_ROLES = /* @__PURE__ */ new Set(["host", "cohost"]);
 function observe(input) {
   const { snapshot } = input;
@@ -494,7 +536,7 @@ function observe(input) {
     reason: phase.startsWith("refused:") ? phase.slice("refused:".length) : null,
     role,
     connection: snapshot?.phase === "reconnecting" ? "reconnecting" : "stable",
-    hostPresent: inCall && snapshot !== null ? snapshot.participants.some((p) => ADMITTER_ROLES.has(p.role)) : null,
+    hostPresent: inCall && snapshot !== null ? snapshot.participants.some((p) => ADMITTER_ROLES.has(p.role)) : snapshot?.phase === "lobby" ? snapshot.waiting?.admittersPresent ?? null : null,
     lobbyCount: canAdmit && snapshot !== null ? snapshot.lobby.filter((entry) => entry.state === "knocking").length : 0,
     recording: snapshot?.recording === "recording" || snapshot?.recording === "stopping",
     audioBlocked: null,
@@ -769,7 +811,10 @@ function orderParticipants(participants, activeSpeakers) {
 }
 function computeStage(args) {
   const pageSize = Math.max(1, args.pageSize ?? DEFAULT_PAGE_SIZE);
-  const ordered = orderParticipants(args.participants, args.activeSpeakers);
+  const ordered = orderParticipants(
+    args.participants.filter((participant) => !isObserverRole(participant.role)),
+    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 spotlit = args.spotlight == null ? null : ordered.find((participant) => participant.identity === args.spotlight) ?? null;
@@ -795,9 +840,97 @@ function gridColumns(count) {
   return 5;
 }
 
-// src/react/hooks.ts
+// src/react/app-panel.tsx
 var import_react4 = require("react");
-var import_react5 = require("@ai-matrx/realtime/react");
+
+// src/core/collab-state.ts
+function availableActivities(collab, isHost) {
+  const settings = collab?.settings ?? null;
+  if (settings === null) return [];
+  const out = [];
+  if (settings.whiteboardEnabled) out.push("whiteboard");
+  if (settings.pollsEnabled && (isHost || (collab?.polls.length ?? 0) > 0)) out.push("polls");
+  if (settings.qaEnabled) out.push("qa");
+  if (settings.breakoutsEnabled && (isHost || collab?.breakout?.state === "open")) out.push("breakouts");
+  return out;
+}
+function activityAttention(collab, isHost) {
+  if (collab === null) return false;
+  if (collab.polls.some((poll) => poll.state === "live" && poll.myVote.length === 0 && !isHost)) return true;
+  if (isHost && collab.questions.some((q) => q.state === "open")) return true;
+  return false;
+}
+async function performCollab(runtime, request) {
+  if (runtime === null) return { ok: false, message: "This meeting is not connected." };
+  try {
+    const result = await runtime.inRoom.collab(request);
+    return { ok: true, message: result.message, itemId: result.itemId };
+  } catch (error) {
+    return { ok: false, message: error.message ?? "That did not work." };
+  }
+}
+async function moveToRoom(runtime, roomId) {
+  if (runtime === null) return { ok: false, message: "This meeting is not connected." };
+  try {
+    await runtime.engine.moveToBreakout(roomId);
+    return { ok: true, message: roomId === null ? "Back in the main room." : "Joined the breakout room." };
+  } catch (error) {
+    return { ok: false, message: error.message ?? "That room could not be joined." };
+  }
+}
+function untranslatedLines(lines, translations) {
+  return lines.filter((line) => line.final && translations[line.id] === void 0).map(({ id, text }) => ({ id, text }));
+}
+function nextTranslationBatch(pending, language, asked) {
+  const batch = pending.filter((line) => !asked.has(`${language}:${line.id}`)).slice(-20);
+  for (const line of batch) asked.add(`${language}:${line.id}`);
+  return batch;
+}
+function setCaptionLanguage(store, next) {
+  store.patch({
+    collab: {
+      ...store.snapshot().collab,
+      captionLanguage: next,
+      captionTranslations: {},
+      captionTranslationError: null
+    }
+  });
+}
+function takePanelRequest(store) {
+  const request = store.snapshot().collab.panelRequest;
+  if (request === null) return null;
+  store.patch({ collab: { ...store.snapshot().collab, panelRequest: null } });
+  return request.panel;
+}
+function takeMoveRequest(store) {
+  const request = store.snapshot().collab.moveRequest;
+  if (request === null) return null;
+  store.patch({ collab: { ...store.snapshot().collab, moveRequest: null } });
+  return { roomId: request.roomId };
+}
+
+// src/react/app-panel.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var RegistryContext = (0, import_react4.createContext)({});
+function useMeetAppPanelRegistry() {
+  return (0, import_react4.useContext)(RegistryContext);
+}
+function useMeetAppPanel(meeting) {
+  const snapshot = useMeetSnapshot();
+  const registry = useMeetAppPanelRegistry();
+  const record = meeting ?? snapshot?.meeting ?? null;
+  return (0, import_react4.useMemo)(() => {
+    const panel = appPanelOf(record);
+    if (panel === null || record === null) return null;
+    const entry = registry[panel.key];
+    if (entry === void 0) return null;
+    return { ...entry, panel, organizationId: record.organizationId };
+  }, [record, registry]);
+}
+
+// src/react/hooks.ts
+var import_react5 = require("react");
+var import_react6 = require("@ai-matrx/realtime/react");
 
 // src/core/record.ts
 var import_format = require("@ai-matrx/kit/format");
@@ -922,51 +1055,51 @@ function useRoom() {
     failure: snapshot?.failure ?? null,
     local,
     canShareScreen: engine?.supportsScreenShare() ?? true,
-    join: (0, import_react4.useCallback)(
+    join: (0, import_react5.useCallback)(
       async (request) => requireEngine(engine, "join").join(request),
       [engine]
     ),
-    leave: (0, import_react4.useCallback)(async () => requireEngine(engine, "leave").leave(), [engine]),
-    toggleMicrophone: (0, import_react4.useCallback)(
+    leave: (0, import_react5.useCallback)(async () => requireEngine(engine, "leave").leave(), [engine]),
+    toggleMicrophone: (0, import_react5.useCallback)(
       async () => requireEngine(engine, "toggleMicrophone").setMicrophoneEnabled(
         !(local?.micEnabled ?? false)
       ),
       [engine, local]
     ),
-    toggleCamera: (0, import_react4.useCallback)(
+    toggleCamera: (0, import_react5.useCallback)(
       async () => requireEngine(engine, "toggleCamera").setCameraEnabled(!(local?.cameraEnabled ?? false)),
       [engine, local]
     ),
-    toggleScreenShare: (0, import_react4.useCallback)(
+    toggleScreenShare: (0, import_react5.useCallback)(
       async () => requireEngine(engine, "toggleScreenShare").setScreenShareEnabled(
         !(local?.screenSharing ?? false)
       ),
       [engine, local]
     ),
-    toggleHand: (0, import_react4.useCallback)(
+    toggleHand: (0, import_react5.useCallback)(
       async () => requireEngine(engine, "toggleHand").raiseHand(!(local?.handRaised ?? false)),
       [engine, local]
     ),
-    react: (0, import_react4.useCallback)(
+    react: (0, import_react5.useCallback)(
       async (emoji) => requireEngine(engine, "react").react(emoji),
       [engine]
     ),
-    sendChat: (0, import_react4.useCallback)(
+    sendChat: (0, import_react5.useCallback)(
       async (text) => {
         if (host === null) throw noRuntime("sendChat");
         await host.inRoom.sendChat(text);
       },
       [host]
     ),
-    sendPrivateChat: (0, import_react4.useCallback)(
+    sendPrivateChat: (0, import_react5.useCallback)(
       async (to, text) => requireEngine(engine, "sendPrivateChat").sendPrivateChat(to, text),
       [engine]
     ),
-    pin: (0, import_react4.useCallback)(
+    pin: (0, import_react5.useCallback)(
       (identity) => requireEngine(engine, "pin").pin(identity),
       [engine]
     ),
-    setLayout: (0, import_react4.useCallback)(
+    setLayout: (0, import_react5.useCallback)(
       (layout) => requireEngine(engine, "setLayout").setLayout(layout),
       [engine]
     )
@@ -974,8 +1107,8 @@ function useRoom() {
 }
 function useStage(pageSize = DEFAULT_PAGE_SIZE) {
   const snapshot = useMeetSnapshot();
-  const [page, setPage] = (0, import_react4.useState)(0);
-  const stage = (0, import_react4.useMemo)(
+  const [page, setPage] = (0, import_react5.useState)(0);
+  const stage = (0, import_react5.useMemo)(
     () => computeStage({
       participants: snapshot?.participants ?? [],
       layout: snapshot?.layout ?? "grid",
@@ -987,15 +1120,15 @@ function useStage(pageSize = DEFAULT_PAGE_SIZE) {
     }),
     [snapshot, pageSize, page]
   );
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (page > stage.pageCount - 1) setPage(Math.max(0, stage.pageCount - 1));
   }, [page, stage.pageCount]);
   return stage;
 }
 function useTrack(identity, kind) {
   const host = useMeetHost();
-  const detachRef = (0, import_react4.useRef)(null);
-  return (0, import_react4.useCallback)(
+  const detachRef = (0, import_react5.useRef)(null);
+  return (0, import_react5.useCallback)(
     (element) => {
       detachRef.current?.();
       detachRef.current = null;
@@ -1015,24 +1148,34 @@ function useLobby() {
     // No runtime means no host powers — `<LobbyPanel>` renders nothing rather
     // than an admit button that would throw.
     canAdmit: session !== null && isHost,
-    admit: (0, import_react4.useCallback)(
+    admit: (0, import_react5.useCallback)(
       async (entry) => requireSession(session, "admit").admit(entry, true),
       [session]
     ),
-    deny: (0, import_react4.useCallback)(
+    deny: (0, import_react5.useCallback)(
       async (entry) => requireSession(session, "deny").admit(entry, false),
       [session]
     ),
-    admitAll: (0, import_react4.useCallback)(
+    admitAll: (0, import_react5.useCallback)(
       async () => requireSession(session, "admitAll").admitAll(),
       [session]
     ),
-    knock: (0, import_react4.useCallback)(
-      (roomName) => requireSession(session, "knock").knock(roomName),
+    undeny: (0, import_react5.useCallback)(
+      async (entry) => requireSession(session, "undeny").undeny(entry),
       [session]
     )
   };
 }
+function useWaiting() {
+  const host = useMeetHost();
+  const snapshot = useMeetSnapshot();
+  const session = host?.meetings ?? null;
+  return {
+    waiting: snapshot?.waiting ?? null,
+    withdraw: (0, import_react5.useCallback)(async () => requireSession(session, "withdraw").withdraw(), [session]),
+    askAgain: (0, import_react5.useCallback)(async () => requireSession(session, "askAgain").askAgain(), [session])
+  };
+}
 function useRecording() {
   const host = useMeetHost();
   const snapshot = useMeetSnapshot();
@@ -1047,7 +1190,7 @@ function useRecording() {
     // `stopping` is already stopping; the other in-flight states can be.
     canStop: host !== null && canRecord && (state === "recording" || state === "starting"),
     consentNotice: host?.recording.consentNotice(meeting) ?? null,
-    start: (0, import_react4.useCallback)(async () => {
+    start: (0, import_react5.useCallback)(async () => {
       const live = requireHost(host, "startRecording");
       if (meeting === null || live.identity.userId === null) return;
       await live.recording.start({
@@ -1056,7 +1199,7 @@ function useRecording() {
         by: live.identity.userId
       });
     }, [host, meeting]),
-    stop: (0, import_react4.useCallback)(async () => {
+    stop: (0, import_react5.useCallback)(async () => {
       const live = requireHost(host, "stopRecording");
       if (meeting === null || live.identity.userId === null) return;
       await live.recording.stop({ meetingId: meeting.id, by: live.identity.userId });
@@ -1067,17 +1210,17 @@ function useMeetAi() {
   const host = useMeetHost();
   const snapshot = useMeetSnapshot();
   const isHost = useIsHost();
-  const [asking, setAsking] = (0, import_react4.useState)(false);
-  const [answer, setAnswer] = (0, import_react4.useState)(null);
-  const [coverage, setCoverage] = (0, import_react4.useState)(null);
-  const [phase, setPhase] = (0, import_react4.useState)(null);
-  const [error, setError] = (0, import_react4.useState)(null);
+  const [asking, setAsking] = (0, import_react5.useState)(false);
+  const [answer, setAnswer] = (0, import_react5.useState)(null);
+  const [coverage, setCoverage] = (0, import_react5.useState)(null);
+  const [phase, setPhase] = (0, import_react5.useState)(null);
+  const [error, setError] = (0, import_react5.useState)(null);
   const ai = host?.ai ?? null;
   const meeting = snapshot?.meeting ?? null;
   const participants = snapshot?.participants ?? [];
   const notes = snapshot?.notes ?? [];
   const wrapUp = snapshot?.wrapUp ?? null;
-  const status = (0, import_react4.useMemo)(
+  const status = (0, import_react5.useMemo)(
     () => noteTakerStatus({
       meeting,
       participants,
@@ -1086,7 +1229,7 @@ function useMeetAi() {
     [meeting, participants, snapshot?.noteTakerRefusal]
   );
   const names = snapshot?.names ?? EMPTY_NAMES;
-  const transcript = (0, import_react4.useMemo)(
+  const transcript = (0, import_react5.useMemo)(
     () => readableTranscript(snapshot?.transcript ?? []).map((line) => ({
       id: line.id,
       identity: line.identity,
@@ -1102,7 +1245,7 @@ function useMeetAi() {
     })),
     [snapshot?.transcript, names]
   );
-  const dispatchNoteTaker = (0, import_react4.useCallback)(
+  const dispatchNoteTaker = (0, import_react5.useCallback)(
     async (run) => {
       setError(null);
       try {
@@ -1138,7 +1281,7 @@ function useMeetAi() {
     coverage,
     phase,
     error,
-    ask: (0, import_react4.useCallback)(
+    ask: (0, import_react5.useCallback)(
       async (question) => {
         if (ai === null || meeting === null) return;
         setAsking(true);
@@ -1169,13 +1312,13 @@ function useMeetAi() {
       },
       [ai, meeting]
     ),
-    startNoteTaker: (0, import_react4.useCallback)(async () => {
+    startNoteTaker: (0, import_react5.useCallback)(async () => {
       if (ai === null || meeting === null) return;
       await dispatchNoteTaker(
         () => ai.startNoteTaker({ meetingId: meeting.id, roomName: meeting.roomName })
       );
     }, [ai, meeting, dispatchNoteTaker]),
-    stopNoteTaker: (0, import_react4.useCallback)(async () => {
+    stopNoteTaker: (0, import_react5.useCallback)(async () => {
       if (ai === null || meeting === null) return;
       await dispatchNoteTaker(() => ai.stopNoteTaker({ meetingId: meeting.id }));
     }, [ai, meeting, dispatchNoteTaker])
@@ -1185,8 +1328,8 @@ function useEndMeeting() {
   const host = useMeetHost();
   const snapshot = useMeetSnapshot();
   const isHost = useIsHost();
-  const [ending, setEnding] = (0, import_react4.useState)(false);
-  const [notice, setNotice] = (0, import_react4.useState)(null);
+  const [ending, setEnding] = (0, import_react5.useState)(false);
+  const [notice, setNotice] = (0, import_react5.useState)(null);
   const meeting = snapshot?.meeting ?? null;
   const session = host?.meetings ?? null;
   return {
@@ -1194,7 +1337,7 @@ function useEndMeeting() {
     ending,
     ended: meeting?.endedAt !== null && meeting?.endedAt !== void 0,
     notice,
-    end: (0, import_react4.useCallback)(async () => {
+    end: (0, import_react5.useCallback)(async () => {
       const live = requireSession(session, "endForEveryone");
       setEnding(true);
       setNotice(null);
@@ -1228,7 +1371,7 @@ function useReactions() {
   const host = useMeetHost();
   const snapshot = useMeetSnapshot();
   const store = host?.store ?? null;
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (store === null) return void 0;
     const timer = setInterval(() => store.expireReactions(Date.now()), REACTION_TTL_MS / 2);
     return () => clearInterval(timer);
@@ -1236,8 +1379,8 @@ function useReactions() {
   return snapshot?.reactions ?? [];
 }
 function useElapsed(startedAt) {
-  const [now, setNow] = (0, import_react4.useState)(() => Date.now());
-  (0, import_react4.useEffect)(() => {
+  const [now, setNow] = (0, import_react5.useState)(() => Date.now());
+  (0, import_react5.useEffect)(() => {
     if (startedAt === null) return void 0;
     const timer = setInterval(() => setNow(Date.now()), 1e3);
     return () => clearInterval(timer);
@@ -1253,15 +1396,15 @@ function useHostControls() {
     (participant) => participant.identity === snapshot.localIdentity
   );
   const actor = me === void 0 ? void 0 : { ...me, role };
-  const [busy, setBusy] = (0, import_react4.useState)(false);
+  const [busy, setBusy] = (0, import_react5.useState)(false);
   const inRoom = host?.inRoom ?? null;
   const store = host?.store ?? null;
   const notice = snapshot?.actionNotice ?? null;
-  const setNotice = (0, import_react4.useCallback)(
+  const setNotice = (0, import_react5.useCallback)(
     (next) => store?.patch({ actionNotice: next === null ? null : { ...next, at: Date.now() } }),
     [store]
   );
-  const run = (0, import_react4.useCallback)(
+  const run = (0, import_react5.useCallback)(
     async (request) => {
       if (inRoom === null) throw noRuntime(`moderate(${request.action})`);
       setBusy(true);
@@ -1287,19 +1430,19 @@ function useHostControls() {
     isOwner: role === "host",
     notice,
     busy,
-    clearNotice: (0, import_react4.useCallback)(() => setNotice(null), [setNotice]),
-    canModerate: (0, import_react4.useCallback)(
+    clearNotice: (0, import_react5.useCallback)(() => setNotice(null), [setNotice]),
+    canModerate: (0, import_react5.useCallback)(
       (target) => canModerateParticipant(actor, target),
       [actor]
     ),
     run,
-    mute: (0, import_react4.useCallback)(
+    mute: (0, import_react5.useCallback)(
       async (target) => {
         await run({ action: "mute", identity: target.identity });
       },
       [run]
     ),
-    remove: (0, import_react4.useCallback)(
+    remove: (0, import_react5.useCallback)(
       async (target) => {
         await run({ action: "remove", identity: target.identity });
       },
@@ -1309,7 +1452,7 @@ function useHostControls() {
 }
 function useHandQueue() {
   const snapshot = useMeetSnapshot();
-  return (0, import_react4.useMemo)(
+  return (0, import_react5.useMemo)(
     () => (snapshot?.participants ?? []).filter((participant) => participant.handRaised).sort((a, b) => (a.handRaisedAt ?? 0) - (b.handRaisedAt ?? 0)),
     [snapshot?.participants]
   );
@@ -1321,7 +1464,7 @@ function useMediaEffects() {
   return {
     effects: snapshot?.effects ?? DEFAULT_EFFECTS,
     backgroundsSupported: engine?.supportsVideoEffects() ?? false,
-    set: (0, import_react4.useCallback)(
+    set: (0, import_react5.useCallback)(
       async (next) => requireEngine(engine, "setEffects").setEffects(next),
       [engine]
     )
@@ -1332,12 +1475,12 @@ function useModerationNotice() {
   const snapshot = useMeetSnapshot();
   return {
     notice: snapshot?.moderationNotice ?? null,
-    dismiss: (0, import_react4.useCallback)(() => host?.store.patch({ moderationNotice: null }), [host])
+    dismiss: (0, import_react5.useCallback)(() => host?.store.patch({ moderationNotice: null }), [host])
   };
 }
 function useAudioLevel(stream) {
-  const [level, setLevel] = (0, import_react4.useState)(0);
-  (0, import_react4.useEffect)(() => {
+  const [level, setLevel] = (0, import_react5.useState)(0);
+  (0, import_react5.useEffect)(() => {
     if (stream === null || stream.getAudioTracks().length === 0) {
       setLevel(0);
       return void 0;
@@ -1376,9 +1519,9 @@ var MEET_SHORTCUTS = [
   { id: "help", keys: "Shift + ?", label: "Show keyboard shortcuts" }
 ];
 function useMeetShortcuts(handlers) {
-  const ref = (0, import_react4.useRef)(handlers);
+  const ref = (0, import_react5.useRef)(handlers);
   ref.current = handlers;
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     const target = globalThis.window;
     if (target === void 0) return void 0;
     const onKey = (event) => {
@@ -1407,11 +1550,11 @@ function useGuestRecordAccess(meeting) {
   const host = useMeetHost();
   const api = host?.api ?? null;
   const stored = guestRecordAccessSetting(meeting);
-  const [chosen, setChosen] = (0, import_react4.useState)(null);
-  const [effective, setEffective] = (0, import_react4.useState)(null);
-  const [saving, setSaving] = (0, import_react4.useState)(false);
-  const [error, setError] = (0, import_react4.useState)(null);
-  (0, import_react4.useEffect)(() => {
+  const [chosen, setChosen] = (0, import_react5.useState)(null);
+  const [effective, setEffective] = (0, import_react5.useState)(null);
+  const [saving, setSaving] = (0, import_react5.useState)(false);
+  const [error, setError] = (0, import_react5.useState)(null);
+  (0, import_react5.useEffect)(() => {
     setChosen(null);
   }, [stored, meeting?.id]);
   return {
@@ -1419,7 +1562,7 @@ function useGuestRecordAccess(meeting) {
     effective,
     saving,
     error,
-    choose: (0, import_react4.useCallback)(
+    choose: (0, import_react5.useCallback)(
       async (next) => {
         if (api === null || meeting === null) return;
         setSaving(true);
@@ -1447,74 +1590,8 @@ function useGuestRecordAccess(meeting) {
   };
 }
 
-// src/core/collab-state.ts
-function availableActivities(collab, isHost) {
-  const settings = collab?.settings ?? null;
-  if (settings === null) return [];
-  const out = [];
-  if (settings.whiteboardEnabled) out.push("whiteboard");
-  if (settings.pollsEnabled && (isHost || (collab?.polls.length ?? 0) > 0)) out.push("polls");
-  if (settings.qaEnabled) out.push("qa");
-  if (settings.breakoutsEnabled && (isHost || collab?.breakout?.state === "open")) out.push("breakouts");
-  return out;
-}
-function activityAttention(collab, isHost) {
-  if (collab === null) return false;
-  if (collab.polls.some((poll) => poll.state === "live" && poll.myVote.length === 0 && !isHost)) return true;
-  if (isHost && collab.questions.some((q) => q.state === "open")) return true;
-  return false;
-}
-async function performCollab(runtime, request) {
-  if (runtime === null) return { ok: false, message: "This meeting is not connected." };
-  try {
-    const result = await runtime.inRoom.collab(request);
-    return { ok: true, message: result.message, itemId: result.itemId };
-  } catch (error) {
-    return { ok: false, message: error.message ?? "That did not work." };
-  }
-}
-async function moveToRoom(runtime, roomId) {
-  if (runtime === null) return { ok: false, message: "This meeting is not connected." };
-  try {
-    await runtime.engine.moveToBreakout(roomId);
-    return { ok: true, message: roomId === null ? "Back in the main room." : "Joined the breakout room." };
-  } catch (error) {
-    return { ok: false, message: error.message ?? "That room could not be joined." };
-  }
-}
-function untranslatedLines(lines, translations) {
-  return lines.filter((line) => line.final && translations[line.id] === void 0).map(({ id, text }) => ({ id, text }));
-}
-function nextTranslationBatch(pending, language, asked) {
-  const batch = pending.filter((line) => !asked.has(`${language}:${line.id}`)).slice(-20);
-  for (const line of batch) asked.add(`${language}:${line.id}`);
-  return batch;
-}
-function setCaptionLanguage(store, next) {
-  store.patch({
-    collab: {
-      ...store.snapshot().collab,
-      captionLanguage: next,
-      captionTranslations: {},
-      captionTranslationError: null
-    }
-  });
-}
-function takePanelRequest(store) {
-  const request = store.snapshot().collab.panelRequest;
-  if (request === null) return null;
-  store.patch({ collab: { ...store.snapshot().collab, panelRequest: null } });
-  return request.panel;
-}
-function takeMoveRequest(store) {
-  const request = store.snapshot().collab.moveRequest;
-  if (request === null) return null;
-  store.patch({ collab: { ...store.snapshot().collab, moveRequest: null } });
-  return { roomId: request.roomId };
-}
-
 // src/react/collab-hooks.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 function useCollab() {
   const host = useMeetHost();
   const snapshot = useMeetSnapshot();
@@ -1541,13 +1618,13 @@ function useCaptionTranslation(lines) {
   const snapshot = useMeetSnapshot();
   const collab = snapshot?.collab ?? null;
   const language = collab?.captionLanguage ?? null;
-  const asked = (0, import_react6.useRef)(/* @__PURE__ */ new Set());
+  const asked = (0, import_react7.useRef)(/* @__PURE__ */ new Set());
   const translations = collab?.captionTranslations ?? {};
   const missing = untranslatedLines(lines, translations);
   const key = `${language ?? ""}|${missing.map((l) => l.id).join(",")}`;
-  const pending = (0, import_react6.useRef)(missing);
+  const pending = (0, import_react7.useRef)(missing);
   pending.current = missing;
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (host === null || language === null) return;
     const batch = nextTranslationBatch(pending.current, language, asked.current);
     if (batch.length === 0) return;
@@ -1558,9 +1635,9 @@ function useCaptionTranslation(lines) {
 function useCollabPanelRequest(onRequest) {
   const host = useMeetHost();
   const at = useMeetSnapshot()?.collab.panelRequest?.at ?? null;
-  const callback = (0, import_react6.useRef)(onRequest);
+  const callback = (0, import_react7.useRef)(onRequest);
   callback.current = onRequest;
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (host === null) return;
     const panel = takePanelRequest(host.store);
     if (panel === null) return;
@@ -1579,7 +1656,7 @@ function useMeetCore() {
   const role = useRole();
   const isHost = useIsHost();
   const observation = useCoreObservation();
-  return (0, import_react7.useMemo)(
+  return (0, import_react8.useMemo)(
     () => ({ host, snapshot, devices, role, isHost, observation }),
     [host, snapshot, devices, role, isHost, observation]
   );
@@ -1589,12 +1666,12 @@ function useMeetCore() {
 var import_design_system = require("@ai-matrx/design-system");
 
 // src/skins/meet/collab.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/skins/meet/icons.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function Icon({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "svg",
     {
       width: "20",
@@ -1613,227 +1690,227 @@ function Icon({ children, ...props }) {
   );
 }
 function MicIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 19v3" })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 19v3" })
   ] });
 }
 function MicOffIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M2 2l20 20" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M15 9.34V5a3 3 0 0 0-5.94-.6" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M19 10v2a7 7 0 0 1-.11 1.23M5 10v2a7 7 0 0 0 11 5.66" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 19v3" })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M2 2l20 20" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M15 9.34V5a3 3 0 0 0-5.94-.6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M19 10v2a7 7 0 0 1-.11 1.23M5 10v2a7 7 0 0 0 11 5.66" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 19v3" })
   ] });
 }
 function CameraIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m23 7-7 5 7 5V7Z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "1", y: "5", width: "15", height: "14", rx: "2" })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m23 7-7 5 7 5V7Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "1", y: "5", width: "15", height: "14", rx: "2" })
   ] });
 }
 function CameraOffIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M2 2l20 20" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M10.66 5H14a2 2 0 0 1 2 2v3.34l1 1L23 7v10" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M16 16a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2" })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M2 2l20 20" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M10.66 5H14a2 2 0 0 1 2 2v3.34l1 1L23 7v10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M16 16a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2" })
   ] });
 }
 function ScreenShareIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M8 21h8M12 17v4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 13V8m0 0-2.5 2.5M12 8l2.5 2.5" })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M8 21h8M12 17v4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 13V8m0 0-2.5 2.5M12 8l2.5 2.5" })
   ] });
 }
 function PhoneIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z" }) });
 }
 function PhoneOffIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { fill: "currentColor", stroke: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08a.99.99 0 0 1-.29-.7c0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28a11.27 11.27 0 0 0-2.67-1.85.996.996 0 0 1-.56-.9v-3.1C15.15 9.25 13.6 9 12 9Z" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { fill: "currentColor", stroke: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08a.99.99 0 0 1-.29-.7c0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28a11.27 11.27 0 0 0-2.67-1.85.996.996 0 0 1-.56-.9v-3.1C15.15 9.25 13.6 9 12 9Z" }) });
 }
 function HandIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M18 11V6a2 2 0 0 0-4 0v5" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M14 10V4a2 2 0 0 0-4 0v7" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M10 10.5V6a2 2 0 0 0-4 0v8" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2a8 8 0 0 1-8-8v-1a2 2 0 1 1 4 0" })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M18 11V6a2 2 0 0 0-4 0v5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M14 10V4a2 2 0 0 0-4 0v7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M10 10.5V6a2 2 0 0 0-4 0v8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2a8 8 0 0 1-8-8v-1a2 2 0 1 1 4 0" })
   ] });
 }
 function ChatIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z" }) });
 }
 function PeopleIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "9", cy: "7", r: "4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "9", cy: "7", r: "4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" })
   ] });
 }
 function RecordIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "8", fill: "currentColor", stroke: "none" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "8", fill: "currentColor", stroke: "none" }) });
 }
 function SparklesIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 3l1.9 4.6L18.5 9.5l-4.6 1.9L12 16l-1.9-4.6L5.5 9.5l4.6-1.9L12 3Z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M19 15l.9 2.1 2.1.9-2.1.9-.9 2.1-.9-2.1-2.1-.9 2.1-.9L19 15Z" })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 3l1.9 4.6L18.5 9.5l-4.6 1.9L12 16l-1.9-4.6L5.5 9.5l4.6-1.9L12 3Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M19 15l.9 2.1 2.1.9-2.1.9-.9 2.1-.9-2.1-2.1-.9 2.1-.9L19 15Z" })
   ] });
 }
 function LockIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "4", y: "10", width: "16", height: "11", rx: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M8 10V7a4 4 0 0 1 8 0v3" })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "4", y: "10", width: "16", height: "11", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M8 10V7a4 4 0 0 1 8 0v3" })
   ] });
 }
 function LayoutIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M3 9h18M9 21V9" })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M3 9h18M9 21V9" })
   ] });
 }
 function SettingsIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "3" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z" })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z" })
   ] });
 }
 function CheckIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M20 6 9 17l-5-5" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M20 6 9 17l-5-5" }) });
 }
 function CloseIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M18 6 6 18M6 6l12 12" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M18 6 6 18M6 6l12 12" }) });
 }
 function PinIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 17v5" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9 2h6l-1 6 3.5 3.5V14H6.5v-2.5L10 8 9 2Z" })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 17v5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M9 2h6l-1 6 3.5 3.5V14H6.5v-2.5L10 8 9 2Z" })
   ] });
 }
 function WifiLowIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 20h.01" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M8.5 16.5a5 5 0 0 1 7 0" })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 20h.01" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M8.5 16.5a5 5 0 0 1 7 0" })
   ] });
 }
 function SmileIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "9", x2: "9.01", y1: "9", y2: "9" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "15", x2: "15.01", y1: "9", y2: "9" })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "9", x2: "9.01", y1: "9", y2: "9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "15", x2: "15.01", y1: "9", y2: "9" })
   ] });
 }
 function MoreIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "19", cy: "12", r: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "5", cy: "12", r: "1" })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "19", cy: "12", r: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "5", cy: "12", r: "1" })
   ] });
 }
 function SearchIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m21 21-4.3-4.3" })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m21 21-4.3-4.3" })
   ] });
 }
 function KeyboardIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M10 8h.01M12 12h.01M14 8h.01M16 12h.01M18 8h.01M6 8h.01M7 16h10M8 12h.01" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "20", height: "16", x: "2", y: "4", rx: "2" })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M10 8h.01M12 12h.01M14 8h.01M16 12h.01M18 8h.01M6 8h.01M7 16h10M8 12h.01" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { width: "20", height: "16", x: "2", y: "4", rx: "2" })
   ] });
 }
 function SpotlightIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 2 15 8.5 22 9.3 17 14 18.2 21 12 17.6 5.8 21 7 14 2 9.3 9 8.5Z" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 2 15 8.5 22 9.3 17 14 18.2 21 12 17.6 5.8 21 7 14 2 9.3 9 8.5Z" }) });
 }
 function SignalIcon({ bars, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 20v-2", opacity: bars >= 1 ? 1 : 0.3 }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M10 20v-6", opacity: bars >= 2 ? 1 : 0.3 }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M16 20V9", opacity: bars >= 3 ? 1 : 0.3 }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M22 20V4", opacity: bars >= 3 ? 1 : 0.3 })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M4 20v-2", opacity: bars >= 1 ? 1 : 0.3 }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M10 20v-6", opacity: bars >= 2 ? 1 : 0.3 }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M16 20V9", opacity: bars >= 3 ? 1 : 0.3 }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M22 20V4", opacity: bars >= 3 ? 1 : 0.3 })
   ] });
 }
 function SpeakerIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M11 5 6 9H2v6h4l5 4V5Z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14" })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M11 5 6 9H2v6h4l5 4V5Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14" })
   ] });
 }
 function FlagIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "4", x2: "4", y1: "22", y2: "15" })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "4", x2: "4", y1: "22", y2: "15" })
   ] });
 }
 function PencilIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }) });
 }
 function ActivitiesIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "17.5", cy: "17.5", r: "3.5" })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "17.5", cy: "17.5", r: "3.5" })
   ] });
 }
 function PollIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "18", x2: "18", y1: "20", y2: "10" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", x2: "12", y1: "20", y2: "4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "6", x2: "6", y1: "20", y2: "14" })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "18", x2: "18", y1: "20", y2: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "12", x2: "12", y1: "20", y2: "4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "6", x2: "6", y1: "20", y2: "14" })
   ] });
 }
 function QuestionIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 17h.01" })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 17h.01" })
   ] });
 }
 function WhiteboardIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M2 3h20" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m7 21 5-5 5 5" })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M2 3h20" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m7 21 5-5 5 5" })
   ] });
 }
 function BreakoutIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "7", height: "18", x: "3", y: "3", rx: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "7", height: "7", x: "14", y: "3", rx: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "7", height: "7", x: "14", y: "14", rx: "1" })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { width: "7", height: "18", x: "3", y: "3", rx: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { width: "7", height: "7", x: "14", y: "3", rx: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { width: "7", height: "7", x: "14", y: "14", rx: "1" })
   ] });
 }
 function UpvoteIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9 18v-6H5l7-7 7 7h-4v6H9z" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M9 18v-6H5l7-7 7 7h-4v6H9z" }) });
 }
 function EraserIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M22 21H7" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m5 11 9 9" })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M22 21H7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m5 11 9 9" })
   ] });
 }
 function HighlighterIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m9 11-6 6v3h9l3-3" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4" })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m9 11-6 6v3h9l3-3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4" })
   ] });
 }
 function UndoIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9 14 4 9l5-5" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11" })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M9 14 4 9l5-5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11" })
   ] });
 }
 
 // src/skins/meet/collab.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function useNotice() {
-  const [notice, setNotice] = (0, import_react8.useState)(null);
-  (0, import_react8.useEffect)(() => {
+  const [notice, setNotice] = (0, import_react9.useState)(null);
+  (0, import_react9.useEffect)(() => {
     if (notice === null) return void 0;
     const timer = setTimeout(() => setNotice(null), notice.failed ? 7e3 : 3e3);
     return () => clearTimeout(timer);
@@ -1842,7 +1919,7 @@ function useNotice() {
 }
 function Notice({ notice }) {
   if (notice === null) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: notice.failed ? "mx-meet__panel-note mx-meet__collab-error" : "mx-meet__panel-note", role: "status", children: notice.text });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: notice.failed ? "mx-meet__panel-note mx-meet__collab-error" : "mx-meet__panel-note", role: "status", children: notice.text });
 }
 var ACTIVITY_LABELS = {
   polls: "Polls",
@@ -1852,25 +1929,25 @@ var ACTIVITY_LABELS = {
 };
 function ActivityIcon({ panel }) {
   const props = { width: 16, height: 16 };
-  if (panel === "polls") return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PollIcon, { ...props });
-  if (panel === "qa") return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(QuestionIcon, { ...props });
-  if (panel === "whiteboard") return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WhiteboardIcon, { ...props });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BreakoutIcon, { ...props });
+  if (panel === "polls") return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PollIcon, { ...props });
+  if (panel === "qa") return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QuestionIcon, { ...props });
+  if (panel === "whiteboard") return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(WhiteboardIcon, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BreakoutIcon, { ...props });
 }
 function ActivitiesControl({
   active,
   onOpen
 }) {
-  const [open, setOpen] = (0, import_react8.useState)(false);
+  const [open, setOpen] = (0, import_react9.useState)(false);
   const available = useAvailableActivities();
   const attention = useActivityAttention();
   if (available.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "mx-meet__anchor", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ControlButton, { label: "Activities", active: open || active !== null, onClick: () => setOpen(!open), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ActivitiesIcon, {}),
-      attention ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__dot", "aria-hidden": "true" }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__anchor", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(ControlButton, { label: "Activities", active: open || active !== null, onClick: () => setOpen(!open), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ActivitiesIcon, {}),
+      attention ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__dot", "aria-hidden": "true" }) : null
     ] }),
-    open ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Popover, { label: "Activities", onClose: () => setOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mx-meet__menu", role: "menu", children: available.map((panel) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    open ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Popover, { label: "Activities", onClose: () => setOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet__menu", role: "menu", children: available.map((panel) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       MenuItem,
       {
         onSelect: () => {
@@ -1878,7 +1955,7 @@ function ActivitiesControl({
           onOpen(panel);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ActivityIcon, { panel }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ActivityIcon, { panel }),
           " ",
           ACTIVITY_LABELS[panel]
         ]
@@ -1889,11 +1966,11 @@ function ActivitiesControl({
 }
 function PollComposer({ maxOptions, onDone }) {
   const { act } = useCollab();
-  const [question, setQuestion] = (0, import_react8.useState)("");
-  const [options, setOptions] = (0, import_react8.useState)(["", ""]);
-  const [multiple, setMultiple] = (0, import_react8.useState)(false);
-  const [anonymous, setAnonymous] = (0, import_react8.useState)(false);
-  const [busy, setBusy] = (0, import_react8.useState)(false);
+  const [question, setQuestion] = (0, import_react9.useState)("");
+  const [options, setOptions] = (0, import_react9.useState)(["", ""]);
+  const [multiple, setMultiple] = (0, import_react9.useState)(false);
+  const [anonymous, setAnonymous] = (0, import_react9.useState)(false);
+  const [busy, setBusy] = (0, import_react9.useState)(false);
   const [notice, show] = useNotice();
   const filled = options.map((o) => o.trim()).filter(Boolean);
   const ready = question.trim().length > 0 && filled.length >= 2;
@@ -1916,7 +1993,7 @@ function PollComposer({ maxOptions, onDone }) {
     setBusy(false);
     onDone();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "form",
     {
       className: "mx-meet__collab-card",
@@ -1925,9 +2002,9 @@ function PollComposer({ maxOptions, onDone }) {
         if (ready) void save(true);
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "mx-meet__field", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__field-label", children: "Question" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "mx-meet__field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__field-label", children: "Question" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "input",
             {
               className: "mx-meet__input",
@@ -1939,8 +2016,8 @@ function PollComposer({ maxOptions, onDone }) {
             }
           )
         ] }),
-        options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-meet__composer-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__composer-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "input",
             {
               className: "mx-meet__input",
@@ -1951,22 +2028,22 @@ function PollComposer({ maxOptions, onDone }) {
               onChange: (event) => setOptions(options.map((o, i) => i === index ? event.target.value : o))
             }
           ),
-          options.length > 2 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ControlButton, { label: `Remove answer ${index + 1}`, onClick: () => setOptions(options.filter((_, i) => i !== index)), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CloseIcon, { width: 14, height: 14 }) }) : null
+          options.length > 2 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ControlButton, { label: `Remove answer ${index + 1}`, onClick: () => setOptions(options.filter((_, i) => i !== index)), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CloseIcon, { width: 14, height: 14 }) }) : null
         ] }, index)),
-        options.length < maxOptions ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__link", onClick: () => setOptions([...options, ""]), children: "Add an answer" }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "mx-meet__toggle", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "checkbox", checked: multiple, onChange: (event) => setMultiple(event.target.checked) }),
+        options.length < maxOptions ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mx-meet__link", onClick: () => setOptions([...options, ""]), children: "Add an answer" }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "mx-meet__toggle", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { type: "checkbox", checked: multiple, onChange: (event) => setMultiple(event.target.checked) }),
           "People can pick more than one"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "mx-meet__toggle", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "checkbox", checked: anonymous, onChange: (event) => setAnonymous(event.target.checked) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "mx-meet__toggle", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { type: "checkbox", checked: anonymous, onChange: (event) => setAnonymous(event.target.checked) }),
           "Anonymous \u2014 nobody sees who picked what"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Notice, { notice }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-meet__collab-actions", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "submit", className: "mx-meet__primary mx-meet__primary--small", disabled: !ready || busy, children: "Launch" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__chip", disabled: !ready || busy, onClick: () => void save(false), children: "Save draft" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__link", onClick: onDone, children: "Cancel" })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Notice, { notice }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__collab-actions", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "submit", className: "mx-meet__primary mx-meet__primary--small", disabled: !ready || busy, children: "Launch" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mx-meet__chip", disabled: !ready || busy, onClick: () => void save(false), children: "Save draft" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mx-meet__link", onClick: onDone, children: "Cancel" })
         ] })
       ]
     }
@@ -1974,9 +2051,9 @@ function PollComposer({ maxOptions, onDone }) {
 }
 function PollCard({ poll }) {
   const { act, isHost } = useCollab();
-  const [picked, setPicked] = (0, import_react8.useState)(poll.myVote.slice());
+  const [picked, setPicked] = (0, import_react9.useState)(poll.myVote.slice());
   const [notice, show] = useNotice();
-  (0, import_react8.useEffect)(() => setPicked(poll.myVote.slice()), [poll.myVote]);
+  (0, import_react9.useEffect)(() => setPicked(poll.myVote.slice()), [poll.myVote]);
   const counts = poll.options.some((o) => o.votes !== void 0);
   const total = poll.options.reduce((sum, o) => sum + (o.votes ?? 0), 0);
   const canVote = poll.state === "live";
@@ -1986,22 +2063,22 @@ function PollCard({ poll }) {
     if (!canVote) return;
     setPicked(poll.multiple ? picked.includes(id) ? picked.filter((p) => p !== id) : [...picked, id] : [id]);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("article", { className: "mx-meet__collab-card", "aria-label": poll.question, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("header", { className: "mx-meet__collab-head", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { className: "mx-meet__collab-title", children: poll.question }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__collab-state", children: stateWord })
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("article", { className: "mx-meet__collab-card", "aria-label": poll.question, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("header", { className: "mx-meet__collab-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { className: "mx-meet__collab-title", children: poll.question }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__collab-state", children: stateWord })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "mx-meet__panel-note", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "mx-meet__panel-note", children: [
       poll.multiple ? "Pick any." : "Pick one.",
       poll.anonymous ? " Anonymous." : "",
       counts && poll.voterCount !== null ? ` ${poll.voterCount} voted.` : "",
       isHost && poll.state !== "draft" && !poll.resultsShared ? " Results are visible only to hosts." : ""
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "mx-meet__poll-options", children: poll.options.map((option) => {
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "mx-meet__poll-options", children: poll.options.map((option) => {
       const share = counts && total > 0 ? Math.round((option.votes ?? 0) / total * 100) : 0;
       const chosen = picked.includes(option.id);
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("li", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           "button",
           {
             type: "button",
@@ -2010,9 +2087,9 @@ function PollCard({ poll }) {
             disabled: !canVote,
             onClick: () => toggle(option.id),
             children: [
-              counts ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__poll-bar", style: { width: `${share}%` }, "aria-hidden": "true" }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__poll-text", children: option.text }),
-              counts ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "mx-meet__poll-count", children: [
+              counts ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__poll-bar", style: { width: `${share}%` }, "aria-hidden": "true" }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__poll-text", children: option.text }),
+              counts ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__poll-count", children: [
                 option.votes ?? 0,
                 " \xB7 ",
                 share,
@@ -2021,12 +2098,12 @@ function PollCard({ poll }) {
             ]
           }
         ),
-        option.voters !== void 0 && option.voters.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__poll-voters", children: option.voters.join(", ") }) : null
+        option.voters !== void 0 && option.voters.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__poll-voters", children: option.voters.join(", ") }) : null
       ] }, option.id);
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Notice, { notice }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-meet__collab-actions", children: [
-      canVote ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Notice, { notice }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__collab-actions", children: [
+      canVote ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "button",
         {
           type: "button",
@@ -2036,35 +2113,35 @@ function PollCard({ poll }) {
           children: voted ? "Change vote" : "Vote"
         }
       ) : null,
-      isHost && poll.state === "draft" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__primary mx-meet__primary--small", onClick: () => void act({ action: "poll_launch", itemId: poll.id }).then(show), children: "Launch" }) : null,
-      isHost && poll.state === "live" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__chip", onClick: () => void act({ action: "poll_close", itemId: poll.id }).then(show), children: "End poll" }) : null,
-      isHost && poll.state !== "draft" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__chip", onClick: () => void act({ action: "poll_share", itemId: poll.id }).then(show), children: poll.resultsShared ? "Hide results" : "Share results" }) : null,
-      isHost && poll.state === "live" ? null : isHost ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__link", onClick: () => void act({ action: "poll_delete", itemId: poll.id }).then(show), children: "Delete" }) : null
+      isHost && poll.state === "draft" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mx-meet__primary mx-meet__primary--small", onClick: () => void act({ action: "poll_launch", itemId: poll.id }).then(show), children: "Launch" }) : null,
+      isHost && poll.state === "live" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mx-meet__chip", onClick: () => void act({ action: "poll_close", itemId: poll.id }).then(show), children: "End poll" }) : null,
+      isHost && poll.state !== "draft" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mx-meet__chip", onClick: () => void act({ action: "poll_share", itemId: poll.id }).then(show), children: poll.resultsShared ? "Hide results" : "Share results" }) : null,
+      isHost && poll.state === "live" ? null : isHost ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mx-meet__link", onClick: () => void act({ action: "poll_delete", itemId: poll.id }).then(show), children: "Delete" }) : null
     ] })
   ] });
 }
 function PollsPanel({ onClose }) {
   const { collab, isHost } = useCollab();
-  const [composing, setComposing] = (0, import_react8.useState)(false);
+  const [composing, setComposing] = (0, import_react9.useState)(false);
   const polls = collab?.polls ?? [];
   const maxOptions = collab?.settings?.pollMaxOptions ?? 10;
   const ordered = [...polls].reverse();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(PanelShell, { title: "Polls", onClose, children: [
-    collab?.error != null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "mx-meet__panel-note mx-meet__collab-error", children: collab.error }) : null,
-    isHost && !composing ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__primary mx-meet__primary--small", onClick: () => setComposing(true), children: "New poll" }) : null,
-    isHost && composing ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PollComposer, { maxOptions, onDone: () => setComposing(false) }) : null,
-    ordered.length === 0 && !composing ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "mx-meet__panel-note", children: isHost ? "No polls yet. Polls and their results are kept with the meeting." : "No polls yet." }) : null,
-    ordered.map((poll) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PollCard, { poll }, poll.id))
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(PanelShell, { title: "Polls", onClose, children: [
+    collab?.error != null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__panel-note mx-meet__collab-error", children: collab.error }) : null,
+    isHost && !composing ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mx-meet__primary mx-meet__primary--small", onClick: () => setComposing(true), children: "New poll" }) : null,
+    isHost && composing ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PollComposer, { maxOptions, onDone: () => setComposing(false) }) : null,
+    ordered.length === 0 && !composing ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__panel-note", children: isHost ? "No polls yet. Polls and their results are kept with the meeting." : "No polls yet." }) : null,
+    ordered.map((poll) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PollCard, { poll }, poll.id))
   ] });
 }
 function QuestionCard({ question }) {
   const { act, isHost } = useCollab();
-  const [answering, setAnswering] = (0, import_react8.useState)(false);
-  const [reply, setReply] = (0, import_react8.useState)("");
+  const [answering, setAnswering] = (0, import_react9.useState)(false);
+  const [reply, setReply] = (0, import_react9.useState)("");
   const [notice, show] = useNotice();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("li", { className: `mx-meet__collab-card mx-meet__question mx-meet__question--${question.state}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-meet__question-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { className: `mx-meet__collab-card mx-meet__question mx-meet__question--${question.state}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__question-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         "button",
         {
           type: "button",
@@ -2074,20 +2151,20 @@ function QuestionCard({ question }) {
           disabled: question.state === "dismissed",
           onClick: () => void act({ action: "question_upvote", itemId: question.id }).then((r) => r.ok ? void 0 : show(r)),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(UpvoteIcon, { width: 16, height: 16 }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: question.upvotes })
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(UpvoteIcon, { width: 16, height: 16 }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: question.upvotes })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-meet__question-body", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "mx-meet__chat-meta", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: question.mine ? "You" : question.askerName }),
-          question.mine && question.anonymous ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__chat-private", children: "anonymous" }) : null,
-          question.state !== "open" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__collab-state", children: question.state === "answered" ? "Answered" : "Dismissed" }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__question-body", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__chat-meta", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: question.mine ? "You" : question.askerName }),
+          question.mine && question.anonymous ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__chat-private", children: "anonymous" }) : null,
+          question.state !== "open" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__collab-state", children: question.state === "answered" ? "Answered" : "Dismissed" }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__chat-text", children: question.text }),
-        question.answer !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "mx-meet__question-answer", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("strong", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__chat-text", children: question.text }),
+        question.answer !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__question-answer", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("strong", { children: [
             question.answeredByName ?? "Host",
             ":"
           ] }),
@@ -2096,7 +2173,7 @@ function QuestionCard({ question }) {
         ] }) : null
       ] })
     ] }),
-    answering ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    answering ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "form",
       {
         className: "mx-meet__composer-row",
@@ -2111,7 +2188,7 @@ function QuestionCard({ question }) {
           });
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "input",
             {
               className: "mx-meet__input",
@@ -2123,24 +2200,24 @@ function QuestionCard({ question }) {
               autoFocus: true
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "submit", className: "mx-meet__send", children: "Done" })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "submit", className: "mx-meet__send", children: "Done" })
         ]
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Notice, { notice }),
-    isHost || question.mine ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-meet__collab-actions", children: [
-      isHost && question.state === "open" && !answering ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__chip", onClick: () => setAnswering(true), children: "Answer" }) : null,
-      isHost && question.state === "open" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__chip", onClick: () => void act({ action: "question_dismiss", itemId: question.id }).then(show), children: "Dismiss" }) : null,
-      isHost && question.state !== "open" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__chip", onClick: () => void act({ action: "question_reopen", itemId: question.id }).then(show), children: "Reopen" }) : null,
-      question.mine || isHost ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__link", onClick: () => void act({ action: "question_delete", itemId: question.id }).then(show), children: "Delete" }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Notice, { notice }),
+    isHost || question.mine ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__collab-actions", children: [
+      isHost && question.state === "open" && !answering ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mx-meet__chip", onClick: () => setAnswering(true), children: "Answer" }) : null,
+      isHost && question.state === "open" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mx-meet__chip", onClick: () => void act({ action: "question_dismiss", itemId: question.id }).then(show), children: "Dismiss" }) : null,
+      isHost && question.state !== "open" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mx-meet__chip", onClick: () => void act({ action: "question_reopen", itemId: question.id }).then(show), children: "Reopen" }) : null,
+      question.mine || isHost ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mx-meet__link", onClick: () => void act({ action: "question_delete", itemId: question.id }).then(show), children: "Delete" }) : null
     ] }) : null
   ] });
 }
 function QaPanel({ onClose }) {
   const { collab, act } = useCollab();
-  const [draft, setDraft] = (0, import_react8.useState)("");
-  const [anonymous, setAnonymous] = (0, import_react8.useState)(false);
-  const [order, setOrder] = (0, import_react8.useState)("popular");
+  const [draft, setDraft] = (0, import_react9.useState)("");
+  const [anonymous, setAnonymous] = (0, import_react9.useState)(false);
+  const [order, setOrder] = (0, import_react9.useState)("popular");
   const [notice, show] = useNotice();
   const allowAnonymous = collab?.settings?.qaAnonymousAllowed === true;
   const questions = [...collab?.questions ?? []];
@@ -2148,9 +2225,9 @@ function QaPanel({ onClose }) {
   questions.sort(
     (a, b) => rank(a) !== rank(b) ? rank(a) - rank(b) : order === "popular" ? b.upvotes - a.upvotes || (b.createdAt ?? "").localeCompare(a.createdAt ?? "") : (b.createdAt ?? "").localeCompare(a.createdAt ?? "")
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(PanelShell, { title: "Q&A", onClose, children: [
-    collab?.error != null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "mx-meet__panel-note mx-meet__collab-error", children: collab.error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(PanelShell, { title: "Q&A", onClose, children: [
+    collab?.error != null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__panel-note mx-meet__collab-error", children: collab.error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "form",
       {
         className: "mx-meet__composer mx-meet__composer--chat",
@@ -2164,8 +2241,8 @@ function QaPanel({ onClose }) {
           });
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-meet__composer-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__composer-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "input",
               {
                 className: "mx-meet__input",
@@ -2176,17 +2253,17 @@ function QaPanel({ onClose }) {
                 "aria-label": "Ask the host a question"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "submit", className: "mx-meet__send", disabled: draft.trim().length === 0, children: "Ask" })
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "submit", className: "mx-meet__send", disabled: draft.trim().length === 0, children: "Ask" })
           ] }),
-          allowAnonymous ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "mx-meet__toggle", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "checkbox", checked: anonymous, onChange: (event) => setAnonymous(event.target.checked) }),
+          allowAnonymous ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "mx-meet__toggle", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { type: "checkbox", checked: anonymous, onChange: (event) => setAnonymous(event.target.checked) }),
             "Ask anonymously"
           ] }) : null
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Notice, { notice }),
-    questions.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mx-meet__pills", role: "group", "aria-label": "Order questions", children: ["popular", "recent"].map((value) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Notice, { notice }),
+    questions.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet__pills", role: "group", "aria-label": "Order questions", children: ["popular", "recent"].map((value) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "button",
       {
         type: "button",
@@ -2197,7 +2274,7 @@ function QaPanel({ onClose }) {
       },
       value
     )) }) : null,
-    questions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "mx-meet__panel-note", children: "No questions yet. Questions are kept with the meeting." }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "mx-meet__chat", children: questions.map((question) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(QuestionCard, { question }, question.id)) })
+    questions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__panel-note", children: "No questions yet. Questions are kept with the meeting." }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "mx-meet__chat", children: questions.map((question) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QuestionCard, { question }, question.id)) })
   ] });
 }
 var BOARD_W = 1600;
@@ -2211,7 +2288,7 @@ function strokePath(points) {
   return `${move} ${rest.map(([x, y]) => `L${(x * BOARD_W).toFixed(1)} ${(y * BOARD_H).toFixed(1)}`).join(" ")}`;
 }
 function StrokeView({ stroke, onPick }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "path",
     {
       d: strokePath(stroke.points),
@@ -2223,18 +2300,18 @@ function StrokeView({ stroke, onPick }) {
       strokeLinejoin: "round",
       onPointerDown: onPick,
       style: onPick !== void 0 ? { cursor: "pointer" } : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("title", { children: stroke.byName })
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("title", { children: stroke.byName })
     }
   );
 }
 function WhiteboardPanel({ onClose }) {
   const { collab, act, isHost, localIdentity } = useCollab();
-  const [tool, setTool] = (0, import_react8.useState)("pen");
-  const [color, setColor] = (0, import_react8.useState)(INK[0]);
-  const [drawing, setDrawing] = (0, import_react8.useState)(null);
-  const [pending, setPending] = (0, import_react8.useState)([]);
+  const [tool, setTool] = (0, import_react9.useState)("pen");
+  const [color, setColor] = (0, import_react9.useState)(INK[0]);
+  const [drawing, setDrawing] = (0, import_react9.useState)(null);
+  const [pending, setPending] = (0, import_react9.useState)([]);
   const [notice, show] = useNotice();
-  const svgRef = (0, import_react8.useRef)(null);
+  const svgRef = (0, import_react9.useRef)(null);
   const strokes = collab?.strokes ?? [];
   const mine = strokes.filter((s) => s.by === localIdentity);
   const point = (event) => {
@@ -2266,14 +2343,14 @@ function WhiteboardPanel({ onClose }) {
       if (!result.ok) show(result);
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { className: "mx-meet__whiteboard", "aria-label": "Whiteboard", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("header", { className: "mx-meet__whiteboard-bar", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { className: "mx-meet__panel-title", children: "Whiteboard" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mx-meet__pills", role: "group", "aria-label": "Tool", children: [
-        ["pen", "Pen", /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PencilIcon, { width: 16, height: 16 }, "p")],
-        ["highlighter", "Highlighter", /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HighlighterIcon, { width: 16, height: 16 }, "h")],
-        ["eraser", "Eraser \u2014 click a stroke", /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(EraserIcon, { width: 16, height: 16 }, "e")]
-      ].map(([value, label, icon]) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "mx-meet__whiteboard", "aria-label": "Whiteboard", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("header", { className: "mx-meet__whiteboard-bar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { className: "mx-meet__panel-title", children: "Whiteboard" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet__pills", role: "group", "aria-label": "Tool", children: [
+        ["pen", "Pen", /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PencilIcon, { width: 16, height: 16 }, "p")],
+        ["highlighter", "Highlighter", /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HighlighterIcon, { width: 16, height: 16 }, "h")],
+        ["eraser", "Eraser \u2014 click a stroke", /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(EraserIcon, { width: 16, height: 16 }, "e")]
+      ].map(([value, label, icon]) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "button",
         {
           type: "button",
@@ -2286,7 +2363,7 @@ function WhiteboardPanel({ onClose }) {
         },
         value
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mx-meet__swatches", role: "group", "aria-label": "Color", children: INK.map((ink) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet__swatches", role: "group", "aria-label": "Color", children: INK.map((ink) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "button",
         {
           type: "button",
@@ -2301,7 +2378,7 @@ function WhiteboardPanel({ onClose }) {
         },
         ink
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         ControlButton,
         {
           label: "Undo my last stroke",
@@ -2309,15 +2386,15 @@ function WhiteboardPanel({ onClose }) {
             const last = mine[mine.length - 1];
             if (last !== void 0) void act({ action: "stroke_erase", itemId: last.id }).then((r) => r.ok ? void 0 : show(r));
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(UndoIcon, { width: 16, height: 16 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(UndoIcon, { width: 16, height: 16 })
         }
       ),
-      isHost && strokes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__chip", onClick: () => void act({ action: "whiteboard_clear" }).then(show), children: "Clear board" }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__whiteboard-note", children: "Saved with the meeting" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ControlButton, { label: "Close whiteboard", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CloseIcon, { width: 16, height: 16 }) })
+      isHost && strokes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mx-meet__chip", onClick: () => void act({ action: "whiteboard_clear" }).then(show), children: "Clear board" }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__whiteboard-note", children: "Saved with the meeting" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ControlButton, { label: "Close whiteboard", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CloseIcon, { width: 16, height: 16 }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Notice, { notice }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Notice, { notice }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "svg",
       {
         ref: svgRef,
@@ -2341,8 +2418,8 @@ function WhiteboardPanel({ onClose }) {
         onPointerUp: finish,
         onPointerCancel: finish,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: 0, y: 0, width: BOARD_W, height: BOARD_H, className: "mx-meet__board-paper" }),
-          strokes.map((stroke) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { x: 0, y: 0, width: BOARD_W, height: BOARD_H, className: "mx-meet__board-paper" }),
+          strokes.map((stroke) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             StrokeView,
             {
               stroke,
@@ -2350,8 +2427,8 @@ function WhiteboardPanel({ onClose }) {
             },
             stroke.id
           )),
-          pending.map((stroke) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StrokeView, { stroke }, stroke.id)),
-          drawing !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          pending.map((stroke) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StrokeView, { stroke }, stroke.id)),
+          drawing !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             StrokeView,
             {
               stroke: {
@@ -2375,8 +2452,8 @@ function clock(ms) {
 }
 var BREAKOUT_EXPIRE_RETRY_MS = 5e3;
 function useNow(active) {
-  const [now, setNow] = (0, import_react8.useState)(() => Date.now());
-  (0, import_react8.useEffect)(() => {
+  const [now, setNow] = (0, import_react9.useState)(() => Date.now());
+  (0, import_react9.useEffect)(() => {
     if (!active) return void 0;
     const timer = setInterval(() => setNow(Date.now()), 1e3);
     return () => clearInterval(timer);
@@ -2390,11 +2467,11 @@ function BreakoutSetup() {
   const people = (snapshot?.participants ?? []).filter(
     (p) => !p.isAgent && p.role !== "host" && p.role !== "cohost"
   );
-  const [count, setCount] = (0, import_react8.useState)(Math.min(Math.max(2, Math.ceil(people.length / 4)), settings?.breakoutMaxRooms ?? 20));
-  const [mode, setMode] = (0, import_react8.useState)("auto");
-  const [minutes, setMinutes] = (0, import_react8.useState)(settings?.breakoutDefaultMinutes ?? 15);
-  const [manual, setManual] = (0, import_react8.useState)({});
-  const [busy, setBusy] = (0, import_react8.useState)(false);
+  const [count, setCount] = (0, import_react9.useState)(Math.min(Math.max(2, Math.ceil(people.length / 4)), settings?.breakoutMaxRooms ?? 20));
+  const [mode, setMode] = (0, import_react9.useState)("auto");
+  const [minutes, setMinutes] = (0, import_react9.useState)(settings?.breakoutDefaultMinutes ?? 15);
+  const [manual, setManual] = (0, import_react9.useState)({});
+  const [busy, setBusy] = (0, import_react9.useState)(false);
   const [notice, show] = useNotice();
   const max = settings?.breakoutMaxRooms ?? 20;
   const rooms = Math.min(Math.max(1, count), max);
@@ -2406,10 +2483,10 @@ function BreakoutSetup() {
     (_, index) => people.filter((p) => (manual[p.identity] ?? -1) === index).map((p) => p.identity)
   ) : Array.from({ length: rooms }, () => []);
   const nameOf = (identity) => people.find((p) => p.identity === identity)?.displayName ?? identity;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-meet__collab-card", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "mx-meet__field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__field-label", children: "Rooms" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__collab-card", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "mx-meet__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__field-label", children: "Rooms" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "input",
         {
           className: "mx-meet__input",
@@ -2421,11 +2498,11 @@ function BreakoutSetup() {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mx-meet__pills", role: "group", "aria-label": "How people are placed", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet__pills", role: "group", "aria-label": "How people are placed", children: [
       ["auto", "Automatically"],
       ["manual", "Manually"],
       ["choose", "Let people choose"]
-    ].map(([value, label]) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    ].map(([value, label]) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "button",
       {
         type: "button",
@@ -2436,9 +2513,9 @@ function BreakoutSetup() {
       },
       value
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "mx-meet__field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__field-label", children: "Timer (minutes, 0 for none)" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "mx-meet__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__field-label", children: "Timer (minutes, 0 for none)" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "input",
         {
           className: "mx-meet__input",
@@ -2450,9 +2527,9 @@ function BreakoutSetup() {
         }
       )
     ] }),
-    mode === "manual" ? people.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "mx-meet__panel-note", children: "Nobody else is in the meeting yet." }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "mx-meet__people", children: people.map((person) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("li", { className: "mx-meet__person", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__person-name", children: person.displayName }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    mode === "manual" ? people.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__panel-note", children: "Nobody else is in the meeting yet." }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "mx-meet__people", children: people.map((person) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { className: "mx-meet__person", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__person-name", children: person.displayName }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         "select",
         {
           className: "mx-meet__select mx-meet__select--compact",
@@ -2460,24 +2537,24 @@ function BreakoutSetup() {
           value: manual[person.identity] ?? -1,
           onChange: (event) => setManual({ ...manual, [person.identity]: Number(event.target.value) }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: -1, children: "Main room" }),
-            Array.from({ length: rooms }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("option", { value: index, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: -1, children: "Main room" }),
+            Array.from({ length: rooms }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("option", { value: index, children: [
               "Room ",
               index + 1
             ] }, index))
           ]
         }
       )
-    ] }, person.identity)) }) : mode === "auto" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "mx-meet__breakout-rooms", children: assignment.map((members, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("li", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("strong", { children: [
+    ] }, person.identity)) }) : mode === "auto" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "mx-meet__breakout-rooms", children: assignment.map((members, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("strong", { children: [
         "Room ",
         index + 1
       ] }),
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__panel-note", children: members.length === 0 ? "empty" : members.map(nameOf).join(", ") })
-    ] }, index)) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "mx-meet__panel-note", children: "Everyone picks a room from their own screen." }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Notice, { notice }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__panel-note", children: members.length === 0 ? "empty" : members.map(nameOf).join(", ") })
+    ] }, index)) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__panel-note", children: "Everyone picks a room from their own screen." }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Notice, { notice }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "button",
       {
         type: "button",
@@ -2510,7 +2587,7 @@ function BreakoutRun({ plan }) {
   const snapshot = useMeetSnapshot();
   const now = useNow(plan.endsAt !== null);
   const remaining = breakoutRemainingMs(plan, now);
-  const [broadcast, setBroadcast] = (0, import_react8.useState)("");
+  const [broadcast, setBroadcast] = (0, import_react9.useState)("");
   const [notice, show] = useNotice();
   const nameOf = (identity) => displayNameFor(snapshot?.names ?? {}, identity, snapshot?.participants.find((p) => p.identity === identity)?.displayName);
   const mine = assignedRoom(plan, localIdentity);
@@ -2522,8 +2599,8 @@ function BreakoutRun({ plan }) {
     }
     show(await moveTo(roomId));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-meet__collab-card", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "mx-meet__panel-note", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__collab-card", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "mx-meet__panel-note", children: [
       plan.rooms.length,
       " room",
       plan.rooms.length === 1 ? "" : "s",
@@ -2531,18 +2608,18 @@ function BreakoutRun({ plan }) {
       remaining !== null ? ` \xB7 ${clock(remaining)} left` : "",
       plan.allowChoose ? " \xB7 people choose their room" : ""
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "mx-meet__breakout-rooms", children: plan.rooms.map((room) => {
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "mx-meet__breakout-rooms", children: plan.rooms.map((room) => {
       const here = breakoutRoomId === room.id;
       const mayJoin = isHost || plan.allowChoose || mine?.id === room.id;
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("li", { className: here ? "mx-meet__breakout-room mx-meet__breakout-room--here" : "mx-meet__breakout-room", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-meet__collab-head", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: room.name }),
-          here ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__collab-state", children: "You are here" }) : mayJoin ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__chip", onClick: () => void join(room.id), children: "Join" }) : null
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { className: here ? "mx-meet__breakout-room mx-meet__breakout-room--here" : "mx-meet__breakout-room", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__collab-head", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: room.name }),
+          here ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__collab-state", children: "You are here" }) : mayJoin ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mx-meet__chip", onClick: () => void join(room.id), children: "Join" }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__panel-note", children: room.identities.length === 0 ? "Nobody assigned" : room.identities.map(nameOf).join(", ") }),
-        isHost && room.identities.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "mx-meet__people", children: room.identities.map((identity) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("li", { className: "mx-meet__person", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__person-name", children: nameOf(identity) }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__panel-note", children: room.identities.length === 0 ? "Nobody assigned" : room.identities.map(nameOf).join(", ") }),
+        isHost && room.identities.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "mx-meet__people", children: room.identities.map((identity) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { className: "mx-meet__person", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__person-name", children: nameOf(identity) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
             "select",
             {
               className: "mx-meet__select mx-meet__select--compact",
@@ -2554,16 +2631,16 @@ function BreakoutRun({ plan }) {
                 roomId: event.target.value === "" ? null : event.target.value
               }).then(show),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "", children: "Main room" }),
-                plan.rooms.map((option) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: option.id, children: option.name }, option.id))
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", children: "Main room" }),
+                plan.rooms.map((option) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: option.id, children: option.name }, option.id))
               ]
             }
           )
         ] }, identity)) }) : null
       ] }, room.id);
     }) }),
-    breakoutRoomId !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__chip", onClick: () => void join(null), children: "Return to the main room" }) : null,
-    isHost ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    breakoutRoomId !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mx-meet__chip", onClick: () => void join(null), children: "Return to the main room" }) : null,
+    isHost ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "form",
       {
         className: "mx-meet__composer-row",
@@ -2577,7 +2654,7 @@ function BreakoutRun({ plan }) {
           });
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "input",
             {
               className: "mx-meet__input",
@@ -2588,12 +2665,12 @@ function BreakoutRun({ plan }) {
               "aria-label": "Message every room"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "submit", className: "mx-meet__send", disabled: broadcast.trim().length === 0, children: "Send" })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "submit", className: "mx-meet__send", disabled: broadcast.trim().length === 0, children: "Send" })
         ]
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Notice, { notice }),
-    isHost ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Notice, { notice }),
+    isHost ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "button",
       {
         type: "button",
@@ -2607,9 +2684,9 @@ function BreakoutRun({ plan }) {
 function BreakoutsPanel({ onClose }) {
   const { collab, isHost } = useCollab();
   const plan = collab?.breakout?.state === "open" ? collab.breakout : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(PanelShell, { title: "Breakout rooms", onClose, children: [
-    collab?.error != null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "mx-meet__panel-note mx-meet__collab-error", children: collab.error }) : null,
-    plan !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BreakoutRun, { plan }) : isHost ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BreakoutSetup, {}) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "mx-meet__panel-note", children: "Breakout rooms are closed." })
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(PanelShell, { title: "Breakout rooms", onClose, children: [
+    collab?.error != null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__panel-note mx-meet__collab-error", children: collab.error }) : null,
+    plan !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BreakoutRun, { plan }) : isHost ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BreakoutSetup, {}) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__panel-note", children: "Breakout rooms are closed." })
   ] });
 }
 function BreakoutBanner() {
@@ -2620,11 +2697,11 @@ function BreakoutBanner() {
   const now = useNow(open?.endsAt != null);
   const remaining = breakoutRemainingMs(open, now);
   const assigned = assignedRoom(open, localIdentity);
-  const [dismissedBroadcast, setDismissedBroadcast] = (0, import_react8.useState)(null);
-  const [failure, setFailure] = (0, import_react8.useState)(null);
-  const expireAsked = (0, import_react8.useRef)(null);
+  const [dismissedBroadcast, setDismissedBroadcast] = (0, import_react9.useState)(null);
+  const [failure, setFailure] = (0, import_react9.useState)(null);
+  const expireAsked = (0, import_react9.useRef)(null);
   const moveAt = collab?.moveRequest?.at ?? null;
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (host === null) return;
     const request = takeMoveRequest(host.store);
     if (request === null) return;
@@ -2632,7 +2709,7 @@ function BreakoutBanner() {
     if ((here ?? null) === request.roomId) return;
     void moveTo(request.roomId).then((result) => setFailure(result.ok ? null : result.message));
   }, [moveAt, host, moveTo]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (open === null || remaining === null || remaining > 0) return;
     const asked = expireAsked.current;
     if (asked !== null && asked.id === open.id && now - asked.at < BREAKOUT_EXPIRE_RETRY_MS) return;
@@ -2643,17 +2720,17 @@ function BreakoutBanner() {
   const showBroadcast = broadcast !== null && broadcast.at !== dismissedBroadcast && open !== null;
   const room = open?.rooms.find((r) => r.id === breakoutRoomId) ?? null;
   if (open === null && failure === null) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-meet__breakout-banner", role: "status", children: [
-    failure !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__collab-error", children: failure }) : null,
-    room !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: room.name }),
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__breakout-banner", role: "status", children: [
+    failure !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__collab-error", children: failure }) : null,
+    room !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: room.name }),
       remaining !== null ? ` \xB7 ${clock(remaining)} left` : "",
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__chip", onClick: () => void moveTo(null), children: "Return to main room" })
-    ] }) : assigned !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mx-meet__chip", onClick: () => void moveTo(null), children: "Return to main room" })
+    ] }) : assigned !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
       "You are assigned to ",
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: assigned.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: assigned.name }),
       remaining !== null ? ` \xB7 ${clock(remaining)} left` : "",
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "button",
         {
           type: "button",
@@ -2665,15 +2742,15 @@ function BreakoutBanner() {
           children: "Join"
         }
       )
-    ] }) : open?.allowChoose ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Breakout rooms are open \u2014 pick one under Activities." }) : null,
-    showBroadcast ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "mx-meet__breakout-broadcast", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("strong", { children: [
+    ] }) : open?.allowChoose ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Breakout rooms are open \u2014 pick one under Activities." }) : null,
+    showBroadcast ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__breakout-broadcast", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("strong", { children: [
         broadcast.by,
         ":"
       ] }),
       " ",
       broadcast.text,
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__link", onClick: () => setDismissedBroadcast(broadcast.at), children: "Dismiss" })
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mx-meet__link", onClick: () => setDismissedBroadcast(broadcast.at), children: "Dismiss" })
     ] }) : null
   ] });
 }
@@ -2687,10 +2764,10 @@ function CaptionLanguageSettings() {
   const preferred = defaultCaptionLanguage(settings, viewer);
   const current = collab?.captionLanguage ?? "";
   const choices = CAPTION_LANGUAGES.some((l) => l.tag === preferred) ? CAPTION_LANGUAGES : [{ tag: preferred, name: preferred }, ...CAPTION_LANGUAGES];
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { className: "mx-meet__section", "aria-label": "Captions", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "mx-meet__field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__field-label", children: "Translate captions to" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "mx-meet__section", "aria-label": "Captions", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "mx-meet__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__field-label", children: "Translate captions to" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         "select",
         {
           className: "mx-meet__select",
@@ -2700,29 +2777,29 @@ function CaptionLanguageSettings() {
             setCaptionLanguage(host.store, next);
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "", children: "Off \u2014 as spoken" }),
-            current === "" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("option", { value: preferred, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", children: "Off \u2014 as spoken" }),
+            current === "" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("option", { value: preferred, children: [
               choices.find((c) => c.tag === preferred)?.name ?? preferred,
               " (yours)"
             ] }) : null,
-            choices.filter((choice) => current !== "" || choice.tag !== preferred).map((choice) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: choice.tag, children: choice.name }, choice.tag))
+            choices.filter((choice) => current !== "" || choice.tag !== preferred).map((choice) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: choice.tag, children: choice.name }, choice.tag))
           ]
         }
       )
     ] }),
-    collab?.captionTranslationError != null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "mx-meet__panel-note mx-meet__collab-error", children: collab.captionTranslationError }) : null
+    collab?.captionTranslationError != null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__panel-note mx-meet__collab-error", children: collab.captionTranslationError }) : null
   ] });
 }
 
 // src/skins/meet/components.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function InertNotice({ what }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__empty", role: "status", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "mx-meet__empty-title", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__empty", role: "status", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "mx-meet__empty-title", children: [
       what,
       " is not ready yet"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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." })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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." })
   ] });
 }
 function Avatar({
@@ -2732,7 +2809,7 @@ function Avatar({
 }) {
   const tint = (0, import_format2.avatarPaletteIndex)(name);
   if (url != null && url.length > 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "img",
       {
         className: "mx-meet__avatar",
@@ -2744,7 +2821,7 @@ function Avatar({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "span",
     {
       className: "mx-meet__avatar mx-meet__avatar--initials",
@@ -2766,7 +2843,7 @@ function ControlButton({
   onClick,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "button",
     {
       type: "button",
@@ -2785,14 +2862,14 @@ function ControlButton({
 function RecordingIndicator() {
   const { state, label } = useRecording();
   if (label === null) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "span",
     {
       className: `mx-meet__recording mx-meet__recording--${state}`,
       role: "status",
       "aria-live": "polite",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RecordIcon, { width: 10, height: 10 }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RecordIcon, { width: 10, height: 10 }),
         label
       ]
     }
@@ -2800,15 +2877,16 @@ function RecordingIndicator() {
 }
 function ConnectionDot({ quality }) {
   if (quality === "excellent" || quality === "good" || quality === "unknown") return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `mx-meet__quality mx-meet__quality--${quality}`, title: `Connection ${quality}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(WifiLowIcon, { width: 14, height: 14 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `mx-meet__quality mx-meet__quality--${quality}`, title: `Connection ${quality}`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(WifiLowIcon, { width: 14, height: 14 }) });
 }
 function RoleBadge({
   role,
   standing
 }) {
-  if (role === "host") return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__badge", children: "Host" });
-  if (role === "cohost") return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__badge", children: "Co-host" });
-  if (isLinkFollower(standing)) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__badge", children: "Guest" });
+  if (role === "host") return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__badge", children: "Host" });
+  if (role === "cohost") return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__badge", children: "Co-host" });
+  if (isObserverRole(role)) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__badge", "data-meet-observing": "", children: "Observing" });
+  if (isLinkFollower(standing)) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__badge", children: "Guest" });
   return null;
 }
 function ParticipantTile({
@@ -2818,7 +2896,7 @@ function ParticipantTile({
   const host = useMeetHost();
   const snapshot = useMeetSnapshot();
   const queue = useHandQueue();
-  const [menu, setMenu] = (0, import_react9.useState)(false);
+  const [menu, setMenu] = (0, import_react10.useState)(false);
   const videoRef = useTrack(
     participant.identity,
     participant.screenSharing ? "screen" : "camera"
@@ -2827,7 +2905,7 @@ function ParticipantTile({
   const pinnedHere = snapshot?.pinned === participant.identity;
   const spotlit = snapshot?.spotlight === participant.identity;
   const handPosition = participant.handRaised ? queue.findIndex((entry) => entry.identity === participant.identity) + 1 : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       className: [
@@ -2838,7 +2916,7 @@ function ParticipantTile({
       "data-identity": participant.identity,
       ...participantAttributes(participant),
       children: [
-        showVideo ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        showVideo ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "video",
           {
             ref: videoRef,
@@ -2847,43 +2925,43 @@ function ParticipantTile({
             playsInline: true,
             muted: participant.isLocal
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet__tile-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { name: participant.displayName, url: participant.avatarUrl, size: featured ? 96 : 56 }) }),
-        participant.handRaised ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__tile-hand", title: `Hand raised \xB7 ${ordinal(handPosition)} in line`, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HandIcon, { width: 14, height: 14 }),
+        ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mx-meet__tile-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Avatar, { name: participant.displayName, url: participant.avatarUrl, size: featured ? 96 : 56 }) }),
+        participant.handRaised ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "mx-meet__tile-hand", title: `Hand raised \xB7 ${ordinal(handPosition)} in line`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HandIcon, { width: 14, height: 14 }),
           handPosition > 0 ? handPosition : null
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__tile-bar", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__tile-name", children: [
-            spotlit ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { title: "Spotlighted for everyone", className: "mx-meet__tile-flag", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SpotlightIcon, { width: 12, height: 12 }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__tile-bar", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "mx-meet__tile-name", children: [
+            spotlit ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { title: "Spotlighted for everyone", className: "mx-meet__tile-flag", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SpotlightIcon, { width: 12, height: 12 }) }) : null,
             participant.displayName,
             participant.isLocal ? " (you)" : "",
-            participant.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__badge", children: "AI" }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RoleBadge, { role: participant.role, standing: participant.standing })
+            participant.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__badge", children: "AI" }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RoleBadge, { role: participant.role, standing: participant.standing })
           ] }),
-          !participant.micEnabled ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MicOffIcon, { width: 14, height: 14 }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QualityBars, { quality: participant.quality })
+          !participant.micEnabled ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MicOffIcon, { width: 14, height: 14 }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(QualityBars, { quality: participant.quality })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: menu ? "mx-meet__tile-actions mx-meet__tile-actions--open" : "mx-meet__tile-actions", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: menu ? "mx-meet__tile-actions mx-meet__tile-actions--open" : "mx-meet__tile-actions", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             ControlButton,
             {
               label: pinnedHere ? "Unpin" : `Pin ${participant.displayName} for me`,
               active: pinnedHere,
               onClick: () => host?.engine.pin(pinnedHere ? null : participant.identity),
-              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PinIcon, { width: 16, height: 16 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PinIcon, { width: 16, height: 16 })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__anchor", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "mx-meet__anchor", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               ControlButton,
               {
                 label: `More for ${participant.displayName}`,
                 active: menu,
                 onClick: () => setMenu(!menu),
-                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MoreIcon, { width: 16, height: 16 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MoreIcon, { width: 16, height: 16 })
               }
             ),
-            menu ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PersonMenu, { participant, onClose: () => setMenu(false), placement: "down" }) : null
+            menu ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PersonMenu, { participant, onClose: () => setMenu(false), placement: "down" }) : null
           ] })
         ] })
       ]
@@ -2899,28 +2977,28 @@ function QualityBars({ quality }) {
   if (quality === "unknown") return null;
   const bars = quality === "excellent" ? 3 : quality === "good" ? 2 : quality === "poor" ? 1 : 0;
   const label = quality === "lost" ? "Connection lost" : quality === "poor" ? "Poor connection" : `Connection ${quality}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `mx-meet__signal mx-meet__signal--${quality}`, title: label, "aria-label": label, role: "img", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SignalIcon, { bars, width: 14, height: 14 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `mx-meet__signal mx-meet__signal--${quality}`, title: label, "aria-label": label, role: "img", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SignalIcon, { bars, width: 14, height: 14 }) });
 }
 function Stage({ pageSize }) {
   const stage = useStage(pageSize);
   const columns = gridColumns(stage.tiles.length);
   if (stage.feature === null && stage.tiles.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__stage mx-meet__stage--empty", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__empty-title", children: "Waiting for others to join" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__empty-body", children: "Share the meeting link and people can join from anywhere \u2014 no account needed." })
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__stage mx-meet__stage--empty", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__empty-title", children: "Waiting for others to join" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__empty-body", children: "Share the meeting link and people can join from anywhere \u2014 no account needed." })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `mx-meet__stage${stage.feature !== null ? " mx-meet__stage--speaker" : ""}`, children: [
-    stage.feature !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ParticipantTile, { participant: stage.feature, featured: true }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `mx-meet__stage${stage.feature !== null ? " mx-meet__stage--speaker" : ""}`, children: [
+    stage.feature !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ParticipantTile, { participant: stage.feature, featured: true }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "div",
       {
         className: "mx-meet__grid",
         style: { "--mx-meet-columns": columns },
-        children: stage.tiles.map((participant) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ParticipantTile, { participant }, participant.identity))
+        children: stage.tiles.map((participant) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ParticipantTile, { participant }, participant.identity))
       }
     ),
-    stage.overflow > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "mx-meet__overflow", children: [
+    stage.overflow > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "mx-meet__overflow", children: [
       "+",
       stage.overflow,
       " more ",
@@ -2932,17 +3010,24 @@ function Stage({ pageSize }) {
 function ControlBar({ onLeave }) {
   const room = useRoom();
   const recording = useRecording();
-  const [panel, setPanel] = (0, import_react9.useState)("none");
-  const [chatTo, setChatTo] = (0, import_react9.useState)(null);
-  const [popover, setPopover] = (0, import_react9.useState)("none");
-  const [shortcuts, setShortcuts] = (0, import_react9.useState)(false);
+  const [panel, setPanel] = (0, import_react10.useState)("none");
+  const [chatTo, setChatTo] = (0, import_react10.useState)(null);
+  const [popover, setPopover] = (0, import_react10.useState)("none");
+  const [shortcuts, setShortcuts] = (0, import_react10.useState)(false);
   const snapshot = useMeetSnapshot();
   const lobby = useLobby();
   const controls = useHostControls();
   const queue = useHandQueue();
   const micUnavailable = useLocalMedia().microphone.unavailable;
   const unread = useUnreadChat(panel === "chat");
-  const [whiteboard, setWhiteboard] = (0, import_react9.useState)(false);
+  const [whiteboard, setWhiteboard] = (0, import_react10.useState)(false);
+  const app = useMeetAppPanel();
+  const appOpened = (0, import_react10.useRef)(false);
+  (0, import_react10.useEffect)(() => {
+    if (app === null || appOpened.current) return;
+    appOpened.current = true;
+    setPanel("app");
+  }, [app]);
   const toggle = (next) => setPanel(panel === next ? "none" : next);
   const openActivity = (activity) => {
     if (activity === "whiteboard") setWhiteboard(true);
@@ -2953,7 +3038,7 @@ function ControlBar({ onLeave }) {
   });
   const privateChatAt = snapshot?.privateChatRequest?.at ?? null;
   const meetStore = useMeetHost()?.store ?? null;
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const request = meetStore?.snapshot().privateChatRequest ?? null;
     if (request === null) return;
     setChatTo(request.to);
@@ -2969,11 +3054,11 @@ function ControlBar({ onLeave }) {
     help: () => setShortcuts(true)
   });
   const hasSpotlight = snapshot?.spotlight !== null && snapshot?.spotlight !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MeetingOverlays, {}),
-    shortcuts ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ShortcutsSheet, { onClose: () => setShortcuts(false) }) : null,
-    panel === "chat" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChatPanel, { onClose: () => setPanel("none"), to: chatTo, onTo: setChatTo }) : null,
-    panel === "people" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MeetingOverlays, {}),
+    shortcuts ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ShortcutsSheet, { onClose: () => setShortcuts(false) }) : null,
+    panel === "chat" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChatPanel, { onClose: () => setPanel("none"), to: chatTo, onTo: setChatTo }) : null,
+    panel === "people" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       PeoplePanel,
       {
         onClose: () => setPanel("none"),
@@ -2983,53 +3068,61 @@ function ControlBar({ onLeave }) {
         }
       }
     ) : null,
-    panel === "ai" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AiPanel, { onClose: () => setPanel("none") }) : null,
-    panel === "settings" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SettingsPanel, { onClose: () => setPanel("none") }) : null,
-    panel === "polls" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PollsPanel, { onClose: () => setPanel("none") }) : null,
-    panel === "qa" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QaPanel, { onClose: () => setPanel("none") }) : null,
-    panel === "breakouts" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BreakoutsPanel, { onClose: () => setPanel("none") }) : null,
-    whiteboard ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(WhiteboardPanel, { onClose: () => setWhiteboard(false) }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BreakoutBanner, {}),
-    controls.notice !== null && panel !== "people" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Toast, { text: controls.notice.text, failed: controls.notice.failed, onDone: controls.clearNotice }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__controls", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    panel === "ai" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AiPanel, { onClose: () => setPanel("none") }) : null,
+    panel === "settings" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SettingsPanel, { onClose: () => setPanel("none") }) : null,
+    panel === "polls" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PollsPanel, { onClose: () => setPanel("none") }) : null,
+    panel === "qa" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(QaPanel, { onClose: () => setPanel("none") }) : null,
+    panel === "breakouts" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BreakoutsPanel, { onClose: () => setPanel("none") }) : null,
+    whiteboard ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(WhiteboardPanel, { onClose: () => setWhiteboard(false) }) : null,
+    panel === "app" && app !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PanelShell, { title: app.title, onClose: () => setPanel("none"), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mx-meet__app-panel", "data-meet-app-panel": app.panel.key, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      app.Component,
+      {
+        recordId: app.panel.recordId,
+        organizationId: app.organizationId,
+        panelKey: app.panel.key
+      }
+    ) }) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BreakoutBanner, {}),
+    controls.notice !== null && panel !== "people" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Toast, { text: controls.notice.text, failed: controls.notice.failed, onDone: controls.clearNotice }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__controls", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         ControlButton,
         {
           label: micUnavailable !== null ? `Unmute \u2014 ${micUnavailable.remedy}` : room.local?.micEnabled === true ? "Mute (\u2318D)" : "Unmute (\u2318D)",
           active: room.local?.micEnabled === true,
           onClick: () => void room.toggleMicrophone(),
-          children: room.local?.micEnabled === true ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MicIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MicOffIcon, {})
+          children: room.local?.micEnabled === true ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MicIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MicOffIcon, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         ControlButton,
         {
           label: room.local?.cameraEnabled === true ? "Stop video (\u2318E)" : "Start video (\u2318E)",
           active: room.local?.cameraEnabled === true,
           onClick: () => void room.toggleCamera(),
-          children: room.local?.cameraEnabled === true ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CameraIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CameraOffIcon, {})
+          children: room.local?.cameraEnabled === true ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CameraIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CameraOffIcon, {})
         }
       ),
-      room.canShareScreen || room.local?.screenSharing === true ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      room.canShareScreen || room.local?.screenSharing === true ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         ControlButton,
         {
           label: room.local?.screenSharing === true ? "Stop sharing" : "Share screen",
           active: room.local?.screenSharing === true,
           onClick: () => void room.toggleScreenShare(),
-          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ScreenShareIcon, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ScreenShareIcon, {})
         }
       ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__anchor", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "mx-meet__anchor", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           ControlButton,
           {
             label: "Send a reaction",
             active: popover === "reactions",
             onClick: () => setPopover(popover === "reactions" ? "none" : "reactions"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SmileIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SmileIcon, {})
           }
         ),
-        popover === "reactions" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Popover, { label: "Reactions", onClose: () => setPopover("none"), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet__emoji-bar", children: MEET_REACTIONS.map((emoji) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        popover === "reactions" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Popover, { label: "Reactions", onClose: () => setPopover("none"), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mx-meet__emoji-bar", children: MEET_REACTIONS.map((emoji) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             type: "button",
@@ -3041,53 +3134,54 @@ function ControlBar({ onLeave }) {
           emoji
         )) }) }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         ControlButton,
         {
           label: room.local?.handRaised === true ? "Lower hand (\u2318\u2325H)" : "Raise hand (\u2318\u2325H)",
           active: room.local?.handRaised === true,
           onClick: () => void room.toggleHand(),
-          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HandIcon, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HandIcon, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(ControlButton, { label: "Chat (\u2318\u2325C)", active: panel === "chat", onClick: () => toggle("chat"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChatIcon, {}),
-        unread > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__dot", "aria-hidden": "true" }) : null
+      app !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ControlButton, { label: app.title, active: panel === "app", onClick: () => toggle("app"), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FlagIcon, {}) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(ControlButton, { label: "Chat (\u2318\u2325C)", active: panel === "chat", onClick: () => toggle("chat"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChatIcon, {}),
+        unread > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__dot", "aria-hidden": "true" }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
         ControlButton,
         {
           label: lobby.waiting.length > 0 ? `People \u2014 ${lobby.waiting.length} waiting` : `People \u2014 ${(snapshot?.participants ?? []).length} in the meeting`,
           active: panel === "people",
           onClick: () => toggle("people"),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PeopleIcon, {}),
-            lobby.waiting.length > 0 || controls.isHost && queue.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__dot", "aria-hidden": "true" }) : null
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PeopleIcon, {}),
+            lobby.waiting.length > 0 || controls.isHost && queue.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__dot", "aria-hidden": "true" }) : null
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         ActivitiesControl,
         {
           active: whiteboard ? "whiteboard" : panel === "polls" || panel === "qa" || panel === "breakouts" ? panel : null,
           onOpen: openActivity
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AiControl, { active: panel === "ai", onToggle: () => toggle("ai") }),
-      recording.canStart ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ControlButton, { label: "Start recording", onClick: () => void recording.start(), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RecordIcon, {}) }) : null,
-      recording.canStop ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ControlButton, { label: "Stop recording", active: true, onClick: () => void recording.stop(), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RecordIcon, {}) }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__anchor", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AiControl, { active: panel === "ai", onToggle: () => toggle("ai") }),
+      recording.canStart ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ControlButton, { label: "Start recording", onClick: () => void recording.start(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RecordIcon, {}) }) : null,
+      recording.canStop ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ControlButton, { label: "Stop recording", active: true, onClick: () => void recording.stop(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RecordIcon, {}) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "mx-meet__anchor", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           ControlButton,
           {
             label: "More options",
             active: popover === "more" || panel === "settings",
             onClick: () => setPopover(popover === "more" ? "none" : "more"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MoreIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MoreIcon, {})
           }
         ),
-        popover === "more" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Popover, { label: "More options", onClose: () => setPopover("none"), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__menu", role: "menu", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        popover === "more" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Popover, { label: "More options", onClose: () => setPopover("none"), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__menu", role: "menu", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
             MenuItem,
             {
               onSelect: () => {
@@ -3095,12 +3189,12 @@ function ControlBar({ onLeave }) {
                 setPanel("settings");
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SettingsIcon, { width: 16, height: 16 }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SettingsIcon, { width: 16, height: 16 }),
                 " Settings"
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
             MenuItem,
             {
               onSelect: () => {
@@ -3108,14 +3202,14 @@ function ControlBar({ onLeave }) {
                 setShortcuts(true);
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(KeyboardIcon, { width: 16, height: 16 }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KeyboardIcon, { width: 16, height: 16 }),
                 " Keyboard shortcuts"
               ]
             }
           ),
-          controls.isHost ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet__menu-sep", role: "separator" }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          controls.isHost ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mx-meet__menu-sep", role: "separator" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               MenuItem,
               {
                 onSelect: () => {
@@ -3123,12 +3217,12 @@ function ControlBar({ onLeave }) {
                   void controls.run({ action: "mute_all" });
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MicOffIcon, { width: 16, height: 16 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MicOffIcon, { width: 16, height: 16 }),
                   " Mute everyone"
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               MenuItem,
               {
                 onSelect: () => {
@@ -3136,12 +3230,12 @@ function ControlBar({ onLeave }) {
                   void controls.run({ action: "ask_all_unmute" });
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MicIcon, { width: 16, height: 16 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MicIcon, { width: 16, height: 16 }),
                   " Ask everyone to unmute"
                 ]
               }
             ),
-            queue.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            queue.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               MenuItem,
               {
                 onSelect: () => {
@@ -3149,14 +3243,14 @@ function ControlBar({ onLeave }) {
                   void controls.run({ action: "lower_all_hands" });
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HandIcon, { width: 16, height: 16 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HandIcon, { width: 16, height: 16 }),
                   " Lower all hands (",
                   queue.length,
                   ")"
                 ]
               }
             ) : null,
-            hasSpotlight ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            hasSpotlight ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               MenuItem,
               {
                 onSelect: () => {
@@ -3164,7 +3258,7 @@ function ControlBar({ onLeave }) {
                   void controls.run({ action: "spotlight", identity: null });
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SpotlightIcon, { width: 16, height: 16 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SpotlightIcon, { width: 16, height: 16 }),
                   " Remove spotlight"
                 ]
               }
@@ -3172,7 +3266,7 @@ function ControlBar({ onLeave }) {
           ] }) : null
         ] }) }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         ControlButton,
         {
           label: "Leave",
@@ -3181,7 +3275,7 @@ function ControlBar({ onLeave }) {
             void room.leave();
             onLeave?.();
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PhoneOffIcon, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PhoneOffIcon, {})
         }
       )
     ] })
@@ -3191,13 +3285,13 @@ function useUnreadChat(open) {
   const snapshot = useMeetSnapshot();
   const chat = snapshot?.chat ?? [];
   const local = snapshot?.localIdentity ?? null;
-  const [seen, setSeen] = (0, import_react9.useState)(0);
-  (0, import_react9.useEffect)(() => {
+  const [seen, setSeen] = (0, import_react10.useState)(0);
+  (0, import_react10.useEffect)(() => {
     if (open) setSeen(chat.length);
   }, [open, chat.length]);
   const loaded = snapshot?.chatLoaded === true;
-  const [baseline, setBaseline] = (0, import_react9.useState)(null);
-  (0, import_react9.useEffect)(() => {
+  const [baseline, setBaseline] = (0, import_react10.useState)(null);
+  (0, import_react10.useEffect)(() => {
     if (loaded && baseline === null) setBaseline(chat.length);
   }, [loaded, baseline, chat.length]);
   if (open) return 0;
@@ -3210,14 +3304,14 @@ function Popover({
   children,
   placement = "up"
 }) {
-  const ref = (0, import_react9.useRef)(null);
-  const [style, setStyle] = (0, import_react9.useState)({
+  const ref = (0, import_react10.useRef)(null);
+  const [style, setStyle] = (0, import_react10.useState)({
     position: "fixed",
     top: 0,
     left: 0,
     visibility: "hidden"
   });
-  (0, import_react9.useLayoutEffect)(() => {
+  (0, import_react10.useLayoutEffect)(() => {
     const element = ref.current;
     const anchor = element?.parentElement ?? null;
     if (element === null || anchor === null) return;
@@ -3262,7 +3356,7 @@ function Popover({
       window.removeEventListener("scroll", place, true);
     };
   }, [placement]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const onKey = (event) => {
       if (event.key === "Escape") onClose();
     };
@@ -3277,14 +3371,14 @@ function Popover({
       window.removeEventListener("pointerdown", onPointer);
     };
   }, [onClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref, className: "mx-meet__popover", style, role: "dialog", "aria-label": label, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, className: "mx-meet__popover", style, role: "dialog", "aria-label": label, children });
 }
 function MenuItem({
   onSelect,
   danger = false,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "button",
     {
       type: "button",
@@ -3296,28 +3390,28 @@ function MenuItem({
   );
 }
 function Toast({ text, failed, onDone }) {
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const timer = setTimeout(onDone, failed ? 7e3 : 4e3);
     return () => clearTimeout(timer);
   }, [text, failed, onDone]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: failed ? "mx-meet__toast mx-meet__toast--failed" : "mx-meet__toast", role: "status", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: text }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mx-meet__toast-close", "aria-label": "Dismiss", onClick: onDone, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CloseIcon, { width: 14, height: 14 }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: failed ? "mx-meet__toast mx-meet__toast--failed" : "mx-meet__toast", role: "status", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: text }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "mx-meet__toast-close", "aria-label": "Dismiss", onClick: onDone, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CloseIcon, { width: 14, height: 14 }) })
   ] });
 }
 function MeetingOverlays() {
   const reactions = useReactions();
   const { notice, dismiss } = useModerationNotice();
   const room = useRoom();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ReactionOverlay, { reactions }),
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ReactionOverlay, { reactions }),
     notice !== null && notice.kind !== "removed" ? (
       // A host's request ("the host is asking you to unmute"), not an error:
       // an assertive status, so it is announced at once without being filed
       // as a failure (design-system error-box census).
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__notice-bar", role: "status", "aria-live": "assertive", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: notice.text }),
-        notice.kind === "ask-unmute" && room.local?.micEnabled !== true ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__notice-bar", role: "status", "aria-live": "assertive", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: notice.text }),
+        notice.kind === "ask-unmute" && room.local?.micEnabled !== true ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             type: "button",
@@ -3329,20 +3423,20 @@ function MeetingOverlays() {
             children: "Unmute"
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mx-meet__toast-close", "aria-label": "Dismiss", onClick: dismiss, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CloseIcon, { width: 14, height: 14 }) })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "mx-meet__toast-close", "aria-label": "Dismiss", onClick: dismiss, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CloseIcon, { width: 14, height: 14 }) })
       ] })
     ) : null
   ] });
 }
 function ShortcutsSheet({ onClose }) {
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const onKey = (event) => {
       if (event.key === "Escape") onClose();
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [onClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet__sheet-backdrop", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mx-meet__sheet-backdrop", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       className: "mx-meet__sheet",
@@ -3350,13 +3444,13 @@ function ShortcutsSheet({ onClose }) {
       "aria-label": "Keyboard shortcuts",
       onClick: (event) => event.stopPropagation(),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("header", { className: "mx-meet__panel-head", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: "mx-meet__panel-title", children: "Keyboard shortcuts" }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ControlButton, { label: "Close", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CloseIcon, { width: 16, height: 16 }) })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("header", { className: "mx-meet__panel-head", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { className: "mx-meet__panel-title", children: "Keyboard shortcuts" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ControlButton, { label: "Close", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CloseIcon, { width: 16, height: 16 }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("dl", { className: "mx-meet__shortcuts", children: MEET_SHORTCUTS.map((shortcut) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__shortcut", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("dt", { children: shortcut.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("dd", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("kbd", { className: "mx-meet__kbd", children: shortcut.keys }) })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("dl", { className: "mx-meet__shortcuts", children: MEET_SHORTCUTS.map((shortcut) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__shortcut", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("dt", { children: shortcut.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("dd", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("kbd", { className: "mx-meet__kbd", children: shortcut.keys }) })
         ] }, shortcut.id)) })
       ]
     }
@@ -3366,15 +3460,15 @@ function AiControl({ active, onToggle }) {
   const snapshot = useMeetSnapshot();
   const meeting = snapshot?.meeting ?? null;
   if (meeting === null || !meeting.aiEnabled) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ControlButton, { label: "Meeting assistant", active, onClick: onToggle, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SparklesIcon, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ControlButton, { label: "Meeting assistant", active, onClick: onToggle, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SparklesIcon, {}) });
 }
 function PanelShell({
   title,
   onClose,
   children
 }) {
-  const ref = (0, import_react9.useRef)(null);
-  (0, import_react9.useLayoutEffect)(() => {
+  const ref = (0, import_react10.useRef)(null);
+  (0, import_react10.useLayoutEffect)(() => {
     const panel = ref.current;
     const root = panel?.closest(".mx-meet");
     const header = root?.querySelector(":scope > .mx-meet__header") ?? null;
@@ -3386,12 +3480,12 @@ function PanelShell({
     observer.observe(header);
     return () => observer.disconnect();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("aside", { ref, className: "mx-meet__panel", "aria-label": title, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("header", { className: "mx-meet__panel-head", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: "mx-meet__panel-title", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ControlButton, { label: "Close panel", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CloseIcon, { width: 16, height: 16 }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("aside", { ref, className: "mx-meet__panel", "aria-label": title, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("header", { className: "mx-meet__panel-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { className: "mx-meet__panel-title", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ControlButton, { label: "Close panel", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CloseIcon, { width: 16, height: 16 }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet__panel-body", children })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mx-meet__panel-body", children })
   ] });
 }
 function ChatPanel({
@@ -3401,17 +3495,17 @@ function ChatPanel({
 }) {
   const snapshot = useMeetSnapshot();
   const room = useRoom();
-  const [draft, setDraft] = (0, import_react9.useState)("");
-  const [recipient, setRecipient] = (0, import_react9.useState)(to);
-  const listRef = (0, import_react9.useRef)(null);
+  const [draft, setDraft] = (0, import_react10.useState)("");
+  const [recipient, setRecipient] = (0, import_react10.useState)(to);
+  const listRef = (0, import_react10.useRef)(null);
   const messages = snapshot?.chat ?? [];
   const local = snapshot?.localIdentity ?? null;
   const people = (snapshot?.participants ?? []).filter(
     (participant) => !participant.isLocal && !participant.isAgent
   );
   const recipientName = recipient === null ? null : people.find((p) => p.identity === recipient)?.displayName ?? null;
-  (0, import_react9.useEffect)(() => setRecipient(to), [to]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => setRecipient(to), [to]);
+  (0, import_react10.useEffect)(() => {
     const list = listRef.current;
     if (list !== null) list.scrollTop = list.scrollHeight;
   }, [messages.length]);
@@ -3419,13 +3513,13 @@ function ChatPanel({
     setRecipient(next);
     onTo?.(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(PanelShell, { title: "Chat", onClose, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("ul", { className: "mx-meet__chat", ref: listRef, children: [
-      snapshot?.chatHistoryError != null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { className: "mx-meet__panel-note", children: snapshot.chatHistoryError }) : null,
-      snapshot?.chatLoaded !== true && messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { className: "mx-meet__panel-note", children: "Reading earlier messages\u2026" }) : messages.length === 0 && snapshot?.chatHistoryError == null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { className: "mx-meet__panel-note", children: "No messages yet. Messages to everyone stay with the meeting, so people who join later see them." }) : null,
-      messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChatLine, { message, local, people }, message.id))
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(PanelShell, { title: "Chat", onClose, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("ul", { className: "mx-meet__chat", ref: listRef, children: [
+      snapshot?.chatHistoryError != null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("li", { className: "mx-meet__panel-note", children: snapshot.chatHistoryError }) : null,
+      snapshot?.chatLoaded !== true && messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("li", { className: "mx-meet__panel-note", children: "Reading earlier messages\u2026" }) : messages.length === 0 && snapshot?.chatHistoryError == null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("li", { className: "mx-meet__panel-note", children: "No messages yet. Messages to everyone stay with the meeting, so people who join later see them." }) : null,
+      messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChatLine, { message, local, people }, message.id))
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "form",
       {
         className: "mx-meet__composer mx-meet__composer--chat",
@@ -3438,7 +3532,7 @@ function ChatPanel({
           else void room.sendPrivateChat(recipient, text);
         },
         children: [
-          people.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          people.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
             "select",
             {
               className: "mx-meet__select mx-meet__select--compact",
@@ -3446,16 +3540,16 @@ function ChatPanel({
               value: recipient ?? "",
               onChange: (event) => choose(event.target.value === "" ? null : event.target.value),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", children: "Everyone" }),
-                people.map((participant) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("option", { value: participant.identity, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "", children: "Everyone" }),
+                people.map((participant) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("option", { value: participant.identity, children: [
                   participant.displayName,
                   " (private)"
                 ] }, participant.identity))
               ]
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__composer-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__composer-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "input",
               {
                 className: "mx-meet__input",
@@ -3466,9 +3560,9 @@ function ChatPanel({
                 maxLength: 4e3
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "submit", className: "mx-meet__send", disabled: draft.trim().length === 0, children: "Send" })
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "submit", className: "mx-meet__send", disabled: draft.trim().length === 0, children: "Send" })
           ] }),
-          recipientName !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "mx-meet__panel-note", children: [
+          recipientName !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "mx-meet__panel-note", children: [
             "Only ",
             recipientName,
             " sees this. Private messages are not saved."
@@ -3486,7 +3580,7 @@ function ChatLine({
   const mine = message.identity === local;
   const privateTo = message.to ?? null;
   const counterpart = privateTo === null ? null : mine ? people.find((p) => p.identity === privateTo)?.displayName ?? "them" : "you";
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "li",
     {
       className: [
@@ -3495,17 +3589,17 @@ function ChatLine({
         message.failed !== void 0 ? "mx-meet__chat-line--failed" : ""
       ].filter(Boolean).join(" "),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__chat-meta", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: mine ? "You" : message.displayName }),
-          counterpart !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__chat-private", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "mx-meet__chat-meta", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: mine ? "You" : message.displayName }),
+          counterpart !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "mx-meet__chat-private", children: [
             "to ",
             counterpart,
             " \xB7 private"
           ] }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("time", { dateTime: message.at, children: clockOf(message.at) })
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("time", { dateTime: message.at, children: clockOf(message.at) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__chat-text", children: message.text }),
-        message.failed !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__chat-failed", children: message.failed }) : privateTo === null && message.saved === false ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__chat-pending", children: message.id.startsWith("pending-") ? "Sending\u2026" : "Not saved \u2014 people who join later will not see this" }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__chat-text", children: message.text }),
+        message.failed !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__chat-failed", children: message.failed }) : privateTo === null && message.saved === false ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__chat-pending", children: message.id.startsWith("pending-") ? "Sending\u2026" : "Not saved \u2014 people who join later will not see this" }) : null
       ]
     }
   );
@@ -3517,22 +3611,25 @@ function PeoplePanel({
   const snapshot = useMeetSnapshot();
   const controls = useHostControls();
   const queue = useHandQueue();
-  const [query, setQuery] = (0, import_react9.useState)("");
-  const [menuFor, setMenuFor] = (0, import_react9.useState)(null);
+  const [query, setQuery] = (0, import_react10.useState)("");
+  const [menuFor, setMenuFor] = (0, import_react10.useState)(null);
   const myRole = useRole();
   const local = snapshot?.localIdentity ?? null;
-  const everyone = snapshot?.participants ?? [];
+  const observersHidden = snapshot?.grants.observersVisibleTo === "hosts" && !controls.isHost;
+  const everyone = (snapshot?.participants ?? []).filter(
+    (participant) => !observersHidden || !isObserverRole(participant.role) || participant.identity === local
+  );
   const needle = query.trim().toLowerCase();
   const shown = needle.length === 0 ? everyone : everyone.filter((participant) => participant.displayName.toLowerCase().includes(needle));
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(PanelShell, { title: `People (${everyone.length})`, onClose, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LobbyPanel, {}),
-    queue.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "mx-meet__section", "aria-label": "Raised hands", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("header", { className: "mx-meet__section-head", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("h3", { className: "mx-meet__section-title", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(PanelShell, { title: `People (${everyone.length})`, onClose, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LobbyPanel, {}),
+    queue.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { className: "mx-meet__section", "aria-label": "Raised hands", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("header", { className: "mx-meet__section-head", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("h3", { className: "mx-meet__section-title", children: [
           "Raised hands \xB7 ",
           queue.length
         ] }),
-        controls.isHost ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        controls.isHost ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             type: "button",
@@ -3542,13 +3639,13 @@ function PeoplePanel({
           }
         ) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ol", { className: "mx-meet__queue", children: queue.map((participant) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { className: "mx-meet__person", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { name: participant.displayName, url: participant.avatarUrl, size: 28 }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__person-name", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ol", { className: "mx-meet__queue", children: queue.map((participant) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("li", { className: "mx-meet__person", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Avatar, { name: participant.displayName, url: participant.avatarUrl, size: 28 }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "mx-meet__person-name", children: [
           participant.displayName,
-          participant.identity === local ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__you", children: " (you)" }) : null
+          participant.identity === local ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__you", children: " (you)" }) : null
         ] }),
-        controls.isHost || participant.identity === local ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        controls.isHost || participant.identity === local ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             type: "button",
@@ -3559,27 +3656,27 @@ function PeoplePanel({
         ) : null
       ] }, participant.identity)) })
     ] }) : null,
-    controls.isHost && everyone.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__bulk", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("button", { type: "button", className: "mx-meet__chip", onClick: () => void controls.run({ action: "mute_all" }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MicOffIcon, { width: 14, height: 14 }),
+    controls.isHost && everyone.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__bulk", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("button", { type: "button", className: "mx-meet__chip", onClick: () => void controls.run({ action: "mute_all" }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MicOffIcon, { width: 14, height: 14 }),
         " Mute all"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
         "button",
         {
           type: "button",
           className: "mx-meet__chip",
           onClick: () => void controls.run({ action: "ask_all_unmute" }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MicIcon, { width: 14, height: 14 }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MicIcon, { width: 14, height: 14 }),
             " Ask all to unmute"
           ]
         }
       )
     ] }) : null,
-    everyone.length > 4 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "mx-meet__search", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SearchIcon, { width: 16, height: 16 }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    everyone.length > 4 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "mx-meet__search", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SearchIcon, { width: 16, height: 16 }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "input",
         {
           className: "mx-meet__input mx-meet__input--bare",
@@ -3590,37 +3687,37 @@ function PeoplePanel({
         }
       )
     ] }) : null,
-    controls.notice !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: controls.notice.failed ? "mx-meet__error" : "mx-meet__notice", role: "status", children: controls.notice.text }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("ul", { className: "mx-meet__people", children: [
-      shown.map((participant) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { className: "mx-meet__person", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { name: participant.displayName, url: participant.avatarUrl, size: 32 }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__person-name", children: [
+    controls.notice !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: controls.notice.failed ? "mx-meet__error" : "mx-meet__notice", role: "status", children: controls.notice.text }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("ul", { className: "mx-meet__people", children: [
+      shown.map((participant) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("li", { className: "mx-meet__person", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Avatar, { name: participant.displayName, url: participant.avatarUrl, size: 32 }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "mx-meet__person-name", children: [
           participant.displayName,
-          participant.identity === local ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__you", children: " (you)" }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          participant.identity === local ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__you", children: " (you)" }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             RoleBadge,
             {
               role: participant.identity === local ? myRole : participant.role,
               standing: participant.standing
             }
           ),
-          isNoteTaker(participant) ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__badge", children: "Meeting assistant" }) : null,
-          snapshot?.spotlight === participant.identity ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__badge", children: "Spotlight" }) : null
+          isNoteTaker(participant) ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__badge", children: "Meeting assistant" }) : null,
+          snapshot?.spotlight === participant.identity ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__badge", children: "Spotlight" }) : null
         ] }),
-        participant.handRaised ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HandIcon, { width: 14, height: 14 }) : null,
-        !participant.micEnabled && !isNoteTaker(participant) ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MicOffIcon, { width: 14, height: 14 }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QualityBars, { quality: participant.quality }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__anchor", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        participant.handRaised ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HandIcon, { width: 14, height: 14 }) : null,
+        !participant.micEnabled && !isNoteTaker(participant) ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MicOffIcon, { width: 14, height: 14 }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(QualityBars, { quality: participant.quality }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "mx-meet__anchor", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             ControlButton,
             {
               label: `More for ${participant.displayName}`,
               active: menuFor === participant.identity,
               onClick: () => setMenuFor(menuFor === participant.identity ? null : participant.identity),
-              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MoreIcon, { width: 16, height: 16 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MoreIcon, { width: 16, height: 16 })
             }
           ),
-          menuFor === participant.identity ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          menuFor === participant.identity ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             PersonMenu,
             {
               participant,
@@ -3631,13 +3728,13 @@ function PeoplePanel({
           ) : null
         ] })
       ] }, participant.identity)),
-      shown.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { className: "mx-meet__panel-note", children: [
+      shown.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("li", { className: "mx-meet__panel-note", children: [
         "Nobody matches \u201C",
         query,
         "\u201D."
       ] }) : null
     ] }),
-    snapshot?.meeting !== null && snapshot?.meeting !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GuestRecordAccessControl, { meeting: snapshot.meeting }) : null
+    snapshot?.meeting !== null && snapshot?.meeting !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(GuestRecordAccessControl, { meeting: snapshot.meeting }) : null
   ] });
 }
 function PersonMenu({
@@ -3649,14 +3746,14 @@ function PersonMenu({
   const host = useMeetHost();
   const snapshot = useMeetSnapshot();
   const controls = useHostControls();
-  const [mode, setMode] = (0, import_react9.useState)("menu");
-  const [text, setText] = (0, import_react9.useState)("");
+  const [mode, setMode] = (0, import_react10.useState)("menu");
+  const [text, setText] = (0, import_react10.useState)("");
   const self = participant.identity === snapshot?.localIdentity;
   const moderate = controls.canModerate(participant);
   const pinned = snapshot?.pinned === participant.identity;
   const spotlit = snapshot?.spotlight === participant.identity;
   const hasAccount = participant.userId !== null;
-  const [refused, setRefused] = (0, import_react9.useState)(false);
+  const [refused, setRefused] = (0, import_react10.useState)(false);
   const act = (request) => {
     setRefused(false);
     void controls.run(request).then((result) => {
@@ -3664,10 +3761,10 @@ function PersonMenu({
       else setRefused(true);
     });
   };
-  const refusal = refused && controls.notice?.failed === true ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system.ErrorBox, { as: "p", className: "mx-meet__error", message: controls.notice.text, operation: "Change this participant", origin: "meet/components", children: controls.notice.text }) : null;
+  const refusal = refused && controls.notice?.failed === true ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system.ErrorBox, { as: "p", className: "mx-meet__error", message: controls.notice.text, operation: "Change this participant", origin: "meet/components", children: controls.notice.text }) : null;
   if (mode === "rename" || mode === "report") {
     const renaming = mode === "rename";
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Popover, { label: renaming ? "Rename" : "Report", onClose, placement, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Popover, { label: renaming ? "Rename" : "Report", onClose, placement, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "form",
       {
         className: "mx-meet__menu-form",
@@ -3679,9 +3776,9 @@ function PersonMenu({
           );
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "mx-meet__field", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__field-label", children: renaming ? "Name shown in this meeting" : `What did ${participant.displayName} do?` }),
-            renaming ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "mx-meet__field", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__field-label", children: renaming ? "Name shown in this meeting" : `What did ${participant.displayName} do?` }),
+            renaming ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "input",
               {
                 className: "mx-meet__input",
@@ -3690,7 +3787,7 @@ function PersonMenu({
                 value: text,
                 onChange: (event) => setText(event.target.value)
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "textarea",
               {
                 className: "mx-meet__input",
@@ -3703,9 +3800,9 @@ function PersonMenu({
             )
           ] }),
           refusal,
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__menu-actions", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mx-meet__link", onClick: () => setMode("menu"), children: "Back" }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "submit", className: "mx-meet__send", disabled: text.trim().length === 0 || controls.busy, children: renaming ? "Rename" : "Report" })
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__menu-actions", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "mx-meet__link", onClick: () => setMode("menu"), children: "Back" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "submit", className: "mx-meet__send", disabled: text.trim().length === 0 || controls.busy, children: renaming ? "Rename" : "Report" })
           ] })
         ]
       }
@@ -3713,12 +3810,12 @@ function PersonMenu({
   }
   if (mode === "remove" || mode === "transfer") {
     const removing = mode === "remove";
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Popover, { label: removing ? "Remove" : "Make host", onClose, placement, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__menu-form", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__confirm-text", children: removing ? `Remove ${participant.displayName}? They leave immediately and cannot rejoin this meeting.` : `Make ${participant.displayName} the host? They get every host control and own this meeting. You stay on as a co-host.` }),
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Popover, { label: removing ? "Remove" : "Make host", onClose, placement, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__menu-form", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__confirm-text", children: removing ? `Remove ${participant.displayName}? They leave immediately and cannot rejoin this meeting.` : `Make ${participant.displayName} the host? They get every host control and own this meeting. You stay on as a co-host.` }),
       refusal,
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__menu-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mx-meet__link", onClick: () => setMode("menu"), children: "Cancel" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__menu-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "mx-meet__link", onClick: () => setMode("menu"), children: "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             type: "button",
@@ -3731,8 +3828,8 @@ function PersonMenu({
       ] })
     ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Popover, { label: `Options for ${participant.displayName}`, onClose, placement, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__menu", role: "menu", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Popover, { label: `Options for ${participant.displayName}`, onClose, placement, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__menu", role: "menu", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       MenuItem,
       {
         onSelect: () => {
@@ -3740,13 +3837,13 @@ function PersonMenu({
           onClose();
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PinIcon, { width: 16, height: 16 }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PinIcon, { width: 16, height: 16 }),
           " ",
           pinned ? "Unpin" : "Pin for me"
         ]
       }
     ),
-    !self && !participant.isAgent && (onMessage !== void 0 || host !== null) ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    !self && !participant.isAgent && (onMessage !== void 0 || host !== null) ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       MenuItem,
       {
         onSelect: () => {
@@ -3758,42 +3855,42 @@ function PersonMenu({
           onClose();
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChatIcon, { width: 16, height: 16 }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChatIcon, { width: 16, height: 16 }),
           " Message privately"
         ]
       }
     ) : null,
-    controls.isHost ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MenuItem, { onSelect: () => act({ action: "spotlight", identity: spotlit ? null : participant.identity }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SpotlightIcon, { width: 16, height: 16 }),
+    controls.isHost ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(MenuItem, { onSelect: () => act({ action: "spotlight", identity: spotlit ? null : participant.identity }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SpotlightIcon, { width: 16, height: 16 }),
       " ",
       spotlit ? "Remove spotlight" : "Spotlight for everyone"
     ] }) : null,
-    moderate ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet__menu-sep", role: "separator" }),
-      participant.micEnabled ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MenuItem, { onSelect: () => act({ action: "mute", identity: participant.identity }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MicOffIcon, { width: 16, height: 16 }),
+    moderate ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mx-meet__menu-sep", role: "separator" }),
+      participant.micEnabled ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(MenuItem, { onSelect: () => act({ action: "mute", identity: participant.identity }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MicOffIcon, { width: 16, height: 16 }),
         " Mute"
-      ] }) : !participant.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MenuItem, { onSelect: () => act({ action: "ask_unmute", identity: participant.identity }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MicIcon, { width: 16, height: 16 }),
+      ] }) : !participant.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(MenuItem, { onSelect: () => act({ action: "ask_unmute", identity: participant.identity }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MicIcon, { width: 16, height: 16 }),
         " Ask to unmute"
       ] }) : null,
-      participant.cameraEnabled ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MenuItem, { onSelect: () => act({ action: "stop_video", identity: participant.identity }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CameraOffIcon, { width: 16, height: 16 }),
+      participant.cameraEnabled ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(MenuItem, { onSelect: () => act({ action: "stop_video", identity: participant.identity }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CameraOffIcon, { width: 16, height: 16 }),
         " Stop video"
       ] }) : null,
-      participant.screenSharing ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MenuItem, { onSelect: () => act({ action: "stop_screen", identity: participant.identity }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ScreenShareIcon, { width: 16, height: 16 }),
+      participant.screenSharing ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(MenuItem, { onSelect: () => act({ action: "stop_screen", identity: participant.identity }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ScreenShareIcon, { width: 16, height: 16 }),
         " Stop screen share"
       ] }) : null,
-      participant.handRaised ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MenuItem, { onSelect: () => act({ action: "lower_hand", identity: participant.identity }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HandIcon, { width: 16, height: 16 }),
+      participant.handRaised ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(MenuItem, { onSelect: () => act({ action: "lower_hand", identity: participant.identity }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HandIcon, { width: 16, height: 16 }),
         " Lower hand"
       ] }) : null,
-      hasAccount && !participant.isAgent && participant.role !== "cohost" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MenuItem, { onSelect: () => act({ action: "make_cohost", identity: participant.identity }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PeopleIcon, { width: 16, height: 16 }),
+      hasAccount && !participant.isAgent && participant.role !== "cohost" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(MenuItem, { onSelect: () => act({ action: "make_cohost", identity: participant.identity }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PeopleIcon, { width: 16, height: 16 }),
         " Make co-host"
       ] }) : null,
-      !participant.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      !participant.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
         MenuItem,
         {
           onSelect: () => {
@@ -3801,21 +3898,21 @@ function PersonMenu({
             setMode("rename");
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PencilIcon, { width: 16, height: 16 }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PencilIcon, { width: 16, height: 16 }),
             " Rename"
           ]
         }
       ) : null
     ] }) : null,
-    controls.isOwner && participant.role === "cohost" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MenuItem, { onSelect: () => act({ action: "revoke_cohost", identity: participant.identity }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PeopleIcon, { width: 16, height: 16 }),
+    controls.isOwner && participant.role === "cohost" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(MenuItem, { onSelect: () => act({ action: "revoke_cohost", identity: participant.identity }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PeopleIcon, { width: 16, height: 16 }),
       " Remove co-host"
     ] }) : null,
-    controls.isOwner && !self && hasAccount && !participant.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MenuItem, { onSelect: () => setMode("transfer"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SpotlightIcon, { width: 16, height: 16 }),
+    controls.isOwner && !self && hasAccount && !participant.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(MenuItem, { onSelect: () => setMode("transfer"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SpotlightIcon, { width: 16, height: 16 }),
       " Make host"
     ] }) : null,
-    self ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    self ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       MenuItem,
       {
         onSelect: () => {
@@ -3823,12 +3920,12 @@ function PersonMenu({
           setMode("rename");
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PencilIcon, { width: 16, height: 16 }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PencilIcon, { width: 16, height: 16 }),
           " Rename yourself"
         ]
       }
     ) : null,
-    !self && !participant.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    !self && !participant.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       MenuItem,
       {
         onSelect: () => {
@@ -3836,21 +3933,21 @@ function PersonMenu({
           setMode("report");
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FlagIcon, { width: 16, height: 16 }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FlagIcon, { width: 16, height: 16 }),
           " Report"
         ]
       }
     ) : null,
-    moderate && !participant.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MenuItem, { danger: true, onSelect: () => setMode("remove"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CloseIcon, { width: 16, height: 16 }),
+    moderate && !participant.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(MenuItem, { danger: true, onSelect: () => setMode("remove"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CloseIcon, { width: 16, height: 16 }),
       " Remove from meeting"
     ] }) : null
   ] }) });
 }
 function SettingsPanel({ onClose }) {
   const host = useRequiredMeetHost();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(PanelShell, { title: "Settings", onClose, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(PanelShell, { title: "Settings", onClose, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       DeviceSettings,
       {
         onPick: (kind, deviceId) => {
@@ -3859,8 +3956,8 @@ function SettingsPanel({ onClose }) {
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(EffectsSettings, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CaptionLanguageSettings, {})
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(EffectsSettings, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CaptionLanguageSettings, {})
   ] });
 }
 function DeviceSettings({
@@ -3872,15 +3969,15 @@ function DeviceSettings({
   const speaker = devices?.selected.audiooutput ?? host.devices.resolve("audiooutput");
   const stream = useMicrophoneStream(microphone);
   const level = useAudioLevel(stream);
-  const [testing, setTesting] = (0, import_react9.useState)(false);
-  (0, import_react9.useEffect)(() => {
+  const [testing, setTesting] = (0, import_react10.useState)(false);
+  (0, import_react10.useEffect)(() => {
     void host.devices.refresh();
   }, [host]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "mx-meet__section", "aria-label": "Devices", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DevicePicker, { kind: "audioinput", label: "Microphone", onPick }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet__meter", role: "meter", "aria-label": "Microphone level", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(level * 100), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { width: `${Math.min(100, Math.round(level * 160))}%` } }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DevicePicker, { kind: "audiooutput", label: "Speaker", onPick }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { className: "mx-meet__section", "aria-label": "Devices", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DevicePicker, { kind: "audioinput", label: "Microphone", onPick }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mx-meet__meter", role: "meter", "aria-label": "Microphone level", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(level * 100), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { width: `${Math.min(100, Math.round(level * 160))}%` } }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DevicePicker, { kind: "audiooutput", label: "Speaker", onPick }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "button",
       {
         type: "button",
@@ -3891,19 +3988,19 @@ function DeviceSettings({
           void playTestSound(speaker).finally(() => setTesting(false));
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SpeakerIcon, { width: 14, height: 14 }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SpeakerIcon, { width: 14, height: 14 }),
           " ",
           testing ? "Playing\u2026" : "Test speaker"
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DevicePicker, { kind: "videoinput", label: "Camera", onPick })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DevicePicker, { kind: "videoinput", label: "Camera", onPick })
   ] });
 }
 function EffectsSettings({ preview }) {
   const effects = useMediaEffects();
-  const [error, setError] = (0, import_react9.useState)(null);
-  const fileRef = (0, import_react9.useRef)(null);
+  const [error, setError] = (0, import_react10.useState)(null);
+  const fileRef = (0, import_react10.useRef)(null);
   const supported = effects.backgroundsSupported || preview != null || videoEffectsSupported();
   const apply = (next) => {
     setError(null);
@@ -3915,9 +4012,9 @@ function EffectsSettings({ preview }) {
       );
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "mx-meet__section", "aria-label": "Effects", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__check", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { className: "mx-meet__section", "aria-label": "Effects", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__check", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         import_design_system.Checkbox,
         {
           id: "mx-meet-noise",
@@ -3925,14 +4022,14 @@ function EffectsSettings({ preview }) {
           onCheckedChange: (checked) => apply({ noiseSuppression: checked === true })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__check-text", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system.Label, { htmlFor: "mx-meet-noise", children: "Noise suppression" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__hint", children: "Filters keyboards, fans and background chatter." })
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__check-text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system.Label, { htmlFor: "mx-meet-noise", children: "Noise suppression" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__hint", children: "Filters keyboards, fans and background chatter." })
       ] })
     ] }),
-    supported ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system.Label, { children: "Background" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    supported ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system.Label, { children: "Background" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         import_design_system.SegmentedControl,
         {
           fullWidth: true,
@@ -3951,7 +4048,7 @@ function EffectsSettings({ preview }) {
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "input",
         {
           ref: fileRef,
@@ -3966,7 +4063,7 @@ function EffectsSettings({ preview }) {
           }
         }
       ),
-      error !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__error", children: error }) : null
+      error !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__error", children: error }) : null
     ] }) : null
   ] });
 }
@@ -4025,8 +4122,8 @@ async function playTestSound(sinkId) {
   await context.close();
 }
 function useMicrophoneStream(deviceId) {
-  const [stream, setStream] = (0, import_react9.useState)(null);
-  (0, import_react9.useEffect)(() => {
+  const [stream, setStream] = (0, import_react10.useState)(null);
+  (0, import_react10.useEffect)(() => {
     if (deviceId === "off") return void 0;
     let live = true;
     let opened = null;
@@ -4051,31 +4148,31 @@ function useMicrophoneStream(deviceId) {
 function LobbyPanel() {
   const lobby = useLobby();
   if (!lobby.canAdmit || lobby.waiting.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "mx-meet__lobby", "aria-label": "Waiting room", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("header", { className: "mx-meet__lobby-head", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "mx-meet__lobby-title", children: lobby.waiting.length === 1 ? "1 person is waiting" : `${lobby.waiting.length} people are waiting` }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mx-meet__link", onClick: () => void lobby.admitAll(), children: "Admit all" })
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { className: "mx-meet__lobby", "aria-label": "Waiting room", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("header", { className: "mx-meet__lobby-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { className: "mx-meet__lobby-title", children: lobby.waiting.length === 1 ? "1 person is waiting" : `${lobby.waiting.length} people are waiting` }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "mx-meet__link", onClick: () => void lobby.admitAll(), children: "Admit all" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "mx-meet__lobby-list", children: lobby.waiting.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { className: "mx-meet__lobby-list", children: lobby.waiting.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "li",
       {
         className: "mx-meet__lobby-row",
         "data-meet-lobby-entry": "",
         "data-meet-participant-name": entry.displayName,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { name: entry.displayName, url: entry.avatarUrl, size: 32 }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__person-name", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Avatar, { name: entry.displayName, url: entry.avatarUrl, size: 32 }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "mx-meet__person-name", children: [
             entry.displayName,
-            entry.userId === null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__badge", children: "Guest" }) : null
+            entry.userId === null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__badge", children: "Guest" }) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ControlButton, { label: `Admit ${entry.displayName}`, onClick: () => void lobby.admit(entry), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckIcon, { width: 16, height: 16 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ControlButton, { label: `Admit ${entry.displayName}`, onClick: () => void lobby.admit(entry), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckIcon, { width: 16, height: 16 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             ControlButton,
             {
               label: `Deny ${entry.displayName}`,
               danger: true,
               onClick: () => void lobby.deny(entry),
-              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CloseIcon, { width: 16, height: 16 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CloseIcon, { width: 16, height: 16 })
             }
           )
         ]
@@ -4088,21 +4185,21 @@ function NoteTakerRow() {
   const ai = useMeetAi();
   const status = ai.noteTaker;
   const duplicateError = status.refusal !== null && ai.error !== null && status.refusal.reason === ai.error.message && status.refusal.remedy === ai.error.remedy;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "mx-meet__note-taker", "aria-label": "Note-taker", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: `mx-meet__note-taker-state mx-meet__note-taker-state--${status.state}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__note-taker-dot", "aria-hidden": "true" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { className: "mx-meet__note-taker", "aria-label": "Note-taker", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: `mx-meet__note-taker-state mx-meet__note-taker-state--${status.state}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__note-taker-dot", "aria-hidden": "true" }),
       ai.noteTakerLabel
     ] }),
-    status.detail !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__panel-note", children: status.detail }) : null,
-    status.refusal !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system.ErrorBox, { as: "div", className: "mx-meet__refusal", error: status.refusal, operation: "Join this meeting", origin: "meet/components", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__refusal-reason", children: status.refusal.reason }),
-      status.refusal.remedy.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__refusal-remedy", children: status.refusal.remedy }) : null
+    status.detail !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__panel-note", children: status.detail }) : null,
+    status.refusal !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system.ErrorBox, { as: "div", className: "mx-meet__refusal", error: status.refusal, operation: "Join this meeting", origin: "meet/components", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__refusal-reason", children: status.refusal.reason }),
+      status.refusal.remedy.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__refusal-remedy", children: status.refusal.remedy }) : null
     ] }) : null,
-    ai.error !== null && !duplicateError ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system.ErrorBox, { as: "div", className: "mx-meet__refusal", error: ai.error, operation: "Run the meeting assistant", origin: "meet/components", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__refusal-reason", children: ai.error.message }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__refusal-remedy", children: ai.error.remedy })
+    ai.error !== null && !duplicateError ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system.ErrorBox, { as: "div", className: "mx-meet__refusal", error: ai.error, operation: "Run the meeting assistant", origin: "meet/components", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__refusal-reason", children: ai.error.message }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__refusal-remedy", children: ai.error.remedy })
     ] }) : null,
-    ai.canControlNoteTaker ? status.state === "transcribing" || status.state === "joining" || status.state === "handoff_pending" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    ai.canControlNoteTaker ? status.state === "transcribing" || status.state === "joining" || status.state === "handoff_pending" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "button",
       {
         type: "button",
@@ -4110,7 +4207,7 @@ function NoteTakerRow() {
         onClick: () => void ai.stopNoteTaker(),
         children: "Dismiss the note-taker"
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "button",
       {
         type: "button",
@@ -4126,24 +4223,24 @@ function NoteList({
   notes,
   empty
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "mx-meet__note-group", "aria-label": title, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "mx-meet__note-group-title", children: title }),
-    notes.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__panel-note", children: empty }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "mx-meet__notes", children: notes.map((note) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { className: "mx-meet__note", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { className: "mx-meet__note-group", "aria-label": title, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { className: "mx-meet__note-group-title", children: title }),
+    notes.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__panel-note", children: empty }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { className: "mx-meet__notes", children: notes.map((note) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("li", { className: "mx-meet__note", children: [
       note.text,
-      note.assigneeDisplayName !== void 0 && note.assigneeDisplayName !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__assignee", children: note.assigneeDisplayName }) : null
+      note.assigneeDisplayName !== void 0 && note.assigneeDisplayName !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__assignee", children: note.assigneeDisplayName }) : null
     ] }, note.id)) })
   ] });
 }
 function AiPanel({ onClose }) {
   const ai = useMeetAi();
-  const [question, setQuestion] = (0, import_react9.useState)("");
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(PanelShell, { title: "Meeting assistant", onClose, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(NoteTakerRow, {}),
-    ai.summary !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "mx-meet__note-group", "aria-label": "Summary", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "mx-meet__note-group-title", children: "Summary" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__summary", children: ai.summary.text })
+  const [question, setQuestion] = (0, import_react10.useState)("");
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(PanelShell, { title: "Meeting assistant", onClose, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(NoteTakerRow, {}),
+    ai.summary !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { className: "mx-meet__note-group", "aria-label": "Summary", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { className: "mx-meet__note-group-title", children: "Summary" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__summary", children: ai.summary.text })
     ] }) : null,
-    ai.wrapUp !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "mx-meet__wrap-up-notice", role: "status", children: [
+    ai.wrapUp !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "mx-meet__wrap-up-notice", role: "status", children: [
       "The wrap-up is written \u2014 ",
       ai.wrapUp.noteIds.length,
       " ",
@@ -4155,7 +4252,7 @@ function AiPanel({ onClose }) {
       ai.wrapUp.segmentCount === 1 ? "transcript line" : "transcript lines",
       "."
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       NoteList,
       {
         title: "Notes",
@@ -4163,7 +4260,7 @@ function AiPanel({ onClose }) {
         empty: "Notes appear here as the meeting goes on."
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       NoteList,
       {
         title: "Decisions",
@@ -4171,7 +4268,7 @@ function AiPanel({ onClose }) {
         empty: "Nothing has been decided yet."
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       NoteList,
       {
         title: "Action items",
@@ -4179,21 +4276,21 @@ function AiPanel({ onClose }) {
         empty: "No action items yet."
       }
     ),
-    ai.transcript.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "mx-meet__note-group", "aria-label": "Transcript", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "mx-meet__note-group-title", children: "Transcript" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "mx-meet__transcript", children: ai.transcript.map((line) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    ai.transcript.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { className: "mx-meet__note-group", "aria-label": "Transcript", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { className: "mx-meet__note-group-title", children: "Transcript" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { className: "mx-meet__transcript", children: ai.transcript.map((line) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
         "li",
         {
           className: line.final && line.source === "record" ? "mx-meet__line" : "mx-meet__line mx-meet__line--interim",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: line.speaker }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: line.text })
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: line.speaker }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: line.text })
           ]
         },
         line.id
       )) })
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "form",
       {
         className: "mx-meet__composer",
@@ -4204,7 +4301,7 @@ function AiPanel({ onClose }) {
           void ai.ask(asked);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "input",
             {
               className: "mx-meet__input",
@@ -4214,13 +4311,13 @@ function AiPanel({ onClose }) {
               "aria-label": "Ask about this meeting"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "submit", className: "mx-meet__send", disabled: ai.asking, children: ai.asking ? "Asking\u2026" : "Ask" })
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "submit", className: "mx-meet__send", disabled: ai.asking, children: ai.asking ? "Asking\u2026" : "Ask" })
         ]
       }
     ),
-    ai.asking && ai.phase !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__panel-note", role: "status", children: ai.phase }) : null,
-    ai.answer !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__answer", children: ai.answer }) : null,
-    ai.answer !== null && ai.coverage !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "mx-meet__coverage", children: [
+    ai.asking && ai.phase !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__panel-note", role: "status", children: ai.phase }) : null,
+    ai.answer !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__answer", children: ai.answer }) : null,
+    ai.answer !== null && ai.coverage !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "mx-meet__coverage", children: [
       "Answered from ",
       ai.coverage.segmentsUsed,
       " of ",
@@ -4229,9 +4326,9 @@ function AiPanel({ onClose }) {
       ai.coverage.truncated ? " (the oldest were left out)" : "",
       "."
     ] }) : null,
-    ai.error !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system.ErrorBox, { as: "div", className: "mx-meet__refusal", error: ai.error, operation: "Run the meeting assistant", origin: "meet/components", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__refusal-reason", children: ai.error.message }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__refusal-remedy", children: ai.error.remedy })
+    ai.error !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system.ErrorBox, { as: "div", className: "mx-meet__refusal", error: ai.error, operation: "Run the meeting assistant", origin: "meet/components", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__refusal-reason", children: ai.error.message }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__refusal-remedy", children: ai.error.remedy })
     ] }) : null
   ] });
 }
@@ -4240,30 +4337,30 @@ function Captions({ lines = 3 }) {
   const visible = ai.transcript.slice(-lines);
   const translation = useCaptionTranslation(visible);
   if (visible.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__captions", "aria-live": "polite", "aria-label": "Live captions", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__captions", "aria-live": "polite", "aria-label": "Live captions", children: [
     visible.map((line) => {
       const translated = translation.language === null ? void 0 : translation.translations[line.id];
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
         "p",
         {
           className: line.final ? "mx-meet__caption" : "mx-meet__caption mx-meet__caption--interim",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: line.speaker }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: line.speaker }),
             " ",
             translated ?? line.text,
-            translated !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__caption-original", children: line.text }) : null
+            translated !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__caption-original", children: line.text }) : null
           ]
         },
         line.id
       );
     }),
-    translation.language !== null && translation.error !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__caption mx-meet__caption--interim", children: translation.error }) : null
+    translation.language !== null && translation.error !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__caption mx-meet__caption--interim", children: translation.error }) : null
   ] });
 }
 function ConsentNotice() {
   const notice = useConsentNotice();
   if (notice === null) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__consent", role: "status", children: notice });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__consent", role: "status", children: notice });
 }
 function AttendanceNotice() {
   const media = useLocalMedia();
@@ -4271,7 +4368,7 @@ function AttendanceNotice() {
   if (notice === null) return null;
   const refused = media.microphone.unavailable;
   const code = microphoneNoticeCode(media.microphone);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "p",
     {
       className: "mx-meet__banner mx-meet__banner--attendance",
@@ -4279,21 +4376,22 @@ function AttendanceNotice() {
       ...code !== null ? { "data-meet-notice": code } : {},
       children: [
         notice,
-        refused === null ? null : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__remedy", children: refused.remedy })
+        refused === null ? null : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__remedy", children: refused.remedy })
       ]
     }
   );
 }
 function PreJoin(props) {
   const host = useMeetHost();
-  if (host === null) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InertNotice, { what: "This meeting" });
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PreJoinBody, { ...props, host });
+  if (host === null) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(InertNotice, { what: "This meeting" });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PreJoinBody, { ...props, host });
 }
 function PreJoinBody({
   roomName,
   meetingId,
   slug,
   onJoined,
+  observe: observe2 = false,
   host
 }) {
   const room = useRoom();
@@ -4301,21 +4399,21 @@ function PreJoinBody({
   const recording = useRecording();
   const effects = useMediaEffects();
   const { notice } = useModerationNotice();
-  const [mode, setMode] = (0, import_react9.useState)("video");
-  const [microphone, setMicrophone] = (0, import_react9.useState)(true);
-  const [joining, setJoining] = (0, import_react9.useState)(false);
+  const [mode, setMode] = (0, import_react10.useState)("video");
+  const [microphone, setMicrophone] = (0, import_react10.useState)(true);
+  const [joining, setJoining] = (0, import_react10.useState)(false);
   const camera = devices?.selected.videoinput ?? host.devices.resolve("videoinput");
   const mic = devices?.selected.audioinput ?? host.devices.resolve("audioinput");
   const preview = useCameraPreview(mode === "video" ? camera : void 0, effects.effects);
   const micStream = useMicrophoneStream(microphone ? mic : "off");
   const level = useAudioLevel(micStream);
-  const [speakerTesting, setSpeakerTesting] = (0, import_react9.useState)(false);
-  (0, import_react9.useEffect)(() => {
+  const [speakerTesting, setSpeakerTesting] = (0, import_react10.useState)(false);
+  (0, import_react10.useEffect)(() => {
     void host.devices.refresh();
   }, [host]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__prejoin", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__preview", children: [
-      mode === "video" && preview.preview !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__prejoin", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__preview", children: [
+      mode === "video" && preview.preview !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "video",
         {
           className: "mx-meet__video mx-meet__video--mirror",
@@ -4326,16 +4424,16 @@ function PreJoinBody({
             if (element !== null) preview.preview?.attach(element);
           }
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet__tile-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { name: host.identity.displayName, url: host.identity.avatarUrl, size: 96 }) }),
-      mode === "video" && preview.error !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__preview-note", children: preview.error }) : null,
-      microphone && micStream !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet__meter mx-meet__meter--preview", role: "meter", "aria-label": "Microphone level", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(level * 100), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { width: `${Math.min(100, Math.round(level * 160))}%` } }) }) : null
+      ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mx-meet__tile-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Avatar, { name: host.identity.displayName, url: host.identity.avatarUrl, size: 96 }) }),
+      mode === "video" && preview.error !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__preview-note", children: preview.error }) : null,
+      microphone && micStream !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mx-meet__meter mx-meet__meter--preview", role: "meter", "aria-label": "Microphone level", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(level * 100), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { width: `${Math.min(100, Math.round(level * 160))}%` } }) }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__prejoin-panel", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h1", { className: "mx-meet__prejoin-title", children: "Ready to join?" }),
-      notice?.kind === "removed" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__warning", children: notice.text }) : null,
-      devices?.labelsHidden === true ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "mx-meet__panel-note", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__prejoin-panel", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h1", { className: "mx-meet__prejoin-title", children: "Ready to join?" }),
+      notice?.kind === "removed" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__warning", children: notice.text }) : null,
+      devices?.labelsHidden === true ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "mx-meet__panel-note", children: [
         "Your browser is hiding device names until you allow camera and microphone access.",
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             type: "button",
@@ -4347,11 +4445,11 @@ function PreJoinBody({
           }
         )
       ] }) : null,
-      devices?.fallbackNotice != null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__warning", children: devices.fallbackNotice }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DevicePicker, { kind: "audioinput", label: "Microphone" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__field-row", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DevicePicker, { kind: "audiooutput", label: "Speaker" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      devices?.fallbackNotice != null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__warning", children: devices.fallbackNotice }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DevicePicker, { kind: "audioinput", label: "Microphone" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__field-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DevicePicker, { kind: "audiooutput", label: "Speaker" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           import_design_system.Button,
           {
             type: "button",
@@ -4364,19 +4462,19 @@ function PreJoinBody({
               );
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SpeakerIcon, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SpeakerIcon, {}),
               " ",
               speakerTesting ? "Playing\u2026" : "Test"
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DevicePicker, { kind: "videoinput", label: "Camera" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(EffectsSettings, { preview: preview.preview }),
-      recording.consentNotice !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system.Alert, { variant: "info", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system.AlertDescription, { children: recording.consentNotice }) }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__prejoin-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__check", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DevicePicker, { kind: "videoinput", label: "Camera" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(EffectsSettings, { preview: preview.preview }),
+      recording.consentNotice !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system.Alert, { variant: "info", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system.AlertDescription, { children: recording.consentNotice }) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__prejoin-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__check", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             import_design_system.Checkbox,
             {
               id: "mx-meet-join-video",
@@ -4384,10 +4482,10 @@ function PreJoinBody({
               onCheckedChange: (checked) => setMode(checked === true ? "video" : "audio")
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system.Label, { htmlFor: "mx-meet-join-video", children: "Join with video" })
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system.Label, { htmlFor: "mx-meet-join-video", children: "Join with video" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__check", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__check", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             import_design_system.Checkbox,
             {
               id: "mx-meet-join-mic",
@@ -4395,9 +4493,9 @@ function PreJoinBody({
               onCheckedChange: (checked) => setMicrophone(checked === true)
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system.Label, { htmlFor: "mx-meet-join-mic", children: "Join with microphone" })
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system.Label, { htmlFor: "mx-meet-join-mic", children: "Join with microphone" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           import_design_system.Button,
           {
             type: "button",
@@ -4408,30 +4506,32 @@ function PreJoinBody({
               preview.release();
               void room.join({
                 roomName,
-                mode,
-                microphone,
+                // An observer publishes nothing: no camera, no microphone (MD-16).
+                mode: observe2 ? "audio" : mode,
+                microphone: observe2 ? false : microphone,
                 ...meetingId !== void 0 ? { meetingId } : {},
-                ...slug !== void 0 ? { slug } : {}
+                ...slug !== void 0 ? { slug } : {},
+                ...observe2 ? { observe: true } : {}
               }).then(() => onJoined?.()).catch(() => void 0).finally(() => setJoining(false));
             },
-            children: joining ? "Joining\u2026" : "Join now"
+            children: joining ? "Joining\u2026" : observe2 ? "Observe" : "Join now"
           }
         )
       ] }),
-      room.failure !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "mx-meet__error", children: [
+      room.failure !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "mx-meet__error", children: [
         room.failure.message,
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__remedy", children: room.failure.remedy })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__remedy", children: room.failure.remedy })
       ] }) : null
     ] })
   ] });
 }
 function useCameraPreview(deviceId, effects) {
-  const [preview, setPreview] = (0, import_react9.useState)(null);
-  const [error, setError] = (0, import_react9.useState)(null);
-  const current = (0, import_react9.useRef)(null);
-  const initialEffect = (0, import_react9.useRef)(toVideoEffect(effects));
+  const [preview, setPreview] = (0, import_react10.useState)(null);
+  const [error, setError] = (0, import_react10.useState)(null);
+  const current = (0, import_react10.useRef)(null);
+  const initialEffect = (0, import_react10.useRef)(toVideoEffect(effects));
   initialEffect.current = toVideoEffect(effects);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (deviceId === void 0) return void 0;
     let live = true;
     setError(null);
@@ -4478,9 +4578,9 @@ function DevicePicker({
   const triggerId = `mx-meet-device-${kind}`;
   const valueOf = (deviceId) => deviceId.length > 0 ? deviceId : "default";
   const current = devices?.selected[kind] ?? host.devices.resolve(kind) ?? "";
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__field", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system.Label, { htmlFor: triggerId, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__field", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system.Label, { htmlFor: triggerId, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       import_design_system.Select,
       {
         ...current.length > 0 ? { value: valueOf(current) } : {},
@@ -4490,8 +4590,8 @@ function DevicePicker({
           else host.devices.select(kind, deviceId);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system.SelectTrigger, { id: triggerId, "aria-label": label, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system.SelectValue, { placeholder: label }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system.SelectContent, { children: list.map((device) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system.SelectItem, { value: valueOf(device.deviceId), children: device.label.length > 0 ? device.label : `${label} (name hidden)` }, device.deviceId || "default")) })
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system.SelectTrigger, { id: triggerId, "aria-label": label, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system.SelectValue, { placeholder: label }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system.SelectContent, { children: list.map((device) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system.SelectItem, { value: valueOf(device.deviceId), children: device.label.length > 0 ? device.label : `${label} (name hidden)` }, device.deviceId || "default")) })
         ]
       }
     )
@@ -4502,73 +4602,113 @@ function MeetSkinRoom({
   meetingId,
   slug,
   onLeave,
-  headerControls
+  headerControls,
+  observe: observe2 = false
 }) {
   const { host, snapshot, isHost } = useMeetCore();
   const elapsed = useElapsed(snapshot?.meeting?.startedAt ?? null);
   const phase = snapshot?.phase ?? "idle";
   if (host === null) return null;
   if (phase === "idle" || phase === "failed" || phase === "left") {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mx-meet", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       PreJoin,
       {
         roomName,
         ...meetingId !== void 0 ? { meetingId } : {},
-        ...slug !== void 0 ? { slug } : {}
+        ...slug !== void 0 ? { slug } : {},
+        observe: observe2
       }
     ) });
   }
   if (phase === "lobby") {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet mx-meet--lobby", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(WaitingRoom, { roomName, host }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mx-meet mx-meet--lobby", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(WaitingRoom, { host, ...onLeave !== void 0 ? { onLeave } : {} }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ConsentNotice, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AttendanceNotice, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("header", { className: "mx-meet__header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h1", { className: "mx-meet__title", children: snapshot?.meeting?.title ?? "Meeting" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__meta", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ConsentNotice, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AttendanceNotice, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("header", { className: "mx-meet__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h1", { className: "mx-meet__title", children: snapshot?.meeting?.title ?? "Meeting" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "mx-meet__meta", children: [
         participantSummary(snapshot?.participants ?? []),
         elapsed > 0 ? ` \xB7 ${(0, import_format2.formatDurationMs)(elapsed)}` : ""
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RecordingIndicator, {}),
-      snapshot?.locked === true ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__badge", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LockIcon, { width: 12, height: 12 }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RecordingIndicator, {}),
+      isObserverRole(snapshot?.grants.role) ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__badge", "data-meet-observing": "self", children: "Observing" }) : null,
+      snapshot?.locked === true ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "mx-meet__badge", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LockIcon, { width: 12, height: 12 }),
         " Locked"
       ] }) : null,
-      headerControls !== void 0 && headerControls !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__header-controls", "data-meet-header-controls": "", children: headerControls }) : null,
-      isHost ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HostMenu, {}) : null
+      headerControls !== void 0 && headerControls !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__header-controls", "data-meet-header-controls": "", children: headerControls }) : null,
+      isHost ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HostMenu, {}) : null
     ] }),
-    phase === "reconnecting" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__banner", role: "status", children: "Reconnecting\u2026" }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Stage, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Captions, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ControlBar, { ...onLeave !== void 0 ? { onLeave } : {} })
+    phase === "reconnecting" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__banner", role: "status", children: "Reconnecting\u2026" }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Stage, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Captions, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ControlBar, { ...onLeave !== void 0 ? { onLeave } : {} })
   ] });
 }
-function WaitingRoom({ roomName, host }) {
-  const knocked = (0, import_react9.useRef)(false);
-  (0, import_react9.useEffect)(() => {
-    if (knocked.current) return;
-    knocked.current = true;
-    host.meetings.knock(roomName);
-  }, [host, roomName]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__waiting", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { name: host.identity.displayName, url: host.identity.avatarUrl, size: 72 }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h1", { className: "mx-meet__prejoin-title", children: "Waiting for the host to let you in" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "mx-meet__empty-body", children: [
-      "You are in the waiting room as ",
-      host.identity.displayName,
-      ". You will join automatically once you are admitted."
-    ] })
+function WaitingRoom({ host, onLeave }) {
+  const { waiting, withdraw, askAgain } = useWaiting();
+  const [busy, setBusy] = (0, import_react10.useState)(false);
+  const admission = waiting?.admission ?? "knocking";
+  const run = (action) => () => {
+    setBusy(true);
+    void action().catch(() => void 0).finally(() => setBusy(false));
+  };
+  const home = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system.Button, { type: "button", variant: "outline", onClick: () => onLeave !== void 0 ? onLeave() : window.location.assign("/"), children: "Back to home" });
+  let title;
+  let line = null;
+  let actions;
+  switch (admission) {
+    case "waiting_host":
+      title = "Waiting for the host to start";
+      actions = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system.Button, { type: "button", variant: "outline", disabled: busy, onClick: run(withdraw), children: "Leave" });
+      break;
+    case "denied":
+      title = "The host declined your request";
+      actions = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        waiting?.reknockAllowed === true ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system.Button, { type: "button", disabled: busy, onClick: run(askAgain), children: "Ask to join again" }) : null,
+        home
+      ] });
+      break;
+    case "expired":
+      title = "No one responded";
+      actions = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system.Button, { type: "button", disabled: busy, onClick: run(askAgain), children: "Ask again" }),
+        home
+      ] });
+      break;
+    case "withdrawn":
+      title = "You left the waiting room";
+      actions = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system.Button, { type: "button", disabled: busy, onClick: run(askAgain), children: "Rejoin" }),
+        home
+      ] });
+      break;
+    case "ended":
+      title = "The meeting has ended";
+      actions = home;
+      break;
+    default:
+      title = "Waiting for the host to let you in";
+      line = waiting?.admittersPresent === false ? "The host isn't here yet" : null;
+      actions = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system.Button, { type: "button", variant: "outline", disabled: busy, onClick: run(withdraw), children: "Cancel request" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__waiting", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Avatar, { name: host.identity.displayName, url: host.identity.avatarUrl, size: 72 }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h1", { className: "mx-meet__prejoin-title", children: title }),
+    line !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__empty-body", role: "status", "data-meet-notice": "host-absent", children: line }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mx-meet__waiting-actions", children: actions })
   ] });
 }
 function HostMenu() {
   const host = useRequiredMeetHost();
   const snapshot = useMeetSnapshot();
   const end = useEndMeeting();
-  const [confirmingEnd, setConfirmingEnd] = (0, import_react9.useState)(false);
+  const [confirmingEnd, setConfirmingEnd] = (0, import_react10.useState)(false);
   const locked = snapshot?.locked === true;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__host-menu", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__host-menu", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "button",
       {
         type: "button",
@@ -4579,9 +4719,9 @@ function HostMenu() {
         children: locked ? "Unlock meeting" : "Lock meeting"
       }
     ),
-    end.canEnd ? confirmingEnd ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__confirm", role: "group", "aria-label": "End this meeting?", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__confirm-text", children: "End it for everyone? Every participant is disconnected, the note-taker stops, and the wrap-up is written. Nobody can rejoin this meeting afterwards." }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    end.canEnd ? confirmingEnd ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "mx-meet__confirm", role: "group", "aria-label": "End this meeting?", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__confirm-text", children: "End it for everyone? Every participant is disconnected, the note-taker stops, and the wrap-up is written. Nobody can rejoin this meeting afterwards." }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "button",
         {
           type: "button",
@@ -4593,7 +4733,7 @@ function HostMenu() {
           children: "End it"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "button",
         {
           type: "button",
@@ -4602,7 +4742,7 @@ function HostMenu() {
           children: "Keep it running"
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "button",
       {
         type: "button",
@@ -4611,14 +4751,14 @@ function HostMenu() {
         children: end.ending ? "Ending\u2026" : "End meeting for everyone"
       }
     ) : null,
-    end.notice !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__notice", role: "status", children: end.notice }) : null
+    end.notice !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__notice", role: "status", children: end.notice }) : null
   ] });
 }
 function ReactionOverlay({
   reactions
 }) {
   if (reactions.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet__reactions", "aria-hidden": "true", children: reactions.map((reaction) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__reaction", children: reaction.emoji }, reaction.id)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mx-meet__reactions", "aria-hidden": "true", children: reactions.map((reaction) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__reaction", children: reaction.emoji }, reaction.id)) });
 }
 function clockOf(iso) {
   const at = new Date(iso);
@@ -4635,11 +4775,11 @@ function GuestRecordAccessControl({
   const isHost = inRoomHost || viewerId !== null && meeting.hostUserId === viewerId;
   if (host === null || !isHost) return null;
   const resolved = access.setting === "default" && access.effective !== null ? ` Right now that means: ${guestRecordAccessLabel(access.effective.level).toLowerCase()}.` : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "mx-meet__record-section", "aria-label": "What guests may read", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: "mx-meet__record-section-title", children: "What guests may read" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "mx-meet__field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__field-label", children: "People who attended by link, without an account" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { className: "mx-meet__record-section", "aria-label": "What guests may read", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { className: "mx-meet__record-section-title", children: "What guests may read" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "mx-meet__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__field-label", children: "People who attended by link, without an account" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "select",
         {
           className: "mx-meet__select",
@@ -4650,18 +4790,18 @@ function GuestRecordAccessControl({
               event.target.value
             );
           },
-          children: GUEST_RECORD_ACCESS_CHOICES.map((choice) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: choice, children: guestRecordAccessLabel(choice) }, choice))
+          children: GUEST_RECORD_ACCESS_CHOICES.map((choice) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: choice, children: guestRecordAccessLabel(choice) }, choice))
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "mx-meet__panel-note", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "mx-meet__panel-note", children: [
       guestRecordAccessExplanation(access.setting),
       resolved
     ] }),
-    access.saving ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__panel-note", role: "status", children: "Saving what guests may read\u2026" }) : null,
-    access.error !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system.ErrorBox, { as: "div", className: "mx-meet__refusal", error: access.error, operation: "Change who can join", origin: "meet/components", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__refusal-reason", children: access.error.message }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__refusal-remedy", children: access.error.remedy })
+    access.saving ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__panel-note", role: "status", children: "Saving what guests may read\u2026" }) : null,
+    access.error !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system.ErrorBox, { as: "div", className: "mx-meet__refusal", error: access.error, operation: "Change who can join", origin: "meet/components", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__refusal-reason", children: access.error.message }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__refusal-remedy", children: access.error.remedy })
     ] }) : null
   ] });
 }