@ai-matrx/meet 0.7.84 → 0.8.0

package/dist/skins/meet.cjs

@@ -0,0 +1,4636 @@
+"use client";
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/skins/meet.ts
+var meet_exports = {};
+__export(meet_exports, {
+  ActivitiesControl: () => ActivitiesControl,
+  ActivitiesIcon: () => ActivitiesIcon,
+  AiPanel: () => AiPanel,
+  AttendanceNotice: () => AttendanceNotice,
+  Avatar: () => Avatar,
+  BreakoutBanner: () => BreakoutBanner,
+  BreakoutIcon: () => BreakoutIcon,
+  BreakoutsPanel: () => BreakoutsPanel,
+  CameraIcon: () => CameraIcon,
+  CameraOffIcon: () => CameraOffIcon,
+  CaptionLanguageSettings: () => CaptionLanguageSettings,
+  Captions: () => Captions,
+  ChatIcon: () => ChatIcon,
+  ChatPanel: () => ChatPanel,
+  CheckIcon: () => CheckIcon,
+  CloseIcon: () => CloseIcon,
+  ConnectionDot: () => ConnectionDot,
+  ConsentNotice: () => ConsentNotice,
+  ControlBar: () => ControlBar,
+  ControlButton: () => ControlButton,
+  EraserIcon: () => EraserIcon,
+  FlagIcon: () => FlagIcon,
+  HandIcon: () => HandIcon,
+  HighlighterIcon: () => HighlighterIcon,
+  HostMenu: () => HostMenu,
+  KeyboardIcon: () => KeyboardIcon,
+  LayoutIcon: () => LayoutIcon,
+  LobbyPanel: () => LobbyPanel,
+  LockIcon: () => LockIcon,
+  MeetSkinRoom: () => MeetSkinRoom,
+  MeetingOverlays: () => MeetingOverlays,
+  MenuItem: () => MenuItem,
+  MicIcon: () => MicIcon,
+  MicOffIcon: () => MicOffIcon,
+  MoreIcon: () => MoreIcon,
+  PanelShell: () => PanelShell,
+  ParticipantTile: () => ParticipantTile,
+  PencilIcon: () => PencilIcon,
+  PeopleIcon: () => PeopleIcon,
+  PeoplePanel: () => PeoplePanel,
+  PersonMenu: () => PersonMenu,
+  PhoneIcon: () => PhoneIcon,
+  PhoneOffIcon: () => PhoneOffIcon,
+  PinIcon: () => PinIcon,
+  PollIcon: () => PollIcon,
+  PollsPanel: () => PollsPanel,
+  Popover: () => Popover,
+  PreJoin: () => PreJoin,
+  QaPanel: () => QaPanel,
+  QualityBars: () => QualityBars,
+  QuestionIcon: () => QuestionIcon,
+  ReactionOverlay: () => ReactionOverlay,
+  RecordIcon: () => RecordIcon,
+  RecordingIndicator: () => RecordingIndicator,
+  ScreenShareIcon: () => ScreenShareIcon,
+  SearchIcon: () => SearchIcon,
+  SettingsIcon: () => SettingsIcon,
+  SettingsPanel: () => SettingsPanel,
+  ShortcutsSheet: () => ShortcutsSheet,
+  SignalIcon: () => SignalIcon,
+  SmileIcon: () => SmileIcon,
+  SparklesIcon: () => SparklesIcon,
+  SpeakerIcon: () => SpeakerIcon,
+  SpotlightIcon: () => SpotlightIcon,
+  Stage: () => Stage,
+  Toast: () => Toast,
+  UndoIcon: () => UndoIcon,
+  UpvoteIcon: () => UpvoteIcon,
+  WhiteboardIcon: () => WhiteboardIcon,
+  WhiteboardPanel: () => WhiteboardPanel,
+  WifiLowIcon: () => WifiLowIcon
+});
+module.exports = __toCommonJS(meet_exports);
+
+// src/skins/meet/components.tsx
+var import_react9 = require("react");
+
+// src/react/facade.ts
+var import_react7 = require("react");
+
+// src/react/root.tsx
+var import_react3 = require("react");
+
+// src/core/names.ts
+function isGuestIdentity(identity) {
+  return String(identity).startsWith("guest:");
+}
+function isAgentIdentity(identity) {
+  return String(identity).startsWith("agent:");
+}
+var NOTE_TAKER_PRODUCT_NAME = "Matrx note-taker";
+var AGENT_PRODUCT_NAME = "Matrx agent";
+var UNNAMED_GUEST = "Unnamed guest";
+var UNNAMED_PARTICIPANT = "Unnamed participant";
+var PLACEHOLDER_NAMES = [
+  NOTE_TAKER_PRODUCT_NAME,
+  AGENT_PRODUCT_NAME,
+  UNNAMED_GUEST,
+  UNNAMED_PARTICIPANT
+];
+function isPlaceholderName(name) {
+  return typeof name === "string" && PLACEHOLDER_NAMES.includes(name.trim());
+}
+function placeholderNameFor(identity) {
+  const key = String(identity);
+  if (isAgentIdentity(key)) {
+    return key.startsWith("agent:note_taker:") || key.startsWith("agent:note-taker") ? NOTE_TAKER_PRODUCT_NAME : AGENT_PRODUCT_NAME;
+  }
+  return isGuestIdentity(key) ? UNNAMED_GUEST : UNNAMED_PARTICIPANT;
+}
+function isRealName(identity, name) {
+  if (typeof name !== "string") return false;
+  const trimmed = name.trim();
+  if (trimmed.length === 0) return false;
+  if (trimmed === String(identity)) return false;
+  if (isPlaceholderName(trimmed)) return false;
+  return true;
+}
+function displayNameFor(book, identity, preferred) {
+  const key = String(identity);
+  if (isRealName(key, preferred)) return preferred.trim();
+  const known = book[key];
+  if (known !== void 0) return known;
+  return placeholderNameFor(key);
+}
+
+// src/core/errors.ts
+var MeetError = class extends Error {
+  code;
+  /** What to DO. Rendered to the user for the device codes. */
+  remedy;
+  cause;
+  constructor(code, message, remedy, cause) {
+    super(message);
+    this.name = "MeetError";
+    this.code = code;
+    this.remedy = remedy;
+    if (cause !== void 0) this.cause = cause;
+  }
+  /** True when retrying after the host re-establishes a session is the fix. */
+  get isRetryable() {
+    return this.code === "session-unavailable" || this.code === "transport" || this.code === "token";
+  }
+  /** True when the user, not the code, must act — the UI shows `remedy`. */
+  get isUserActionable() {
+    return this.code === "permission-denied" || this.code === "device-not-found" || this.code === "device-in-use" || this.code === "insecure-context";
+  }
+};
+function normalizeDeviceError(error, operation) {
+  if (error instanceof MeetError) return error;
+  const raw = error ?? {};
+  const name = raw.name ?? "";
+  const message = typeof raw.message === "string" ? raw.message : String(error);
+  switch (name) {
+    case "NotAllowedError":
+    case "SecurityError":
+      return new MeetError(
+        "permission-denied",
+        `${operation}: camera/microphone permission denied`,
+        "Allow camera and microphone access for this site, then rejoin. On macOS also check System Settings \u203A Privacy & Security \u2014 a browser denied there shows the same error.",
+        error
+      );
+    case "NotFoundError":
+    case "OverconstrainedError":
+      return new MeetError(
+        "device-not-found",
+        `${operation}: no matching camera/microphone (${message})`,
+        "The selected device is gone \u2014 usually an unplugged headset. Pick another device in the pre-join panel; the package falls back to the system default automatically.",
+        error
+      );
+    case "NotReadableError":
+    case "AbortError":
+      return new MeetError(
+        "device-in-use",
+        `${operation}: the device is already in use (${message})`,
+        "Another application (or another tab) holds the camera. Close it and try again \u2014 the hardware, not the meeting, is what refused.",
+        error
+      );
+    case "TypeError":
+      return new MeetError(
+        "insecure-context",
+        `${operation}: media devices are unavailable in this context (${message})`,
+        "getUserMedia only exists on https or localhost. Serve the app over https.",
+        error
+      );
+    default:
+      return new MeetError(
+        "media-unsupported",
+        `${operation}: ${message}`,
+        "This browser refused the media request for a reason the package does not recognize. Report it with this message so the class gets a named remedy rather than a shrug.",
+        error
+      );
+  }
+}
+
+// src/core/tokens.ts
+var MEET_ROUTES = {
+  token: "/api/v1/meet/token",
+  recordingStart: "/api/v1/meet/recording/start",
+  recordingStop: "/api/v1/meet/recording/stop",
+  noteTakerStart: "/api/v1/meet/agent/start",
+  noteTakerStop: "/api/v1/meet/agent/stop",
+  /** In-meeting Q&A. Streams NDJSON; body is `{meeting_id, question}` only. */
+  intelligenceAsk: "/api/v1/meet/intelligence/ask",
+  /** A host ends the meeting for everyone. Served by MRI-A6. */
+  meetingEnd: "/api/v1/meet/end",
+  /**
+   * THE POST-MEETING RECORD FOR A READER WITH NO DATABASE (MRF-1). A `GET`,
+   * authorized by the room token this device already holds, carried in the
+   * `x-meet-room-token` header — never a query parameter, because a bearer
+   * credential in a URL lands in access logs, referrers and history.
+   */
+  record: "/api/v1/meet/record",
+  /** A host chooses what guests may read of ONE meeting (MRF-1). */
+  recordAccess: "/api/v1/meet/record/access",
+  /**
+   * KEEP YOUR NOTES (2026-10-01): a guest who just created an account presents
+   * their kept pass in `x-meet-room-token` with their new session, and the
+   * meeting they attended becomes theirs to read. Idempotent; never a grant.
+   */
+  claim: "/api/v1/meet/claim",
+  /**
+   * Meet wave 1 (0.8): bring every invitee up to date after a write — sends the
+   * invitation / update / cancellation emails with their `.ics` and re-queues
+   * reminders. Idempotent. `{meeting_id}` is substituted by `meetingPath`.
+   */
+  meetingAnnounce: "/api/v1/meet/meetings/{meeting_id}/announce",
+  /** Put a one-off meeting on the caller's own Google Calendar (gated by the server). */
+  meetingGoogleCalendar: "/api/v1/meet/meetings/{meeting_id}/google-calendar",
+  /**
+   * Meet wave 3: the recap email after the meeting. `GET` = the draft (subject,
+   * body from the wrap-up, who it can go to); `POST` = send what the host
+   * reviewed (`dry_run` renders and queues nothing). Never sent automatically.
+   */
+  meetingFollowUp: "/api/v1/meet/meetings/{meeting_id}/follow-up",
+  /**
+   * Meet wave 2: EVERY in-meeting host power (mute, stop video, mute all, ask to
+   * unmute, spotlight, lower hands, co-host, hand over, rename, remove, report).
+   * Decided by the server from the meeting itself; a guest's pass rides
+   * `x-meet-room-token`.
+   */
+  moderate: "/api/v1/meet/moderate",
+  /** Meet wave 2: the SAVED chat — `POST` sends to everyone, `GET ?meeting_id=` reads history. */
+  chat: "/api/v1/meet/chat",
+  /**
+   * 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"
+};
+
+// src/core/recording.ts
+var RECORDING_IN_FLIGHT = [
+  "starting",
+  "recording",
+  "stopping"
+];
+function isRecordingInFlight(state) {
+  return RECORDING_IN_FLIGHT.includes(state);
+}
+function recordingLabel(state) {
+  switch (state) {
+    case "starting":
+      return "Starting recording\u2026";
+    case "recording":
+      return "Recording";
+    case "stopping":
+      return "Stopping recording\u2026";
+    case "processing":
+      return "Processing recording\u2026";
+    case "available":
+      return "Recording ready";
+    case "expired":
+      return "Recording expired";
+    case "failed":
+      return "Recording failed";
+    default:
+      return null;
+  }
+}
+
+// src/core/attendance.ts
+var IDLE_TRACK = { enabled: false, unavailable: null };
+var IDLE_MEDIA = {
+  microphone: IDLE_TRACK,
+  camera: IDLE_TRACK
+};
+var LISTEN_ONLY_NOTICE = "You're attending without a microphone \u2014 others can't hear you";
+function isListenOnly(media) {
+  return !media.microphone.enabled && media.microphone.unavailable !== null;
+}
+function listenOnlyNotice(media) {
+  return isListenOnly(media) ? LISTEN_ONLY_NOTICE : null;
+}
+
+// src/core/types.ts
+var ROLE_RANK = {
+  host: 3,
+  cohost: 2,
+  participant: 1,
+  guest: 0
+};
+function isHostRole(role) {
+  return role === "host" || role === "cohost";
+}
+
+// src/core/collab.ts
+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 count = Math.max(1, Math.floor(rooms));
+  const out = Array.from({ length: count }, () => []);
+  const skip = new Set(exclude);
+  let index = 0;
+  for (const identity of identities) {
+    if (skip.has(identity)) continue;
+    out[index % count].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" }
+];
+
+// src/core/transcript.ts
+function readableTranscript(list) {
+  return [...list].filter((entry) => entry.text.trim().length > 0).sort((left, right) => left.startedAt.localeCompare(right.startedAt));
+}
+
+// src/core/store.ts
+var DEFAULT_EFFECTS = {
+  noiseSuppression: true,
+  background: "none",
+  backgroundImage: null
+};
+function effectiveRole(snapshot) {
+  const me = snapshot.participants.find(
+    (participant) => participant.identity === snapshot.localIdentity
+  );
+  const fromRoster = me?.role ?? "participant";
+  const fromToken = snapshot.grants.role;
+  return ROLE_RANK[fromRoster] >= ROLE_RANK[fromToken] ? fromRoster : fromToken;
+}
+var REACTION_TTL_MS = 5e3;
+
+// src/core/observation.ts
+function observedDevice(track) {
+  if (track.enabled) return "on";
+  const refused = track.unavailable;
+  if (refused === null) return "muted_by_me";
+  switch (refused.code) {
+    case "permission-denied":
+      return "unavailable:denied";
+    case "device-not-found":
+      return "unavailable:none";
+    case "device-in-use":
+      return "unavailable:busy";
+    case "insecure-context":
+      return "unavailable:blocked_site";
+    default:
+      return "unavailable:failed";
+  }
+}
+function endedRecord(snapshot, given) {
+  const record = snapshot?.meeting ?? given;
+  return record !== null && record.endedAt !== null;
+}
+function observedPhase(input) {
+  const { snapshot } = input;
+  if (snapshot === null) return "resolving";
+  const raw = snapshot.phase;
+  const live = raw === "connected" || raw === "reconnecting";
+  if (endedRecord(snapshot, input.meeting ?? null) && !live) return "ended";
+  switch (raw) {
+    case "idle":
+    case "failed":
+    case "left":
+      return "prejoin";
+    case "lobby":
+      return "waiting:knocking";
+    case "requesting-token":
+    case "connecting":
+      return "joining";
+    case "connected":
+    case "reconnecting":
+      return "in_call";
+  }
+}
+var ADMITTER_ROLES = /* @__PURE__ */ new Set(["host", "cohost"]);
+function observe(input) {
+  const { snapshot } = input;
+  const phase = observedPhase(input);
+  const inCall = phase === "in_call";
+  const role = inCall && snapshot !== null ? effectiveRole(snapshot) : "none";
+  const canAdmit = role !== "none" && ADMITTER_ROLES.has(role);
+  const deviceInPlay = phase === "joining" || inCall;
+  return {
+    phase,
+    reason: null,
+    role,
+    connection: snapshot?.phase === "reconnecting" ? "reconnecting" : "stable",
+    hostPresent: inCall && snapshot !== null ? snapshot.participants.some((p) => ADMITTER_ROLES.has(p.role)) : null,
+    lobbyCount: canAdmit && snapshot !== null ? snapshot.lobby.filter((entry) => entry.state === "knocking").length : 0,
+    recording: snapshot?.recording === "recording" || snapshot?.recording === "stopping",
+    audioBlocked: null,
+    camera: deviceInPlay && snapshot !== null ? observedDevice(snapshot.media.camera) : null,
+    microphone: deviceInPlay && snapshot !== null ? observedDevice(snapshot.media.microphone) : null
+  };
+}
+function staticObservation(phase, reason = null) {
+  return {
+    phase,
+    reason,
+    role: "none",
+    connection: phase === "disconnected" ? "server_unreachable" : "stable",
+    hostPresent: null,
+    lobbyCount: 0,
+    recording: false,
+    audioBlocked: null,
+    camera: null,
+    microphone: null
+  };
+}
+function observedQuality(quality) {
+  switch (quality) {
+    case "excellent":
+    case "good":
+      return "good";
+    case "poor":
+      return "poor";
+    case "lost":
+      return "lost";
+    default:
+      return null;
+  }
+}
+function participantAttributes(p) {
+  const attrs = {
+    "data-meet-participant": "",
+    "data-meet-participant-identity": p.identity,
+    "data-meet-participant-name": p.displayName,
+    "data-meet-participant-role": p.role,
+    "data-meet-participant-self": String(p.isLocal)
+  };
+  const quality = observedQuality(p.quality);
+  if (quality !== null) attrs["data-meet-participant-connection"] = quality;
+  return attrs;
+}
+function microphoneNoticeCode(track) {
+  const refused = track.unavailable;
+  if (refused === null) return null;
+  return refused.code === "permission-denied" || refused.code === "insecure-context" ? "mic-blocked" : "device-lost";
+}
+
+// src/react/provider.tsx
+var import_global_slot = require("@ai-matrx/kit/global-slot");
+var import_react = require("react");
+var import_react2 = require("@ai-matrx/realtime/react");
+
+// src/core/meetings.ts
+function canModerateParticipant(actor, target) {
+  if (actor === void 0 || target === void 0) return false;
+  if (actor.role === "participant") return false;
+  if (actor.identity === target.identity) return false;
+  return ROLE_RANK[actor.role] > ROLE_RANK[target.role];
+}
+var END_MEETING_NOT_SERVED = "Ending a meeting is not available on this server yet";
+
+// src/core/note-taker.ts
+var NOTE_TAKER_IDENTITY_PREFIX = "agent:note_taker:";
+function noteTakerIdentity(meetingId) {
+  return `${NOTE_TAKER_IDENTITY_PREFIX}${meetingId}`;
+}
+var CONSENT_NOTICE_ATTRIBUTE = "matrx.agent.consent_notice";
+var NOTE_TAKER_METADATA_KEY = "note_taker";
+var STATES = [
+  "absent",
+  "joining",
+  "transcribing",
+  "handoff_pending",
+  "ended"
+];
+function readState(value) {
+  return typeof value === "string" && STATES.includes(value) ? value : null;
+}
+function isNoteTaker(participant) {
+  return participant.identity.startsWith(NOTE_TAKER_IDENTITY_PREFIX) || participant.attributes[CONSENT_NOTICE_ATTRIBUTE] !== void 0 || participant.isAgent;
+}
+function noteTakerParticipant(participants) {
+  return participants.find(isNoteTaker) ?? null;
+}
+function exactNoteTakerParticipant(meeting, participants) {
+  if (meeting === null) return null;
+  const identity = noteTakerIdentity(meeting.id);
+  return participants.find((participant) => participant.identity === identity) ?? null;
+}
+function noteTakerStatus(args) {
+  const present = exactNoteTakerParticipant(args.meeting, args.participants) !== null;
+  const raw = args.meeting?.metadata[NOTE_TAKER_METADATA_KEY];
+  const row = typeof raw === "object" && raw !== null && !Array.isArray(raw) ? raw : {};
+  const recorded = readState(row["state"]);
+  const detail = typeof row["reason"] === "string" && row["reason"].length > 0 ? row["reason"] : null;
+  const refusal = args.refusal ?? null;
+  if (recorded === null) {
+    return { state: "absent", detail, present, refusal };
+  }
+  if (recorded === "transcribing" && !present) {
+    return { state: "handoff_pending", detail, present, refusal };
+  }
+  return { state: recorded, detail, present, refusal };
+}
+function noteTakerLabel(status) {
+  switch (status.state) {
+    case "joining":
+      return "The note-taker is joining this meeting";
+    case "transcribing":
+      return "The note-taker is connected and listening for speech";
+    case "handoff_pending":
+      return "The note-taker's transcription is interrupted; reconnection is pending";
+    case "ended":
+      return "The note-taker has stopped";
+    case "absent":
+    default:
+      return status.present ? "A meeting assistant is connected. Transcription is not confirmed" : "No note-taker is in this meeting";
+  }
+}
+
+// src/core/livekit-driver.ts
+function videoEffectsSupported() {
+  const scope = globalThis;
+  if (typeof scope.OffscreenCanvas === "undefined" || scope.document === void 0) return false;
+  try {
+    return scope.document.createElement("canvas").getContext("webgl2") !== null;
+  } catch {
+    return false;
+  }
+}
+var encoder = new TextEncoder();
+var decoder = new TextDecoder();
+async function createCameraPreview(deviceId, effect) {
+  let module2;
+  try {
+    module2 = await import("livekit-client");
+  } catch (error) {
+    throw new MeetError(
+      "misconfigured",
+      "livekit-client could not be loaded for the camera preview",
+      "The bundler excluded `livekit-client`; remove it from any `external` list.",
+      error
+    );
+  }
+  let track;
+  try {
+    track = await module2.createLocalVideoTrack(deviceId === null ? {} : { deviceId });
+  } catch (error) {
+    throw normalizeDeviceError(error, "meet.cameraPreview");
+  }
+  const target = track;
+  async function apply(next) {
+    if (next.kind === "none") {
+      await target.stopProcessor();
+      return;
+    }
+    const processors = await import("@livekit/track-processors");
+    await target.setProcessor(
+      next.kind === "blur" ? processors.BackgroundBlur(next.radius ?? 12) : processors.VirtualBackground(next.imageUrl)
+    );
+  }
+  if (effect.kind !== "none" && videoEffectsSupported()) {
+    try {
+      await apply(effect);
+    } catch {
+    }
+  }
+  return {
+    attach(element) {
+      track.attach(element);
+    },
+    setEffect: apply,
+    stop() {
+      track.stop();
+      track.detach();
+    }
+  };
+}
+
+// src/react/provider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var MeetContext = (0, import_global_slot.globalSlot)("ai-matrx.meet.react.context", () => (0, import_react.createContext)(null));
+function useMeetHost() {
+  return (0, import_react.useContext)(MeetContext);
+}
+function useRequiredMeetHost() {
+  const host = useMeetHost();
+  if (host === null) {
+    throw new Error(
+      "[@ai-matrx/meet] No meet host. Wrap this tree in <MeetProvider client={supabase} baseUrl={aidreamUrl} organizationId={orgId} accessToken={fn}> and render it only once auth has resolved."
+    );
+  }
+  return host;
+}
+function useMeetSnapshot() {
+  const host = useMeetHost();
+  const store = host?.store ?? null;
+  const empty = (0, import_react.useRef)(null);
+  return (0, import_react.useSyncExternalStore)(
+    (listener) => store === null ? () => void 0 : store.subscribe(listener),
+    () => store === null ? empty.current : store.snapshot(),
+    () => store === null ? empty.current : store.snapshot()
+  );
+}
+function useDeviceSnapshot() {
+  const host = useMeetHost();
+  const devices = host?.devices ?? null;
+  return (0, import_react.useSyncExternalStore)(
+    (listener) => devices === null ? () => void 0 : devices.subscribe(() => listener()),
+    () => devices?.snapshot() ?? null,
+    () => devices?.snapshot() ?? null
+  );
+}
+function useRole() {
+  const snapshot = useMeetSnapshot();
+  return snapshot === null ? "participant" : effectiveRole(snapshot);
+}
+function useIsHost() {
+  return isHostRole(useRole());
+}
+function useCanRecord() {
+  const snapshot = useMeetSnapshot();
+  if (snapshot === null) return false;
+  const me = snapshot.participants.find(
+    (participant) => participant.identity === snapshot.localIdentity
+  );
+  return snapshot.grants.canRecord || me?.canRecord === true;
+}
+
+// src/react/root.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function useCoreObservation(options = {}) {
+  const snapshot = useMeetSnapshot();
+  const { meeting, phase, reason } = options;
+  return (0, import_react3.useMemo)(
+    () => phase !== void 0 ? staticObservation(phase, reason ?? null) : observe({ snapshot, meeting: meeting ?? null }),
+    [snapshot, meeting, phase, reason]
+  );
+}
+
+// src/react/facade.ts
+var import_format2 = require("@ai-matrx/kit/format");
+
+// src/core/format.ts
+function participantSummary(participants) {
+  const names = participants.filter((p) => !p.isLocal).map((p) => p.displayName);
+  if (names.length === 0) return "Just you";
+  if (names.length === 1) return names[0] ?? "";
+  if (names.length === 2) return `${names[0]} and ${names[1]}`;
+  return `${names[0]}, ${names[1]} and ${names.length - 2} ${names.length - 2 === 1 ? "other" : "others"}`;
+}
+
+// src/core/layout.ts
+var DEFAULT_PAGE_SIZE = 12;
+function orderParticipants(participants, activeSpeakers) {
+  const speakerRank = /* @__PURE__ */ new Map();
+  activeSpeakers.forEach((identity, index) => speakerRank.set(identity, index));
+  return [...participants].sort((a, b) => {
+    const speakerA = speakerRank.get(a.identity) ?? Number.MAX_SAFE_INTEGER;
+    const speakerB = speakerRank.get(b.identity) ?? Number.MAX_SAFE_INTEGER;
+    if (speakerA !== speakerB) return speakerA - speakerB;
+    if (a.handRaised !== b.handRaised) return a.handRaised ? -1 : 1;
+    if (a.cameraEnabled !== b.cameraEnabled) return a.cameraEnabled ? -1 : 1;
+    if (a.joinedAt !== b.joinedAt) return a.joinedAt < b.joinedAt ? -1 : 1;
+    return a.identity < b.identity ? -1 : 1;
+  });
+}
+function computeStage(args) {
+  const pageSize = Math.max(1, args.pageSize ?? DEFAULT_PAGE_SIZE);
+  const ordered = orderParticipants(args.participants, args.activeSpeakers);
+  const sharer = ordered.find((participant) => participant.screenSharing) ?? null;
+  const pinnedParticipant = args.pinned === null ? null : ordered.find((participant) => participant.identity === args.pinned) ?? null;
+  const spotlit = args.spotlight == null ? null : ordered.find((participant) => participant.identity === args.spotlight) ?? null;
+  const feature = sharer !== null ? sharer : pinnedParticipant !== null && args.layout !== "grid" ? pinnedParticipant : spotlit !== null ? spotlit : args.layout === "grid" ? null : ordered[0] ?? null;
+  const rest = feature === null ? ordered : ordered.filter((participant) => participant.identity !== feature.identity);
+  const pageCount = Math.max(1, Math.ceil(rest.length / pageSize));
+  const page = Math.min(Math.max(0, args.page ?? 0), pageCount - 1);
+  const tiles = rest.slice(page * pageSize, page * pageSize + pageSize);
+  return {
+    feature,
+    tiles,
+    overflow: rest.length - tiles.length,
+    page,
+    pageCount,
+    presenting: sharer !== null
+  };
+}
+function gridColumns(count) {
+  if (count <= 1) return 1;
+  if (count <= 4) return 2;
+  if (count <= 9) return 3;
+  if (count <= 16) return 4;
+  return 5;
+}
+
+// src/react/hooks.ts
+var import_react4 = require("react");
+var import_react5 = require("@ai-matrx/realtime/react");
+
+// src/core/record.ts
+var import_format = require("@ai-matrx/kit/format");
+function activeWrapUpSummary(notes) {
+  return notes.find((note) => note.role === "summary" && note.supersededBy === null) ?? null;
+}
+var GUEST_RECORD_ACCESS_LEVELS = [
+  "none",
+  "summary",
+  "full"
+];
+var GUEST_RECORD_ACCESS_CHOICES = [
+  "default",
+  "summary",
+  "full",
+  "none"
+];
+var GUEST_RECORD_ACCESS_METADATA_KEY = "guest_record_access";
+function guestRecordAccessSetting(meeting) {
+  const raw = meeting?.metadata?.[GUEST_RECORD_ACCESS_METADATA_KEY];
+  return GUEST_RECORD_ACCESS_LEVELS.includes(raw) ? raw : "default";
+}
+function guestRecordAccessLabel(setting) {
+  switch (setting) {
+    case "default":
+      return "Use my organization's setting";
+    case "summary":
+      return "Summary, decisions and action items";
+    case "full":
+      return "Everything, including the transcript";
+    case "none":
+      return "Nothing \u2014 keep the record internal";
+  }
+}
+function guestRecordAccessExplanation(setting) {
+  switch (setting) {
+    case "default":
+      return "Guests who attended read whatever your organization shares by default. An administrator sets that once, for every meeting nobody thinks about.";
+    case "summary":
+      return "Guests who attended read the wrap-up summary, the decisions, the action items, the notes taken as it happened, and who was here. They do not get the word-for-word transcript or the recording.";
+    case "full":
+      return "Guests who attended read everything this meeting produced, including the word-for-word transcript of what each person said.";
+    case "none":
+      return "Guests who attended are told plainly that this meeting's record is kept inside your organization. They see nothing of it.";
+  }
+}
+async function readRefusal(response) {
+  try {
+    const body = await response.json();
+    const detail = typeof body["detail"] === "object" && body["detail"] !== null ? body["detail"] : body;
+    const message = detail["message"];
+    const remedy = detail["remedy"];
+    if (typeof message === "string" && message.length > 0) {
+      return {
+        message,
+        remedy: typeof remedy === "string" && remedy.length > 0 ? remedy : "Ask whoever hosted the meeting for what you need."
+      };
+    }
+  } catch {
+  }
+  return {
+    message: `This meeting's record could not be read (the server answered ${response.status}).`,
+    remedy: "This is not a decision about you \u2014 it is a failure to reach the record. Reload the page; if it repeats, tell whoever hosted the meeting."
+  };
+}
+async function setGuestRecordAccess(args) {
+  const response = await args.api.request({
+    path: MEET_ROUTES.recordAccess,
+    method: "POST",
+    requireAuth: true,
+    operation: "meet.record.access",
+    body: {
+      meeting_id: args.meetingId,
+      organization_id: args.organizationId,
+      access: args.access
+    }
+  });
+  if (!response.ok) {
+    const refusal = await readRefusal(response);
+    throw new MeetError("forbidden", refusal.message, refusal.remedy);
+  }
+  const body = await response.json();
+  const payload = typeof body["data"] === "object" && body["data"] !== null ? body["data"] : body;
+  return {
+    setting: payload.setting ?? args.access,
+    effective: payload.effective ?? { level: "summary", source: "organization" }
+  };
+}
+
+// src/react/hooks.ts
+var EMPTY_NAMES = {};
+var NO_RUNTIME_REMEDY = "Render this inside a <MeetProvider> that has a Supabase client, an organization id and an identity (userId or guestName). The provider stays inert until all three are real, and while it is inert this package's components render nothing rather than a dead control.";
+function noRuntime(action) {
+  return new MeetError(
+    "misconfigured",
+    `[@ai-matrx/meet] ${action}: there is no meet runtime on this tree.`,
+    NO_RUNTIME_REMEDY
+  );
+}
+function requireHost(host, action) {
+  if (host === null) throw noRuntime(action);
+  return host;
+}
+function requireEngine(engine, action) {
+  if (engine === null) throw noRuntime(action);
+  return engine;
+}
+function requireSession(session, action) {
+  if (session === null) throw noRuntime(action);
+  return session;
+}
+function useRoom() {
+  const host = useMeetHost();
+  const snapshot = useMeetSnapshot();
+  const engine = host?.engine ?? null;
+  const local = snapshot?.participants.find(
+    (participant) => participant.identity === snapshot.localIdentity
+  ) ?? null;
+  return {
+    phase: snapshot?.phase ?? "idle",
+    participants: snapshot?.participants ?? [],
+    failure: snapshot?.failure ?? null,
+    local,
+    canShareScreen: engine?.supportsScreenShare() ?? true,
+    join: (0, import_react4.useCallback)(
+      async (request) => requireEngine(engine, "join").join(request),
+      [engine]
+    ),
+    leave: (0, import_react4.useCallback)(async () => requireEngine(engine, "leave").leave(), [engine]),
+    toggleMicrophone: (0, import_react4.useCallback)(
+      async () => requireEngine(engine, "toggleMicrophone").setMicrophoneEnabled(
+        !(local?.micEnabled ?? false)
+      ),
+      [engine, local]
+    ),
+    toggleCamera: (0, import_react4.useCallback)(
+      async () => requireEngine(engine, "toggleCamera").setCameraEnabled(!(local?.cameraEnabled ?? false)),
+      [engine, local]
+    ),
+    toggleScreenShare: (0, import_react4.useCallback)(
+      async () => requireEngine(engine, "toggleScreenShare").setScreenShareEnabled(
+        !(local?.screenSharing ?? false)
+      ),
+      [engine, local]
+    ),
+    toggleHand: (0, import_react4.useCallback)(
+      async () => requireEngine(engine, "toggleHand").raiseHand(!(local?.handRaised ?? false)),
+      [engine, local]
+    ),
+    react: (0, import_react4.useCallback)(
+      async (emoji) => requireEngine(engine, "react").react(emoji),
+      [engine]
+    ),
+    sendChat: (0, import_react4.useCallback)(
+      async (text) => {
+        if (host === null) throw noRuntime("sendChat");
+        await host.inRoom.sendChat(text);
+      },
+      [host]
+    ),
+    sendPrivateChat: (0, import_react4.useCallback)(
+      async (to, text) => requireEngine(engine, "sendPrivateChat").sendPrivateChat(to, text),
+      [engine]
+    ),
+    pin: (0, import_react4.useCallback)(
+      (identity) => requireEngine(engine, "pin").pin(identity),
+      [engine]
+    ),
+    setLayout: (0, import_react4.useCallback)(
+      (layout) => requireEngine(engine, "setLayout").setLayout(layout),
+      [engine]
+    )
+  };
+}
+function useStage(pageSize = DEFAULT_PAGE_SIZE) {
+  const snapshot = useMeetSnapshot();
+  const [page, setPage] = (0, import_react4.useState)(0);
+  const stage = (0, import_react4.useMemo)(
+    () => computeStage({
+      participants: snapshot?.participants ?? [],
+      layout: snapshot?.layout ?? "grid",
+      pinned: snapshot?.pinned ?? null,
+      spotlight: snapshot?.spotlight ?? null,
+      activeSpeakers: snapshot?.activeSpeakers ?? [],
+      pageSize,
+      page
+    }),
+    [snapshot, pageSize, page]
+  );
+  (0, import_react4.useEffect)(() => {
+    if (page > stage.pageCount - 1) setPage(Math.max(0, stage.pageCount - 1));
+  }, [page, stage.pageCount]);
+  return stage;
+}
+function useTrack(identity, kind) {
+  const host = useMeetHost();
+  const detachRef = (0, import_react4.useRef)(null);
+  return (0, import_react4.useCallback)(
+    (element) => {
+      detachRef.current?.();
+      detachRef.current = null;
+      if (element === null || identity === null || host === null) return;
+      detachRef.current = host.engine.attach(identity, kind, element);
+    },
+    [host, identity, kind]
+  );
+}
+function useLobby() {
+  const host = useMeetHost();
+  const snapshot = useMeetSnapshot();
+  const isHost = useIsHost();
+  const session = host?.meetings ?? null;
+  return {
+    waiting: (snapshot?.lobby ?? []).filter((entry) => entry.state === "knocking"),
+    // No runtime means no host powers — `<LobbyPanel>` renders nothing rather
+    // than an admit button that would throw.
+    canAdmit: session !== null && isHost,
+    admit: (0, import_react4.useCallback)(
+      async (entry) => requireSession(session, "admit").admit(entry, true),
+      [session]
+    ),
+    deny: (0, import_react4.useCallback)(
+      async (entry) => requireSession(session, "deny").admit(entry, false),
+      [session]
+    ),
+    admitAll: (0, import_react4.useCallback)(
+      async () => requireSession(session, "admitAll").admitAll(),
+      [session]
+    ),
+    knock: (0, import_react4.useCallback)(
+      (roomName) => requireSession(session, "knock").knock(roomName),
+      [session]
+    )
+  };
+}
+function useRecording() {
+  const host = useMeetHost();
+  const snapshot = useMeetSnapshot();
+  const canRecord = useCanRecord();
+  const meeting = snapshot?.meeting ?? null;
+  const state = snapshot?.recording ?? "idle";
+  const canStart = host !== null && canRecord && host.recording.canStart(meeting, true) && !isRecordingInFlight(state);
+  return {
+    state,
+    label: recordingLabel(state),
+    canStart,
+    // `stopping` is already stopping; the other in-flight states can be.
+    canStop: host !== null && canRecord && (state === "recording" || state === "starting"),
+    consentNotice: host?.recording.consentNotice(meeting) ?? null,
+    start: (0, import_react4.useCallback)(async () => {
+      const live = requireHost(host, "startRecording");
+      if (meeting === null || live.identity.userId === null) return;
+      await live.recording.start({
+        meetingId: meeting.id,
+        roomName: meeting.roomName,
+        by: live.identity.userId
+      });
+    }, [host, meeting]),
+    stop: (0, import_react4.useCallback)(async () => {
+      const live = requireHost(host, "stopRecording");
+      if (meeting === null || live.identity.userId === null) return;
+      await live.recording.stop({ meetingId: meeting.id, by: live.identity.userId });
+    }, [host, meeting])
+  };
+}
+function useMeetAi() {
+  const host = useMeetHost();
+  const snapshot = useMeetSnapshot();
+  const isHost = useIsHost();
+  const [asking, setAsking] = (0, import_react4.useState)(false);
+  const [answer, setAnswer] = (0, import_react4.useState)(null);
+  const [coverage, setCoverage] = (0, import_react4.useState)(null);
+  const [phase, setPhase] = (0, import_react4.useState)(null);
+  const [error, setError] = (0, import_react4.useState)(null);
+  const ai = host?.ai ?? null;
+  const meeting = snapshot?.meeting ?? null;
+  const participants = snapshot?.participants ?? [];
+  const notes = snapshot?.notes ?? [];
+  const wrapUp = snapshot?.wrapUp ?? null;
+  const status = (0, import_react4.useMemo)(
+    () => noteTakerStatus({
+      meeting,
+      participants,
+      refusal: snapshot?.noteTakerRefusal ?? null
+    }),
+    [meeting, participants, snapshot?.noteTakerRefusal]
+  );
+  const names = snapshot?.names ?? EMPTY_NAMES;
+  const transcript = (0, import_react4.useMemo)(
+    () => readableTranscript(snapshot?.transcript ?? []).map((line) => ({
+      id: line.id,
+      identity: line.identity,
+      // 🚨 RESOLVED, not rendered raw (MRI-A16). A line stamped before its
+      // speaker's name was known — a durable row that beat the roster, a
+      // caption from someone who has since left — is re-attributed the moment
+      // anything learns the name, in BOTH lanes, so the host and the guest
+      // never read two different names for one speaker again (MRI-C8).
+      speaker: displayNameFor(names, line.identity, line.speaker),
+      text: line.text,
+      final: line.final,
+      source: line.source
+    })),
+    [snapshot?.transcript, names]
+  );
+  const dispatchNoteTaker = (0, import_react4.useCallback)(
+    async (run) => {
+      setError(null);
+      try {
+        await run();
+      } catch (thrown) {
+        setError({
+          message: thrown.message,
+          remedy: thrown.remedy ?? "The note-taker action could not be confirmed. Check its current state and try again."
+        });
+      }
+    },
+    []
+  );
+  return {
+    noteTaker: status,
+    noteTakerLabel: noteTakerLabel(status),
+    // A guest cannot dispatch an agent, and neither can anyone in a meeting
+    // whose AI is off. The control is ABSENT for them, never disabled-looking.
+    canControlNoteTaker: ai !== null && meeting !== null && meeting.aiEnabled && isHost && host?.identity.userId !== null,
+    notes: notes.filter((note) => note.kind === "note" && note.role === null),
+    // D20: the wrap-up is the authoritative post-meeting set. A window-written
+    // decision the wrap-up superseded stays in `notes` — the timeline — and is
+    // not listed a second time as a decision that was made.
+    decisions: notes.filter((note) => note.kind === "decision" && note.supersededBy === null),
+    actionItems: notes.filter(
+      (note) => note.kind === "action-item" && note.supersededBy === null
+    ),
+    summary: activeWrapUpSummary(notes),
+    wrapUp,
+    transcript,
+    asking,
+    answer,
+    coverage,
+    phase,
+    error,
+    ask: (0, import_react4.useCallback)(
+      async (question) => {
+        if (ai === null || meeting === null) return;
+        setAsking(true);
+        setError(null);
+        setAnswer(null);
+        setCoverage(null);
+        setPhase(null);
+        try {
+          const result = await ai.ask({
+            meetingId: meeting.id,
+            question,
+            // THE ANSWER RENDERS AS IT ARRIVES. Waiting for the last token to
+            // show the first is a spinner wearing an answer's clothes.
+            onText: (text) => setAnswer(text),
+            onPhase: (value) => setPhase(value)
+          });
+          setAnswer(result.text);
+          setCoverage(result.coverage);
+        } catch (thrown) {
+          setError({
+            message: thrown.message,
+            remedy: thrown.remedy ?? "The assistant could not answer. Nothing was changed by the attempt."
+          });
+        } finally {
+          setAsking(false);
+          setPhase(null);
+        }
+      },
+      [ai, meeting]
+    ),
+    startNoteTaker: (0, import_react4.useCallback)(async () => {
+      if (ai === null || meeting === null) return;
+      await dispatchNoteTaker(
+        () => ai.startNoteTaker({ meetingId: meeting.id, roomName: meeting.roomName })
+      );
+    }, [ai, meeting, dispatchNoteTaker]),
+    stopNoteTaker: (0, import_react4.useCallback)(async () => {
+      if (ai === null || meeting === null) return;
+      await dispatchNoteTaker(() => ai.stopNoteTaker({ meetingId: meeting.id }));
+    }, [ai, meeting, dispatchNoteTaker])
+  };
+}
+function useEndMeeting() {
+  const host = useMeetHost();
+  const snapshot = useMeetSnapshot();
+  const isHost = useIsHost();
+  const [ending, setEnding] = (0, import_react4.useState)(false);
+  const [notice, setNotice] = (0, import_react4.useState)(null);
+  const meeting = snapshot?.meeting ?? null;
+  const session = host?.meetings ?? null;
+  return {
+    canEnd: session !== null && isHost && meeting !== null && meeting.endedAt === null,
+    ending,
+    ended: meeting?.endedAt !== null && meeting?.endedAt !== void 0,
+    notice,
+    end: (0, import_react4.useCallback)(async () => {
+      const live = requireSession(session, "endForEveryone");
+      setEnding(true);
+      setNotice(null);
+      try {
+        const result = await live.endForEveryone();
+        if (!result.served) {
+          setNotice(END_MEETING_NOT_SERVED);
+        }
+      } catch (thrown) {
+        const remedy = thrown.remedy;
+        setNotice(
+          remedy !== void 0 ? `${thrown.message} ${remedy}` : thrown.message
+        );
+      } finally {
+        setEnding(false);
+      }
+    }, [session])
+  };
+}
+function useConsentNotice() {
+  const snapshot = useMeetSnapshot();
+  const agent = noteTakerParticipant(snapshot?.participants ?? []);
+  if (agent === null) return null;
+  return `${agent.displayName} is in this meeting: it is transcribing what is said and writing notes everyone here can read.`;
+}
+function useLocalMedia() {
+  const snapshot = useMeetSnapshot();
+  return snapshot?.media ?? IDLE_MEDIA;
+}
+function useReactions() {
+  const host = useMeetHost();
+  const snapshot = useMeetSnapshot();
+  const store = host?.store ?? null;
+  (0, import_react4.useEffect)(() => {
+    if (store === null) return void 0;
+    const timer = setInterval(() => store.expireReactions(Date.now()), REACTION_TTL_MS / 2);
+    return () => clearInterval(timer);
+  }, [store]);
+  return snapshot?.reactions ?? [];
+}
+function useElapsed(startedAt) {
+  const [now, setNow] = (0, import_react4.useState)(() => Date.now());
+  (0, import_react4.useEffect)(() => {
+    if (startedAt === null) return void 0;
+    const timer = setInterval(() => setNow(Date.now()), 1e3);
+    return () => clearInterval(timer);
+  }, [startedAt]);
+  if (startedAt === null) return 0;
+  return Math.max(0, now - Date.parse(startedAt));
+}
+function useHostControls() {
+  const host = useMeetHost();
+  const snapshot = useMeetSnapshot();
+  const role = useRole();
+  const me = snapshot?.participants.find(
+    (participant) => participant.identity === snapshot.localIdentity
+  );
+  const actor = me === void 0 ? void 0 : { ...me, role };
+  const [busy, setBusy] = (0, import_react4.useState)(false);
+  const inRoom = host?.inRoom ?? null;
+  const store = host?.store ?? null;
+  const notice = snapshot?.actionNotice ?? null;
+  const setNotice = (0, import_react4.useCallback)(
+    (next) => store?.patch({ actionNotice: next === null ? null : { ...next, at: Date.now() } }),
+    [store]
+  );
+  const run = (0, import_react4.useCallback)(
+    async (request) => {
+      if (inRoom === null) throw noRuntime(`moderate(${request.action})`);
+      setBusy(true);
+      try {
+        const result = await inRoom.moderate(request);
+        setNotice({ text: result.message, failed: false });
+        return result;
+      } catch (thrown) {
+        const error = thrown;
+        setNotice({
+          text: [error.message, error.remedy].filter(Boolean).join(" "),
+          failed: true
+        });
+        return null;
+      } finally {
+        setBusy(false);
+      }
+    },
+    [inRoom, setNotice]
+  );
+  return {
+    isHost: isHostRole(role),
+    isOwner: role === "host",
+    notice,
+    busy,
+    clearNotice: (0, import_react4.useCallback)(() => setNotice(null), [setNotice]),
+    canModerate: (0, import_react4.useCallback)(
+      (target) => canModerateParticipant(actor, target),
+      [actor]
+    ),
+    run,
+    mute: (0, import_react4.useCallback)(
+      async (target) => {
+        await run({ action: "mute", identity: target.identity });
+      },
+      [run]
+    ),
+    remove: (0, import_react4.useCallback)(
+      async (target) => {
+        await run({ action: "remove", identity: target.identity });
+      },
+      [run]
+    )
+  };
+}
+function useHandQueue() {
+  const snapshot = useMeetSnapshot();
+  return (0, import_react4.useMemo)(
+    () => (snapshot?.participants ?? []).filter((participant) => participant.handRaised).sort((a, b) => (a.handRaisedAt ?? 0) - (b.handRaisedAt ?? 0)),
+    [snapshot?.participants]
+  );
+}
+function useMediaEffects() {
+  const host = useMeetHost();
+  const snapshot = useMeetSnapshot();
+  const engine = host?.engine ?? null;
+  return {
+    effects: snapshot?.effects ?? DEFAULT_EFFECTS,
+    backgroundsSupported: engine?.supportsVideoEffects() ?? false,
+    set: (0, import_react4.useCallback)(
+      async (next) => requireEngine(engine, "setEffects").setEffects(next),
+      [engine]
+    )
+  };
+}
+function useModerationNotice() {
+  const host = useMeetHost();
+  const snapshot = useMeetSnapshot();
+  return {
+    notice: snapshot?.moderationNotice ?? null,
+    dismiss: (0, import_react4.useCallback)(() => host?.store.patch({ moderationNotice: null }), [host])
+  };
+}
+function useAudioLevel(stream) {
+  const [level, setLevel] = (0, import_react4.useState)(0);
+  (0, import_react4.useEffect)(() => {
+    if (stream === null || stream.getAudioTracks().length === 0) {
+      setLevel(0);
+      return void 0;
+    }
+    const Context = globalThis.AudioContext ?? globalThis.webkitAudioContext;
+    if (Context === void 0) return void 0;
+    const context = new Context();
+    const source = context.createMediaStreamSource(stream);
+    const analyser = context.createAnalyser();
+    analyser.fftSize = 512;
+    source.connect(analyser);
+    const samples = new Uint8Array(analyser.fftSize);
+    let frame = 0;
+    const tick = () => {
+      analyser.getByteTimeDomainData(samples);
+      let peak = 0;
+      for (const sample of samples) peak = Math.max(peak, Math.abs(sample - 128) / 128);
+      setLevel((previous) => Math.abs(previous - peak) > 0.02 ? peak : previous);
+      frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => {
+      cancelAnimationFrame(frame);
+      source.disconnect();
+      void context.close();
+    };
+  }, [stream]);
+  return level;
+}
+var MEET_SHORTCUTS = [
+  { id: "mic", keys: "\u2318/Ctrl + D", label: "Mute or unmute your microphone" },
+  { id: "camera", keys: "\u2318/Ctrl + E", label: "Turn your camera on or off" },
+  { id: "hand", keys: "\u2318/Ctrl + Alt + H", label: "Raise or lower your hand" },
+  { id: "chat", keys: "\u2318/Ctrl + Alt + C", label: "Open or close chat" },
+  { id: "people", keys: "\u2318/Ctrl + Alt + P", label: "Open or close people" },
+  { id: "help", keys: "Shift + ?", label: "Show keyboard shortcuts" }
+];
+function useMeetShortcuts(handlers) {
+  const ref = (0, import_react4.useRef)(handlers);
+  ref.current = handlers;
+  (0, import_react4.useEffect)(() => {
+    const target = globalThis.window;
+    if (target === void 0) return void 0;
+    const onKey = (event) => {
+      const element = event.target;
+      const typing = element !== null && (element.isContentEditable || element.tagName === "INPUT" || element.tagName === "TEXTAREA" || element.tagName === "SELECT");
+      const mod = event.metaKey || event.ctrlKey;
+      const key = event.key.toLowerCase();
+      let id = null;
+      if (mod && !event.altKey && !event.shiftKey && key === "d") id = "mic";
+      else if (mod && !event.altKey && !event.shiftKey && key === "e") id = "camera";
+      else if (mod && event.altKey && (event.code === "KeyH" || key === "h")) id = "hand";
+      else if (mod && event.altKey && (event.code === "KeyC" || key === "c")) id = "chat";
+      else if (mod && event.altKey && (event.code === "KeyP" || key === "p")) id = "people";
+      else if (!mod && !typing && event.key === "?") id = "help";
+      if (id === null) return;
+      const handler = ref.current[id];
+      if (handler === void 0) return;
+      event.preventDefault();
+      handler();
+    };
+    target.addEventListener("keydown", onKey);
+    return () => target.removeEventListener("keydown", onKey);
+  }, []);
+}
+function useGuestRecordAccess(meeting) {
+  const host = useMeetHost();
+  const api = host?.api ?? null;
+  const stored = guestRecordAccessSetting(meeting);
+  const [chosen, setChosen] = (0, import_react4.useState)(null);
+  const [effective, setEffective] = (0, import_react4.useState)(null);
+  const [saving, setSaving] = (0, import_react4.useState)(false);
+  const [error, setError] = (0, import_react4.useState)(null);
+  (0, import_react4.useEffect)(() => {
+    setChosen(null);
+  }, [stored, meeting?.id]);
+  return {
+    setting: chosen ?? stored,
+    effective,
+    saving,
+    error,
+    choose: (0, import_react4.useCallback)(
+      async (next) => {
+        if (api === null || meeting === null) return;
+        setSaving(true);
+        setError(null);
+        try {
+          const result = await setGuestRecordAccess({
+            api,
+            meetingId: meeting.id,
+            organizationId: meeting.organizationId,
+            access: next
+          });
+          setChosen(result.setting);
+          setEffective(result.effective);
+        } catch (thrown) {
+          setError({
+            message: thrown.message,
+            remedy: thrown.remedy ?? "Nothing was changed. Reload the page and try again."
+          });
+        } finally {
+          setSaving(false);
+        }
+      },
+      [api, meeting]
+    )
+  };
+}
+
+// src/core/collab-state.ts
+function availableActivities(collab, isHost) {
+  const settings = collab?.settings ?? null;
+  if (settings === null) return [];
+  const out = [];
+  if (settings.whiteboardEnabled) out.push("whiteboard");
+  if (settings.pollsEnabled && (isHost || (collab?.polls.length ?? 0) > 0)) out.push("polls");
+  if (settings.qaEnabled) out.push("qa");
+  if (settings.breakoutsEnabled && (isHost || collab?.breakout?.state === "open")) out.push("breakouts");
+  return out;
+}
+function activityAttention(collab, isHost) {
+  if (collab === null) return false;
+  if (collab.polls.some((poll) => poll.state === "live" && poll.myVote.length === 0 && !isHost)) return true;
+  if (isHost && collab.questions.some((q) => q.state === "open")) return true;
+  return false;
+}
+async function performCollab(runtime, request) {
+  if (runtime === null) return { ok: false, message: "This meeting is not connected." };
+  try {
+    const result = await runtime.inRoom.collab(request);
+    return { ok: true, message: result.message, itemId: result.itemId };
+  } catch (error) {
+    return { ok: false, message: error.message ?? "That did not work." };
+  }
+}
+async function moveToRoom(runtime, roomId) {
+  if (runtime === null) return { ok: false, message: "This meeting is not connected." };
+  try {
+    await runtime.engine.moveToBreakout(roomId);
+    return { ok: true, message: roomId === null ? "Back in the main room." : "Joined the breakout room." };
+  } catch (error) {
+    return { ok: false, message: error.message ?? "That room could not be joined." };
+  }
+}
+function untranslatedLines(lines, translations) {
+  return lines.filter((line) => line.final && translations[line.id] === void 0).map(({ id, text }) => ({ id, text }));
+}
+function nextTranslationBatch(pending, language, asked) {
+  const batch = pending.filter((line) => !asked.has(`${language}:${line.id}`)).slice(-20);
+  for (const line of batch) asked.add(`${language}:${line.id}`);
+  return batch;
+}
+function setCaptionLanguage(store, next) {
+  store.patch({
+    collab: {
+      ...store.snapshot().collab,
+      captionLanguage: next,
+      captionTranslations: {},
+      captionTranslationError: null
+    }
+  });
+}
+function takePanelRequest(store) {
+  const request = store.snapshot().collab.panelRequest;
+  if (request === null) return null;
+  store.patch({ collab: { ...store.snapshot().collab, panelRequest: null } });
+  return request.panel;
+}
+function takeMoveRequest(store) {
+  const request = store.snapshot().collab.moveRequest;
+  if (request === null) return null;
+  store.patch({ collab: { ...store.snapshot().collab, moveRequest: null } });
+  return { roomId: request.roomId };
+}
+
+// src/react/collab-hooks.ts
+var import_react6 = require("react");
+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,
+    act: (request) => performCollab(host, request),
+    moveTo: (roomId) => moveToRoom(host, roomId)
+  };
+}
+function useAvailableActivities() {
+  const { collab, isHost } = useCollab();
+  return availableActivities(collab, isHost);
+}
+function useActivityAttention() {
+  const { collab, isHost } = useCollab();
+  return activityAttention(collab, isHost);
+}
+function useCaptionTranslation(lines) {
+  const host = useMeetHost();
+  const snapshot = useMeetSnapshot();
+  const collab = snapshot?.collab ?? null;
+  const language = collab?.captionLanguage ?? null;
+  const asked = (0, import_react6.useRef)(/* @__PURE__ */ new Set());
+  const translations = collab?.captionTranslations ?? {};
+  const missing = untranslatedLines(lines, translations);
+  const key = `${language ?? ""}|${missing.map((l) => l.id).join(",")}`;
+  const pending = (0, import_react6.useRef)(missing);
+  pending.current = missing;
+  (0, import_react6.useEffect)(() => {
+    if (host === null || language === null) return;
+    const batch = nextTranslationBatch(pending.current, language, asked.current);
+    if (batch.length === 0) return;
+    void host.inRoom.translateCaptions(language, batch).catch(() => void 0);
+  }, [host, language, key]);
+  return { language, translations, error: collab?.captionTranslationError ?? null };
+}
+function useCollabPanelRequest(onRequest) {
+  const host = useMeetHost();
+  const at = useMeetSnapshot()?.collab.panelRequest?.at ?? null;
+  const callback = (0, import_react6.useRef)(onRequest);
+  callback.current = onRequest;
+  (0, import_react6.useEffect)(() => {
+    if (host === null) return;
+    const panel = takePanelRequest(host.store);
+    if (panel === null) return;
+    callback.current(panel);
+  }, [at, host]);
+}
+
+// src/core/reactions.ts
+var MEET_REACTIONS = ["\u{1F496}", "\u{1F44D}", "\u{1F389}", "\u{1F44F}", "\u{1F602}", "\u{1F62E}", "\u{1F622}", "\u{1F914}", "\u{1F44E}"];
+
+// src/react/facade.ts
+function useMeetCore() {
+  const host = useMeetHost();
+  const snapshot = useMeetSnapshot();
+  const devices = useDeviceSnapshot();
+  const role = useRole();
+  const isHost = useIsHost();
+  const observation = useCoreObservation();
+  return (0, import_react7.useMemo)(
+    () => ({ host, snapshot, devices, role, isHost, observation }),
+    [host, snapshot, devices, role, isHost, observation]
+  );
+}
+
+// src/skins/meet/components.tsx
+var import_design_system = require("@ai-matrx/design-system");
+
+// src/skins/meet/collab.tsx
+var import_react8 = require("react");
+
+// src/skins/meet/icons.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Icon({ children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.75",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      ...props,
+      children
+    }
+  );
+}
+function MicIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 19v3" })
+  ] });
+}
+function MicOffIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M2 2l20 20" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M15 9.34V5a3 3 0 0 0-5.94-.6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M19 10v2a7 7 0 0 1-.11 1.23M5 10v2a7 7 0 0 0 11 5.66" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 19v3" })
+  ] });
+}
+function CameraIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m23 7-7 5 7 5V7Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "1", y: "5", width: "15", height: "14", rx: "2" })
+  ] });
+}
+function CameraOffIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M2 2l20 20" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M10.66 5H14a2 2 0 0 1 2 2v3.34l1 1L23 7v10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M16 16a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2" })
+  ] });
+}
+function ScreenShareIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M8 21h8M12 17v4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 13V8m0 0-2.5 2.5M12 8l2.5 2.5" })
+  ] });
+}
+function PhoneIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z" }) });
+}
+function PhoneOffIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { fill: "currentColor", stroke: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08a.99.99 0 0 1-.29-.7c0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28a11.27 11.27 0 0 0-2.67-1.85.996.996 0 0 1-.56-.9v-3.1C15.15 9.25 13.6 9 12 9Z" }) });
+}
+function HandIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M18 11V6a2 2 0 0 0-4 0v5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M14 10V4a2 2 0 0 0-4 0v7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M10 10.5V6a2 2 0 0 0-4 0v8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2a8 8 0 0 1-8-8v-1a2 2 0 1 1 4 0" })
+  ] });
+}
+function ChatIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z" }) });
+}
+function PeopleIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "9", cy: "7", r: "4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" })
+  ] });
+}
+function RecordIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "8", fill: "currentColor", stroke: "none" }) });
+}
+function SparklesIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 3l1.9 4.6L18.5 9.5l-4.6 1.9L12 16l-1.9-4.6L5.5 9.5l4.6-1.9L12 3Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M19 15l.9 2.1 2.1.9-2.1.9-.9 2.1-.9-2.1-2.1-.9 2.1-.9L19 15Z" })
+  ] });
+}
+function LockIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "4", y: "10", width: "16", height: "11", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M8 10V7a4 4 0 0 1 8 0v3" })
+  ] });
+}
+function LayoutIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M3 9h18M9 21V9" })
+  ] });
+}
+function SettingsIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z" })
+  ] });
+}
+function CheckIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M20 6 9 17l-5-5" }) });
+}
+function CloseIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M18 6 6 18M6 6l12 12" }) });
+}
+function PinIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 17v5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9 2h6l-1 6 3.5 3.5V14H6.5v-2.5L10 8 9 2Z" })
+  ] });
+}
+function WifiLowIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 20h.01" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M8.5 16.5a5 5 0 0 1 7 0" })
+  ] });
+}
+function SmileIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "9", x2: "9.01", y1: "9", y2: "9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "15", x2: "15.01", y1: "9", y2: "9" })
+  ] });
+}
+function MoreIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "19", cy: "12", r: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "5", cy: "12", r: "1" })
+  ] });
+}
+function SearchIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m21 21-4.3-4.3" })
+  ] });
+}
+function KeyboardIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M10 8h.01M12 12h.01M14 8h.01M16 12h.01M18 8h.01M6 8h.01M7 16h10M8 12h.01" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "20", height: "16", x: "2", y: "4", rx: "2" })
+  ] });
+}
+function SpotlightIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 2 15 8.5 22 9.3 17 14 18.2 21 12 17.6 5.8 21 7 14 2 9.3 9 8.5Z" }) });
+}
+function SignalIcon({ bars, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 20v-2", opacity: bars >= 1 ? 1 : 0.3 }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M10 20v-6", opacity: bars >= 2 ? 1 : 0.3 }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M16 20V9", opacity: bars >= 3 ? 1 : 0.3 }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M22 20V4", opacity: bars >= 3 ? 1 : 0.3 })
+  ] });
+}
+function SpeakerIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M11 5 6 9H2v6h4l5 4V5Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14" })
+  ] });
+}
+function FlagIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "4", x2: "4", y1: "22", y2: "15" })
+  ] });
+}
+function PencilIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }) });
+}
+function ActivitiesIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "17.5", cy: "17.5", r: "3.5" })
+  ] });
+}
+function PollIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "18", x2: "18", y1: "20", y2: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", x2: "12", y1: "20", y2: "4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "6", x2: "6", y1: "20", y2: "14" })
+  ] });
+}
+function QuestionIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 17h.01" })
+  ] });
+}
+function WhiteboardIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M2 3h20" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m7 21 5-5 5 5" })
+  ] });
+}
+function BreakoutIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "7", height: "18", x: "3", y: "3", rx: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "7", height: "7", x: "14", y: "3", rx: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "7", height: "7", x: "14", y: "14", rx: "1" })
+  ] });
+}
+function UpvoteIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9 18v-6H5l7-7 7 7h-4v6H9z" }) });
+}
+function EraserIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M22 21H7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m5 11 9 9" })
+  ] });
+}
+function HighlighterIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m9 11-6 6v3h9l3-3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4" })
+  ] });
+}
+function UndoIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Icon, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9 14 4 9l5-5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11" })
+  ] });
+}
+
+// src/skins/meet/collab.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function useNotice() {
+  const [notice, setNotice] = (0, import_react8.useState)(null);
+  (0, import_react8.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime4.jsx)("p", { className: notice.failed ? "mx-meet__panel-note mx-meet__collab-error" : "mx-meet__panel-note", role: "status", children: notice.text });
+}
+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__ */ (0, import_jsx_runtime4.jsx)(PollIcon, { ...props });
+  if (panel === "qa") return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(QuestionIcon, { ...props });
+  if (panel === "whiteboard") return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WhiteboardIcon, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BreakoutIcon, { ...props });
+}
+function ActivitiesControl({
+  active,
+  onOpen
+}) {
+  const [open, setOpen] = (0, import_react8.useState)(false);
+  const available = useAvailableActivities();
+  const attention = useActivityAttention();
+  if (available.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "mx-meet__anchor", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ControlButton, { label: "Activities", active: open || active !== null, onClick: () => setOpen(!open), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ActivitiesIcon, {}),
+      attention ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__dot", "aria-hidden": "true" }) : null
+    ] }),
+    open ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Popover, { label: "Activities", onClose: () => setOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mx-meet__menu", role: "menu", children: available.map((panel) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      MenuItem,
+      {
+        onSelect: () => {
+          setOpen(false);
+          onOpen(panel);
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ActivityIcon, { panel }),
+          " ",
+          ACTIVITY_LABELS[panel]
+        ]
+      },
+      panel
+    )) }) }) : null
+  ] });
+}
+function PollComposer({ maxOptions, onDone }) {
+  const { act } = useCollab();
+  const [question, setQuestion] = (0, import_react8.useState)("");
+  const [options, setOptions] = (0, import_react8.useState)(["", ""]);
+  const [multiple, setMultiple] = (0, import_react8.useState)(false);
+  const [anonymous, setAnonymous] = (0, import_react8.useState)(false);
+  const [busy, setBusy] = (0, import_react8.useState)(false);
+  const [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__ */ (0, import_jsx_runtime4.jsxs)(
+    "form",
+    {
+      className: "mx-meet__collab-card",
+      onSubmit: (event) => {
+        event.preventDefault();
+        if (ready) void save(true);
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "mx-meet__field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__field-label", children: "Question" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "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__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-meet__composer-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "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__ */ (0, import_jsx_runtime4.jsx)(ControlButton, { label: `Remove answer ${index + 1}`, onClick: () => setOptions(options.filter((_, i) => i !== index)), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CloseIcon, { width: 14, height: 14 }) }) : null
+        ] }, index)),
+        options.length < maxOptions ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__link", onClick: () => setOptions([...options, ""]), children: "Add an answer" }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "mx-meet__toggle", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "checkbox", checked: multiple, onChange: (event) => setMultiple(event.target.checked) }),
+          "People can pick more than one"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "mx-meet__toggle", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "checkbox", checked: anonymous, onChange: (event) => setAnonymous(event.target.checked) }),
+          "Anonymous \u2014 nobody sees who picked what"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Notice, { notice }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-meet__collab-actions", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "submit", className: "mx-meet__primary mx-meet__primary--small", disabled: !ready || busy, children: "Launch" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__chip", disabled: !ready || busy, onClick: () => void save(false), children: "Save draft" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__link", onClick: onDone, children: "Cancel" })
+        ] })
+      ]
+    }
+  );
+}
+function PollCard({ poll }) {
+  const { act, isHost } = useCollab();
+  const [picked, setPicked] = (0, import_react8.useState)(poll.myVote.slice());
+  const [notice, show] = useNotice();
+  (0, import_react8.useEffect)(() => setPicked(poll.myVote.slice()), [poll.myVote]);
+  const counts = poll.options.some((o) => o.votes !== void 0);
+  const total = poll.options.reduce((sum, o) => sum + (o.votes ?? 0), 0);
+  const canVote = poll.state === "live";
+  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__ */ (0, import_jsx_runtime4.jsxs)("article", { className: "mx-meet__collab-card", "aria-label": poll.question, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("header", { className: "mx-meet__collab-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { className: "mx-meet__collab-title", children: poll.question }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__collab-state", children: stateWord })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "mx-meet__panel-note", children: [
+      poll.multiple ? "Pick any." : "Pick one.",
+      poll.anonymous ? " Anonymous." : "",
+      counts && poll.voterCount !== null ? ` ${poll.voterCount} voted.` : "",
+      isHost && poll.state !== "draft" && !poll.resultsShared ? " Results are visible only to hosts." : ""
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "mx-meet__poll-options", children: poll.options.map((option) => {
+      const share = counts && total > 0 ? Math.round((option.votes ?? 0) / total * 100) : 0;
+      const chosen = picked.includes(option.id);
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("li", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "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__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__poll-bar", style: { width: `${share}%` }, "aria-hidden": "true" }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__poll-text", children: option.text }),
+              counts ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "mx-meet__poll-count", children: [
+                option.votes ?? 0,
+                " \xB7 ",
+                share,
+                "%"
+              ] }) : null
+            ]
+          }
+        ),
+        option.voters !== void 0 && option.voters.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__poll-voters", children: option.voters.join(", ") }) : null
+      ] }, option.id);
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Notice, { notice }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-meet__collab-actions", children: [
+      canVote ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "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__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__primary mx-meet__primary--small", onClick: () => void act({ action: "poll_launch", itemId: poll.id }).then(show), children: "Launch" }) : null,
+      isHost && poll.state === "live" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__chip", onClick: () => void act({ action: "poll_close", itemId: poll.id }).then(show), children: "End poll" }) : null,
+      isHost && poll.state !== "draft" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__chip", onClick: () => void act({ action: "poll_share", itemId: poll.id }).then(show), children: poll.resultsShared ? "Hide results" : "Share results" }) : null,
+      isHost && poll.state === "live" ? null : isHost ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__link", onClick: () => void act({ action: "poll_delete", itemId: poll.id }).then(show), children: "Delete" }) : null
+    ] })
+  ] });
+}
+function PollsPanel({ onClose }) {
+  const { collab, isHost } = useCollab();
+  const [composing, setComposing] = (0, import_react8.useState)(false);
+  const polls = collab?.polls ?? [];
+  const maxOptions = collab?.settings?.pollMaxOptions ?? 10;
+  const ordered = [...polls].reverse();
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(PanelShell, { title: "Polls", onClose, children: [
+    collab?.error != null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "mx-meet__panel-note mx-meet__collab-error", children: collab.error }) : null,
+    isHost && !composing ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__primary mx-meet__primary--small", onClick: () => setComposing(true), children: "New poll" }) : null,
+    isHost && composing ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PollComposer, { maxOptions, onDone: () => setComposing(false) }) : null,
+    ordered.length === 0 && !composing ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "mx-meet__panel-note", children: isHost ? "No polls yet. Polls and their results are kept with the meeting." : "No polls yet." }) : null,
+    ordered.map((poll) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PollCard, { poll }, poll.id))
+  ] });
+}
+function QuestionCard({ question }) {
+  const { act, isHost } = useCollab();
+  const [answering, setAnswering] = (0, import_react8.useState)(false);
+  const [reply, setReply] = (0, import_react8.useState)("");
+  const [notice, show] = useNotice();
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("li", { className: `mx-meet__collab-card mx-meet__question mx-meet__question--${question.state}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-meet__question-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "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__ */ (0, import_jsx_runtime4.jsx)(UpvoteIcon, { width: 16, height: 16 }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: question.upvotes })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-meet__question-body", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "mx-meet__chat-meta", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: question.mine ? "You" : question.askerName }),
+          question.mine && question.anonymous ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__chat-private", children: "anonymous" }) : null,
+          question.state !== "open" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__collab-state", children: question.state === "answered" ? "Answered" : "Dismissed" }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__chat-text", children: question.text }),
+        question.answer !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "mx-meet__question-answer", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("strong", { children: [
+            question.answeredByName ?? "Host",
+            ":"
+          ] }),
+          " ",
+          question.answer
+        ] }) : null
+      ] })
+    ] }),
+    answering ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "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__ */ (0, import_jsx_runtime4.jsx)(
+            "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__ */ (0, import_jsx_runtime4.jsx)("button", { type: "submit", className: "mx-meet__send", children: "Done" })
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Notice, { notice }),
+    isHost || question.mine ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-meet__collab-actions", children: [
+      isHost && question.state === "open" && !answering ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__chip", onClick: () => setAnswering(true), children: "Answer" }) : null,
+      isHost && question.state === "open" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__chip", onClick: () => void act({ action: "question_dismiss", itemId: question.id }).then(show), children: "Dismiss" }) : null,
+      isHost && question.state !== "open" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__chip", onClick: () => void act({ action: "question_reopen", itemId: question.id }).then(show), children: "Reopen" }) : null,
+      question.mine || isHost ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__link", onClick: () => void act({ action: "question_delete", itemId: question.id }).then(show), children: "Delete" }) : null
+    ] }) : null
+  ] });
+}
+function QaPanel({ onClose }) {
+  const { collab, act } = useCollab();
+  const [draft, setDraft] = (0, import_react8.useState)("");
+  const [anonymous, setAnonymous] = (0, import_react8.useState)(false);
+  const [order, setOrder] = (0, import_react8.useState)("popular");
+  const [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__ */ (0, import_jsx_runtime4.jsxs)(PanelShell, { title: "Q&A", onClose, children: [
+    collab?.error != null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "mx-meet__panel-note mx-meet__collab-error", children: collab.error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "form",
+      {
+        className: "mx-meet__composer mx-meet__composer--chat",
+        onSubmit: (event) => {
+          event.preventDefault();
+          const text = draft.trim();
+          if (text.length === 0) return;
+          void act({ action: "question_ask", text, anonymous: allowAnonymous && anonymous }).then((r) => {
+            if (r.ok) setDraft("");
+            else show(r);
+          });
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-meet__composer-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "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__ */ (0, import_jsx_runtime4.jsx)("button", { type: "submit", className: "mx-meet__send", disabled: draft.trim().length === 0, children: "Ask" })
+          ] }),
+          allowAnonymous ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "mx-meet__toggle", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "checkbox", checked: anonymous, onChange: (event) => setAnonymous(event.target.checked) }),
+            "Ask anonymously"
+          ] }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Notice, { notice }),
+    questions.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mx-meet__pills", role: "group", "aria-label": "Order questions", children: ["popular", "recent"].map((value) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "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__ */ (0, import_jsx_runtime4.jsx)("p", { className: "mx-meet__panel-note", children: "No questions yet. Questions are kept with the meeting." }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "mx-meet__chat", children: questions.map((question) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(QuestionCard, { question }, question.id)) })
+  ] });
+}
+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__ */ (0, import_jsx_runtime4.jsx)(
+    "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__ */ (0, import_jsx_runtime4.jsx)("title", { children: stroke.byName })
+    }
+  );
+}
+function WhiteboardPanel({ onClose }) {
+  const { collab, act, isHost, localIdentity } = useCollab();
+  const [tool, setTool] = (0, import_react8.useState)("pen");
+  const [color, setColor] = (0, import_react8.useState)(INK[0]);
+  const [drawing, setDrawing] = (0, import_react8.useState)(null);
+  const [pending, setPending] = (0, import_react8.useState)([]);
+  const [notice, show] = useNotice();
+  const svgRef = (0, import_react8.useRef)(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__ */ (0, import_jsx_runtime4.jsxs)("section", { className: "mx-meet__whiteboard", "aria-label": "Whiteboard", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("header", { className: "mx-meet__whiteboard-bar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { className: "mx-meet__panel-title", children: "Whiteboard" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mx-meet__pills", role: "group", "aria-label": "Tool", children: [
+        ["pen", "Pen", /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PencilIcon, { width: 16, height: 16 }, "p")],
+        ["highlighter", "Highlighter", /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HighlighterIcon, { width: 16, height: 16 }, "h")],
+        ["eraser", "Eraser \u2014 click a stroke", /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(EraserIcon, { width: 16, height: 16 }, "e")]
+      ].map(([value, label, icon]) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "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__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mx-meet__swatches", role: "group", "aria-label": "Color", children: INK.map((ink) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "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__ */ (0, import_jsx_runtime4.jsx)(
+        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__ */ (0, import_jsx_runtime4.jsx)(UndoIcon, { width: 16, height: 16 })
+        }
+      ),
+      isHost && strokes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__chip", onClick: () => void act({ action: "whiteboard_clear" }).then(show), children: "Clear board" }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__whiteboard-note", children: "Saved with the meeting" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ControlButton, { label: "Close whiteboard", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CloseIcon, { width: 16, height: 16 }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Notice, { notice }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "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__ */ (0, import_jsx_runtime4.jsx)("rect", { x: 0, y: 0, width: BOARD_W, height: BOARD_H, className: "mx-meet__board-paper" }),
+          strokes.map((stroke) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            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__ */ (0, import_jsx_runtime4.jsx)(StrokeView, { stroke }, stroke.id)),
+          drawing !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            StrokeView,
+            {
+              stroke: {
+                id: "drawing",
+                points: drawing,
+                color,
+                width: tool === "highlighter" ? 4 : 3,
+                tool: tool === "highlighter" ? "highlighter" : "pen",
+                by: "",
+                byName: "You"
+              }
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+}
+function clock(ms) {
+  return (0, import_format2.formatDurationMs)(Math.ceil(ms / 1e3) * 1e3, { style: "clock" });
+}
+var BREAKOUT_EXPIRE_RETRY_MS = 5e3;
+function useNow(active) {
+  const [now, setNow] = (0, import_react8.useState)(() => Date.now());
+  (0, import_react8.useEffect)(() => {
+    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 [count, setCount] = (0, import_react8.useState)(Math.min(Math.max(2, Math.ceil(people.length / 4)), settings?.breakoutMaxRooms ?? 20));
+  const [mode, setMode] = (0, import_react8.useState)("auto");
+  const [minutes, setMinutes] = (0, import_react8.useState)(settings?.breakoutDefaultMinutes ?? 15);
+  const [manual, setManual] = (0, import_react8.useState)({});
+  const [busy, setBusy] = (0, import_react8.useState)(false);
+  const [notice, show] = useNotice();
+  const max = settings?.breakoutMaxRooms ?? 20;
+  const rooms = Math.min(Math.max(1, count), 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__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-meet__collab-card", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "mx-meet__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__field-label", children: "Rooms" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "input",
+        {
+          className: "mx-meet__input",
+          type: "number",
+          min: 1,
+          max,
+          value: count,
+          onChange: (event) => setCount(Number(event.target.value) || 1)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mx-meet__pills", role: "group", "aria-label": "How people are placed", children: [
+      ["auto", "Automatically"],
+      ["manual", "Manually"],
+      ["choose", "Let people choose"]
+    ].map(([value, label]) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "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__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "mx-meet__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__field-label", children: "Timer (minutes, 0 for none)" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "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__ */ (0, import_jsx_runtime4.jsx)("p", { className: "mx-meet__panel-note", children: "Nobody else is in the meeting yet." }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "mx-meet__people", children: people.map((person) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("li", { className: "mx-meet__person", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__person-name", children: person.displayName }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "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__ */ (0, import_jsx_runtime4.jsx)("option", { value: -1, children: "Main room" }),
+            Array.from({ length: rooms }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("option", { value: index, children: [
+              "Room ",
+              index + 1
+            ] }, index))
+          ]
+        }
+      )
+    ] }, person.identity)) }) : mode === "auto" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "mx-meet__breakout-rooms", children: assignment.map((members, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("li", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("strong", { children: [
+        "Room ",
+        index + 1
+      ] }),
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__panel-note", children: members.length === 0 ? "empty" : members.map(nameOf).join(", ") })
+    ] }, index)) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "mx-meet__panel-note", children: "Everyone picks a room from their own screen." }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Notice, { notice }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "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] = (0, import_react8.useState)("");
+  const [notice, show] = useNotice();
+  const nameOf = (identity) => displayNameFor(snapshot?.names ?? {}, identity, snapshot?.participants.find((p) => p.identity === identity)?.displayName);
+  const mine = assignedRoom(plan, localIdentity);
+  const join = async (roomId) => {
+    const said = await act({ action: "breakout_join", roomId });
+    if (!said.ok) {
+      show(said);
+      return;
+    }
+    show(await moveTo(roomId));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-meet__collab-card", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "mx-meet__panel-note", children: [
+      plan.rooms.length,
+      " room",
+      plan.rooms.length === 1 ? "" : "s",
+      " open",
+      remaining !== null ? ` \xB7 ${clock(remaining)} left` : "",
+      plan.allowChoose ? " \xB7 people choose their room" : ""
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "mx-meet__breakout-rooms", children: plan.rooms.map((room) => {
+      const here = breakoutRoomId === room.id;
+      const mayJoin = isHost || plan.allowChoose || mine?.id === room.id;
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("li", { className: here ? "mx-meet__breakout-room mx-meet__breakout-room--here" : "mx-meet__breakout-room", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-meet__collab-head", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: room.name }),
+          here ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__collab-state", children: "You are here" }) : mayJoin ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__chip", onClick: () => void join(room.id), children: "Join" }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__panel-note", children: room.identities.length === 0 ? "Nobody assigned" : room.identities.map(nameOf).join(", ") }),
+        isHost && room.identities.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "mx-meet__people", children: room.identities.map((identity) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("li", { className: "mx-meet__person", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__person-name", children: nameOf(identity) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "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__ */ (0, import_jsx_runtime4.jsx)("option", { value: "", children: "Main room" }),
+                plan.rooms.map((option) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: option.id, children: option.name }, option.id))
+              ]
+            }
+          )
+        ] }, identity)) }) : null
+      ] }, room.id);
+    }) }),
+    breakoutRoomId !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__chip", onClick: () => void join(null), children: "Return to the main room" }) : null,
+    isHost ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "form",
+      {
+        className: "mx-meet__composer-row",
+        onSubmit: (event) => {
+          event.preventDefault();
+          const text = broadcast.trim();
+          if (text.length === 0) return;
+          void act({ action: "breakout_broadcast", text }).then((result) => {
+            show(result);
+            if (result.ok) setBroadcast("");
+          });
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "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__ */ (0, import_jsx_runtime4.jsx)("button", { type: "submit", className: "mx-meet__send", disabled: broadcast.trim().length === 0, children: "Send" })
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Notice, { notice }),
+    isHost ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "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__ */ (0, import_jsx_runtime4.jsxs)(PanelShell, { title: "Breakout rooms", onClose, children: [
+    collab?.error != null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "mx-meet__panel-note mx-meet__collab-error", children: collab.error }) : null,
+    plan !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BreakoutRun, { plan }) : isHost ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BreakoutSetup, {}) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "mx-meet__panel-note", children: "Breakout rooms are closed." })
+  ] });
+}
+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] = (0, import_react8.useState)(null);
+  const [failure, setFailure] = (0, import_react8.useState)(null);
+  const expireAsked = (0, import_react8.useRef)(null);
+  const moveAt = collab?.moveRequest?.at ?? null;
+  (0, import_react8.useEffect)(() => {
+    if (host === null) return;
+    const request = takeMoveRequest(host.store);
+    if (request === null) return;
+    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]);
+  (0, import_react8.useEffect)(() => {
+    if (open === null || remaining === null || remaining > 0) return;
+    const asked = expireAsked.current;
+    if (asked !== null && asked.id === open.id && now - asked.at < BREAKOUT_EXPIRE_RETRY_MS) return;
+    expireAsked.current = { id: open.id, at: now };
+    void act({ action: "breakout_expire" });
+  }, [open, remaining, act, now]);
+  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__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mx-meet__breakout-banner", role: "status", children: [
+    failure !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__collab-error", children: failure }) : null,
+    room !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: room.name }),
+      remaining !== null ? ` \xB7 ${clock(remaining)} left` : "",
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__chip", onClick: () => void moveTo(null), children: "Return to main room" })
+    ] }) : assigned !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
+      "You are assigned to ",
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: assigned.name }),
+      remaining !== null ? ` \xB7 ${clock(remaining)} left` : "",
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "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__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Breakout rooms are open \u2014 pick one under Activities." }) : null,
+    showBroadcast ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "mx-meet__breakout-broadcast", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("strong", { children: [
+        broadcast.by,
+        ":"
+      ] }),
+      " ",
+      broadcast.text,
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mx-meet__link", onClick: () => setDismissedBroadcast(broadcast.at), children: "Dismiss" })
+    ] }) : 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__ */ (0, import_jsx_runtime4.jsxs)("section", { className: "mx-meet__section", "aria-label": "Captions", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "mx-meet__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mx-meet__field-label", children: "Translate captions to" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "select",
+        {
+          className: "mx-meet__select",
+          value: current,
+          onChange: (event) => {
+            const next = event.target.value === "" ? null : event.target.value;
+            setCaptionLanguage(host.store, next);
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "", children: "Off \u2014 as spoken" }),
+            current === "" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("option", { value: preferred, children: [
+              choices.find((c) => c.tag === preferred)?.name ?? preferred,
+              " (yours)"
+            ] }) : null,
+            choices.filter((choice) => current !== "" || choice.tag !== preferred).map((choice) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: choice.tag, children: choice.name }, choice.tag))
+          ]
+        }
+      )
+    ] }),
+    collab?.captionTranslationError != null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "mx-meet__panel-note mx-meet__collab-error", children: collab.captionTranslationError }) : null
+  ] });
+}
+
+// src/skins/meet/components.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function InertNotice({ what }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__empty", role: "status", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "mx-meet__empty-title", children: [
+      what,
+      " is not ready yet"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__empty-body", children: "Calls and meetings need a signed-in identity and an active organization. This will appear as soon as they resolve." })
+  ] });
+}
+function Avatar({
+  name,
+  url,
+  size = 40
+}) {
+  const tint = (0, import_format2.avatarPaletteIndex)(name);
+  if (url != null && url.length > 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "img",
+      {
+        className: "mx-meet__avatar",
+        src: url,
+        alt: "",
+        width: size,
+        height: size,
+        style: { width: size, height: size }
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "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: (0, import_format2.getInitials)(name)
+    }
+  );
+}
+function ControlButton({
+  label,
+  active = false,
+  danger = false,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "button",
+    {
+      type: "button",
+      className: [
+        "mx-meet__control",
+        active ? "mx-meet__control--active" : "",
+        danger ? "mx-meet__control--danger" : ""
+      ].filter(Boolean).join(" "),
+      "aria-label": label,
+      title: label,
+      onClick,
+      children
+    }
+  );
+}
+function RecordingIndicator() {
+  const { state, label } = useRecording();
+  if (label === null) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "span",
+    {
+      className: `mx-meet__recording mx-meet__recording--${state}`,
+      role: "status",
+      "aria-live": "polite",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RecordIcon, { width: 10, height: 10 }),
+        label
+      ]
+    }
+  );
+}
+function ConnectionDot({ quality }) {
+  if (quality === "excellent" || quality === "good" || quality === "unknown") return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `mx-meet__quality mx-meet__quality--${quality}`, title: `Connection ${quality}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(WifiLowIcon, { width: 14, height: 14 }) });
+}
+function RoleBadge({ role }) {
+  if (role === "host") return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__badge", children: "Host" });
+  if (role === "cohost") return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__badge", children: "Co-host" });
+  if (role === "guest") return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__badge", children: "Guest" });
+  return null;
+}
+function ParticipantTile({
+  participant,
+  featured = false
+}) {
+  const host = useMeetHost();
+  const snapshot = useMeetSnapshot();
+  const queue = useHandQueue();
+  const [menu, setMenu] = (0, import_react9.useState)(false);
+  const videoRef = useTrack(
+    participant.identity,
+    participant.screenSharing ? "screen" : "camera"
+  );
+  const showVideo = participant.cameraEnabled || participant.screenSharing;
+  const pinnedHere = snapshot?.pinned === participant.identity;
+  const spotlit = snapshot?.spotlight === participant.identity;
+  const handPosition = participant.handRaised ? queue.findIndex((entry) => entry.identity === participant.identity) + 1 : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      className: [
+        "mx-meet__tile",
+        featured ? "mx-meet__tile--featured" : "",
+        participant.speaking ? "mx-meet__tile--speaking" : ""
+      ].filter(Boolean).join(" "),
+      "data-identity": participant.identity,
+      ...participantAttributes(participant),
+      children: [
+        showVideo ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "video",
+          {
+            ref: videoRef,
+            className: "mx-meet__video",
+            autoPlay: true,
+            playsInline: true,
+            muted: participant.isLocal
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet__tile-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { name: participant.displayName, url: participant.avatarUrl, size: featured ? 96 : 56 }) }),
+        participant.handRaised ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__tile-hand", title: `Hand raised \xB7 ${ordinal(handPosition)} in line`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HandIcon, { width: 14, height: 14 }),
+          handPosition > 0 ? handPosition : null
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__tile-bar", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__tile-name", children: [
+            spotlit ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { title: "Spotlighted for everyone", className: "mx-meet__tile-flag", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SpotlightIcon, { width: 12, height: 12 }) }) : null,
+            participant.displayName,
+            participant.isLocal ? " (you)" : "",
+            participant.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__badge", children: "AI" }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RoleBadge, { role: participant.role })
+          ] }),
+          !participant.micEnabled ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MicOffIcon, { width: 14, height: 14 }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QualityBars, { quality: participant.quality })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: menu ? "mx-meet__tile-actions mx-meet__tile-actions--open" : "mx-meet__tile-actions", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            ControlButton,
+            {
+              label: pinnedHere ? "Unpin" : `Pin ${participant.displayName} for me`,
+              active: pinnedHere,
+              onClick: () => host?.engine.pin(pinnedHere ? null : participant.identity),
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PinIcon, { width: 16, height: 16 })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__anchor", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              ControlButton,
+              {
+                label: `More for ${participant.displayName}`,
+                active: menu,
+                onClick: () => setMenu(!menu),
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MoreIcon, { width: 16, height: 16 })
+              }
+            ),
+            menu ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PersonMenu, { participant, onClose: () => setMenu(false), placement: "down" }) : null
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function ordinal(position) {
+  if (position <= 0) return "";
+  const suffix = position % 100 >= 11 && position % 100 <= 13 ? "th" : { 1: "st", 2: "nd", 3: "rd" }[position % 10] ?? "th";
+  return `${position}${suffix}`;
+}
+function QualityBars({ quality }) {
+  if (quality === "unknown") return null;
+  const bars = quality === "excellent" ? 3 : quality === "good" ? 2 : quality === "poor" ? 1 : 0;
+  const label = quality === "lost" ? "Connection lost" : quality === "poor" ? "Poor connection" : `Connection ${quality}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `mx-meet__signal mx-meet__signal--${quality}`, title: label, "aria-label": label, role: "img", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SignalIcon, { bars, width: 14, height: 14 }) });
+}
+function Stage({ pageSize }) {
+  const stage = useStage(pageSize);
+  const columns = gridColumns(stage.tiles.length);
+  if (stage.feature === null && stage.tiles.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__stage mx-meet__stage--empty", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__empty-title", children: "Waiting for others to join" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__empty-body", children: "Share the meeting link and people can join from anywhere \u2014 no account needed." })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `mx-meet__stage${stage.feature !== null ? " mx-meet__stage--speaker" : ""}`, children: [
+    stage.feature !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ParticipantTile, { participant: stage.feature, featured: true }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "div",
+      {
+        className: "mx-meet__grid",
+        style: { "--mx-meet-columns": columns },
+        children: stage.tiles.map((participant) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ParticipantTile, { participant }, participant.identity))
+      }
+    ),
+    stage.overflow > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "mx-meet__overflow", children: [
+      "+",
+      stage.overflow,
+      " more ",
+      stage.overflow === 1 ? "person" : "people",
+      " in this meeting"
+    ] }) : null
+  ] });
+}
+function ControlBar({ onLeave }) {
+  const room = useRoom();
+  const recording = useRecording();
+  const [panel, setPanel] = (0, import_react9.useState)("none");
+  const [chatTo, setChatTo] = (0, import_react9.useState)(null);
+  const [popover, setPopover] = (0, import_react9.useState)("none");
+  const [shortcuts, setShortcuts] = (0, import_react9.useState)(false);
+  const snapshot = useMeetSnapshot();
+  const lobby = useLobby();
+  const controls = useHostControls();
+  const queue = useHandQueue();
+  const micUnavailable = useLocalMedia().microphone.unavailable;
+  const unread = useUnreadChat(panel === "chat");
+  const [whiteboard, setWhiteboard] = (0, import_react9.useState)(false);
+  const 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;
+  (0, import_react9.useEffect)(() => {
+    const request = meetStore?.snapshot().privateChatRequest ?? null;
+    if (request === null) return;
+    setChatTo(request.to);
+    setPanel("chat");
+    meetStore?.patch({ privateChatRequest: null });
+  }, [privateChatAt, meetStore]);
+  useMeetShortcuts({
+    mic: () => void room.toggleMicrophone(),
+    camera: () => void room.toggleCamera(),
+    hand: () => void room.toggleHand(),
+    chat: () => toggle("chat"),
+    people: () => toggle("people"),
+    help: () => setShortcuts(true)
+  });
+  const hasSpotlight = snapshot?.spotlight !== null && snapshot?.spotlight !== void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MeetingOverlays, {}),
+    shortcuts ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ShortcutsSheet, { onClose: () => setShortcuts(false) }) : null,
+    panel === "chat" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChatPanel, { onClose: () => setPanel("none"), to: chatTo, onTo: setChatTo }) : null,
+    panel === "people" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      PeoplePanel,
+      {
+        onClose: () => setPanel("none"),
+        onMessage: (identity) => {
+          setChatTo(identity);
+          setPanel("chat");
+        }
+      }
+    ) : null,
+    panel === "ai" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AiPanel, { onClose: () => setPanel("none") }) : null,
+    panel === "settings" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SettingsPanel, { onClose: () => setPanel("none") }) : null,
+    panel === "polls" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PollsPanel, { onClose: () => setPanel("none") }) : null,
+    panel === "qa" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QaPanel, { onClose: () => setPanel("none") }) : null,
+    panel === "breakouts" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BreakoutsPanel, { onClose: () => setPanel("none") }) : null,
+    whiteboard ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(WhiteboardPanel, { onClose: () => setWhiteboard(false) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BreakoutBanner, {}),
+    controls.notice !== null && panel !== "people" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Toast, { text: controls.notice.text, failed: controls.notice.failed, onDone: controls.clearNotice }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__controls", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        ControlButton,
+        {
+          label: micUnavailable !== null ? `Unmute \u2014 ${micUnavailable.remedy}` : room.local?.micEnabled === true ? "Mute (\u2318D)" : "Unmute (\u2318D)",
+          active: room.local?.micEnabled === true,
+          onClick: () => void room.toggleMicrophone(),
+          children: room.local?.micEnabled === true ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MicIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MicOffIcon, {})
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        ControlButton,
+        {
+          label: room.local?.cameraEnabled === true ? "Stop video (\u2318E)" : "Start video (\u2318E)",
+          active: room.local?.cameraEnabled === true,
+          onClick: () => void room.toggleCamera(),
+          children: room.local?.cameraEnabled === true ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CameraIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CameraOffIcon, {})
+        }
+      ),
+      room.canShareScreen || room.local?.screenSharing === true ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        ControlButton,
+        {
+          label: room.local?.screenSharing === true ? "Stop sharing" : "Share screen",
+          active: room.local?.screenSharing === true,
+          onClick: () => void room.toggleScreenShare(),
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ScreenShareIcon, {})
+        }
+      ) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__anchor", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          ControlButton,
+          {
+            label: "Send a reaction",
+            active: popover === "reactions",
+            onClick: () => setPopover(popover === "reactions" ? "none" : "reactions"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SmileIcon, {})
+          }
+        ),
+        popover === "reactions" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Popover, { label: "Reactions", onClose: () => setPopover("none"), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet__emoji-bar", children: MEET_REACTIONS.map((emoji) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "mx-meet__emoji",
+            "aria-label": `React ${emoji}`,
+            onClick: () => void room.react(emoji),
+            children: emoji
+          },
+          emoji
+        )) }) }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        ControlButton,
+        {
+          label: room.local?.handRaised === true ? "Lower hand (\u2318\u2325H)" : "Raise hand (\u2318\u2325H)",
+          active: room.local?.handRaised === true,
+          onClick: () => void room.toggleHand(),
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HandIcon, {})
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(ControlButton, { label: "Chat (\u2318\u2325C)", active: panel === "chat", onClick: () => toggle("chat"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChatIcon, {}),
+        unread > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__dot", "aria-hidden": "true" }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        ControlButton,
+        {
+          label: lobby.waiting.length > 0 ? `People \u2014 ${lobby.waiting.length} waiting` : `People \u2014 ${(snapshot?.participants ?? []).length} in the meeting`,
+          active: panel === "people",
+          onClick: () => toggle("people"),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PeopleIcon, {}),
+            lobby.waiting.length > 0 || controls.isHost && queue.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__dot", "aria-hidden": "true" }) : null
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        ActivitiesControl,
+        {
+          active: whiteboard ? "whiteboard" : panel === "polls" || panel === "qa" || panel === "breakouts" ? panel : null,
+          onOpen: openActivity
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AiControl, { active: panel === "ai", onToggle: () => toggle("ai") }),
+      recording.canStart ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ControlButton, { label: "Start recording", onClick: () => void recording.start(), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RecordIcon, {}) }) : null,
+      recording.canStop ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ControlButton, { label: "Stop recording", active: true, onClick: () => void recording.stop(), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RecordIcon, {}) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__anchor", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          ControlButton,
+          {
+            label: "More options",
+            active: popover === "more" || panel === "settings",
+            onClick: () => setPopover(popover === "more" ? "none" : "more"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MoreIcon, {})
+          }
+        ),
+        popover === "more" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Popover, { label: "More options", onClose: () => setPopover("none"), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__menu", role: "menu", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            MenuItem,
+            {
+              onSelect: () => {
+                setPopover("none");
+                setPanel("settings");
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SettingsIcon, { width: 16, height: 16 }),
+                " Settings"
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            MenuItem,
+            {
+              onSelect: () => {
+                setPopover("none");
+                setShortcuts(true);
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(KeyboardIcon, { width: 16, height: 16 }),
+                " Keyboard shortcuts"
+              ]
+            }
+          ),
+          controls.isHost ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet__menu-sep", role: "separator" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              MenuItem,
+              {
+                onSelect: () => {
+                  setPopover("none");
+                  void controls.run({ action: "mute_all" });
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MicOffIcon, { width: 16, height: 16 }),
+                  " Mute everyone"
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              MenuItem,
+              {
+                onSelect: () => {
+                  setPopover("none");
+                  void controls.run({ action: "ask_all_unmute" });
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MicIcon, { width: 16, height: 16 }),
+                  " Ask everyone to unmute"
+                ]
+              }
+            ),
+            queue.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              MenuItem,
+              {
+                onSelect: () => {
+                  setPopover("none");
+                  void controls.run({ action: "lower_all_hands" });
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HandIcon, { width: 16, height: 16 }),
+                  " Lower all hands (",
+                  queue.length,
+                  ")"
+                ]
+              }
+            ) : null,
+            hasSpotlight ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              MenuItem,
+              {
+                onSelect: () => {
+                  setPopover("none");
+                  void controls.run({ action: "spotlight", identity: null });
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SpotlightIcon, { width: 16, height: 16 }),
+                  " Remove spotlight"
+                ]
+              }
+            ) : null
+          ] }) : null
+        ] }) }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        ControlButton,
+        {
+          label: "Leave",
+          danger: true,
+          onClick: () => {
+            void room.leave();
+            onLeave?.();
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PhoneOffIcon, {})
+        }
+      )
+    ] })
+  ] });
+}
+function useUnreadChat(open) {
+  const snapshot = useMeetSnapshot();
+  const chat = snapshot?.chat ?? [];
+  const local = snapshot?.localIdentity ?? null;
+  const [seen, setSeen] = (0, import_react9.useState)(0);
+  (0, import_react9.useEffect)(() => {
+    if (open) setSeen(chat.length);
+  }, [open, chat.length]);
+  const loaded = snapshot?.chatLoaded === true;
+  const [baseline, setBaseline] = (0, import_react9.useState)(null);
+  (0, import_react9.useEffect)(() => {
+    if (loaded && baseline === null) setBaseline(chat.length);
+  }, [loaded, baseline, chat.length]);
+  if (open) return 0;
+  const from = Math.max(seen, baseline ?? chat.length);
+  return chat.slice(from).filter((message) => message.identity !== local).length;
+}
+function Popover({
+  label,
+  onClose,
+  children,
+  placement = "up"
+}) {
+  const ref = (0, import_react9.useRef)(null);
+  const [style, setStyle] = (0, import_react9.useState)({
+    position: "fixed",
+    top: 0,
+    left: 0,
+    visibility: "hidden"
+  });
+  (0, import_react9.useLayoutEffect)(() => {
+    const element = ref.current;
+    const anchor = element?.parentElement ?? null;
+    if (element === null || anchor === null) return;
+    const place = () => {
+      const rect = anchor.getBoundingClientRect();
+      const width = element.offsetWidth;
+      const height = element.offsetHeight;
+      const gutter = 8;
+      const left = Math.min(
+        Math.max(gutter, rect.left + rect.width / 2 - width / 2),
+        window.innerWidth - width - gutter
+      );
+      const fitsBelow = rect.bottom + gutter + height <= window.innerHeight;
+      const fitsAbove = rect.top - gutter - height >= 0;
+      if (!fitsBelow && !fitsAbove) {
+        const top = Math.max(gutter, window.innerHeight - height - gutter);
+        setStyle({
+          position: "fixed",
+          left,
+          top,
+          maxHeight: window.innerHeight - top - gutter,
+          overflowY: "auto"
+        });
+        return;
+      }
+      const down = placement === "down" ? fitsBelow || !fitsAbove : !fitsAbove && fitsBelow;
+      setStyle(
+        down ? { position: "fixed", left, top: rect.bottom + gutter } : { position: "fixed", left, bottom: window.innerHeight - rect.top + gutter }
+      );
+    };
+    place();
+    const frame = requestAnimationFrame(place);
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => place());
+    observer?.observe(document.body);
+    observer?.observe(element);
+    window.addEventListener("resize", place);
+    window.addEventListener("scroll", place, true);
+    return () => {
+      cancelAnimationFrame(frame);
+      observer?.disconnect();
+      window.removeEventListener("resize", place);
+      window.removeEventListener("scroll", place, true);
+    };
+  }, [placement]);
+  (0, import_react9.useEffect)(() => {
+    const onKey = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    const onPointer = (event) => {
+      const anchor = ref.current?.parentElement ?? null;
+      if (anchor !== null && !anchor.contains(event.target)) onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("pointerdown", onPointer);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("pointerdown", onPointer);
+    };
+  }, [onClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref, className: "mx-meet__popover", style, role: "dialog", "aria-label": label, children });
+}
+function MenuItem({
+  onSelect,
+  danger = false,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      className: danger ? "mx-meet__menu-item mx-meet__menu-item--danger" : "mx-meet__menu-item",
+      onClick: onSelect,
+      children
+    }
+  );
+}
+function Toast({ text, failed, onDone }) {
+  (0, import_react9.useEffect)(() => {
+    const timer = setTimeout(onDone, failed ? 7e3 : 4e3);
+    return () => clearTimeout(timer);
+  }, [text, failed, onDone]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: failed ? "mx-meet__toast mx-meet__toast--failed" : "mx-meet__toast", role: "status", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: text }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mx-meet__toast-close", "aria-label": "Dismiss", onClick: onDone, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CloseIcon, { width: 14, height: 14 }) })
+  ] });
+}
+function MeetingOverlays() {
+  const reactions = useReactions();
+  const { notice, dismiss } = useModerationNotice();
+  const room = useRoom();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ReactionOverlay, { reactions }),
+    notice !== null && notice.kind !== "removed" ? (
+      // A host's request ("the host is asking you to unmute"), not an error:
+      // an assertive status, so it is announced at once without being filed
+      // as a failure (design-system error-box census).
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__notice-bar", role: "status", "aria-live": "assertive", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: notice.text }),
+        notice.kind === "ask-unmute" && room.local?.micEnabled !== true ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "mx-meet__primary mx-meet__primary--small",
+            onClick: () => {
+              dismiss();
+              void room.toggleMicrophone();
+            },
+            children: "Unmute"
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mx-meet__toast-close", "aria-label": "Dismiss", onClick: dismiss, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CloseIcon, { width: 14, height: 14 }) })
+      ] })
+    ) : null
+  ] });
+}
+function ShortcutsSheet({ onClose }) {
+  (0, import_react9.useEffect)(() => {
+    const onKey = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet__sheet-backdrop", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      className: "mx-meet__sheet",
+      role: "dialog",
+      "aria-label": "Keyboard shortcuts",
+      onClick: (event) => event.stopPropagation(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("header", { className: "mx-meet__panel-head", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: "mx-meet__panel-title", children: "Keyboard shortcuts" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ControlButton, { label: "Close", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CloseIcon, { width: 16, height: 16 }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("dl", { className: "mx-meet__shortcuts", children: MEET_SHORTCUTS.map((shortcut) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__shortcut", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("dt", { children: shortcut.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("dd", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("kbd", { className: "mx-meet__kbd", children: shortcut.keys }) })
+        ] }, shortcut.id)) })
+      ]
+    }
+  ) });
+}
+function AiControl({ active, onToggle }) {
+  const snapshot = useMeetSnapshot();
+  const meeting = snapshot?.meeting ?? null;
+  if (meeting === null || !meeting.aiEnabled) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ControlButton, { label: "Meeting assistant", active, onClick: onToggle, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SparklesIcon, {}) });
+}
+function PanelShell({
+  title,
+  onClose,
+  children
+}) {
+  const ref = (0, import_react9.useRef)(null);
+  (0, import_react9.useLayoutEffect)(() => {
+    const panel = ref.current;
+    const root = panel?.closest(".mx-meet");
+    const header = root?.querySelector(":scope > .mx-meet__header") ?? null;
+    if (!panel || !header) return void 0;
+    const place = () => panel.style.setProperty("--mx-meet-panel-top", `${header.offsetHeight}px`);
+    place();
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(place);
+    observer.observe(header);
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("aside", { ref, className: "mx-meet__panel", "aria-label": title, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("header", { className: "mx-meet__panel-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: "mx-meet__panel-title", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ControlButton, { label: "Close panel", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CloseIcon, { width: 16, height: 16 }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet__panel-body", children })
+  ] });
+}
+function ChatPanel({
+  onClose,
+  to = null,
+  onTo
+}) {
+  const snapshot = useMeetSnapshot();
+  const room = useRoom();
+  const [draft, setDraft] = (0, import_react9.useState)("");
+  const [recipient, setRecipient] = (0, import_react9.useState)(to);
+  const listRef = (0, import_react9.useRef)(null);
+  const messages = snapshot?.chat ?? [];
+  const local = snapshot?.localIdentity ?? null;
+  const people = (snapshot?.participants ?? []).filter(
+    (participant) => !participant.isLocal && !participant.isAgent
+  );
+  const recipientName = recipient === null ? null : people.find((p) => p.identity === recipient)?.displayName ?? null;
+  (0, import_react9.useEffect)(() => setRecipient(to), [to]);
+  (0, import_react9.useEffect)(() => {
+    const list = listRef.current;
+    if (list !== null) list.scrollTop = list.scrollHeight;
+  }, [messages.length]);
+  const choose = (next) => {
+    setRecipient(next);
+    onTo?.(next);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(PanelShell, { title: "Chat", onClose, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("ul", { className: "mx-meet__chat", ref: listRef, children: [
+      snapshot?.chatHistoryError != null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { className: "mx-meet__panel-note", children: snapshot.chatHistoryError }) : null,
+      snapshot?.chatLoaded !== true && messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { className: "mx-meet__panel-note", children: "Reading earlier messages\u2026" }) : messages.length === 0 && snapshot?.chatHistoryError == null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { className: "mx-meet__panel-note", children: "No messages yet. Messages to everyone stay with the meeting, so people who join later see them." }) : null,
+      messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChatLine, { message, local, people }, message.id))
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "form",
+      {
+        className: "mx-meet__composer mx-meet__composer--chat",
+        onSubmit: (event) => {
+          event.preventDefault();
+          const text = draft;
+          if (text.trim().length === 0) return;
+          setDraft("");
+          if (recipient === null) void room.sendChat(text).catch(() => void 0);
+          else void room.sendPrivateChat(recipient, text);
+        },
+        children: [
+          people.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            "select",
+            {
+              className: "mx-meet__select mx-meet__select--compact",
+              "aria-label": "Send to",
+              value: recipient ?? "",
+              onChange: (event) => choose(event.target.value === "" ? null : event.target.value),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", children: "Everyone" }),
+                people.map((participant) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("option", { value: participant.identity, children: [
+                  participant.displayName,
+                  " (private)"
+                ] }, participant.identity))
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__composer-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "input",
+              {
+                className: "mx-meet__input",
+                value: draft,
+                onChange: (event) => setDraft(event.target.value),
+                placeholder: recipientName === null ? "Message everyone" : `Message ${recipientName} privately`,
+                "aria-label": recipientName === null ? "Message everyone" : `Message ${recipientName} privately`,
+                maxLength: 4e3
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "submit", className: "mx-meet__send", disabled: draft.trim().length === 0, children: "Send" })
+          ] }),
+          recipientName !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "mx-meet__panel-note", children: [
+            "Only ",
+            recipientName,
+            " sees this. Private messages are not saved."
+          ] }) : null
+        ]
+      }
+    )
+  ] });
+}
+function ChatLine({
+  message,
+  local,
+  people
+}) {
+  const mine = message.identity === local;
+  const privateTo = message.to ?? null;
+  const counterpart = privateTo === null ? null : mine ? people.find((p) => p.identity === privateTo)?.displayName ?? "them" : "you";
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "li",
+    {
+      className: [
+        "mx-meet__chat-line",
+        privateTo !== null ? "mx-meet__chat-line--private" : "",
+        message.failed !== void 0 ? "mx-meet__chat-line--failed" : ""
+      ].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__chat-meta", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: mine ? "You" : message.displayName }),
+          counterpart !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__chat-private", children: [
+            "to ",
+            counterpart,
+            " \xB7 private"
+          ] }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("time", { dateTime: message.at, children: clockOf(message.at) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__chat-text", children: message.text }),
+        message.failed !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__chat-failed", children: message.failed }) : privateTo === null && message.saved === false ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__chat-pending", children: message.id.startsWith("pending-") ? "Sending\u2026" : "Not saved \u2014 people who join later will not see this" }) : null
+      ]
+    }
+  );
+}
+function PeoplePanel({
+  onClose,
+  onMessage
+}) {
+  const snapshot = useMeetSnapshot();
+  const controls = useHostControls();
+  const queue = useHandQueue();
+  const [query, setQuery] = (0, import_react9.useState)("");
+  const [menuFor, setMenuFor] = (0, import_react9.useState)(null);
+  const 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__ */ (0, import_jsx_runtime5.jsxs)(PanelShell, { title: `People (${everyone.length})`, onClose, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LobbyPanel, {}),
+    queue.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "mx-meet__section", "aria-label": "Raised hands", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("header", { className: "mx-meet__section-head", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("h3", { className: "mx-meet__section-title", children: [
+          "Raised hands \xB7 ",
+          queue.length
+        ] }),
+        controls.isHost ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "mx-meet__link",
+            onClick: () => void controls.run({ action: "lower_all_hands" }),
+            children: "Lower all"
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ol", { className: "mx-meet__queue", children: queue.map((participant) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { className: "mx-meet__person", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { name: participant.displayName, url: participant.avatarUrl, size: 28 }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__person-name", children: [
+          participant.displayName,
+          participant.identity === local ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__you", children: " (you)" }) : null
+        ] }),
+        controls.isHost || participant.identity === local ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "mx-meet__link",
+            onClick: () => void controls.run({ action: "lower_hand", identity: participant.identity }),
+            children: "Lower"
+          }
+        ) : null
+      ] }, participant.identity)) })
+    ] }) : null,
+    controls.isHost && everyone.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__bulk", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("button", { type: "button", className: "mx-meet__chip", onClick: () => void controls.run({ action: "mute_all" }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MicOffIcon, { width: 14, height: 14 }),
+        " Mute all"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: "mx-meet__chip",
+          onClick: () => void controls.run({ action: "ask_all_unmute" }),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MicIcon, { width: 14, height: 14 }),
+            " Ask all to unmute"
+          ]
+        }
+      )
+    ] }) : null,
+    everyone.length > 4 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "mx-meet__search", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SearchIcon, { width: 16, height: 16 }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "input",
+        {
+          className: "mx-meet__input mx-meet__input--bare",
+          value: query,
+          onChange: (event) => setQuery(event.target.value),
+          placeholder: "Search people",
+          "aria-label": "Search people"
+        }
+      )
+    ] }) : null,
+    controls.notice !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: controls.notice.failed ? "mx-meet__error" : "mx-meet__notice", role: "status", children: controls.notice.text }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("ul", { className: "mx-meet__people", children: [
+      shown.map((participant) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { className: "mx-meet__person", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { name: participant.displayName, url: participant.avatarUrl, size: 32 }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__person-name", children: [
+          participant.displayName,
+          participant.identity === local ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__you", children: " (you)" }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RoleBadge, { role: participant.identity === local ? myRole : participant.role }),
+          isNoteTaker(participant) ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__badge", children: "Meeting assistant" }) : null,
+          snapshot?.spotlight === participant.identity ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__badge", children: "Spotlight" }) : null
+        ] }),
+        participant.handRaised ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HandIcon, { width: 14, height: 14 }) : null,
+        !participant.micEnabled && !isNoteTaker(participant) ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MicOffIcon, { width: 14, height: 14 }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QualityBars, { quality: participant.quality }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__anchor", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            ControlButton,
+            {
+              label: `More for ${participant.displayName}`,
+              active: menuFor === participant.identity,
+              onClick: () => setMenuFor(menuFor === participant.identity ? null : participant.identity),
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MoreIcon, { width: 16, height: 16 })
+            }
+          ),
+          menuFor === participant.identity ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            PersonMenu,
+            {
+              participant,
+              placement: "down",
+              onClose: () => setMenuFor(null),
+              ...onMessage !== void 0 ? { onMessage } : {}
+            }
+          ) : null
+        ] })
+      ] }, participant.identity)),
+      shown.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { className: "mx-meet__panel-note", children: [
+        "Nobody matches \u201C",
+        query,
+        "\u201D."
+      ] }) : null
+    ] }),
+    snapshot?.meeting !== null && snapshot?.meeting !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GuestRecordAccessControl, { meeting: snapshot.meeting }) : null
+  ] });
+}
+function PersonMenu({
+  participant,
+  onClose,
+  onMessage,
+  placement = "down"
+}) {
+  const host = useMeetHost();
+  const snapshot = useMeetSnapshot();
+  const controls = useHostControls();
+  const [mode, setMode] = (0, import_react9.useState)("menu");
+  const [text, setText] = (0, import_react9.useState)("");
+  const self = participant.identity === snapshot?.localIdentity;
+  const moderate = controls.canModerate(participant);
+  const pinned = snapshot?.pinned === participant.identity;
+  const spotlit = snapshot?.spotlight === participant.identity;
+  const hasAccount = participant.userId !== null;
+  const [refused, setRefused] = (0, import_react9.useState)(false);
+  const act = (request) => {
+    setRefused(false);
+    void controls.run(request).then((result) => {
+      if (result !== null) onClose();
+      else setRefused(true);
+    });
+  };
+  const refusal = refused && controls.notice?.failed === true ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system.ErrorBox, { as: "p", className: "mx-meet__error", message: controls.notice.text, operation: "Change this participant", origin: "meet/components", children: controls.notice.text }) : null;
+  if (mode === "rename" || mode === "report") {
+    const renaming = mode === "rename";
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Popover, { label: renaming ? "Rename" : "Report", onClose, placement, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "form",
+      {
+        className: "mx-meet__menu-form",
+        onSubmit: (event) => {
+          event.preventDefault();
+          if (text.trim().length === 0) return;
+          act(
+            renaming ? { action: "rename", identity: participant.identity, name: text.trim() } : { action: "report", identity: participant.identity, reason: text.trim() }
+          );
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "mx-meet__field", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__field-label", children: renaming ? "Name shown in this meeting" : `What did ${participant.displayName} do?` }),
+            renaming ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "input",
+              {
+                className: "mx-meet__input",
+                autoFocus: true,
+                maxLength: 80,
+                value: text,
+                onChange: (event) => setText(event.target.value)
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "textarea",
+              {
+                className: "mx-meet__input",
+                autoFocus: true,
+                rows: 3,
+                maxLength: 1e3,
+                value: text,
+                onChange: (event) => setText(event.target.value)
+              }
+            )
+          ] }),
+          refusal,
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__menu-actions", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mx-meet__link", onClick: () => setMode("menu"), children: "Back" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "submit", className: "mx-meet__send", disabled: text.trim().length === 0 || controls.busy, children: renaming ? "Rename" : "Report" })
+          ] })
+        ]
+      }
+    ) });
+  }
+  if (mode === "remove" || mode === "transfer") {
+    const removing = mode === "remove";
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Popover, { label: removing ? "Remove" : "Make host", onClose, placement, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__menu-form", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__confirm-text", children: removing ? `Remove ${participant.displayName}? They leave immediately and cannot rejoin this meeting.` : `Make ${participant.displayName} the host? They get every host control and own this meeting. You stay on as a co-host.` }),
+      refusal,
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__menu-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mx-meet__link", onClick: () => setMode("menu"), children: "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            type: "button",
+            className: removing ? "mx-meet__send mx-meet__send--danger" : "mx-meet__send",
+            disabled: controls.busy,
+            onClick: () => act({ action: removing ? "remove" : "transfer_host", identity: participant.identity }),
+            children: removing ? "Remove" : "Make host"
+          }
+        )
+      ] })
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Popover, { label: `Options for ${participant.displayName}`, onClose, placement, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__menu", role: "menu", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      MenuItem,
+      {
+        onSelect: () => {
+          host?.engine.pin(pinned ? null : participant.identity);
+          onClose();
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PinIcon, { width: 16, height: 16 }),
+          " ",
+          pinned ? "Unpin" : "Pin for me"
+        ]
+      }
+    ),
+    !self && !participant.isAgent && (onMessage !== void 0 || host !== null) ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      MenuItem,
+      {
+        onSelect: () => {
+          if (onMessage !== void 0) onMessage(participant.identity);
+          else
+            host?.store.patch({
+              privateChatRequest: { to: participant.identity, at: Date.now() }
+            });
+          onClose();
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChatIcon, { width: 16, height: 16 }),
+          " Message privately"
+        ]
+      }
+    ) : null,
+    controls.isHost ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MenuItem, { onSelect: () => act({ action: "spotlight", identity: spotlit ? null : participant.identity }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SpotlightIcon, { width: 16, height: 16 }),
+      " ",
+      spotlit ? "Remove spotlight" : "Spotlight for everyone"
+    ] }) : null,
+    moderate ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet__menu-sep", role: "separator" }),
+      participant.micEnabled ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MenuItem, { onSelect: () => act({ action: "mute", identity: participant.identity }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MicOffIcon, { width: 16, height: 16 }),
+        " Mute"
+      ] }) : !participant.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MenuItem, { onSelect: () => act({ action: "ask_unmute", identity: participant.identity }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MicIcon, { width: 16, height: 16 }),
+        " Ask to unmute"
+      ] }) : null,
+      participant.cameraEnabled ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MenuItem, { onSelect: () => act({ action: "stop_video", identity: participant.identity }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CameraOffIcon, { width: 16, height: 16 }),
+        " Stop video"
+      ] }) : null,
+      participant.screenSharing ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MenuItem, { onSelect: () => act({ action: "stop_screen", identity: participant.identity }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ScreenShareIcon, { width: 16, height: 16 }),
+        " Stop screen share"
+      ] }) : null,
+      participant.handRaised ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MenuItem, { onSelect: () => act({ action: "lower_hand", identity: participant.identity }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HandIcon, { width: 16, height: 16 }),
+        " Lower hand"
+      ] }) : null,
+      hasAccount && !participant.isAgent && participant.role !== "cohost" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MenuItem, { onSelect: () => act({ action: "make_cohost", identity: participant.identity }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PeopleIcon, { width: 16, height: 16 }),
+        " Make co-host"
+      ] }) : null,
+      !participant.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        MenuItem,
+        {
+          onSelect: () => {
+            setText(participant.displayName);
+            setMode("rename");
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PencilIcon, { width: 16, height: 16 }),
+            " Rename"
+          ]
+        }
+      ) : null
+    ] }) : null,
+    controls.isOwner && participant.role === "cohost" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MenuItem, { onSelect: () => act({ action: "revoke_cohost", identity: participant.identity }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PeopleIcon, { width: 16, height: 16 }),
+      " Remove co-host"
+    ] }) : null,
+    controls.isOwner && !self && hasAccount && !participant.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MenuItem, { onSelect: () => setMode("transfer"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SpotlightIcon, { width: 16, height: 16 }),
+      " Make host"
+    ] }) : null,
+    self ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      MenuItem,
+      {
+        onSelect: () => {
+          setText(participant.displayName);
+          setMode("rename");
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PencilIcon, { width: 16, height: 16 }),
+          " Rename yourself"
+        ]
+      }
+    ) : null,
+    !self && !participant.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      MenuItem,
+      {
+        onSelect: () => {
+          setText("");
+          setMode("report");
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FlagIcon, { width: 16, height: 16 }),
+          " Report"
+        ]
+      }
+    ) : null,
+    moderate && !participant.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MenuItem, { danger: true, onSelect: () => setMode("remove"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CloseIcon, { width: 16, height: 16 }),
+      " Remove from meeting"
+    ] }) : null
+  ] }) });
+}
+function SettingsPanel({ onClose }) {
+  const host = useRequiredMeetHost();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(PanelShell, { title: "Settings", onClose, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      DeviceSettings,
+      {
+        onPick: (kind, deviceId) => {
+          host.devices.select(kind, deviceId);
+          void host.engine.switchDevice(kind, deviceId);
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(EffectsSettings, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CaptionLanguageSettings, {})
+  ] });
+}
+function DeviceSettings({
+  onPick
+}) {
+  const host = useRequiredMeetHost();
+  const devices = useDeviceSnapshot();
+  const microphone = devices?.selected.audioinput ?? host.devices.resolve("audioinput");
+  const speaker = devices?.selected.audiooutput ?? host.devices.resolve("audiooutput");
+  const stream = useMicrophoneStream(microphone);
+  const level = useAudioLevel(stream);
+  const [testing, setTesting] = (0, import_react9.useState)(false);
+  (0, import_react9.useEffect)(() => {
+    void host.devices.refresh();
+  }, [host]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "mx-meet__section", "aria-label": "Devices", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DevicePicker, { kind: "audioinput", label: "Microphone", onPick }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet__meter", role: "meter", "aria-label": "Microphone level", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(level * 100), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { width: `${Math.min(100, Math.round(level * 160))}%` } }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DevicePicker, { kind: "audiooutput", label: "Speaker", onPick }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: "mx-meet__chip",
+        disabled: testing,
+        onClick: () => {
+          setTesting(true);
+          void playTestSound(speaker).finally(() => setTesting(false));
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SpeakerIcon, { width: 14, height: 14 }),
+          " ",
+          testing ? "Playing\u2026" : "Test speaker"
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DevicePicker, { kind: "videoinput", label: "Camera", onPick })
+  ] });
+}
+function EffectsSettings({ preview }) {
+  const effects = useMediaEffects();
+  const [error, setError] = (0, import_react9.useState)(null);
+  const fileRef = (0, import_react9.useRef)(null);
+  const supported = effects.backgroundsSupported || preview != null || videoEffectsSupported();
+  const apply = (next) => {
+    setError(null);
+    void effects.set(next);
+    if (preview != null) {
+      const merged = { ...effects.effects, ...next };
+      void preview.setEffect(toVideoEffect(merged)).catch(
+        () => setError("This browser could not run the background effect.")
+      );
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "mx-meet__section", "aria-label": "Effects", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__check", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_design_system.Checkbox,
+        {
+          id: "mx-meet-noise",
+          checked: effects.effects.noiseSuppression,
+          onCheckedChange: (checked) => apply({ noiseSuppression: checked === true })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__check-text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system.Label, { htmlFor: "mx-meet-noise", children: "Noise suppression" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__hint", children: "Filters keyboards, fans and background chatter." })
+      ] })
+    ] }),
+    supported ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system.Label, { children: "Background" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_design_system.SegmentedControl,
+        {
+          fullWidth: true,
+          value: effects.effects.background,
+          onValueChange: (kind) => {
+            if (kind === "image") {
+              fileRef.current?.click();
+              return;
+            }
+            apply({ background: kind });
+          },
+          data: [
+            { value: "none", label: "None" },
+            { value: "blur", label: "Blur" },
+            { value: "image", label: "Picture\u2026" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "input",
+        {
+          ref: fileRef,
+          type: "file",
+          accept: "image/*",
+          hidden: true,
+          onChange: (event) => {
+            const file = event.target.files?.[0];
+            event.target.value = "";
+            if (file === void 0) return;
+            void shrinkImage(file).then((url) => apply({ background: "image", backgroundImage: url })).catch(() => setError("That picture could not be read. Try a JPEG or PNG."));
+          }
+        }
+      ),
+      error !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__error", children: error }) : null
+    ] }) : null
+  ] });
+}
+function toVideoEffect(effects) {
+  if (effects.background === "blur") return { kind: "blur" };
+  if (effects.background === "image" && effects.backgroundImage !== null) {
+    return { kind: "image", imageUrl: effects.backgroundImage };
+  }
+  return { kind: "none" };
+}
+async function shrinkImage(file) {
+  const url = URL.createObjectURL(file);
+  try {
+    const image = new Image();
+    image.src = url;
+    await image.decode();
+    const scale = Math.min(1, 1280 / image.naturalWidth);
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.round(image.naturalWidth * scale);
+    canvas.height = Math.round(image.naturalHeight * scale);
+    const context = canvas.getContext("2d");
+    if (context === null) throw new Error("no 2d context");
+    context.drawImage(image, 0, 0, canvas.width, canvas.height);
+    return canvas.toDataURL("image/jpeg", 0.85);
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}
+async function playTestSound(sinkId) {
+  const Context = globalThis.AudioContext;
+  if (Context === void 0) return;
+  const context = new Context();
+  const destination = context.createMediaStreamDestination();
+  const gain = context.createGain();
+  gain.gain.value = 0.2;
+  gain.connect(destination);
+  for (const [frequency, start] of [
+    [660, 0],
+    [880, 0.25]
+  ]) {
+    const oscillator = context.createOscillator();
+    oscillator.frequency.value = frequency;
+    oscillator.connect(gain);
+    oscillator.start(context.currentTime + start);
+    oscillator.stop(context.currentTime + start + 0.22);
+  }
+  const audio = new Audio();
+  audio.srcObject = destination.stream;
+  const sinkable = audio;
+  if (sinkId !== null && sinkId !== "default" && sinkable.setSinkId !== void 0) {
+    await sinkable.setSinkId(sinkId).catch(() => void 0);
+  }
+  await audio.play().catch(() => void 0);
+  await new Promise((resolve) => setTimeout(resolve, 700));
+  audio.pause();
+  await context.close();
+}
+function useMicrophoneStream(deviceId) {
+  const [stream, setStream] = (0, import_react9.useState)(null);
+  (0, import_react9.useEffect)(() => {
+    if (deviceId === "off") return void 0;
+    let live = true;
+    let opened = null;
+    const media = globalThis.navigator?.mediaDevices;
+    if (media === void 0) return void 0;
+    void media.getUserMedia({ audio: deviceId === null ? true : { deviceId: { exact: deviceId } } }).then((next) => {
+      if (!live) {
+        next.getTracks().forEach((track) => track.stop());
+        return;
+      }
+      opened = next;
+      setStream(next);
+    }).catch(() => setStream(null));
+    return () => {
+      live = false;
+      opened?.getTracks().forEach((track) => track.stop());
+      setStream(null);
+    };
+  }, [deviceId]);
+  return stream;
+}
+function LobbyPanel() {
+  const lobby = useLobby();
+  if (!lobby.canAdmit || lobby.waiting.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "mx-meet__lobby", "aria-label": "Waiting room", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("header", { className: "mx-meet__lobby-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "mx-meet__lobby-title", children: lobby.waiting.length === 1 ? "1 person is waiting" : `${lobby.waiting.length} people are waiting` }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mx-meet__link", onClick: () => void lobby.admitAll(), children: "Admit all" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "mx-meet__lobby-list", children: lobby.waiting.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "li",
+      {
+        className: "mx-meet__lobby-row",
+        "data-meet-lobby-entry": "",
+        "data-meet-participant-name": entry.displayName,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { name: entry.displayName, url: entry.avatarUrl, size: 32 }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__person-name", children: [
+            entry.displayName,
+            entry.userId === null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__badge", children: "Guest" }) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ControlButton, { label: `Admit ${entry.displayName}`, onClick: () => void lobby.admit(entry), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckIcon, { width: 16, height: 16 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            ControlButton,
+            {
+              label: `Deny ${entry.displayName}`,
+              danger: true,
+              onClick: () => void lobby.deny(entry),
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CloseIcon, { width: 16, height: 16 })
+            }
+          )
+        ]
+      },
+      entry.identity
+    )) })
+  ] });
+}
+function NoteTakerRow() {
+  const ai = useMeetAi();
+  const status = ai.noteTaker;
+  const duplicateError = status.refusal !== null && ai.error !== null && status.refusal.reason === ai.error.message && status.refusal.remedy === ai.error.remedy;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "mx-meet__note-taker", "aria-label": "Note-taker", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: `mx-meet__note-taker-state mx-meet__note-taker-state--${status.state}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__note-taker-dot", "aria-hidden": "true" }),
+      ai.noteTakerLabel
+    ] }),
+    status.detail !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__panel-note", children: status.detail }) : null,
+    status.refusal !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system.ErrorBox, { as: "div", className: "mx-meet__refusal", error: status.refusal, operation: "Join this meeting", origin: "meet/components", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__refusal-reason", children: status.refusal.reason }),
+      status.refusal.remedy.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__refusal-remedy", children: status.refusal.remedy }) : null
+    ] }) : null,
+    ai.error !== null && !duplicateError ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system.ErrorBox, { as: "div", className: "mx-meet__refusal", error: ai.error, operation: "Run the meeting assistant", origin: "meet/components", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__refusal-reason", children: ai.error.message }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__refusal-remedy", children: ai.error.remedy })
+    ] }) : null,
+    ai.canControlNoteTaker ? status.state === "transcribing" || status.state === "joining" || status.state === "handoff_pending" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "mx-meet__link",
+        onClick: () => void ai.stopNoteTaker(),
+        children: "Dismiss the note-taker"
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "mx-meet__primary",
+        onClick: () => void ai.startNoteTaker(),
+        children: "Start note-taker"
+      }
+    ) : null
+  ] });
+}
+function NoteList({
+  title,
+  notes,
+  empty
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "mx-meet__note-group", "aria-label": title, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "mx-meet__note-group-title", children: title }),
+    notes.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__panel-note", children: empty }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "mx-meet__notes", children: notes.map((note) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { className: "mx-meet__note", children: [
+      note.text,
+      note.assigneeDisplayName !== void 0 && note.assigneeDisplayName !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__assignee", children: note.assigneeDisplayName }) : null
+    ] }, note.id)) })
+  ] });
+}
+function AiPanel({ onClose }) {
+  const ai = useMeetAi();
+  const [question, setQuestion] = (0, import_react9.useState)("");
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(PanelShell, { title: "Meeting assistant", onClose, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(NoteTakerRow, {}),
+    ai.summary !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "mx-meet__note-group", "aria-label": "Summary", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "mx-meet__note-group-title", children: "Summary" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__summary", children: ai.summary.text })
+    ] }) : null,
+    ai.wrapUp !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "mx-meet__wrap-up-notice", role: "status", children: [
+      "The wrap-up is written \u2014 ",
+      ai.wrapUp.noteIds.length,
+      " ",
+      ai.wrapUp.noteIds.length === 1 ? "entry" : "entries",
+      " from",
+      " ",
+      ai.wrapUp.segmentCount,
+      " ",
+      ai.wrapUp.segmentCount === 1 ? "transcript line" : "transcript lines",
+      "."
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      NoteList,
+      {
+        title: "Notes",
+        notes: ai.notes,
+        empty: "Notes appear here as the meeting goes on."
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      NoteList,
+      {
+        title: "Decisions",
+        notes: ai.decisions,
+        empty: "Nothing has been decided yet."
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      NoteList,
+      {
+        title: "Action items",
+        notes: ai.actionItems,
+        empty: "No action items yet."
+      }
+    ),
+    ai.transcript.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "mx-meet__note-group", "aria-label": "Transcript", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "mx-meet__note-group-title", children: "Transcript" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "mx-meet__transcript", children: ai.transcript.map((line) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        "li",
+        {
+          className: line.final && line.source === "record" ? "mx-meet__line" : "mx-meet__line mx-meet__line--interim",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: line.speaker }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: line.text })
+          ]
+        },
+        line.id
+      )) })
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "form",
+      {
+        className: "mx-meet__composer",
+        onSubmit: (event) => {
+          event.preventDefault();
+          const asked = question;
+          setQuestion("");
+          void ai.ask(asked);
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "input",
+            {
+              className: "mx-meet__input",
+              value: question,
+              onChange: (event) => setQuestion(event.target.value),
+              placeholder: "Ask about this meeting",
+              "aria-label": "Ask about this meeting"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "submit", className: "mx-meet__send", disabled: ai.asking, children: ai.asking ? "Asking\u2026" : "Ask" })
+        ]
+      }
+    ),
+    ai.asking && ai.phase !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__panel-note", role: "status", children: ai.phase }) : null,
+    ai.answer !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__answer", children: ai.answer }) : null,
+    ai.answer !== null && ai.coverage !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "mx-meet__coverage", children: [
+      "Answered from ",
+      ai.coverage.segmentsUsed,
+      " of ",
+      ai.coverage.segmentsTotal,
+      " transcript lines",
+      ai.coverage.truncated ? " (the oldest were left out)" : "",
+      "."
+    ] }) : null,
+    ai.error !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system.ErrorBox, { as: "div", className: "mx-meet__refusal", error: ai.error, operation: "Run the meeting assistant", origin: "meet/components", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__refusal-reason", children: ai.error.message }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__refusal-remedy", children: ai.error.remedy })
+    ] }) : 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__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__captions", "aria-live": "polite", "aria-label": "Live captions", children: [
+    visible.map((line) => {
+      const translated = translation.language === null ? void 0 : translation.translations[line.id];
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        "p",
+        {
+          className: line.final ? "mx-meet__caption" : "mx-meet__caption mx-meet__caption--interim",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: line.speaker }),
+            " ",
+            translated ?? line.text,
+            translated !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__caption-original", children: line.text }) : null
+          ]
+        },
+        line.id
+      );
+    }),
+    translation.language !== null && translation.error !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__caption mx-meet__caption--interim", children: translation.error }) : null
+  ] });
+}
+function ConsentNotice() {
+  const notice = useConsentNotice();
+  if (notice === null) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__consent", role: "status", children: notice });
+}
+function AttendanceNotice() {
+  const media = useLocalMedia();
+  const notice = listenOnlyNotice(media);
+  if (notice === null) return null;
+  const refused = media.microphone.unavailable;
+  const code = microphoneNoticeCode(media.microphone);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "p",
+    {
+      className: "mx-meet__banner mx-meet__banner--attendance",
+      role: "status",
+      ...code !== null ? { "data-meet-notice": code } : {},
+      children: [
+        notice,
+        refused === null ? null : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__remedy", children: refused.remedy })
+      ]
+    }
+  );
+}
+function PreJoin(props) {
+  const host = useMeetHost();
+  if (host === null) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InertNotice, { what: "This meeting" });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PreJoinBody, { ...props, host });
+}
+function PreJoinBody({
+  roomName,
+  meetingId,
+  slug,
+  onJoined,
+  host
+}) {
+  const room = useRoom();
+  const devices = useDeviceSnapshot();
+  const recording = useRecording();
+  const effects = useMediaEffects();
+  const { notice } = useModerationNotice();
+  const [mode, setMode] = (0, import_react9.useState)("video");
+  const [microphone, setMicrophone] = (0, import_react9.useState)(true);
+  const [joining, setJoining] = (0, import_react9.useState)(false);
+  const camera = devices?.selected.videoinput ?? host.devices.resolve("videoinput");
+  const mic = devices?.selected.audioinput ?? host.devices.resolve("audioinput");
+  const preview = useCameraPreview(mode === "video" ? camera : void 0, effects.effects);
+  const micStream = useMicrophoneStream(microphone ? mic : "off");
+  const level = useAudioLevel(micStream);
+  const [speakerTesting, setSpeakerTesting] = (0, import_react9.useState)(false);
+  (0, import_react9.useEffect)(() => {
+    void host.devices.refresh();
+  }, [host]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__prejoin", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__preview", children: [
+      mode === "video" && preview.preview !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "video",
+        {
+          className: "mx-meet__video mx-meet__video--mirror",
+          autoPlay: true,
+          playsInline: true,
+          muted: true,
+          ref: (element) => {
+            if (element !== null) preview.preview?.attach(element);
+          }
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet__tile-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { name: host.identity.displayName, url: host.identity.avatarUrl, size: 96 }) }),
+      mode === "video" && preview.error !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__preview-note", children: preview.error }) : null,
+      microphone && micStream !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet__meter mx-meet__meter--preview", role: "meter", "aria-label": "Microphone level", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(level * 100), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { width: `${Math.min(100, Math.round(level * 160))}%` } }) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__prejoin-panel", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h1", { className: "mx-meet__prejoin-title", children: "Ready to join?" }),
+      notice?.kind === "removed" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__warning", children: notice.text }) : null,
+      devices?.labelsHidden === true ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "mx-meet__panel-note", children: [
+        "Your browser is hiding device names until you allow camera and microphone access.",
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "mx-meet__link",
+            onClick: () => {
+              void host.devices.requestPermission({ audio: true, video: true });
+            },
+            children: "Allow access"
+          }
+        )
+      ] }) : null,
+      devices?.fallbackNotice != null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__warning", children: devices.fallbackNotice }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DevicePicker, { kind: "audioinput", label: "Microphone" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__field-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DevicePicker, { kind: "audiooutput", label: "Speaker" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          import_design_system.Button,
+          {
+            type: "button",
+            variant: "outline",
+            disabled: speakerTesting,
+            onClick: () => {
+              setSpeakerTesting(true);
+              void playTestSound(devices?.selected.audiooutput ?? host.devices.resolve("audiooutput")).finally(
+                () => setSpeakerTesting(false)
+              );
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SpeakerIcon, {}),
+              " ",
+              speakerTesting ? "Playing\u2026" : "Test"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DevicePicker, { kind: "videoinput", label: "Camera" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(EffectsSettings, { preview: preview.preview }),
+      recording.consentNotice !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system.Alert, { variant: "info", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system.AlertDescription, { children: recording.consentNotice }) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__prejoin-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__check", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_design_system.Checkbox,
+            {
+              id: "mx-meet-join-video",
+              checked: mode === "video",
+              onCheckedChange: (checked) => setMode(checked === true ? "video" : "audio")
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system.Label, { htmlFor: "mx-meet-join-video", children: "Join with video" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__check", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_design_system.Checkbox,
+            {
+              id: "mx-meet-join-mic",
+              checked: microphone,
+              onCheckedChange: (checked) => setMicrophone(checked === true)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system.Label, { htmlFor: "mx-meet-join-mic", children: "Join with microphone" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_design_system.Button,
+          {
+            type: "button",
+            className: "mx-meet__join",
+            disabled: joining,
+            onClick: () => {
+              setJoining(true);
+              preview.release();
+              void room.join({
+                roomName,
+                mode,
+                microphone,
+                ...meetingId !== void 0 ? { meetingId } : {},
+                ...slug !== void 0 ? { slug } : {}
+              }).then(() => onJoined?.()).catch(() => void 0).finally(() => setJoining(false));
+            },
+            children: joining ? "Joining\u2026" : "Join now"
+          }
+        )
+      ] }),
+      room.failure !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "mx-meet__error", children: [
+        room.failure.message,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__remedy", children: room.failure.remedy })
+      ] }) : null
+    ] })
+  ] });
+}
+function useCameraPreview(deviceId, effects) {
+  const [preview, setPreview] = (0, import_react9.useState)(null);
+  const [error, setError] = (0, import_react9.useState)(null);
+  const current = (0, import_react9.useRef)(null);
+  const initialEffect = (0, import_react9.useRef)(toVideoEffect(effects));
+  initialEffect.current = toVideoEffect(effects);
+  (0, import_react9.useEffect)(() => {
+    if (deviceId === void 0) return void 0;
+    let live = true;
+    setError(null);
+    void createCameraPreview(deviceId, initialEffect.current).then((created) => {
+      if (!live) {
+        created.stop();
+        return;
+      }
+      current.current = created;
+      setPreview(created);
+    }).catch((thrown) => {
+      if (!live) return;
+      const failure = thrown;
+      const message = (failure.message ?? "").replace(/^meet\.[A-Za-z.()]+:\s*/, "");
+      const sentence = message.length > 0 ? message.charAt(0).toUpperCase() + message.slice(1) : "";
+      setError([sentence, failure.remedy].filter(Boolean).join(". ") || "The camera did not start.");
+    });
+    return () => {
+      live = false;
+      current.current?.stop();
+      current.current = null;
+      setPreview(null);
+    };
+  }, [deviceId]);
+  return {
+    preview,
+    error,
+    release: () => {
+      current.current?.stop();
+      current.current = null;
+      setPreview(null);
+    }
+  };
+}
+function DevicePicker({
+  kind,
+  label,
+  onPick
+}) {
+  const host = useRequiredMeetHost();
+  const devices = useDeviceSnapshot();
+  const list = devices?.devices[kind] ?? [];
+  if (list.length === 0) return null;
+  const triggerId = `mx-meet-device-${kind}`;
+  const valueOf = (deviceId) => deviceId.length > 0 ? deviceId : "default";
+  const current = devices?.selected[kind] ?? host.devices.resolve(kind) ?? "";
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__field", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system.Label, { htmlFor: triggerId, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      import_design_system.Select,
+      {
+        ...current.length > 0 ? { value: valueOf(current) } : {},
+        onValueChange: (value) => {
+          const deviceId = list.find((device) => valueOf(device.deviceId) === value)?.deviceId ?? value;
+          if (onPick !== void 0) onPick(kind, deviceId);
+          else host.devices.select(kind, deviceId);
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system.SelectTrigger, { id: triggerId, "aria-label": label, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system.SelectValue, { placeholder: label }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system.SelectContent, { children: list.map((device) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system.SelectItem, { value: valueOf(device.deviceId), children: device.label.length > 0 ? device.label : `${label} (name hidden)` }, device.deviceId || "default")) })
+        ]
+      }
+    )
+  ] });
+}
+function MeetSkinRoom({
+  roomName,
+  meetingId,
+  slug,
+  onLeave,
+  headerControls
+}) {
+  const { host, snapshot, isHost } = useMeetCore();
+  const elapsed = useElapsed(snapshot?.meeting?.startedAt ?? null);
+  const phase = snapshot?.phase ?? "idle";
+  if (host === null) return null;
+  if (phase === "idle" || phase === "failed" || phase === "left") {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      PreJoin,
+      {
+        roomName,
+        ...meetingId !== void 0 ? { meetingId } : {},
+        ...slug !== void 0 ? { slug } : {}
+      }
+    ) });
+  }
+  if (phase === "lobby") {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet mx-meet--lobby", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(WaitingRoom, { roomName, host }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ConsentNotice, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AttendanceNotice, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("header", { className: "mx-meet__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h1", { className: "mx-meet__title", children: snapshot?.meeting?.title ?? "Meeting" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__meta", children: [
+        participantSummary(snapshot?.participants ?? []),
+        elapsed > 0 ? ` \xB7 ${(0, import_format2.formatDurationMs)(elapsed)}` : ""
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RecordingIndicator, {}),
+      snapshot?.locked === true ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__badge", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LockIcon, { width: 12, height: 12 }),
+        " Locked"
+      ] }) : null,
+      headerControls !== void 0 && headerControls !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__header-controls", "data-meet-header-controls": "", children: headerControls }) : null,
+      isHost ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HostMenu, {}) : null
+    ] }),
+    phase === "reconnecting" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__banner", role: "status", children: "Reconnecting\u2026" }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Stage, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Captions, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ControlBar, { ...onLeave !== void 0 ? { onLeave } : {} })
+  ] });
+}
+function WaitingRoom({ roomName, host }) {
+  const knocked = (0, import_react9.useRef)(false);
+  (0, import_react9.useEffect)(() => {
+    if (knocked.current) return;
+    knocked.current = true;
+    host.meetings.knock(roomName);
+  }, [host, roomName]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__waiting", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { name: host.identity.displayName, url: host.identity.avatarUrl, size: 72 }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h1", { className: "mx-meet__prejoin-title", children: "Waiting for the host to let you in" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "mx-meet__empty-body", children: [
+      "You are in the waiting room as ",
+      host.identity.displayName,
+      ". You will join automatically once you are admitted."
+    ] })
+  ] });
+}
+function HostMenu() {
+  const host = useRequiredMeetHost();
+  const snapshot = useMeetSnapshot();
+  const end = useEndMeeting();
+  const [confirmingEnd, setConfirmingEnd] = (0, import_react9.useState)(false);
+  const locked = snapshot?.locked === true;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__host-menu", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "mx-meet__link",
+        onClick: () => {
+          void host.meetings.setLock(!locked);
+        },
+        children: locked ? "Unlock meeting" : "Lock meeting"
+      }
+    ),
+    end.canEnd ? confirmingEnd ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__confirm", role: "group", "aria-label": "End this meeting?", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__confirm-text", children: "End it for everyone? Every participant is disconnected, the note-taker stops, and the wrap-up is written. Nobody can rejoin this meeting afterwards." }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "mx-meet__link mx-meet__link--danger",
+          onClick: () => {
+            setConfirmingEnd(false);
+            void end.end();
+          },
+          children: "End it"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "mx-meet__link",
+          onClick: () => setConfirmingEnd(false),
+          children: "Keep it running"
+        }
+      )
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "mx-meet__link mx-meet__link--danger",
+        onClick: () => setConfirmingEnd(true),
+        children: end.ending ? "Ending\u2026" : "End meeting for everyone"
+      }
+    ) : null,
+    end.notice !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__notice", role: "status", children: end.notice }) : null
+  ] });
+}
+function ReactionOverlay({
+  reactions
+}) {
+  if (reactions.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet__reactions", "aria-hidden": "true", children: reactions.map((reaction) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__reaction", children: reaction.emoji }, reaction.id)) });
+}
+function clockOf(iso) {
+  const at = new Date(iso);
+  if (Number.isNaN(at.getTime())) return "";
+  return at.toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit" });
+}
+function GuestRecordAccessControl({
+  meeting
+}) {
+  const host = useMeetHost();
+  const inRoomHost = useIsHost();
+  const access = useGuestRecordAccess(meeting);
+  const viewerId = host?.identity.userId ?? null;
+  const isHost = inRoomHost || viewerId !== null && meeting.hostUserId === viewerId;
+  if (host === null || !isHost) return null;
+  const resolved = access.setting === "default" && access.effective !== null ? ` Right now that means: ${guestRecordAccessLabel(access.effective.level).toLowerCase()}.` : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "mx-meet__record-section", "aria-label": "What guests may read", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: "mx-meet__record-section-title", children: "What guests may read" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "mx-meet__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__field-label", children: "People who attended by link, without an account" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "select",
+        {
+          className: "mx-meet__select",
+          value: access.setting,
+          disabled: access.saving,
+          onChange: (event) => {
+            void access.choose(
+              event.target.value
+            );
+          },
+          children: GUEST_RECORD_ACCESS_CHOICES.map((choice) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: choice, children: guestRecordAccessLabel(choice) }, choice))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "mx-meet__panel-note", children: [
+      guestRecordAccessExplanation(access.setting),
+      resolved
+    ] }),
+    access.saving ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__panel-note", role: "status", children: "Saving what guests may read\u2026" }) : null,
+    access.error !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system.ErrorBox, { as: "div", className: "mx-meet__refusal", error: access.error, operation: "Change who can join", origin: "meet/components", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__refusal-reason", children: access.error.message }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__refusal-remedy", children: access.error.remedy })
+    ] }) : null
+  ] });
+}
+//# sourceMappingURL=meet.cjs.map