@ai-matrx/meet 0.7.9 → 0.7.11

package/dist/react.js

@@ -241,7 +241,14 @@ var MEET_ROUTES = {
    */
   moderate: "/api/v1/meet/moderate",
   /** Meet wave 2: the SAVED chat — `POST` sends to everyone, `GET ?meeting_id=` reads history. */
-  chat: "/api/v1/meet/chat"
+  chat: "/api/v1/meet/chat",
+  /**
+   * Meet wave 5: polls, Q&A, the shared whiteboard and breakout rooms. `POST` acts
+   * (`{meeting_id, action, …}`), `GET ?meeting_id=` reads what this viewer may see.
+   */
+  collab: "/api/v1/meet/collab",
+  /** Meet wave 5: translate finished caption lines into this viewer's language. */
+  captionsTranslate: "/api/v1/meet/captions/translate"
 };
 function meetingPath(template, meetingId) {
   return template.replace("{meeting_id}", encodeURIComponent(meetingId));
@@ -300,7 +307,8 @@ function parseRoomToken(body, roomName) {
     // server that has not landed MRI-A11 — and never invents a host from
     // silence, because both fallbacks below grant nothing.
     role: readRole(payload, "role") ?? (isHost ? "host" : identity.startsWith("guest:") ? "guest" : "participant"),
-    lobby: readBoolean(payload, "lobby", false)
+    lobby: readBoolean(payload, "lobby", false),
+    breakoutRoomId: readString(payload, "breakout_room_id") ?? null
   };
 }
 function createTokenClient(options) {
@@ -348,6 +356,7 @@ function createTokenClient(options) {
           room_name: input.roomName,
           ...input.meetingId !== void 0 ? { meeting_id: input.meetingId } : {},
           ...input.slug !== void 0 ? { slug: input.slug } : {},
+          ...input.breakoutRoomId != null ? { breakout_room_id: input.breakoutRoomId } : {},
           organization_id: input.identity.organizationId,
           display_name: input.identity.displayName,
           device_id: input.identity.deviceId,
@@ -411,7 +420,8 @@ function createTokenClient(options) {
   return {
     get(input) {
       const entry = cache.get(input.roomName);
-      if (entry !== void 0) {
+      const sameRoom = entry !== void 0 && (entry.token.breakoutRoomId ?? null) === (input.breakoutRoomId ?? null);
+      if (entry !== void 0 && sameRoom) {
         if (entry.inFlight !== null) return entry.inFlight;
         if (!expired(entry)) return Promise.resolve(entry.token);
       }
@@ -457,7 +467,8 @@ function placeholder(roomName) {
     canRecord: false,
     isHost: false,
     role: "participant",
-    lobby: false
+    lobby: false,
+    breakoutRoomId: null
   };
 }
 async function serverSentence(response) {
@@ -1515,6 +1526,339 @@ function listenOnlyNotice(media) {
   return isListenOnly(media) ? LISTEN_ONLY_NOTICE : null;
 }
 
+// src/core/collab.ts
+var EMPTY_COLLAB = {
+  loaded: false,
+  error: null,
+  settings: null,
+  polls: [],
+  questions: [],
+  strokes: [],
+  breakout: null,
+  broadcast: null,
+  moveRequest: null,
+  panelRequest: null,
+  captionLanguage: null,
+  captionTranslations: {},
+  captionTranslationError: null
+};
+function obj(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value) ? value : null;
+}
+function str(value) {
+  return typeof value === "string" ? value : null;
+}
+function num(value) {
+  return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+function strings(value) {
+  return Array.isArray(value) ? value.filter((v) => typeof v === "string") : [];
+}
+function pollFromRow(row) {
+  const id = str(row["id"]);
+  if (id === null) return null;
+  const options = [];
+  for (const raw of Array.isArray(row["options"]) ? row["options"] : []) {
+    const option = obj(raw);
+    const optionId = option === null ? null : str(option["id"]);
+    if (option === null || optionId === null) continue;
+    const votes = num(option["votes"]);
+    options.push({
+      id: optionId,
+      text: str(option["text"]) ?? "",
+      ...votes !== null ? { votes } : {},
+      ...Array.isArray(option["voters"]) ? { voters: strings(option["voters"]) } : {}
+    });
+  }
+  const state = str(row["state"]);
+  return {
+    id,
+    question: str(row["question"]) ?? "",
+    options,
+    multiple: row["multiple"] === true,
+    anonymous: row["anonymous"] === true,
+    state: state === "live" || state === "closed" ? state : "draft",
+    resultsShared: row["results_shared"] === true,
+    voterCount: num(row["voter_count"]),
+    myVote: strings(row["my_vote"]),
+    createdByName: str(row["created_by_name"]) ?? "",
+    createdAt: str(row["created_at"])
+  };
+}
+function questionFromRow(row) {
+  const id = str(row["id"]);
+  if (id === null) return null;
+  const state = str(row["state"]);
+  return {
+    id,
+    text: str(row["text"]) ?? "",
+    askerName: str(row["asker_name"]) ?? "",
+    anonymous: row["anonymous"] === true,
+    state: state === "answered" || state === "dismissed" ? state : "open",
+    answer: str(row["answer"]),
+    answeredByName: str(row["answered_by_name"]),
+    upvotes: num(row["upvotes"]) ?? 0,
+    upvotedByMe: row["upvoted_by_me"] === true,
+    mine: row["mine"] === true,
+    createdAt: str(row["created_at"])
+  };
+}
+function strokeFromRow(row) {
+  const id = str(row["id"]);
+  if (id === null || !Array.isArray(row["points"])) return null;
+  const points = [];
+  for (const raw of row["points"]) {
+    if (Array.isArray(raw) && typeof raw[0] === "number" && typeof raw[1] === "number") {
+      points.push([raw[0], raw[1]]);
+    }
+  }
+  return {
+    id,
+    points,
+    color: str(row["color"]) ?? "#111827",
+    width: num(row["width"]) ?? 3,
+    tool: row["tool"] === "highlighter" ? "highlighter" : "pen",
+    by: str(row["by"]) ?? "",
+    byName: str(row["by_name"]) ?? ""
+  };
+}
+function broadcastFrom(value) {
+  const row = obj(value);
+  const text3 = row === null ? null : str(row["text"]);
+  if (row === null || text3 === null) return null;
+  return { text: text3, by: str(row["by"]) ?? "", at: str(row["at"]) ?? "" };
+}
+function planFromRow(row) {
+  const id = str(row["id"]);
+  if (id === null) return null;
+  const rooms = [];
+  for (const raw of Array.isArray(row["rooms"]) ? row["rooms"] : []) {
+    const room = obj(raw);
+    const roomId = room === null ? null : str(room["id"]);
+    if (room === null || roomId === null) continue;
+    rooms.push({ id: roomId, name: str(room["name"]) ?? roomId, identities: strings(room["identities"]) });
+  }
+  return {
+    id,
+    state: row["state"] === "open" ? "open" : "closed",
+    rooms,
+    allowChoose: row["allow_choose"] === true,
+    minutes: num(row["minutes"]) ?? 0,
+    openedAt: str(row["opened_at"]),
+    endsAt: str(row["ends_at"]),
+    closedAt: str(row["closed_at"]),
+    broadcasts: (Array.isArray(row["broadcasts"]) ? row["broadcasts"] : []).map(broadcastFrom).filter((b) => b !== null)
+  };
+}
+function settingsFromRow(row) {
+  if (row === null) return null;
+  return {
+    pollsEnabled: row["polls_enabled"] === true,
+    pollMaxOptions: num(row["poll_max_options"]) ?? 10,
+    qaEnabled: row["qa_enabled"] === true,
+    qaAnonymousAllowed: row["qa_anonymous_allowed"] === true,
+    whiteboardEnabled: row["whiteboard_enabled"] === true,
+    breakoutsEnabled: row["breakouts_enabled"] === true,
+    breakoutMaxRooms: num(row["breakout_max_rooms"]) ?? 20,
+    breakoutDefaultMinutes: num(row["breakout_default_minutes"]) ?? 15,
+    captionTranslationEnabled: row["caption_translation_enabled"] === true,
+    captionTranslationLanguage: str(row["caption_translation_language"]) ?? ""
+  };
+}
+function collabFromState(body, previous) {
+  const list = (key, parse) => (Array.isArray(body[key]) ? body[key] : []).map((raw) => {
+    const row = obj(raw);
+    return row === null ? null : parse(row);
+  }).filter((item) => item !== null);
+  const breakoutRow = obj(body["breakout"]);
+  return {
+    ...previous,
+    loaded: true,
+    error: null,
+    settings: settingsFromRow(obj(body["settings"])),
+    polls: list("polls", pollFromRow),
+    questions: list("questions", questionFromRow),
+    strokes: list("strokes", strokeFromRow),
+    breakout: breakoutRow === null ? null : planFromRow(breakoutRow)
+  };
+}
+function upsert(items, next) {
+  const index = items.findIndex((item) => item.id === next.id);
+  if (index === -1) return [...items, next];
+  const copy = items.slice();
+  copy[index] = next;
+  return copy;
+}
+function withItem(collab, row, fromRoom = false) {
+  const kind = str(row["kind"]);
+  if (kind === "poll") {
+    const poll = pollFromRow(row);
+    if (poll === null) return collab;
+    const known = collab.polls.find((p) => p.id === poll.id);
+    const merged = fromRoom && known !== void 0 ? { ...poll, myVote: known.myVote } : poll;
+    return { ...collab, polls: upsert(collab.polls, merged) };
+  }
+  if (kind === "question") {
+    const question = questionFromRow(row);
+    if (question === null) return collab;
+    const known = collab.questions.find((q) => q.id === question.id);
+    const merged = fromRoom && known !== void 0 ? { ...question, mine: known.mine, upvotedByMe: known.upvotedByMe } : question;
+    return { ...collab, questions: upsert(collab.questions, merged) };
+  }
+  if (kind === "stroke") {
+    const stroke = strokeFromRow(row);
+    if (stroke === null) return collab;
+    return { ...collab, strokes: upsert(collab.strokes, stroke) };
+  }
+  if (kind === "breakout") {
+    const plan = planFromRow(row);
+    if (plan === null) return collab;
+    return { ...collab, breakout: plan };
+  }
+  return collab;
+}
+function without(collab, ids) {
+  const gone = new Set(ids);
+  return {
+    ...collab,
+    polls: collab.polls.filter((p) => !gone.has(p.id)),
+    questions: collab.questions.filter((q) => !gone.has(q.id)),
+    strokes: collab.strokes.filter((s) => !gone.has(s.id))
+  };
+}
+function applyCollabPacket(collab, payload, context) {
+  const item = obj(payload["item"]);
+  const audience = str(payload["audience"]);
+  if (item !== null) {
+    const kind = str(item["kind"]);
+    const hostOnlyView = kind === "poll" || kind === "question";
+    if (hostOnlyView && context.isHost && audience !== "hosts") {
+      return { next: null, dropped: "the room copy of an item a host receives in full" };
+    }
+    let next = withItem(collab, item, true);
+    if (kind === "poll" && str(item["state"]) === "live") {
+      const before = collab.polls.find((p) => p.id === str(item["id"]));
+      if (before === void 0 || before.state !== "live") {
+        next = { ...next, panelRequest: { panel: "polls", at: context.now } };
+      }
+    }
+    if (kind === "breakout") {
+      const plan = planFromRow(item);
+      if (plan !== null && plan.state === "closed") {
+        next = { ...next, moveRequest: { roomId: null, at: context.now } };
+      }
+    }
+    const move = obj(payload["move"]);
+    if (move !== null && str(move["identity"]) === context.localIdentity) {
+      next = { ...next, moveRequest: { roomId: str(move["room_id"]), at: context.now } };
+    }
+    return { next };
+  }
+  if (Array.isArray(payload["removed"])) {
+    return { next: without(collab, strings(payload["removed"])) };
+  }
+  if (Array.isArray(payload["hidden"])) {
+    return context.isHost ? { next: null, dropped: "hosts keep dismissed questions" } : { next: without(collab, strings(payload["hidden"])) };
+  }
+  if (payload["cleared"] === "whiteboard") {
+    return { next: { ...collab, strokes: [] } };
+  }
+  const broadcast = broadcastFrom(payload["broadcast"]);
+  if (broadcast !== null) {
+    return { next: { ...collab, broadcast } };
+  }
+  return { next: null, dropped: "a collab packet with nothing this version understands" };
+}
+function assignedRoom(plan, identity) {
+  if (plan === null || plan.state !== "open" || identity === null) return null;
+  return plan.rooms.find((room) => room.identities.includes(identity)) ?? null;
+}
+function autoAssign(identities, rooms, exclude = []) {
+  const count2 = Math.max(1, Math.floor(rooms));
+  const out = Array.from({ length: count2 }, () => []);
+  const skip = new Set(exclude);
+  let index = 0;
+  for (const identity of identities) {
+    if (skip.has(identity)) continue;
+    out[index % count2].push(identity);
+    index += 1;
+  }
+  return out;
+}
+function breakoutRemainingMs(plan, now) {
+  if (plan === null || plan.state !== "open" || plan.endsAt === null) return null;
+  const end = Date.parse(plan.endsAt);
+  return Number.isNaN(end) ? null : Math.max(0, end - now);
+}
+function defaultCaptionLanguage(settings, viewerLanguage) {
+  const configured = settings?.captionTranslationLanguage.trim() ?? "";
+  if (configured.length > 0) return configured;
+  const own = (viewerLanguage ?? "").trim();
+  return own.length > 0 ? own : "en";
+}
+var CAPTION_LANGUAGES = [
+  { tag: "en", name: "English" },
+  { tag: "es", name: "Spanish" },
+  { tag: "fr", name: "French" },
+  { tag: "de", name: "German" },
+  { tag: "it", name: "Italian" },
+  { tag: "pt", name: "Portuguese" },
+  { tag: "nl", name: "Dutch" },
+  { tag: "pl", name: "Polish" },
+  { tag: "ru", name: "Russian" },
+  { tag: "uk", name: "Ukrainian" },
+  { tag: "tr", name: "Turkish" },
+  { tag: "ar", name: "Arabic" },
+  { tag: "he", name: "Hebrew" },
+  { tag: "fa", name: "Persian" },
+  { tag: "hi", name: "Hindi" },
+  { tag: "bn", name: "Bengali" },
+  { tag: "zh", name: "Chinese" },
+  { tag: "ja", name: "Japanese" },
+  { tag: "ko", name: "Korean" },
+  { tag: "vi", name: "Vietnamese" },
+  { tag: "th", name: "Thai" },
+  { tag: "id", name: "Indonesian" },
+  { tag: "sv", name: "Swedish" }
+];
+async function loadMeetingActivities(api, meetingId, roomToken = null) {
+  let response;
+  try {
+    response = await api.request({
+      path: `${MEET_ROUTES.collab}?meeting_id=${encodeURIComponent(meetingId)}`,
+      method: "GET",
+      operation: "meet.loadMeetingActivities",
+      requireAuth: roomToken === null,
+      ...roomToken !== null ? { headers: { [ROOM_TOKEN_HEADER]: roomToken } } : {}
+    });
+  } catch (error) {
+    return {
+      collab: null,
+      refusal: {
+        message: `Polls, questions and the whiteboard could not be read (${error.message}).`,
+        remedy: error.remedy ?? "Reload the page."
+      }
+    };
+  }
+  if (!response.ok) {
+    let body = null;
+    try {
+      body = await response.json();
+    } catch {
+      body = null;
+    }
+    const said = readServerRefusal(body);
+    return {
+      collab: null,
+      refusal: {
+        message: said?.reason ?? `Polls and questions could not be read (the server answered ${response.status}).`,
+        remedy: said?.remedy || "Reload the page."
+      }
+    };
+  }
+  return { collab: collabFromState(await response.json(), EMPTY_COLLAB), refusal: null };
+}
+
 // src/core/transcript.ts
 function normalizeSpoken(text3) {
   return text3.toLowerCase().replace(/[^\p{L}\p{N}]+/gu, " ").trim();
@@ -1616,7 +1960,9 @@ var EMPTY = {
   wrapUp: null,
   noteTakerRefusal: null,
   media: IDLE_MEDIA,
-  failure: null
+  failure: null,
+  collab: EMPTY_COLLAB,
+  breakoutRoomId: null
 };
 function effectiveRole(snapshot) {
   const me = snapshot.participants.find(
@@ -2267,7 +2613,19 @@ var INVITEE_COLUMNS = "id,meeting_id,invitee_user_id,email,display_name,role,rsv
 var RECORDING_COLUMNS = "id,meeting_id,state,started_at,ended_at,started_by,file_id,failure_reason";
 var SEGMENT_COLUMNS = "id,meeting_id,identity,speaker,text,started_at,is_final,metadata";
 var NOTE_COLUMNS = "id,meeting_id,text,kind,assignee_user_id,created_at,metadata";
-var ATTENDEE_COLUMNS = "id,meeting_id,identity,participant_user_id,display_name,avatar_url,role,admission_state,is_agent,joined_at,left_at";
+var ATTENDEE_COLUMNS = "id,meeting_id,identity,participant_user_id,display_name,avatar_url,role,admission_state,is_agent,joined_at,left_at,sessions:metadata->sessions";
+function projectStays(value) {
+  if (!Array.isArray(value)) return [];
+  const stays = [];
+  for (const item of value) {
+    if (item === null || typeof item !== "object") continue;
+    const joined = item["joined_at"];
+    const left = item["left_at"];
+    if (typeof joined !== "string" || joined.length === 0) continue;
+    stays.push({ joinedAt: joined, leftAt: typeof left === "string" && left.length > 0 ? left : null });
+  }
+  return stays;
+}
 function text(row, key) {
   const value = row[key];
   return typeof value === "string" && value.length > 0 ? value : null;
@@ -2366,7 +2724,7 @@ var OCCURRENCE_STATES = ["scheduled", "moved", "cancelled"];
 function rsvpState(value) {
   return RSVP_STATES.includes(value) ? value : "needs_action";
 }
-function num(row, key) {
+function num2(row, key) {
   const value = row[key];
   return typeof value === "number" ? value : null;
 }
@@ -2388,7 +2746,7 @@ function projectInvitee(row) {
     rsvpState: rsvpState(text(row, "rsvp_state")),
     respondedAt: when(row, "responded_at"),
     rsvpNote: text(row, "rsvp_note"),
-    lastSentSequence: num(row, "last_sent_sequence"),
+    lastSentSequence: num2(row, "last_sent_sequence"),
     lastSentAt: when(row, "last_sent_at")
   };
 }
@@ -2399,10 +2757,10 @@ function projectOccurrence(row) {
     meetingId: asMeetingId(requireText(row, "meeting_id", operation)),
     originalStart: when(row, "original_start") ?? requireText(row, "original_start", operation),
     occurrenceStart: when(row, "occurrence_start") ?? requireText(row, "occurrence_start", operation),
-    durationMinutes: num(row, "duration_minutes"),
+    durationMinutes: num2(row, "duration_minutes"),
     // An unknown state is shown as scheduled, never dropped: the row is real.
     state: OCCURRENCE_STATES.includes(state) ? state : "scheduled",
-    sequence: num(row, "sequence") ?? 0
+    sequence: num2(row, "sequence") ?? 0
   };
 }
 function projectUpcoming(row) {
@@ -2431,9 +2789,9 @@ function projectOverride(row) {
     originalStart: when(row, "original_start") ?? requireText(row, "original_start", operation),
     state: text(row, "state") === "moved" ? "moved" : "cancelled",
     newStart: when(row, "new_start"),
-    newDurationMinutes: num(row, "new_duration_minutes"),
+    newDurationMinutes: num2(row, "new_duration_minutes"),
     reason: text(row, "reason"),
-    calendarSequence: num(row, "calendar_sequence") ?? 0,
+    calendarSequence: num2(row, "calendar_sequence") ?? 0,
     deletedAt: when(row, "deleted_at")
   };
 }
@@ -2457,7 +2815,7 @@ function projectRsvpInvitation(body) {
       title: text(meeting, "title") ?? "Meeting",
       slug: requireText(meeting, "slug", operation),
       scheduledFor: when(meeting, "scheduled_for"),
-      durationMinutes: num(meeting, "duration_minutes"),
+      durationMinutes: num2(meeting, "duration_minutes"),
       timeZone: text(meeting, "time_zone") ?? "UTC",
       agenda: text(meeting, "agenda"),
       recurrenceRule: text(meeting, "recurrence_rule"),
@@ -2491,6 +2849,7 @@ function changesPatch(changes) {
     patch["scheduled_duration_minutes"] = changes.scheduledDurationMinutes;
   }
   if (changes.recurrenceRule !== void 0) patch["recurrence_rule"] = changes.recurrenceRule;
+  if (changes.keepExceptions !== void 0) patch["keep_exceptions"] = changes.keepExceptions;
   return patch;
 }
 function createMeetRepository(options) {
@@ -2637,7 +2996,8 @@ function createMeetRepository(options) {
       admissionState: states.includes(admission) ? admission : "admitted",
       isAgent: bool(row, "is_agent", false),
       joinedAt: text(row, "joined_at"),
-      leftAt: text(row, "left_at")
+      leftAt: text(row, "left_at"),
+      sessions: projectStays(row["sessions"])
     };
   }
   function requireOrg(organizationId, operation) {
@@ -3031,8 +3391,8 @@ function projectLibraryRecording(row) {
     fileId: text(row, "file_id"),
     startedAt: text(row, "started_at"),
     endedAt: text(row, "ended_at"),
-    durationMs: num(row, "duration_ms"),
-    sizeBytes: num(row, "size_bytes"),
+    durationMs: num2(row, "duration_ms"),
+    sizeBytes: num2(row, "size_bytes"),
     failureReason: text(row, "failure_reason"),
     archivedAt: text(row, "deleted_at"),
     organizationId: asOrganizationId(requireText(row, "organization_id", operation))
@@ -3059,7 +3419,7 @@ function projectSearchHit(row) {
     speaker: text(row, "speaker"),
     snippet: text(row, "snippet") ?? "",
     at: text(row, "said_at"),
-    rank: num(row, "rank") ?? 0
+    rank: num2(row, "rank") ?? 0
   };
 }
 function snippetRuns(snippet) {
@@ -3204,7 +3564,14 @@ var ROOM_EVENTS = {
    * person concerned; `lower-hands {identities: [...] | "*"}` · `role {identity,
    * role}` — to everyone.
    */
-  moderation: "matrx.meet.moderation"
+  moderation: "matrx.meet.moderation",
+  /**
+   * A meeting ROOM ITEM changed (Meet wave 5): a poll, a Q&A question, a whiteboard
+   * stroke or the breakout plan. Payload `{ meeting_id, item }` · `{ removed: [ids] }` ·
+   * `{ hidden: [ids] }` · `{ cleared: "whiteboard" }` · `{ broadcast }` · `{ item, move }`.
+   * A host's fuller copy of a poll or question carries `audience: "hosts"`.
+   */
+  collab: "matrx.meet.collab"
 };
 function isRoomEventTopic(topic) {
   return topic.startsWith(ROOM_EVENT_PREFIX);
@@ -3244,10 +3611,27 @@ function applyRoomEvent(args) {
       return applyChat(store, payload);
     case ROOM_EVENTS.moderation:
       return applyModeration(store, payload, now);
+    case ROOM_EVENTS.collab:
+      return applyCollab(store, payload, now);
     default:
       return ignored(`${topic} is not known to this version of @ai-matrx/meet`);
   }
 }
+function applyCollab(store, payload, now) {
+  const snapshot = store.snapshot();
+  const meeting = snapshot.meeting;
+  if (meeting !== null && text2(payload["meeting_id"]) !== null && payload["meeting_id"] !== meeting.id) {
+    return ignored("a collab event for a different meeting than this room is showing");
+  }
+  const result = applyCollabPacket(snapshot.collab, payload, {
+    localIdentity: snapshot.localIdentity,
+    isHost: ROLE_RANK[effectiveRole(snapshot)] >= ROLE_RANK.cohost,
+    now: now()
+  });
+  if (result.next === null) return ignored(result.dropped ?? "a collab packet that changed nothing");
+  store.patch({ collab: result.next });
+  return HANDLED;
+}
 function applyNote(store, payload) {
   const row = object(payload["note"]);
   if (row === null) return ignored("a note event with no `note` row");
@@ -3569,6 +3953,7 @@ function createRoomEngine(options) {
   let joining = null;
   let lastRequest = null;
   let disposed = false;
+  let moving = false;
   const confirmingEnds = /* @__PURE__ */ new WeakSet();
   async function leaveRoom() {
     const target = driver;
@@ -3798,6 +4183,7 @@ function createRoomEngine(options) {
       }
     },
     disconnected(reason) {
+      if (moving) return;
       if (current !== null) {
         tokens.invalidate(current.roomName);
         current = null;
@@ -3812,11 +4198,13 @@ function createRoomEngine(options) {
       roomName: request.roomName,
       identity,
       ...request.meetingId !== void 0 ? { meetingId: request.meetingId } : {},
-      ...request.slug !== void 0 ? { slug: request.slug } : {}
+      ...request.slug !== void 0 ? { slug: request.slug } : {},
+      ...request.breakoutRoomId != null ? { breakoutRoomId: request.breakoutRoomId } : {}
     });
     current = token;
     store.patch({
       localIdentity: token.identity,
+      breakoutRoomId: token.breakoutRoomId ?? null,
       grants: {
         role: token.role,
         canRecord: token.canRecord,
@@ -3935,6 +4323,56 @@ function createRoomEngine(options) {
       });
       return joining;
     },
+    async moveToBreakout(roomId) {
+      const request = lastRequest;
+      if (request === null || driver === null) {
+        report(
+          "warn",
+          "meet.moveToBreakout: this engine is not in a meeting room",
+          "Join the meeting first; a breakout is a room OF a meeting."
+        );
+        return;
+      }
+      if ((store.snapshot().breakoutRoomId ?? null) === roomId) return;
+      if (joining !== null) await joining.catch(() => void 0);
+      const previous = driver;
+      const next = {
+        ...request,
+        breakoutRoomId: roomId,
+        // Arrive as you were: camera and microphone as they are now.
+        mode: store.snapshot().media.camera.enabled ? "video" : "audio",
+        microphone: store.snapshot().media.microphone.enabled
+      };
+      moving = true;
+      try {
+        driver = null;
+        tokens.invalidate(request.roomName);
+        current = null;
+        await previous.disconnect();
+        lastRequest = next;
+        joining = connect(next).finally(() => {
+          joining = null;
+        });
+        await joining;
+      } catch (error) {
+        const normalized = normalizeMeetError(error, "meet.moveToBreakout");
+        report("warn", normalized.message, normalized.remedy);
+        if (roomId !== null) {
+          lastRequest = { ...next, breakoutRoomId: null };
+          joining = connect(lastRequest).finally(() => {
+            joining = null;
+          });
+          await joining.catch((again) => {
+            throw fail(again, "meet.moveToBreakout");
+          });
+        } else {
+          throw fail(error, "meet.moveToBreakout");
+        }
+        throw normalized;
+      } finally {
+        moving = false;
+      }
+    },
     leave: leaveRoom,
     // Turning a device on mid-meeting is the SAME operation as turning it on
     // during the join, so it runs the same function. A failure here used to
@@ -4204,6 +4642,109 @@ function createInRoomClient(options) {
         (row) => typeof row === "object" && row !== null ? chatFromRow(row) : null
       ).filter((message) => message !== null);
       store.loadChat(messages);
+    },
+    async loadCollab() {
+      const operation = "meet.loadCollab";
+      const id = meetingId(operation);
+      const hdrs = headers();
+      const response = await api.request({
+        path: `${MEET_ROUTES.collab}?meeting_id=${encodeURIComponent(id)}`,
+        method: "GET",
+        operation,
+        ...hdrs !== void 0 ? { headers: hdrs } : {}
+      });
+      if (!response.ok) {
+        const error = await refusal2(
+          response,
+          operation,
+          "Polls, questions and the whiteboard could not be read. New ones still arrive."
+        );
+        store.patch({ collab: { ...store.snapshot().collab, loaded: true, error: error.message } });
+        throw error;
+      }
+      const body = await response.json();
+      store.patch({ collab: collabFromState(body, store.snapshot().collab) });
+    },
+    async collab(request) {
+      const operation = `meet.collab(${request.action})`;
+      const hdrs = headers();
+      const response = await api.request({
+        path: MEET_ROUTES.collab,
+        method: "POST",
+        operation,
+        body: {
+          meeting_id: meetingId(operation),
+          action: request.action,
+          ...request.itemId !== void 0 ? { item_id: request.itemId } : {},
+          ...request.question !== void 0 ? { question: request.question } : {},
+          ...request.options !== void 0 ? { options: request.options } : {},
+          ...request.multiple !== void 0 ? { multiple: request.multiple } : {},
+          ...request.anonymous !== void 0 ? { anonymous: request.anonymous } : {},
+          ...request.optionIds !== void 0 ? { option_ids: request.optionIds } : {},
+          ...request.text !== void 0 ? { text: request.text } : {},
+          ...request.stroke !== void 0 ? { stroke: request.stroke } : {},
+          ...request.rooms !== void 0 ? { rooms: request.rooms } : {},
+          ...request.allowChoose !== void 0 ? { allow_choose: request.allowChoose } : {},
+          ...request.minutes !== void 0 ? { minutes: request.minutes } : {},
+          ...request.identity !== void 0 ? { identity: request.identity } : {},
+          ...request.roomId !== void 0 ? { room_id: request.roomId } : {}
+        },
+        ...hdrs !== void 0 ? { headers: hdrs } : {}
+      });
+      if (!response.ok) {
+        throw await refusal2(response, operation, "Nothing was changed.");
+      }
+      const payload = await response.json();
+      const removed = Array.isArray(payload["removed"]) ? payload["removed"].filter((v) => typeof v === "string") : [];
+      let next = store.snapshot().collab;
+      const item = payload["item"];
+      if (typeof item === "object" && item !== null) next = withItem(next, item);
+      if (removed.length > 0) {
+        const gone = new Set(removed);
+        next = {
+          ...next,
+          polls: next.polls.filter((p) => !gone.has(p.id)),
+          questions: next.questions.filter((q) => !gone.has(q.id)),
+          strokes: next.strokes.filter((st) => !gone.has(st.id))
+        };
+      }
+      store.patch({ collab: next });
+      const itemId = typeof item === "object" && item !== null && typeof item["id"] === "string" ? item["id"] : null;
+      return {
+        action: request.action,
+        message: typeof payload["message"] === "string" ? payload["message"] : "Done.",
+        removed,
+        itemId
+      };
+    },
+    async translateCaptions(language, lines) {
+      if (lines.length === 0) return;
+      const operation = "meet.translateCaptions";
+      const hdrs = headers();
+      const response = await api.request({
+        path: MEET_ROUTES.captionsTranslate,
+        method: "POST",
+        operation,
+        body: { meeting_id: meetingId(operation), target_language: language, lines },
+        ...hdrs !== void 0 ? { headers: hdrs } : {}
+      });
+      if (!response.ok) {
+        const error = await refusal2(response, operation, "Captions stay in the language they were spoken.");
+        store.patch({
+          collab: { ...store.snapshot().collab, captionTranslationError: error.message }
+        });
+        throw error;
+      }
+      const payload = await response.json();
+      const current = store.snapshot().collab;
+      if (current.captionLanguage !== language) return;
+      const merged = { ...current.captionTranslations };
+      for (const [id, value] of Object.entries(payload.translations ?? {})) {
+        if (typeof value === "string") merged[id] = value;
+      }
+      store.patch({
+        collab: { ...current, captionTranslations: merged, captionTranslationError: null }
+      });
     }
   };
 }
@@ -4322,6 +4863,15 @@ function createLiveKitDriver(handlers, options = {}) {
       handlers.participants([local, ...remotes]);
     };
     projectRoster = roster;
+    created.on(RoomEvent.TrackSubscribed, (track) => {
+      if (track.kind !== Track.Kind.Audio || typeof document === "undefined") return;
+      const element = track.attach();
+      element.setAttribute("data-mx-meet-audio", "");
+      audioSink().appendChild(element);
+    }).on(RoomEvent.TrackUnsubscribed, (track) => {
+      if (track.kind !== Track.Kind.Audio) return;
+      for (const element of track.detach()) element.remove();
+    });
     created.on(RoomEvent.ParticipantConnected, roster).on(RoomEvent.ParticipantDisconnected, roster).on(RoomEvent.TrackSubscribed, roster).on(RoomEvent.TrackUnsubscribed, roster).on(RoomEvent.TrackMuted, roster).on(RoomEvent.TrackUnmuted, roster).on(RoomEvent.LocalTrackPublished, roster).on(RoomEvent.LocalTrackUnpublished, roster).on(RoomEvent.ParticipantNameChanged, roster).on(RoomEvent.ParticipantAttributesChanged, roster).on(RoomEvent.ParticipantMetadataChanged, roster).on(RoomEvent.RoomMetadataChanged, (metadata) => {
       handlers.roomMetadata?.(metadata ?? "");
     }).on(RoomEvent.ActiveSpeakersChanged, (speakers) => {
@@ -4337,6 +4887,8 @@ function createLiveKitDriver(handlers, options = {}) {
         participant?.identity ?? null
       );
     }).on(RoomEvent.Disconnected, (reason) => {
+      audioContainer?.remove();
+      audioContainer = null;
       handlers.disconnected(reason === void 0 ? null : String(reason));
     });
     try {
@@ -4378,10 +4930,26 @@ function createLiveKitDriver(handlers, options = {}) {
       microphone: Track.Source.Microphone,
       screen: Track.Source.ScreenShare
     };
+    trackEvents = {
+      subscribed: RoomEvent.TrackSubscribed,
+      localPublished: RoomEvent.LocalTrackPublished
+    };
     room = created;
     return created;
   }
   let sources = null;
+  let trackEvents = null;
+  let audioContainer = null;
+  function audioSink() {
+    if (audioContainer !== null && audioContainer.isConnected) return audioContainer;
+    const container = document.createElement("div");
+    container.setAttribute("data-mx-meet-audio-sink", "");
+    container.setAttribute("aria-hidden", "true");
+    container.style.display = "none";
+    document.body.appendChild(container);
+    audioContainer = container;
+    return container;
+  }
   function requireRoom(operation) {
     if (room === null) {
       throw new MeetError(
@@ -4412,6 +4980,8 @@ function createLiveKitDriver(handlers, options = {}) {
       } catch {
       }
       projectRoster = null;
+      audioContainer?.remove();
+      audioContainer = null;
       await target.disconnect();
     },
     async setMicrophoneEnabled(enabled) {
@@ -4477,14 +5047,33 @@ function createLiveKitDriver(handlers, options = {}) {
     attach(identity, kind, element) {
       const target = requireRoom("attach");
       const source = sources?.[kind];
-      const participant = target.localParticipant.identity === identity ? target.localParticipant : target.remoteParticipants.get(identity);
-      if (participant === void 0 || source === void 0) return () => void 0;
-      const publication = participant.getTrackPublication(source);
-      const track = publication?.track;
-      if (track === void 0) return () => void 0;
-      track.attach(element);
+      if (source === void 0) return () => void 0;
+      let current = null;
+      const sync = () => {
+        const participant = target.localParticipant.identity === identity ? target.localParticipant : target.remoteParticipants.get(identity);
+        const track = participant?.getTrackPublication(source)?.track;
+        if (track === void 0 || track === current) return;
+        current?.detach(element);
+        track.attach(element);
+        current = track;
+      };
+      const onTrack = (...args) => {
+        const who = args[args.length - 1];
+        if (who?.identity === identity) sync();
+      };
+      sync();
+      const events = trackEvents;
+      if (events !== null) {
+        target.on(events.subscribed, onTrack);
+        target.on(events.localPublished, onTrack);
+      }
       return () => {
-        track.detach(element);
+        if (events !== null) {
+          target.off(events.subscribed, onTrack);
+          target.off(events.localPublished, onTrack);
+        }
+        current?.detach(element);
+        current = null;
       };
     },
     activeDevices() {
@@ -4723,6 +5312,14 @@ function MeetRuntime(props) {
       }
       if (chatReadFor === snapshot.meeting.id) return;
       chatReadFor = snapshot.meeting.id;
+      void inRoom.loadCollab().catch((error) => {
+        const normalized = error;
+        report({
+          level: "warn",
+          message: normalized.message ?? "meet: polls, questions and the whiteboard could not be read",
+          ...normalized.remedy !== void 0 ? { remedy: normalized.remedy } : {}
+        });
+      });
       void inRoom.loadChat().catch((error) => {
         const normalized = error;
         store.patch({
@@ -6063,7 +6660,7 @@ function useGuestRecordAccess(meeting) {
 }
 
 // src/react/components.tsx
-import { useEffect as useEffect3, useLayoutEffect, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
+import { useEffect as useEffect4, useLayoutEffect, useMemo as useMemo3, useRef as useRef4, useState as useState4 } from "react";
 import { ErrorBox } from "@ai-matrx/design-system";
 import { avatarPaletteIndex, formatDurationMs as formatDurationMs3, getInitials } from "@ai-matrx/kit/format";
 
@@ -6074,6 +6671,7 @@ function kindOf(person) {
   if (person.role === "host") return "host";
   if (person.role === "cohost") return "cohost";
   if (person.role === "guest") return person.userId !== null ? "signed-in guest" : "guest";
+  if (person.userId === null) return "guest";
   return "member";
 }
 function ms(iso) {
@@ -6129,12 +6727,19 @@ function coveredMs(intervals) {
 }
 function attendanceReport(meeting, attendees, names = {}) {
   const end = ms(meeting.endedAt);
+  const measuredOf = /* @__PURE__ */ new Map();
   const perJoin = attendees.map((person) => {
-    const joined = ms(person.joinedAt);
-    const left = ms(person.leftAt);
-    const until = left ?? end;
-    const duration = joined !== null && until !== null && until >= joined ? until - joined : null;
-    return {
+    const stays = person.sessions !== void 0 && person.sessions.length > 0 ? person.sessions.map((stay) => [ms(stay.joinedAt), ms(stay.leftAt)]) : [[ms(person.joinedAt), ms(person.leftAt)]];
+    let toEnd = false;
+    const measured = [];
+    for (const [joined, left] of stays) {
+      const until = left ?? end;
+      if (joined === null || until === null || until < joined) continue;
+      if (left === null) toEnd = true;
+      measured.push([joined, until]);
+    }
+    const duration = measured.length === 0 ? null : coveredMs(measured);
+    const row = {
       id: person.id,
       identity: person.identity,
       name: displayNameFor(names, person.identity, person.displayName),
@@ -6143,10 +6748,12 @@ function attendanceReport(meeting, attendees, names = {}) {
       joinedAt: person.joinedAt,
       leftAt: person.leftAt,
       durationMs: duration,
-      durationToEnd: duration !== null && left === null,
+      durationToEnd: duration !== null && toEnd,
       admission: person.admissionState,
-      joins: 1
+      joins: Math.max(1, person.sessions?.length ?? 0)
     };
+    measuredOf.set(row, measured);
+    return row;
   });
   const groups = /* @__PURE__ */ new Map();
   attendees.forEach((person, index) => {
@@ -6169,17 +6776,14 @@ function attendanceReport(meeting, attendees, names = {}) {
       const left = ms(row.leftAt);
       return left !== null && (latest === null || left > latest) ? left : latest;
     }, null);
-    const intervals = came.flatMap((row) => {
-      const joined = ms(row.joinedAt);
-      return joined !== null && row.durationMs !== null ? [[joined, joined + row.durationMs]] : [];
-    });
+    const intervals = came.flatMap((row) => measuredOf.get(row) ?? []);
     return {
       ...first,
       kind,
       leftAt: open ? null : lastLeave === null ? null : new Date(lastLeave).toISOString(),
       durationMs: intervals.length === 0 ? null : coveredMs(intervals),
       durationToEnd: came.some((row) => row.durationToEnd),
-      joins: came.length === 0 ? joins.length : came.length
+      joins: came.length === 0 ? joins.length : came.reduce((total, row) => total + row.joins, 0)
     };
   });
   const rank = KIND_RANK;
@@ -6323,8 +6927,8 @@ function transcriptDocument(bundle, format, options = {}) {
     if (line.identity !== last) {
       if (last !== null) out.push("");
       const who = speaker(line);
-      const clock = clockOfDay(line.startedAt, options);
-      out.push(format === "md" ? `**${who}** \xB7 ${clock}` : `${who} (${clock})`);
+      const clock2 = clockOfDay(line.startedAt, options);
+      out.push(format === "md" ? `**${who}** \xB7 ${clock2}` : `${who} (${clock2})`);
       last = line.identity;
     }
     out.push(line.text.trim());
@@ -6505,6 +7109,9 @@ function countLabel(count2, singular, plural = `${singular}s`) {
   return `${count2} ${count2 === 1 ? singular : plural}`;
 }
 
+// src/react/collab.tsx
+import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
+
 // src/react/icons.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function Icon({ children, ...props }) {
@@ -6689,60 +7296,1089 @@ function FlagIcon(props) {
 function PencilIcon(props) {
   return /* @__PURE__ */ jsx2(Icon, { ...props, children: /* @__PURE__ */ jsx2("path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }) });
 }
-
-// src/react/components.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function InertNotice({ what }) {
-  return /* @__PURE__ */ jsxs2("div", { className: "mx-meet__empty", role: "status", children: [
-    /* @__PURE__ */ jsxs2("p", { className: "mx-meet__empty-title", children: [
-      what,
-      " is not ready yet"
-    ] }),
-    /* @__PURE__ */ jsx3("p", { className: "mx-meet__empty-body", children: "Calls and meetings need a signed-in identity and an active organization. This will appear as soon as they resolve." })
+function ActivitiesIcon(props) {
+  return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
+    /* @__PURE__ */ jsx2("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__ */ jsx2("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "17.5", cy: "17.5", r: "3.5" })
   ] });
 }
-function Avatar({
-  name,
-  url,
-  size = 40
-}) {
-  const tint = avatarPaletteIndex(name);
-  if (url != null && url.length > 0) {
-    return /* @__PURE__ */ jsx3(
-      "img",
-      {
-        className: "mx-meet__avatar",
-        src: url,
-        alt: "",
-        width: size,
-        height: size,
-        style: { width: size, height: size }
+function PollIcon(props) {
+  return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
+    /* @__PURE__ */ jsx2("line", { x1: "18", x2: "18", y1: "20", y2: "10" }),
+    /* @__PURE__ */ jsx2("line", { x1: "12", x2: "12", y1: "20", y2: "4" }),
+    /* @__PURE__ */ jsx2("line", { x1: "6", x2: "6", y1: "20", y2: "14" })
+  ] });
+}
+function QuestionIcon(props) {
+  return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
+    /* @__PURE__ */ jsx2("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" }),
+    /* @__PURE__ */ jsx2("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
+    /* @__PURE__ */ jsx2("path", { d: "M12 17h.01" })
+  ] });
+}
+function WhiteboardIcon(props) {
+  return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
+    /* @__PURE__ */ jsx2("path", { d: "M2 3h20" }),
+    /* @__PURE__ */ jsx2("path", { d: "M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3" }),
+    /* @__PURE__ */ jsx2("path", { d: "m7 21 5-5 5 5" })
+  ] });
+}
+function BreakoutIcon(props) {
+  return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
+    /* @__PURE__ */ jsx2("rect", { width: "7", height: "18", x: "3", y: "3", rx: "1" }),
+    /* @__PURE__ */ jsx2("rect", { width: "7", height: "7", x: "14", y: "3", rx: "1" }),
+    /* @__PURE__ */ jsx2("rect", { width: "7", height: "7", x: "14", y: "14", rx: "1" })
+  ] });
+}
+function UpvoteIcon(props) {
+  return /* @__PURE__ */ jsx2(Icon, { ...props, children: /* @__PURE__ */ jsx2("path", { d: "M9 18v-6H5l7-7 7 7h-4v6H9z" }) });
+}
+function EraserIcon(props) {
+  return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
+    /* @__PURE__ */ jsx2("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__ */ jsx2("path", { d: "M22 21H7" }),
+    /* @__PURE__ */ jsx2("path", { d: "m5 11 9 9" })
+  ] });
+}
+function HighlighterIcon(props) {
+  return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
+    /* @__PURE__ */ jsx2("path", { d: "m9 11-6 6v3h9l3-3" }),
+    /* @__PURE__ */ jsx2("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__ */ jsxs(Icon, { ...props, children: [
+    /* @__PURE__ */ jsx2("path", { d: "M9 14 4 9l5-5" }),
+    /* @__PURE__ */ jsx2("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/react/collab.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function useCollab() {
+  const host = useMeetHost();
+  const snapshot = useMeetSnapshot();
+  const isHost = useIsHost();
+  return {
+    collab: snapshot?.collab ?? null,
+    isHost,
+    localIdentity: snapshot?.localIdentity ?? null,
+    breakoutRoomId: snapshot?.breakoutRoomId ?? null,
+    async act(request) {
+      if (host === null) return { ok: false, message: "This meeting is not connected." };
+      try {
+        const result = await host.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 moveTo(roomId) {
+      if (host === null) return { ok: false, message: "This meeting is not connected." };
+      try {
+        await host.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." };
       }
-    );
-  }
-  return /* @__PURE__ */ jsx3(
-    "span",
-    {
-      className: "mx-meet__avatar mx-meet__avatar--initials",
-      style: {
-        width: size,
-        height: size,
-        fontSize: Math.round(size * 0.38),
-        background: `var(--mx-meet-avatar-${tint})`
-      },
-      "aria-hidden": "true",
-      children: getInitials(name)
     }
-  );
+  };
 }
-function ControlButton({
-  label,
-  active = false,
-  danger = false,
-  onClick,
-  children
+function useNotice() {
+  const [notice, setNotice] = useState3(null);
+  useEffect3(() => {
+    if (notice === null) return void 0;
+    const timer = setTimeout(() => setNotice(null), notice.failed ? 7e3 : 3e3);
+    return () => clearTimeout(timer);
+  }, [notice]);
+  return [notice, (result) => setNotice({ text: result.message, failed: !result.ok })];
+}
+function Notice({ notice }) {
+  if (notice === null) return null;
+  return /* @__PURE__ */ jsx3("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",
+  qa: "Q&A",
+  whiteboard: "Whiteboard",
+  breakouts: "Breakout rooms"
+};
+function ActivityIcon({ panel }) {
+  const props = { width: 16, height: 16 };
+  if (panel === "polls") return /* @__PURE__ */ jsx3(PollIcon, { ...props });
+  if (panel === "qa") return /* @__PURE__ */ jsx3(QuestionIcon, { ...props });
+  if (panel === "whiteboard") return /* @__PURE__ */ jsx3(WhiteboardIcon, { ...props });
+  return /* @__PURE__ */ jsx3(BreakoutIcon, { ...props });
+}
+function useAvailableActivities() {
+  const { collab, isHost } = useCollab();
+  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 useActivityAttention() {
+  const { collab, isHost } = useCollab();
+  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;
+}
+function ActivitiesControl({
+  active,
+  onOpen
 }) {
+  const [open, setOpen] = useState3(false);
+  const available = useAvailableActivities();
+  const attention = useActivityAttention();
+  if (available.length === 0) return null;
+  return /* @__PURE__ */ jsxs2("span", { className: "mx-meet__anchor", children: [
+    /* @__PURE__ */ jsxs2(ControlButton, { label: "Activities", active: open || active !== null, onClick: () => setOpen(!open), children: [
+      /* @__PURE__ */ jsx3(ActivitiesIcon, {}),
+      attention ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__dot", "aria-hidden": "true" }) : null
+    ] }),
+    open ? /* @__PURE__ */ jsx3(Popover, { label: "Activities", onClose: () => setOpen(false), children: /* @__PURE__ */ jsx3("div", { className: "mx-meet__menu", role: "menu", children: available.map((panel) => /* @__PURE__ */ jsxs2(
+      MenuItem,
+      {
+        onSelect: () => {
+          setOpen(false);
+          onOpen(panel);
+        },
+        children: [
+          /* @__PURE__ */ jsx3(ActivityIcon, { panel }),
+          " ",
+          ACTIVITY_LABELS[panel]
+        ]
+      },
+      panel
+    )) }) }) : null
+  ] });
+}
+function PollComposer({ maxOptions, onDone }) {
+  const { act } = useCollab();
+  const [question, setQuestion] = useState3("");
+  const [options, setOptions] = useState3(["", ""]);
+  const [multiple, setMultiple] = useState3(false);
+  const [anonymous, setAnonymous] = useState3(false);
+  const [busy, setBusy] = useState3(false);
+  const [notice, show] = useNotice();
+  const filled = options.map((o) => o.trim()).filter(Boolean);
+  const ready = question.trim().length > 0 && filled.length >= 2;
+  const save = async (launch) => {
+    setBusy(true);
+    const created = await act({ action: "poll_create", question, options: filled, multiple, anonymous });
+    if (!created.ok) {
+      show(created);
+      setBusy(false);
+      return;
+    }
+    if (launch && created.itemId != null) {
+      const launched = await act({ action: "poll_launch", itemId: created.itemId });
+      if (!launched.ok) {
+        show(launched);
+        setBusy(false);
+        return;
+      }
+    }
+    setBusy(false);
+    onDone();
+  };
+  return /* @__PURE__ */ jsxs2(
+    "form",
+    {
+      className: "mx-meet__collab-card",
+      onSubmit: (event) => {
+        event.preventDefault();
+        if (ready) void save(true);
+      },
+      children: [
+        /* @__PURE__ */ jsxs2("label", { className: "mx-meet__field", children: [
+          /* @__PURE__ */ jsx3("span", { className: "mx-meet__field-label", children: "Question" }),
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              className: "mx-meet__input",
+              value: question,
+              maxLength: 1e3,
+              onChange: (event) => setQuestion(event.target.value),
+              placeholder: "Ask the room something",
+              autoFocus: true
+            }
+          )
+        ] }),
+        options.map((option, index) => /* @__PURE__ */ jsxs2("div", { className: "mx-meet__composer-row", children: [
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              className: "mx-meet__input",
+              value: option,
+              maxLength: 200,
+              "aria-label": `Answer ${index + 1}`,
+              placeholder: `Answer ${index + 1}`,
+              onChange: (event) => setOptions(options.map((o, i) => i === index ? event.target.value : o))
+            }
+          ),
+          options.length > 2 ? /* @__PURE__ */ jsx3(ControlButton, { label: `Remove answer ${index + 1}`, onClick: () => setOptions(options.filter((_, i) => i !== index)), children: /* @__PURE__ */ jsx3(CloseIcon, { width: 14, height: 14 }) }) : null
+        ] }, index)),
+        options.length < maxOptions ? /* @__PURE__ */ jsx3("button", { type: "button", className: "mx-meet__link", onClick: () => setOptions([...options, ""]), children: "Add an answer" }) : null,
+        /* @__PURE__ */ jsxs2("label", { className: "mx-meet__toggle", children: [
+          /* @__PURE__ */ jsx3("input", { type: "checkbox", checked: multiple, onChange: (event) => setMultiple(event.target.checked) }),
+          "People can pick more than one"
+        ] }),
+        /* @__PURE__ */ jsxs2("label", { className: "mx-meet__toggle", children: [
+          /* @__PURE__ */ jsx3("input", { type: "checkbox", checked: anonymous, onChange: (event) => setAnonymous(event.target.checked) }),
+          "Anonymous \u2014 nobody sees who picked what"
+        ] }),
+        /* @__PURE__ */ jsx3(Notice, { notice }),
+        /* @__PURE__ */ jsxs2("div", { className: "mx-meet__collab-actions", children: [
+          /* @__PURE__ */ jsx3("button", { type: "submit", className: "mx-meet__primary mx-meet__primary--small", disabled: !ready || busy, children: "Launch" }),
+          /* @__PURE__ */ jsx3("button", { type: "button", className: "mx-meet__chip", disabled: !ready || busy, onClick: () => void save(false), children: "Save draft" }),
+          /* @__PURE__ */ jsx3("button", { type: "button", className: "mx-meet__link", onClick: onDone, children: "Cancel" })
+        ] })
+      ]
+    }
+  );
+}
+function PollCard({ poll }) {
+  const { act, isHost } = useCollab();
+  const [picked, setPicked] = useState3(poll.myVote.slice());
+  const [notice, show] = useNotice();
+  useEffect3(() => 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";
+  const voted = poll.myVote.length > 0;
+  const stateWord = poll.state === "draft" ? "Draft" : poll.state === "live" ? "Open" : "Closed";
+  const toggle = (id) => {
+    if (!canVote) return;
+    setPicked(poll.multiple ? picked.includes(id) ? picked.filter((p) => p !== id) : [...picked, id] : [id]);
+  };
+  return /* @__PURE__ */ jsxs2("article", { className: "mx-meet__collab-card", "aria-label": poll.question, children: [
+    /* @__PURE__ */ jsxs2("header", { className: "mx-meet__collab-head", children: [
+      /* @__PURE__ */ jsx3("strong", { className: "mx-meet__collab-title", children: poll.question }),
+      /* @__PURE__ */ jsx3("span", { className: "mx-meet__collab-state", children: stateWord })
+    ] }),
+    /* @__PURE__ */ jsxs2("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__ */ jsx3("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__ */ jsxs2("li", { children: [
+        /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            type: "button",
+            className: chosen ? "mx-meet__poll-option mx-meet__poll-option--chosen" : "mx-meet__poll-option",
+            "aria-pressed": chosen,
+            disabled: !canVote,
+            onClick: () => toggle(option.id),
+            children: [
+              counts ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__poll-bar", style: { width: `${share}%` }, "aria-hidden": "true" }) : null,
+              /* @__PURE__ */ jsx3("span", { className: "mx-meet__poll-text", children: option.text }),
+              counts ? /* @__PURE__ */ jsxs2("span", { className: "mx-meet__poll-count", children: [
+                option.votes ?? 0,
+                " \xB7 ",
+                share,
+                "%"
+              ] }) : null
+            ]
+          }
+        ),
+        option.voters !== void 0 && option.voters.length > 0 ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__poll-voters", children: option.voters.join(", ") }) : null
+      ] }, option.id);
+    }) }),
+    /* @__PURE__ */ jsx3(Notice, { notice }),
+    /* @__PURE__ */ jsxs2("div", { className: "mx-meet__collab-actions", children: [
+      canVote ? /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: "mx-meet__primary mx-meet__primary--small",
+          disabled: picked.length === 0 || voted && picked.join() === poll.myVote.join(),
+          onClick: () => void act({ action: "poll_vote", itemId: poll.id, optionIds: picked }).then(show),
+          children: voted ? "Change vote" : "Vote"
+        }
+      ) : null,
+      isHost && poll.state === "draft" ? /* @__PURE__ */ jsx3("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__ */ jsx3("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__ */ jsx3("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__ */ jsx3("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] = useState3(false);
+  const polls = collab?.polls ?? [];
+  const maxOptions = collab?.settings?.pollMaxOptions ?? 10;
+  const ordered = [...polls].reverse();
+  return /* @__PURE__ */ jsxs2(PanelShell, { title: "Polls", onClose, children: [
+    collab?.error != null ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__panel-note mx-meet__collab-error", children: collab.error }) : null,
+    isHost && !composing ? /* @__PURE__ */ jsx3("button", { type: "button", className: "mx-meet__primary mx-meet__primary--small", onClick: () => setComposing(true), children: "New poll" }) : null,
+    isHost && composing ? /* @__PURE__ */ jsx3(PollComposer, { maxOptions, onDone: () => setComposing(false) }) : null,
+    ordered.length === 0 && !composing ? /* @__PURE__ */ jsx3("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__ */ jsx3(PollCard, { poll }, poll.id))
+  ] });
+}
+function QuestionCard({ question }) {
+  const { act, isHost } = useCollab();
+  const [answering, setAnswering] = useState3(false);
+  const [reply, setReply] = useState3("");
+  const [notice, show] = useNotice();
+  return /* @__PURE__ */ jsxs2("li", { className: `mx-meet__collab-card mx-meet__question mx-meet__question--${question.state}`, children: [
+    /* @__PURE__ */ jsxs2("div", { className: "mx-meet__question-row", children: [
+      /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          type: "button",
+          className: question.upvotedByMe ? "mx-meet__upvote mx-meet__upvote--on" : "mx-meet__upvote",
+          "aria-pressed": question.upvotedByMe,
+          "aria-label": question.upvotedByMe ? "Remove your upvote" : "Upvote",
+          disabled: question.state === "dismissed",
+          onClick: () => void act({ action: "question_upvote", itemId: question.id }).then((r) => r.ok ? void 0 : show(r)),
+          children: [
+            /* @__PURE__ */ jsx3(UpvoteIcon, { width: 16, height: 16 }),
+            /* @__PURE__ */ jsx3("span", { children: question.upvotes })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs2("div", { className: "mx-meet__question-body", children: [
+        /* @__PURE__ */ jsxs2("span", { className: "mx-meet__chat-meta", children: [
+          /* @__PURE__ */ jsx3("strong", { children: question.mine ? "You" : question.askerName }),
+          question.mine && question.anonymous ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__chat-private", children: "anonymous" }) : null,
+          question.state !== "open" ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__collab-state", children: question.state === "answered" ? "Answered" : "Dismissed" }) : null
+        ] }),
+        /* @__PURE__ */ jsx3("span", { className: "mx-meet__chat-text", children: question.text }),
+        question.answer !== null ? /* @__PURE__ */ jsxs2("span", { className: "mx-meet__question-answer", children: [
+          /* @__PURE__ */ jsxs2("strong", { children: [
+            question.answeredByName ?? "Host",
+            ":"
+          ] }),
+          " ",
+          question.answer
+        ] }) : null
+      ] })
+    ] }),
+    answering ? /* @__PURE__ */ jsxs2(
+      "form",
+      {
+        className: "mx-meet__composer-row",
+        onSubmit: (event) => {
+          event.preventDefault();
+          void act({ action: "question_answer", itemId: question.id, text: reply }).then((r) => {
+            show(r);
+            if (r.ok) {
+              setAnswering(false);
+              setReply("");
+            }
+          });
+        },
+        children: [
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              className: "mx-meet__input",
+              value: reply,
+              maxLength: 2e3,
+              onChange: (event) => setReply(event.target.value),
+              placeholder: "Type an answer, or leave empty if you answered out loud",
+              "aria-label": "Answer",
+              autoFocus: true
+            }
+          ),
+          /* @__PURE__ */ jsx3("button", { type: "submit", className: "mx-meet__send", children: "Done" })
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ jsx3(Notice, { notice }),
+    isHost || question.mine ? /* @__PURE__ */ jsxs2("div", { className: "mx-meet__collab-actions", children: [
+      isHost && question.state === "open" && !answering ? /* @__PURE__ */ jsx3("button", { type: "button", className: "mx-meet__chip", onClick: () => setAnswering(true), children: "Answer" }) : null,
+      isHost && question.state === "open" ? /* @__PURE__ */ jsx3("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__ */ jsx3("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__ */ jsx3("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] = useState3("");
+  const [anonymous, setAnonymous] = useState3(false);
+  const [order, setOrder] = useState3("popular");
+  const [notice, show] = useNotice();
+  const allowAnonymous = collab?.settings?.qaAnonymousAllowed === true;
+  const questions = [...collab?.questions ?? []];
+  const rank = (q) => q.state === "open" ? 0 : q.state === "answered" ? 1 : 2;
+  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__ */ jsxs2(PanelShell, { title: "Q&A", onClose, children: [
+    collab?.error != null ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__panel-note mx-meet__collab-error", children: collab.error }) : null,
+    /* @__PURE__ */ jsxs2(
+      "form",
+      {
+        className: "mx-meet__composer mx-meet__composer--chat",
+        onSubmit: (event) => {
+          event.preventDefault();
+          const text3 = draft.trim();
+          if (text3.length === 0) return;
+          void act({ action: "question_ask", text: text3, anonymous: allowAnonymous && anonymous }).then((r) => {
+            if (r.ok) setDraft("");
+            else show(r);
+          });
+        },
+        children: [
+          /* @__PURE__ */ jsxs2("div", { className: "mx-meet__composer-row", children: [
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                className: "mx-meet__input",
+                value: draft,
+                maxLength: 1e3,
+                onChange: (event) => setDraft(event.target.value),
+                placeholder: "Ask the host a question",
+                "aria-label": "Ask the host a question"
+              }
+            ),
+            /* @__PURE__ */ jsx3("button", { type: "submit", className: "mx-meet__send", disabled: draft.trim().length === 0, children: "Ask" })
+          ] }),
+          allowAnonymous ? /* @__PURE__ */ jsxs2("label", { className: "mx-meet__toggle", children: [
+            /* @__PURE__ */ jsx3("input", { type: "checkbox", checked: anonymous, onChange: (event) => setAnonymous(event.target.checked) }),
+            "Ask anonymously"
+          ] }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx3(Notice, { notice }),
+    questions.length > 1 ? /* @__PURE__ */ jsx3("div", { className: "mx-meet__pills", role: "group", "aria-label": "Order questions", children: ["popular", "recent"].map((value) => /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        className: order === value ? "mx-meet__pill mx-meet__pill--on" : "mx-meet__pill",
+        "aria-pressed": order === value,
+        onClick: () => setOrder(value),
+        children: value === "popular" ? "Popular" : "Recent"
+      },
+      value
+    )) }) : null,
+    questions.length === 0 ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__panel-note", children: "No questions yet. Questions are kept with the meeting." }) : /* @__PURE__ */ jsx3("ul", { className: "mx-meet__chat", children: questions.map((question) => /* @__PURE__ */ jsx3(QuestionCard, { question }, question.id)) })
+  ] });
+}
+var BOARD_W = 1600;
+var BOARD_H = 1e3;
+var INK = ["#111827", "#dc2626", "#2563eb", "#16a34a", "#f59e0b", "#7c3aed"];
+function strokePath(points) {
+  if (points.length === 0) return "";
+  const [first, ...rest] = points;
+  const move = `M${(first[0] * BOARD_W).toFixed(1)} ${(first[1] * BOARD_H).toFixed(1)}`;
+  if (rest.length === 0) return `${move} l0.1 0`;
+  return `${move} ${rest.map(([x, y]) => `L${(x * BOARD_W).toFixed(1)} ${(y * BOARD_H).toFixed(1)}`).join(" ")}`;
+}
+function StrokeView({ stroke, onPick }) {
   return /* @__PURE__ */ jsx3(
+    "path",
+    {
+      d: strokePath(stroke.points),
+      fill: "none",
+      stroke: stroke.color,
+      strokeWidth: stroke.tool === "highlighter" ? stroke.width * 4 : stroke.width,
+      strokeOpacity: stroke.tool === "highlighter" ? 0.35 : stroke.pending === true ? 0.6 : 1,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      onPointerDown: onPick,
+      style: onPick !== void 0 ? { cursor: "pointer" } : void 0,
+      children: /* @__PURE__ */ jsx3("title", { children: stroke.byName })
+    }
+  );
+}
+function WhiteboardPanel({ onClose }) {
+  const { collab, act, isHost, localIdentity } = useCollab();
+  const [tool, setTool] = useState3("pen");
+  const [color, setColor] = useState3(INK[0]);
+  const [drawing, setDrawing] = useState3(null);
+  const [pending, setPending] = useState3([]);
+  const [notice, show] = useNotice();
+  const svgRef = useRef3(null);
+  const strokes = collab?.strokes ?? [];
+  const mine = strokes.filter((s) => s.by === localIdentity);
+  const point = (event) => {
+    const svg = svgRef.current;
+    if (svg === null) return null;
+    const rect = svg.getBoundingClientRect();
+    const scale = Math.min(rect.width / BOARD_W, rect.height / BOARD_H);
+    const offsetX = (rect.width - BOARD_W * scale) / 2;
+    const offsetY = (rect.height - BOARD_H * scale) / 2;
+    const x = (event.clientX - rect.left - offsetX) / (BOARD_W * scale);
+    const y = (event.clientY - rect.top - offsetY) / (BOARD_H * scale);
+    return [Math.min(1, Math.max(0, x)), Math.min(1, Math.max(0, y))];
+  };
+  const finish = () => {
+    const points = drawing;
+    setDrawing(null);
+    if (points === null || points.length === 0 || tool === "eraser") return;
+    const thinned = points.filter((p, i) => i === 0 || i === points.length - 1 || i % 2 === 0).slice(0, 2e3);
+    const stroke = {
+      points: thinned.map(([x, y]) => [Number(x.toFixed(4)), Number(y.toFixed(4))]),
+      color,
+      width: tool === "highlighter" ? 4 : 3,
+      tool: tool === "highlighter" ? "highlighter" : "pen"
+    };
+    const localId = `pending-${Date.now()}`;
+    setPending((list) => [...list, { id: localId, ...stroke, by: localIdentity ?? "", byName: "You", pending: true }]);
+    void act({ action: "stroke_add", stroke }).then((result) => {
+      setPending((list) => list.filter((s) => s.id !== localId));
+      if (!result.ok) show(result);
+    });
+  };
+  return /* @__PURE__ */ jsxs2("section", { className: "mx-meet__whiteboard", "aria-label": "Whiteboard", children: [
+    /* @__PURE__ */ jsxs2("header", { className: "mx-meet__whiteboard-bar", children: [
+      /* @__PURE__ */ jsx3("strong", { className: "mx-meet__panel-title", children: "Whiteboard" }),
+      /* @__PURE__ */ jsx3("div", { className: "mx-meet__pills", role: "group", "aria-label": "Tool", children: [
+        ["pen", "Pen", /* @__PURE__ */ jsx3(PencilIcon, { width: 16, height: 16 }, "p")],
+        ["highlighter", "Highlighter", /* @__PURE__ */ jsx3(HighlighterIcon, { width: 16, height: 16 }, "h")],
+        ["eraser", "Eraser \u2014 click a stroke", /* @__PURE__ */ jsx3(EraserIcon, { width: 16, height: 16 }, "e")]
+      ].map(([value, label, icon]) => /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: tool === value ? "mx-meet__pill mx-meet__pill--on" : "mx-meet__pill",
+          "aria-pressed": tool === value,
+          "aria-label": label,
+          title: label,
+          onClick: () => setTool(value),
+          children: icon
+        },
+        value
+      )) }),
+      /* @__PURE__ */ jsx3("div", { className: "mx-meet__swatches", role: "group", "aria-label": "Color", children: INK.map((ink) => /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: ink === color ? "mx-meet__swatch mx-meet__swatch--on" : "mx-meet__swatch",
+          style: { background: ink },
+          "aria-label": `Color ${ink}`,
+          "aria-pressed": ink === color,
+          onClick: () => {
+            setColor(ink);
+            if (tool === "eraser") setTool("pen");
+          }
+        },
+        ink
+      )) }),
+      /* @__PURE__ */ jsx3(
+        ControlButton,
+        {
+          label: "Undo my last stroke",
+          onClick: () => {
+            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__ */ jsx3(UndoIcon, { width: 16, height: 16 })
+        }
+      ),
+      isHost && strokes.length > 0 ? /* @__PURE__ */ jsx3("button", { type: "button", className: "mx-meet__chip", onClick: () => void act({ action: "whiteboard_clear" }).then(show), children: "Clear board" }) : null,
+      /* @__PURE__ */ jsx3("span", { className: "mx-meet__whiteboard-note", children: "Saved with the meeting" }),
+      /* @__PURE__ */ jsx3(ControlButton, { label: "Close whiteboard", onClick: onClose, children: /* @__PURE__ */ jsx3(CloseIcon, { width: 16, height: 16 }) })
+    ] }),
+    /* @__PURE__ */ jsx3(Notice, { notice }),
+    /* @__PURE__ */ jsxs2(
+      "svg",
+      {
+        ref: svgRef,
+        className: tool === "eraser" ? "mx-meet__board mx-meet__board--erase" : "mx-meet__board",
+        viewBox: `0 0 ${BOARD_W} ${BOARD_H}`,
+        preserveAspectRatio: "xMidYMid meet",
+        role: "img",
+        "aria-label": `Shared whiteboard, ${strokes.length} strokes`,
+        onPointerDown: (event) => {
+          if (tool === "eraser") return;
+          const p = point(event);
+          if (p === null) return;
+          event.target.setPointerCapture?.(event.pointerId);
+          setDrawing([p]);
+        },
+        onPointerMove: (event) => {
+          if (drawing === null) return;
+          const p = point(event);
+          if (p !== null) setDrawing([...drawing, p]);
+        },
+        onPointerUp: finish,
+        onPointerCancel: finish,
+        children: [
+          /* @__PURE__ */ jsx3("rect", { x: 0, y: 0, width: BOARD_W, height: BOARD_H, className: "mx-meet__board-paper" }),
+          strokes.map((stroke) => /* @__PURE__ */ jsx3(
+            StrokeView,
+            {
+              stroke,
+              onPick: tool === "eraser" && (isHost || stroke.by === localIdentity) ? () => void act({ action: "stroke_erase", itemId: stroke.id }).then((r) => r.ok ? void 0 : show(r)) : void 0
+            },
+            stroke.id
+          )),
+          pending.map((stroke) => /* @__PURE__ */ jsx3(StrokeView, { stroke }, stroke.id)),
+          drawing !== null ? /* @__PURE__ */ jsx3(
+            StrokeView,
+            {
+              stroke: {
+                id: "drawing",
+                points: drawing,
+                color,
+                width: tool === "highlighter" ? 4 : 3,
+                tool: tool === "highlighter" ? "highlighter" : "pen",
+                by: "",
+                byName: "You"
+              }
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+}
+function clock(ms2) {
+  const total = Math.ceil(ms2 / 1e3);
+  const minutes = Math.floor(total / 60);
+  const seconds = total % 60;
+  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+}
+function useNow(active) {
+  const [now, setNow] = useState3(() => Date.now());
+  useEffect3(() => {
+    if (!active) return void 0;
+    const timer = setInterval(() => setNow(Date.now()), 1e3);
+    return () => clearInterval(timer);
+  }, [active]);
+  return now;
+}
+function BreakoutSetup() {
+  const { collab, act } = useCollab();
+  const snapshot = useMeetSnapshot();
+  const settings = collab?.settings ?? null;
+  const people = (snapshot?.participants ?? []).filter(
+    (p) => !p.isAgent && p.role !== "host" && p.role !== "cohost"
+  );
+  const [count2, setCount] = useState3(Math.min(Math.max(2, Math.ceil(people.length / 4)), settings?.breakoutMaxRooms ?? 20));
+  const [mode, setMode] = useState3("auto");
+  const [minutes, setMinutes] = useState3(settings?.breakoutDefaultMinutes ?? 15);
+  const [manual, setManual] = useState3({});
+  const [busy, setBusy] = useState3(false);
+  const [notice, show] = useNotice();
+  const max = settings?.breakoutMaxRooms ?? 20;
+  const rooms = Math.min(Math.max(1, count2), max);
+  const assignment = mode === "auto" ? autoAssign(
+    people.map((p) => p.identity),
+    rooms
+  ) : mode === "manual" ? Array.from(
+    { length: rooms },
+    (_, 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__ */ jsxs2("div", { className: "mx-meet__collab-card", children: [
+    /* @__PURE__ */ jsxs2("label", { className: "mx-meet__field", children: [
+      /* @__PURE__ */ jsx3("span", { className: "mx-meet__field-label", children: "Rooms" }),
+      /* @__PURE__ */ jsx3(
+        "input",
+        {
+          className: "mx-meet__input",
+          type: "number",
+          min: 1,
+          max,
+          value: count2,
+          onChange: (event) => setCount(Number(event.target.value) || 1)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx3("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__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        className: mode === value ? "mx-meet__pill mx-meet__pill--on" : "mx-meet__pill",
+        "aria-pressed": mode === value,
+        onClick: () => setMode(value),
+        children: label
+      },
+      value
+    )) }),
+    /* @__PURE__ */ jsxs2("label", { className: "mx-meet__field", children: [
+      /* @__PURE__ */ jsx3("span", { className: "mx-meet__field-label", children: "Timer (minutes, 0 for none)" }),
+      /* @__PURE__ */ jsx3(
+        "input",
+        {
+          className: "mx-meet__input",
+          type: "number",
+          min: 0,
+          max: 720,
+          value: minutes,
+          onChange: (event) => setMinutes(Math.max(0, Number(event.target.value) || 0))
+        }
+      )
+    ] }),
+    mode === "manual" ? people.length === 0 ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__panel-note", children: "Nobody else is in the meeting yet." }) : /* @__PURE__ */ jsx3("ul", { className: "mx-meet__people", children: people.map((person) => /* @__PURE__ */ jsxs2("li", { className: "mx-meet__person", children: [
+      /* @__PURE__ */ jsx3("span", { className: "mx-meet__person-name", children: person.displayName }),
+      /* @__PURE__ */ jsxs2(
+        "select",
+        {
+          className: "mx-meet__select mx-meet__select--compact",
+          "aria-label": `Room for ${person.displayName}`,
+          value: manual[person.identity] ?? -1,
+          onChange: (event) => setManual({ ...manual, [person.identity]: Number(event.target.value) }),
+          children: [
+            /* @__PURE__ */ jsx3("option", { value: -1, children: "Main room" }),
+            Array.from({ length: rooms }, (_, index) => /* @__PURE__ */ jsxs2("option", { value: index, children: [
+              "Room ",
+              index + 1
+            ] }, index))
+          ]
+        }
+      )
+    ] }, person.identity)) }) : mode === "auto" ? /* @__PURE__ */ jsx3("ul", { className: "mx-meet__breakout-rooms", children: assignment.map((members, index) => /* @__PURE__ */ jsxs2("li", { children: [
+      /* @__PURE__ */ jsxs2("strong", { children: [
+        "Room ",
+        index + 1
+      ] }),
+      " ",
+      /* @__PURE__ */ jsx3("span", { className: "mx-meet__panel-note", children: members.length === 0 ? "empty" : members.map(nameOf).join(", ") })
+    ] }, index)) }) : /* @__PURE__ */ jsx3("p", { className: "mx-meet__panel-note", children: "Everyone picks a room from their own screen." }),
+    /* @__PURE__ */ jsx3(Notice, { notice }),
+    /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        className: "mx-meet__primary mx-meet__primary--small",
+        disabled: busy,
+        onClick: () => {
+          setBusy(true);
+          void act({
+            action: "breakout_open",
+            rooms: assignment.map((identities, index) => ({ name: `Room ${index + 1}`, identities })),
+            allowChoose: mode === "choose",
+            minutes
+          }).then((result) => {
+            setBusy(false);
+            show(result);
+          });
+        },
+        children: [
+          "Open ",
+          rooms,
+          " room",
+          rooms === 1 ? "" : "s"
+        ]
+      }
+    )
+  ] });
+}
+function BreakoutRun({ plan }) {
+  const { act, moveTo, isHost, breakoutRoomId, localIdentity } = useCollab();
+  const snapshot = useMeetSnapshot();
+  const now = useNow(plan.endsAt !== null);
+  const remaining = breakoutRemainingMs(plan, now);
+  const [broadcast, setBroadcast] = useState3("");
+  const [notice, show] = useNotice();
+  const nameOf = (identity) => displayNameFor(snapshot?.names ?? {}, identity, snapshot?.participants.find((p) => p.identity === identity)?.displayName);
+  const mine = assignedRoom(plan, localIdentity);
+  const join = async (roomId) => {
+    const said = await act({ action: "breakout_join", roomId });
+    if (!said.ok) {
+      show(said);
+      return;
+    }
+    show(await moveTo(roomId));
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: "mx-meet__collab-card", children: [
+    /* @__PURE__ */ jsxs2("p", { className: "mx-meet__panel-note", children: [
+      plan.rooms.length,
+      " room",
+      plan.rooms.length === 1 ? "" : "s",
+      " open",
+      remaining !== null ? ` \xB7 ${clock(remaining)} left` : "",
+      plan.allowChoose ? " \xB7 people choose their room" : ""
+    ] }),
+    /* @__PURE__ */ jsx3("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__ */ jsxs2("li", { className: here ? "mx-meet__breakout-room mx-meet__breakout-room--here" : "mx-meet__breakout-room", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "mx-meet__collab-head", children: [
+          /* @__PURE__ */ jsx3("strong", { children: room.name }),
+          here ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__collab-state", children: "You are here" }) : mayJoin ? /* @__PURE__ */ jsx3("button", { type: "button", className: "mx-meet__chip", onClick: () => void join(room.id), children: "Join" }) : null
+        ] }),
+        /* @__PURE__ */ jsx3("span", { className: "mx-meet__panel-note", children: room.identities.length === 0 ? "Nobody assigned" : room.identities.map(nameOf).join(", ") }),
+        isHost && room.identities.length > 0 ? /* @__PURE__ */ jsx3("ul", { className: "mx-meet__people", children: room.identities.map((identity) => /* @__PURE__ */ jsxs2("li", { className: "mx-meet__person", children: [
+          /* @__PURE__ */ jsx3("span", { className: "mx-meet__person-name", children: nameOf(identity) }),
+          /* @__PURE__ */ jsxs2(
+            "select",
+            {
+              className: "mx-meet__select mx-meet__select--compact",
+              "aria-label": `Move ${nameOf(identity)}`,
+              value: room.id,
+              onChange: (event) => void act({
+                action: "breakout_move",
+                identity,
+                roomId: event.target.value === "" ? null : event.target.value
+              }).then(show),
+              children: [
+                /* @__PURE__ */ jsx3("option", { value: "", children: "Main room" }),
+                plan.rooms.map((option) => /* @__PURE__ */ jsx3("option", { value: option.id, children: option.name }, option.id))
+              ]
+            }
+          )
+        ] }, identity)) }) : null
+      ] }, room.id);
+    }) }),
+    breakoutRoomId !== null ? /* @__PURE__ */ jsx3("button", { type: "button", className: "mx-meet__chip", onClick: () => void join(null), children: "Return to the main room" }) : null,
+    isHost ? /* @__PURE__ */ jsxs2(
+      "form",
+      {
+        className: "mx-meet__composer-row",
+        onSubmit: (event) => {
+          event.preventDefault();
+          const text3 = broadcast.trim();
+          if (text3.length === 0) return;
+          void act({ action: "breakout_broadcast", text: text3 }).then((result) => {
+            show(result);
+            if (result.ok) setBroadcast("");
+          });
+        },
+        children: [
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              className: "mx-meet__input",
+              value: broadcast,
+              maxLength: 500,
+              onChange: (event) => setBroadcast(event.target.value),
+              placeholder: "Message every room",
+              "aria-label": "Message every room"
+            }
+          ),
+          /* @__PURE__ */ jsx3("button", { type: "submit", className: "mx-meet__send", disabled: broadcast.trim().length === 0, children: "Send" })
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ jsx3(Notice, { notice }),
+    isHost ? /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        className: "mx-meet__primary mx-meet__primary--small",
+        onClick: () => void act({ action: "breakout_close" }).then(show),
+        children: "Bring everyone back"
+      }
+    ) : null
+  ] });
+}
+function BreakoutsPanel({ onClose }) {
+  const { collab, isHost } = useCollab();
+  const plan = collab?.breakout?.state === "open" ? collab.breakout : null;
+  return /* @__PURE__ */ jsxs2(PanelShell, { title: "Breakout rooms", onClose, children: [
+    collab?.error != null ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__panel-note mx-meet__collab-error", children: collab.error }) : null,
+    plan !== null ? /* @__PURE__ */ jsx3(BreakoutRun, { plan }) : isHost ? /* @__PURE__ */ jsx3(BreakoutSetup, {}) : /* @__PURE__ */ jsx3("p", { className: "mx-meet__panel-note", children: "Breakout rooms are closed." })
+  ] });
+}
+function BreakoutBanner() {
+  const host = useMeetHost();
+  const { collab, act, moveTo, localIdentity, breakoutRoomId } = useCollab();
+  const plan = collab?.breakout ?? null;
+  const open = plan?.state === "open" ? plan : null;
+  const now = useNow(open?.endsAt != null);
+  const remaining = breakoutRemainingMs(open, now);
+  const assigned = assignedRoom(open, localIdentity);
+  const [dismissedBroadcast, setDismissedBroadcast] = useState3(null);
+  const [failure, setFailure] = useState3(null);
+  const expireAsked = useRef3(null);
+  const moveAt = collab?.moveRequest?.at ?? null;
+  useEffect3(() => {
+    const request = host?.store.snapshot().collab.moveRequest ?? null;
+    if (request === null || host === null) return;
+    host.store.patch({ collab: { ...host.store.snapshot().collab, moveRequest: null } });
+    const here = host.store.snapshot().breakoutRoomId;
+    if ((here ?? null) === request.roomId) return;
+    void moveTo(request.roomId).then((result) => setFailure(result.ok ? null : result.message));
+  }, [moveAt, host, moveTo]);
+  useEffect3(() => {
+    if (open === null || remaining === null || remaining > 0) return;
+    if (expireAsked.current === open.id) return;
+    expireAsked.current = open.id;
+    void act({ action: "breakout_expire" });
+  }, [open, remaining, act]);
+  const broadcast = collab?.broadcast ?? null;
+  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__ */ jsxs2("div", { className: "mx-meet__breakout-banner", role: "status", children: [
+    failure !== null ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__collab-error", children: failure }) : null,
+    room !== null ? /* @__PURE__ */ jsxs2("span", { children: [
+      /* @__PURE__ */ jsx3("strong", { children: room.name }),
+      remaining !== null ? ` \xB7 ${clock(remaining)} left` : "",
+      /* @__PURE__ */ jsx3("button", { type: "button", className: "mx-meet__chip", onClick: () => void moveTo(null), children: "Return to main room" })
+    ] }) : assigned !== null ? /* @__PURE__ */ jsxs2("span", { children: [
+      "You are assigned to ",
+      /* @__PURE__ */ jsx3("strong", { children: assigned.name }),
+      remaining !== null ? ` \xB7 ${clock(remaining)} left` : "",
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: "mx-meet__primary mx-meet__primary--small",
+          onClick: () => void act({ action: "breakout_join", roomId: assigned.id }).then(async (said) => {
+            const result = said.ok ? await moveTo(assigned.id) : said;
+            setFailure(result.ok ? null : result.message);
+          }),
+          children: "Join"
+        }
+      )
+    ] }) : open?.allowChoose ? /* @__PURE__ */ jsx3("span", { children: "Breakout rooms are open \u2014 pick one under Activities." }) : null,
+    showBroadcast ? /* @__PURE__ */ jsxs2("span", { className: "mx-meet__breakout-broadcast", children: [
+      /* @__PURE__ */ jsxs2("strong", { children: [
+        broadcast.by,
+        ":"
+      ] }),
+      " ",
+      broadcast.text,
+      /* @__PURE__ */ jsx3("button", { type: "button", className: "mx-meet__link", onClick: () => setDismissedBroadcast(broadcast.at), children: "Dismiss" })
+    ] }) : null
+  ] });
+}
+function useCaptionTranslation(lines) {
+  const host = useMeetHost();
+  const snapshot = useMeetSnapshot();
+  const collab = snapshot?.collab ?? null;
+  const language = collab?.captionLanguage ?? null;
+  const asked = useRef3(/* @__PURE__ */ new Set());
+  const translations = collab?.captionTranslations ?? {};
+  const missing = lines.filter((line) => line.final && translations[line.id] === void 0).map(({ id, text: text3 }) => ({ id, text: text3 }));
+  const key = `${language ?? ""}|${missing.map((l) => l.id).join(",")}`;
+  const pending = useRef3(missing);
+  pending.current = missing;
+  useEffect3(() => {
+    if (host === null || language === null) return;
+    const batch = pending.current.filter((line) => !asked.current.has(`${language}:${line.id}`)).slice(-20);
+    if (batch.length === 0) return;
+    for (const line of batch) asked.current.add(`${language}:${line.id}`);
+    void host.inRoom.translateCaptions(language, batch).catch(() => void 0);
+  }, [host, language, key]);
+  return { language, translations, error: collab?.captionTranslationError ?? null };
+}
+function CaptionLanguageSettings() {
+  const host = useMeetHost();
+  const snapshot = useMeetSnapshot();
+  const collab = snapshot?.collab ?? null;
+  const settings = collab?.settings ?? null;
+  if (host === null || settings === null || !settings.captionTranslationEnabled) return null;
+  const viewer = typeof navigator !== "undefined" && typeof navigator.language === "string" ? navigator.language.slice(0, 2) : null;
+  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__ */ jsxs2("section", { className: "mx-meet__section", "aria-label": "Captions", children: [
+    /* @__PURE__ */ jsxs2("label", { className: "mx-meet__field", children: [
+      /* @__PURE__ */ jsx3("span", { className: "mx-meet__field-label", children: "Translate captions to" }),
+      /* @__PURE__ */ jsxs2(
+        "select",
+        {
+          className: "mx-meet__select",
+          value: current,
+          onChange: (event) => {
+            const next = event.target.value === "" ? null : event.target.value;
+            host.store.patch({
+              collab: {
+                ...host.store.snapshot().collab,
+                captionLanguage: next,
+                captionTranslations: {},
+                captionTranslationError: null
+              }
+            });
+          },
+          children: [
+            /* @__PURE__ */ jsx3("option", { value: "", children: "Off \u2014 as spoken" }),
+            current === "" ? /* @__PURE__ */ jsxs2("option", { value: preferred, children: [
+              choices.find((c) => c.tag === preferred)?.name ?? preferred,
+              " (yours)"
+            ] }) : null,
+            choices.filter((choice) => current !== "" || choice.tag !== preferred).map((choice) => /* @__PURE__ */ jsx3("option", { value: choice.tag, children: choice.name }, choice.tag))
+          ]
+        }
+      )
+    ] }),
+    collab?.captionTranslationError != null ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__panel-note mx-meet__collab-error", children: collab.captionTranslationError }) : null
+  ] });
+}
+function useCollabPanelRequest(onRequest) {
+  const host = useMeetHost();
+  const at = useMeetSnapshot()?.collab.panelRequest?.at ?? null;
+  const callback = useRef3(onRequest);
+  callback.current = onRequest;
+  useEffect3(() => {
+    const request = host?.store.snapshot().collab.panelRequest ?? null;
+    if (request === null || host === null) return;
+    host.store.patch({ collab: { ...host.store.snapshot().collab, panelRequest: null } });
+    callback.current(request.panel);
+  }, [at, host]);
+}
+
+// src/react/components.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function InertNotice({ what }) {
+  return /* @__PURE__ */ jsxs3("div", { className: "mx-meet__empty", role: "status", children: [
+    /* @__PURE__ */ jsxs3("p", { className: "mx-meet__empty-title", children: [
+      what,
+      " is not ready yet"
+    ] }),
+    /* @__PURE__ */ jsx4("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({
+  name,
+  url,
+  size = 40
+}) {
+  const tint = avatarPaletteIndex(name);
+  if (url != null && url.length > 0) {
+    return /* @__PURE__ */ jsx4(
+      "img",
+      {
+        className: "mx-meet__avatar",
+        src: url,
+        alt: "",
+        width: size,
+        height: size,
+        style: { width: size, height: size }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx4(
+    "span",
+    {
+      className: "mx-meet__avatar mx-meet__avatar--initials",
+      style: {
+        width: size,
+        height: size,
+        fontSize: Math.round(size * 0.38),
+        background: `var(--mx-meet-avatar-${tint})`
+      },
+      "aria-hidden": "true",
+      children: getInitials(name)
+    }
+  );
+}
+function ControlButton({
+  label,
+  active = false,
+  danger = false,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsx4(
     "button",
     {
       type: "button",
@@ -6761,14 +8397,14 @@ function ControlButton({
 function RecordingIndicator() {
   const { state, label } = useRecording();
   if (label === null) return null;
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "span",
     {
       className: `mx-meet__recording mx-meet__recording--${state}`,
       role: "status",
       "aria-live": "polite",
       children: [
-        /* @__PURE__ */ jsx3(RecordIcon, { width: 10, height: 10 }),
+        /* @__PURE__ */ jsx4(RecordIcon, { width: 10, height: 10 }),
         label
       ]
     }
@@ -6776,12 +8412,12 @@ function RecordingIndicator() {
 }
 function ConnectionDot({ quality }) {
   if (quality === "excellent" || quality === "good" || quality === "unknown") return null;
-  return /* @__PURE__ */ jsx3("span", { className: `mx-meet__quality mx-meet__quality--${quality}`, title: `Connection ${quality}`, children: /* @__PURE__ */ jsx3(WifiLowIcon, { width: 14, height: 14 }) });
+  return /* @__PURE__ */ jsx4("span", { className: `mx-meet__quality mx-meet__quality--${quality}`, title: `Connection ${quality}`, children: /* @__PURE__ */ jsx4(WifiLowIcon, { width: 14, height: 14 }) });
 }
 function RoleBadge({ role }) {
-  if (role === "host") return /* @__PURE__ */ jsx3("span", { className: "mx-meet__badge", children: "Host" });
-  if (role === "cohost") return /* @__PURE__ */ jsx3("span", { className: "mx-meet__badge", children: "Co-host" });
-  if (role === "guest") return /* @__PURE__ */ jsx3("span", { className: "mx-meet__badge", children: "Guest" });
+  if (role === "host") return /* @__PURE__ */ jsx4("span", { className: "mx-meet__badge", children: "Host" });
+  if (role === "cohost") return /* @__PURE__ */ jsx4("span", { className: "mx-meet__badge", children: "Co-host" });
+  if (role === "guest") return /* @__PURE__ */ jsx4("span", { className: "mx-meet__badge", children: "Guest" });
   return null;
 }
 function ParticipantTile({
@@ -6791,7 +8427,7 @@ function ParticipantTile({
   const host = useMeetHost();
   const snapshot = useMeetSnapshot();
   const queue = useHandQueue();
-  const [menu, setMenu] = useState3(false);
+  const [menu, setMenu] = useState4(false);
   const videoRef = useTrack(
     participant.identity,
     participant.screenSharing ? "screen" : "camera"
@@ -6800,7 +8436,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__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       className: [
@@ -6810,7 +8446,7 @@ function ParticipantTile({
       ].filter(Boolean).join(" "),
       "data-identity": participant.identity,
       children: [
-        showVideo ? /* @__PURE__ */ jsx3(
+        showVideo ? /* @__PURE__ */ jsx4(
           "video",
           {
             ref: videoRef,
@@ -6819,43 +8455,43 @@ function ParticipantTile({
             playsInline: true,
             muted: participant.isLocal
           }
-        ) : /* @__PURE__ */ jsx3("div", { className: "mx-meet__tile-placeholder", children: /* @__PURE__ */ jsx3(Avatar, { name: participant.displayName, url: participant.avatarUrl, size: featured ? 96 : 56 }) }),
-        participant.handRaised ? /* @__PURE__ */ jsxs2("span", { className: "mx-meet__tile-hand", title: `Hand raised \xB7 ${ordinal(handPosition)} in line`, children: [
-          /* @__PURE__ */ jsx3(HandIcon, { width: 14, height: 14 }),
+        ) : /* @__PURE__ */ jsx4("div", { className: "mx-meet__tile-placeholder", children: /* @__PURE__ */ jsx4(Avatar, { name: participant.displayName, url: participant.avatarUrl, size: featured ? 96 : 56 }) }),
+        participant.handRaised ? /* @__PURE__ */ jsxs3("span", { className: "mx-meet__tile-hand", title: `Hand raised \xB7 ${ordinal(handPosition)} in line`, children: [
+          /* @__PURE__ */ jsx4(HandIcon, { width: 14, height: 14 }),
           handPosition > 0 ? handPosition : null
         ] }) : null,
-        /* @__PURE__ */ jsxs2("div", { className: "mx-meet__tile-bar", children: [
-          /* @__PURE__ */ jsxs2("span", { className: "mx-meet__tile-name", children: [
-            spotlit ? /* @__PURE__ */ jsx3("span", { title: "Spotlighted for everyone", className: "mx-meet__tile-flag", children: /* @__PURE__ */ jsx3(SpotlightIcon, { width: 12, height: 12 }) }) : null,
+        /* @__PURE__ */ jsxs3("div", { className: "mx-meet__tile-bar", children: [
+          /* @__PURE__ */ jsxs3("span", { className: "mx-meet__tile-name", children: [
+            spotlit ? /* @__PURE__ */ jsx4("span", { title: "Spotlighted for everyone", className: "mx-meet__tile-flag", children: /* @__PURE__ */ jsx4(SpotlightIcon, { width: 12, height: 12 }) }) : null,
             participant.displayName,
             participant.isLocal ? " (you)" : "",
-            participant.isAgent ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__badge", children: "AI" }) : null,
-            /* @__PURE__ */ jsx3(RoleBadge, { role: participant.role })
+            participant.isAgent ? /* @__PURE__ */ jsx4("span", { className: "mx-meet__badge", children: "AI" }) : null,
+            /* @__PURE__ */ jsx4(RoleBadge, { role: participant.role })
           ] }),
-          !participant.micEnabled ? /* @__PURE__ */ jsx3(MicOffIcon, { width: 14, height: 14 }) : null,
-          /* @__PURE__ */ jsx3(QualityBars, { quality: participant.quality })
+          !participant.micEnabled ? /* @__PURE__ */ jsx4(MicOffIcon, { width: 14, height: 14 }) : null,
+          /* @__PURE__ */ jsx4(QualityBars, { quality: participant.quality })
         ] }),
-        /* @__PURE__ */ jsxs2("div", { className: menu ? "mx-meet__tile-actions mx-meet__tile-actions--open" : "mx-meet__tile-actions", children: [
-          /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsxs3("div", { className: menu ? "mx-meet__tile-actions mx-meet__tile-actions--open" : "mx-meet__tile-actions", children: [
+          /* @__PURE__ */ jsx4(
             ControlButton,
             {
               label: pinnedHere ? "Unpin" : `Pin ${participant.displayName} for me`,
               active: pinnedHere,
               onClick: () => host?.engine.pin(pinnedHere ? null : participant.identity),
-              children: /* @__PURE__ */ jsx3(PinIcon, { width: 16, height: 16 })
+              children: /* @__PURE__ */ jsx4(PinIcon, { width: 16, height: 16 })
             }
           ),
-          /* @__PURE__ */ jsxs2("span", { className: "mx-meet__anchor", children: [
-            /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsxs3("span", { className: "mx-meet__anchor", children: [
+            /* @__PURE__ */ jsx4(
               ControlButton,
               {
                 label: `More for ${participant.displayName}`,
                 active: menu,
                 onClick: () => setMenu(!menu),
-                children: /* @__PURE__ */ jsx3(MoreIcon, { width: 16, height: 16 })
+                children: /* @__PURE__ */ jsx4(MoreIcon, { width: 16, height: 16 })
               }
             ),
-            menu ? /* @__PURE__ */ jsx3(PersonMenu, { participant, onClose: () => setMenu(false), placement: "down" }) : null
+            menu ? /* @__PURE__ */ jsx4(PersonMenu, { participant, onClose: () => setMenu(false), placement: "down" }) : null
           ] })
         ] })
       ]
@@ -6871,28 +8507,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__ */ jsx3("span", { className: `mx-meet__signal mx-meet__signal--${quality}`, title: label, "aria-label": label, role: "img", children: /* @__PURE__ */ jsx3(SignalIcon, { bars, width: 14, height: 14 }) });
+  return /* @__PURE__ */ jsx4("span", { className: `mx-meet__signal mx-meet__signal--${quality}`, title: label, "aria-label": label, role: "img", children: /* @__PURE__ */ jsx4(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__ */ jsxs2("div", { className: "mx-meet__stage mx-meet__stage--empty", children: [
-      /* @__PURE__ */ jsx3("p", { className: "mx-meet__empty-title", children: "Waiting for others to join" }),
-      /* @__PURE__ */ jsx3("p", { className: "mx-meet__empty-body", children: "Share the meeting link and people can join from anywhere \u2014 no account needed." })
+    return /* @__PURE__ */ jsxs3("div", { className: "mx-meet__stage mx-meet__stage--empty", children: [
+      /* @__PURE__ */ jsx4("p", { className: "mx-meet__empty-title", children: "Waiting for others to join" }),
+      /* @__PURE__ */ jsx4("p", { className: "mx-meet__empty-body", children: "Share the meeting link and people can join from anywhere \u2014 no account needed." })
     ] });
   }
-  return /* @__PURE__ */ jsxs2("div", { className: `mx-meet__stage${stage.feature !== null ? " mx-meet__stage--speaker" : ""}`, children: [
-    stage.feature !== null ? /* @__PURE__ */ jsx3(ParticipantTile, { participant: stage.feature, featured: true }) : null,
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs3("div", { className: `mx-meet__stage${stage.feature !== null ? " mx-meet__stage--speaker" : ""}`, children: [
+    stage.feature !== null ? /* @__PURE__ */ jsx4(ParticipantTile, { participant: stage.feature, featured: true }) : null,
+    /* @__PURE__ */ jsx4(
       "div",
       {
         className: "mx-meet__grid",
         style: { "--mx-meet-columns": columns },
-        children: stage.tiles.map((participant) => /* @__PURE__ */ jsx3(ParticipantTile, { participant }, participant.identity))
+        children: stage.tiles.map((participant) => /* @__PURE__ */ jsx4(ParticipantTile, { participant }, participant.identity))
       }
     ),
-    stage.overflow > 0 ? /* @__PURE__ */ jsxs2("p", { className: "mx-meet__overflow", children: [
+    stage.overflow > 0 ? /* @__PURE__ */ jsxs3("p", { className: "mx-meet__overflow", children: [
       "+",
       stage.overflow,
       " more ",
@@ -6905,20 +8541,28 @@ var MEET_REACTIONS = ["\u{1F496}", "\u{1F44D}", "\u{1F389}", "\u{1F44F}", "\u{1F
 function ControlBar({ onLeave }) {
   const room = useRoom();
   const recording = useRecording();
-  const [panel, setPanel] = useState3("none");
-  const [chatTo, setChatTo] = useState3(null);
-  const [popover, setPopover] = useState3("none");
-  const [shortcuts, setShortcuts] = useState3(false);
+  const [panel, setPanel] = useState4("none");
+  const [chatTo, setChatTo] = useState4(null);
+  const [popover, setPopover] = useState4("none");
+  const [shortcuts, setShortcuts] = useState4(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] = useState4(false);
   const toggle = (next) => setPanel(panel === next ? "none" : next);
+  const openActivity = (activity) => {
+    if (activity === "whiteboard") setWhiteboard(true);
+    else setPanel(activity);
+  };
+  useCollabPanelRequest((activity) => {
+    if (!controls.isHost) openActivity(activity);
+  });
   const privateChatAt = snapshot?.privateChatRequest?.at ?? null;
   const meetStore = useMeetHost()?.store ?? null;
-  useEffect3(() => {
+  useEffect4(() => {
     const request = meetStore?.snapshot().privateChatRequest ?? null;
     if (request === null) return;
     setChatTo(request.to);
@@ -6934,11 +8578,11 @@ function ControlBar({ onLeave }) {
     help: () => setShortcuts(true)
   });
   const hasSpotlight = snapshot?.spotlight !== null && snapshot?.spotlight !== void 0;
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx3(MeetingOverlays, {}),
-    shortcuts ? /* @__PURE__ */ jsx3(ShortcutsSheet, { onClose: () => setShortcuts(false) }) : null,
-    panel === "chat" ? /* @__PURE__ */ jsx3(ChatPanel, { onClose: () => setPanel("none"), to: chatTo, onTo: setChatTo }) : null,
-    panel === "people" ? /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx4(MeetingOverlays, {}),
+    shortcuts ? /* @__PURE__ */ jsx4(ShortcutsSheet, { onClose: () => setShortcuts(false) }) : null,
+    panel === "chat" ? /* @__PURE__ */ jsx4(ChatPanel, { onClose: () => setPanel("none"), to: chatTo, onTo: setChatTo }) : null,
+    panel === "people" ? /* @__PURE__ */ jsx4(
       PeoplePanel,
       {
         onClose: () => setPanel("none"),
@@ -6948,48 +8592,53 @@ function ControlBar({ onLeave }) {
         }
       }
     ) : null,
-    panel === "ai" ? /* @__PURE__ */ jsx3(AiPanel, { onClose: () => setPanel("none") }) : null,
-    panel === "settings" ? /* @__PURE__ */ jsx3(SettingsPanel, { onClose: () => setPanel("none") }) : null,
-    controls.notice !== null && panel !== "people" ? /* @__PURE__ */ jsx3(Toast, { text: controls.notice.text, failed: controls.notice.failed, onDone: controls.clearNotice }) : null,
-    /* @__PURE__ */ jsxs2("div", { className: "mx-meet__controls", children: [
-      /* @__PURE__ */ jsx3(
+    panel === "ai" ? /* @__PURE__ */ jsx4(AiPanel, { onClose: () => setPanel("none") }) : null,
+    panel === "settings" ? /* @__PURE__ */ jsx4(SettingsPanel, { onClose: () => setPanel("none") }) : null,
+    panel === "polls" ? /* @__PURE__ */ jsx4(PollsPanel, { onClose: () => setPanel("none") }) : null,
+    panel === "qa" ? /* @__PURE__ */ jsx4(QaPanel, { onClose: () => setPanel("none") }) : null,
+    panel === "breakouts" ? /* @__PURE__ */ jsx4(BreakoutsPanel, { onClose: () => setPanel("none") }) : null,
+    whiteboard ? /* @__PURE__ */ jsx4(WhiteboardPanel, { onClose: () => setWhiteboard(false) }) : null,
+    /* @__PURE__ */ jsx4(BreakoutBanner, {}),
+    controls.notice !== null && panel !== "people" ? /* @__PURE__ */ jsx4(Toast, { text: controls.notice.text, failed: controls.notice.failed, onDone: controls.clearNotice }) : null,
+    /* @__PURE__ */ jsxs3("div", { className: "mx-meet__controls", children: [
+      /* @__PURE__ */ jsx4(
         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__ */ jsx3(MicIcon, {}) : /* @__PURE__ */ jsx3(MicOffIcon, {})
+          children: room.local?.micEnabled === true ? /* @__PURE__ */ jsx4(MicIcon, {}) : /* @__PURE__ */ jsx4(MicOffIcon, {})
         }
       ),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(
         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__ */ jsx3(CameraIcon, {}) : /* @__PURE__ */ jsx3(CameraOffIcon, {})
+          children: room.local?.cameraEnabled === true ? /* @__PURE__ */ jsx4(CameraIcon, {}) : /* @__PURE__ */ jsx4(CameraOffIcon, {})
         }
       ),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(
         ControlButton,
         {
           label: room.local?.screenSharing === true ? "Stop sharing" : "Share screen",
           active: room.local?.screenSharing === true,
           onClick: () => void room.toggleScreenShare(),
-          children: /* @__PURE__ */ jsx3(ScreenShareIcon, {})
+          children: /* @__PURE__ */ jsx4(ScreenShareIcon, {})
         }
       ),
-      /* @__PURE__ */ jsxs2("span", { className: "mx-meet__anchor", children: [
-        /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsxs3("span", { className: "mx-meet__anchor", children: [
+        /* @__PURE__ */ jsx4(
           ControlButton,
           {
             label: "Send a reaction",
             active: popover === "reactions",
             onClick: () => setPopover(popover === "reactions" ? "none" : "reactions"),
-            children: /* @__PURE__ */ jsx3(SmileIcon, {})
+            children: /* @__PURE__ */ jsx4(SmileIcon, {})
           }
         ),
-        popover === "reactions" ? /* @__PURE__ */ jsx3(Popover, { label: "Reactions", onClose: () => setPopover("none"), children: /* @__PURE__ */ jsx3("div", { className: "mx-meet__emoji-bar", children: MEET_REACTIONS.map((emoji) => /* @__PURE__ */ jsx3(
+        popover === "reactions" ? /* @__PURE__ */ jsx4(Popover, { label: "Reactions", onClose: () => setPopover("none"), children: /* @__PURE__ */ jsx4("div", { className: "mx-meet__emoji-bar", children: MEET_REACTIONS.map((emoji) => /* @__PURE__ */ jsx4(
           "button",
           {
             type: "button",
@@ -7001,46 +8650,53 @@ function ControlBar({ onLeave }) {
           emoji
         )) }) }) : null
       ] }),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(
         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__ */ jsx3(HandIcon, {})
+          children: /* @__PURE__ */ jsx4(HandIcon, {})
         }
       ),
-      /* @__PURE__ */ jsxs2(ControlButton, { label: "Chat (\u2318\u2325C)", active: panel === "chat", onClick: () => toggle("chat"), children: [
-        /* @__PURE__ */ jsx3(ChatIcon, {}),
-        unread > 0 ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__dot", "aria-hidden": "true" }) : null
+      /* @__PURE__ */ jsxs3(ControlButton, { label: "Chat (\u2318\u2325C)", active: panel === "chat", onClick: () => toggle("chat"), children: [
+        /* @__PURE__ */ jsx4(ChatIcon, {}),
+        unread > 0 ? /* @__PURE__ */ jsx4("span", { className: "mx-meet__dot", "aria-hidden": "true" }) : null
       ] }),
-      /* @__PURE__ */ jsxs2(
+      /* @__PURE__ */ jsxs3(
         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__ */ jsx3(PeopleIcon, {}),
-            lobby.waiting.length > 0 || controls.isHost && queue.length > 0 ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__dot", "aria-hidden": "true" }) : null
+            /* @__PURE__ */ jsx4(PeopleIcon, {}),
+            lobby.waiting.length > 0 || controls.isHost && queue.length > 0 ? /* @__PURE__ */ jsx4("span", { className: "mx-meet__dot", "aria-hidden": "true" }) : null
           ]
         }
       ),
-      /* @__PURE__ */ jsx3(AiControl, { active: panel === "ai", onToggle: () => toggle("ai") }),
-      recording.canStart ? /* @__PURE__ */ jsx3(ControlButton, { label: "Start recording", onClick: () => void recording.start(), children: /* @__PURE__ */ jsx3(RecordIcon, {}) }) : null,
-      recording.canStop ? /* @__PURE__ */ jsx3(ControlButton, { label: "Stop recording", active: true, onClick: () => void recording.stop(), children: /* @__PURE__ */ jsx3(RecordIcon, {}) }) : null,
-      /* @__PURE__ */ jsxs2("span", { className: "mx-meet__anchor", children: [
-        /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(
+        ActivitiesControl,
+        {
+          active: whiteboard ? "whiteboard" : panel === "polls" || panel === "qa" || panel === "breakouts" ? panel : null,
+          onOpen: openActivity
+        }
+      ),
+      /* @__PURE__ */ jsx4(AiControl, { active: panel === "ai", onToggle: () => toggle("ai") }),
+      recording.canStart ? /* @__PURE__ */ jsx4(ControlButton, { label: "Start recording", onClick: () => void recording.start(), children: /* @__PURE__ */ jsx4(RecordIcon, {}) }) : null,
+      recording.canStop ? /* @__PURE__ */ jsx4(ControlButton, { label: "Stop recording", active: true, onClick: () => void recording.stop(), children: /* @__PURE__ */ jsx4(RecordIcon, {}) }) : null,
+      /* @__PURE__ */ jsxs3("span", { className: "mx-meet__anchor", children: [
+        /* @__PURE__ */ jsx4(
           ControlButton,
           {
             label: "More options",
             active: popover === "more" || panel === "settings",
             onClick: () => setPopover(popover === "more" ? "none" : "more"),
-            children: /* @__PURE__ */ jsx3(MoreIcon, {})
+            children: /* @__PURE__ */ jsx4(MoreIcon, {})
           }
         ),
-        popover === "more" ? /* @__PURE__ */ jsx3(Popover, { label: "More options", onClose: () => setPopover("none"), children: /* @__PURE__ */ jsxs2("div", { className: "mx-meet__menu", role: "menu", children: [
-          /* @__PURE__ */ jsxs2(
+        popover === "more" ? /* @__PURE__ */ jsx4(Popover, { label: "More options", onClose: () => setPopover("none"), children: /* @__PURE__ */ jsxs3("div", { className: "mx-meet__menu", role: "menu", children: [
+          /* @__PURE__ */ jsxs3(
             MenuItem,
             {
               onSelect: () => {
@@ -7048,12 +8704,12 @@ function ControlBar({ onLeave }) {
                 setPanel("settings");
               },
               children: [
-                /* @__PURE__ */ jsx3(SettingsIcon, { width: 16, height: 16 }),
-                " Audio, video and effects"
+                /* @__PURE__ */ jsx4(SettingsIcon, { width: 16, height: 16 }),
+                " Settings"
               ]
             }
           ),
-          /* @__PURE__ */ jsxs2(
+          /* @__PURE__ */ jsxs3(
             MenuItem,
             {
               onSelect: () => {
@@ -7061,14 +8717,14 @@ function ControlBar({ onLeave }) {
                 setShortcuts(true);
               },
               children: [
-                /* @__PURE__ */ jsx3(KeyboardIcon, { width: 16, height: 16 }),
+                /* @__PURE__ */ jsx4(KeyboardIcon, { width: 16, height: 16 }),
                 " Keyboard shortcuts"
               ]
             }
           ),
-          controls.isHost ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-            /* @__PURE__ */ jsx3("div", { className: "mx-meet__menu-sep", role: "separator" }),
-            /* @__PURE__ */ jsxs2(
+          controls.isHost ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+            /* @__PURE__ */ jsx4("div", { className: "mx-meet__menu-sep", role: "separator" }),
+            /* @__PURE__ */ jsxs3(
               MenuItem,
               {
                 onSelect: () => {
@@ -7076,12 +8732,12 @@ function ControlBar({ onLeave }) {
                   void controls.run({ action: "mute_all" });
                 },
                 children: [
-                  /* @__PURE__ */ jsx3(MicOffIcon, { width: 16, height: 16 }),
+                  /* @__PURE__ */ jsx4(MicOffIcon, { width: 16, height: 16 }),
                   " Mute everyone"
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs2(
+            /* @__PURE__ */ jsxs3(
               MenuItem,
               {
                 onSelect: () => {
@@ -7089,12 +8745,12 @@ function ControlBar({ onLeave }) {
                   void controls.run({ action: "ask_all_unmute" });
                 },
                 children: [
-                  /* @__PURE__ */ jsx3(MicIcon, { width: 16, height: 16 }),
+                  /* @__PURE__ */ jsx4(MicIcon, { width: 16, height: 16 }),
                   " Ask everyone to unmute"
                 ]
               }
             ),
-            queue.length > 0 ? /* @__PURE__ */ jsxs2(
+            queue.length > 0 ? /* @__PURE__ */ jsxs3(
               MenuItem,
               {
                 onSelect: () => {
@@ -7102,14 +8758,14 @@ function ControlBar({ onLeave }) {
                   void controls.run({ action: "lower_all_hands" });
                 },
                 children: [
-                  /* @__PURE__ */ jsx3(HandIcon, { width: 16, height: 16 }),
+                  /* @__PURE__ */ jsx4(HandIcon, { width: 16, height: 16 }),
                   " Lower all hands (",
                   queue.length,
                   ")"
                 ]
               }
             ) : null,
-            hasSpotlight ? /* @__PURE__ */ jsxs2(
+            hasSpotlight ? /* @__PURE__ */ jsxs3(
               MenuItem,
               {
                 onSelect: () => {
@@ -7117,7 +8773,7 @@ function ControlBar({ onLeave }) {
                   void controls.run({ action: "spotlight", identity: null });
                 },
                 children: [
-                  /* @__PURE__ */ jsx3(SpotlightIcon, { width: 16, height: 16 }),
+                  /* @__PURE__ */ jsx4(SpotlightIcon, { width: 16, height: 16 }),
                   " Remove spotlight"
                 ]
               }
@@ -7125,7 +8781,7 @@ function ControlBar({ onLeave }) {
           ] }) : null
         ] }) }) : null
       ] }),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(
         ControlButton,
         {
           label: "Leave",
@@ -7134,7 +8790,7 @@ function ControlBar({ onLeave }) {
             void room.leave();
             onLeave?.();
           },
-          children: /* @__PURE__ */ jsx3(PhoneOffIcon, {})
+          children: /* @__PURE__ */ jsx4(PhoneOffIcon, {})
         }
       )
     ] })
@@ -7144,13 +8800,13 @@ function useUnreadChat(open) {
   const snapshot = useMeetSnapshot();
   const chat = snapshot?.chat ?? [];
   const local = snapshot?.localIdentity ?? null;
-  const [seen, setSeen] = useState3(0);
-  useEffect3(() => {
+  const [seen, setSeen] = useState4(0);
+  useEffect4(() => {
     if (open) setSeen(chat.length);
   }, [open, chat.length]);
   const loaded = snapshot?.chatLoaded === true;
-  const [baseline, setBaseline] = useState3(null);
-  useEffect3(() => {
+  const [baseline, setBaseline] = useState4(null);
+  useEffect4(() => {
     if (loaded && baseline === null) setBaseline(chat.length);
   }, [loaded, baseline, chat.length]);
   if (open) return 0;
@@ -7163,8 +8819,8 @@ function Popover({
   children,
   placement = "up"
 }) {
-  const ref = useRef3(null);
-  const [style, setStyle] = useState3({
+  const ref = useRef4(null);
+  const [style, setStyle] = useState4({
     position: "fixed",
     top: 0,
     left: 0,
@@ -7215,7 +8871,7 @@ function Popover({
       window.removeEventListener("scroll", place, true);
     };
   }, [placement]);
-  useEffect3(() => {
+  useEffect4(() => {
     const onKey = (event) => {
       if (event.key === "Escape") onClose();
     };
@@ -7230,14 +8886,14 @@ function Popover({
       window.removeEventListener("pointerdown", onPointer);
     };
   }, [onClose]);
-  return /* @__PURE__ */ jsx3("div", { ref, className: "mx-meet__popover", style, role: "dialog", "aria-label": label, children });
+  return /* @__PURE__ */ jsx4("div", { ref, className: "mx-meet__popover", style, role: "dialog", "aria-label": label, children });
 }
 function MenuItem({
   onSelect,
   danger = false,
   children
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "button",
     {
       type: "button",
@@ -7249,28 +8905,28 @@ function MenuItem({
   );
 }
 function Toast({ text: text3, failed, onDone }) {
-  useEffect3(() => {
+  useEffect4(() => {
     const timer = setTimeout(onDone, failed ? 7e3 : 4e3);
     return () => clearTimeout(timer);
   }, [text3, failed, onDone]);
-  return /* @__PURE__ */ jsxs2("div", { className: failed ? "mx-meet__toast mx-meet__toast--failed" : "mx-meet__toast", role: "status", children: [
-    /* @__PURE__ */ jsx3("span", { children: text3 }),
-    /* @__PURE__ */ jsx3("button", { type: "button", className: "mx-meet__toast-close", "aria-label": "Dismiss", onClick: onDone, children: /* @__PURE__ */ jsx3(CloseIcon, { width: 14, height: 14 }) })
+  return /* @__PURE__ */ jsxs3("div", { className: failed ? "mx-meet__toast mx-meet__toast--failed" : "mx-meet__toast", role: "status", children: [
+    /* @__PURE__ */ jsx4("span", { children: text3 }),
+    /* @__PURE__ */ jsx4("button", { type: "button", className: "mx-meet__toast-close", "aria-label": "Dismiss", onClick: onDone, children: /* @__PURE__ */ jsx4(CloseIcon, { width: 14, height: 14 }) })
   ] });
 }
 function MeetingOverlays() {
   const reactions = useReactions();
   const { notice, dismiss } = useModerationNotice();
   const room = useRoom();
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx3(ReactionOverlay, { reactions }),
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx4(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__ */ jsxs2("div", { className: "mx-meet__notice-bar", role: "status", "aria-live": "assertive", children: [
-        /* @__PURE__ */ jsx3("span", { children: notice.text }),
-        notice.kind === "ask-unmute" && room.local?.micEnabled !== true ? /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsxs3("div", { className: "mx-meet__notice-bar", role: "status", "aria-live": "assertive", children: [
+        /* @__PURE__ */ jsx4("span", { children: notice.text }),
+        notice.kind === "ask-unmute" && room.local?.micEnabled !== true ? /* @__PURE__ */ jsx4(
           "button",
           {
             type: "button",
@@ -7282,20 +8938,20 @@ function MeetingOverlays() {
             children: "Unmute"
           }
         ) : null,
-        /* @__PURE__ */ jsx3("button", { type: "button", className: "mx-meet__toast-close", "aria-label": "Dismiss", onClick: dismiss, children: /* @__PURE__ */ jsx3(CloseIcon, { width: 14, height: 14 }) })
+        /* @__PURE__ */ jsx4("button", { type: "button", className: "mx-meet__toast-close", "aria-label": "Dismiss", onClick: dismiss, children: /* @__PURE__ */ jsx4(CloseIcon, { width: 14, height: 14 }) })
       ] })
     ) : null
   ] });
 }
 function ShortcutsSheet({ onClose }) {
-  useEffect3(() => {
+  useEffect4(() => {
     const onKey = (event) => {
       if (event.key === "Escape") onClose();
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [onClose]);
-  return /* @__PURE__ */ jsx3("div", { className: "mx-meet__sheet-backdrop", onClick: onClose, children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx4("div", { className: "mx-meet__sheet-backdrop", onClick: onClose, children: /* @__PURE__ */ jsxs3(
     "div",
     {
       className: "mx-meet__sheet",
@@ -7303,13 +8959,13 @@ function ShortcutsSheet({ onClose }) {
       "aria-label": "Keyboard shortcuts",
       onClick: (event) => event.stopPropagation(),
       children: [
-        /* @__PURE__ */ jsxs2("header", { className: "mx-meet__panel-head", children: [
-          /* @__PURE__ */ jsx3("h2", { className: "mx-meet__panel-title", children: "Keyboard shortcuts" }),
-          /* @__PURE__ */ jsx3(ControlButton, { label: "Close", onClick: onClose, children: /* @__PURE__ */ jsx3(CloseIcon, { width: 16, height: 16 }) })
+        /* @__PURE__ */ jsxs3("header", { className: "mx-meet__panel-head", children: [
+          /* @__PURE__ */ jsx4("h2", { className: "mx-meet__panel-title", children: "Keyboard shortcuts" }),
+          /* @__PURE__ */ jsx4(ControlButton, { label: "Close", onClick: onClose, children: /* @__PURE__ */ jsx4(CloseIcon, { width: 16, height: 16 }) })
         ] }),
-        /* @__PURE__ */ jsx3("dl", { className: "mx-meet__shortcuts", children: MEET_SHORTCUTS.map((shortcut) => /* @__PURE__ */ jsxs2("div", { className: "mx-meet__shortcut", children: [
-          /* @__PURE__ */ jsx3("dt", { children: shortcut.label }),
-          /* @__PURE__ */ jsx3("dd", { children: /* @__PURE__ */ jsx3("kbd", { className: "mx-meet__kbd", children: shortcut.keys }) })
+        /* @__PURE__ */ jsx4("dl", { className: "mx-meet__shortcuts", children: MEET_SHORTCUTS.map((shortcut) => /* @__PURE__ */ jsxs3("div", { className: "mx-meet__shortcut", children: [
+          /* @__PURE__ */ jsx4("dt", { children: shortcut.label }),
+          /* @__PURE__ */ jsx4("dd", { children: /* @__PURE__ */ jsx4("kbd", { className: "mx-meet__kbd", children: shortcut.keys }) })
         ] }, shortcut.id)) })
       ]
     }
@@ -7319,19 +8975,19 @@ function AiControl({ active, onToggle }) {
   const snapshot = useMeetSnapshot();
   const meeting = snapshot?.meeting ?? null;
   if (meeting === null || !meeting.aiEnabled) return null;
-  return /* @__PURE__ */ jsx3(ControlButton, { label: "Meeting assistant", active, onClick: onToggle, children: /* @__PURE__ */ jsx3(SparklesIcon, {}) });
+  return /* @__PURE__ */ jsx4(ControlButton, { label: "Meeting assistant", active, onClick: onToggle, children: /* @__PURE__ */ jsx4(SparklesIcon, {}) });
 }
 function PanelShell({
   title,
   onClose,
   children
 }) {
-  return /* @__PURE__ */ jsxs2("aside", { className: "mx-meet__panel", "aria-label": title, children: [
-    /* @__PURE__ */ jsxs2("header", { className: "mx-meet__panel-head", children: [
-      /* @__PURE__ */ jsx3("h2", { className: "mx-meet__panel-title", children: title }),
-      /* @__PURE__ */ jsx3(ControlButton, { label: "Close panel", onClick: onClose, children: /* @__PURE__ */ jsx3(CloseIcon, { width: 16, height: 16 }) })
+  return /* @__PURE__ */ jsxs3("aside", { className: "mx-meet__panel", "aria-label": title, children: [
+    /* @__PURE__ */ jsxs3("header", { className: "mx-meet__panel-head", children: [
+      /* @__PURE__ */ jsx4("h2", { className: "mx-meet__panel-title", children: title }),
+      /* @__PURE__ */ jsx4(ControlButton, { label: "Close panel", onClick: onClose, children: /* @__PURE__ */ jsx4(CloseIcon, { width: 16, height: 16 }) })
     ] }),
-    /* @__PURE__ */ jsx3("div", { className: "mx-meet__panel-body", children })
+    /* @__PURE__ */ jsx4("div", { className: "mx-meet__panel-body", children })
   ] });
 }
 function ChatPanel({
@@ -7341,17 +8997,17 @@ function ChatPanel({
 }) {
   const snapshot = useMeetSnapshot();
   const room = useRoom();
-  const [draft, setDraft] = useState3("");
-  const [recipient, setRecipient] = useState3(to);
-  const listRef = useRef3(null);
+  const [draft, setDraft] = useState4("");
+  const [recipient, setRecipient] = useState4(to);
+  const listRef = useRef4(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;
-  useEffect3(() => setRecipient(to), [to]);
-  useEffect3(() => {
+  useEffect4(() => setRecipient(to), [to]);
+  useEffect4(() => {
     const list = listRef.current;
     if (list !== null) list.scrollTop = list.scrollHeight;
   }, [messages.length]);
@@ -7359,13 +9015,13 @@ function ChatPanel({
     setRecipient(next);
     onTo?.(next);
   };
-  return /* @__PURE__ */ jsxs2(PanelShell, { title: "Chat", onClose, children: [
-    /* @__PURE__ */ jsxs2("ul", { className: "mx-meet__chat", ref: listRef, children: [
-      snapshot?.chatHistoryError != null ? /* @__PURE__ */ jsx3("li", { className: "mx-meet__panel-note", children: snapshot.chatHistoryError }) : null,
-      snapshot?.chatLoaded !== true && messages.length === 0 ? /* @__PURE__ */ jsx3("li", { className: "mx-meet__panel-note", children: "Reading earlier messages\u2026" }) : messages.length === 0 && snapshot?.chatHistoryError == null ? /* @__PURE__ */ jsx3("li", { className: "mx-meet__panel-note", children: "No messages yet. Messages to everyone stay with the meeting, so people who join later see them." }) : null,
-      messages.map((message) => /* @__PURE__ */ jsx3(ChatLine, { message, local, people }, message.id))
+  return /* @__PURE__ */ jsxs3(PanelShell, { title: "Chat", onClose, children: [
+    /* @__PURE__ */ jsxs3("ul", { className: "mx-meet__chat", ref: listRef, children: [
+      snapshot?.chatHistoryError != null ? /* @__PURE__ */ jsx4("li", { className: "mx-meet__panel-note", children: snapshot.chatHistoryError }) : null,
+      snapshot?.chatLoaded !== true && messages.length === 0 ? /* @__PURE__ */ jsx4("li", { className: "mx-meet__panel-note", children: "Reading earlier messages\u2026" }) : messages.length === 0 && snapshot?.chatHistoryError == null ? /* @__PURE__ */ jsx4("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__ */ jsx4(ChatLine, { message, local, people }, message.id))
     ] }),
-    /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsxs3(
       "form",
       {
         className: "mx-meet__composer mx-meet__composer--chat",
@@ -7378,7 +9034,7 @@ function ChatPanel({
           else void room.sendPrivateChat(recipient, text3);
         },
         children: [
-          people.length > 0 ? /* @__PURE__ */ jsxs2(
+          people.length > 0 ? /* @__PURE__ */ jsxs3(
             "select",
             {
               className: "mx-meet__select mx-meet__select--compact",
@@ -7386,16 +9042,16 @@ function ChatPanel({
               value: recipient ?? "",
               onChange: (event) => choose(event.target.value === "" ? null : event.target.value),
               children: [
-                /* @__PURE__ */ jsx3("option", { value: "", children: "Everyone" }),
-                people.map((participant) => /* @__PURE__ */ jsxs2("option", { value: participant.identity, children: [
+                /* @__PURE__ */ jsx4("option", { value: "", children: "Everyone" }),
+                people.map((participant) => /* @__PURE__ */ jsxs3("option", { value: participant.identity, children: [
                   participant.displayName,
                   " (private)"
                 ] }, participant.identity))
               ]
             }
           ) : null,
-          /* @__PURE__ */ jsxs2("div", { className: "mx-meet__composer-row", children: [
-            /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsxs3("div", { className: "mx-meet__composer-row", children: [
+            /* @__PURE__ */ jsx4(
               "input",
               {
                 className: "mx-meet__input",
@@ -7406,9 +9062,9 @@ function ChatPanel({
                 maxLength: 4e3
               }
             ),
-            /* @__PURE__ */ jsx3("button", { type: "submit", className: "mx-meet__send", disabled: draft.trim().length === 0, children: "Send" })
+            /* @__PURE__ */ jsx4("button", { type: "submit", className: "mx-meet__send", disabled: draft.trim().length === 0, children: "Send" })
           ] }),
-          recipientName !== null ? /* @__PURE__ */ jsxs2("p", { className: "mx-meet__panel-note", children: [
+          recipientName !== null ? /* @__PURE__ */ jsxs3("p", { className: "mx-meet__panel-note", children: [
             "Only ",
             recipientName,
             " sees this. Private messages are not saved."
@@ -7426,7 +9082,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__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "li",
     {
       className: [
@@ -7435,17 +9091,17 @@ function ChatLine({
         message.failed !== void 0 ? "mx-meet__chat-line--failed" : ""
       ].filter(Boolean).join(" "),
       children: [
-        /* @__PURE__ */ jsxs2("span", { className: "mx-meet__chat-meta", children: [
-          /* @__PURE__ */ jsx3("strong", { children: mine ? "You" : message.displayName }),
-          counterpart !== null ? /* @__PURE__ */ jsxs2("span", { className: "mx-meet__chat-private", children: [
+        /* @__PURE__ */ jsxs3("span", { className: "mx-meet__chat-meta", children: [
+          /* @__PURE__ */ jsx4("strong", { children: mine ? "You" : message.displayName }),
+          counterpart !== null ? /* @__PURE__ */ jsxs3("span", { className: "mx-meet__chat-private", children: [
             "to ",
             counterpart,
             " \xB7 private"
           ] }) : null,
-          /* @__PURE__ */ jsx3("time", { dateTime: message.at, children: clockOf(message.at) })
+          /* @__PURE__ */ jsx4("time", { dateTime: message.at, children: clockOf(message.at) })
         ] }),
-        /* @__PURE__ */ jsx3("span", { className: "mx-meet__chat-text", children: message.text }),
-        message.failed !== void 0 ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__chat-failed", children: message.failed }) : privateTo === null && message.saved === false ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__chat-pending", children: message.id.startsWith("pending-") ? "Sending\u2026" : "Not saved \u2014 people who join later will not see this" }) : null
+        /* @__PURE__ */ jsx4("span", { className: "mx-meet__chat-text", children: message.text }),
+        message.failed !== void 0 ? /* @__PURE__ */ jsx4("span", { className: "mx-meet__chat-failed", children: message.failed }) : privateTo === null && message.saved === false ? /* @__PURE__ */ jsx4("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
       ]
     }
   );
@@ -7457,22 +9113,22 @@ function PeoplePanel({
   const snapshot = useMeetSnapshot();
   const controls = useHostControls();
   const queue = useHandQueue();
-  const [query, setQuery] = useState3("");
-  const [menuFor, setMenuFor] = useState3(null);
+  const [query, setQuery] = useState4("");
+  const [menuFor, setMenuFor] = useState4(null);
   const myRole = useRole();
   const local = snapshot?.localIdentity ?? null;
   const everyone = snapshot?.participants ?? [];
   const needle = query.trim().toLowerCase();
   const shown = needle.length === 0 ? everyone : everyone.filter((participant) => participant.displayName.toLowerCase().includes(needle));
-  return /* @__PURE__ */ jsxs2(PanelShell, { title: `People (${everyone.length})`, onClose, children: [
-    /* @__PURE__ */ jsx3(LobbyPanel, {}),
-    queue.length > 0 ? /* @__PURE__ */ jsxs2("section", { className: "mx-meet__section", "aria-label": "Raised hands", children: [
-      /* @__PURE__ */ jsxs2("header", { className: "mx-meet__section-head", children: [
-        /* @__PURE__ */ jsxs2("h3", { className: "mx-meet__section-title", children: [
+  return /* @__PURE__ */ jsxs3(PanelShell, { title: `People (${everyone.length})`, onClose, children: [
+    /* @__PURE__ */ jsx4(LobbyPanel, {}),
+    queue.length > 0 ? /* @__PURE__ */ jsxs3("section", { className: "mx-meet__section", "aria-label": "Raised hands", children: [
+      /* @__PURE__ */ jsxs3("header", { className: "mx-meet__section-head", children: [
+        /* @__PURE__ */ jsxs3("h3", { className: "mx-meet__section-title", children: [
           "Raised hands \xB7 ",
           queue.length
         ] }),
-        controls.isHost ? /* @__PURE__ */ jsx3(
+        controls.isHost ? /* @__PURE__ */ jsx4(
           "button",
           {
             type: "button",
@@ -7482,13 +9138,13 @@ function PeoplePanel({
           }
         ) : null
       ] }),
-      /* @__PURE__ */ jsx3("ol", { className: "mx-meet__queue", children: queue.map((participant) => /* @__PURE__ */ jsxs2("li", { className: "mx-meet__person", children: [
-        /* @__PURE__ */ jsx3(Avatar, { name: participant.displayName, url: participant.avatarUrl, size: 28 }),
-        /* @__PURE__ */ jsxs2("span", { className: "mx-meet__person-name", children: [
+      /* @__PURE__ */ jsx4("ol", { className: "mx-meet__queue", children: queue.map((participant) => /* @__PURE__ */ jsxs3("li", { className: "mx-meet__person", children: [
+        /* @__PURE__ */ jsx4(Avatar, { name: participant.displayName, url: participant.avatarUrl, size: 28 }),
+        /* @__PURE__ */ jsxs3("span", { className: "mx-meet__person-name", children: [
           participant.displayName,
-          participant.identity === local ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__you", children: " (you)" }) : null
+          participant.identity === local ? /* @__PURE__ */ jsx4("span", { className: "mx-meet__you", children: " (you)" }) : null
         ] }),
-        controls.isHost || participant.identity === local ? /* @__PURE__ */ jsx3(
+        controls.isHost || participant.identity === local ? /* @__PURE__ */ jsx4(
           "button",
           {
             type: "button",
@@ -7499,27 +9155,27 @@ function PeoplePanel({
         ) : null
       ] }, participant.identity)) })
     ] }) : null,
-    controls.isHost && everyone.length > 1 ? /* @__PURE__ */ jsxs2("div", { className: "mx-meet__bulk", children: [
-      /* @__PURE__ */ jsxs2("button", { type: "button", className: "mx-meet__chip", onClick: () => void controls.run({ action: "mute_all" }), children: [
-        /* @__PURE__ */ jsx3(MicOffIcon, { width: 14, height: 14 }),
+    controls.isHost && everyone.length > 1 ? /* @__PURE__ */ jsxs3("div", { className: "mx-meet__bulk", children: [
+      /* @__PURE__ */ jsxs3("button", { type: "button", className: "mx-meet__chip", onClick: () => void controls.run({ action: "mute_all" }), children: [
+        /* @__PURE__ */ jsx4(MicOffIcon, { width: 14, height: 14 }),
         " Mute all"
       ] }),
-      /* @__PURE__ */ jsxs2(
+      /* @__PURE__ */ jsxs3(
         "button",
         {
           type: "button",
           className: "mx-meet__chip",
           onClick: () => void controls.run({ action: "ask_all_unmute" }),
           children: [
-            /* @__PURE__ */ jsx3(MicIcon, { width: 14, height: 14 }),
+            /* @__PURE__ */ jsx4(MicIcon, { width: 14, height: 14 }),
             " Ask all to unmute"
           ]
         }
       )
     ] }) : null,
-    everyone.length > 4 ? /* @__PURE__ */ jsxs2("label", { className: "mx-meet__search", children: [
-      /* @__PURE__ */ jsx3(SearchIcon, { width: 16, height: 16 }),
-      /* @__PURE__ */ jsx3(
+    everyone.length > 4 ? /* @__PURE__ */ jsxs3("label", { className: "mx-meet__search", children: [
+      /* @__PURE__ */ jsx4(SearchIcon, { width: 16, height: 16 }),
+      /* @__PURE__ */ jsx4(
         "input",
         {
           className: "mx-meet__input mx-meet__input--bare",
@@ -7530,31 +9186,31 @@ function PeoplePanel({
         }
       )
     ] }) : null,
-    controls.notice !== null ? /* @__PURE__ */ jsx3("p", { className: controls.notice.failed ? "mx-meet__error" : "mx-meet__notice", role: "status", children: controls.notice.text }) : null,
-    /* @__PURE__ */ jsxs2("ul", { className: "mx-meet__people", children: [
-      shown.map((participant) => /* @__PURE__ */ jsxs2("li", { className: "mx-meet__person", children: [
-        /* @__PURE__ */ jsx3(Avatar, { name: participant.displayName, url: participant.avatarUrl, size: 32 }),
-        /* @__PURE__ */ jsxs2("span", { className: "mx-meet__person-name", children: [
+    controls.notice !== null ? /* @__PURE__ */ jsx4("p", { className: controls.notice.failed ? "mx-meet__error" : "mx-meet__notice", role: "status", children: controls.notice.text }) : null,
+    /* @__PURE__ */ jsxs3("ul", { className: "mx-meet__people", children: [
+      shown.map((participant) => /* @__PURE__ */ jsxs3("li", { className: "mx-meet__person", children: [
+        /* @__PURE__ */ jsx4(Avatar, { name: participant.displayName, url: participant.avatarUrl, size: 32 }),
+        /* @__PURE__ */ jsxs3("span", { className: "mx-meet__person-name", children: [
           participant.displayName,
-          participant.identity === local ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__you", children: " (you)" }) : null,
-          /* @__PURE__ */ jsx3(RoleBadge, { role: participant.identity === local ? myRole : participant.role }),
-          isNoteTaker(participant) ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__badge", children: "Meeting assistant" }) : null,
-          snapshot?.spotlight === participant.identity ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__badge", children: "Spotlight" }) : null
+          participant.identity === local ? /* @__PURE__ */ jsx4("span", { className: "mx-meet__you", children: " (you)" }) : null,
+          /* @__PURE__ */ jsx4(RoleBadge, { role: participant.identity === local ? myRole : participant.role }),
+          isNoteTaker(participant) ? /* @__PURE__ */ jsx4("span", { className: "mx-meet__badge", children: "Meeting assistant" }) : null,
+          snapshot?.spotlight === participant.identity ? /* @__PURE__ */ jsx4("span", { className: "mx-meet__badge", children: "Spotlight" }) : null
         ] }),
-        participant.handRaised ? /* @__PURE__ */ jsx3(HandIcon, { width: 14, height: 14 }) : null,
-        !participant.micEnabled && !isNoteTaker(participant) ? /* @__PURE__ */ jsx3(MicOffIcon, { width: 14, height: 14 }) : null,
-        /* @__PURE__ */ jsx3(QualityBars, { quality: participant.quality }),
-        /* @__PURE__ */ jsxs2("span", { className: "mx-meet__anchor", children: [
-          /* @__PURE__ */ jsx3(
+        participant.handRaised ? /* @__PURE__ */ jsx4(HandIcon, { width: 14, height: 14 }) : null,
+        !participant.micEnabled && !isNoteTaker(participant) ? /* @__PURE__ */ jsx4(MicOffIcon, { width: 14, height: 14 }) : null,
+        /* @__PURE__ */ jsx4(QualityBars, { quality: participant.quality }),
+        /* @__PURE__ */ jsxs3("span", { className: "mx-meet__anchor", children: [
+          /* @__PURE__ */ jsx4(
             ControlButton,
             {
               label: `More for ${participant.displayName}`,
               active: menuFor === participant.identity,
               onClick: () => setMenuFor(menuFor === participant.identity ? null : participant.identity),
-              children: /* @__PURE__ */ jsx3(MoreIcon, { width: 16, height: 16 })
+              children: /* @__PURE__ */ jsx4(MoreIcon, { width: 16, height: 16 })
             }
           ),
-          menuFor === participant.identity ? /* @__PURE__ */ jsx3(
+          menuFor === participant.identity ? /* @__PURE__ */ jsx4(
             PersonMenu,
             {
               participant,
@@ -7565,13 +9221,13 @@ function PeoplePanel({
           ) : null
         ] })
       ] }, participant.identity)),
-      shown.length === 0 ? /* @__PURE__ */ jsxs2("li", { className: "mx-meet__panel-note", children: [
+      shown.length === 0 ? /* @__PURE__ */ jsxs3("li", { className: "mx-meet__panel-note", children: [
         "Nobody matches \u201C",
         query,
         "\u201D."
       ] }) : null
     ] }),
-    snapshot?.meeting !== null && snapshot?.meeting !== void 0 ? /* @__PURE__ */ jsx3(GuestRecordAccessControl, { meeting: snapshot.meeting }) : null
+    snapshot?.meeting !== null && snapshot?.meeting !== void 0 ? /* @__PURE__ */ jsx4(GuestRecordAccessControl, { meeting: snapshot.meeting }) : null
   ] });
 }
 function PersonMenu({
@@ -7583,14 +9239,14 @@ function PersonMenu({
   const host = useMeetHost();
   const snapshot = useMeetSnapshot();
   const controls = useHostControls();
-  const [mode, setMode] = useState3("menu");
-  const [text3, setText] = useState3("");
+  const [mode, setMode] = useState4("menu");
+  const [text3, setText] = useState4("");
   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] = useState3(false);
+  const [refused, setRefused] = useState4(false);
   const act = (request) => {
     setRefused(false);
     void controls.run(request).then((result) => {
@@ -7598,10 +9254,10 @@ function PersonMenu({
       else setRefused(true);
     });
   };
-  const refusal2 = refused && controls.notice?.failed === true ? /* @__PURE__ */ jsx3(ErrorBox, { as: "p", className: "mx-meet__error", message: controls.notice.text, operation: "Change this participant", origin: "meet/components", children: controls.notice.text }) : null;
+  const refusal2 = refused && controls.notice?.failed === true ? /* @__PURE__ */ jsx4(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__ */ jsx3(Popover, { label: renaming ? "Rename" : "Report", onClose, placement, children: /* @__PURE__ */ jsxs2(
+    return /* @__PURE__ */ jsx4(Popover, { label: renaming ? "Rename" : "Report", onClose, placement, children: /* @__PURE__ */ jsxs3(
       "form",
       {
         className: "mx-meet__menu-form",
@@ -7613,9 +9269,9 @@ function PersonMenu({
           );
         },
         children: [
-          /* @__PURE__ */ jsxs2("label", { className: "mx-meet__field", children: [
-            /* @__PURE__ */ jsx3("span", { className: "mx-meet__field-label", children: renaming ? "Name shown in this meeting" : `What did ${participant.displayName} do?` }),
-            renaming ? /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsxs3("label", { className: "mx-meet__field", children: [
+            /* @__PURE__ */ jsx4("span", { className: "mx-meet__field-label", children: renaming ? "Name shown in this meeting" : `What did ${participant.displayName} do?` }),
+            renaming ? /* @__PURE__ */ jsx4(
               "input",
               {
                 className: "mx-meet__input",
@@ -7624,7 +9280,7 @@ function PersonMenu({
                 value: text3,
                 onChange: (event) => setText(event.target.value)
               }
-            ) : /* @__PURE__ */ jsx3(
+            ) : /* @__PURE__ */ jsx4(
               "textarea",
               {
                 className: "mx-meet__input",
@@ -7637,9 +9293,9 @@ function PersonMenu({
             )
           ] }),
           refusal2,
-          /* @__PURE__ */ jsxs2("div", { className: "mx-meet__menu-actions", children: [
-            /* @__PURE__ */ jsx3("button", { type: "button", className: "mx-meet__link", onClick: () => setMode("menu"), children: "Back" }),
-            /* @__PURE__ */ jsx3("button", { type: "submit", className: "mx-meet__send", disabled: text3.trim().length === 0 || controls.busy, children: renaming ? "Rename" : "Report" })
+          /* @__PURE__ */ jsxs3("div", { className: "mx-meet__menu-actions", children: [
+            /* @__PURE__ */ jsx4("button", { type: "button", className: "mx-meet__link", onClick: () => setMode("menu"), children: "Back" }),
+            /* @__PURE__ */ jsx4("button", { type: "submit", className: "mx-meet__send", disabled: text3.trim().length === 0 || controls.busy, children: renaming ? "Rename" : "Report" })
           ] })
         ]
       }
@@ -7647,12 +9303,12 @@ function PersonMenu({
   }
   if (mode === "remove" || mode === "transfer") {
     const removing = mode === "remove";
-    return /* @__PURE__ */ jsx3(Popover, { label: removing ? "Remove" : "Make host", onClose, placement, children: /* @__PURE__ */ jsxs2("div", { className: "mx-meet__menu-form", children: [
-      /* @__PURE__ */ jsx3("p", { className: "mx-meet__confirm-text", children: removing ? `Remove ${participant.displayName}? They leave immediately and cannot rejoin this meeting.` : `Make ${participant.displayName} the host? They get every host control and own this meeting. You stay on as a co-host.` }),
+    return /* @__PURE__ */ jsx4(Popover, { label: removing ? "Remove" : "Make host", onClose, placement, children: /* @__PURE__ */ jsxs3("div", { className: "mx-meet__menu-form", children: [
+      /* @__PURE__ */ jsx4("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.` }),
       refusal2,
-      /* @__PURE__ */ jsxs2("div", { className: "mx-meet__menu-actions", children: [
-        /* @__PURE__ */ jsx3("button", { type: "button", className: "mx-meet__link", onClick: () => setMode("menu"), children: "Cancel" }),
-        /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsxs3("div", { className: "mx-meet__menu-actions", children: [
+        /* @__PURE__ */ jsx4("button", { type: "button", className: "mx-meet__link", onClick: () => setMode("menu"), children: "Cancel" }),
+        /* @__PURE__ */ jsx4(
           "button",
           {
             type: "button",
@@ -7665,8 +9321,8 @@ function PersonMenu({
       ] })
     ] }) });
   }
-  return /* @__PURE__ */ jsx3(Popover, { label: `Options for ${participant.displayName}`, onClose, placement, children: /* @__PURE__ */ jsxs2("div", { className: "mx-meet__menu", role: "menu", children: [
-    /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx4(Popover, { label: `Options for ${participant.displayName}`, onClose, placement, children: /* @__PURE__ */ jsxs3("div", { className: "mx-meet__menu", role: "menu", children: [
+    /* @__PURE__ */ jsxs3(
       MenuItem,
       {
         onSelect: () => {
@@ -7674,13 +9330,13 @@ function PersonMenu({
           onClose();
         },
         children: [
-          /* @__PURE__ */ jsx3(PinIcon, { width: 16, height: 16 }),
+          /* @__PURE__ */ jsx4(PinIcon, { width: 16, height: 16 }),
           " ",
           pinned ? "Unpin" : "Pin for me"
         ]
       }
     ),
-    !self && !participant.isAgent && (onMessage !== void 0 || host !== null) ? /* @__PURE__ */ jsxs2(
+    !self && !participant.isAgent && (onMessage !== void 0 || host !== null) ? /* @__PURE__ */ jsxs3(
       MenuItem,
       {
         onSelect: () => {
@@ -7692,42 +9348,42 @@ function PersonMenu({
           onClose();
         },
         children: [
-          /* @__PURE__ */ jsx3(ChatIcon, { width: 16, height: 16 }),
+          /* @__PURE__ */ jsx4(ChatIcon, { width: 16, height: 16 }),
           " Message privately"
         ]
       }
     ) : null,
-    controls.isHost ? /* @__PURE__ */ jsxs2(MenuItem, { onSelect: () => act({ action: "spotlight", identity: spotlit ? null : participant.identity }), children: [
-      /* @__PURE__ */ jsx3(SpotlightIcon, { width: 16, height: 16 }),
+    controls.isHost ? /* @__PURE__ */ jsxs3(MenuItem, { onSelect: () => act({ action: "spotlight", identity: spotlit ? null : participant.identity }), children: [
+      /* @__PURE__ */ jsx4(SpotlightIcon, { width: 16, height: 16 }),
       " ",
       spotlit ? "Remove spotlight" : "Spotlight for everyone"
     ] }) : null,
-    moderate ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-      /* @__PURE__ */ jsx3("div", { className: "mx-meet__menu-sep", role: "separator" }),
-      participant.micEnabled ? /* @__PURE__ */ jsxs2(MenuItem, { onSelect: () => act({ action: "mute", identity: participant.identity }), children: [
-        /* @__PURE__ */ jsx3(MicOffIcon, { width: 16, height: 16 }),
+    moderate ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+      /* @__PURE__ */ jsx4("div", { className: "mx-meet__menu-sep", role: "separator" }),
+      participant.micEnabled ? /* @__PURE__ */ jsxs3(MenuItem, { onSelect: () => act({ action: "mute", identity: participant.identity }), children: [
+        /* @__PURE__ */ jsx4(MicOffIcon, { width: 16, height: 16 }),
         " Mute"
-      ] }) : !participant.isAgent ? /* @__PURE__ */ jsxs2(MenuItem, { onSelect: () => act({ action: "ask_unmute", identity: participant.identity }), children: [
-        /* @__PURE__ */ jsx3(MicIcon, { width: 16, height: 16 }),
+      ] }) : !participant.isAgent ? /* @__PURE__ */ jsxs3(MenuItem, { onSelect: () => act({ action: "ask_unmute", identity: participant.identity }), children: [
+        /* @__PURE__ */ jsx4(MicIcon, { width: 16, height: 16 }),
         " Ask to unmute"
       ] }) : null,
-      participant.cameraEnabled ? /* @__PURE__ */ jsxs2(MenuItem, { onSelect: () => act({ action: "stop_video", identity: participant.identity }), children: [
-        /* @__PURE__ */ jsx3(CameraOffIcon, { width: 16, height: 16 }),
+      participant.cameraEnabled ? /* @__PURE__ */ jsxs3(MenuItem, { onSelect: () => act({ action: "stop_video", identity: participant.identity }), children: [
+        /* @__PURE__ */ jsx4(CameraOffIcon, { width: 16, height: 16 }),
         " Stop video"
       ] }) : null,
-      participant.screenSharing ? /* @__PURE__ */ jsxs2(MenuItem, { onSelect: () => act({ action: "stop_screen", identity: participant.identity }), children: [
-        /* @__PURE__ */ jsx3(ScreenShareIcon, { width: 16, height: 16 }),
+      participant.screenSharing ? /* @__PURE__ */ jsxs3(MenuItem, { onSelect: () => act({ action: "stop_screen", identity: participant.identity }), children: [
+        /* @__PURE__ */ jsx4(ScreenShareIcon, { width: 16, height: 16 }),
         " Stop screen share"
       ] }) : null,
-      participant.handRaised ? /* @__PURE__ */ jsxs2(MenuItem, { onSelect: () => act({ action: "lower_hand", identity: participant.identity }), children: [
-        /* @__PURE__ */ jsx3(HandIcon, { width: 16, height: 16 }),
+      participant.handRaised ? /* @__PURE__ */ jsxs3(MenuItem, { onSelect: () => act({ action: "lower_hand", identity: participant.identity }), children: [
+        /* @__PURE__ */ jsx4(HandIcon, { width: 16, height: 16 }),
         " Lower hand"
       ] }) : null,
-      hasAccount && !participant.isAgent && participant.role !== "cohost" ? /* @__PURE__ */ jsxs2(MenuItem, { onSelect: () => act({ action: "make_cohost", identity: participant.identity }), children: [
-        /* @__PURE__ */ jsx3(PeopleIcon, { width: 16, height: 16 }),
+      hasAccount && !participant.isAgent && participant.role !== "cohost" ? /* @__PURE__ */ jsxs3(MenuItem, { onSelect: () => act({ action: "make_cohost", identity: participant.identity }), children: [
+        /* @__PURE__ */ jsx4(PeopleIcon, { width: 16, height: 16 }),
         " Make co-host"
       ] }) : null,
-      !participant.isAgent ? /* @__PURE__ */ jsxs2(
+      !participant.isAgent ? /* @__PURE__ */ jsxs3(
         MenuItem,
         {
           onSelect: () => {
@@ -7735,21 +9391,21 @@ function PersonMenu({
             setMode("rename");
           },
           children: [
-            /* @__PURE__ */ jsx3(PencilIcon, { width: 16, height: 16 }),
+            /* @__PURE__ */ jsx4(PencilIcon, { width: 16, height: 16 }),
             " Rename"
           ]
         }
       ) : null
     ] }) : null,
-    controls.isOwner && participant.role === "cohost" ? /* @__PURE__ */ jsxs2(MenuItem, { onSelect: () => act({ action: "revoke_cohost", identity: participant.identity }), children: [
-      /* @__PURE__ */ jsx3(PeopleIcon, { width: 16, height: 16 }),
+    controls.isOwner && participant.role === "cohost" ? /* @__PURE__ */ jsxs3(MenuItem, { onSelect: () => act({ action: "revoke_cohost", identity: participant.identity }), children: [
+      /* @__PURE__ */ jsx4(PeopleIcon, { width: 16, height: 16 }),
       " Remove co-host"
     ] }) : null,
-    controls.isOwner && !self && hasAccount && !participant.isAgent ? /* @__PURE__ */ jsxs2(MenuItem, { onSelect: () => setMode("transfer"), children: [
-      /* @__PURE__ */ jsx3(SpotlightIcon, { width: 16, height: 16 }),
+    controls.isOwner && !self && hasAccount && !participant.isAgent ? /* @__PURE__ */ jsxs3(MenuItem, { onSelect: () => setMode("transfer"), children: [
+      /* @__PURE__ */ jsx4(SpotlightIcon, { width: 16, height: 16 }),
       " Make host"
     ] }) : null,
-    self ? /* @__PURE__ */ jsxs2(
+    self ? /* @__PURE__ */ jsxs3(
       MenuItem,
       {
         onSelect: () => {
@@ -7757,12 +9413,12 @@ function PersonMenu({
           setMode("rename");
         },
         children: [
-          /* @__PURE__ */ jsx3(PencilIcon, { width: 16, height: 16 }),
+          /* @__PURE__ */ jsx4(PencilIcon, { width: 16, height: 16 }),
           " Rename yourself"
         ]
       }
     ) : null,
-    !self && !participant.isAgent ? /* @__PURE__ */ jsxs2(
+    !self && !participant.isAgent ? /* @__PURE__ */ jsxs3(
       MenuItem,
       {
         onSelect: () => {
@@ -7770,21 +9426,21 @@ function PersonMenu({
           setMode("report");
         },
         children: [
-          /* @__PURE__ */ jsx3(FlagIcon, { width: 16, height: 16 }),
+          /* @__PURE__ */ jsx4(FlagIcon, { width: 16, height: 16 }),
           " Report"
         ]
       }
     ) : null,
-    moderate && !participant.isAgent ? /* @__PURE__ */ jsxs2(MenuItem, { danger: true, onSelect: () => setMode("remove"), children: [
-      /* @__PURE__ */ jsx3(CloseIcon, { width: 16, height: 16 }),
+    moderate && !participant.isAgent ? /* @__PURE__ */ jsxs3(MenuItem, { danger: true, onSelect: () => setMode("remove"), children: [
+      /* @__PURE__ */ jsx4(CloseIcon, { width: 16, height: 16 }),
       " Remove from meeting"
     ] }) : null
   ] }) });
 }
 function SettingsPanel({ onClose }) {
   const host = useRequiredMeetHost();
-  return /* @__PURE__ */ jsxs2(PanelShell, { title: "Audio, video and effects", onClose, children: [
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs3(PanelShell, { title: "Settings", onClose, children: [
+    /* @__PURE__ */ jsx4(
       DeviceSettings,
       {
         onPick: (kind, deviceId2) => {
@@ -7793,7 +9449,8 @@ function SettingsPanel({ onClose }) {
         }
       }
     ),
-    /* @__PURE__ */ jsx3(EffectsSettings, {})
+    /* @__PURE__ */ jsx4(EffectsSettings, {}),
+    /* @__PURE__ */ jsx4(CaptionLanguageSettings, {})
   ] });
 }
 function DeviceSettings({
@@ -7805,15 +9462,15 @@ function DeviceSettings({
   const speaker = devices?.selected.audiooutput ?? host.devices.resolve("audiooutput");
   const stream = useMicrophoneStream(microphone);
   const level = useAudioLevel(stream);
-  const [testing, setTesting] = useState3(false);
-  useEffect3(() => {
+  const [testing, setTesting] = useState4(false);
+  useEffect4(() => {
     void host.devices.refresh();
   }, [host]);
-  return /* @__PURE__ */ jsxs2("section", { className: "mx-meet__section", "aria-label": "Devices", children: [
-    /* @__PURE__ */ jsx3(DevicePicker, { kind: "audioinput", label: "Microphone", onPick }),
-    /* @__PURE__ */ jsx3("div", { className: "mx-meet__meter", role: "meter", "aria-label": "Microphone level", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(level * 100), children: /* @__PURE__ */ jsx3("span", { style: { width: `${Math.min(100, Math.round(level * 160))}%` } }) }),
-    /* @__PURE__ */ jsx3(DevicePicker, { kind: "audiooutput", label: "Speaker", onPick }),
-    /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3("section", { className: "mx-meet__section", "aria-label": "Devices", children: [
+    /* @__PURE__ */ jsx4(DevicePicker, { kind: "audioinput", label: "Microphone", onPick }),
+    /* @__PURE__ */ jsx4("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__ */ jsx4("span", { style: { width: `${Math.min(100, Math.round(level * 160))}%` } }) }),
+    /* @__PURE__ */ jsx4(DevicePicker, { kind: "audiooutput", label: "Speaker", onPick }),
+    /* @__PURE__ */ jsxs3(
       "button",
       {
         type: "button",
@@ -7824,19 +9481,19 @@ function DeviceSettings({
           void playTestSound(speaker).finally(() => setTesting(false));
         },
         children: [
-          /* @__PURE__ */ jsx3(SpeakerIcon, { width: 14, height: 14 }),
+          /* @__PURE__ */ jsx4(SpeakerIcon, { width: 14, height: 14 }),
           " ",
           testing ? "Playing\u2026" : "Test speaker"
         ]
       }
     ),
-    /* @__PURE__ */ jsx3(DevicePicker, { kind: "videoinput", label: "Camera", onPick })
+    /* @__PURE__ */ jsx4(DevicePicker, { kind: "videoinput", label: "Camera", onPick })
   ] });
 }
 function EffectsSettings({ preview }) {
   const effects = useMediaEffects();
-  const [error, setError] = useState3(null);
-  const fileRef = useRef3(null);
+  const [error, setError] = useState4(null);
+  const fileRef = useRef4(null);
   const supported = effects.backgroundsSupported || preview != null || videoEffectsSupported();
   const apply = (next) => {
     setError(null);
@@ -7848,9 +9505,9 @@ function EffectsSettings({ preview }) {
       );
     }
   };
-  return /* @__PURE__ */ jsxs2("section", { className: "mx-meet__section", "aria-label": "Effects", children: [
-    /* @__PURE__ */ jsxs2("label", { className: "mx-meet__toggle", children: [
-      /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs3("section", { className: "mx-meet__section", "aria-label": "Effects", children: [
+    /* @__PURE__ */ jsxs3("label", { className: "mx-meet__toggle", children: [
+      /* @__PURE__ */ jsx4(
         "input",
         {
           type: "checkbox",
@@ -7859,11 +9516,11 @@ function EffectsSettings({ preview }) {
         }
       ),
       "Noise suppression",
-      /* @__PURE__ */ jsx3("span", { className: "mx-meet__hint", children: "Filters keyboards, fans and background chatter." })
+      /* @__PURE__ */ jsx4("span", { className: "mx-meet__hint", children: "Filters keyboards, fans and background chatter." })
     ] }),
-    supported ? /* @__PURE__ */ jsxs2("div", { className: "mx-meet__field", children: [
-      /* @__PURE__ */ jsx3("span", { className: "mx-meet__field-label", children: "Background" }),
-      /* @__PURE__ */ jsx3("div", { className: "mx-meet__pills", role: "radiogroup", "aria-label": "Background", children: ["none", "blur", "image"].map((kind) => /* @__PURE__ */ jsx3(
+    supported ? /* @__PURE__ */ jsxs3("div", { className: "mx-meet__field", children: [
+      /* @__PURE__ */ jsx4("span", { className: "mx-meet__field-label", children: "Background" }),
+      /* @__PURE__ */ jsx4("div", { className: "mx-meet__pills", role: "radiogroup", "aria-label": "Background", children: ["none", "blur", "image"].map((kind) => /* @__PURE__ */ jsx4(
         "button",
         {
           type: "button",
@@ -7881,7 +9538,7 @@ function EffectsSettings({ preview }) {
         },
         kind
       )) }),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(
         "input",
         {
           ref: fileRef,
@@ -7896,7 +9553,7 @@ function EffectsSettings({ preview }) {
           }
         }
       ),
-      error !== null ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__error", children: error }) : null
+      error !== null ? /* @__PURE__ */ jsx4("p", { className: "mx-meet__error", children: error }) : null
     ] }) : null
   ] });
 }
@@ -7955,8 +9612,8 @@ async function playTestSound(sinkId) {
   await context.close();
 }
 function useMicrophoneStream(deviceId2) {
-  const [stream, setStream] = useState3(null);
-  useEffect3(() => {
+  const [stream, setStream] = useState4(null);
+  useEffect4(() => {
     if (deviceId2 === "off") return void 0;
     let live = true;
     let opened = null;
@@ -7981,25 +9638,25 @@ function useMicrophoneStream(deviceId2) {
 function LobbyPanel() {
   const lobby = useLobby();
   if (!lobby.canAdmit || lobby.waiting.length === 0) return null;
-  return /* @__PURE__ */ jsxs2("section", { className: "mx-meet__lobby", "aria-label": "Waiting room", children: [
-    /* @__PURE__ */ jsxs2("header", { className: "mx-meet__lobby-head", children: [
-      /* @__PURE__ */ jsx3("h3", { className: "mx-meet__lobby-title", children: lobby.waiting.length === 1 ? "1 person is waiting" : `${lobby.waiting.length} people are waiting` }),
-      /* @__PURE__ */ jsx3("button", { type: "button", className: "mx-meet__link", onClick: () => void lobby.admitAll(), children: "Admit all" })
+  return /* @__PURE__ */ jsxs3("section", { className: "mx-meet__lobby", "aria-label": "Waiting room", children: [
+    /* @__PURE__ */ jsxs3("header", { className: "mx-meet__lobby-head", children: [
+      /* @__PURE__ */ jsx4("h3", { className: "mx-meet__lobby-title", children: lobby.waiting.length === 1 ? "1 person is waiting" : `${lobby.waiting.length} people are waiting` }),
+      /* @__PURE__ */ jsx4("button", { type: "button", className: "mx-meet__link", onClick: () => void lobby.admitAll(), children: "Admit all" })
     ] }),
-    /* @__PURE__ */ jsx3("ul", { className: "mx-meet__lobby-list", children: lobby.waiting.map((entry) => /* @__PURE__ */ jsxs2("li", { className: "mx-meet__lobby-row", children: [
-      /* @__PURE__ */ jsx3(Avatar, { name: entry.displayName, url: entry.avatarUrl, size: 32 }),
-      /* @__PURE__ */ jsxs2("span", { className: "mx-meet__person-name", children: [
+    /* @__PURE__ */ jsx4("ul", { className: "mx-meet__lobby-list", children: lobby.waiting.map((entry) => /* @__PURE__ */ jsxs3("li", { className: "mx-meet__lobby-row", children: [
+      /* @__PURE__ */ jsx4(Avatar, { name: entry.displayName, url: entry.avatarUrl, size: 32 }),
+      /* @__PURE__ */ jsxs3("span", { className: "mx-meet__person-name", children: [
         entry.displayName,
-        entry.userId === null ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__badge", children: "Guest" }) : null
+        entry.userId === null ? /* @__PURE__ */ jsx4("span", { className: "mx-meet__badge", children: "Guest" }) : null
       ] }),
-      /* @__PURE__ */ jsx3(ControlButton, { label: `Admit ${entry.displayName}`, onClick: () => void lobby.admit(entry), children: /* @__PURE__ */ jsx3(CheckIcon, { width: 16, height: 16 }) }),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(ControlButton, { label: `Admit ${entry.displayName}`, onClick: () => void lobby.admit(entry), children: /* @__PURE__ */ jsx4(CheckIcon, { width: 16, height: 16 }) }),
+      /* @__PURE__ */ jsx4(
         ControlButton,
         {
           label: `Deny ${entry.displayName}`,
           danger: true,
           onClick: () => void lobby.deny(entry),
-          children: /* @__PURE__ */ jsx3(CloseIcon, { width: 16, height: 16 })
+          children: /* @__PURE__ */ jsx4(CloseIcon, { width: 16, height: 16 })
         }
       )
     ] }, entry.identity)) })
@@ -8009,21 +9666,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__ */ jsxs2("section", { className: "mx-meet__note-taker", "aria-label": "Note-taker", children: [
-    /* @__PURE__ */ jsxs2("p", { className: `mx-meet__note-taker-state mx-meet__note-taker-state--${status.state}`, children: [
-      /* @__PURE__ */ jsx3("span", { className: "mx-meet__note-taker-dot", "aria-hidden": "true" }),
+  return /* @__PURE__ */ jsxs3("section", { className: "mx-meet__note-taker", "aria-label": "Note-taker", children: [
+    /* @__PURE__ */ jsxs3("p", { className: `mx-meet__note-taker-state mx-meet__note-taker-state--${status.state}`, children: [
+      /* @__PURE__ */ jsx4("span", { className: "mx-meet__note-taker-dot", "aria-hidden": "true" }),
       ai.noteTakerLabel
     ] }),
-    status.detail !== null ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__panel-note", children: status.detail }) : null,
-    status.refusal !== null ? /* @__PURE__ */ jsxs2(ErrorBox, { as: "div", className: "mx-meet__refusal", error: status.refusal, operation: "Join this meeting", origin: "meet/components", children: [
-      /* @__PURE__ */ jsx3("p", { className: "mx-meet__refusal-reason", children: status.refusal.reason }),
-      status.refusal.remedy.length > 0 ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__refusal-remedy", children: status.refusal.remedy }) : null
+    status.detail !== null ? /* @__PURE__ */ jsx4("p", { className: "mx-meet__panel-note", children: status.detail }) : null,
+    status.refusal !== null ? /* @__PURE__ */ jsxs3(ErrorBox, { as: "div", className: "mx-meet__refusal", error: status.refusal, operation: "Join this meeting", origin: "meet/components", children: [
+      /* @__PURE__ */ jsx4("p", { className: "mx-meet__refusal-reason", children: status.refusal.reason }),
+      status.refusal.remedy.length > 0 ? /* @__PURE__ */ jsx4("p", { className: "mx-meet__refusal-remedy", children: status.refusal.remedy }) : null
     ] }) : null,
-    ai.error !== null && !duplicateError ? /* @__PURE__ */ jsxs2(ErrorBox, { as: "div", className: "mx-meet__refusal", error: ai.error, operation: "Run the meeting assistant", origin: "meet/components", children: [
-      /* @__PURE__ */ jsx3("p", { className: "mx-meet__refusal-reason", children: ai.error.message }),
-      /* @__PURE__ */ jsx3("p", { className: "mx-meet__refusal-remedy", children: ai.error.remedy })
+    ai.error !== null && !duplicateError ? /* @__PURE__ */ jsxs3(ErrorBox, { as: "div", className: "mx-meet__refusal", error: ai.error, operation: "Run the meeting assistant", origin: "meet/components", children: [
+      /* @__PURE__ */ jsx4("p", { className: "mx-meet__refusal-reason", children: ai.error.message }),
+      /* @__PURE__ */ jsx4("p", { className: "mx-meet__refusal-remedy", children: ai.error.remedy })
     ] }) : null,
-    ai.canControlNoteTaker ? status.state === "transcribing" || status.state === "joining" || status.state === "handoff_pending" ? /* @__PURE__ */ jsx3(
+    ai.canControlNoteTaker ? status.state === "transcribing" || status.state === "joining" || status.state === "handoff_pending" ? /* @__PURE__ */ jsx4(
       "button",
       {
         type: "button",
@@ -8031,7 +9688,7 @@ function NoteTakerRow() {
         onClick: () => void ai.stopNoteTaker(),
         children: "Dismiss the note-taker"
       }
-    ) : /* @__PURE__ */ jsx3(
+    ) : /* @__PURE__ */ jsx4(
       "button",
       {
         type: "button",
@@ -8047,24 +9704,24 @@ function NoteList({
   notes,
   empty
 }) {
-  return /* @__PURE__ */ jsxs2("section", { className: "mx-meet__note-group", "aria-label": title, children: [
-    /* @__PURE__ */ jsx3("h3", { className: "mx-meet__note-group-title", children: title }),
-    notes.length === 0 ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__panel-note", children: empty }) : /* @__PURE__ */ jsx3("ul", { className: "mx-meet__notes", children: notes.map((note) => /* @__PURE__ */ jsxs2("li", { className: "mx-meet__note", children: [
+  return /* @__PURE__ */ jsxs3("section", { className: "mx-meet__note-group", "aria-label": title, children: [
+    /* @__PURE__ */ jsx4("h3", { className: "mx-meet__note-group-title", children: title }),
+    notes.length === 0 ? /* @__PURE__ */ jsx4("p", { className: "mx-meet__panel-note", children: empty }) : /* @__PURE__ */ jsx4("ul", { className: "mx-meet__notes", children: notes.map((note) => /* @__PURE__ */ jsxs3("li", { className: "mx-meet__note", children: [
       note.text,
-      note.assigneeDisplayName !== void 0 && note.assigneeDisplayName !== null ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__assignee", children: note.assigneeDisplayName }) : null
+      note.assigneeDisplayName !== void 0 && note.assigneeDisplayName !== null ? /* @__PURE__ */ jsx4("span", { className: "mx-meet__assignee", children: note.assigneeDisplayName }) : null
     ] }, note.id)) })
   ] });
 }
 function AiPanel({ onClose }) {
   const ai = useMeetAi();
-  const [question, setQuestion] = useState3("");
-  return /* @__PURE__ */ jsxs2(PanelShell, { title: "Meeting assistant", onClose, children: [
-    /* @__PURE__ */ jsx3(NoteTakerRow, {}),
-    ai.summary !== null ? /* @__PURE__ */ jsxs2("section", { className: "mx-meet__note-group", "aria-label": "Summary", children: [
-      /* @__PURE__ */ jsx3("h3", { className: "mx-meet__note-group-title", children: "Summary" }),
-      /* @__PURE__ */ jsx3("p", { className: "mx-meet__summary", children: ai.summary.text })
+  const [question, setQuestion] = useState4("");
+  return /* @__PURE__ */ jsxs3(PanelShell, { title: "Meeting assistant", onClose, children: [
+    /* @__PURE__ */ jsx4(NoteTakerRow, {}),
+    ai.summary !== null ? /* @__PURE__ */ jsxs3("section", { className: "mx-meet__note-group", "aria-label": "Summary", children: [
+      /* @__PURE__ */ jsx4("h3", { className: "mx-meet__note-group-title", children: "Summary" }),
+      /* @__PURE__ */ jsx4("p", { className: "mx-meet__summary", children: ai.summary.text })
     ] }) : null,
-    ai.wrapUp !== null ? /* @__PURE__ */ jsxs2("p", { className: "mx-meet__wrap-up-notice", role: "status", children: [
+    ai.wrapUp !== null ? /* @__PURE__ */ jsxs3("p", { className: "mx-meet__wrap-up-notice", role: "status", children: [
       "The wrap-up is written \u2014 ",
       ai.wrapUp.noteIds.length,
       " ",
@@ -8076,7 +9733,7 @@ function AiPanel({ onClose }) {
       ai.wrapUp.segmentCount === 1 ? "transcript line" : "transcript lines",
       "."
     ] }) : null,
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4(
       NoteList,
       {
         title: "Notes",
@@ -8084,7 +9741,7 @@ function AiPanel({ onClose }) {
         empty: "Notes appear here as the meeting goes on."
       }
     ),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4(
       NoteList,
       {
         title: "Decisions",
@@ -8092,7 +9749,7 @@ function AiPanel({ onClose }) {
         empty: "Nothing has been decided yet."
       }
     ),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4(
       NoteList,
       {
         title: "Action items",
@@ -8100,21 +9757,21 @@ function AiPanel({ onClose }) {
         empty: "No action items yet."
       }
     ),
-    ai.transcript.length > 0 ? /* @__PURE__ */ jsxs2("section", { className: "mx-meet__note-group", "aria-label": "Transcript", children: [
-      /* @__PURE__ */ jsx3("h3", { className: "mx-meet__note-group-title", children: "Transcript" }),
-      /* @__PURE__ */ jsx3("ul", { className: "mx-meet__transcript", children: ai.transcript.map((line) => /* @__PURE__ */ jsxs2(
+    ai.transcript.length > 0 ? /* @__PURE__ */ jsxs3("section", { className: "mx-meet__note-group", "aria-label": "Transcript", children: [
+      /* @__PURE__ */ jsx4("h3", { className: "mx-meet__note-group-title", children: "Transcript" }),
+      /* @__PURE__ */ jsx4("ul", { className: "mx-meet__transcript", children: ai.transcript.map((line) => /* @__PURE__ */ jsxs3(
         "li",
         {
           className: line.final && line.source === "record" ? "mx-meet__line" : "mx-meet__line mx-meet__line--interim",
           children: [
-            /* @__PURE__ */ jsx3("strong", { children: line.speaker }),
-            /* @__PURE__ */ jsx3("span", { children: line.text })
+            /* @__PURE__ */ jsx4("strong", { children: line.speaker }),
+            /* @__PURE__ */ jsx4("span", { children: line.text })
           ]
         },
         line.id
       )) })
     ] }) : null,
-    /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsxs3(
       "form",
       {
         className: "mx-meet__composer",
@@ -8125,7 +9782,7 @@ function AiPanel({ onClose }) {
           void ai.ask(asked);
         },
         children: [
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4(
             "input",
             {
               className: "mx-meet__input",
@@ -8135,13 +9792,13 @@ function AiPanel({ onClose }) {
               "aria-label": "Ask about this meeting"
             }
           ),
-          /* @__PURE__ */ jsx3("button", { type: "submit", className: "mx-meet__send", disabled: ai.asking, children: ai.asking ? "Asking\u2026" : "Ask" })
+          /* @__PURE__ */ jsx4("button", { type: "submit", className: "mx-meet__send", disabled: ai.asking, children: ai.asking ? "Asking\u2026" : "Ask" })
         ]
       }
     ),
-    ai.asking && ai.phase !== null ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__panel-note", role: "status", children: ai.phase }) : null,
-    ai.answer !== null ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__answer", children: ai.answer }) : null,
-    ai.answer !== null && ai.coverage !== null ? /* @__PURE__ */ jsxs2("p", { className: "mx-meet__coverage", children: [
+    ai.asking && ai.phase !== null ? /* @__PURE__ */ jsx4("p", { className: "mx-meet__panel-note", role: "status", children: ai.phase }) : null,
+    ai.answer !== null ? /* @__PURE__ */ jsx4("p", { className: "mx-meet__answer", children: ai.answer }) : null,
+    ai.answer !== null && ai.coverage !== null ? /* @__PURE__ */ jsxs3("p", { className: "mx-meet__coverage", children: [
       "Answered from ",
       ai.coverage.segmentsUsed,
       " of ",
@@ -8150,48 +9807,56 @@ function AiPanel({ onClose }) {
       ai.coverage.truncated ? " (the oldest were left out)" : "",
       "."
     ] }) : null,
-    ai.error !== null ? /* @__PURE__ */ jsxs2(ErrorBox, { as: "div", className: "mx-meet__refusal", error: ai.error, operation: "Run the meeting assistant", origin: "meet/components", children: [
-      /* @__PURE__ */ jsx3("p", { className: "mx-meet__refusal-reason", children: ai.error.message }),
-      /* @__PURE__ */ jsx3("p", { className: "mx-meet__refusal-remedy", children: ai.error.remedy })
+    ai.error !== null ? /* @__PURE__ */ jsxs3(ErrorBox, { as: "div", className: "mx-meet__refusal", error: ai.error, operation: "Run the meeting assistant", origin: "meet/components", children: [
+      /* @__PURE__ */ jsx4("p", { className: "mx-meet__refusal-reason", children: ai.error.message }),
+      /* @__PURE__ */ jsx4("p", { className: "mx-meet__refusal-remedy", children: ai.error.remedy })
     ] }) : null
   ] });
 }
 function Captions({ lines = 3 }) {
   const ai = useMeetAi();
   const visible = ai.transcript.slice(-lines);
+  const translation = useCaptionTranslation(visible);
   if (visible.length === 0) return null;
-  return /* @__PURE__ */ jsx3("div", { className: "mx-meet__captions", "aria-live": "polite", "aria-label": "Live captions", children: visible.map((line) => /* @__PURE__ */ jsxs2(
-    "p",
-    {
-      className: line.final ? "mx-meet__caption" : "mx-meet__caption mx-meet__caption--interim",
-      children: [
-        /* @__PURE__ */ jsx3("strong", { children: line.speaker }),
-        " ",
-        line.text
-      ]
-    },
-    line.id
-  )) });
+  return /* @__PURE__ */ jsxs3("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__ */ jsxs3(
+        "p",
+        {
+          className: line.final ? "mx-meet__caption" : "mx-meet__caption mx-meet__caption--interim",
+          children: [
+            /* @__PURE__ */ jsx4("strong", { children: line.speaker }),
+            " ",
+            translated ?? line.text,
+            translated !== void 0 ? /* @__PURE__ */ jsx4("span", { className: "mx-meet__caption-original", children: line.text }) : null
+          ]
+        },
+        line.id
+      );
+    }),
+    translation.language !== null && translation.error !== null ? /* @__PURE__ */ jsx4("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__ */ jsx3("p", { className: "mx-meet__consent", role: "status", children: notice });
+  return /* @__PURE__ */ jsx4("p", { className: "mx-meet__consent", role: "status", children: notice });
 }
 function AttendanceNotice() {
   const media = useLocalMedia();
   const notice = listenOnlyNotice(media);
   if (notice === null) return null;
   const refused = media.microphone.unavailable;
-  return /* @__PURE__ */ jsxs2("p", { className: "mx-meet__banner mx-meet__banner--attendance", role: "status", children: [
+  return /* @__PURE__ */ jsxs3("p", { className: "mx-meet__banner mx-meet__banner--attendance", role: "status", children: [
     notice,
-    refused === null ? null : /* @__PURE__ */ jsx3("span", { className: "mx-meet__remedy", children: refused.remedy })
+    refused === null ? null : /* @__PURE__ */ jsx4("span", { className: "mx-meet__remedy", children: refused.remedy })
   ] });
 }
 function PreJoin(props) {
   const host = useMeetHost();
-  if (host === null) return /* @__PURE__ */ jsx3(InertNotice, { what: "This meeting" });
-  return /* @__PURE__ */ jsx3(PreJoinBody, { ...props, host });
+  if (host === null) return /* @__PURE__ */ jsx4(InertNotice, { what: "This meeting" });
+  return /* @__PURE__ */ jsx4(PreJoinBody, { ...props, host });
 }
 function PreJoinBody({
   roomName,
@@ -8205,21 +9870,21 @@ function PreJoinBody({
   const recording = useRecording();
   const effects = useMediaEffects();
   const { notice } = useModerationNotice();
-  const [mode, setMode] = useState3("video");
-  const [microphone, setMicrophone] = useState3(true);
-  const [joining, setJoining] = useState3(false);
+  const [mode, setMode] = useState4("video");
+  const [microphone, setMicrophone] = useState4(true);
+  const [joining, setJoining] = useState4(false);
   const camera = devices?.selected.videoinput ?? host.devices.resolve("videoinput");
   const mic = devices?.selected.audioinput ?? host.devices.resolve("audioinput");
   const preview = useCameraPreview(mode === "video" ? camera : void 0, effects.effects);
   const micStream = useMicrophoneStream(microphone ? mic : "off");
   const level = useAudioLevel(micStream);
-  const [speakerTesting, setSpeakerTesting] = useState3(false);
-  useEffect3(() => {
+  const [speakerTesting, setSpeakerTesting] = useState4(false);
+  useEffect4(() => {
     void host.devices.refresh();
   }, [host]);
-  return /* @__PURE__ */ jsxs2("div", { className: "mx-meet__prejoin", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "mx-meet__preview", children: [
-      mode === "video" && preview.preview !== null ? /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs3("div", { className: "mx-meet__prejoin", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "mx-meet__preview", children: [
+      mode === "video" && preview.preview !== null ? /* @__PURE__ */ jsx4(
         "video",
         {
           className: "mx-meet__video mx-meet__video--mirror",
@@ -8230,16 +9895,16 @@ function PreJoinBody({
             if (element !== null) preview.preview?.attach(element);
           }
         }
-      ) : /* @__PURE__ */ jsx3("div", { className: "mx-meet__tile-placeholder", children: /* @__PURE__ */ jsx3(Avatar, { name: host.identity.displayName, url: host.identity.avatarUrl, size: 96 }) }),
-      mode === "video" && preview.error !== null ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__preview-note", children: preview.error }) : null,
-      microphone && micStream !== null ? /* @__PURE__ */ jsx3("div", { className: "mx-meet__meter mx-meet__meter--preview", role: "meter", "aria-label": "Microphone level", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(level * 100), children: /* @__PURE__ */ jsx3("span", { style: { width: `${Math.min(100, Math.round(level * 160))}%` } }) }) : null
+      ) : /* @__PURE__ */ jsx4("div", { className: "mx-meet__tile-placeholder", children: /* @__PURE__ */ jsx4(Avatar, { name: host.identity.displayName, url: host.identity.avatarUrl, size: 96 }) }),
+      mode === "video" && preview.error !== null ? /* @__PURE__ */ jsx4("p", { className: "mx-meet__preview-note", children: preview.error }) : null,
+      microphone && micStream !== null ? /* @__PURE__ */ jsx4("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__ */ jsx4("span", { style: { width: `${Math.min(100, Math.round(level * 160))}%` } }) }) : null
     ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "mx-meet__prejoin-panel", children: [
-      /* @__PURE__ */ jsx3("h1", { className: "mx-meet__prejoin-title", children: "Ready to join?" }),
-      notice?.kind === "removed" ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__warning", children: notice.text }) : null,
-      devices?.labelsHidden === true ? /* @__PURE__ */ jsxs2("p", { className: "mx-meet__panel-note", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "mx-meet__prejoin-panel", children: [
+      /* @__PURE__ */ jsx4("h1", { className: "mx-meet__prejoin-title", children: "Ready to join?" }),
+      notice?.kind === "removed" ? /* @__PURE__ */ jsx4("p", { className: "mx-meet__warning", children: notice.text }) : null,
+      devices?.labelsHidden === true ? /* @__PURE__ */ jsxs3("p", { className: "mx-meet__panel-note", children: [
         "Your browser is hiding device names until you allow camera and microphone access.",
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "button",
           {
             type: "button",
@@ -8251,11 +9916,11 @@ function PreJoinBody({
           }
         )
       ] }) : null,
-      devices?.fallbackNotice != null ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__warning", children: devices.fallbackNotice }) : null,
-      /* @__PURE__ */ jsx3(DevicePicker, { kind: "audioinput", label: "Microphone" }),
-      /* @__PURE__ */ jsxs2("div", { className: "mx-meet__field-row", children: [
-        /* @__PURE__ */ jsx3(DevicePicker, { kind: "audiooutput", label: "Speaker" }),
-        /* @__PURE__ */ jsxs2(
+      devices?.fallbackNotice != null ? /* @__PURE__ */ jsx4("p", { className: "mx-meet__warning", children: devices.fallbackNotice }) : null,
+      /* @__PURE__ */ jsx4(DevicePicker, { kind: "audioinput", label: "Microphone" }),
+      /* @__PURE__ */ jsxs3("div", { className: "mx-meet__field-row", children: [
+        /* @__PURE__ */ jsx4(DevicePicker, { kind: "audiooutput", label: "Speaker" }),
+        /* @__PURE__ */ jsxs3(
           "button",
           {
             type: "button",
@@ -8268,19 +9933,19 @@ function PreJoinBody({
               );
             },
             children: [
-              /* @__PURE__ */ jsx3(SpeakerIcon, { width: 14, height: 14 }),
+              /* @__PURE__ */ jsx4(SpeakerIcon, { width: 14, height: 14 }),
               " ",
               speakerTesting ? "Playing\u2026" : "Test"
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ jsx3(DevicePicker, { kind: "videoinput", label: "Camera" }),
-      /* @__PURE__ */ jsx3(EffectsSettings, { preview: preview.preview }),
-      recording.consentNotice !== null ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__consent", children: recording.consentNotice }) : null,
-      /* @__PURE__ */ jsxs2("div", { className: "mx-meet__prejoin-actions", children: [
-        /* @__PURE__ */ jsxs2("label", { className: "mx-meet__toggle", children: [
-          /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(DevicePicker, { kind: "videoinput", label: "Camera" }),
+      /* @__PURE__ */ jsx4(EffectsSettings, { preview: preview.preview }),
+      recording.consentNotice !== null ? /* @__PURE__ */ jsx4("p", { className: "mx-meet__consent", children: recording.consentNotice }) : null,
+      /* @__PURE__ */ jsxs3("div", { className: "mx-meet__prejoin-actions", children: [
+        /* @__PURE__ */ jsxs3("label", { className: "mx-meet__toggle", children: [
+          /* @__PURE__ */ jsx4(
             "input",
             {
               type: "checkbox",
@@ -8290,8 +9955,8 @@ function PreJoinBody({
           ),
           "Join with video"
         ] }),
-        /* @__PURE__ */ jsxs2("label", { className: "mx-meet__toggle", children: [
-          /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsxs3("label", { className: "mx-meet__toggle", children: [
+          /* @__PURE__ */ jsx4(
             "input",
             {
               type: "checkbox",
@@ -8301,7 +9966,7 @@ function PreJoinBody({
           ),
           "Join with microphone"
         ] }),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "button",
           {
             type: "button",
@@ -8321,20 +9986,20 @@ function PreJoinBody({
           }
         )
       ] }),
-      room.failure !== null ? /* @__PURE__ */ jsxs2("p", { className: "mx-meet__error", children: [
+      room.failure !== null ? /* @__PURE__ */ jsxs3("p", { className: "mx-meet__error", children: [
         room.failure.message,
-        /* @__PURE__ */ jsx3("span", { className: "mx-meet__remedy", children: room.failure.remedy })
+        /* @__PURE__ */ jsx4("span", { className: "mx-meet__remedy", children: room.failure.remedy })
       ] }) : null
     ] })
   ] });
 }
 function useCameraPreview(deviceId2, effects) {
-  const [preview, setPreview] = useState3(null);
-  const [error, setError] = useState3(null);
-  const current = useRef3(null);
-  const initialEffect = useRef3(toVideoEffect(effects));
+  const [preview, setPreview] = useState4(null);
+  const [error, setError] = useState4(null);
+  const current = useRef4(null);
+  const initialEffect = useRef4(toVideoEffect(effects));
   initialEffect.current = toVideoEffect(effects);
-  useEffect3(() => {
+  useEffect4(() => {
     if (deviceId2 === void 0) return void 0;
     let live = true;
     setError(null);
@@ -8378,9 +10043,9 @@ function DevicePicker({
   const devices = useDeviceSnapshot();
   const list = devices?.devices[kind] ?? [];
   if (list.length === 0) return null;
-  return /* @__PURE__ */ jsxs2("label", { className: "mx-meet__field", children: [
-    /* @__PURE__ */ jsx3("span", { className: "mx-meet__field-label", children: label }),
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs3("label", { className: "mx-meet__field", children: [
+    /* @__PURE__ */ jsx4("span", { className: "mx-meet__field-label", children: label }),
+    /* @__PURE__ */ jsx4(
       "select",
       {
         className: "mx-meet__select",
@@ -8389,7 +10054,7 @@ function DevicePicker({
           if (onPick !== void 0) onPick(kind, event.target.value);
           else host.devices.select(kind, event.target.value);
         },
-        children: list.map((device) => /* @__PURE__ */ jsx3("option", { value: device.deviceId, children: device.label.length > 0 ? device.label : `${label} (name hidden)` }, device.deviceId))
+        children: list.map((device) => /* @__PURE__ */ jsx4("option", { value: device.deviceId, children: device.label.length > 0 ? device.label : `${label} (name hidden)` }, device.deviceId))
       }
     )
   ] });
@@ -8397,9 +10062,9 @@ function DevicePicker({
 function MeetingRoom(props) {
   const host = useMeetHost();
   if (host === null) {
-    return /* @__PURE__ */ jsx3("div", { className: "mx-meet", children: /* @__PURE__ */ jsx3(InertNotice, { what: "This meeting" }) });
+    return /* @__PURE__ */ jsx4("div", { className: "mx-meet", children: /* @__PURE__ */ jsx4(InertNotice, { what: "This meeting" }) });
   }
-  return /* @__PURE__ */ jsx3(MeetingRoomBody, { ...props, host });
+  return /* @__PURE__ */ jsx4(MeetingRoomBody, { ...props, host });
 }
 function MeetingRoomBody({
   roomName,
@@ -8414,25 +10079,25 @@ function MeetingRoomBody({
   const isHost = useIsHost();
   const elapsed = useElapsed(snapshot?.meeting?.startedAt ?? null);
   const phase = snapshot?.phase ?? "idle";
-  useEffect3(() => {
+  useEffect4(() => {
     host.meetings.watch(roomName);
   }, [host, roomName]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (given === void 0) return;
     if (host.store.snapshot().meeting !== null) return;
     host.store.patch({ meeting: given, locked: given.locked });
   }, [host, given]);
   const watchedId = meetingId ?? snapshot?.meeting?.id ?? null;
-  useEffect3(() => {
+  useEffect4(() => {
     if (watchedId === null) return;
     host.meetings.watchMeeting(asMeetingId(watchedId));
   }, [host, watchedId]);
   const record = snapshot?.meeting ?? given ?? null;
   if (hasEnded(record) && phase !== "connected" && phase !== "reconnecting") {
-    return /* @__PURE__ */ jsx3(MeetingRecordView, { meeting: record });
+    return /* @__PURE__ */ jsx4(MeetingRecordView, { meeting: record });
   }
   if (phase === "idle" || phase === "failed" || phase === "left") {
-    return /* @__PURE__ */ jsx3("div", { className: "mx-meet", children: /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx4("div", { className: "mx-meet", children: /* @__PURE__ */ jsx4(
       PreJoin,
       {
         roomName,
@@ -8442,42 +10107,42 @@ function MeetingRoomBody({
     ) });
   }
   if (phase === "lobby") {
-    return /* @__PURE__ */ jsx3("div", { className: "mx-meet mx-meet--lobby", children: /* @__PURE__ */ jsx3(WaitingRoom, { roomName, host }) });
-  }
-  return /* @__PURE__ */ jsxs2("div", { className: "mx-meet", children: [
-    /* @__PURE__ */ jsx3(ConsentNotice, {}),
-    /* @__PURE__ */ jsx3(AttendanceNotice, {}),
-    /* @__PURE__ */ jsxs2("header", { className: "mx-meet__header", children: [
-      /* @__PURE__ */ jsx3("h1", { className: "mx-meet__title", children: snapshot?.meeting?.title ?? "Meeting" }),
-      /* @__PURE__ */ jsxs2("span", { className: "mx-meet__meta", children: [
+    return /* @__PURE__ */ jsx4("div", { className: "mx-meet mx-meet--lobby", children: /* @__PURE__ */ jsx4(WaitingRoom, { roomName, host }) });
+  }
+  return /* @__PURE__ */ jsxs3("div", { className: "mx-meet", children: [
+    /* @__PURE__ */ jsx4(ConsentNotice, {}),
+    /* @__PURE__ */ jsx4(AttendanceNotice, {}),
+    /* @__PURE__ */ jsxs3("header", { className: "mx-meet__header", children: [
+      /* @__PURE__ */ jsx4("h1", { className: "mx-meet__title", children: snapshot?.meeting?.title ?? "Meeting" }),
+      /* @__PURE__ */ jsxs3("span", { className: "mx-meet__meta", children: [
         participantSummary(snapshot?.participants ?? []),
         elapsed > 0 ? ` \xB7 ${formatDurationMs3(elapsed)}` : ""
       ] }),
-      /* @__PURE__ */ jsx3(RecordingIndicator, {}),
-      snapshot?.locked === true ? /* @__PURE__ */ jsxs2("span", { className: "mx-meet__badge", children: [
-        /* @__PURE__ */ jsx3(LockIcon, { width: 12, height: 12 }),
+      /* @__PURE__ */ jsx4(RecordingIndicator, {}),
+      snapshot?.locked === true ? /* @__PURE__ */ jsxs3("span", { className: "mx-meet__badge", children: [
+        /* @__PURE__ */ jsx4(LockIcon, { width: 12, height: 12 }),
         " Locked"
       ] }) : null,
-      headerControls !== void 0 && headerControls !== null ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__header-controls", "data-meet-header-controls": "", children: headerControls }) : null,
-      isHost ? /* @__PURE__ */ jsx3(HostMenu, {}) : null
+      headerControls !== void 0 && headerControls !== null ? /* @__PURE__ */ jsx4("span", { className: "mx-meet__header-controls", "data-meet-header-controls": "", children: headerControls }) : null,
+      isHost ? /* @__PURE__ */ jsx4(HostMenu, {}) : null
     ] }),
-    phase === "reconnecting" ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__banner", role: "status", children: "Reconnecting\u2026" }) : null,
-    /* @__PURE__ */ jsx3(Stage, {}),
-    /* @__PURE__ */ jsx3(Captions, {}),
-    /* @__PURE__ */ jsx3(ControlBar, { ...onLeave !== void 0 ? { onLeave } : {} })
+    phase === "reconnecting" ? /* @__PURE__ */ jsx4("p", { className: "mx-meet__banner", role: "status", children: "Reconnecting\u2026" }) : null,
+    /* @__PURE__ */ jsx4(Stage, {}),
+    /* @__PURE__ */ jsx4(Captions, {}),
+    /* @__PURE__ */ jsx4(ControlBar, { ...onLeave !== void 0 ? { onLeave } : {} })
   ] });
 }
 function WaitingRoom({ roomName, host }) {
-  const knocked = useRef3(false);
-  useEffect3(() => {
+  const knocked = useRef4(false);
+  useEffect4(() => {
     if (knocked.current) return;
     knocked.current = true;
     host.meetings.knock(roomName);
   }, [host, roomName]);
-  return /* @__PURE__ */ jsxs2("div", { className: "mx-meet__waiting", children: [
-    /* @__PURE__ */ jsx3(Avatar, { name: host.identity.displayName, url: host.identity.avatarUrl, size: 72 }),
-    /* @__PURE__ */ jsx3("h1", { className: "mx-meet__prejoin-title", children: "Waiting for the host to let you in" }),
-    /* @__PURE__ */ jsxs2("p", { className: "mx-meet__empty-body", children: [
+  return /* @__PURE__ */ jsxs3("div", { className: "mx-meet__waiting", children: [
+    /* @__PURE__ */ jsx4(Avatar, { name: host.identity.displayName, url: host.identity.avatarUrl, size: 72 }),
+    /* @__PURE__ */ jsx4("h1", { className: "mx-meet__prejoin-title", children: "Waiting for the host to let you in" }),
+    /* @__PURE__ */ jsxs3("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."
@@ -8488,10 +10153,10 @@ function HostMenu() {
   const host = useRequiredMeetHost();
   const snapshot = useMeetSnapshot();
   const end = useEndMeeting();
-  const [confirmingEnd, setConfirmingEnd] = useState3(false);
+  const [confirmingEnd, setConfirmingEnd] = useState4(false);
   const locked = snapshot?.locked === true;
-  return /* @__PURE__ */ jsxs2("div", { className: "mx-meet__host-menu", children: [
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs3("div", { className: "mx-meet__host-menu", children: [
+    /* @__PURE__ */ jsx4(
       "button",
       {
         type: "button",
@@ -8502,9 +10167,9 @@ function HostMenu() {
         children: locked ? "Unlock meeting" : "Lock meeting"
       }
     ),
-    end.canEnd ? confirmingEnd ? /* @__PURE__ */ jsxs2("span", { className: "mx-meet__confirm", role: "group", "aria-label": "End this meeting?", children: [
-      /* @__PURE__ */ jsx3("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__ */ jsx3(
+    end.canEnd ? confirmingEnd ? /* @__PURE__ */ jsxs3("span", { className: "mx-meet__confirm", role: "group", "aria-label": "End this meeting?", children: [
+      /* @__PURE__ */ jsx4("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__ */ jsx4(
         "button",
         {
           type: "button",
@@ -8516,7 +10181,7 @@ function HostMenu() {
           children: "End it"
         }
       ),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(
         "button",
         {
           type: "button",
@@ -8525,7 +10190,7 @@ function HostMenu() {
           children: "Keep it running"
         }
       )
-    ] }) : /* @__PURE__ */ jsx3(
+    ] }) : /* @__PURE__ */ jsx4(
       "button",
       {
         type: "button",
@@ -8534,7 +10199,7 @@ function HostMenu() {
         children: end.ending ? "Ending\u2026" : "End meeting for everyone"
       }
     ) : null,
-    end.notice !== null ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__notice", role: "status", children: end.notice }) : null
+    end.notice !== null ? /* @__PURE__ */ jsx4("span", { className: "mx-meet__notice", role: "status", children: end.notice }) : null
   ] });
 }
 function CallButton({
@@ -8544,7 +10209,7 @@ function CallButton({
 }) {
   const calls = useCalls();
   if (!calls.canCall) return null;
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "button",
     {
       type: "button",
@@ -8553,55 +10218,55 @@ function CallButton({
         void calls.call([person.userId], mode);
       },
       "aria-label": `Call ${person.displayName}`,
-      children: children ?? /* @__PURE__ */ jsx3(PhoneIcon, { width: 18, height: 18 })
+      children: children ?? /* @__PURE__ */ jsx4(PhoneIcon, { width: 18, height: 18 })
     }
   );
 }
 function IncomingCallHost() {
   const calls = useCalls();
   if (calls.incoming.length === 0) return null;
-  return /* @__PURE__ */ jsx3("div", { className: "mx-meet__ringing-stack", children: calls.incoming.map((invite) => /* @__PURE__ */ jsx3(IncomingCallCard, { invite }, invite.id)) });
+  return /* @__PURE__ */ jsx4("div", { className: "mx-meet__ringing-stack", children: calls.incoming.map((invite) => /* @__PURE__ */ jsx4(IncomingCallCard, { invite }, invite.id)) });
 }
 function IncomingCallCard({ invite }) {
   const calls = useCalls();
-  return /* @__PURE__ */ jsxs2("section", { className: "mx-meet__ringing", role: "alertdialog", "aria-label": "Incoming call", children: [
-    /* @__PURE__ */ jsx3(Avatar, { name: invite.callerName, url: invite.callerAvatarUrl, size: 56 }),
-    /* @__PURE__ */ jsxs2("div", { className: "mx-meet__ringing-text", children: [
-      /* @__PURE__ */ jsx3("strong", { children: invite.callerName }),
-      /* @__PURE__ */ jsx3("span", { children: invite.mode === "video" ? "Incoming video call" : "Incoming call" })
+  return /* @__PURE__ */ jsxs3("section", { className: "mx-meet__ringing", role: "alertdialog", "aria-label": "Incoming call", children: [
+    /* @__PURE__ */ jsx4(Avatar, { name: invite.callerName, url: invite.callerAvatarUrl, size: 56 }),
+    /* @__PURE__ */ jsxs3("div", { className: "mx-meet__ringing-text", children: [
+      /* @__PURE__ */ jsx4("strong", { children: invite.callerName }),
+      /* @__PURE__ */ jsx4("span", { children: invite.mode === "video" ? "Incoming video call" : "Incoming call" })
     ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "mx-meet__ringing-actions", children: [
-      /* @__PURE__ */ jsx3(ControlButton, { label: "Decline", danger: true, onClick: () => void calls.decline(invite), children: /* @__PURE__ */ jsx3(PhoneOffIcon, {}) }),
-      invite.mode === "video" ? /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsxs3("div", { className: "mx-meet__ringing-actions", children: [
+      /* @__PURE__ */ jsx4(ControlButton, { label: "Decline", danger: true, onClick: () => void calls.decline(invite), children: /* @__PURE__ */ jsx4(PhoneOffIcon, {}) }),
+      invite.mode === "video" ? /* @__PURE__ */ jsx4(
         ControlButton,
         {
           label: "Accept without video",
           onClick: () => void calls.accept({ ...invite, mode: "audio" }),
-          children: /* @__PURE__ */ jsx3(CameraOffIcon, {})
+          children: /* @__PURE__ */ jsx4(CameraOffIcon, {})
         }
       ) : null,
-      /* @__PURE__ */ jsx3(ControlButton, { label: "Accept", onClick: () => void calls.accept(invite), children: /* @__PURE__ */ jsx3(PhoneIcon, {}) })
+      /* @__PURE__ */ jsx4(ControlButton, { label: "Accept", onClick: () => void calls.accept(invite), children: /* @__PURE__ */ jsx4(PhoneIcon, {}) })
     ] })
   ] });
 }
 function ScheduleMeeting(props) {
   const host = useMeetHost();
-  if (host === null) return /* @__PURE__ */ jsx3(InertNotice, { what: "Scheduling a meeting" });
-  return /* @__PURE__ */ jsx3(ScheduleMeetingBody, { ...props, host });
+  if (host === null) return /* @__PURE__ */ jsx4(InertNotice, { what: "Scheduling a meeting" });
+  return /* @__PURE__ */ jsx4(ScheduleMeetingBody, { ...props, host });
 }
 function ScheduleMeetingBody({
   appBaseUrl,
   onScheduled,
   host
 }) {
-  const [title, setTitle] = useState3("");
-  const [when2, setWhen] = useState3("");
-  const [kind, setKind] = useState3("scheduled");
-  const [busy, setBusy] = useState3(false);
-  const [link, setLink] = useState3(null);
-  const [error, setError] = useState3(null);
+  const [title, setTitle] = useState4("");
+  const [when2, setWhen] = useState4("");
+  const [kind, setKind] = useState4("scheduled");
+  const [busy, setBusy] = useState4(false);
+  const [link, setLink] = useState4(null);
+  const [error, setError] = useState4(null);
   const disabled = useMemo3(() => title.trim().length === 0 || busy, [title, busy]);
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "form",
     {
       className: "mx-meet__schedule",
@@ -8626,9 +10291,9 @@ function ScheduleMeetingBody({
         }).finally(() => setBusy(false));
       },
       children: [
-        /* @__PURE__ */ jsxs2("label", { className: "mx-meet__field", children: [
-          /* @__PURE__ */ jsx3("span", { className: "mx-meet__field-label", children: "Title" }),
-          /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsxs3("label", { className: "mx-meet__field", children: [
+          /* @__PURE__ */ jsx4("span", { className: "mx-meet__field-label", children: "Title" }),
+          /* @__PURE__ */ jsx4(
             "input",
             {
               className: "mx-meet__input",
@@ -8638,9 +10303,9 @@ function ScheduleMeetingBody({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs2("label", { className: "mx-meet__field", children: [
-          /* @__PURE__ */ jsx3("span", { className: "mx-meet__field-label", children: "When" }),
-          /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsxs3("label", { className: "mx-meet__field", children: [
+          /* @__PURE__ */ jsx4("span", { className: "mx-meet__field-label", children: "When" }),
+          /* @__PURE__ */ jsx4(
             "input",
             {
               className: "mx-meet__input",
@@ -8650,27 +10315,27 @@ function ScheduleMeetingBody({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs2("label", { className: "mx-meet__field", children: [
-          /* @__PURE__ */ jsx3("span", { className: "mx-meet__field-label", children: "Repeats" }),
-          /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ jsxs3("label", { className: "mx-meet__field", children: [
+          /* @__PURE__ */ jsx4("span", { className: "mx-meet__field-label", children: "Repeats" }),
+          /* @__PURE__ */ jsxs3(
             "select",
             {
               className: "mx-meet__select",
               value: kind,
               onChange: (event) => setKind(event.target.value),
               children: [
-                /* @__PURE__ */ jsx3("option", { value: "scheduled", children: "Once" }),
-                /* @__PURE__ */ jsx3("option", { value: "recurring", children: "Recurring \u2014 one link, every time" })
+                /* @__PURE__ */ jsx4("option", { value: "scheduled", children: "Once" }),
+                /* @__PURE__ */ jsx4("option", { value: "recurring", children: "Recurring \u2014 one link, every time" })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsx3("button", { type: "submit", className: "mx-meet__primary", disabled, children: busy ? "Creating\u2026" : "Create meeting" }),
-        link !== null ? /* @__PURE__ */ jsxs2("p", { className: "mx-meet__link-out", children: [
-          /* @__PURE__ */ jsx3("span", { children: "Anyone with this link can join \u2014 no account needed." }),
-          /* @__PURE__ */ jsx3("code", { children: link })
+        /* @__PURE__ */ jsx4("button", { type: "submit", className: "mx-meet__primary", disabled, children: busy ? "Creating\u2026" : "Create meeting" }),
+        link !== null ? /* @__PURE__ */ jsxs3("p", { className: "mx-meet__link-out", children: [
+          /* @__PURE__ */ jsx4("span", { children: "Anyone with this link can join \u2014 no account needed." }),
+          /* @__PURE__ */ jsx4("code", { children: link })
         ] }) : null,
-        error !== null ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__error", children: error }) : null
+        error !== null ? /* @__PURE__ */ jsx4("p", { className: "mx-meet__error", children: error }) : null
       ]
     }
   );
@@ -8679,7 +10344,7 @@ function ReactionOverlay({
   reactions
 }) {
   if (reactions.length === 0) return null;
-  return /* @__PURE__ */ jsx3("div", { className: "mx-meet__reactions", "aria-hidden": "true", children: reactions.map((reaction) => /* @__PURE__ */ jsx3("span", { className: "mx-meet__reaction", children: reaction.emoji }, reaction.id)) });
+  return /* @__PURE__ */ jsx4("div", { className: "mx-meet__reactions", "aria-hidden": "true", children: reactions.map((reaction) => /* @__PURE__ */ jsx4("span", { className: "mx-meet__reaction", children: reaction.emoji }, reaction.id)) });
 }
 function GuestRecordAccessControl({
   meeting
@@ -8691,11 +10356,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__ */ jsxs2("section", { className: "mx-meet__record-section", "aria-label": "What guests may read", children: [
-    /* @__PURE__ */ jsx3("h2", { className: "mx-meet__record-section-title", children: "What guests may read" }),
-    /* @__PURE__ */ jsxs2("label", { className: "mx-meet__field", children: [
-      /* @__PURE__ */ jsx3("span", { className: "mx-meet__field-label", children: "People who attended by link, without an account" }),
-      /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs3("section", { className: "mx-meet__record-section", "aria-label": "What guests may read", children: [
+    /* @__PURE__ */ jsx4("h2", { className: "mx-meet__record-section-title", children: "What guests may read" }),
+    /* @__PURE__ */ jsxs3("label", { className: "mx-meet__field", children: [
+      /* @__PURE__ */ jsx4("span", { className: "mx-meet__field-label", children: "People who attended by link, without an account" }),
+      /* @__PURE__ */ jsx4(
         "select",
         {
           className: "mx-meet__select",
@@ -8706,18 +10371,18 @@ function GuestRecordAccessControl({
               event.target.value
             );
           },
-          children: GUEST_RECORD_ACCESS_CHOICES.map((choice) => /* @__PURE__ */ jsx3("option", { value: choice, children: guestRecordAccessLabel(choice) }, choice))
+          children: GUEST_RECORD_ACCESS_CHOICES.map((choice) => /* @__PURE__ */ jsx4("option", { value: choice, children: guestRecordAccessLabel(choice) }, choice))
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs2("p", { className: "mx-meet__panel-note", children: [
+    /* @__PURE__ */ jsxs3("p", { className: "mx-meet__panel-note", children: [
       guestRecordAccessExplanation(access.setting),
       resolved
     ] }),
-    access.saving ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__panel-note", role: "status", children: "Saving what guests may read\u2026" }) : null,
-    access.error !== null ? /* @__PURE__ */ jsxs2(ErrorBox, { as: "div", className: "mx-meet__refusal", error: access.error, operation: "Change who can join", origin: "meet/components", children: [
-      /* @__PURE__ */ jsx3("p", { className: "mx-meet__refusal-reason", children: access.error.message }),
-      /* @__PURE__ */ jsx3("p", { className: "mx-meet__refusal-remedy", children: access.error.remedy })
+    access.saving ? /* @__PURE__ */ jsx4("p", { className: "mx-meet__panel-note", role: "status", children: "Saving what guests may read\u2026" }) : null,
+    access.error !== null ? /* @__PURE__ */ jsxs3(ErrorBox, { as: "div", className: "mx-meet__refusal", error: access.error, operation: "Change who can join", origin: "meet/components", children: [
+      /* @__PURE__ */ jsx4("p", { className: "mx-meet__refusal-reason", children: access.error.message }),
+      /* @__PURE__ */ jsx4("p", { className: "mx-meet__refusal-remedy", children: access.error.remedy })
     ] }) : null
   ] });
 }
@@ -8727,9 +10392,9 @@ function MeetingRecordView({
 }) {
   const host = useMeetHost();
   if (host === null) {
-    return /* @__PURE__ */ jsx3("div", { className: "mx-meet mx-meet--record", children: /* @__PURE__ */ jsx3(InertNotice, { what: "This meeting record" }) });
+    return /* @__PURE__ */ jsx4("div", { className: "mx-meet mx-meet--record", children: /* @__PURE__ */ jsx4(InertNotice, { what: "This meeting record" }) });
   }
-  return /* @__PURE__ */ jsx3(MeetingRecordBody, { meeting, ...onRejoin !== void 0 ? { onRejoin } : {} });
+  return /* @__PURE__ */ jsx4(MeetingRecordBody, { meeting, ...onRejoin !== void 0 ? { onRejoin } : {} });
 }
 function MeetingRecordBody({
   meeting,
@@ -8737,19 +10402,19 @@ function MeetingRecordBody({
 }) {
   const host = useRequiredMeetHost();
   const record = useMeetingRecord(meeting);
-  const [question, setQuestion] = useState3("");
-  const [tab, setTab] = useState3("summary");
+  const [question, setQuestion] = useState4("");
+  const [tab, setTab] = useState4("summary");
   if (record.failure !== null) {
-    return /* @__PURE__ */ jsx3("div", { className: "mx-meet mx-meet--record", children: /* @__PURE__ */ jsxs2(ErrorBox, { as: "div", className: "mx-meet__empty", error: record.failure, operation: "Open this meeting record", origin: "meet/components", children: [
-      /* @__PURE__ */ jsx3("p", { className: "mx-meet__empty-title", children: "This meeting record could not be opened" }),
-      /* @__PURE__ */ jsx3("p", { className: "mx-meet__empty-body", children: record.failure.message }),
-      /* @__PURE__ */ jsx3("p", { className: "mx-meet__empty-body", children: record.failure.remedy })
+    return /* @__PURE__ */ jsx4("div", { className: "mx-meet mx-meet--record", children: /* @__PURE__ */ jsxs3(ErrorBox, { as: "div", className: "mx-meet__empty", error: record.failure, operation: "Open this meeting record", origin: "meet/components", children: [
+      /* @__PURE__ */ jsx4("p", { className: "mx-meet__empty-title", children: "This meeting record could not be opened" }),
+      /* @__PURE__ */ jsx4("p", { className: "mx-meet__empty-body", children: record.failure.message }),
+      /* @__PURE__ */ jsx4("p", { className: "mx-meet__empty-body", children: record.failure.remedy })
     ] }) });
   }
   if (record.loading || record.record === null) {
-    return /* @__PURE__ */ jsx3("div", { className: "mx-meet mx-meet--record", children: /* @__PURE__ */ jsxs2("div", { className: "mx-meet__empty", role: "status", children: [
-      /* @__PURE__ */ jsx3("p", { className: "mx-meet__empty-title", children: "Opening the meeting record\u2026" }),
-      /* @__PURE__ */ jsx3("p", { className: "mx-meet__empty-body", children: "Reading the summary, the notes and the transcript this meeting left behind." })
+    return /* @__PURE__ */ jsx4("div", { className: "mx-meet mx-meet--record", children: /* @__PURE__ */ jsxs3("div", { className: "mx-meet__empty", role: "status", children: [
+      /* @__PURE__ */ jsx4("p", { className: "mx-meet__empty-title", children: "Opening the meeting record\u2026" }),
+      /* @__PURE__ */ jsx4("p", { className: "mx-meet__empty-body", children: "Reading the summary, the notes and the transcript this meeting left behind." })
     ] }) });
   }
   const bundle = record.record;
@@ -8768,44 +10433,44 @@ function MeetingRecordBody({
   );
   const entirelyRestricted = everyRecordPartRefused && bundle.attendees.length === 0 && bundle.liveNotes.length === 0 && bundle.transcript.length === 0 && bundle.recording === null && bundle.summary === null && bundle.decisions.length === 0 && bundle.actionItems.length === 0;
   if (entirelyRestricted) {
-    return /* @__PURE__ */ jsxs2("div", { className: "mx-meet mx-meet--record", children: [
-      /* @__PURE__ */ jsx3("header", { className: "mx-meet__record-head", children: /* @__PURE__ */ jsxs2("div", { className: "mx-meet__record-head-inner", children: [
-        /* @__PURE__ */ jsx3("p", { className: "mx-meet__record-eyebrow", children: "Meeting record" }),
-        /* @__PURE__ */ jsx3("h1", { className: "mx-meet__record-title", children: meeting.title }),
-        /* @__PURE__ */ jsx3("p", { className: "mx-meet__record-when", children: meetingWhen(meeting) }),
-        onRejoin !== void 0 ? /* @__PURE__ */ jsx3("button", { type: "button", className: "mx-meet__link", onClick: onRejoin, children: "Open this link again" }) : null
+    return /* @__PURE__ */ jsxs3("div", { className: "mx-meet mx-meet--record", children: [
+      /* @__PURE__ */ jsx4("header", { className: "mx-meet__record-head", children: /* @__PURE__ */ jsxs3("div", { className: "mx-meet__record-head-inner", children: [
+        /* @__PURE__ */ jsx4("p", { className: "mx-meet__record-eyebrow", children: "Meeting record" }),
+        /* @__PURE__ */ jsx4("h1", { className: "mx-meet__record-title", children: meeting.title }),
+        /* @__PURE__ */ jsx4("p", { className: "mx-meet__record-when", children: meetingWhen(meeting) }),
+        onRejoin !== void 0 ? /* @__PURE__ */ jsx4("button", { type: "button", className: "mx-meet__link", onClick: onRejoin, children: "Open this link again" }) : null
       ] }) }),
-      /* @__PURE__ */ jsx3("div", { className: "mx-meet__record-body", children: restrictionNotices.map((notice2) => /* @__PURE__ */ jsxs2("div", { className: "mx-meet__record-access", role: "status", children: [
-        /* @__PURE__ */ jsx3("p", { className: "mx-meet__record-access-title", children: "About this record" }),
-        /* @__PURE__ */ jsx3("p", { className: "mx-meet__record-access-message", children: notice2.message }),
-        /* @__PURE__ */ jsx3("p", { className: "mx-meet__record-access-remedy", children: notice2.remedy })
+      /* @__PURE__ */ jsx4("div", { className: "mx-meet__record-body", children: restrictionNotices.map((notice2) => /* @__PURE__ */ jsxs3("div", { className: "mx-meet__record-access", role: "status", children: [
+        /* @__PURE__ */ jsx4("p", { className: "mx-meet__record-access-title", children: "About this record" }),
+        /* @__PURE__ */ jsx4("p", { className: "mx-meet__record-access-message", children: notice2.message }),
+        /* @__PURE__ */ jsx4("p", { className: "mx-meet__record-access-remedy", children: notice2.remedy })
       ] }, notice2.parts.join("-"))) })
     ] });
   }
-  return /* @__PURE__ */ jsxs2("div", { className: "mx-meet mx-meet--record", children: [
-    /* @__PURE__ */ jsx3("header", { className: "mx-meet__record-head", children: /* @__PURE__ */ jsxs2("div", { className: "mx-meet__record-head-inner", children: [
-      /* @__PURE__ */ jsx3("p", { className: "mx-meet__record-eyebrow", children: "Meeting record" }),
-      /* @__PURE__ */ jsx3("h1", { className: "mx-meet__record-title", children: meeting.title }),
-      /* @__PURE__ */ jsx3("p", { className: "mx-meet__record-when", children: meetingWhen(meeting) }),
-      onRejoin !== void 0 ? /* @__PURE__ */ jsx3("button", { type: "button", className: "mx-meet__link", onClick: onRejoin, children: "Open this link again" }) : null
+  return /* @__PURE__ */ jsxs3("div", { className: "mx-meet mx-meet--record", children: [
+    /* @__PURE__ */ jsx4("header", { className: "mx-meet__record-head", children: /* @__PURE__ */ jsxs3("div", { className: "mx-meet__record-head-inner", children: [
+      /* @__PURE__ */ jsx4("p", { className: "mx-meet__record-eyebrow", children: "Meeting record" }),
+      /* @__PURE__ */ jsx4("h1", { className: "mx-meet__record-title", children: meeting.title }),
+      /* @__PURE__ */ jsx4("p", { className: "mx-meet__record-when", children: meetingWhen(meeting) }),
+      onRejoin !== void 0 ? /* @__PURE__ */ jsx4("button", { type: "button", className: "mx-meet__link", onClick: onRejoin, children: "Open this link again" }) : null
     ] }) }),
-    /* @__PURE__ */ jsxs2("div", { className: "mx-meet__record-body", children: [
-      restrictionNotices.map((notice2) => /* @__PURE__ */ jsxs2("div", { className: "mx-meet__record-access", role: "status", children: [
-        /* @__PURE__ */ jsx3("p", { className: "mx-meet__record-access-title", children: "About this record" }),
-        /* @__PURE__ */ jsx3("p", { className: "mx-meet__record-access-message", children: notice2.message }),
-        /* @__PURE__ */ jsx3("p", { className: "mx-meet__record-access-remedy", children: notice2.remedy })
+    /* @__PURE__ */ jsxs3("div", { className: "mx-meet__record-body", children: [
+      restrictionNotices.map((notice2) => /* @__PURE__ */ jsxs3("div", { className: "mx-meet__record-access", role: "status", children: [
+        /* @__PURE__ */ jsx4("p", { className: "mx-meet__record-access-title", children: "About this record" }),
+        /* @__PURE__ */ jsx4("p", { className: "mx-meet__record-access-message", children: notice2.message }),
+        /* @__PURE__ */ jsx4("p", { className: "mx-meet__record-access-remedy", children: notice2.remedy })
       ] }, notice2.parts.join("-"))),
       attended.length === 0 ? (
         /* NOT SILENCE. A refused attendance read used to remove the whole
            section, so the reader could not tell "nobody" from "not shown". */
-        /* @__PURE__ */ jsxs2("section", { className: "mx-meet__record-section", "aria-label": "Who attended", children: [
-          /* @__PURE__ */ jsx3("h2", { className: "mx-meet__record-section-title", children: "Who attended" }),
-          /* @__PURE__ */ jsx3("p", { className: "mx-meet__panel-note", children: absenceSentence(bundle, "attendance", "Nobody is recorded as having attended.") })
+        /* @__PURE__ */ jsxs3("section", { className: "mx-meet__record-section", "aria-label": "Who attended", children: [
+          /* @__PURE__ */ jsx4("h2", { className: "mx-meet__record-section-title", children: "Who attended" }),
+          /* @__PURE__ */ jsx4("p", { className: "mx-meet__panel-note", children: absenceSentence(bundle, "attendance", "Nobody is recorded as having attended.") })
         ] })
-      ) : /* @__PURE__ */ jsxs2("section", { className: "mx-meet__record-section", "aria-label": "Who attended", children: [
-        /* @__PURE__ */ jsx3("h2", { className: "mx-meet__record-section-title", children: "Who attended" }),
-        /* @__PURE__ */ jsx3("ul", { className: "mx-meet__record-attendees", children: attended.map((person) => /* @__PURE__ */ jsxs2("li", { className: "mx-meet__record-attendee", children: [
-          /* @__PURE__ */ jsx3(
+      ) : /* @__PURE__ */ jsxs3("section", { className: "mx-meet__record-section", "aria-label": "Who attended", children: [
+        /* @__PURE__ */ jsx4("h2", { className: "mx-meet__record-section-title", children: "Who attended" }),
+        /* @__PURE__ */ jsx4("ul", { className: "mx-meet__record-attendees", children: attended.map((person) => /* @__PURE__ */ jsxs3("li", { className: "mx-meet__record-attendee", children: [
+          /* @__PURE__ */ jsx4(
             Avatar,
             {
               name: displayNameFor(bundle.names, person.identity, person.displayName),
@@ -8813,26 +10478,26 @@ function MeetingRecordBody({
               size: 28
             }
           ),
-          /* @__PURE__ */ jsxs2("span", { className: "mx-meet__person-name", children: [
+          /* @__PURE__ */ jsxs3("span", { className: "mx-meet__person-name", children: [
             displayNameFor(bundle.names, person.identity, person.displayName),
-            person.role === "host" ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__badge", children: "Host" }) : null,
-            person.role === "guest" ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__badge", children: "Guest" }) : null,
-            person.isAgent ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__badge", children: "Meeting assistant" }) : null
+            person.role === "host" ? /* @__PURE__ */ jsx4("span", { className: "mx-meet__badge", children: "Host" }) : null,
+            person.role === "guest" ? /* @__PURE__ */ jsx4("span", { className: "mx-meet__badge", children: "Guest" }) : null,
+            person.isAgent ? /* @__PURE__ */ jsx4("span", { className: "mx-meet__badge", children: "Meeting assistant" }) : null
           ] })
         ] }, person.id)) })
       ] }),
-      bundle.recording !== null ? /* @__PURE__ */ jsxs2("section", { className: "mx-meet__record-section mx-meet__recording-card", "aria-label": "Recording", children: [
-        /* @__PURE__ */ jsx3("h2", { className: "mx-meet__record-section-title", children: "Recording" }),
-        fileId !== null ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx3(RecordingPlayer, { fileId }),
-          notice !== null ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__panel-note", children: notice }) : null
-        ] }) : /* @__PURE__ */ jsx3("p", { className: "mx-meet__panel-note", children: notice ?? "This recording has no file." })
-      ] }) : wasRefused(bundle, "recording") ? /* @__PURE__ */ jsxs2("section", { className: "mx-meet__record-section", "aria-label": "Recording", children: [
-        /* @__PURE__ */ jsx3("h2", { className: "mx-meet__record-section-title", children: "Recording" }),
-        /* @__PURE__ */ jsx3("p", { className: "mx-meet__panel-note", children: REFUSED_ABSENCE })
+      bundle.recording !== null ? /* @__PURE__ */ jsxs3("section", { className: "mx-meet__record-section mx-meet__recording-card", "aria-label": "Recording", children: [
+        /* @__PURE__ */ jsx4("h2", { className: "mx-meet__record-section-title", children: "Recording" }),
+        fileId !== null ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+          /* @__PURE__ */ jsx4(RecordingPlayer, { fileId }),
+          notice !== null ? /* @__PURE__ */ jsx4("p", { className: "mx-meet__panel-note", children: notice }) : null
+        ] }) : /* @__PURE__ */ jsx4("p", { className: "mx-meet__panel-note", children: notice ?? "This recording has no file." })
+      ] }) : wasRefused(bundle, "recording") ? /* @__PURE__ */ jsxs3("section", { className: "mx-meet__record-section", "aria-label": "Recording", children: [
+        /* @__PURE__ */ jsx4("h2", { className: "mx-meet__record-section-title", children: "Recording" }),
+        /* @__PURE__ */ jsx4("p", { className: "mx-meet__panel-note", children: REFUSED_ABSENCE })
       ] }) : null,
-      /* @__PURE__ */ jsxs2("nav", { className: "mx-meet__record-tabs", "aria-label": "Meeting record sections", children: [
-        /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsxs3("nav", { className: "mx-meet__record-tabs", "aria-label": "Meeting record sections", children: [
+        /* @__PURE__ */ jsx4(
           "button",
           {
             type: "button",
@@ -8842,7 +10507,7 @@ function MeetingRecordBody({
             children: "Summary & decisions"
           }
         ),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "button",
           {
             type: "button",
@@ -8852,7 +10517,7 @@ function MeetingRecordBody({
             children: "Notes as it happened"
           }
         ),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "button",
           {
             type: "button",
@@ -8863,15 +10528,15 @@ function MeetingRecordBody({
           }
         )
       ] }),
-      tab === "summary" ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-        /* @__PURE__ */ jsxs2("section", { className: "mx-meet__record-section", "aria-label": "Summary", children: [
-          /* @__PURE__ */ jsx3("h2", { className: "mx-meet__record-section-title", children: "Summary" }),
-          wrapUp.state === "written" ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__record-summary", children: bundle.summary?.text }) : wrapUp.state === "in-progress" ? /* @__PURE__ */ jsxs2("div", { className: "mx-meet__panel-note", role: "status", children: [
-            /* @__PURE__ */ jsx3("p", { children: wrapUp.message }),
-            /* @__PURE__ */ jsx3("button", { type: "button", className: "mx-meet__link", onClick: record.reload, children: "Check again" })
-          ] }) : /* @__PURE__ */ jsx3("p", { className: "mx-meet__panel-note", role: wrapUp.state === "failed" ? "alert" : void 0, children: wrapUp.message })
+      tab === "summary" ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+        /* @__PURE__ */ jsxs3("section", { className: "mx-meet__record-section", "aria-label": "Summary", children: [
+          /* @__PURE__ */ jsx4("h2", { className: "mx-meet__record-section-title", children: "Summary" }),
+          wrapUp.state === "written" ? /* @__PURE__ */ jsx4("p", { className: "mx-meet__record-summary", children: bundle.summary?.text }) : wrapUp.state === "in-progress" ? /* @__PURE__ */ jsxs3("div", { className: "mx-meet__panel-note", role: "status", children: [
+            /* @__PURE__ */ jsx4("p", { children: wrapUp.message }),
+            /* @__PURE__ */ jsx4("button", { type: "button", className: "mx-meet__link", onClick: record.reload, children: "Check again" })
+          ] }) : /* @__PURE__ */ jsx4("p", { className: "mx-meet__panel-note", role: wrapUp.state === "failed" ? "alert" : void 0, children: wrapUp.message })
         ] }),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           NoteList,
           {
             title: "Decisions",
@@ -8883,7 +10548,7 @@ function MeetingRecordBody({
             )
           }
         ),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           NoteList,
           {
             title: "Action items",
@@ -8896,42 +10561,42 @@ function MeetingRecordBody({
           }
         )
       ] }) : null,
-      tab === "notes" ? /* @__PURE__ */ jsxs2("section", { className: "mx-meet__record-section", "aria-label": "Notes as it happened", children: [
-        /* @__PURE__ */ jsx3("h2", { className: "mx-meet__record-section-title", children: "Notes as it happened" }),
-        bundle.liveNotes.length === 0 ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__panel-note", children: absenceSentence(
+      tab === "notes" ? /* @__PURE__ */ jsxs3("section", { className: "mx-meet__record-section", "aria-label": "Notes as it happened", children: [
+        /* @__PURE__ */ jsx4("h2", { className: "mx-meet__record-section-title", children: "Notes as it happened" }),
+        bundle.liveNotes.length === 0 ? /* @__PURE__ */ jsx4("p", { className: "mx-meet__panel-note", children: absenceSentence(
           bundle,
           "notes",
           "No live notes are available for this meeting."
-        ) }) : /* @__PURE__ */ jsx3("ul", { className: "mx-meet__notes", children: bundle.liveNotes.map((note) => /* @__PURE__ */ jsxs2("li", { className: "mx-meet__note", children: [
-          note.window !== null ? /* @__PURE__ */ jsxs2("span", { className: "mx-meet__badge", children: [
+        ) }) : /* @__PURE__ */ jsx4("ul", { className: "mx-meet__notes", children: bundle.liveNotes.map((note) => /* @__PURE__ */ jsxs3("li", { className: "mx-meet__note", children: [
+          note.window !== null ? /* @__PURE__ */ jsxs3("span", { className: "mx-meet__badge", children: [
             "Window ",
             note.window
           ] }) : null,
           note.text
         ] }, note.id)) })
       ] }) : null,
-      tab === "transcript" ? /* @__PURE__ */ jsxs2("section", { className: "mx-meet__record-section", "aria-label": "Transcript", children: [
-        /* @__PURE__ */ jsxs2("h2", { className: "mx-meet__record-section-title", children: [
+      tab === "transcript" ? /* @__PURE__ */ jsxs3("section", { className: "mx-meet__record-section", "aria-label": "Transcript", children: [
+        /* @__PURE__ */ jsxs3("h2", { className: "mx-meet__record-section-title", children: [
           "Transcript",
-          /* @__PURE__ */ jsx3("span", { className: "mx-meet__record-count", children: bundle.transcript.length === 1 ? "1 line" : `${bundle.transcript.length} lines` })
+          /* @__PURE__ */ jsx4("span", { className: "mx-meet__record-count", children: bundle.transcript.length === 1 ? "1 line" : `${bundle.transcript.length} lines` })
         ] }),
-        blocks.length === 0 ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__panel-note", children: absenceSentence(
+        blocks.length === 0 ? /* @__PURE__ */ jsx4("p", { className: "mx-meet__panel-note", children: absenceSentence(
           bundle,
           "transcript",
           "No transcript is available for this meeting."
-        ) }) : /* @__PURE__ */ jsx3("ol", { className: "mx-meet__record-transcript", children: blocks.map((block) => /* @__PURE__ */ jsxs2("li", { className: "mx-meet__record-block", children: [
-          /* @__PURE__ */ jsxs2("p", { className: "mx-meet__record-speaker", children: [
+        ) }) : /* @__PURE__ */ jsx4("ol", { className: "mx-meet__record-transcript", children: blocks.map((block) => /* @__PURE__ */ jsxs3("li", { className: "mx-meet__record-block", children: [
+          /* @__PURE__ */ jsxs3("p", { className: "mx-meet__record-speaker", children: [
             block.speaker,
-            /* @__PURE__ */ jsx3("time", { className: "mx-meet__record-time", dateTime: block.startedAt, children: clockOf(block.startedAt) })
+            /* @__PURE__ */ jsx4("time", { className: "mx-meet__record-time", dateTime: block.startedAt, children: clockOf(block.startedAt) })
           ] }),
-          block.lines.map((line) => /* @__PURE__ */ jsx3("p", { className: "mx-meet__record-line", children: line.text }, line.id))
+          block.lines.map((line) => /* @__PURE__ */ jsx4("p", { className: "mx-meet__record-line", children: line.text }, line.id))
         ] }, block.id)) })
       ] }) : null,
-      /* @__PURE__ */ jsx3(GuestRecordAccessControl, { meeting }),
-      /* @__PURE__ */ jsxs2("section", { className: "mx-meet__record-section", "aria-label": "Ask about this meeting", children: [
-        /* @__PURE__ */ jsx3("h2", { className: "mx-meet__record-section-title", children: "Ask about this meeting" }),
-        guestFinishedMeeting ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__panel-note", children: "Sign in to ask the assistant about a meeting after it ends." }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsxs2(
+      /* @__PURE__ */ jsx4(GuestRecordAccessControl, { meeting }),
+      /* @__PURE__ */ jsxs3("section", { className: "mx-meet__record-section", "aria-label": "Ask about this meeting", children: [
+        /* @__PURE__ */ jsx4("h2", { className: "mx-meet__record-section-title", children: "Ask about this meeting" }),
+        guestFinishedMeeting ? /* @__PURE__ */ jsx4("p", { className: "mx-meet__panel-note", children: "Sign in to ask the assistant about a meeting after it ends." }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+          /* @__PURE__ */ jsxs3(
             "form",
             {
               className: "mx-meet__composer",
@@ -8942,7 +10607,7 @@ function MeetingRecordBody({
                 void record.ask(trimmed);
               },
               children: [
-                /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx4(
                   "input",
                   {
                     className: "mx-meet__input",
@@ -8952,7 +10617,7 @@ function MeetingRecordBody({
                     "aria-label": "Ask about this meeting"
                   }
                 ),
-                /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx4(
                   "button",
                   {
                     type: "submit",
@@ -8964,8 +10629,8 @@ function MeetingRecordBody({
               ]
             }
           ),
-          record.answer !== null ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__answer", children: record.answer }) : null,
-          record.coverage !== null ? /* @__PURE__ */ jsxs2("p", { className: "mx-meet__coverage", children: [
+          record.answer !== null ? /* @__PURE__ */ jsx4("p", { className: "mx-meet__answer", children: record.answer }) : null,
+          record.coverage !== null ? /* @__PURE__ */ jsxs3("p", { className: "mx-meet__coverage", children: [
             "Answered from ",
             record.coverage.segmentsUsed,
             " of ",
@@ -8976,9 +10641,9 @@ function MeetingRecordBody({
             record.coverage.truncated ? " (the oldest were left out)" : "",
             "."
           ] }) : null,
-          record.askError !== null ? /* @__PURE__ */ jsxs2(ErrorBox, { as: "div", className: "mx-meet__refusal", error: record.askError, operation: "Ask about this meeting", origin: "meet/components", children: [
-            /* @__PURE__ */ jsx3("p", { className: "mx-meet__refusal-reason", children: record.askError.message }),
-            /* @__PURE__ */ jsx3("p", { className: "mx-meet__refusal-remedy", children: record.askError.remedy })
+          record.askError !== null ? /* @__PURE__ */ jsxs3(ErrorBox, { as: "div", className: "mx-meet__refusal", error: record.askError, operation: "Ask about this meeting", origin: "meet/components", children: [
+            /* @__PURE__ */ jsx4("p", { className: "mx-meet__refusal-reason", children: record.askError.message }),
+            /* @__PURE__ */ jsx4("p", { className: "mx-meet__refusal-remedy", children: record.askError.remedy })
           ] }) : null
         ] })
       ] })
@@ -8989,21 +10654,21 @@ var STREAM_REFUSED = "Streaming playback did not start, so this recording was do
 var PLAYBACK_RETRY_REMEDY = "Reload the page and try again. If it still will not play, ask a meeting host to check the recording.";
 function RecordingPlayer(props) {
   const host = useMeetHost();
-  if (host === null) return /* @__PURE__ */ jsx3(InertNotice, { what: "This recording" });
-  return /* @__PURE__ */ jsx3(RecordingPlayerBody, { ...props, host });
+  if (host === null) return /* @__PURE__ */ jsx4(InertNotice, { what: "This recording" });
+  return /* @__PURE__ */ jsx4(RecordingPlayerBody, { ...props, host });
 }
 function RecordingPlayerBody({ fileId, host }) {
-  const [media, setMedia] = useState3(null);
-  const [loading, setLoading] = useState3(false);
-  const [error, setError] = useState3(null);
-  useEffect3(() => {
+  const [media, setMedia] = useState4(null);
+  const [loading, setLoading] = useState4(false);
+  const [error, setError] = useState4(null);
+  useEffect4(() => {
     if (media === null || media.kind !== "bytes") return void 0;
     const url = media.url;
     return () => URL.revokeObjectURL(url);
   }, [media]);
   if (media !== null) {
-    return /* @__PURE__ */ jsxs2("div", { className: "mx-meet__record-section", children: [
-      /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsxs3("div", { className: "mx-meet__record-section", children: [
+      /* @__PURE__ */ jsx4(
         "video",
         {
           className: "mx-meet__record-player",
@@ -9045,15 +10710,15 @@ function RecordingPlayerBody({ fileId, host }) {
           }
         }
       ),
-      media.fallbackReason !== null ? /* @__PURE__ */ jsx3("p", { className: "mx-meet__panel-note", children: media.fallbackReason }) : null
+      media.fallbackReason !== null ? /* @__PURE__ */ jsx4("p", { className: "mx-meet__panel-note", children: media.fallbackReason }) : null
     ] });
   }
-  return /* @__PURE__ */ jsxs2("div", { className: "mx-meet__record-section", children: [
-    error !== null ? /* @__PURE__ */ jsxs2(ErrorBox, { as: "div", className: "mx-meet__refusal", error, operation: "Complete this meeting action", origin: "meet/components", children: [
-      /* @__PURE__ */ jsx3("p", { className: "mx-meet__refusal-reason", children: error.message }),
-      /* @__PURE__ */ jsx3("p", { className: "mx-meet__refusal-remedy", children: error.remedy })
+  return /* @__PURE__ */ jsxs3("div", { className: "mx-meet__record-section", children: [
+    error !== null ? /* @__PURE__ */ jsxs3(ErrorBox, { as: "div", className: "mx-meet__refusal", error, operation: "Complete this meeting action", origin: "meet/components", children: [
+      /* @__PURE__ */ jsx4("p", { className: "mx-meet__refusal-reason", children: error.message }),
+      /* @__PURE__ */ jsx4("p", { className: "mx-meet__refusal-remedy", children: error.remedy })
     ] }) : null,
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4(
       "button",
       {
         type: "button",
@@ -9089,35 +10754,35 @@ function clockOf(iso) {
 function MeetingList({ baseUrl }) {
   const host = useMeetHost();
   const list = useMeetings();
-  if (host === null) return /* @__PURE__ */ jsx3(InertNotice, { what: "Your meetings" });
+  if (host === null) return /* @__PURE__ */ jsx4(InertNotice, { what: "Your meetings" });
   if (list.failure !== null) {
-    return /* @__PURE__ */ jsxs2(ErrorBox, { as: "div", className: "mx-meet__empty", error: list.failure, operation: "List your meetings", origin: "meet/components", children: [
-      /* @__PURE__ */ jsx3("p", { className: "mx-meet__empty-title", children: "Your meetings could not be listed" }),
-      /* @__PURE__ */ jsx3("p", { className: "mx-meet__empty-body", children: list.failure.message }),
-      /* @__PURE__ */ jsx3("p", { className: "mx-meet__empty-body", children: list.failure.remedy })
+    return /* @__PURE__ */ jsxs3(ErrorBox, { as: "div", className: "mx-meet__empty", error: list.failure, operation: "List your meetings", origin: "meet/components", children: [
+      /* @__PURE__ */ jsx4("p", { className: "mx-meet__empty-title", children: "Your meetings could not be listed" }),
+      /* @__PURE__ */ jsx4("p", { className: "mx-meet__empty-body", children: list.failure.message }),
+      /* @__PURE__ */ jsx4("p", { className: "mx-meet__empty-body", children: list.failure.remedy })
     ] });
   }
   if (list.loading) {
-    return /* @__PURE__ */ jsx3("div", { className: "mx-meet__empty", role: "status", children: /* @__PURE__ */ jsx3("p", { className: "mx-meet__empty-title", children: "Loading your meetings\u2026" }) });
+    return /* @__PURE__ */ jsx4("div", { className: "mx-meet__empty", role: "status", children: /* @__PURE__ */ jsx4("p", { className: "mx-meet__empty-title", children: "Loading your meetings\u2026" }) });
   }
   if (list.meetings.length === 0) {
-    return /* @__PURE__ */ jsxs2("div", { className: "mx-meet__empty", role: "status", children: [
-      /* @__PURE__ */ jsx3("p", { className: "mx-meet__empty-title", children: "No meetings yet" }),
-      /* @__PURE__ */ jsx3("p", { className: "mx-meet__empty-body", children: "Create one above. Its link works before, during and after the meeting \u2014 afterwards it opens the record." })
+    return /* @__PURE__ */ jsxs3("div", { className: "mx-meet__empty", role: "status", children: [
+      /* @__PURE__ */ jsx4("p", { className: "mx-meet__empty-title", children: "No meetings yet" }),
+      /* @__PURE__ */ jsx4("p", { className: "mx-meet__empty-body", children: "Create one above. Its link works before, during and after the meeting \u2014 afterwards it opens the record." })
     ] });
   }
   const origin = baseUrl ?? (typeof window === "undefined" ? "" : window.location.origin);
-  return /* @__PURE__ */ jsx3("ul", { className: "mx-meet-list", children: list.meetings.map((meeting) => {
+  return /* @__PURE__ */ jsx4("ul", { className: "mx-meet-list", children: list.meetings.map((meeting) => {
     const ended = meeting.endedAt !== null;
-    return /* @__PURE__ */ jsxs2("li", { className: "mx-meet-list__row", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "mx-meet-list__main", children: [
-        /* @__PURE__ */ jsxs2("span", { className: "mx-meet-list__title", children: [
+    return /* @__PURE__ */ jsxs3("li", { className: "mx-meet-list__row", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "mx-meet-list__main", children: [
+        /* @__PURE__ */ jsxs3("span", { className: "mx-meet-list__title", children: [
           meeting.title,
-          ended ? /* @__PURE__ */ jsx3("span", { className: "mx-meet__badge", children: "Ended" }) : null
+          ended ? /* @__PURE__ */ jsx4("span", { className: "mx-meet__badge", children: "Ended" }) : null
         ] }),
-        /* @__PURE__ */ jsx3("span", { className: "mx-meet-list__when", children: meetingWhen(meeting) })
+        /* @__PURE__ */ jsx4("span", { className: "mx-meet-list__when", children: meetingWhen(meeting) })
       ] }),
-      /* @__PURE__ */ jsx3("a", { className: "mx-meet-list__action", href: meetingLink(origin, meeting.slug), children: ended ? "Open the record" : "Join" })
+      /* @__PURE__ */ jsx4("a", { className: "mx-meet-list__action", href: meetingLink(origin, meeting.slug), children: ended ? "Open the record" : "Join" })
     ] }, meeting.id);
   }) });
 }
@@ -9274,15 +10939,22 @@ async function pushMeetingToGoogleCalendar(api, meetingId, target) {
 }
 export {
   ATTENDANCE_CSV_HEADER,
+  ActivitiesControl,
+  ActivitiesIcon,
   AiPanel,
   AttendanceNotice,
   Avatar,
+  BreakoutBanner,
+  BreakoutIcon,
+  BreakoutsPanel,
   CALL_INVITE_KIND,
   CALL_INVITE_VERSION,
+  CAPTION_LANGUAGES,
   CONSENT_NOTICE_ATTRIBUTE,
   CallButton,
   CameraIcon,
   CameraOffIcon,
+  CaptionLanguageSettings,
   Captions,
   ChatIcon,
   ChatPanel,
@@ -9295,6 +10967,7 @@ export {
   DATA_TOPICS,
   DEFAULT_EFFECTS,
   DEFAULT_PAGE_SIZE,
+  EMPTY_COLLAB,
   END_MEETING_NOT_SERVED,
   FILE_SESSION_PATH,
   FlagIcon,
@@ -9347,8 +11020,12 @@ export {
   PhoneIcon,
   PhoneOffIcon,
   PinIcon,
+  PollIcon,
+  PollsPanel,
   PreJoin,
+  QaPanel,
   QualityBars,
+  QuestionIcon,
   REACTION_TTL_MS,
   REFUSED_ABSENCE,
   ROLE_RANK,
@@ -9375,10 +11052,13 @@ export {
   TABLES,
   TRANSCRIPTION_ATTRIBUTES,
   TRANSCRIPTION_TOPIC,
+  WhiteboardIcon,
+  WhiteboardPanel,
   WifiLowIcon,
   absenceSentence,
   activeWrapUpSummary,
   announceMeeting,
+  applyCollabPacket,
   applyRoomEvent,
   asCallId,
   asMeetingId,
@@ -9386,10 +11066,13 @@ export {
   asParticipantIdentity,
   asRoomName,
   asUserId,
+  assignedRoom,
   attendanceCsv,
   attendanceReport,
   attendanceTotals,
   attendeeKey,
+  autoAssign,
+  breakoutRemainingMs,
   callInviteAction,
   callInviteText,
   callStateLabel,
@@ -9399,6 +11082,7 @@ export {
   captionSegment,
   changesPatch,
   clockPosition,
+  collabFromState,
   computeStage,
   countLabel,
   createCallCenter,
@@ -9419,6 +11103,7 @@ export {
   createWebDeviceStorage,
   createWebEffectsStorage,
   createWebRoomTokenStorage,
+  defaultCaptionLanguage,
   displayNameFor,
   fileDownloadPath,
   gridColumns,
@@ -9441,6 +11126,7 @@ export {
   listenOnlyNotice,
   loadFollowUpDraft,
   loadGuestMeetingRecord,
+  loadMeetingActivities,
   loadMeetingChat,
   loadMeetingRecord,
   mapConnectionState,
@@ -9495,9 +11181,13 @@ export {
   unavailableFrom,
   uniqueAttendees,
   useAudioLevel,
+  useAvailableActivities,
   useCalls,
   useCanModerate,
   useCanRecord,
+  useCaptionTranslation,
+  useCollab,
+  useCollabPanelRequest,
   useConsentNotice,
   useDeviceSnapshot,
   useElapsed,
@@ -9529,6 +11219,7 @@ export {
   useTrack,
   userTopic,
   wasRefused,
+  withItem,
   wrapUpStatus
 };
 //# sourceMappingURL=react.js.map