@ai-matrx/meet 0.7.84 → 0.7.85

package/dist/react.cjs

@@ -33,54 +33,26 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var react_exports = {};
 __export(react_exports, {
   ATTENDANCE_CSV_HEADER: () => ATTENDANCE_CSV_HEADER,
-  ActivitiesControl: () => ActivitiesControl,
-  ActivitiesIcon: () => ActivitiesIcon,
-  AiPanel: () => AiPanel,
-  AttendanceNotice: () => AttendanceNotice,
-  Avatar: () => Avatar,
-  BreakoutBanner: () => BreakoutBanner,
-  BreakoutIcon: () => BreakoutIcon,
-  BreakoutsPanel: () => BreakoutsPanel,
   CALL_INVITE_KIND: () => CALL_INVITE_KIND,
   CALL_INVITE_VERSION: () => CALL_INVITE_VERSION,
   CAPTION_LANGUAGES: () => CAPTION_LANGUAGES,
   CONSENT_NOTICE_ATTRIBUTE: () => CONSENT_NOTICE_ATTRIBUTE,
-  CallButton: () => CallButton,
-  CameraIcon: () => CameraIcon,
-  CameraOffIcon: () => CameraOffIcon,
-  CaptionLanguageSettings: () => CaptionLanguageSettings,
-  Captions: () => Captions,
-  ChatIcon: () => ChatIcon,
-  ChatPanel: () => ChatPanel,
-  CheckIcon: () => CheckIcon,
-  CloseIcon: () => CloseIcon,
-  ConnectionDot: () => ConnectionDot,
-  ConsentNotice: () => ConsentNotice,
-  ControlBar: () => ControlBar,
-  ControlButton: () => ControlButton,
   DATA_TOPICS: () => DATA_TOPICS,
   DEFAULT_EFFECTS: () => DEFAULT_EFFECTS,
   DEFAULT_PAGE_SIZE: () => DEFAULT_PAGE_SIZE,
   EMPTY_COLLAB: () => EMPTY_COLLAB,
   END_MEETING_NOT_SERVED: () => END_MEETING_NOT_SERVED,
   FILE_SESSION_PATH: () => FILE_SESSION_PATH,
-  FlagIcon: () => FlagIcon,
   GUEST_RECORD_ACCESS_CHOICES: () => GUEST_RECORD_ACCESS_CHOICES,
   GUEST_RECORD_ACCESS_LEVELS: () => GUEST_RECORD_ACCESS_LEVELS,
   GUEST_RECORD_ACCESS_METADATA_KEY: () => GUEST_RECORD_ACCESS_METADATA_KEY,
   GUEST_RECORD_NOT_SHARED: () => GUEST_RECORD_NOT_SHARED,
   GuestRecordAccessControl: () => GuestRecordAccessControl,
-  HandIcon: () => HandIcon,
-  HostMenu: () => HostMenu,
   IDLE_MEDIA: () => IDLE_MEDIA,
   IDLE_TRACK: () => IDLE_TRACK,
   IncomingCallCard: () => IncomingCallCard,
   IncomingCallHost: () => IncomingCallHost,
-  KeyboardIcon: () => KeyboardIcon,
   LISTEN_ONLY_NOTICE: () => LISTEN_ONLY_NOTICE,
-  LayoutIcon: () => LayoutIcon,
-  LobbyPanel: () => LobbyPanel,
-  LockIcon: () => LockIcon,
   MEETING_INVITE_KIND: () => MEETING_INVITE_KIND,
   MEETING_INVITE_VERSION: () => MEETING_INVITE_VERSION,
   MEETING_RECORD_GRACE_MS: () => MEETING_RECORD_GRACE_MS,
@@ -95,33 +67,14 @@ __export(react_exports, {
   MeetError: () => MeetError,
   MeetProvider: () => MeetProvider,
   MeetRoot: () => MeetRoot,
-  MeetingList: () => MeetingList,
-  MeetingOverlays: () => MeetingOverlays,
   MeetingRecordView: () => MeetingRecordView,
-  MeetingRoom: () => MeetingRoom,
-  MicIcon: () => MicIcon,
-  MicOffIcon: () => MicOffIcon,
-  MoreIcon: () => MoreIcon,
+  MeetingSkinRoot: () => MeetingSkinRoot,
   NOTE_TAKER_IDENTITY_PREFIX: () => NOTE_TAKER_IDENTITY_PREFIX,
   NOTE_TAKER_METADATA_KEY: () => NOTE_TAKER_METADATA_KEY,
   NO_GRANTS: () => NO_GRANTS,
   ORGANIZATION_HEADER: () => ORGANIZATION_HEADER,
   PARTICIPANT_CAN_RECORD_ATTRIBUTE: () => PARTICIPANT_CAN_RECORD_ATTRIBUTE,
   PARTICIPANT_ROLE_ATTRIBUTE: () => PARTICIPANT_ROLE_ATTRIBUTE,
-  ParticipantTile: () => ParticipantTile,
-  PencilIcon: () => PencilIcon,
-  PeopleIcon: () => PeopleIcon,
-  PeoplePanel: () => PeoplePanel,
-  PersonMenu: () => PersonMenu,
-  PhoneIcon: () => PhoneIcon,
-  PhoneOffIcon: () => PhoneOffIcon,
-  PinIcon: () => PinIcon,
-  PollIcon: () => PollIcon,
-  PollsPanel: () => PollsPanel,
-  PreJoin: () => PreJoin,
-  QaPanel: () => QaPanel,
-  QualityBars: () => QualityBars,
-  QuestionIcon: () => QuestionIcon,
   REACTION_TTL_MS: () => REACTION_TTL_MS,
   REFUSED_ABSENCE: () => REFUSED_ABSENCE,
   ROLE_RANK: () => ROLE_RANK,
@@ -129,30 +82,13 @@ __export(react_exports, {
   ROOM_EVENT_PREFIX: () => ROOM_EVENT_PREFIX,
   ROOM_TOKEN_HEADER: () => ROOM_TOKEN_HEADER,
   RPCS: () => RPCS,
-  ReactionOverlay: () => ReactionOverlay,
-  RecordIcon: () => RecordIcon,
-  RecordingIndicator: () => RecordingIndicator,
   RecordingPlayer: () => RecordingPlayer,
-  ScheduleMeeting: () => ScheduleMeeting,
-  ScreenShareIcon: () => ScreenShareIcon,
-  SearchIcon: () => SearchIcon,
-  SettingsIcon: () => SettingsIcon,
-  SettingsPanel: () => SettingsPanel,
-  ShortcutsSheet: () => ShortcutsSheet,
-  SignalIcon: () => SignalIcon,
-  SmileIcon: () => SmileIcon,
-  SparklesIcon: () => SparklesIcon,
-  SpeakerIcon: () => SpeakerIcon,
-  SpotlightIcon: () => SpotlightIcon,
-  Stage: () => Stage,
   TABLES: () => TABLES,
   TRANSCRIPTION_ATTRIBUTES: () => TRANSCRIPTION_ATTRIBUTES,
   TRANSCRIPTION_TOPIC: () => TRANSCRIPTION_TOPIC,
-  WhiteboardIcon: () => WhiteboardIcon,
-  WhiteboardPanel: () => WhiteboardPanel,
-  WifiLowIcon: () => WifiLowIcon,
   absenceSentence: () => absenceSentence,
   activeWrapUpSummary: () => activeWrapUpSummary,
+  activityAttention: () => activityAttention,
   announceMeeting: () => announceMeeting,
   applyCollabPacket: () => applyCollabPacket,
   applyRoomEvent: () => applyRoomEvent,
@@ -169,6 +105,7 @@ __export(react_exports, {
   attendanceTotals: () => attendanceTotals,
   attendeeKey: () => attendeeKey,
   autoAssign: () => autoAssign,
+  availableActivities: () => availableActivities,
   breakoutRemainingMs: () => breakoutRemainingMs,
   callInviteAction: () => callInviteAction,
   callInviteText: () => callInviteText,
@@ -241,6 +178,8 @@ __export(react_exports, {
   mergeCaption: () => mergeCaption,
   mergeRecord: () => mergeRecord,
   microphoneNoticeCode: () => microphoneNoticeCode,
+  moveToRoom: () => moveToRoom,
+  nextTranslationBatch: () => nextTranslationBatch,
   normalizeDeviceError: () => normalizeDeviceError,
   normalizeMeetError: () => normalizeMeetError,
   normalizeSpoken: () => normalizeSpoken,
@@ -257,6 +196,7 @@ __export(react_exports, {
   parseRoomToken: () => parseRoomToken,
   participantAttributes: () => participantAttributes,
   participantSummary: () => participantSummary,
+  performCollab: () => performCollab,
   playableRecordingFileId: () => playableRecordingFileId,
   projectInvitee: () => projectInvitee,
   projectLibraryRecording: () => projectLibraryRecording,
@@ -279,15 +219,20 @@ __export(react_exports, {
   rootAttributes: () => rootAttributes,
   searchTranscript: () => searchTranscript,
   sendFollowUp: () => sendFollowUp,
+  setCaptionLanguage: () => setCaptionLanguage,
   setGuestRecordAccess: () => setGuestRecordAccess,
   settingsPatch: () => settingsPatch,
   snapshotParticipant: () => snapshotParticipant,
   snippetRuns: () => snippetRuns,
   staticObservation: () => staticObservation,
   summarizeMeetingRecordRestrictions: () => summarizeMeetingRecordRestrictions,
+  takeMoveRequest: () => takeMoveRequest,
+  takePanelRequest: () => takePanelRequest,
   transcriptDocument: () => transcriptDocument,
   unavailableFrom: () => unavailableFrom,
   uniqueAttendees: () => uniqueAttendees,
+  untranslatedLines: () => untranslatedLines,
+  useActivityAttention: () => useActivityAttention,
   useAudioLevel: () => useAudioLevel,
   useAvailableActivities: () => useAvailableActivities,
   useCalls: () => useCalls,
@@ -312,6 +257,7 @@ __export(react_exports, {
   useLocalUserId: () => useLocalUserId,
   useMediaEffects: () => useMediaEffects,
   useMeetAi: () => useMeetAi,
+  useMeetCore: () => useMeetCore,
   useMeetHost: () => useMeetHost,
   useMeetShortcuts: () => useMeetShortcuts,
   useMeetSnapshot: () => useMeetSnapshot,
@@ -334,6 +280,18 @@ __export(react_exports, {
 });
 module.exports = __toCommonJS(react_exports);
 
+// src/core/slot.ts
+var NAMESPACE = "ai-matrx.meet";
+function globalSlot(name, create) {
+  const key = /* @__PURE__ */ Symbol.for(`${NAMESPACE}.${name}`);
+  const host = globalThis;
+  const existing = host[key];
+  if (existing !== void 0) return existing;
+  const created = create();
+  host[key] = created;
+  return created;
+}
+
 // src/react/provider.tsx
 var import_react = require("react");
 var import_react2 = require("@ai-matrx/realtime/react");
@@ -1221,20 +1179,6 @@ function fileDownloadPath(fileId) {
 
 // src/core/channels.ts
 var import_realtime = require("@ai-matrx/realtime");
-
-// src/core/slot.ts
-var NAMESPACE = "ai-matrx.meet";
-function globalSlot(name, create) {
-  const key = /* @__PURE__ */ Symbol.for(`${NAMESPACE}.${name}`);
-  const host = globalThis;
-  const existing = host[key];
-  if (existing !== void 0) return existing;
-  const created = create();
-  host[key] = created;
-  return created;
-}
-
-// src/core/channels.ts
 function namespaces() {
   return globalSlot("channel-namespaces", () => ({
     user: (0, import_realtime.defineChannelNamespace)({
@@ -5543,7 +5487,7 @@ async function createCameraPreview(deviceId2, effect) {
 
 // src/react/provider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var MeetContext = (0, import_react.createContext)(null);
+var MeetContext = globalSlot("react.context", () => (0, import_react.createContext)(null));
 function defaultDiagnostics(event) {
   const line = `[@ai-matrx/meet] ${event.message}${event.remedy !== void 0 ? `
   \u2192 ${event.remedy}` : ""}`;
@@ -7521,10 +7465,15 @@ function useGuestRecordAccess(meeting) {
   };
 }
 
-// src/react/components.tsx
+// src/react/skin-root.tsx
+var import_react11 = require("react");
+
+// src/skins/meet/components.tsx
+var import_react9 = require("react");
+
+// src/react/facade.ts
 var import_react7 = require("react");
-var import_design_system = require("@ai-matrx/design-system");
-var import_format4 = require("@ai-matrx/kit/format");
+var import_format3 = require("@ai-matrx/kit/format");
 
 // src/core/after.ts
 var import_delimited = require("@ai-matrx/kit/delimited");
@@ -7961,11 +7910,151 @@ function countLabel(count2, singular, plural = `${singular}s`) {
   return `${count2} ${count2 === 1 ? singular : plural}`;
 }
 
-// src/react/collab.tsx
+// 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: text3 }) => ({ id, text: text3 }));
+}
+function nextTranslationBatch(pending, language, asked) {
+  const batch = pending.filter((line) => !asked.has(`${language}:${line.id}`)).slice(-20);
+  for (const line of batch) asked.add(`${language}:${line.id}`);
+  return batch;
+}
+function setCaptionLanguage(store, next) {
+  store.patch({
+    collab: {
+      ...store.snapshot().collab,
+      captionLanguage: next,
+      captionTranslations: {},
+      captionTranslationError: null
+    }
+  });
+}
+function takePanelRequest(store) {
+  const request = store.snapshot().collab.panelRequest;
+  if (request === null) return null;
+  store.patch({ collab: { ...store.snapshot().collab, panelRequest: null } });
+  return request.panel;
+}
+function takeMoveRequest(store) {
+  const request = store.snapshot().collab.moveRequest;
+  if (request === null) return null;
+  store.patch({ collab: { ...store.snapshot().collab, moveRequest: null } });
+  return { roomId: request.roomId };
+}
+
+// src/react/collab-hooks.ts
 var import_react6 = require("react");
-var import_format3 = require("@ai-matrx/kit/format");
+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/react/icons.tsx
+// src/skins/meet/icons.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function Icon({ children, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -8061,12 +8150,6 @@ function LockIcon(props) {
     /* @__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" }),
@@ -8085,12 +8168,6 @@ function PinIcon(props) {
     /* @__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" }),
@@ -8203,40 +8280,11 @@ function UndoIcon(props) {
   ] });
 }
 
-// src/react/collab.tsx
+// src/skins/meet/collab.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-function useCollab() {
-  const host = useMeetHost();
-  const snapshot = useMeetSnapshot();
-  const isHost = useIsHost();
-  return {
-    collab: snapshot?.collab ?? null,
-    isHost,
-    localIdentity: snapshot?.localIdentity ?? null,
-    breakoutRoomId: snapshot?.breakoutRoomId ?? null,
-    async act(request) {
-      if (host === null) return { ok: false, message: "This meeting is not connected." };
-      try {
-        const result = await host.inRoom.collab(request);
-        return { ok: true, message: result.message, itemId: result.itemId };
-      } catch (error) {
-        return { ok: false, message: error.message ?? "That did not work." };
-      }
-    },
-    async moveTo(roomId) {
-      if (host === null) return { ok: false, message: "This meeting is not connected." };
-      try {
-        await host.engine.moveToBreakout(roomId);
-        return { ok: true, message: roomId === null ? "Back in the main room." : "Joined the breakout room." };
-      } catch (error) {
-        return { ok: false, message: error.message ?? "That room could not be joined." };
-      }
-    }
-  };
-}
 function useNotice() {
-  const [notice, setNotice] = (0, import_react6.useState)(null);
-  (0, import_react6.useEffect)(() => {
+  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);
@@ -8260,29 +8308,11 @@ function ActivityIcon({ panel }) {
   if (panel === "whiteboard") return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WhiteboardIcon, { ...props });
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BreakoutIcon, { ...props });
 }
-function useAvailableActivities() {
-  const { collab, isHost } = useCollab();
-  const settings = collab?.settings ?? null;
-  if (settings === null) return [];
-  const out = [];
-  if (settings.whiteboardEnabled) out.push("whiteboard");
-  if (settings.pollsEnabled && (isHost || (collab?.polls.length ?? 0) > 0)) out.push("polls");
-  if (settings.qaEnabled) out.push("qa");
-  if (settings.breakoutsEnabled && (isHost || collab?.breakout?.state === "open")) out.push("breakouts");
-  return out;
-}
-function useActivityAttention() {
-  const { collab, isHost } = useCollab();
-  if (collab === null) return false;
-  if (collab.polls.some((poll) => poll.state === "live" && poll.myVote.length === 0 && !isHost)) return true;
-  if (isHost && collab.questions.some((q) => q.state === "open")) return true;
-  return false;
-}
 function ActivitiesControl({
   active,
   onOpen
 }) {
-  const [open, setOpen] = (0, import_react6.useState)(false);
+  const [open, setOpen] = (0, import_react8.useState)(false);
   const available = useAvailableActivities();
   const attention = useActivityAttention();
   if (available.length === 0) return null;
@@ -8310,11 +8340,11 @@ function ActivitiesControl({
 }
 function PollComposer({ maxOptions, onDone }) {
   const { act } = useCollab();
-  const [question, setQuestion] = (0, import_react6.useState)("");
-  const [options, setOptions] = (0, import_react6.useState)(["", ""]);
-  const [multiple, setMultiple] = (0, import_react6.useState)(false);
-  const [anonymous, setAnonymous] = (0, import_react6.useState)(false);
-  const [busy, setBusy] = (0, import_react6.useState)(false);
+  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;
@@ -8395,9 +8425,9 @@ function PollComposer({ maxOptions, onDone }) {
 }
 function PollCard({ poll }) {
   const { act, isHost } = useCollab();
-  const [picked, setPicked] = (0, import_react6.useState)(poll.myVote.slice());
+  const [picked, setPicked] = (0, import_react8.useState)(poll.myVote.slice());
   const [notice, show] = useNotice();
-  (0, import_react6.useEffect)(() => setPicked(poll.myVote.slice()), [poll.myVote]);
+  (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";
@@ -8466,7 +8496,7 @@ function PollCard({ poll }) {
 }
 function PollsPanel({ onClose }) {
   const { collab, isHost } = useCollab();
-  const [composing, setComposing] = (0, import_react6.useState)(false);
+  const [composing, setComposing] = (0, import_react8.useState)(false);
   const polls = collab?.polls ?? [];
   const maxOptions = collab?.settings?.pollMaxOptions ?? 10;
   const ordered = [...polls].reverse();
@@ -8480,8 +8510,8 @@ function PollsPanel({ onClose }) {
 }
 function QuestionCard({ question }) {
   const { act, isHost } = useCollab();
-  const [answering, setAnswering] = (0, import_react6.useState)(false);
-  const [reply, setReply] = (0, import_react6.useState)("");
+  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: [
@@ -8559,9 +8589,9 @@ function QuestionCard({ question }) {
 }
 function QaPanel({ onClose }) {
   const { collab, act } = useCollab();
-  const [draft, setDraft] = (0, import_react6.useState)("");
-  const [anonymous, setAnonymous] = (0, import_react6.useState)(false);
-  const [order, setOrder] = (0, import_react6.useState)("popular");
+  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 ?? []];
@@ -8650,12 +8680,12 @@ function StrokeView({ stroke, onPick }) {
 }
 function WhiteboardPanel({ onClose }) {
   const { collab, act, isHost, localIdentity } = useCollab();
-  const [tool, setTool] = (0, import_react6.useState)("pen");
-  const [color, setColor] = (0, import_react6.useState)(INK[0]);
-  const [drawing, setDrawing] = (0, import_react6.useState)(null);
-  const [pending, setPending] = (0, import_react6.useState)([]);
+  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_react6.useRef)(null);
+  const svgRef = (0, import_react8.useRef)(null);
   const strokes = collab?.strokes ?? [];
   const mine = strokes.filter((s) => s.by === localIdentity);
   const point = (event) => {
@@ -8796,8 +8826,8 @@ function clock(ms2) {
 }
 var BREAKOUT_EXPIRE_RETRY_MS = 5e3;
 function useNow(active) {
-  const [now, setNow] = (0, import_react6.useState)(() => Date.now());
-  (0, import_react6.useEffect)(() => {
+  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);
@@ -8811,11 +8841,11 @@ function BreakoutSetup() {
   const people = (snapshot?.participants ?? []).filter(
     (p) => !p.isAgent && p.role !== "host" && p.role !== "cohost"
   );
-  const [count2, setCount] = (0, import_react6.useState)(Math.min(Math.max(2, Math.ceil(people.length / 4)), settings?.breakoutMaxRooms ?? 20));
-  const [mode, setMode] = (0, import_react6.useState)("auto");
-  const [minutes, setMinutes] = (0, import_react6.useState)(settings?.breakoutDefaultMinutes ?? 15);
-  const [manual, setManual] = (0, import_react6.useState)({});
-  const [busy, setBusy] = (0, import_react6.useState)(false);
+  const [count2, 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, count2), max);
@@ -8931,7 +8961,7 @@ function BreakoutRun({ plan }) {
   const snapshot = useMeetSnapshot();
   const now = useNow(plan.endsAt !== null);
   const remaining = breakoutRemainingMs(plan, now);
-  const [broadcast, setBroadcast] = (0, import_react6.useState)("");
+  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);
@@ -9041,19 +9071,19 @@ function BreakoutBanner() {
   const now = useNow(open?.endsAt != null);
   const remaining = breakoutRemainingMs(open, now);
   const assigned = assignedRoom(open, localIdentity);
-  const [dismissedBroadcast, setDismissedBroadcast] = (0, import_react6.useState)(null);
-  const [failure, setFailure] = (0, import_react6.useState)(null);
-  const expireAsked = (0, import_react6.useRef)(null);
+  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_react6.useEffect)(() => {
-    const request = host?.store.snapshot().collab.moveRequest ?? null;
-    if (request === null || host === null) return;
-    host.store.patch({ collab: { ...host.store.snapshot().collab, moveRequest: 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_react6.useEffect)(() => {
+  (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;
@@ -9098,26 +9128,6 @@ function BreakoutBanner() {
     ] }) : null
   ] });
 }
-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 = lines.filter((line) => line.final && translations[line.id] === void 0).map(({ id, text: text3 }) => ({ id, text: text3 }));
-  const key = `${language ?? ""}|${missing.map((l) => l.id).join(",")}`;
-  const pending = (0, import_react6.useRef)(missing);
-  pending.current = missing;
-  (0, import_react6.useEffect)(() => {
-    if (host === null || language === null) return;
-    const batch = pending.current.filter((line) => !asked.current.has(`${language}:${line.id}`)).slice(-20);
-    if (batch.length === 0) return;
-    for (const line of batch) asked.current.add(`${language}:${line.id}`);
-    void host.inRoom.translateCaptions(language, batch).catch(() => void 0);
-  }, [host, language, key]);
-  return { language, translations, error: collab?.captionTranslationError ?? null };
-}
 function CaptionLanguageSettings() {
   const host = useMeetHost();
   const snapshot = useMeetSnapshot();
@@ -9138,14 +9148,7 @@ function CaptionLanguageSettings() {
           value: current,
           onChange: (event) => {
             const next = event.target.value === "" ? null : event.target.value;
-            host.store.patch({
-              collab: {
-                ...host.store.snapshot().collab,
-                captionLanguage: next,
-                captionTranslations: {},
-                captionTranslationError: null
-              }
-            });
+            setCaptionLanguage(host.store, next);
           },
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "", children: "Off \u2014 as spoken" }),
@@ -9161,20 +9164,8 @@ function CaptionLanguageSettings() {
     collab?.captionTranslationError != null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "mx-meet__panel-note mx-meet__collab-error", children: collab.captionTranslationError }) : null
   ] });
 }
-function useCollabPanelRequest(onRequest) {
-  const host = useMeetHost();
-  const at = useMeetSnapshot()?.collab.panelRequest?.at ?? null;
-  const callback = (0, import_react6.useRef)(onRequest);
-  callback.current = onRequest;
-  (0, import_react6.useEffect)(() => {
-    const request = host?.store.snapshot().collab.panelRequest ?? null;
-    if (request === null || host === null) return;
-    host.store.patch({ collab: { ...host.store.snapshot().collab, panelRequest: null } });
-    callback.current(request.panel);
-  }, [at, host]);
-}
 
-// src/react/components.tsx
+// 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: [
@@ -9190,7 +9181,7 @@ function Avatar({
   url,
   size = 40
 }) {
-  const tint = (0, import_format4.avatarPaletteIndex)(name);
+  const tint = (0, import_format3.avatarPaletteIndex)(name);
   if (url != null && url.length > 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "img",
@@ -9215,7 +9206,7 @@ function Avatar({
         background: `var(--mx-meet-avatar-${tint})`
       },
       "aria-hidden": "true",
-      children: (0, import_format4.getInitials)(name)
+      children: (0, import_format3.getInitials)(name)
     }
   );
 }
@@ -9258,10 +9249,6 @@ function RecordingIndicator() {
     }
   );
 }
-function ConnectionDot({ quality }) {
-  if (quality === "excellent" || quality === "good" || quality === "unknown") return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `mx-meet__quality mx-meet__quality--${quality}`, title: `Connection ${quality}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(WifiLowIcon, { width: 14, height: 14 }) });
-}
 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" });
@@ -9275,7 +9262,7 @@ function ParticipantTile({
   const host = useMeetHost();
   const snapshot = useMeetSnapshot();
   const queue = useHandQueue();
-  const [menu, setMenu] = (0, import_react7.useState)(false);
+  const [menu, setMenu] = (0, import_react9.useState)(false);
   const videoRef = useTrack(
     participant.identity,
     participant.screenSharing ? "screen" : "camera"
@@ -9386,21 +9373,20 @@ function Stage({ pageSize }) {
     ] }) : null
   ] });
 }
-var MEET_REACTIONS = ["\u{1F496}", "\u{1F44D}", "\u{1F389}", "\u{1F44F}", "\u{1F602}", "\u{1F62E}", "\u{1F622}", "\u{1F914}", "\u{1F44E}"];
 function ControlBar({ onLeave }) {
   const room = useRoom();
   const recording = useRecording();
-  const [panel, setPanel] = (0, import_react7.useState)("none");
-  const [chatTo, setChatTo] = (0, import_react7.useState)(null);
-  const [popover, setPopover] = (0, import_react7.useState)("none");
-  const [shortcuts, setShortcuts] = (0, import_react7.useState)(false);
+  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_react7.useState)(false);
+  const [whiteboard, setWhiteboard] = (0, import_react9.useState)(false);
   const toggle = (next) => setPanel(panel === next ? "none" : next);
   const openActivity = (activity) => {
     if (activity === "whiteboard") setWhiteboard(true);
@@ -9411,7 +9397,7 @@ function ControlBar({ onLeave }) {
   });
   const privateChatAt = snapshot?.privateChatRequest?.at ?? null;
   const meetStore = useMeetHost()?.store ?? null;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const request = meetStore?.snapshot().privateChatRequest ?? null;
     if (request === null) return;
     setChatTo(request.to);
@@ -9649,13 +9635,13 @@ function useUnreadChat(open) {
   const snapshot = useMeetSnapshot();
   const chat = snapshot?.chat ?? [];
   const local = snapshot?.localIdentity ?? null;
-  const [seen, setSeen] = (0, import_react7.useState)(0);
-  (0, import_react7.useEffect)(() => {
+  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_react7.useState)(null);
-  (0, import_react7.useEffect)(() => {
+  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;
@@ -9668,14 +9654,14 @@ function Popover({
   children,
   placement = "up"
 }) {
-  const ref = (0, import_react7.useRef)(null);
-  const [style, setStyle] = (0, import_react7.useState)({
+  const ref = (0, import_react9.useRef)(null);
+  const [style, setStyle] = (0, import_react9.useState)({
     position: "fixed",
     top: 0,
     left: 0,
     visibility: "hidden"
   });
-  (0, import_react7.useLayoutEffect)(() => {
+  (0, import_react9.useLayoutEffect)(() => {
     const element = ref.current;
     const anchor = element?.parentElement ?? null;
     if (element === null || anchor === null) return;
@@ -9720,7 +9706,7 @@ function Popover({
       window.removeEventListener("scroll", place, true);
     };
   }, [placement]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const onKey = (event) => {
       if (event.key === "Escape") onClose();
     };
@@ -9754,7 +9740,7 @@ function MenuItem({
   );
 }
 function Toast({ text: text3, failed, onDone }) {
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const timer = setTimeout(onDone, failed ? 7e3 : 4e3);
     return () => clearTimeout(timer);
   }, [text3, failed, onDone]);
@@ -9793,7 +9779,7 @@ function MeetingOverlays() {
   ] });
 }
 function ShortcutsSheet({ onClose }) {
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const onKey = (event) => {
       if (event.key === "Escape") onClose();
     };
@@ -9831,8 +9817,8 @@ function PanelShell({
   onClose,
   children
 }) {
-  const ref = (0, import_react7.useRef)(null);
-  (0, import_react7.useLayoutEffect)(() => {
+  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;
@@ -9859,17 +9845,17 @@ function ChatPanel({
 }) {
   const snapshot = useMeetSnapshot();
   const room = useRoom();
-  const [draft, setDraft] = (0, import_react7.useState)("");
-  const [recipient, setRecipient] = (0, import_react7.useState)(to);
-  const listRef = (0, import_react7.useRef)(null);
+  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_react7.useEffect)(() => setRecipient(to), [to]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => setRecipient(to), [to]);
+  (0, import_react9.useEffect)(() => {
     const list = listRef.current;
     if (list !== null) list.scrollTop = list.scrollHeight;
   }, [messages.length]);
@@ -9975,8 +9961,8 @@ function PeoplePanel({
   const snapshot = useMeetSnapshot();
   const controls = useHostControls();
   const queue = useHandQueue();
-  const [query, setQuery] = (0, import_react7.useState)("");
-  const [menuFor, setMenuFor] = (0, import_react7.useState)(null);
+  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 ?? [];
@@ -10101,14 +10087,14 @@ function PersonMenu({
   const host = useMeetHost();
   const snapshot = useMeetSnapshot();
   const controls = useHostControls();
-  const [mode, setMode] = (0, import_react7.useState)("menu");
-  const [text3, setText] = (0, import_react7.useState)("");
+  const [mode, setMode] = (0, import_react9.useState)("menu");
+  const [text3, 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_react7.useState)(false);
+  const [refused, setRefused] = (0, import_react9.useState)(false);
   const act = (request) => {
     setRefused(false);
     void controls.run(request).then((result) => {
@@ -10324,8 +10310,8 @@ function DeviceSettings({
   const speaker = devices?.selected.audiooutput ?? host.devices.resolve("audiooutput");
   const stream = useMicrophoneStream(microphone);
   const level = useAudioLevel(stream);
-  const [testing, setTesting] = (0, import_react7.useState)(false);
-  (0, import_react7.useEffect)(() => {
+  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: [
@@ -10354,8 +10340,8 @@ function DeviceSettings({
 }
 function EffectsSettings({ preview }) {
   const effects = useMediaEffects();
-  const [error, setError] = (0, import_react7.useState)(null);
-  const fileRef = (0, import_react7.useRef)(null);
+  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);
@@ -10477,8 +10463,8 @@ async function playTestSound(sinkId) {
   await context.close();
 }
 function useMicrophoneStream(deviceId2) {
-  const [stream, setStream] = (0, import_react7.useState)(null);
-  (0, import_react7.useEffect)(() => {
+  const [stream, setStream] = (0, import_react9.useState)(null);
+  (0, import_react9.useEffect)(() => {
     if (deviceId2 === "off") return void 0;
     let live = true;
     let opened = null;
@@ -10588,7 +10574,7 @@ function NoteList({
 }
 function AiPanel({ onClose }) {
   const ai = useMeetAi();
-  const [question, setQuestion] = (0, import_react7.useState)("");
+  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: [
@@ -10753,16 +10739,16 @@ function PreJoinBody({
   const recording = useRecording();
   const effects = useMediaEffects();
   const { notice } = useModerationNotice();
-  const [mode, setMode] = (0, import_react7.useState)("video");
-  const [microphone, setMicrophone] = (0, import_react7.useState)(true);
-  const [joining, setJoining] = (0, import_react7.useState)(false);
+  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_react7.useState)(false);
-  (0, import_react7.useEffect)(() => {
+  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: [
@@ -10878,12 +10864,12 @@ function PreJoinBody({
   ] });
 }
 function useCameraPreview(deviceId2, effects) {
-  const [preview, setPreview] = (0, import_react7.useState)(null);
-  const [error, setError] = (0, import_react7.useState)(null);
-  const current = (0, import_react7.useRef)(null);
-  const initialEffect = (0, import_react7.useRef)(toVideoEffect(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_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (deviceId2 === void 0) return void 0;
     let live = true;
     setError(null);
@@ -10949,43 +10935,17 @@ function DevicePicker({
     )
   ] });
 }
-function MeetingRoom(props) {
-  const host = useMeetHost();
-  if (host === null) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MeetRoot, { meeting: props.meeting, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InertNotice, { what: "This meeting" }) }) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MeetRoot, { meeting: props.meeting, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MeetingRoomBody, { ...props, host }) });
-}
-function MeetingRoomBody({
+function MeetSkinRoom({
   roomName,
   meetingId,
   slug,
-  meeting: given,
   onLeave,
-  headerControls,
-  host
+  headerControls
 }) {
-  const snapshot = useMeetSnapshot();
-  const isHost = useIsHost();
+  const { host, snapshot, isHost } = useMeetCore();
   const elapsed = useElapsed(snapshot?.meeting?.startedAt ?? null);
   const phase = snapshot?.phase ?? "idle";
-  (0, import_react7.useEffect)(() => {
-    host.meetings.watch(roomName);
-  }, [host, roomName]);
-  (0, import_react7.useEffect)(() => {
-    if (given === void 0) return;
-    if (host.store.snapshot().meeting !== null) return;
-    host.store.patch({ meeting: given, locked: given.locked });
-  }, [host, given]);
-  const watchedId = meetingId ?? snapshot?.meeting?.id ?? null;
-  (0, import_react7.useEffect)(() => {
-    if (watchedId === null) return;
-    host.meetings.watchMeeting(asMeetingId(watchedId));
-  }, [host, watchedId]);
-  const record = snapshot?.meeting ?? given ?? null;
-  if (hasEnded(record) && phase !== "connected" && phase !== "reconnecting") {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MeetingRecordView, { meeting: record });
-  }
+  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,
@@ -11006,7 +10966,7 @@ function MeetingRoomBody({
       /* @__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_format4.formatDurationMs)(elapsed)}` : ""
+        elapsed > 0 ? ` \xB7 ${(0, import_format3.formatDurationMs)(elapsed)}` : ""
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RecordingIndicator, {}),
       snapshot?.locked === true ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__badge", children: [
@@ -11023,8 +10983,8 @@ function MeetingRoomBody({
   ] });
 }
 function WaitingRoom({ roomName, host }) {
-  const knocked = (0, import_react7.useRef)(false);
-  (0, import_react7.useEffect)(() => {
+  const knocked = (0, import_react9.useRef)(false);
+  (0, import_react9.useEffect)(() => {
     if (knocked.current) return;
     knocked.current = true;
     host.meetings.knock(roomName);
@@ -11043,7 +11003,7 @@ function HostMenu() {
   const host = useRequiredMeetHost();
   const snapshot = useMeetSnapshot();
   const end = useEndMeeting();
-  const [confirmingEnd, setConfirmingEnd] = (0, import_react7.useState)(false);
+  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)(
@@ -11092,150 +11052,17 @@ function HostMenu() {
     end.notice !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__notice", role: "status", children: end.notice }) : null
   ] });
 }
-function CallButton({
-  person,
-  mode = "video",
-  children
-}) {
-  const calls = useCalls();
-  if (!calls.canCall) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    "button",
-    {
-      type: "button",
-      className: "mx-meet__call-button",
-      onClick: () => {
-        void calls.call([person.userId], mode);
-      },
-      "aria-label": `Call ${person.displayName}`,
-      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PhoneIcon, { width: 18, height: 18 })
-    }
-  );
-}
-function IncomingCallHost() {
-  const calls = useCalls();
-  if (calls.incoming.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet__ringing-stack", children: calls.incoming.map((invite) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IncomingCallCard, { invite }, invite.id)) });
-}
-function IncomingCallCard({ invite }) {
-  const calls = useCalls();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "mx-meet__ringing", role: "alertdialog", "aria-label": "Incoming call", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { name: invite.callerName, url: invite.callerAvatarUrl, size: 56 }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__ringing-text", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: invite.callerName }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: invite.mode === "video" ? "Incoming video call" : "Incoming call" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__ringing-actions", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ControlButton, { label: "Decline", danger: true, onClick: () => void calls.decline(invite), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PhoneOffIcon, {}) }),
-      invite.mode === "video" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        ControlButton,
-        {
-          label: "Accept without video",
-          onClick: () => void calls.accept({ ...invite, mode: "audio" }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CameraOffIcon, {})
-        }
-      ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ControlButton, { label: "Accept", onClick: () => void calls.accept(invite), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PhoneIcon, {}) })
-    ] })
-  ] });
-}
-function ScheduleMeeting(props) {
-  const host = useMeetHost();
-  if (host === null) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InertNotice, { what: "Scheduling a meeting" });
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ScheduleMeetingBody, { ...props, host });
-}
-function ScheduleMeetingBody({
-  appBaseUrl,
-  onScheduled,
-  host
-}) {
-  const [title, setTitle] = (0, import_react7.useState)("");
-  const [when2, setWhen] = (0, import_react7.useState)("");
-  const [kind, setKind] = (0, import_react7.useState)("scheduled");
-  const [busy, setBusy] = (0, import_react7.useState)(false);
-  const [link, setLink] = (0, import_react7.useState)(null);
-  const [error, setError] = (0, import_react7.useState)(null);
-  const disabled = (0, import_react7.useMemo)(() => title.trim().length === 0 || busy, [title, busy]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-    "form",
-    {
-      className: "mx-meet__schedule",
-      onSubmit: (event) => {
-        event.preventDefault();
-        if (host.identity.userId === null) return;
-        setBusy(true);
-        setError(null);
-        void host.repository.getOrCreateMeeting({
-          organizationId: host.identity.organizationId,
-          hostUserId: host.identity.userId,
-          title: title.trim(),
-          kind,
-          scheduledFor: when2.length > 0 ? new Date(when2).toISOString() : null
-        }).then((meeting) => {
-          setLink(meetingLink(appBaseUrl, meeting.slug));
-          onScheduled?.(meeting.slug);
-        }).catch((thrown) => {
-          setError(
-            thrown.remedy ?? thrown.message ?? "The meeting could not be created."
-          );
-        }).finally(() => setBusy(false));
-      },
-      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: "Title" }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            "input",
-            {
-              className: "mx-meet__input",
-              value: title,
-              onChange: (event) => setTitle(event.target.value),
-              placeholder: "Weekly sync"
-            }
-          )
-        ] }),
-        /* @__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: "When" }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            "input",
-            {
-              className: "mx-meet__input",
-              type: "datetime-local",
-              value: when2,
-              onChange: (event) => setWhen(event.target.value)
-            }
-          )
-        ] }),
-        /* @__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: "Repeats" }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-            "select",
-            {
-              className: "mx-meet__select",
-              value: kind,
-              onChange: (event) => setKind(event.target.value),
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "scheduled", children: "Once" }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "recurring", children: "Recurring \u2014 one link, every time" })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "submit", className: "mx-meet__primary", disabled, children: busy ? "Creating\u2026" : "Create meeting" }),
-        link !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "mx-meet__link-out", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Anyone with this link can join \u2014 no account needed." }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("code", { children: link })
-        ] }) : null,
-        error !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__error", children: error }) : 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
 }) {
@@ -11276,15 +11103,20 @@ function GuestRecordAccessControl({
     ] }) : null
   ] });
 }
+
+// src/react/record.tsx
+var import_react10 = require("react");
+var import_design_system2 = require("@ai-matrx/design-system");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function MeetingRecordView({
   meeting,
   onRejoin
 }) {
   const host = useMeetHost();
   if (host === null) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet mx-meet--record", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InertNotice, { what: "This meeting record" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mx-meet mx-meet--record", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(InertNotice, { what: "This meeting record" }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MeetingRecordBody, { meeting, ...onRejoin !== void 0 ? { onRejoin } : {} });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MeetingRecordBody, { meeting, ...onRejoin !== void 0 ? { onRejoin } : {} });
 }
 function MeetingRecordBody({
   meeting,
@@ -11292,19 +11124,19 @@ function MeetingRecordBody({
 }) {
   const host = useRequiredMeetHost();
   const record = useMeetingRecord(meeting);
-  const [question, setQuestion] = (0, import_react7.useState)("");
-  const [tab, setTab] = (0, import_react7.useState)("summary");
+  const [question, setQuestion] = (0, import_react10.useState)("");
+  const [tab, setTab] = (0, import_react10.useState)("summary");
   if (record.failure !== null) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet mx-meet--record", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system.ErrorBox, { as: "div", className: "mx-meet__empty", error: record.failure, operation: "Open this meeting record", origin: "meet/components", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__empty-title", children: "This meeting record could not be opened" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__empty-body", children: record.failure.message }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__empty-body", children: record.failure.remedy })
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mx-meet mx-meet--record", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system2.ErrorBox, { as: "div", className: "mx-meet__empty", error: record.failure, operation: "Open this meeting record", origin: "meet/components", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__empty-title", children: "This meeting record could not be opened" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__empty-body", children: record.failure.message }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__empty-body", children: record.failure.remedy })
     ] }) });
   }
   if (record.loading || record.record === null) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet mx-meet--record", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__empty", role: "status", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__empty-title", children: "Opening the meeting record\u2026" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__empty-body", children: "Reading the summary, the notes and the transcript this meeting left behind." })
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mx-meet mx-meet--record", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__empty", role: "status", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__empty-title", children: "Opening the meeting record\u2026" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__empty-body", children: "Reading the summary, the notes and the transcript this meeting left behind." })
     ] }) });
   }
   const bundle = record.record;
@@ -11323,44 +11155,44 @@ function MeetingRecordBody({
   );
   const entirelyRestricted = everyRecordPartRefused && bundle.attendees.length === 0 && bundle.liveNotes.length === 0 && bundle.transcript.length === 0 && bundle.recording === null && bundle.summary === null && bundle.decisions.length === 0 && bundle.actionItems.length === 0;
   if (entirelyRestricted) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet mx-meet--record", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("header", { className: "mx-meet__record-head", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__record-head-inner", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__record-eyebrow", children: "Meeting record" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h1", { className: "mx-meet__record-title", children: meeting.title }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__record-when", children: meetingWhen(meeting) }),
-        onRejoin !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mx-meet__link", onClick: onRejoin, children: "Open this link again" }) : null
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet mx-meet--record", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("header", { className: "mx-meet__record-head", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__record-head-inner", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__record-eyebrow", children: "Meeting record" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h1", { className: "mx-meet__record-title", children: meeting.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__record-when", children: meetingWhen(meeting) }),
+        onRejoin !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "mx-meet__link", onClick: onRejoin, children: "Open this link again" }) : null
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet__record-body", children: restrictionNotices.map((notice2) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__record-access", role: "status", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__record-access-title", children: "About this record" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__record-access-message", children: notice2.message }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__record-access-remedy", children: notice2.remedy })
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mx-meet__record-body", children: restrictionNotices.map((notice2) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__record-access", role: "status", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__record-access-title", children: "About this record" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__record-access-message", children: notice2.message }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__record-access-remedy", children: notice2.remedy })
       ] }, notice2.parts.join("-"))) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet mx-meet--record", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("header", { className: "mx-meet__record-head", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__record-head-inner", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__record-eyebrow", children: "Meeting record" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h1", { className: "mx-meet__record-title", children: meeting.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__record-when", children: meetingWhen(meeting) }),
-      onRejoin !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mx-meet__link", onClick: onRejoin, children: "Open this link again" }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet mx-meet--record", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("header", { className: "mx-meet__record-head", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__record-head-inner", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__record-eyebrow", children: "Meeting record" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h1", { className: "mx-meet__record-title", children: meeting.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__record-when", children: meetingWhen(meeting) }),
+      onRejoin !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "mx-meet__link", onClick: onRejoin, children: "Open this link again" }) : null
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__record-body", children: [
-      restrictionNotices.map((notice2) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__record-access", role: "status", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__record-access-title", children: "About this record" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__record-access-message", children: notice2.message }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__record-access-remedy", children: notice2.remedy })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__record-body", children: [
+      restrictionNotices.map((notice2) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__record-access", role: "status", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__record-access-title", children: "About this record" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__record-access-message", children: notice2.message }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__record-access-remedy", children: notice2.remedy })
       ] }, notice2.parts.join("-"))),
       attended.length === 0 ? (
         /* NOT SILENCE. A refused attendance read used to remove the whole
            section, so the reader could not tell "nobody" from "not shown". */
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "mx-meet__record-section", "aria-label": "Who attended", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: "mx-meet__record-section-title", children: "Who attended" }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__panel-note", children: absenceSentence(bundle, "attendance", "Nobody is recorded as having attended.") })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { className: "mx-meet__record-section", "aria-label": "Who attended", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { className: "mx-meet__record-section-title", children: "Who attended" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__panel-note", children: absenceSentence(bundle, "attendance", "Nobody is recorded as having attended.") })
         ] })
-      ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "mx-meet__record-section", "aria-label": "Who attended", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: "mx-meet__record-section-title", children: "Who attended" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "mx-meet__record-attendees", children: attended.map((person) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { className: "mx-meet__record-attendee", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { className: "mx-meet__record-section", "aria-label": "Who attended", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { className: "mx-meet__record-section-title", children: "Who attended" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { className: "mx-meet__record-attendees", children: attended.map((person) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("li", { className: "mx-meet__record-attendee", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             Avatar,
             {
               name: displayNameFor(bundle.names, person.identity, person.displayName),
@@ -11368,26 +11200,26 @@ function MeetingRecordBody({
               size: 28
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__person-name", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "mx-meet__person-name", children: [
             displayNameFor(bundle.names, person.identity, person.displayName),
-            person.role === "host" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__badge", children: "Host" }) : null,
-            person.role === "guest" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__badge", children: "Guest" }) : null,
-            person.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__badge", children: "Meeting assistant" }) : null
+            person.role === "host" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__badge", children: "Host" }) : null,
+            person.role === "guest" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__badge", children: "Guest" }) : null,
+            person.isAgent ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__badge", children: "Meeting assistant" }) : null
           ] })
         ] }, person.id)) })
       ] }),
-      bundle.recording !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "mx-meet__record-section mx-meet__recording-card", "aria-label": "Recording", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: "mx-meet__record-section-title", children: "Recording" }),
-        fileId !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RecordingPlayer, { fileId }),
-          notice !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__panel-note", children: notice }) : null
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__panel-note", children: notice ?? "This recording has no file." })
-      ] }) : wasRefused(bundle, "recording") ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "mx-meet__record-section", "aria-label": "Recording", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: "mx-meet__record-section-title", children: "Recording" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__panel-note", children: REFUSED_ABSENCE })
+      bundle.recording !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { className: "mx-meet__record-section mx-meet__recording-card", "aria-label": "Recording", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { className: "mx-meet__record-section-title", children: "Recording" }),
+        fileId !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RecordingPlayer, { fileId }),
+          notice !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__panel-note", children: notice }) : null
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__panel-note", children: notice ?? "This recording has no file." })
+      ] }) : wasRefused(bundle, "recording") ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { className: "mx-meet__record-section", "aria-label": "Recording", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { className: "mx-meet__record-section-title", children: "Recording" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__panel-note", children: REFUSED_ABSENCE })
       ] }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("nav", { className: "mx-meet__record-tabs", "aria-label": "Meeting record sections", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("nav", { className: "mx-meet__record-tabs", "aria-label": "Meeting record sections", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             type: "button",
@@ -11397,7 +11229,7 @@ function MeetingRecordBody({
             children: "Summary & decisions"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             type: "button",
@@ -11407,7 +11239,7 @@ function MeetingRecordBody({
             children: "Notes as it happened"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             type: "button",
@@ -11418,15 +11250,15 @@ function MeetingRecordBody({
           }
         )
       ] }),
-      tab === "summary" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "mx-meet__record-section", "aria-label": "Summary", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: "mx-meet__record-section-title", children: "Summary" }),
-          wrapUp.state === "written" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__record-summary", children: bundle.summary?.text }) : wrapUp.state === "in-progress" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__panel-note", role: "status", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { children: wrapUp.message }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mx-meet__link", onClick: record.reload, children: "Check again" })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__panel-note", role: wrapUp.state === "failed" ? "alert" : void 0, children: wrapUp.message })
+      tab === "summary" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { className: "mx-meet__record-section", "aria-label": "Summary", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { className: "mx-meet__record-section-title", children: "Summary" }),
+          wrapUp.state === "written" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__record-summary", children: bundle.summary?.text }) : wrapUp.state === "in-progress" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__panel-note", role: "status", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: wrapUp.message }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "mx-meet__link", onClick: record.reload, children: "Check again" })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__panel-note", role: wrapUp.state === "failed" ? "alert" : void 0, children: wrapUp.message })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           NoteList,
           {
             title: "Decisions",
@@ -11438,7 +11270,7 @@ function MeetingRecordBody({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           NoteList,
           {
             title: "Action items",
@@ -11451,42 +11283,42 @@ function MeetingRecordBody({
           }
         )
       ] }) : null,
-      tab === "notes" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "mx-meet__record-section", "aria-label": "Notes as it happened", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: "mx-meet__record-section-title", children: "Notes as it happened" }),
-        bundle.liveNotes.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__panel-note", children: absenceSentence(
+      tab === "notes" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { className: "mx-meet__record-section", "aria-label": "Notes as it happened", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { className: "mx-meet__record-section-title", children: "Notes as it happened" }),
+        bundle.liveNotes.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__panel-note", children: absenceSentence(
           bundle,
           "notes",
           "No live notes are available for this meeting."
-        ) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "mx-meet__notes", children: bundle.liveNotes.map((note) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { className: "mx-meet__note", children: [
-          note.window !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet__badge", children: [
+        ) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { className: "mx-meet__notes", children: bundle.liveNotes.map((note) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("li", { className: "mx-meet__note", children: [
+          note.window !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "mx-meet__badge", children: [
             "Window ",
             note.window
           ] }) : null,
           note.text
         ] }, note.id)) })
       ] }) : null,
-      tab === "transcript" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "mx-meet__record-section", "aria-label": "Transcript", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("h2", { className: "mx-meet__record-section-title", children: [
+      tab === "transcript" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { className: "mx-meet__record-section", "aria-label": "Transcript", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("h2", { className: "mx-meet__record-section-title", children: [
           "Transcript",
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__record-count", children: bundle.transcript.length === 1 ? "1 line" : `${bundle.transcript.length} lines` })
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mx-meet__record-count", children: bundle.transcript.length === 1 ? "1 line" : `${bundle.transcript.length} lines` })
         ] }),
-        blocks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__panel-note", children: absenceSentence(
+        blocks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__panel-note", children: absenceSentence(
           bundle,
           "transcript",
           "No transcript is available for this meeting."
-        ) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ol", { className: "mx-meet__record-transcript", children: blocks.map((block) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { className: "mx-meet__record-block", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "mx-meet__record-speaker", children: [
+        ) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ol", { className: "mx-meet__record-transcript", children: blocks.map((block) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("li", { className: "mx-meet__record-block", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "mx-meet__record-speaker", children: [
             block.speaker,
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("time", { className: "mx-meet__record-time", dateTime: block.startedAt, children: clockOf(block.startedAt) })
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("time", { className: "mx-meet__record-time", dateTime: block.startedAt, children: clockOf(block.startedAt) })
           ] }),
-          block.lines.map((line) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__record-line", children: line.text }, line.id))
+          block.lines.map((line) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__record-line", children: line.text }, line.id))
         ] }, block.id)) })
       ] }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GuestRecordAccessControl, { meeting }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "mx-meet__record-section", "aria-label": "Ask about this meeting", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: "mx-meet__record-section-title", children: "Ask about this meeting" }),
-        guestFinishedMeeting ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__panel-note", children: "Sign in to ask the assistant about a meeting after it ends." }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(GuestRecordAccessControl, { meeting }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { className: "mx-meet__record-section", "aria-label": "Ask about this meeting", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { className: "mx-meet__record-section-title", children: "Ask about this meeting" }),
+        guestFinishedMeeting ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__panel-note", children: "Sign in to ask the assistant about a meeting after it ends." }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
             "form",
             {
               className: "mx-meet__composer",
@@ -11497,7 +11329,7 @@ function MeetingRecordBody({
                 void record.ask(trimmed);
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   "input",
                   {
                     className: "mx-meet__input",
@@ -11507,7 +11339,7 @@ function MeetingRecordBody({
                     "aria-label": "Ask about this meeting"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   "button",
                   {
                     type: "submit",
@@ -11519,8 +11351,8 @@ function MeetingRecordBody({
               ]
             }
           ),
-          record.answer !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__answer", children: record.answer }) : null,
-          record.coverage !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "mx-meet__coverage", children: [
+          record.answer !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__answer", children: record.answer }) : null,
+          record.coverage !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "mx-meet__coverage", children: [
             "Answered from ",
             record.coverage.segmentsUsed,
             " of ",
@@ -11531,9 +11363,9 @@ function MeetingRecordBody({
             record.coverage.truncated ? " (the oldest were left out)" : "",
             "."
           ] }) : null,
-          record.askError !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system.ErrorBox, { as: "div", className: "mx-meet__refusal", error: record.askError, operation: "Ask about this meeting", origin: "meet/components", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__refusal-reason", children: record.askError.message }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__refusal-remedy", children: record.askError.remedy })
+          record.askError !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system2.ErrorBox, { as: "div", className: "mx-meet__refusal", error: record.askError, operation: "Ask about this meeting", origin: "meet/components", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__refusal-reason", children: record.askError.message }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__refusal-remedy", children: record.askError.remedy })
           ] }) : null
         ] })
       ] })
@@ -11544,21 +11376,21 @@ var STREAM_REFUSED = "Streaming playback did not start, so this recording was do
 var PLAYBACK_RETRY_REMEDY = "Reload the page and try again. If it still will not play, ask a meeting host to check the recording.";
 function RecordingPlayer(props) {
   const host = useMeetHost();
-  if (host === null) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InertNotice, { what: "This recording" });
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RecordingPlayerBody, { ...props, host });
+  if (host === null) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(InertNotice, { what: "This recording" });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RecordingPlayerBody, { ...props, host });
 }
 function RecordingPlayerBody({ fileId, host }) {
-  const [media, setMedia] = (0, import_react7.useState)(null);
-  const [loading, setLoading] = (0, import_react7.useState)(false);
-  const [error, setError] = (0, import_react7.useState)(null);
-  (0, import_react7.useEffect)(() => {
+  const [media, setMedia] = (0, import_react10.useState)(null);
+  const [loading, setLoading] = (0, import_react10.useState)(false);
+  const [error, setError] = (0, import_react10.useState)(null);
+  (0, import_react10.useEffect)(() => {
     if (media === null || media.kind !== "bytes") return void 0;
     const url = media.url;
     return () => URL.revokeObjectURL(url);
   }, [media]);
   if (media !== null) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__record-section", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__record-section", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "video",
         {
           className: "mx-meet__record-player",
@@ -11600,15 +11432,15 @@ function RecordingPlayerBody({ fileId, host }) {
           }
         }
       ),
-      media.fallbackReason !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__panel-note", children: media.fallbackReason }) : null
+      media.fallbackReason !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__panel-note", children: media.fallbackReason }) : null
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__record-section", children: [
-    error !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system.ErrorBox, { as: "div", className: "mx-meet__refusal", error, operation: "Complete this meeting action", origin: "meet/components", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__refusal-reason", children: error.message }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__refusal-remedy", children: error.remedy })
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mx-meet__record-section", children: [
+    error !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system2.ErrorBox, { as: "div", className: "mx-meet__refusal", error, operation: "Complete this meeting action", origin: "meet/components", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__refusal-reason", children: error.message }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mx-meet__refusal-remedy", children: error.remedy })
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "button",
       {
         type: "button",
@@ -11636,45 +11468,84 @@ function RecordingPlayerBody({ fileId, host }) {
     )
   ] });
 }
-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 MeetingList({ baseUrl }) {
+
+// src/react/skin-root.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function MeetingSkinRoot(props) {
   const host = useMeetHost();
-  const list = useMeetings();
-  if (host === null) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InertNotice, { what: "Your meetings" });
-  if (list.failure !== null) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_design_system.ErrorBox, { as: "div", className: "mx-meet__empty", error: list.failure, operation: "List your meetings", origin: "meet/components", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__empty-title", children: "Your meetings could not be listed" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__empty-body", children: list.failure.message }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__empty-body", children: list.failure.remedy })
-    ] });
-  }
-  if (list.loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mx-meet__empty", role: "status", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__empty-title", children: "Loading your meetings\u2026" }) });
+  if (host === null) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MeetRoot, { meeting: props.meeting, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mx-meet", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(InertNotice, { what: "This meeting" }) }) });
   }
-  if (list.meetings.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet__empty", role: "status", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__empty-title", children: "No meetings yet" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mx-meet__empty-body", children: "Create one above. Its link works before, during and after the meeting \u2014 afterwards it opens the record." })
-    ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MeetRoot, { meeting: props.meeting, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MeetingSkinRootBody, { ...props, host }) });
+}
+function MeetingSkinRootBody({
+  roomName,
+  meetingId,
+  slug,
+  meeting: given,
+  onLeave,
+  headerControls,
+  host
+}) {
+  const snapshot = useMeetSnapshot();
+  const phase = snapshot?.phase ?? "idle";
+  (0, import_react11.useEffect)(() => {
+    host.meetings.watch(roomName);
+  }, [host, roomName]);
+  (0, import_react11.useEffect)(() => {
+    if (given === void 0) return;
+    if (host.store.snapshot().meeting !== null) return;
+    host.store.patch({ meeting: given, locked: given.locked });
+  }, [host, given]);
+  const watchedId = meetingId ?? snapshot?.meeting?.id ?? null;
+  (0, import_react11.useEffect)(() => {
+    if (watchedId === null) return;
+    host.meetings.watchMeeting(asMeetingId(watchedId));
+  }, [host, watchedId]);
+  const record = snapshot?.meeting ?? given ?? null;
+  if (hasEnded(record) && phase !== "connected" && phase !== "reconnecting") {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MeetingRecordView, { meeting: record });
   }
-  const origin = baseUrl ?? (typeof window === "undefined" ? "" : window.location.origin);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "mx-meet-list", children: list.meetings.map((meeting) => {
-    const ended = meeting.endedAt !== null;
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { className: "mx-meet-list__row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mx-meet-list__main", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mx-meet-list__title", children: [
-          meeting.title,
-          ended ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet__badge", children: "Ended" }) : null
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-meet-list__when", children: meetingWhen(meeting) })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { className: "mx-meet-list__action", href: meetingLink(origin, meeting.slug), children: ended ? "Open the record" : "Join" })
-    ] }, meeting.id);
-  }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    MeetSkinRoom,
+    {
+      roomName,
+      ...meetingId !== void 0 ? { meetingId } : {},
+      ...slug !== void 0 ? { slug } : {},
+      ...onLeave !== void 0 ? { onLeave } : {},
+      ...headerControls !== void 0 ? { headerControls } : {}
+    }
+  );
+}
+
+// src/react/calls-ui.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function IncomingCallHost() {
+  const calls = useCalls();
+  if (calls.incoming.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "mx-meet__ringing-stack", children: calls.incoming.map((invite) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(IncomingCallCard, { invite }, invite.id)) });
+}
+function IncomingCallCard({ invite }) {
+  const calls = useCalls();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("section", { className: "mx-meet__ringing", role: "alertdialog", "aria-label": "Incoming call", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Avatar, { name: invite.callerName, url: invite.callerAvatarUrl, size: 56 }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "mx-meet__ringing-text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("strong", { children: invite.callerName }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: invite.mode === "video" ? "Incoming video call" : "Incoming call" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "mx-meet__ringing-actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ControlButton, { label: "Decline", danger: true, onClick: () => void calls.decline(invite), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PhoneOffIcon, {}) }),
+      invite.mode === "video" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        ControlButton,
+        {
+          label: "Accept without video",
+          onClick: () => void calls.accept({ ...invite, mode: "audio" }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CameraOffIcon, {})
+        }
+      ) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ControlButton, { label: "Accept", onClick: () => void calls.accept(invite), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PhoneIcon, {}) })
+    ] })
+  ] });
 }
 
 // src/core/invitations.ts