@ai-matrx/meet 0.10.0 → 0.10.2

package/dist/skins/meet.js

@@ -5,7 +5,7 @@
 import { useEffect as useEffect6, useLayoutEffect, useRef as useRef6, useState as useState4 } from "react";
 
 // src/react/facade.ts
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
 
 // src/react/root.tsx
 import { useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2 } from "react";
@@ -255,6 +255,20 @@ function isLinkFollower(standing) {
 function isHostRole(role) {
   return role === "host" || role === "cohost";
 }
+function isObserverRole(role) {
+  return role === "viewer";
+}
+
+// src/core/app-panel.ts
+function appPanelOf(meeting) {
+  const raw = meeting?.metadata?.["app_panel"];
+  if (typeof raw !== "object" || raw === null || Array.isArray(raw)) return null;
+  const key = raw["key"];
+  const recordId = raw["record_id"];
+  if (typeof key !== "string" || key.length === 0) return null;
+  if (typeof recordId !== "string" || recordId.length === 0) return null;
+  return { key, recordId };
+}
 
 // src/core/collab.ts
 function assignedRoom(plan, identity) {
@@ -705,7 +719,10 @@ function orderParticipants(participants, activeSpeakers) {
 }
 function computeStage(args) {
   const pageSize = Math.max(1, args.pageSize ?? DEFAULT_PAGE_SIZE);
-  const ordered = orderParticipants(args.participants, args.activeSpeakers);
+  const ordered = orderParticipants(
+    args.participants.filter((participant) => !isObserverRole(participant.role)),
+    args.activeSpeakers
+  );
   const sharer = ordered.find((participant) => participant.screenSharing) ?? null;
   const pinnedParticipant = args.pinned === null ? null : ordered.find((participant) => participant.identity === args.pinned) ?? null;
   const spotlit = args.spotlight == null ? null : ordered.find((participant) => participant.identity === args.spotlight) ?? null;
@@ -731,8 +748,96 @@ function gridColumns(count) {
   return 5;
 }
 
+// src/react/app-panel.tsx
+import { createContext as createContext2, useContext as useContext2, useMemo as useMemo3 } from "react";
+
+// src/core/collab-state.ts
+function availableActivities(collab, isHost) {
+  const settings = collab?.settings ?? null;
+  if (settings === null) return [];
+  const out = [];
+  if (settings.whiteboardEnabled) out.push("whiteboard");
+  if (settings.pollsEnabled && (isHost || (collab?.polls.length ?? 0) > 0)) out.push("polls");
+  if (settings.qaEnabled) out.push("qa");
+  if (settings.breakoutsEnabled && (isHost || collab?.breakout?.state === "open")) out.push("breakouts");
+  return out;
+}
+function activityAttention(collab, isHost) {
+  if (collab === null) return false;
+  if (collab.polls.some((poll) => poll.state === "live" && poll.myVote.length === 0 && !isHost)) return true;
+  if (isHost && collab.questions.some((q) => q.state === "open")) return true;
+  return false;
+}
+async function performCollab(runtime, request) {
+  if (runtime === null) return { ok: false, message: "This meeting is not connected." };
+  try {
+    const result = await runtime.inRoom.collab(request);
+    return { ok: true, message: result.message, itemId: result.itemId };
+  } catch (error) {
+    return { ok: false, message: error.message ?? "That did not work." };
+  }
+}
+async function moveToRoom(runtime, roomId) {
+  if (runtime === null) return { ok: false, message: "This meeting is not connected." };
+  try {
+    await runtime.engine.moveToBreakout(roomId);
+    return { ok: true, message: roomId === null ? "Back in the main room." : "Joined the breakout room." };
+  } catch (error) {
+    return { ok: false, message: error.message ?? "That room could not be joined." };
+  }
+}
+function untranslatedLines(lines, translations) {
+  return lines.filter((line) => line.final && translations[line.id] === void 0).map(({ id, text }) => ({ id, text }));
+}
+function nextTranslationBatch(pending, language, asked) {
+  const batch = pending.filter((line) => !asked.has(`${language}:${line.id}`)).slice(-20);
+  for (const line of batch) asked.add(`${language}:${line.id}`);
+  return batch;
+}
+function setCaptionLanguage(store, next) {
+  store.patch({
+    collab: {
+      ...store.snapshot().collab,
+      captionLanguage: next,
+      captionTranslations: {},
+      captionTranslationError: null
+    }
+  });
+}
+function takePanelRequest(store) {
+  const request = store.snapshot().collab.panelRequest;
+  if (request === null) return null;
+  store.patch({ collab: { ...store.snapshot().collab, panelRequest: null } });
+  return request.panel;
+}
+function takeMoveRequest(store) {
+  const request = store.snapshot().collab.moveRequest;
+  if (request === null) return null;
+  store.patch({ collab: { ...store.snapshot().collab, moveRequest: null } });
+  return { roomId: request.roomId };
+}
+
+// src/react/app-panel.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var RegistryContext = createContext2({});
+function useMeetAppPanelRegistry() {
+  return useContext2(RegistryContext);
+}
+function useMeetAppPanel(meeting) {
+  const snapshot = useMeetSnapshot();
+  const registry = useMeetAppPanelRegistry();
+  const record = meeting ?? snapshot?.meeting ?? null;
+  return useMemo3(() => {
+    const panel = appPanelOf(record);
+    if (panel === null || record === null) return null;
+    const entry = registry[panel.key];
+    if (entry === void 0) return null;
+    return { ...entry, panel, organizationId: record.organizationId };
+  }, [record, registry]);
+}
+
 // src/react/hooks.ts
-import { useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef3, useState as useState2, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3, useState as useState2, useSyncExternalStore as useSyncExternalStore2 } from "react";
 import { useRealtimeManager as useRealtimeManager2 } from "@ai-matrx/realtime/react";
 
 // src/core/record.ts
@@ -911,7 +1016,7 @@ function useRoom() {
 function useStage(pageSize = DEFAULT_PAGE_SIZE) {
   const snapshot = useMeetSnapshot();
   const [page, setPage] = useState2(0);
-  const stage = useMemo3(
+  const stage = useMemo4(
     () => computeStage({
       participants: snapshot?.participants ?? [],
       layout: snapshot?.layout ?? "grid",
@@ -1023,7 +1128,7 @@ function useMeetAi() {
   const participants = snapshot?.participants ?? [];
   const notes = snapshot?.notes ?? [];
   const wrapUp = snapshot?.wrapUp ?? null;
-  const status = useMemo3(
+  const status = useMemo4(
     () => noteTakerStatus({
       meeting,
       participants,
@@ -1032,7 +1137,7 @@ function useMeetAi() {
     [meeting, participants, snapshot?.noteTakerRefusal]
   );
   const names = snapshot?.names ?? EMPTY_NAMES;
-  const transcript = useMemo3(
+  const transcript = useMemo4(
     () => readableTranscript(snapshot?.transcript ?? []).map((line) => ({
       id: line.id,
       identity: line.identity,
@@ -1255,7 +1360,7 @@ function useHostControls() {
 }
 function useHandQueue() {
   const snapshot = useMeetSnapshot();
-  return useMemo3(
+  return useMemo4(
     () => (snapshot?.participants ?? []).filter((participant) => participant.handRaised).sort((a, b) => (a.handRaisedAt ?? 0) - (b.handRaisedAt ?? 0)),
     [snapshot?.participants]
   );
@@ -1393,72 +1498,6 @@ function useGuestRecordAccess(meeting) {
   };
 }
 
-// src/core/collab-state.ts
-function availableActivities(collab, isHost) {
-  const settings = collab?.settings ?? null;
-  if (settings === null) return [];
-  const out = [];
-  if (settings.whiteboardEnabled) out.push("whiteboard");
-  if (settings.pollsEnabled && (isHost || (collab?.polls.length ?? 0) > 0)) out.push("polls");
-  if (settings.qaEnabled) out.push("qa");
-  if (settings.breakoutsEnabled && (isHost || collab?.breakout?.state === "open")) out.push("breakouts");
-  return out;
-}
-function activityAttention(collab, isHost) {
-  if (collab === null) return false;
-  if (collab.polls.some((poll) => poll.state === "live" && poll.myVote.length === 0 && !isHost)) return true;
-  if (isHost && collab.questions.some((q) => q.state === "open")) return true;
-  return false;
-}
-async function performCollab(runtime, request) {
-  if (runtime === null) return { ok: false, message: "This meeting is not connected." };
-  try {
-    const result = await runtime.inRoom.collab(request);
-    return { ok: true, message: result.message, itemId: result.itemId };
-  } catch (error) {
-    return { ok: false, message: error.message ?? "That did not work." };
-  }
-}
-async function moveToRoom(runtime, roomId) {
-  if (runtime === null) return { ok: false, message: "This meeting is not connected." };
-  try {
-    await runtime.engine.moveToBreakout(roomId);
-    return { ok: true, message: roomId === null ? "Back in the main room." : "Joined the breakout room." };
-  } catch (error) {
-    return { ok: false, message: error.message ?? "That room could not be joined." };
-  }
-}
-function untranslatedLines(lines, translations) {
-  return lines.filter((line) => line.final && translations[line.id] === void 0).map(({ id, text }) => ({ id, text }));
-}
-function nextTranslationBatch(pending, language, asked) {
-  const batch = pending.filter((line) => !asked.has(`${language}:${line.id}`)).slice(-20);
-  for (const line of batch) asked.add(`${language}:${line.id}`);
-  return batch;
-}
-function setCaptionLanguage(store, next) {
-  store.patch({
-    collab: {
-      ...store.snapshot().collab,
-      captionLanguage: next,
-      captionTranslations: {},
-      captionTranslationError: null
-    }
-  });
-}
-function takePanelRequest(store) {
-  const request = store.snapshot().collab.panelRequest;
-  if (request === null) return null;
-  store.patch({ collab: { ...store.snapshot().collab, panelRequest: null } });
-  return request.panel;
-}
-function takeMoveRequest(store) {
-  const request = store.snapshot().collab.moveRequest;
-  if (request === null) return null;
-  store.patch({ collab: { ...store.snapshot().collab, moveRequest: null } });
-  return { roomId: request.roomId };
-}
-
 // src/react/collab-hooks.ts
 import { useEffect as useEffect4, useRef as useRef4 } from "react";
 function useCollab() {
@@ -1525,7 +1564,7 @@ function useMeetCore() {
   const role = useRole();
   const isHost = useIsHost();
   const observation = useCoreObservation();
-  return useMemo4(
+  return useMemo5(
     () => ({ host, snapshot, devices, role, isHost, observation }),
     [host, snapshot, devices, role, isHost, observation]
   );
@@ -1538,9 +1577,9 @@ import { Alert, AlertDescription, Button, Checkbox, ErrorBox, Label, SegmentedCo
 import { useEffect as useEffect5, useRef as useRef5, useState as useState3 } from "react";
 
 // src/skins/meet/icons.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 function Icon({ children, ...props }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "svg",
     {
       width: "20",
@@ -1560,223 +1599,223 @@ function Icon({ children, ...props }) {
 }
 function MicIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
-    /* @__PURE__ */ jsx3("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }),
-    /* @__PURE__ */ jsx3("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
-    /* @__PURE__ */ jsx3("path", { d: "M12 19v3" })
+    /* @__PURE__ */ jsx4("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }),
+    /* @__PURE__ */ jsx4("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+    /* @__PURE__ */ jsx4("path", { d: "M12 19v3" })
   ] });
 }
 function MicOffIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
-    /* @__PURE__ */ jsx3("path", { d: "M2 2l20 20" }),
-    /* @__PURE__ */ jsx3("path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12" }),
-    /* @__PURE__ */ jsx3("path", { d: "M15 9.34V5a3 3 0 0 0-5.94-.6" }),
-    /* @__PURE__ */ jsx3("path", { d: "M19 10v2a7 7 0 0 1-.11 1.23M5 10v2a7 7 0 0 0 11 5.66" }),
-    /* @__PURE__ */ jsx3("path", { d: "M12 19v3" })
+    /* @__PURE__ */ jsx4("path", { d: "M2 2l20 20" }),
+    /* @__PURE__ */ jsx4("path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12" }),
+    /* @__PURE__ */ jsx4("path", { d: "M15 9.34V5a3 3 0 0 0-5.94-.6" }),
+    /* @__PURE__ */ jsx4("path", { d: "M19 10v2a7 7 0 0 1-.11 1.23M5 10v2a7 7 0 0 0 11 5.66" }),
+    /* @__PURE__ */ jsx4("path", { d: "M12 19v3" })
   ] });
 }
 function CameraIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
-    /* @__PURE__ */ jsx3("path", { d: "m23 7-7 5 7 5V7Z" }),
-    /* @__PURE__ */ jsx3("rect", { x: "1", y: "5", width: "15", height: "14", rx: "2" })
+    /* @__PURE__ */ jsx4("path", { d: "m23 7-7 5 7 5V7Z" }),
+    /* @__PURE__ */ jsx4("rect", { x: "1", y: "5", width: "15", height: "14", rx: "2" })
   ] });
 }
 function CameraOffIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
-    /* @__PURE__ */ jsx3("path", { d: "M2 2l20 20" }),
-    /* @__PURE__ */ jsx3("path", { d: "M10.66 5H14a2 2 0 0 1 2 2v3.34l1 1L23 7v10" }),
-    /* @__PURE__ */ jsx3("path", { d: "M16 16a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2" })
+    /* @__PURE__ */ jsx4("path", { d: "M2 2l20 20" }),
+    /* @__PURE__ */ jsx4("path", { d: "M10.66 5H14a2 2 0 0 1 2 2v3.34l1 1L23 7v10" }),
+    /* @__PURE__ */ jsx4("path", { d: "M16 16a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2" })
   ] });
 }
 function ScreenShareIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
-    /* @__PURE__ */ jsx3("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2" }),
-    /* @__PURE__ */ jsx3("path", { d: "M8 21h8M12 17v4" }),
-    /* @__PURE__ */ jsx3("path", { d: "M12 13V8m0 0-2.5 2.5M12 8l2.5 2.5" })
+    /* @__PURE__ */ jsx4("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2" }),
+    /* @__PURE__ */ jsx4("path", { d: "M8 21h8M12 17v4" }),
+    /* @__PURE__ */ jsx4("path", { d: "M12 13V8m0 0-2.5 2.5M12 8l2.5 2.5" })
   ] });
 }
 function PhoneIcon(props) {
-  return /* @__PURE__ */ jsx3(Icon, { ...props, children: /* @__PURE__ */ jsx3("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z" }) });
+  return /* @__PURE__ */ jsx4(Icon, { ...props, children: /* @__PURE__ */ jsx4("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z" }) });
 }
 function PhoneOffIcon(props) {
-  return /* @__PURE__ */ jsx3(Icon, { fill: "currentColor", stroke: "none", ...props, children: /* @__PURE__ */ jsx3("path", { d: "M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08a.99.99 0 0 1-.29-.7c0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28a11.27 11.27 0 0 0-2.67-1.85.996.996 0 0 1-.56-.9v-3.1C15.15 9.25 13.6 9 12 9Z" }) });
+  return /* @__PURE__ */ jsx4(Icon, { fill: "currentColor", stroke: "none", ...props, children: /* @__PURE__ */ jsx4("path", { d: "M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08a.99.99 0 0 1-.29-.7c0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28a11.27 11.27 0 0 0-2.67-1.85.996.996 0 0 1-.56-.9v-3.1C15.15 9.25 13.6 9 12 9Z" }) });
 }
 function HandIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
-    /* @__PURE__ */ jsx3("path", { d: "M18 11V6a2 2 0 0 0-4 0v5" }),
-    /* @__PURE__ */ jsx3("path", { d: "M14 10V4a2 2 0 0 0-4 0v7" }),
-    /* @__PURE__ */ jsx3("path", { d: "M10 10.5V6a2 2 0 0 0-4 0v8" }),
-    /* @__PURE__ */ jsx3("path", { d: "M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2a8 8 0 0 1-8-8v-1a2 2 0 1 1 4 0" })
+    /* @__PURE__ */ jsx4("path", { d: "M18 11V6a2 2 0 0 0-4 0v5" }),
+    /* @__PURE__ */ jsx4("path", { d: "M14 10V4a2 2 0 0 0-4 0v7" }),
+    /* @__PURE__ */ jsx4("path", { d: "M10 10.5V6a2 2 0 0 0-4 0v8" }),
+    /* @__PURE__ */ jsx4("path", { d: "M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2a8 8 0 0 1-8-8v-1a2 2 0 1 1 4 0" })
   ] });
 }
 function ChatIcon(props) {
-  return /* @__PURE__ */ jsx3(Icon, { ...props, children: /* @__PURE__ */ jsx3("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z" }) });
+  return /* @__PURE__ */ jsx4(Icon, { ...props, children: /* @__PURE__ */ jsx4("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z" }) });
 }
 function PeopleIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
-    /* @__PURE__ */ jsx3("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }),
-    /* @__PURE__ */ jsx3("circle", { cx: "9", cy: "7", r: "4" }),
-    /* @__PURE__ */ jsx3("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" })
+    /* @__PURE__ */ jsx4("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }),
+    /* @__PURE__ */ jsx4("circle", { cx: "9", cy: "7", r: "4" }),
+    /* @__PURE__ */ jsx4("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" })
   ] });
 }
 function RecordIcon(props) {
-  return /* @__PURE__ */ jsx3(Icon, { ...props, children: /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "8", fill: "currentColor", stroke: "none" }) });
+  return /* @__PURE__ */ jsx4(Icon, { ...props, children: /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "8", fill: "currentColor", stroke: "none" }) });
 }
 function SparklesIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
-    /* @__PURE__ */ jsx3("path", { d: "M12 3l1.9 4.6L18.5 9.5l-4.6 1.9L12 16l-1.9-4.6L5.5 9.5l4.6-1.9L12 3Z" }),
-    /* @__PURE__ */ jsx3("path", { d: "M19 15l.9 2.1 2.1.9-2.1.9-.9 2.1-.9-2.1-2.1-.9 2.1-.9L19 15Z" })
+    /* @__PURE__ */ jsx4("path", { d: "M12 3l1.9 4.6L18.5 9.5l-4.6 1.9L12 16l-1.9-4.6L5.5 9.5l4.6-1.9L12 3Z" }),
+    /* @__PURE__ */ jsx4("path", { d: "M19 15l.9 2.1 2.1.9-2.1.9-.9 2.1-.9-2.1-2.1-.9 2.1-.9L19 15Z" })
   ] });
 }
 function LockIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
-    /* @__PURE__ */ jsx3("rect", { x: "4", y: "10", width: "16", height: "11", rx: "2" }),
-    /* @__PURE__ */ jsx3("path", { d: "M8 10V7a4 4 0 0 1 8 0v3" })
+    /* @__PURE__ */ jsx4("rect", { x: "4", y: "10", width: "16", height: "11", rx: "2" }),
+    /* @__PURE__ */ jsx4("path", { d: "M8 10V7a4 4 0 0 1 8 0v3" })
   ] });
 }
 function LayoutIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
-    /* @__PURE__ */ jsx3("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-    /* @__PURE__ */ jsx3("path", { d: "M3 9h18M9 21V9" })
+    /* @__PURE__ */ jsx4("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ jsx4("path", { d: "M3 9h18M9 21V9" })
   ] });
 }
 function SettingsIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
-    /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "3" }),
-    /* @__PURE__ */ jsx3("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z" })
+    /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "3" }),
+    /* @__PURE__ */ jsx4("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z" })
   ] });
 }
 function CheckIcon(props) {
-  return /* @__PURE__ */ jsx3(Icon, { ...props, children: /* @__PURE__ */ jsx3("path", { d: "M20 6 9 17l-5-5" }) });
+  return /* @__PURE__ */ jsx4(Icon, { ...props, children: /* @__PURE__ */ jsx4("path", { d: "M20 6 9 17l-5-5" }) });
 }
 function CloseIcon(props) {
-  return /* @__PURE__ */ jsx3(Icon, { ...props, children: /* @__PURE__ */ jsx3("path", { d: "M18 6 6 18M6 6l12 12" }) });
+  return /* @__PURE__ */ jsx4(Icon, { ...props, children: /* @__PURE__ */ jsx4("path", { d: "M18 6 6 18M6 6l12 12" }) });
 }
 function PinIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
-    /* @__PURE__ */ jsx3("path", { d: "M12 17v5" }),
-    /* @__PURE__ */ jsx3("path", { d: "M9 2h6l-1 6 3.5 3.5V14H6.5v-2.5L10 8 9 2Z" })
+    /* @__PURE__ */ jsx4("path", { d: "M12 17v5" }),
+    /* @__PURE__ */ jsx4("path", { d: "M9 2h6l-1 6 3.5 3.5V14H6.5v-2.5L10 8 9 2Z" })
   ] });
 }
 function WifiLowIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
-    /* @__PURE__ */ jsx3("path", { d: "M12 20h.01" }),
-    /* @__PURE__ */ jsx3("path", { d: "M8.5 16.5a5 5 0 0 1 7 0" })
+    /* @__PURE__ */ jsx4("path", { d: "M12 20h.01" }),
+    /* @__PURE__ */ jsx4("path", { d: "M8.5 16.5a5 5 0 0 1 7 0" })
   ] });
 }
 function SmileIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
-    /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ jsx3("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }),
-    /* @__PURE__ */ jsx3("line", { x1: "9", x2: "9.01", y1: "9", y2: "9" }),
-    /* @__PURE__ */ jsx3("line", { x1: "15", x2: "15.01", y1: "9", y2: "9" })
+    /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx4("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }),
+    /* @__PURE__ */ jsx4("line", { x1: "9", x2: "9.01", y1: "9", y2: "9" }),
+    /* @__PURE__ */ jsx4("line", { x1: "15", x2: "15.01", y1: "9", y2: "9" })
   ] });
 }
 function MoreIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
-    /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "1" }),
-    /* @__PURE__ */ jsx3("circle", { cx: "19", cy: "12", r: "1" }),
-    /* @__PURE__ */ jsx3("circle", { cx: "5", cy: "12", r: "1" })
+    /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "1" }),
+    /* @__PURE__ */ jsx4("circle", { cx: "19", cy: "12", r: "1" }),
+    /* @__PURE__ */ jsx4("circle", { cx: "5", cy: "12", r: "1" })
   ] });
 }
 function SearchIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
-    /* @__PURE__ */ jsx3("circle", { cx: "11", cy: "11", r: "8" }),
-    /* @__PURE__ */ jsx3("path", { d: "m21 21-4.3-4.3" })
+    /* @__PURE__ */ jsx4("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ jsx4("path", { d: "m21 21-4.3-4.3" })
   ] });
 }
 function KeyboardIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
-    /* @__PURE__ */ jsx3("path", { d: "M10 8h.01M12 12h.01M14 8h.01M16 12h.01M18 8h.01M6 8h.01M7 16h10M8 12h.01" }),
-    /* @__PURE__ */ jsx3("rect", { width: "20", height: "16", x: "2", y: "4", rx: "2" })
+    /* @__PURE__ */ jsx4("path", { d: "M10 8h.01M12 12h.01M14 8h.01M16 12h.01M18 8h.01M6 8h.01M7 16h10M8 12h.01" }),
+    /* @__PURE__ */ jsx4("rect", { width: "20", height: "16", x: "2", y: "4", rx: "2" })
   ] });
 }
 function SpotlightIcon(props) {
-  return /* @__PURE__ */ jsx3(Icon, { ...props, children: /* @__PURE__ */ jsx3("path", { d: "M12 2 15 8.5 22 9.3 17 14 18.2 21 12 17.6 5.8 21 7 14 2 9.3 9 8.5Z" }) });
+  return /* @__PURE__ */ jsx4(Icon, { ...props, children: /* @__PURE__ */ jsx4("path", { d: "M12 2 15 8.5 22 9.3 17 14 18.2 21 12 17.6 5.8 21 7 14 2 9.3 9 8.5Z" }) });
 }
 function SignalIcon({ bars, ...props }) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
-    /* @__PURE__ */ jsx3("path", { d: "M4 20v-2", opacity: bars >= 1 ? 1 : 0.3 }),
-    /* @__PURE__ */ jsx3("path", { d: "M10 20v-6", opacity: bars >= 2 ? 1 : 0.3 }),
-    /* @__PURE__ */ jsx3("path", { d: "M16 20V9", opacity: bars >= 3 ? 1 : 0.3 }),
-    /* @__PURE__ */ jsx3("path", { d: "M22 20V4", opacity: bars >= 3 ? 1 : 0.3 })
+    /* @__PURE__ */ jsx4("path", { d: "M4 20v-2", opacity: bars >= 1 ? 1 : 0.3 }),
+    /* @__PURE__ */ jsx4("path", { d: "M10 20v-6", opacity: bars >= 2 ? 1 : 0.3 }),
+    /* @__PURE__ */ jsx4("path", { d: "M16 20V9", opacity: bars >= 3 ? 1 : 0.3 }),
+    /* @__PURE__ */ jsx4("path", { d: "M22 20V4", opacity: bars >= 3 ? 1 : 0.3 })
   ] });
 }
 function SpeakerIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
-    /* @__PURE__ */ jsx3("path", { d: "M11 5 6 9H2v6h4l5 4V5Z" }),
-    /* @__PURE__ */ jsx3("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" }),
-    /* @__PURE__ */ jsx3("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14" })
+    /* @__PURE__ */ jsx4("path", { d: "M11 5 6 9H2v6h4l5 4V5Z" }),
+    /* @__PURE__ */ jsx4("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" }),
+    /* @__PURE__ */ jsx4("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14" })
   ] });
 }
 function FlagIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
-    /* @__PURE__ */ jsx3("path", { d: "M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" }),
-    /* @__PURE__ */ jsx3("line", { x1: "4", x2: "4", y1: "22", y2: "15" })
+    /* @__PURE__ */ jsx4("path", { d: "M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" }),
+    /* @__PURE__ */ jsx4("line", { x1: "4", x2: "4", y1: "22", y2: "15" })
   ] });
 }
 function PencilIcon(props) {
-  return /* @__PURE__ */ jsx3(Icon, { ...props, children: /* @__PURE__ */ jsx3("path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }) });
+  return /* @__PURE__ */ jsx4(Icon, { ...props, children: /* @__PURE__ */ jsx4("path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }) });
 }
 function ActivitiesIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
-    /* @__PURE__ */ jsx3("path", { d: "M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z" }),
-    /* @__PURE__ */ jsx3("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1" }),
-    /* @__PURE__ */ jsx3("circle", { cx: "17.5", cy: "17.5", r: "3.5" })
+    /* @__PURE__ */ jsx4("path", { d: "M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z" }),
+    /* @__PURE__ */ jsx4("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1" }),
+    /* @__PURE__ */ jsx4("circle", { cx: "17.5", cy: "17.5", r: "3.5" })
   ] });
 }
 function PollIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
-    /* @__PURE__ */ jsx3("line", { x1: "18", x2: "18", y1: "20", y2: "10" }),
-    /* @__PURE__ */ jsx3("line", { x1: "12", x2: "12", y1: "20", y2: "4" }),
-    /* @__PURE__ */ jsx3("line", { x1: "6", x2: "6", y1: "20", y2: "14" })
+    /* @__PURE__ */ jsx4("line", { x1: "18", x2: "18", y1: "20", y2: "10" }),
+    /* @__PURE__ */ jsx4("line", { x1: "12", x2: "12", y1: "20", y2: "4" }),
+    /* @__PURE__ */ jsx4("line", { x1: "6", x2: "6", y1: "20", y2: "14" })
   ] });
 }
 function QuestionIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
-    /* @__PURE__ */ jsx3("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" }),
-    /* @__PURE__ */ jsx3("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
-    /* @__PURE__ */ jsx3("path", { d: "M12 17h.01" })
+    /* @__PURE__ */ jsx4("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" }),
+    /* @__PURE__ */ jsx4("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
+    /* @__PURE__ */ jsx4("path", { d: "M12 17h.01" })
   ] });
 }
 function WhiteboardIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
-    /* @__PURE__ */ jsx3("path", { d: "M2 3h20" }),
-    /* @__PURE__ */ jsx3("path", { d: "M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3" }),
-    /* @__PURE__ */ jsx3("path", { d: "m7 21 5-5 5 5" })
+    /* @__PURE__ */ jsx4("path", { d: "M2 3h20" }),
+    /* @__PURE__ */ jsx4("path", { d: "M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3" }),
+    /* @__PURE__ */ jsx4("path", { d: "m7 21 5-5 5 5" })
   ] });
 }
 function BreakoutIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
-    /* @__PURE__ */ jsx3("rect", { width: "7", height: "18", x: "3", y: "3", rx: "1" }),
-    /* @__PURE__ */ jsx3("rect", { width: "7", height: "7", x: "14", y: "3", rx: "1" }),
-    /* @__PURE__ */ jsx3("rect", { width: "7", height: "7", x: "14", y: "14", rx: "1" })
+    /* @__PURE__ */ jsx4("rect", { width: "7", height: "18", x: "3", y: "3", rx: "1" }),
+    /* @__PURE__ */ jsx4("rect", { width: "7", height: "7", x: "14", y: "3", rx: "1" }),
+    /* @__PURE__ */ jsx4("rect", { width: "7", height: "7", x: "14", y: "14", rx: "1" })
   ] });
 }
 function UpvoteIcon(props) {
-  return /* @__PURE__ */ jsx3(Icon, { ...props, children: /* @__PURE__ */ jsx3("path", { d: "M9 18v-6H5l7-7 7 7h-4v6H9z" }) });
+  return /* @__PURE__ */ jsx4(Icon, { ...props, children: /* @__PURE__ */ jsx4("path", { d: "M9 18v-6H5l7-7 7 7h-4v6H9z" }) });
 }
 function EraserIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
-    /* @__PURE__ */ jsx3("path", { d: "m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21" }),
-    /* @__PURE__ */ jsx3("path", { d: "M22 21H7" }),
-    /* @__PURE__ */ jsx3("path", { d: "m5 11 9 9" })
+    /* @__PURE__ */ jsx4("path", { d: "m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21" }),
+    /* @__PURE__ */ jsx4("path", { d: "M22 21H7" }),
+    /* @__PURE__ */ jsx4("path", { d: "m5 11 9 9" })
   ] });
 }
 function HighlighterIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
-    /* @__PURE__ */ jsx3("path", { d: "m9 11-6 6v3h9l3-3" }),
-    /* @__PURE__ */ jsx3("path", { d: "m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4" })
+    /* @__PURE__ */ jsx4("path", { d: "m9 11-6 6v3h9l3-3" }),
+    /* @__PURE__ */ jsx4("path", { d: "m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4" })
   ] });
 }
 function UndoIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
-    /* @__PURE__ */ jsx3("path", { d: "M9 14 4 9l5-5" }),
-    /* @__PURE__ */ jsx3("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11" })
+    /* @__PURE__ */ jsx4("path", { d: "M9 14 4 9l5-5" }),
+    /* @__PURE__ */ jsx4("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11" })
   ] });
 }
 
 // src/skins/meet/collab.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function useNotice() {
   const [notice, setNotice] = useState3(null);
   useEffect5(() => {
@@ -1788,7 +1827,7 @@ function useNotice() {
 }
 function Notice({ notice }) {
   if (notice === null) return null;
-  return /* @__PURE__ */ jsx4("p", { className: notice.failed ? "mx-meet__panel-note mx-meet__collab-error" : "mx-meet__panel-note", role: "status", children: notice.text });
+  return /* @__PURE__ */ jsx5("p", { className: notice.failed ? "mx-meet__panel-note mx-meet__collab-error" : "mx-meet__panel-note", role: "status", children: notice.text });
 }
 var ACTIVITY_LABELS = {
   polls: "Polls",
@@ -1798,10 +1837,10 @@ var ACTIVITY_LABELS = {
 };
 function ActivityIcon({ panel }) {
   const props = { width: 16, height: 16 };
-  if (panel === "polls") return /* @__PURE__ */ jsx4(PollIcon, { ...props });
-  if (panel === "qa") return /* @__PURE__ */ jsx4(QuestionIcon, { ...props });
-  if (panel === "whiteboard") return /* @__PURE__ */ jsx4(WhiteboardIcon, { ...props });
-  return /* @__PURE__ */ jsx4(BreakoutIcon, { ...props });
+  if (panel === "polls") return /* @__PURE__ */ jsx5(PollIcon, { ...props });
+  if (panel === "qa") return /* @__PURE__ */ jsx5(QuestionIcon, { ...props });
+  if (panel === "whiteboard") return /* @__PURE__ */ jsx5(WhiteboardIcon, { ...props });
+  return /* @__PURE__ */ jsx5(BreakoutIcon, { ...props });
 }
 function ActivitiesControl({
   active,
@@ -1813,10 +1852,10 @@ function ActivitiesControl({
   if (available.length === 0) return null;
   return /* @__PURE__ */ jsxs2("span", { className: "mx-meet__anchor", children: [
     /* @__PURE__ */ jsxs2(ControlButton, { label: "Activities", active: open || active !== null, onClick: () => setOpen(!open), children: [
-      /* @__PURE__ */ jsx4(ActivitiesIcon, {}),
-      attention ? /* @__PURE__ */ jsx4("span", { className: "mx-meet__dot", "aria-hidden": "true" }) : null
+      /* @__PURE__ */ jsx5(ActivitiesIcon, {}),
+      attention ? /* @__PURE__ */ jsx5("span", { className: "mx-meet__dot", "aria-hidden": "true" }) : null
     ] }),
-    open ? /* @__PURE__ */ jsx4(Popover, { label: "Activities", onClose: () => setOpen(false), children: /* @__PURE__ */ jsx4("div", { className: "mx-meet__menu", role: "menu", children: available.map((panel) => /* @__PURE__ */ jsxs2(
+    open ? /* @__PURE__ */ jsx5(Popover, { label: "Activities", onClose: () => setOpen(false), children: /* @__PURE__ */ jsx5("div", { className: "mx-meet__menu", role: "menu", children: available.map((panel) => /* @__PURE__ */ jsxs2(
       MenuItem,
       {
         onSelect: () => {
@@ -1824,7 +1863,7 @@ function ActivitiesControl({
           onOpen(panel);
         },
         children: [
-          /* @__PURE__ */ jsx4(ActivityIcon, { panel }),
+          /* @__PURE__ */ jsx5(ActivityIcon, { panel }),
           " ",
           ACTIVITY_LABELS[panel]
         ]
@@ -1872,8 +1911,8 @@ function PollComposer({ maxOptions, onDone }) {
       },
       children: [
         /* @__PURE__ */ jsxs2("label", { className: "mx-meet__field", children: [
-          /* @__PURE__ */ jsx4("span", { className: "mx-meet__field-label", children: "Question" }),
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5("span", { className: "mx-meet__field-label", children: "Question" }),
+          /* @__PURE__ */ jsx5(
             "input",
             {
               className: "mx-meet__input",
@@ -1886,7 +1925,7 @@ function PollComposer({ maxOptions, onDone }) {
           )
         ] }),
         options.map((option, index) => /* @__PURE__ */ jsxs2("div", { className: "mx-meet__composer-row", children: [
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5(
             "input",
             {
               className: "mx-meet__input",
@@ -1897,22 +1936,22 @@ function PollComposer({ maxOptions, onDone }) {
               onChange: (event) => setOptions(options.map((o, i) => i === index ? event.target.value : o))
             }
           ),
-          options.length > 2 ? /* @__PURE__ */ jsx4(ControlButton, { label: `Remove answer ${index + 1}`, onClick: () => setOptions(options.filter((_, i) => i !== index)), children: /* @__PURE__ */ jsx4(CloseIcon, { width: 14, height: 14 }) }) : null
+          options.length > 2 ? /* @__PURE__ */ jsx5(ControlButton, { label: `Remove answer ${index + 1}`, onClick: () => setOptions(options.filter((_, i) => i !== index)), children: /* @__PURE__ */ jsx5(CloseIcon, { width: 14, height: 14 }) }) : null
         ] }, index)),
-        options.length < maxOptions ? /* @__PURE__ */ jsx4("button", { type: "button", className: "mx-meet__link", onClick: () => setOptions([...options, ""]), children: "Add an answer" }) : null,
+        options.length < maxOptions ? /* @__PURE__ */ jsx5("button", { type: "button", className: "mx-meet__link", onClick: () => setOptions([...options, ""]), children: "Add an answer" }) : null,
         /* @__PURE__ */ jsxs2("label", { className: "mx-meet__toggle", children: [
-          /* @__PURE__ */ jsx4("input", { type: "checkbox", checked: multiple, onChange: (event) => setMultiple(event.target.checked) }),
+          /* @__PURE__ */ jsx5("input", { type: "checkbox", checked: multiple, onChange: (event) => setMultiple(event.target.checked) }),
           "People can pick more than one"
         ] }),
         /* @__PURE__ */ jsxs2("label", { className: "mx-meet__toggle", children: [
-          /* @__PURE__ */ jsx4("input", { type: "checkbox", checked: anonymous, onChange: (event) => setAnonymous(event.target.checked) }),
+          /* @__PURE__ */ jsx5("input", { type: "checkbox", checked: anonymous, onChange: (event) => setAnonymous(event.target.checked) }),
           "Anonymous \u2014 nobody sees who picked what"
         ] }),
-        /* @__PURE__ */ jsx4(Notice, { notice }),
+        /* @__PURE__ */ jsx5(Notice, { notice }),
         /* @__PURE__ */ jsxs2("div", { className: "mx-meet__collab-actions", children: [
-          /* @__PURE__ */ jsx4("button", { type: "submit", className: "mx-meet__primary mx-meet__primary--small", disabled: !ready || busy, children: "Launch" }),
-          /* @__PURE__ */ jsx4("button", { type: "button", className: "mx-meet__chip", disabled: !ready || busy, onClick: () => void save(false), children: "Save draft" }),
-          /* @__PURE__ */ jsx4("button", { type: "button", className: "mx-meet__link", onClick: onDone, children: "Cancel" })
+          /* @__PURE__ */ jsx5("button", { type: "submit", className: "mx-meet__primary mx-meet__primary--small", disabled: !ready || busy, children: "Launch" }),
+          /* @__PURE__ */ jsx5("button", { type: "button", className: "mx-meet__chip", disabled: !ready || busy, onClick: () => void save(false), children: "Save draft" }),
+          /* @__PURE__ */ jsx5("button", { type: "button", className: "mx-meet__link", onClick: onDone, children: "Cancel" })
         ] })
       ]
     }
@@ -1934,8 +1973,8 @@ function PollCard({ poll }) {
   };
   return /* @__PURE__ */ jsxs2("article", { className: "mx-meet__collab-card", "aria-label": poll.question, children: [
     /* @__PURE__ */ jsxs2("header", { className: "mx-meet__collab-head", children: [
-      /* @__PURE__ */ jsx4("strong", { className: "mx-meet__collab-title", children: poll.question }),
-      /* @__PURE__ */ jsx4("span", { className: "mx-meet__collab-state", children: stateWord })
+      /* @__PURE__ */ jsx5("strong", { className: "mx-meet__collab-title", children: poll.question }),
+      /* @__PURE__ */ jsx5("span", { className: "mx-meet__collab-state", children: stateWord })
     ] }),
     /* @__PURE__ */ jsxs2("p", { className: "mx-meet__panel-note", children: [
       poll.multiple ? "Pick any." : "Pick one.",
@@ -1943,7 +1982,7 @@ function PollCard({ poll }) {
       counts && poll.voterCount !== null ? ` ${poll.voterCount} voted.` : "",
       isHost && poll.state !== "draft" && !poll.resultsShared ? " Results are visible only to hosts." : ""
     ] }),
-    /* @__PURE__ */ jsx4("ul", { className: "mx-meet__poll-options", children: poll.options.map((option) => {
+    /* @__PURE__ */ jsx5("ul", { className: "mx-meet__poll-options", children: poll.options.map((option) => {
       const share = counts && total > 0 ? Math.round((option.votes ?? 0) / total * 100) : 0;
       const chosen = picked.includes(option.id);
       return /* @__PURE__ */ jsxs2("li", { children: [
@@ -1956,8 +1995,8 @@ function PollCard({ poll }) {
             disabled: !canVote,
             onClick: () => toggle(option.id),
             children: [
-              counts ? /* @__PURE__ */ jsx4("span", { className: "mx-meet__poll-bar", style: { width: `${share}%` }, "aria-hidden": "true" }) : null,
-              /* @__PURE__ */ jsx4("span", { className: "mx-meet__poll-text", children: option.text }),
+              counts ? /* @__PURE__ */ jsx5("span", { className: "mx-meet__poll-bar", style: { width: `${share}%` }, "aria-hidden": "true" }) : null,
+              /* @__PURE__ */ jsx5("span", { className: "mx-meet__poll-text", children: option.text }),
               counts ? /* @__PURE__ */ jsxs2("span", { className: "mx-meet__poll-count", children: [
                 option.votes ?? 0,
                 " \xB7 ",
@@ -1967,12 +2006,12 @@ function PollCard({ poll }) {
             ]
           }
         ),
-        option.voters !== void 0 && option.voters.length > 0 ? /* @__PURE__ */ jsx4("span", { className: "mx-meet__poll-voters", children: option.voters.join(", ") }) : null
+        option.voters !== void 0 && option.voters.length > 0 ? /* @__PURE__ */ jsx5("span", { className: "mx-meet__poll-voters", children: option.voters.join(", ") }) : null
       ] }, option.id);
     }) }),
-    /* @__PURE__ */ jsx4(Notice, { notice }),
+    /* @__PURE__ */ jsx5(Notice, { notice }),
     /* @__PURE__ */ jsxs2("div", { className: "mx-meet__collab-actions", children: [
-      canVote ? /* @__PURE__ */ jsx4(
+      canVote ? /* @__PURE__ */ jsx5(
         "button",
         {
           type: "button",
@@ -1982,10 +2021,10 @@ function PollCard({ poll }) {
           children: voted ? "Change vote" : "Vote"
         }
       ) : null,
-      isHost && poll.state === "draft" ? /* @__PURE__ */ jsx4("button", { type: "button", className: "mx-meet__primary mx-meet__primary--small", onClick: () => void act({ action: "poll_launch", itemId: poll.id }).then(show), children: "Launch" }) : null,
-      isHost && poll.state === "live" ? /* @__PURE__ */ jsx4("button", { type: "button", className: "mx-meet__chip", onClick: () => void act({ action: "poll_close", itemId: poll.id }).then(show), children: "End poll" }) : null,
-      isHost && poll.state !== "draft" ? /* @__PURE__ */ jsx4("button", { type: "button", className: "mx-meet__chip", onClick: () => void act({ action: "poll_share", itemId: poll.id }).then(show), children: poll.resultsShared ? "Hide results" : "Share results" }) : null,
-      isHost && poll.state === "live" ? null : isHost ? /* @__PURE__ */ jsx4("button", { type: "button", className: "mx-meet__link", onClick: () => void act({ action: "poll_delete", itemId: poll.id }).then(show), children: "Delete" }) : null
+      isHost && poll.state === "draft" ? /* @__PURE__ */ jsx5("button", { type: "button", className: "mx-meet__primary mx-meet__primary--small", onClick: () => void act({ action: "poll_launch", itemId: poll.id }).then(show), children: "Launch" }) : null,
+      isHost && poll.state === "live" ? /* @__PURE__ */ jsx5("button", { type: "button", className: "mx-meet__chip", onClick: () => void act({ action: "poll_close", itemId: poll.id }).then(show), children: "End poll" }) : null,
+      isHost && poll.state !== "draft" ? /* @__PURE__ */ jsx5("button", { type: "button", className: "mx-meet__chip", onClick: () => void act({ action: "poll_share", itemId: poll.id }).then(show), children: poll.resultsShared ? "Hide results" : "Share results" }) : null,
+      isHost && poll.state === "live" ? null : isHost ? /* @__PURE__ */ jsx5("button", { type: "button", className: "mx-meet__link", onClick: () => void act({ action: "poll_delete", itemId: poll.id }).then(show), children: "Delete" }) : null
     ] })
   ] });
 }
@@ -1996,11 +2035,11 @@ function PollsPanel({ onClose }) {
   const maxOptions = collab?.settings?.pollMaxOptions ?? 10;
   const ordered = [...polls].reverse();
   return /* @__PURE__ */ jsxs2(PanelShell, { title: "Polls", onClose, children: [
-    collab?.error != null ? /* @__PURE__ */ jsx4("p", { className: "mx-meet__panel-note mx-meet__collab-error", children: collab.error }) : null,
-    isHost && !composing ? /* @__PURE__ */ jsx4("button", { type: "button", className: "mx-meet__primary mx-meet__primary--small", onClick: () => setComposing(true), children: "New poll" }) : null,
-    isHost && composing ? /* @__PURE__ */ jsx4(PollComposer, { maxOptions, onDone: () => setComposing(false) }) : null,
-    ordered.length === 0 && !composing ? /* @__PURE__ */ jsx4("p", { className: "mx-meet__panel-note", children: isHost ? "No polls yet. Polls and their results are kept with the meeting." : "No polls yet." }) : null,
-    ordered.map((poll) => /* @__PURE__ */ jsx4(PollCard, { poll }, poll.id))
+    collab?.error != null ? /* @__PURE__ */ jsx5("p", { className: "mx-meet__panel-note mx-meet__collab-error", children: collab.error }) : null,
+    isHost && !composing ? /* @__PURE__ */ jsx5("button", { type: "button", className: "mx-meet__primary mx-meet__primary--small", onClick: () => setComposing(true), children: "New poll" }) : null,
+    isHost && composing ? /* @__PURE__ */ jsx5(PollComposer, { maxOptions, onDone: () => setComposing(false) }) : null,
+    ordered.length === 0 && !composing ? /* @__PURE__ */ jsx5("p", { className: "mx-meet__panel-note", children: isHost ? "No polls yet. Polls and their results are kept with the meeting." : "No polls yet." }) : null,
+    ordered.map((poll) => /* @__PURE__ */ jsx5(PollCard, { poll }, poll.id))
   ] });
 }
 function QuestionCard({ question }) {
@@ -2020,18 +2059,18 @@ function QuestionCard({ question }) {
           disabled: question.state === "dismissed",
           onClick: () => void act({ action: "question_upvote", itemId: question.id }).then((r) => r.ok ? void 0 : show(r)),
           children: [
-            /* @__PURE__ */ jsx4(UpvoteIcon, { width: 16, height: 16 }),
-            /* @__PURE__ */ jsx4("span", { children: question.upvotes })
+            /* @__PURE__ */ jsx5(UpvoteIcon, { width: 16, height: 16 }),
+            /* @__PURE__ */ jsx5("span", { children: question.upvotes })
           ]
         }
       ),
       /* @__PURE__ */ jsxs2("div", { className: "mx-meet__question-body", children: [
         /* @__PURE__ */ jsxs2("span", { className: "mx-meet__chat-meta", children: [
-          /* @__PURE__ */ jsx4("strong", { children: question.mine ? "You" : question.askerName }),
-          question.mine && question.anonymous ? /* @__PURE__ */ jsx4("span", { className: "mx-meet__chat-private", children: "anonymous" }) : null,
-          question.state !== "open" ? /* @__PURE__ */ jsx4("span", { className: "mx-meet__collab-state", children: question.state === "answered" ? "Answered" : "Dismissed" }) : null
+          /* @__PURE__ */ jsx5("strong", { children: question.mine ? "You" : question.askerName }),
+          question.mine && question.anonymous ? /* @__PURE__ */ jsx5("span", { className: "mx-meet__chat-private", children: "anonymous" }) : null,
+          question.state !== "open" ? /* @__PURE__ */ jsx5("span", { className: "mx-meet__collab-state", children: question.state === "answered" ? "Answered" : "Dismissed" }) : null
         ] }),
-        /* @__PURE__ */ jsx4("span", { className: "mx-meet__chat-text", children: question.text }),
+        /* @__PURE__ */ jsx5("span", { className: "mx-meet__chat-text", children: question.text }),
         question.answer !== null ? /* @__PURE__ */ jsxs2("span", { className: "mx-meet__question-answer", children: [
           /* @__PURE__ */ jsxs2("strong", { children: [
             question.answeredByName ?? "Host",
@@ -2057,7 +2096,7 @@ function QuestionCard({ question }) {
           });
         },
         children: [
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5(
             "input",
             {
               className: "mx-meet__input",
@@ -2069,16 +2108,16 @@ function QuestionCard({ question }) {
               autoFocus: true
             }
           ),
-          /* @__PURE__ */ jsx4("button", { type: "submit", className: "mx-meet__send", children: "Done" })
+          /* @__PURE__ */ jsx5("button", { type: "submit", className: "mx-meet__send", children: "Done" })
         ]
       }
     ) : null,
-    /* @__PURE__ */ jsx4(Notice, { notice }),
+    /* @__PURE__ */ jsx5(Notice, { notice }),
     isHost || question.mine ? /* @__PURE__ */ jsxs2("div", { className: "mx-meet__collab-actions", children: [
-      isHost && question.state === "open" && !answering ? /* @__PURE__ */ jsx4("button", { type: "button", className: "mx-meet__chip", onClick: () => setAnswering(true), children: "Answer" }) : null,
-      isHost && question.state === "open" ? /* @__PURE__ */ jsx4("button", { type: "button", className: "mx-meet__chip", onClick: () => void act({ action: "question_dismiss", itemId: question.id }).then(show), children: "Dismiss" }) : null,
-      isHost && question.state !== "open" ? /* @__PURE__ */ jsx4("button", { type: "button", className: "mx-meet__chip", onClick: () => void act({ action: "question_reopen", itemId: question.id }).then(show), children: "Reopen" }) : null,
-      question.mine || isHost ? /* @__PURE__ */ jsx4("button", { type: "button", className: "mx-meet__link", onClick: () => void act({ action: "question_delete", itemId: question.id }).then(show), children: "Delete" }) : null
+      isHost && question.state === "open" && !answering ? /* @__PURE__ */ jsx5("button", { type: "button", className: "mx-meet__chip", onClick: () => setAnswering(true), children: "Answer" }) : null,
+      isHost && question.state === "open" ? /* @__PURE__ */ jsx5("button", { type: "button", className: "mx-meet__chip", onClick: () => void act({ action: "question_dismiss", itemId: question.id }).then(show), children: "Dismiss" }) : null,
+      isHost && question.state !== "open" ? /* @__PURE__ */ jsx5("button", { type: "button", className: "mx-meet__chip", onClick: () => void act({ action: "question_reopen", itemId: question.id }).then(show), children: "Reopen" }) : null,
+      question.mine || isHost ? /* @__PURE__ */ jsx5("button", { type: "button", className: "mx-meet__link", onClick: () => void act({ action: "question_delete", itemId: question.id }).then(show), children: "Delete" }) : null
     ] }) : null
   ] });
 }
@@ -2095,7 +2134,7 @@ function QaPanel({ onClose }) {
     (a, b) => rank(a) !== rank(b) ? rank(a) - rank(b) : order === "popular" ? b.upvotes - a.upvotes || (b.createdAt ?? "").localeCompare(a.createdAt ?? "") : (b.createdAt ?? "").localeCompare(a.createdAt ?? "")
   );
   return /* @__PURE__ */ jsxs2(PanelShell, { title: "Q&A", onClose, children: [
-    collab?.error != null ? /* @__PURE__ */ jsx4("p", { className: "mx-meet__panel-note mx-meet__collab-error", children: collab.error }) : null,
+    collab?.error != null ? /* @__PURE__ */ jsx5("p", { className: "mx-meet__panel-note mx-meet__collab-error", children: collab.error }) : null,
     /* @__PURE__ */ jsxs2(
       "form",
       {
@@ -2111,7 +2150,7 @@ function QaPanel({ onClose }) {
         },
         children: [
           /* @__PURE__ */ jsxs2("div", { className: "mx-meet__composer-row", children: [
-            /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx5(
               "input",
               {
                 className: "mx-meet__input",
@@ -2122,17 +2161,17 @@ function QaPanel({ onClose }) {
                 "aria-label": "Ask the host a question"
               }
             ),
-            /* @__PURE__ */ jsx4("button", { type: "submit", className: "mx-meet__send", disabled: draft.trim().length === 0, children: "Ask" })
+            /* @__PURE__ */ jsx5("button", { type: "submit", className: "mx-meet__send", disabled: draft.trim().length === 0, children: "Ask" })
           ] }),
           allowAnonymous ? /* @__PURE__ */ jsxs2("label", { className: "mx-meet__toggle", children: [
-            /* @__PURE__ */ jsx4("input", { type: "checkbox", checked: anonymous, onChange: (event) => setAnonymous(event.target.checked) }),
+            /* @__PURE__ */ jsx5("input", { type: "checkbox", checked: anonymous, onChange: (event) => setAnonymous(event.target.checked) }),
             "Ask anonymously"
           ] }) : null
         ]
       }
     ),
-    /* @__PURE__ */ jsx4(Notice, { notice }),
-    questions.length > 1 ? /* @__PURE__ */ jsx4("div", { className: "mx-meet__pills", role: "group", "aria-label": "Order questions", children: ["popular", "recent"].map((value) => /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(Notice, { notice }),
+    questions.length > 1 ? /* @__PURE__ */ jsx5("div", { className: "mx-meet__pills", role: "group", "aria-label": "Order questions", children: ["popular", "recent"].map((value) => /* @__PURE__ */ jsx5(
       "button",
       {
         type: "button",
@@ -2143,7 +2182,7 @@ function QaPanel({ onClose }) {
       },
       value
     )) }) : null,
-    questions.length === 0 ? /* @__PURE__ */ jsx4("p", { className: "mx-meet__panel-note", children: "No questions yet. Questions are kept with the meeting." }) : /* @__PURE__ */ jsx4("ul", { className: "mx-meet__chat", children: questions.map((question) => /* @__PURE__ */ jsx4(QuestionCard, { question }, question.id)) })
+    questions.length === 0 ? /* @__PURE__ */ jsx5("p", { className: "mx-meet__panel-note", children: "No questions yet. Questions are kept with the meeting." }) : /* @__PURE__ */ jsx5("ul", { className: "mx-meet__chat", children: questions.map((question) => /* @__PURE__ */ jsx5(QuestionCard, { question }, question.id)) })
   ] });
 }
 var BOARD_W = 1600;
@@ -2157,7 +2196,7 @@ function strokePath(points) {
   return `${move} ${rest.map(([x, y]) => `L${(x * BOARD_W).toFixed(1)} ${(y * BOARD_H).toFixed(1)}`).join(" ")}`;
 }
 function StrokeView({ stroke, onPick }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     "path",
     {
       d: strokePath(stroke.points),
@@ -2169,7 +2208,7 @@ function StrokeView({ stroke, onPick }) {
       strokeLinejoin: "round",
       onPointerDown: onPick,
       style: onPick !== void 0 ? { cursor: "pointer" } : void 0,
-      children: /* @__PURE__ */ jsx4("title", { children: stroke.byName })
+      children: /* @__PURE__ */ jsx5("title", { children: stroke.byName })
     }
   );
 }
@@ -2214,12 +2253,12 @@ function WhiteboardPanel({ onClose }) {
   };
   return /* @__PURE__ */ jsxs2("section", { className: "mx-meet__whiteboard", "aria-label": "Whiteboard", children: [
     /* @__PURE__ */ jsxs2("header", { className: "mx-meet__whiteboard-bar", children: [
-      /* @__PURE__ */ jsx4("strong", { className: "mx-meet__panel-title", children: "Whiteboard" }),
-      /* @__PURE__ */ jsx4("div", { className: "mx-meet__pills", role: "group", "aria-label": "Tool", children: [
-        ["pen", "Pen", /* @__PURE__ */ jsx4(PencilIcon, { width: 16, height: 16 }, "p")],
-        ["highlighter", "Highlighter", /* @__PURE__ */ jsx4(HighlighterIcon, { width: 16, height: 16 }, "h")],
-        ["eraser", "Eraser \u2014 click a stroke", /* @__PURE__ */ jsx4(EraserIcon, { width: 16, height: 16 }, "e")]
-      ].map(([value, label, icon]) => /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5("strong", { className: "mx-meet__panel-title", children: "Whiteboard" }),
+      /* @__PURE__ */ jsx5("div", { className: "mx-meet__pills", role: "group", "aria-label": "Tool", children: [
+        ["pen", "Pen", /* @__PURE__ */ jsx5(PencilIcon, { width: 16, height: 16 }, "p")],
+        ["highlighter", "Highlighter", /* @__PURE__ */ jsx5(HighlighterIcon, { width: 16, height: 16 }, "h")],
+        ["eraser", "Eraser \u2014 click a stroke", /* @__PURE__ */ jsx5(EraserIcon, { width: 16, height: 16 }, "e")]
+      ].map(([value, label, icon]) => /* @__PURE__ */ jsx5(
         "button",
         {
           type: "button",
@@ -2232,7 +2271,7 @@ function WhiteboardPanel({ onClose }) {
         },
         value
       )) }),
-      /* @__PURE__ */ jsx4("div", { className: "mx-meet__swatches", role: "group", "aria-label": "Color", children: INK.map((ink) => /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5("div", { className: "mx-meet__swatches", role: "group", "aria-label": "Color", children: INK.map((ink) => /* @__PURE__ */ jsx5(
         "button",
         {
           type: "button",
@@ -2247,7 +2286,7 @@ function WhiteboardPanel({ onClose }) {
         },
         ink
       )) }),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5(
         ControlButton,
         {
           label: "Undo my last stroke",
@@ -2255,14 +2294,14 @@ function WhiteboardPanel({ onClose }) {
             const last = mine[mine.length - 1];
             if (last !== void 0) void act({ action: "stroke_erase", itemId: last.id }).then((r) => r.ok ? void 0 : show(r));
           },
-          children: /* @__PURE__ */ jsx4(UndoIcon, { width: 16, height: 16 })
+          children: /* @__PURE__ */ jsx5(UndoIcon, { width: 16, height: 16 })
         }
       ),
-      isHost && strokes.length > 0 ? /* @__PURE__ */ jsx4("button", { type: "button", className: "mx-meet__chip", onClick: () => void act({ action: "whiteboard_clear" }).then(show), children: "Clear board" }) : null,
-      /* @__PURE__ */ jsx4("span", { className: "mx-meet__whiteboard-note", children: "Saved with the meeting" }),
-      /* @__PURE__ */ jsx4(ControlButton, { label: "Close whiteboard", onClick: onClose, children: /* @__PURE__ */ jsx4(CloseIcon, { width: 16, height: 16 }) })
+      isHost && strokes.length > 0 ? /* @__PURE__ */ jsx5("button", { type: "button", className: "mx-meet__chip", onClick: () => void act({ action: "whiteboard_clear" }).then(show), children: "Clear board" }) : null,
+      /* @__PURE__ */ jsx5("span", { className: "mx-meet__whiteboard-note", children: "Saved with the meeting" }),
+      /* @__PURE__ */ jsx5(ControlButton, { label: "Close whiteboard", onClick: onClose, children: /* @__PURE__ */ jsx5(CloseIcon, { width: 16, height: 16 }) })
     ] }),
-    /* @__PURE__ */ jsx4(Notice, { notice }),
+    /* @__PURE__ */ jsx5(Notice, { notice }),
     /* @__PURE__ */ jsxs2(
       "svg",
       {
@@ -2287,8 +2326,8 @@ function WhiteboardPanel({ onClose }) {
         onPointerUp: finish,
         onPointerCancel: finish,
         children: [
-          /* @__PURE__ */ jsx4("rect", { x: 0, y: 0, width: BOARD_W, height: BOARD_H, className: "mx-meet__board-paper" }),
-          strokes.map((stroke) => /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5("rect", { x: 0, y: 0, width: BOARD_W, height: BOARD_H, className: "mx-meet__board-paper" }),
+          strokes.map((stroke) => /* @__PURE__ */ jsx5(
             StrokeView,
             {
               stroke,
@@ -2296,8 +2335,8 @@ function WhiteboardPanel({ onClose }) {
             },
             stroke.id
           )),
-          pending.map((stroke) => /* @__PURE__ */ jsx4(StrokeView, { stroke }, stroke.id)),
-          drawing !== null ? /* @__PURE__ */ jsx4(
+          pending.map((stroke) => /* @__PURE__ */ jsx5(StrokeView, { stroke }, stroke.id)),
+          drawing !== null ? /* @__PURE__ */ jsx5(
             StrokeView,
             {
               stroke: {
@@ -2354,8 +2393,8 @@ function BreakoutSetup() {
   const nameOf = (identity) => people.find((p) => p.identity === identity)?.displayName ?? identity;
   return /* @__PURE__ */ jsxs2("div", { className: "mx-meet__collab-card", children: [
     /* @__PURE__ */ jsxs2("label", { className: "mx-meet__field", children: [
-      /* @__PURE__ */ jsx4("span", { className: "mx-meet__field-label", children: "Rooms" }),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5("span", { className: "mx-meet__field-label", children: "Rooms" }),
+      /* @__PURE__ */ jsx5(
         "input",
         {
           className: "mx-meet__input",
@@ -2367,11 +2406,11 @@ function BreakoutSetup() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx4("div", { className: "mx-meet__pills", role: "group", "aria-label": "How people are placed", children: [
+    /* @__PURE__ */ jsx5("div", { className: "mx-meet__pills", role: "group", "aria-label": "How people are placed", children: [
       ["auto", "Automatically"],
       ["manual", "Manually"],
       ["choose", "Let people choose"]
-    ].map(([value, label]) => /* @__PURE__ */ jsx4(
+    ].map(([value, label]) => /* @__PURE__ */ jsx5(
       "button",
       {
         type: "button",
@@ -2383,8 +2422,8 @@ function BreakoutSetup() {
       value
     )) }),
     /* @__PURE__ */ jsxs2("label", { className: "mx-meet__field", children: [
-      /* @__PURE__ */ jsx4("span", { className: "mx-meet__field-label", children: "Timer (minutes, 0 for none)" }),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5("span", { className: "mx-meet__field-label", children: "Timer (minutes, 0 for none)" }),
+      /* @__PURE__ */ jsx5(
         "input",
         {
           className: "mx-meet__input",
@@ -2396,8 +2435,8 @@ function BreakoutSetup() {
         }
       )
     ] }),
-    mode === "manual" ? people.length === 0 ? /* @__PURE__ */ jsx4("p", { className: "mx-meet__panel-note", children: "Nobody else is in the meeting yet." }) : /* @__PURE__ */ jsx4("ul", { className: "mx-meet__people", children: people.map((person) => /* @__PURE__ */ jsxs2("li", { className: "mx-meet__person", children: [
-      /* @__PURE__ */ jsx4("span", { className: "mx-meet__person-name", children: person.displayName }),
+    mode === "manual" ? people.length === 0 ? /* @__PURE__ */ jsx5("p", { className: "mx-meet__panel-note", children: "Nobody else is in the meeting yet." }) : /* @__PURE__ */ jsx5("ul", { className: "mx-meet__people", children: people.map((person) => /* @__PURE__ */ jsxs2("li", { className: "mx-meet__person", children: [
+      /* @__PURE__ */ jsx5("span", { className: "mx-meet__person-name", children: person.displayName }),
       /* @__PURE__ */ jsxs2(
         "select",
         {
@@ -2406,7 +2445,7 @@ function BreakoutSetup() {
           value: manual[person.identity] ?? -1,
           onChange: (event) => setManual({ ...manual, [person.identity]: Number(event.target.value) }),
           children: [
-            /* @__PURE__ */ jsx4("option", { value: -1, children: "Main room" }),
+            /* @__PURE__ */ jsx5("option", { value: -1, children: "Main room" }),
             Array.from({ length: rooms }, (_, index) => /* @__PURE__ */ jsxs2("option", { value: index, children: [
               "Room ",
               index + 1
@@ -2414,15 +2453,15 @@ function BreakoutSetup() {
           ]
         }
       )
-    ] }, person.identity)) }) : mode === "auto" ? /* @__PURE__ */ jsx4("ul", { className: "mx-meet__breakout-rooms", children: assignment.map((members, index) => /* @__PURE__ */ jsxs2("li", { children: [
+    ] }, person.identity)) }) : mode === "auto" ? /* @__PURE__ */ jsx5("ul", { className: "mx-meet__breakout-rooms", children: assignment.map((members, index) => /* @__PURE__ */ jsxs2("li", { children: [
       /* @__PURE__ */ jsxs2("strong", { children: [
         "Room ",
         index + 1
       ] }),
       " ",
-      /* @__PURE__ */ jsx4("span", { className: "mx-meet__panel-note", children: members.length === 0 ? "empty" : members.map(nameOf).join(", ") })
-    ] }, index)) }) : /* @__PURE__ */ jsx4("p", { className: "mx-meet__panel-note", children: "Everyone picks a room from their own screen." }),
-    /* @__PURE__ */ jsx4(Notice, { notice }),
+      /* @__PURE__ */ jsx5("span", { className: "mx-meet__panel-note", children: members.length === 0 ? "empty" : members.map(nameOf).join(", ") })
+    ] }, index)) }) : /* @__PURE__ */ jsx5("p", { className: "mx-meet__panel-note", children: "Everyone picks a room from their own screen." }),
+    /* @__PURE__ */ jsx5(Notice, { notice }),
     /* @__PURE__ */ jsxs2(
       "button",
       {
@@ -2477,17 +2516,17 @@ function BreakoutRun({ plan }) {
       remaining !== null ? ` \xB7 ${clock(remaining)} left` : "",
       plan.allowChoose ? " \xB7 people choose their room" : ""
     ] }),
-    /* @__PURE__ */ jsx4("ul", { className: "mx-meet__breakout-rooms", children: plan.rooms.map((room) => {
+    /* @__PURE__ */ jsx5("ul", { className: "mx-meet__breakout-rooms", children: plan.rooms.map((room) => {
       const here = breakoutRoomId === room.id;
       const mayJoin = isHost || plan.allowChoose || mine?.id === room.id;
       return /* @__PURE__ */ jsxs2("li", { className: here ? "mx-meet__breakout-room mx-meet__breakout-room--here" : "mx-meet__breakout-room", children: [
         /* @__PURE__ */ jsxs2("div", { className: "mx-meet__collab-head", children: [
-          /* @__PURE__ */ jsx4("strong", { children: room.name }),
-          here ? /* @__PURE__ */ jsx4("span", { className: "mx-meet__collab-state", children: "You are here" }) : mayJoin ? /* @__PURE__ */ jsx4("button", { type: "button", className: "mx-meet__chip", onClick: () => void join(room.id), children: "Join" }) : null
+          /* @__PURE__ */ jsx5("strong", { children: room.name }),
+          here ? /* @__PURE__ */ jsx5("span", { className: "mx-meet__collab-state", children: "You are here" }) : mayJoin ? /* @__PURE__ */ jsx5("button", { type: "button", className: "mx-meet__chip", onClick: () => void join(room.id), children: "Join" }) : null
         ] }),
-        /* @__PURE__ */ jsx4("span", { className: "mx-meet__panel-note", children: room.identities.length === 0 ? "Nobody assigned" : room.identities.map(nameOf).join(", ") }),
-        isHost && room.identities.length > 0 ? /* @__PURE__ */ jsx4("ul", { className: "mx-meet__people", children: room.identities.map((identity) => /* @__PURE__ */ jsxs2("li", { className: "mx-meet__person", children: [
-          /* @__PURE__ */ jsx4("span", { className: "mx-meet__person-name", children: nameOf(identity) }),
+        /* @__PURE__ */ jsx5("span", { className: "mx-meet__panel-note", children: room.identities.length === 0 ? "Nobody assigned" : room.identities.map(nameOf).join(", ") }),
+        isHost && room.identities.length > 0 ? /* @__PURE__ */ jsx5("ul", { className: "mx-meet__people", children: room.identities.map((identity) => /* @__PURE__ */ jsxs2("li", { className: "mx-meet__person", children: [
+          /* @__PURE__ */ jsx5("span", { className: "mx-meet__person-name", children: nameOf(identity) }),
           /* @__PURE__ */ jsxs2(
             "select",
             {
@@ -2500,15 +2539,15 @@ function BreakoutRun({ plan }) {
                 roomId: event.target.value === "" ? null : event.target.value
               }).then(show),
               children: [
-                /* @__PURE__ */ jsx4("option", { value: "", children: "Main room" }),
-                plan.rooms.map((option) => /* @__PURE__ */ jsx4("option", { value: option.id, children: option.name }, option.id))
+                /* @__PURE__ */ jsx5("option", { value: "", children: "Main room" }),
+                plan.rooms.map((option) => /* @__PURE__ */ jsx5("option", { value: option.id, children: option.name }, option.id))
               ]
             }
           )
         ] }, identity)) }) : null
       ] }, room.id);
     }) }),
-    breakoutRoomId !== null ? /* @__PURE__ */ jsx4("button", { type: "button", className: "mx-meet__chip", onClick: () => void join(null), children: "Return to the main room" }) : null,
+    breakoutRoomId !== null ? /* @__PURE__ */ jsx5("button", { type: "button", className: "mx-meet__chip", onClick: () => void join(null), children: "Return to the main room" }) : null,
     isHost ? /* @__PURE__ */ jsxs2(
       "form",
       {
@@ -2523,7 +2562,7 @@ function BreakoutRun({ plan }) {
           });
         },
         children: [
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5(
             "input",
             {
               className: "mx-meet__input",
@@ -2534,12 +2573,12 @@ function BreakoutRun({ plan }) {
               "aria-label": "Message every room"
             }
           ),
-          /* @__PURE__ */ jsx4("button", { type: "submit", className: "mx-meet__send", disabled: broadcast.trim().length === 0, children: "Send" })
+          /* @__PURE__ */ jsx5("button", { type: "submit", className: "mx-meet__send", disabled: broadcast.trim().length === 0, children: "Send" })
         ]
       }
     ) : null,
-    /* @__PURE__ */ jsx4(Notice, { notice }),
-    isHost ? /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(Notice, { notice }),
+    isHost ? /* @__PURE__ */ jsx5(
       "button",
       {
         type: "button",
@@ -2554,8 +2593,8 @@ function BreakoutsPanel({ onClose }) {
   const { collab, isHost } = useCollab();
   const plan = collab?.breakout?.state === "open" ? collab.breakout : null;
   return /* @__PURE__ */ jsxs2(PanelShell, { title: "Breakout rooms", onClose, children: [
-    collab?.error != null ? /* @__PURE__ */ jsx4("p", { className: "mx-meet__panel-note mx-meet__collab-error", children: collab.error }) : null,
-    plan !== null ? /* @__PURE__ */ jsx4(BreakoutRun, { plan }) : isHost ? /* @__PURE__ */ jsx4(BreakoutSetup, {}) : /* @__PURE__ */ jsx4("p", { className: "mx-meet__panel-note", children: "Breakout rooms are closed." })
+    collab?.error != null ? /* @__PURE__ */ jsx5("p", { className: "mx-meet__panel-note mx-meet__collab-error", children: collab.error }) : null,
+    plan !== null ? /* @__PURE__ */ jsx5(BreakoutRun, { plan }) : isHost ? /* @__PURE__ */ jsx5(BreakoutSetup, {}) : /* @__PURE__ */ jsx5("p", { className: "mx-meet__panel-note", children: "Breakout rooms are closed." })
   ] });
 }
 function BreakoutBanner() {
@@ -2590,16 +2629,16 @@ function BreakoutBanner() {
   const room = open?.rooms.find((r) => r.id === breakoutRoomId) ?? null;
   if (open === null && failure === null) return null;
   return /* @__PURE__ */ jsxs2("div", { className: "mx-meet__breakout-banner", role: "status", children: [
-    failure !== null ? /* @__PURE__ */ jsx4("span", { className: "mx-meet__collab-error", children: failure }) : null,
+    failure !== null ? /* @__PURE__ */ jsx5("span", { className: "mx-meet__collab-error", children: failure }) : null,
     room !== null ? /* @__PURE__ */ jsxs2("span", { children: [
-      /* @__PURE__ */ jsx4("strong", { children: room.name }),
+      /* @__PURE__ */ jsx5("strong", { children: room.name }),
       remaining !== null ? ` \xB7 ${clock(remaining)} left` : "",
-      /* @__PURE__ */ jsx4("button", { type: "button", className: "mx-meet__chip", onClick: () => void moveTo(null), children: "Return to main room" })
+      /* @__PURE__ */ jsx5("button", { type: "button", className: "mx-meet__chip", onClick: () => void moveTo(null), children: "Return to main room" })
     ] }) : assigned !== null ? /* @__PURE__ */ jsxs2("span", { children: [
       "You are assigned to ",
-      /* @__PURE__ */ jsx4("strong", { children: assigned.name }),
+      /* @__PURE__ */ jsx5("strong", { children: assigned.name }),
       remaining !== null ? ` \xB7 ${clock(remaining)} left` : "",
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5(
         "button",
         {
           type: "button",
@@ -2611,7 +2650,7 @@ function BreakoutBanner() {
           children: "Join"
         }
       )
-    ] }) : open?.allowChoose ? /* @__PURE__ */ jsx4("span", { children: "Breakout rooms are open \u2014 pick one under Activities." }) : null,
+    ] }) : open?.allowChoose ? /* @__PURE__ */ jsx5("span", { children: "Breakout rooms are open \u2014 pick one under Activities." }) : null,
     showBroadcast ? /* @__PURE__ */ jsxs2("span", { className: "mx-meet__breakout-broadcast", children: [
       /* @__PURE__ */ jsxs2("strong", { children: [
         broadcast.by,
@@ -2619,7 +2658,7 @@ function BreakoutBanner() {
       ] }),
       " ",
       broadcast.text,
-      /* @__PURE__ */ jsx4("button", { type: "button", className: "mx-meet__link", onClick: () => setDismissedBroadcast(broadcast.at), children: "Dismiss" })
+      /* @__PURE__ */ jsx5("button", { type: "button", className: "mx-meet__link", onClick: () => setDismissedBroadcast(broadcast.at), children: "Dismiss" })
     ] }) : null
   ] });
 }
@@ -2635,7 +2674,7 @@ function CaptionLanguageSettings() {
   const choices = CAPTION_LANGUAGES.some((l) => l.tag === preferred) ? CAPTION_LANGUAGES : [{ tag: preferred, name: preferred }, ...CAPTION_LANGUAGES];
   return /* @__PURE__ */ jsxs2("section", { className: "mx-meet__section", "aria-label": "Captions", children: [
     /* @__PURE__ */ jsxs2("label", { className: "mx-meet__field", children: [
-      /* @__PURE__ */ jsx4("span", { className: "mx-meet__field-label", children: "Translate captions to" }),
+      /* @__PURE__ */ jsx5("span", { className: "mx-meet__field-label", children: "Translate captions to" }),
       /* @__PURE__ */ jsxs2(
         "select",
         {
@@ -2646,29 +2685,29 @@ function CaptionLanguageSettings() {
             setCaptionLanguage(host.store, next);
           },
           children: [
-            /* @__PURE__ */ jsx4("option", { value: "", children: "Off \u2014 as spoken" }),
+            /* @__PURE__ */ jsx5("option", { value: "", children: "Off \u2014 as spoken" }),
             current === "" ? /* @__PURE__ */ jsxs2("option", { value: preferred, children: [
               choices.find((c) => c.tag === preferred)?.name ?? preferred,
               " (yours)"
             ] }) : null,
-            choices.filter((choice) => current !== "" || choice.tag !== preferred).map((choice) => /* @__PURE__ */ jsx4("option", { value: choice.tag, children: choice.name }, choice.tag))
+            choices.filter((choice) => current !== "" || choice.tag !== preferred).map((choice) => /* @__PURE__ */ jsx5("option", { value: choice.tag, children: choice.name }, choice.tag))
           ]
         }
       )
     ] }),
-    collab?.captionTranslationError != null ? /* @__PURE__ */ jsx4("p", { className: "mx-meet__panel-note mx-meet__collab-error", children: collab.captionTranslationError }) : null
+    collab?.captionTranslationError != null ? /* @__PURE__ */ jsx5("p", { className: "mx-meet__panel-note mx-meet__collab-error", children: collab.captionTranslationError }) : null
   ] });
 }
 
 // src/skins/meet/components.tsx
-import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function InertNotice({ what }) {
   return /* @__PURE__ */ jsxs3("div", { className: "mx-meet__empty", role: "status", children: [
     /* @__PURE__ */ jsxs3("p", { className: "mx-meet__empty-title", children: [
       what,
       " is not ready yet"
     ] }),
-    /* @__PURE__ */ jsx5("p", { className: "mx-meet__empty-body", children: "Calls and meetings need a signed-in identity and an active organization. This will appear as soon as they resolve." })
+    /* @__PURE__ */ jsx6("p", { className: "mx-meet__empty-body", children: "Calls and meetings need a signed-in identity and an active organization. This will appear as soon as they resolve." })
   ] });
 }
 function Avatar({
@@ -2678,7 +2717,7 @@ function Avatar({
 }) {
   const tint = avatarPaletteIndex(name);
   if (url != null && url.length > 0) {
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx6(
       "img",
       {
         className: "mx-meet__avatar",
@@ -2690,7 +2729,7 @@ function Avatar({
       }
     );
   }
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "span",
     {
       className: "mx-meet__avatar mx-meet__avatar--initials",
@@ -2712,7 +2751,7 @@ function ControlButton({
   onClick,
   children
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "button",
     {
       type: "button",
@@ -2738,7 +2777,7 @@ function RecordingIndicator() {
       role: "status",
       "aria-live": "polite",
       children: [
-        /* @__PURE__ */ jsx5(RecordIcon, { width: 10, height: 10 }),
+        /* @__PURE__ */ jsx6(RecordIcon, { width: 10, height: 10 }),
         label
       ]
     }
@@ -2746,15 +2785,16 @@ function RecordingIndicator() {
 }
 function ConnectionDot({ quality }) {
   if (quality === "excellent" || quality === "good" || quality === "unknown") return null;
-  return /* @__PURE__ */ jsx5("span", { className: `mx-meet__quality mx-meet__quality--${quality}`, title: `Connection ${quality}`, children: /* @__PURE__ */ jsx5(WifiLowIcon, { width: 14, height: 14 }) });
+  return /* @__PURE__ */ jsx6("span", { className: `mx-meet__quality mx-meet__quality--${quality}`, title: `Connection ${quality}`, children: /* @__PURE__ */ jsx6(WifiLowIcon, { width: 14, height: 14 }) });
 }
 function RoleBadge({
   role,
   standing
 }) {
-  if (role === "host") return /* @__PURE__ */ jsx5("span", { className: "mx-meet__badge", children: "Host" });
-  if (role === "cohost") return /* @__PURE__ */ jsx5("span", { className: "mx-meet__badge", children: "Co-host" });
-  if (isLinkFollower(standing)) return /* @__PURE__ */ jsx5("span", { className: "mx-meet__badge", children: "Guest" });
+  if (role === "host") return /* @__PURE__ */ jsx6("span", { className: "mx-meet__badge", children: "Host" });
+  if (role === "cohost") return /* @__PURE__ */ jsx6("span", { className: "mx-meet__badge", children: "Co-host" });
+  if (isObserverRole(role)) return /* @__PURE__ */ jsx6("span", { className: "mx-meet__badge", "data-meet-observing": "", children: "Observing" });
+  if (isLinkFollower(standing)) return /* @__PURE__ */ jsx6("span", { className: "mx-meet__badge", children: "Guest" });
   return null;
 }
 function ParticipantTile({
@@ -2784,7 +2824,7 @@ function ParticipantTile({
       "data-identity": participant.identity,
       ...participantAttributes(participant),
       children: [
-        showVideo ? /* @__PURE__ */ jsx5(
+        showVideo ? /* @__PURE__ */ jsx6(
           "video",
           {
             ref: videoRef,
@@ -2793,43 +2833,43 @@ function ParticipantTile({
             playsInline: true,
             muted: participant.isLocal
           }
-        ) : /* @__PURE__ */ jsx5("div", { className: "mx-meet__tile-placeholder", children: /* @__PURE__ */ jsx5(Avatar, { name: participant.displayName, url: participant.avatarUrl, size: featured ? 96 : 56 }) }),
+        ) : /* @__PURE__ */ jsx6("div", { className: "mx-meet__tile-placeholder", children: /* @__PURE__ */ jsx6(Avatar, { name: participant.displayName, url: participant.avatarUrl, size: featured ? 96 : 56 }) }),
         participant.handRaised ? /* @__PURE__ */ jsxs3("span", { className: "mx-meet__tile-hand", title: `Hand raised \xB7 ${ordinal(handPosition)} in line`, children: [
-          /* @__PURE__ */ jsx5(HandIcon, { width: 14, height: 14 }),
+          /* @__PURE__ */ jsx6(HandIcon, { width: 14, height: 14 }),
           handPosition > 0 ? handPosition : null
         ] }) : null,
         /* @__PURE__ */ jsxs3("div", { className: "mx-meet__tile-bar", children: [
           /* @__PURE__ */ jsxs3("span", { className: "mx-meet__tile-name", children: [
-            spotlit ? /* @__PURE__ */ jsx5("span", { title: "Spotlighted for everyone", className: "mx-meet__tile-flag", children: /* @__PURE__ */ jsx5(SpotlightIcon, { width: 12, height: 12 }) }) : null,
+            spotlit ? /* @__PURE__ */ jsx6("span", { title: "Spotlighted for everyone", className: "mx-meet__tile-flag", children: /* @__PURE__ */ jsx6(SpotlightIcon, { width: 12, height: 12 }) }) : null,
             participant.displayName,
             participant.isLocal ? " (you)" : "",
-            participant.isAgent ? /* @__PURE__ */ jsx5("span", { className: "mx-meet__badge", children: "AI" }) : null,
-            /* @__PURE__ */ jsx5(RoleBadge, { role: participant.role, standing: participant.standing })
+            participant.isAgent ? /* @__PURE__ */ jsx6("span", { className: "mx-meet__badge", children: "AI" }) : null,
+            /* @__PURE__ */ jsx6(RoleBadge, { role: participant.role, standing: participant.standing })
           ] }),
-          !participant.micEnabled ? /* @__PURE__ */ jsx5(MicOffIcon, { width: 14, height: 14 }) : null,
-          /* @__PURE__ */ jsx5(QualityBars, { quality: participant.quality })
+          !participant.micEnabled ? /* @__PURE__ */ jsx6(MicOffIcon, { width: 14, height: 14 }) : null,
+          /* @__PURE__ */ jsx6(QualityBars, { quality: participant.quality })
         ] }),
         /* @__PURE__ */ jsxs3("div", { className: menu ? "mx-meet__tile-actions mx-meet__tile-actions--open" : "mx-meet__tile-actions", children: [
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             ControlButton,
             {
               label: pinnedHere ? "Unpin" : `Pin ${participant.displayName} for me`,
               active: pinnedHere,
               onClick: () => host?.engine.pin(pinnedHere ? null : participant.identity),
-              children: /* @__PURE__ */ jsx5(PinIcon, { width: 16, height: 16 })
+              children: /* @__PURE__ */ jsx6(PinIcon, { width: 16, height: 16 })
             }
           ),
           /* @__PURE__ */ jsxs3("span", { className: "mx-meet__anchor", children: [
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx6(
               ControlButton,
               {
                 label: `More for ${participant.displayName}`,
                 active: menu,
                 onClick: () => setMenu(!menu),
-                children: /* @__PURE__ */ jsx5(MoreIcon, { width: 16, height: 16 })
+                children: /* @__PURE__ */ jsx6(MoreIcon, { width: 16, height: 16 })
               }
             ),
-            menu ? /* @__PURE__ */ jsx5(PersonMenu, { participant, onClose: () => setMenu(false), placement: "down" }) : null
+            menu ? /* @__PURE__ */ jsx6(PersonMenu, { participant, onClose: () => setMenu(false), placement: "down" }) : null
           ] })
         ] })
       ]
@@ -2845,25 +2885,25 @@ function QualityBars({ quality }) {
   if (quality === "unknown") return null;
   const bars = quality === "excellent" ? 3 : quality === "good" ? 2 : quality === "poor" ? 1 : 0;
   const label = quality === "lost" ? "Connection lost" : quality === "poor" ? "Poor connection" : `Connection ${quality}`;
-  return /* @__PURE__ */ jsx5("span", { className: `mx-meet__signal mx-meet__signal--${quality}`, title: label, "aria-label": label, role: "img", children: /* @__PURE__ */ jsx5(SignalIcon, { bars, width: 14, height: 14 }) });
+  return /* @__PURE__ */ jsx6("span", { className: `mx-meet__signal mx-meet__signal--${quality}`, title: label, "aria-label": label, role: "img", children: /* @__PURE__ */ jsx6(SignalIcon, { bars, width: 14, height: 14 }) });
 }
 function Stage({ pageSize }) {
   const stage = useStage(pageSize);
   const columns = gridColumns(stage.tiles.length);
   if (stage.feature === null && stage.tiles.length === 0) {
     return /* @__PURE__ */ jsxs3("div", { className: "mx-meet__stage mx-meet__stage--empty", children: [
-      /* @__PURE__ */ jsx5("p", { className: "mx-meet__empty-title", children: "Waiting for others to join" }),
-      /* @__PURE__ */ jsx5("p", { className: "mx-meet__empty-body", children: "Share the meeting link and people can join from anywhere \u2014 no account needed." })
+      /* @__PURE__ */ jsx6("p", { className: "mx-meet__empty-title", children: "Waiting for others to join" }),
+      /* @__PURE__ */ jsx6("p", { className: "mx-meet__empty-body", children: "Share the meeting link and people can join from anywhere \u2014 no account needed." })
     ] });
   }
   return /* @__PURE__ */ jsxs3("div", { className: `mx-meet__stage${stage.feature !== null ? " mx-meet__stage--speaker" : ""}`, children: [
-    stage.feature !== null ? /* @__PURE__ */ jsx5(ParticipantTile, { participant: stage.feature, featured: true }) : null,
-    /* @__PURE__ */ jsx5(
+    stage.feature !== null ? /* @__PURE__ */ jsx6(ParticipantTile, { participant: stage.feature, featured: true }) : null,
+    /* @__PURE__ */ jsx6(
       "div",
       {
         className: "mx-meet__grid",
         style: { "--mx-meet-columns": columns },
-        children: stage.tiles.map((participant) => /* @__PURE__ */ jsx5(ParticipantTile, { participant }, participant.identity))
+        children: stage.tiles.map((participant) => /* @__PURE__ */ jsx6(ParticipantTile, { participant }, participant.identity))
       }
     ),
     stage.overflow > 0 ? /* @__PURE__ */ jsxs3("p", { className: "mx-meet__overflow", children: [
@@ -2889,6 +2929,13 @@ function ControlBar({ onLeave }) {
   const micUnavailable = useLocalMedia().microphone.unavailable;
   const unread = useUnreadChat(panel === "chat");
   const [whiteboard, setWhiteboard] = useState4(false);
+  const app = useMeetAppPanel();
+  const appOpened = useRef6(false);
+  useEffect6(() => {
+    if (app === null || appOpened.current) return;
+    appOpened.current = true;
+    setPanel("app");
+  }, [app]);
   const toggle = (next) => setPanel(panel === next ? "none" : next);
   const openActivity = (activity) => {
     if (activity === "whiteboard") setWhiteboard(true);
@@ -2916,10 +2963,10 @@ function ControlBar({ onLeave }) {
   });
   const hasSpotlight = snapshot?.spotlight !== null && snapshot?.spotlight !== void 0;
   return /* @__PURE__ */ jsxs3(Fragment, { children: [
-    /* @__PURE__ */ jsx5(MeetingOverlays, {}),
-    shortcuts ? /* @__PURE__ */ jsx5(ShortcutsSheet, { onClose: () => setShortcuts(false) }) : null,
-    panel === "chat" ? /* @__PURE__ */ jsx5(ChatPanel, { onClose: () => setPanel("none"), to: chatTo, onTo: setChatTo }) : null,
-    panel === "people" ? /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(MeetingOverlays, {}),
+    shortcuts ? /* @__PURE__ */ jsx6(ShortcutsSheet, { onClose: () => setShortcuts(false) }) : null,
+    panel === "chat" ? /* @__PURE__ */ jsx6(ChatPanel, { onClose: () => setPanel("none"), to: chatTo, onTo: setChatTo }) : null,
+    panel === "people" ? /* @__PURE__ */ jsx6(
       PeoplePanel,
       {
         onClose: () => setPanel("none"),
@@ -2929,53 +2976,61 @@ function ControlBar({ onLeave }) {
         }
       }
     ) : null,
-    panel === "ai" ? /* @__PURE__ */ jsx5(AiPanel, { onClose: () => setPanel("none") }) : null,
-    panel === "settings" ? /* @__PURE__ */ jsx5(SettingsPanel, { onClose: () => setPanel("none") }) : null,
-    panel === "polls" ? /* @__PURE__ */ jsx5(PollsPanel, { onClose: () => setPanel("none") }) : null,
-    panel === "qa" ? /* @__PURE__ */ jsx5(QaPanel, { onClose: () => setPanel("none") }) : null,
-    panel === "breakouts" ? /* @__PURE__ */ jsx5(BreakoutsPanel, { onClose: () => setPanel("none") }) : null,
-    whiteboard ? /* @__PURE__ */ jsx5(WhiteboardPanel, { onClose: () => setWhiteboard(false) }) : null,
-    /* @__PURE__ */ jsx5(BreakoutBanner, {}),
-    controls.notice !== null && panel !== "people" ? /* @__PURE__ */ jsx5(Toast, { text: controls.notice.text, failed: controls.notice.failed, onDone: controls.clearNotice }) : null,
+    panel === "ai" ? /* @__PURE__ */ jsx6(AiPanel, { onClose: () => setPanel("none") }) : null,
+    panel === "settings" ? /* @__PURE__ */ jsx6(SettingsPanel, { onClose: () => setPanel("none") }) : null,
+    panel === "polls" ? /* @__PURE__ */ jsx6(PollsPanel, { onClose: () => setPanel("none") }) : null,
+    panel === "qa" ? /* @__PURE__ */ jsx6(QaPanel, { onClose: () => setPanel("none") }) : null,
+    panel === "breakouts" ? /* @__PURE__ */ jsx6(BreakoutsPanel, { onClose: () => setPanel("none") }) : null,
+    whiteboard ? /* @__PURE__ */ jsx6(WhiteboardPanel, { onClose: () => setWhiteboard(false) }) : null,
+    panel === "app" && app !== null ? /* @__PURE__ */ jsx6(PanelShell, { title: app.title, onClose: () => setPanel("none"), children: /* @__PURE__ */ jsx6("div", { className: "mx-meet__app-panel", "data-meet-app-panel": app.panel.key, children: /* @__PURE__ */ jsx6(
+      app.Component,
+      {
+        recordId: app.panel.recordId,
+        organizationId: app.organizationId,
+        panelKey: app.panel.key
+      }
+    ) }) }) : null,
+    /* @__PURE__ */ jsx6(BreakoutBanner, {}),
+    controls.notice !== null && panel !== "people" ? /* @__PURE__ */ jsx6(Toast, { text: controls.notice.text, failed: controls.notice.failed, onDone: controls.clearNotice }) : null,
     /* @__PURE__ */ jsxs3("div", { className: "mx-meet__controls", children: [
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6(
         ControlButton,
         {
           label: micUnavailable !== null ? `Unmute \u2014 ${micUnavailable.remedy}` : room.local?.micEnabled === true ? "Mute (\u2318D)" : "Unmute (\u2318D)",
           active: room.local?.micEnabled === true,
           onClick: () => void room.toggleMicrophone(),
-          children: room.local?.micEnabled === true ? /* @__PURE__ */ jsx5(MicIcon, {}) : /* @__PURE__ */ jsx5(MicOffIcon, {})
+          children: room.local?.micEnabled === true ? /* @__PURE__ */ jsx6(MicIcon, {}) : /* @__PURE__ */ jsx6(MicOffIcon, {})
         }
       ),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6(
         ControlButton,
         {
           label: room.local?.cameraEnabled === true ? "Stop video (\u2318E)" : "Start video (\u2318E)",
           active: room.local?.cameraEnabled === true,
           onClick: () => void room.toggleCamera(),
-          children: room.local?.cameraEnabled === true ? /* @__PURE__ */ jsx5(CameraIcon, {}) : /* @__PURE__ */ jsx5(CameraOffIcon, {})
+          children: room.local?.cameraEnabled === true ? /* @__PURE__ */ jsx6(CameraIcon, {}) : /* @__PURE__ */ jsx6(CameraOffIcon, {})
         }
       ),
-      room.canShareScreen || room.local?.screenSharing === true ? /* @__PURE__ */ jsx5(
+      room.canShareScreen || room.local?.screenSharing === true ? /* @__PURE__ */ jsx6(
         ControlButton,
         {
           label: room.local?.screenSharing === true ? "Stop sharing" : "Share screen",
           active: room.local?.screenSharing === true,
           onClick: () => void room.toggleScreenShare(),
-          children: /* @__PURE__ */ jsx5(ScreenShareIcon, {})
+          children: /* @__PURE__ */ jsx6(ScreenShareIcon, {})
         }
       ) : null,
       /* @__PURE__ */ jsxs3("span", { className: "mx-meet__anchor", children: [
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           ControlButton,
           {
             label: "Send a reaction",
             active: popover === "reactions",
             onClick: () => setPopover(popover === "reactions" ? "none" : "reactions"),
-            children: /* @__PURE__ */ jsx5(SmileIcon, {})
+            children: /* @__PURE__ */ jsx6(SmileIcon, {})
           }
         ),
-        popover === "reactions" ? /* @__PURE__ */ jsx5(Popover, { label: "Reactions", onClose: () => setPopover("none"), children: /* @__PURE__ */ jsx5("div", { className: "mx-meet__emoji-bar", children: MEET_REACTIONS.map((emoji) => /* @__PURE__ */ jsx5(
+        popover === "reactions" ? /* @__PURE__ */ jsx6(Popover, { label: "Reactions", onClose: () => setPopover("none"), children: /* @__PURE__ */ jsx6("div", { className: "mx-meet__emoji-bar", children: MEET_REACTIONS.map((emoji) => /* @__PURE__ */ jsx6(
           "button",
           {
             type: "button",
@@ -2987,18 +3042,19 @@ function ControlBar({ onLeave }) {
           emoji
         )) }) }) : null
       ] }),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6(
         ControlButton,
         {
           label: room.local?.handRaised === true ? "Lower hand (\u2318\u2325H)" : "Raise hand (\u2318\u2325H)",
           active: room.local?.handRaised === true,
           onClick: () => void room.toggleHand(),
-          children: /* @__PURE__ */ jsx5(HandIcon, {})
+          children: /* @__PURE__ */ jsx6(HandIcon, {})
         }
       ),
+      app !== null ? /* @__PURE__ */ jsx6(ControlButton, { label: app.title, active: panel === "app", onClick: () => toggle("app"), children: /* @__PURE__ */ jsx6(FlagIcon, {}) }) : null,
       /* @__PURE__ */ jsxs3(ControlButton, { label: "Chat (\u2318\u2325C)", active: panel === "chat", onClick: () => toggle("chat"), children: [
-        /* @__PURE__ */ jsx5(ChatIcon, {}),
-        unread > 0 ? /* @__PURE__ */ jsx5("span", { className: "mx-meet__dot", "aria-hidden": "true" }) : null
+        /* @__PURE__ */ jsx6(ChatIcon, {}),
+        unread > 0 ? /* @__PURE__ */ jsx6("span", { className: "mx-meet__dot", "aria-hidden": "true" }) : null
       ] }),
       /* @__PURE__ */ jsxs3(
         ControlButton,
@@ -3007,32 +3063,32 @@ function ControlBar({ onLeave }) {
           active: panel === "people",
           onClick: () => toggle("people"),
           children: [
-            /* @__PURE__ */ jsx5(PeopleIcon, {}),
-            lobby.waiting.length > 0 || controls.isHost && queue.length > 0 ? /* @__PURE__ */ jsx5("span", { className: "mx-meet__dot", "aria-hidden": "true" }) : null
+            /* @__PURE__ */ jsx6(PeopleIcon, {}),
+            lobby.waiting.length > 0 || controls.isHost && queue.length > 0 ? /* @__PURE__ */ jsx6("span", { className: "mx-meet__dot", "aria-hidden": "true" }) : null
           ]
         }
       ),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6(
         ActivitiesControl,
         {
           active: whiteboard ? "whiteboard" : panel === "polls" || panel === "qa" || panel === "breakouts" ? panel : null,
           onOpen: openActivity
         }
       ),
-      /* @__PURE__ */ jsx5(AiControl, { active: panel === "ai", onToggle: () => toggle("ai") }),
-      recording.canStart ? /* @__PURE__ */ jsx5(ControlButton, { label: "Start recording", onClick: () => void recording.start(), children: /* @__PURE__ */ jsx5(RecordIcon, {}) }) : null,
-      recording.canStop ? /* @__PURE__ */ jsx5(ControlButton, { label: "Stop recording", active: true, onClick: () => void recording.stop(), children: /* @__PURE__ */ jsx5(RecordIcon, {}) }) : null,
+      /* @__PURE__ */ jsx6(AiControl, { active: panel === "ai", onToggle: () => toggle("ai") }),
+      recording.canStart ? /* @__PURE__ */ jsx6(ControlButton, { label: "Start recording", onClick: () => void recording.start(), children: /* @__PURE__ */ jsx6(RecordIcon, {}) }) : null,
+      recording.canStop ? /* @__PURE__ */ jsx6(ControlButton, { label: "Stop recording", active: true, onClick: () => void recording.stop(), children: /* @__PURE__ */ jsx6(RecordIcon, {}) }) : null,
       /* @__PURE__ */ jsxs3("span", { className: "mx-meet__anchor", children: [
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           ControlButton,
           {
             label: "More options",
             active: popover === "more" || panel === "settings",
             onClick: () => setPopover(popover === "more" ? "none" : "more"),
-            children: /* @__PURE__ */ jsx5(MoreIcon, {})
+            children: /* @__PURE__ */ jsx6(MoreIcon, {})
           }
         ),
-        popover === "more" ? /* @__PURE__ */ jsx5(Popover, { label: "More options", onClose: () => setPopover("none"), children: /* @__PURE__ */ jsxs3("div", { className: "mx-meet__menu", role: "menu", children: [
+        popover === "more" ? /* @__PURE__ */ jsx6(Popover, { label: "More options", onClose: () => setPopover("none"), children: /* @__PURE__ */ jsxs3("div", { className: "mx-meet__menu", role: "menu", children: [
           /* @__PURE__ */ jsxs3(
             MenuItem,
             {
@@ -3041,7 +3097,7 @@ function ControlBar({ onLeave }) {
                 setPanel("settings");
               },
               children: [
-                /* @__PURE__ */ jsx5(SettingsIcon, { width: 16, height: 16 }),
+                /* @__PURE__ */ jsx6(SettingsIcon, { width: 16, height: 16 }),
                 " Settings"
               ]
             }
@@ -3054,13 +3110,13 @@ function ControlBar({ onLeave }) {
                 setShortcuts(true);
               },
               children: [
-                /* @__PURE__ */ jsx5(KeyboardIcon, { width: 16, height: 16 }),
+                /* @__PURE__ */ jsx6(KeyboardIcon, { width: 16, height: 16 }),
                 " Keyboard shortcuts"
               ]
             }
           ),
           controls.isHost ? /* @__PURE__ */ jsxs3(Fragment, { children: [
-            /* @__PURE__ */ jsx5("div", { className: "mx-meet__menu-sep", role: "separator" }),
+            /* @__PURE__ */ jsx6("div", { className: "mx-meet__menu-sep", role: "separator" }),
             /* @__PURE__ */ jsxs3(
               MenuItem,
               {
@@ -3069,7 +3125,7 @@ function ControlBar({ onLeave }) {
                   void controls.run({ action: "mute_all" });
                 },
                 children: [
-                  /* @__PURE__ */ jsx5(MicOffIcon, { width: 16, height: 16 }),
+                  /* @__PURE__ */ jsx6(MicOffIcon, { width: 16, height: 16 }),
                   " Mute everyone"
                 ]
               }
@@ -3082,7 +3138,7 @@ function ControlBar({ onLeave }) {
                   void controls.run({ action: "ask_all_unmute" });
                 },
                 children: [
-                  /* @__PURE__ */ jsx5(MicIcon, { width: 16, height: 16 }),
+                  /* @__PURE__ */ jsx6(MicIcon, { width: 16, height: 16 }),
                   " Ask everyone to unmute"
                 ]
               }
@@ -3095,7 +3151,7 @@ function ControlBar({ onLeave }) {
                   void controls.run({ action: "lower_all_hands" });
                 },
                 children: [
-                  /* @__PURE__ */ jsx5(HandIcon, { width: 16, height: 16 }),
+                  /* @__PURE__ */ jsx6(HandIcon, { width: 16, height: 16 }),
                   " Lower all hands (",
                   queue.length,
                   ")"
@@ -3110,7 +3166,7 @@ function ControlBar({ onLeave }) {
                   void controls.run({ action: "spotlight", identity: null });
                 },
                 children: [
-                  /* @__PURE__ */ jsx5(SpotlightIcon, { width: 16, height: 16 }),
+                  /* @__PURE__ */ jsx6(SpotlightIcon, { width: 16, height: 16 }),
                   " Remove spotlight"
                 ]
               }
@@ -3118,7 +3174,7 @@ function ControlBar({ onLeave }) {
           ] }) : null
         ] }) }) : null
       ] }),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6(
         ControlButton,
         {
           label: "Leave",
@@ -3127,7 +3183,7 @@ function ControlBar({ onLeave }) {
             void room.leave();
             onLeave?.();
           },
-          children: /* @__PURE__ */ jsx5(PhoneOffIcon, {})
+          children: /* @__PURE__ */ jsx6(PhoneOffIcon, {})
         }
       )
     ] })
@@ -3223,14 +3279,14 @@ function Popover({
       window.removeEventListener("pointerdown", onPointer);
     };
   }, [onClose]);
-  return /* @__PURE__ */ jsx5("div", { ref, className: "mx-meet__popover", style, role: "dialog", "aria-label": label, children });
+  return /* @__PURE__ */ jsx6("div", { ref, className: "mx-meet__popover", style, role: "dialog", "aria-label": label, children });
 }
 function MenuItem({
   onSelect,
   danger = false,
   children
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "button",
     {
       type: "button",
@@ -3247,8 +3303,8 @@ function Toast({ text, failed, onDone }) {
     return () => clearTimeout(timer);
   }, [text, failed, onDone]);
   return /* @__PURE__ */ jsxs3("div", { className: failed ? "mx-meet__toast mx-meet__toast--failed" : "mx-meet__toast", role: "status", children: [
-    /* @__PURE__ */ jsx5("span", { children: text }),
-    /* @__PURE__ */ jsx5("button", { type: "button", className: "mx-meet__toast-close", "aria-label": "Dismiss", onClick: onDone, children: /* @__PURE__ */ jsx5(CloseIcon, { width: 14, height: 14 }) })
+    /* @__PURE__ */ jsx6("span", { children: text }),
+    /* @__PURE__ */ jsx6("button", { type: "button", className: "mx-meet__toast-close", "aria-label": "Dismiss", onClick: onDone, children: /* @__PURE__ */ jsx6(CloseIcon, { width: 14, height: 14 }) })
   ] });
 }
 function MeetingOverlays() {
@@ -3256,14 +3312,14 @@ function MeetingOverlays() {
   const { notice, dismiss } = useModerationNotice();
   const room = useRoom();
   return /* @__PURE__ */ jsxs3(Fragment, { children: [
-    /* @__PURE__ */ jsx5(ReactionOverlay, { reactions }),
+    /* @__PURE__ */ jsx6(ReactionOverlay, { reactions }),
     notice !== null && notice.kind !== "removed" ? (
       // A host's request ("the host is asking you to unmute"), not an error:
       // an assertive status, so it is announced at once without being filed
       // as a failure (design-system error-box census).
       /* @__PURE__ */ jsxs3("div", { className: "mx-meet__notice-bar", role: "status", "aria-live": "assertive", children: [
-        /* @__PURE__ */ jsx5("span", { children: notice.text }),
-        notice.kind === "ask-unmute" && room.local?.micEnabled !== true ? /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6("span", { children: notice.text }),
+        notice.kind === "ask-unmute" && room.local?.micEnabled !== true ? /* @__PURE__ */ jsx6(
           "button",
           {
             type: "button",
@@ -3275,7 +3331,7 @@ function MeetingOverlays() {
             children: "Unmute"
           }
         ) : null,
-        /* @__PURE__ */ jsx5("button", { type: "button", className: "mx-meet__toast-close", "aria-label": "Dismiss", onClick: dismiss, children: /* @__PURE__ */ jsx5(CloseIcon, { width: 14, height: 14 }) })
+        /* @__PURE__ */ jsx6("button", { type: "button", className: "mx-meet__toast-close", "aria-label": "Dismiss", onClick: dismiss, children: /* @__PURE__ */ jsx6(CloseIcon, { width: 14, height: 14 }) })
       ] })
     ) : null
   ] });
@@ -3288,7 +3344,7 @@ function ShortcutsSheet({ onClose }) {
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [onClose]);
-  return /* @__PURE__ */ jsx5("div", { className: "mx-meet__sheet-backdrop", onClick: onClose, children: /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsx6("div", { className: "mx-meet__sheet-backdrop", onClick: onClose, children: /* @__PURE__ */ jsxs3(
     "div",
     {
       className: "mx-meet__sheet",
@@ -3297,12 +3353,12 @@ function ShortcutsSheet({ onClose }) {
       onClick: (event) => event.stopPropagation(),
       children: [
         /* @__PURE__ */ jsxs3("header", { className: "mx-meet__panel-head", children: [
-          /* @__PURE__ */ jsx5("h2", { className: "mx-meet__panel-title", children: "Keyboard shortcuts" }),
-          /* @__PURE__ */ jsx5(ControlButton, { label: "Close", onClick: onClose, children: /* @__PURE__ */ jsx5(CloseIcon, { width: 16, height: 16 }) })
+          /* @__PURE__ */ jsx6("h2", { className: "mx-meet__panel-title", children: "Keyboard shortcuts" }),
+          /* @__PURE__ */ jsx6(ControlButton, { label: "Close", onClick: onClose, children: /* @__PURE__ */ jsx6(CloseIcon, { width: 16, height: 16 }) })
         ] }),
-        /* @__PURE__ */ jsx5("dl", { className: "mx-meet__shortcuts", children: MEET_SHORTCUTS.map((shortcut) => /* @__PURE__ */ jsxs3("div", { className: "mx-meet__shortcut", children: [
-          /* @__PURE__ */ jsx5("dt", { children: shortcut.label }),
-          /* @__PURE__ */ jsx5("dd", { children: /* @__PURE__ */ jsx5("kbd", { className: "mx-meet__kbd", children: shortcut.keys }) })
+        /* @__PURE__ */ jsx6("dl", { className: "mx-meet__shortcuts", children: MEET_SHORTCUTS.map((shortcut) => /* @__PURE__ */ jsxs3("div", { className: "mx-meet__shortcut", children: [
+          /* @__PURE__ */ jsx6("dt", { children: shortcut.label }),
+          /* @__PURE__ */ jsx6("dd", { children: /* @__PURE__ */ jsx6("kbd", { className: "mx-meet__kbd", children: shortcut.keys }) })
         ] }, shortcut.id)) })
       ]
     }
@@ -3312,7 +3368,7 @@ function AiControl({ active, onToggle }) {
   const snapshot = useMeetSnapshot();
   const meeting = snapshot?.meeting ?? null;
   if (meeting === null || !meeting.aiEnabled) return null;
-  return /* @__PURE__ */ jsx5(ControlButton, { label: "Meeting assistant", active, onClick: onToggle, children: /* @__PURE__ */ jsx5(SparklesIcon, {}) });
+  return /* @__PURE__ */ jsx6(ControlButton, { label: "Meeting assistant", active, onClick: onToggle, children: /* @__PURE__ */ jsx6(SparklesIcon, {}) });
 }
 function PanelShell({
   title,
@@ -3334,10 +3390,10 @@ function PanelShell({
   }, []);
   return /* @__PURE__ */ jsxs3("aside", { ref, className: "mx-meet__panel", "aria-label": title, children: [
     /* @__PURE__ */ jsxs3("header", { className: "mx-meet__panel-head", children: [
-      /* @__PURE__ */ jsx5("h2", { className: "mx-meet__panel-title", children: title }),
-      /* @__PURE__ */ jsx5(ControlButton, { label: "Close panel", onClick: onClose, children: /* @__PURE__ */ jsx5(CloseIcon, { width: 16, height: 16 }) })
+      /* @__PURE__ */ jsx6("h2", { className: "mx-meet__panel-title", children: title }),
+      /* @__PURE__ */ jsx6(ControlButton, { label: "Close panel", onClick: onClose, children: /* @__PURE__ */ jsx6(CloseIcon, { width: 16, height: 16 }) })
     ] }),
-    /* @__PURE__ */ jsx5("div", { className: "mx-meet__panel-body", children })
+    /* @__PURE__ */ jsx6("div", { className: "mx-meet__panel-body", children })
   ] });
 }
 function ChatPanel({
@@ -3367,9 +3423,9 @@ function ChatPanel({
   };
   return /* @__PURE__ */ jsxs3(PanelShell, { title: "Chat", onClose, children: [
     /* @__PURE__ */ jsxs3("ul", { className: "mx-meet__chat", ref: listRef, children: [
-      snapshot?.chatHistoryError != null ? /* @__PURE__ */ jsx5("li", { className: "mx-meet__panel-note", children: snapshot.chatHistoryError }) : null,
-      snapshot?.chatLoaded !== true && messages.length === 0 ? /* @__PURE__ */ jsx5("li", { className: "mx-meet__panel-note", children: "Reading earlier messages\u2026" }) : messages.length === 0 && snapshot?.chatHistoryError == null ? /* @__PURE__ */ jsx5("li", { className: "mx-meet__panel-note", children: "No messages yet. Messages to everyone stay with the meeting, so people who join later see them." }) : null,
-      messages.map((message) => /* @__PURE__ */ jsx5(ChatLine, { message, local, people }, message.id))
+      snapshot?.chatHistoryError != null ? /* @__PURE__ */ jsx6("li", { className: "mx-meet__panel-note", children: snapshot.chatHistoryError }) : null,
+      snapshot?.chatLoaded !== true && messages.length === 0 ? /* @__PURE__ */ jsx6("li", { className: "mx-meet__panel-note", children: "Reading earlier messages\u2026" }) : messages.length === 0 && snapshot?.chatHistoryError == null ? /* @__PURE__ */ jsx6("li", { className: "mx-meet__panel-note", children: "No messages yet. Messages to everyone stay with the meeting, so people who join later see them." }) : null,
+      messages.map((message) => /* @__PURE__ */ jsx6(ChatLine, { message, local, people }, message.id))
     ] }),
     /* @__PURE__ */ jsxs3(
       "form",
@@ -3392,7 +3448,7 @@ function ChatPanel({
               value: recipient ?? "",
               onChange: (event) => choose(event.target.value === "" ? null : event.target.value),
               children: [
-                /* @__PURE__ */ jsx5("option", { value: "", children: "Everyone" }),
+                /* @__PURE__ */ jsx6("option", { value: "", children: "Everyone" }),
                 people.map((participant) => /* @__PURE__ */ jsxs3("option", { value: participant.identity, children: [
                   participant.displayName,
                   " (private)"
@@ -3401,7 +3457,7 @@ function ChatPanel({
             }
           ) : null,
           /* @__PURE__ */ jsxs3("div", { className: "mx-meet__composer-row", children: [
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx6(
               "input",
               {
                 className: "mx-meet__input",
@@ -3412,7 +3468,7 @@ function ChatPanel({
                 maxLength: 4e3
               }
             ),
-            /* @__PURE__ */ jsx5("button", { type: "submit", className: "mx-meet__send", disabled: draft.trim().length === 0, children: "Send" })
+            /* @__PURE__ */ jsx6("button", { type: "submit", className: "mx-meet__send", disabled: draft.trim().length === 0, children: "Send" })
           ] }),
           recipientName !== null ? /* @__PURE__ */ jsxs3("p", { className: "mx-meet__panel-note", children: [
             "Only ",
@@ -3442,16 +3498,16 @@ function ChatLine({
       ].filter(Boolean).join(" "),
       children: [
         /* @__PURE__ */ jsxs3("span", { className: "mx-meet__chat-meta", children: [
-          /* @__PURE__ */ jsx5("strong", { children: mine ? "You" : message.displayName }),
+          /* @__PURE__ */ jsx6("strong", { children: mine ? "You" : message.displayName }),
           counterpart !== null ? /* @__PURE__ */ jsxs3("span", { className: "mx-meet__chat-private", children: [
             "to ",
             counterpart,
             " \xB7 private"
           ] }) : null,
-          /* @__PURE__ */ jsx5("time", { dateTime: message.at, children: clockOf(message.at) })
+          /* @__PURE__ */ jsx6("time", { dateTime: message.at, children: clockOf(message.at) })
         ] }),
-        /* @__PURE__ */ jsx5("span", { className: "mx-meet__chat-text", children: message.text }),
-        message.failed !== void 0 ? /* @__PURE__ */ jsx5("span", { className: "mx-meet__chat-failed", children: message.failed }) : privateTo === null && message.saved === false ? /* @__PURE__ */ jsx5("span", { className: "mx-meet__chat-pending", children: message.id.startsWith("pending-") ? "Sending\u2026" : "Not saved \u2014 people who join later will not see this" }) : null
+        /* @__PURE__ */ jsx6("span", { className: "mx-meet__chat-text", children: message.text }),
+        message.failed !== void 0 ? /* @__PURE__ */ jsx6("span", { className: "mx-meet__chat-failed", children: message.failed }) : privateTo === null && message.saved === false ? /* @__PURE__ */ jsx6("span", { className: "mx-meet__chat-pending", children: message.id.startsWith("pending-") ? "Sending\u2026" : "Not saved \u2014 people who join later will not see this" }) : null
       ]
     }
   );
@@ -3467,18 +3523,21 @@ function PeoplePanel({
   const [menuFor, setMenuFor] = useState4(null);
   const myRole = useRole();
   const local = snapshot?.localIdentity ?? null;
-  const everyone = snapshot?.participants ?? [];
+  const observersHidden = snapshot?.grants.observersVisibleTo === "hosts" && !controls.isHost;
+  const everyone = (snapshot?.participants ?? []).filter(
+    (participant) => !observersHidden || !isObserverRole(participant.role) || participant.identity === local
+  );
   const needle = query.trim().toLowerCase();
   const shown = needle.length === 0 ? everyone : everyone.filter((participant) => participant.displayName.toLowerCase().includes(needle));
   return /* @__PURE__ */ jsxs3(PanelShell, { title: `People (${everyone.length})`, onClose, children: [
-    /* @__PURE__ */ jsx5(LobbyPanel, {}),
+    /* @__PURE__ */ jsx6(LobbyPanel, {}),
     queue.length > 0 ? /* @__PURE__ */ jsxs3("section", { className: "mx-meet__section", "aria-label": "Raised hands", children: [
       /* @__PURE__ */ jsxs3("header", { className: "mx-meet__section-head", children: [
         /* @__PURE__ */ jsxs3("h3", { className: "mx-meet__section-title", children: [
           "Raised hands \xB7 ",
           queue.length
         ] }),
-        controls.isHost ? /* @__PURE__ */ jsx5(
+        controls.isHost ? /* @__PURE__ */ jsx6(
           "button",
           {
             type: "button",
@@ -3488,13 +3547,13 @@ function PeoplePanel({
           }
         ) : null
       ] }),
-      /* @__PURE__ */ jsx5("ol", { className: "mx-meet__queue", children: queue.map((participant) => /* @__PURE__ */ jsxs3("li", { className: "mx-meet__person", children: [
-        /* @__PURE__ */ jsx5(Avatar, { name: participant.displayName, url: participant.avatarUrl, size: 28 }),
+      /* @__PURE__ */ jsx6("ol", { className: "mx-meet__queue", children: queue.map((participant) => /* @__PURE__ */ jsxs3("li", { className: "mx-meet__person", children: [
+        /* @__PURE__ */ jsx6(Avatar, { name: participant.displayName, url: participant.avatarUrl, size: 28 }),
         /* @__PURE__ */ jsxs3("span", { className: "mx-meet__person-name", children: [
           participant.displayName,
-          participant.identity === local ? /* @__PURE__ */ jsx5("span", { className: "mx-meet__you", children: " (you)" }) : null
+          participant.identity === local ? /* @__PURE__ */ jsx6("span", { className: "mx-meet__you", children: " (you)" }) : null
         ] }),
-        controls.isHost || participant.identity === local ? /* @__PURE__ */ jsx5(
+        controls.isHost || participant.identity === local ? /* @__PURE__ */ jsx6(
           "button",
           {
             type: "button",
@@ -3507,7 +3566,7 @@ function PeoplePanel({
     ] }) : null,
     controls.isHost && everyone.length > 1 ? /* @__PURE__ */ jsxs3("div", { className: "mx-meet__bulk", children: [
       /* @__PURE__ */ jsxs3("button", { type: "button", className: "mx-meet__chip", onClick: () => void controls.run({ action: "mute_all" }), children: [
-        /* @__PURE__ */ jsx5(MicOffIcon, { width: 14, height: 14 }),
+        /* @__PURE__ */ jsx6(MicOffIcon, { width: 14, height: 14 }),
         " Mute all"
       ] }),
       /* @__PURE__ */ jsxs3(
@@ -3517,15 +3576,15 @@ function PeoplePanel({
           className: "mx-meet__chip",
           onClick: () => void controls.run({ action: "ask_all_unmute" }),
           children: [
-            /* @__PURE__ */ jsx5(MicIcon, { width: 14, height: 14 }),
+            /* @__PURE__ */ jsx6(MicIcon, { width: 14, height: 14 }),
             " Ask all to unmute"
           ]
         }
       )
     ] }) : null,
     everyone.length > 4 ? /* @__PURE__ */ jsxs3("label", { className: "mx-meet__search", children: [
-      /* @__PURE__ */ jsx5(SearchIcon, { width: 16, height: 16 }),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6(SearchIcon, { width: 16, height: 16 }),
+      /* @__PURE__ */ jsx6(
         "input",
         {
           className: "mx-meet__input mx-meet__input--bare",
@@ -3536,37 +3595,37 @@ function PeoplePanel({
         }
       )
     ] }) : null,
-    controls.notice !== null ? /* @__PURE__ */ jsx5("p", { className: controls.notice.failed ? "mx-meet__error" : "mx-meet__notice", role: "status", children: controls.notice.text }) : null,
+    controls.notice !== null ? /* @__PURE__ */ jsx6("p", { className: controls.notice.failed ? "mx-meet__error" : "mx-meet__notice", role: "status", children: controls.notice.text }) : null,
     /* @__PURE__ */ jsxs3("ul", { className: "mx-meet__people", children: [
       shown.map((participant) => /* @__PURE__ */ jsxs3("li", { className: "mx-meet__person", children: [
-        /* @__PURE__ */ jsx5(Avatar, { name: participant.displayName, url: participant.avatarUrl, size: 32 }),
+        /* @__PURE__ */ jsx6(Avatar, { name: participant.displayName, url: participant.avatarUrl, size: 32 }),
         /* @__PURE__ */ jsxs3("span", { className: "mx-meet__person-name", children: [
           participant.displayName,
-          participant.identity === local ? /* @__PURE__ */ jsx5("span", { className: "mx-meet__you", children: " (you)" }) : null,
-          /* @__PURE__ */ jsx5(
+          participant.identity === local ? /* @__PURE__ */ jsx6("span", { className: "mx-meet__you", children: " (you)" }) : null,
+          /* @__PURE__ */ jsx6(
             RoleBadge,
             {
               role: participant.identity === local ? myRole : participant.role,
               standing: participant.standing
             }
           ),
-          isNoteTaker(participant) ? /* @__PURE__ */ jsx5("span", { className: "mx-meet__badge", children: "Meeting assistant" }) : null,
-          snapshot?.spotlight === participant.identity ? /* @__PURE__ */ jsx5("span", { className: "mx-meet__badge", children: "Spotlight" }) : null
+          isNoteTaker(participant) ? /* @__PURE__ */ jsx6("span", { className: "mx-meet__badge", children: "Meeting assistant" }) : null,
+          snapshot?.spotlight === participant.identity ? /* @__PURE__ */ jsx6("span", { className: "mx-meet__badge", children: "Spotlight" }) : null
         ] }),
-        participant.handRaised ? /* @__PURE__ */ jsx5(HandIcon, { width: 14, height: 14 }) : null,
-        !participant.micEnabled && !isNoteTaker(participant) ? /* @__PURE__ */ jsx5(MicOffIcon, { width: 14, height: 14 }) : null,
-        /* @__PURE__ */ jsx5(QualityBars, { quality: participant.quality }),
+        participant.handRaised ? /* @__PURE__ */ jsx6(HandIcon, { width: 14, height: 14 }) : null,
+        !participant.micEnabled && !isNoteTaker(participant) ? /* @__PURE__ */ jsx6(MicOffIcon, { width: 14, height: 14 }) : null,
+        /* @__PURE__ */ jsx6(QualityBars, { quality: participant.quality }),
         /* @__PURE__ */ jsxs3("span", { className: "mx-meet__anchor", children: [
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             ControlButton,
             {
               label: `More for ${participant.displayName}`,
               active: menuFor === participant.identity,
               onClick: () => setMenuFor(menuFor === participant.identity ? null : participant.identity),
-              children: /* @__PURE__ */ jsx5(MoreIcon, { width: 16, height: 16 })
+              children: /* @__PURE__ */ jsx6(MoreIcon, { width: 16, height: 16 })
             }
           ),
-          menuFor === participant.identity ? /* @__PURE__ */ jsx5(
+          menuFor === participant.identity ? /* @__PURE__ */ jsx6(
             PersonMenu,
             {
               participant,
@@ -3583,7 +3642,7 @@ function PeoplePanel({
         "\u201D."
       ] }) : null
     ] }),
-    snapshot?.meeting !== null && snapshot?.meeting !== void 0 ? /* @__PURE__ */ jsx5(GuestRecordAccessControl, { meeting: snapshot.meeting }) : null
+    snapshot?.meeting !== null && snapshot?.meeting !== void 0 ? /* @__PURE__ */ jsx6(GuestRecordAccessControl, { meeting: snapshot.meeting }) : null
   ] });
 }
 function PersonMenu({
@@ -3610,10 +3669,10 @@ function PersonMenu({
       else setRefused(true);
     });
   };
-  const refusal = refused && controls.notice?.failed === true ? /* @__PURE__ */ jsx5(ErrorBox, { as: "p", className: "mx-meet__error", message: controls.notice.text, operation: "Change this participant", origin: "meet/components", children: controls.notice.text }) : null;
+  const refusal = refused && controls.notice?.failed === true ? /* @__PURE__ */ jsx6(ErrorBox, { as: "p", className: "mx-meet__error", message: controls.notice.text, operation: "Change this participant", origin: "meet/components", children: controls.notice.text }) : null;
   if (mode === "rename" || mode === "report") {
     const renaming = mode === "rename";
-    return /* @__PURE__ */ jsx5(Popover, { label: renaming ? "Rename" : "Report", onClose, placement, children: /* @__PURE__ */ jsxs3(
+    return /* @__PURE__ */ jsx6(Popover, { label: renaming ? "Rename" : "Report", onClose, placement, children: /* @__PURE__ */ jsxs3(
       "form",
       {
         className: "mx-meet__menu-form",
@@ -3626,8 +3685,8 @@ function PersonMenu({
         },
         children: [
           /* @__PURE__ */ jsxs3("label", { className: "mx-meet__field", children: [
-            /* @__PURE__ */ jsx5("span", { className: "mx-meet__field-label", children: renaming ? "Name shown in this meeting" : `What did ${participant.displayName} do?` }),
-            renaming ? /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx6("span", { className: "mx-meet__field-label", children: renaming ? "Name shown in this meeting" : `What did ${participant.displayName} do?` }),
+            renaming ? /* @__PURE__ */ jsx6(
               "input",
               {
                 className: "mx-meet__input",
@@ -3636,7 +3695,7 @@ function PersonMenu({
                 value: text,
                 onChange: (event) => setText(event.target.value)
               }
-            ) : /* @__PURE__ */ jsx5(
+            ) : /* @__PURE__ */ jsx6(
               "textarea",
               {
                 className: "mx-meet__input",
@@ -3650,8 +3709,8 @@ function PersonMenu({
           ] }),
           refusal,
           /* @__PURE__ */ jsxs3("div", { className: "mx-meet__menu-actions", children: [
-            /* @__PURE__ */ jsx5("button", { type: "button", className: "mx-meet__link", onClick: () => setMode("menu"), children: "Back" }),
-            /* @__PURE__ */ jsx5("button", { type: "submit", className: "mx-meet__send", disabled: text.trim().length === 0 || controls.busy, children: renaming ? "Rename" : "Report" })
+            /* @__PURE__ */ jsx6("button", { type: "button", className: "mx-meet__link", onClick: () => setMode("menu"), children: "Back" }),
+            /* @__PURE__ */ jsx6("button", { type: "submit", className: "mx-meet__send", disabled: text.trim().length === 0 || controls.busy, children: renaming ? "Rename" : "Report" })
           ] })
         ]
       }
@@ -3659,12 +3718,12 @@ function PersonMenu({
   }
   if (mode === "remove" || mode === "transfer") {
     const removing = mode === "remove";
-    return /* @__PURE__ */ jsx5(Popover, { label: removing ? "Remove" : "Make host", onClose, placement, children: /* @__PURE__ */ jsxs3("div", { className: "mx-meet__menu-form", children: [
-      /* @__PURE__ */ jsx5("p", { className: "mx-meet__confirm-text", children: removing ? `Remove ${participant.displayName}? They leave immediately and cannot rejoin this meeting.` : `Make ${participant.displayName} the host? They get every host control and own this meeting. You stay on as a co-host.` }),
+    return /* @__PURE__ */ jsx6(Popover, { label: removing ? "Remove" : "Make host", onClose, placement, children: /* @__PURE__ */ jsxs3("div", { className: "mx-meet__menu-form", children: [
+      /* @__PURE__ */ jsx6("p", { className: "mx-meet__confirm-text", children: removing ? `Remove ${participant.displayName}? They leave immediately and cannot rejoin this meeting.` : `Make ${participant.displayName} the host? They get every host control and own this meeting. You stay on as a co-host.` }),
       refusal,
       /* @__PURE__ */ jsxs3("div", { className: "mx-meet__menu-actions", children: [
-        /* @__PURE__ */ jsx5("button", { type: "button", className: "mx-meet__link", onClick: () => setMode("menu"), children: "Cancel" }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6("button", { type: "button", className: "mx-meet__link", onClick: () => setMode("menu"), children: "Cancel" }),
+        /* @__PURE__ */ jsx6(
           "button",
           {
             type: "button",
@@ -3677,7 +3736,7 @@ function PersonMenu({
       ] })
     ] }) });
   }
-  return /* @__PURE__ */ jsx5(Popover, { label: `Options for ${participant.displayName}`, onClose, placement, children: /* @__PURE__ */ jsxs3("div", { className: "mx-meet__menu", role: "menu", children: [
+  return /* @__PURE__ */ jsx6(Popover, { label: `Options for ${participant.displayName}`, onClose, placement, children: /* @__PURE__ */ jsxs3("div", { className: "mx-meet__menu", role: "menu", children: [
     /* @__PURE__ */ jsxs3(
       MenuItem,
       {
@@ -3686,7 +3745,7 @@ function PersonMenu({
           onClose();
         },
         children: [
-          /* @__PURE__ */ jsx5(PinIcon, { width: 16, height: 16 }),
+          /* @__PURE__ */ jsx6(PinIcon, { width: 16, height: 16 }),
           " ",
           pinned ? "Unpin" : "Pin for me"
         ]
@@ -3704,39 +3763,39 @@ function PersonMenu({
           onClose();
         },
         children: [
-          /* @__PURE__ */ jsx5(ChatIcon, { width: 16, height: 16 }),
+          /* @__PURE__ */ jsx6(ChatIcon, { width: 16, height: 16 }),
           " Message privately"
         ]
       }
     ) : null,
     controls.isHost ? /* @__PURE__ */ jsxs3(MenuItem, { onSelect: () => act({ action: "spotlight", identity: spotlit ? null : participant.identity }), children: [
-      /* @__PURE__ */ jsx5(SpotlightIcon, { width: 16, height: 16 }),
+      /* @__PURE__ */ jsx6(SpotlightIcon, { width: 16, height: 16 }),
       " ",
       spotlit ? "Remove spotlight" : "Spotlight for everyone"
     ] }) : null,
     moderate ? /* @__PURE__ */ jsxs3(Fragment, { children: [
-      /* @__PURE__ */ jsx5("div", { className: "mx-meet__menu-sep", role: "separator" }),
+      /* @__PURE__ */ jsx6("div", { className: "mx-meet__menu-sep", role: "separator" }),
       participant.micEnabled ? /* @__PURE__ */ jsxs3(MenuItem, { onSelect: () => act({ action: "mute", identity: participant.identity }), children: [
-        /* @__PURE__ */ jsx5(MicOffIcon, { width: 16, height: 16 }),
+        /* @__PURE__ */ jsx6(MicOffIcon, { width: 16, height: 16 }),
         " Mute"
       ] }) : !participant.isAgent ? /* @__PURE__ */ jsxs3(MenuItem, { onSelect: () => act({ action: "ask_unmute", identity: participant.identity }), children: [
-        /* @__PURE__ */ jsx5(MicIcon, { width: 16, height: 16 }),
+        /* @__PURE__ */ jsx6(MicIcon, { width: 16, height: 16 }),
         " Ask to unmute"
       ] }) : null,
       participant.cameraEnabled ? /* @__PURE__ */ jsxs3(MenuItem, { onSelect: () => act({ action: "stop_video", identity: participant.identity }), children: [
-        /* @__PURE__ */ jsx5(CameraOffIcon, { width: 16, height: 16 }),
+        /* @__PURE__ */ jsx6(CameraOffIcon, { width: 16, height: 16 }),
         " Stop video"
       ] }) : null,
       participant.screenSharing ? /* @__PURE__ */ jsxs3(MenuItem, { onSelect: () => act({ action: "stop_screen", identity: participant.identity }), children: [
-        /* @__PURE__ */ jsx5(ScreenShareIcon, { width: 16, height: 16 }),
+        /* @__PURE__ */ jsx6(ScreenShareIcon, { width: 16, height: 16 }),
         " Stop screen share"
       ] }) : null,
       participant.handRaised ? /* @__PURE__ */ jsxs3(MenuItem, { onSelect: () => act({ action: "lower_hand", identity: participant.identity }), children: [
-        /* @__PURE__ */ jsx5(HandIcon, { width: 16, height: 16 }),
+        /* @__PURE__ */ jsx6(HandIcon, { width: 16, height: 16 }),
         " Lower hand"
       ] }) : null,
       hasAccount && !participant.isAgent && participant.role !== "cohost" ? /* @__PURE__ */ jsxs3(MenuItem, { onSelect: () => act({ action: "make_cohost", identity: participant.identity }), children: [
-        /* @__PURE__ */ jsx5(PeopleIcon, { width: 16, height: 16 }),
+        /* @__PURE__ */ jsx6(PeopleIcon, { width: 16, height: 16 }),
         " Make co-host"
       ] }) : null,
       !participant.isAgent ? /* @__PURE__ */ jsxs3(
@@ -3747,18 +3806,18 @@ function PersonMenu({
             setMode("rename");
           },
           children: [
-            /* @__PURE__ */ jsx5(PencilIcon, { width: 16, height: 16 }),
+            /* @__PURE__ */ jsx6(PencilIcon, { width: 16, height: 16 }),
             " Rename"
           ]
         }
       ) : null
     ] }) : null,
     controls.isOwner && participant.role === "cohost" ? /* @__PURE__ */ jsxs3(MenuItem, { onSelect: () => act({ action: "revoke_cohost", identity: participant.identity }), children: [
-      /* @__PURE__ */ jsx5(PeopleIcon, { width: 16, height: 16 }),
+      /* @__PURE__ */ jsx6(PeopleIcon, { width: 16, height: 16 }),
       " Remove co-host"
     ] }) : null,
     controls.isOwner && !self && hasAccount && !participant.isAgent ? /* @__PURE__ */ jsxs3(MenuItem, { onSelect: () => setMode("transfer"), children: [
-      /* @__PURE__ */ jsx5(SpotlightIcon, { width: 16, height: 16 }),
+      /* @__PURE__ */ jsx6(SpotlightIcon, { width: 16, height: 16 }),
       " Make host"
     ] }) : null,
     self ? /* @__PURE__ */ jsxs3(
@@ -3769,7 +3828,7 @@ function PersonMenu({
           setMode("rename");
         },
         children: [
-          /* @__PURE__ */ jsx5(PencilIcon, { width: 16, height: 16 }),
+          /* @__PURE__ */ jsx6(PencilIcon, { width: 16, height: 16 }),
           " Rename yourself"
         ]
       }
@@ -3782,13 +3841,13 @@ function PersonMenu({
           setMode("report");
         },
         children: [
-          /* @__PURE__ */ jsx5(FlagIcon, { width: 16, height: 16 }),
+          /* @__PURE__ */ jsx6(FlagIcon, { width: 16, height: 16 }),
           " Report"
         ]
       }
     ) : null,
     moderate && !participant.isAgent ? /* @__PURE__ */ jsxs3(MenuItem, { danger: true, onSelect: () => setMode("remove"), children: [
-      /* @__PURE__ */ jsx5(CloseIcon, { width: 16, height: 16 }),
+      /* @__PURE__ */ jsx6(CloseIcon, { width: 16, height: 16 }),
       " Remove from meeting"
     ] }) : null
   ] }) });
@@ -3796,7 +3855,7 @@ function PersonMenu({
 function SettingsPanel({ onClose }) {
   const host = useRequiredMeetHost();
   return /* @__PURE__ */ jsxs3(PanelShell, { title: "Settings", onClose, children: [
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       DeviceSettings,
       {
         onPick: (kind, deviceId) => {
@@ -3805,8 +3864,8 @@ function SettingsPanel({ onClose }) {
         }
       }
     ),
-    /* @__PURE__ */ jsx5(EffectsSettings, {}),
-    /* @__PURE__ */ jsx5(CaptionLanguageSettings, {})
+    /* @__PURE__ */ jsx6(EffectsSettings, {}),
+    /* @__PURE__ */ jsx6(CaptionLanguageSettings, {})
   ] });
 }
 function DeviceSettings({
@@ -3823,9 +3882,9 @@ function DeviceSettings({
     void host.devices.refresh();
   }, [host]);
   return /* @__PURE__ */ jsxs3("section", { className: "mx-meet__section", "aria-label": "Devices", children: [
-    /* @__PURE__ */ jsx5(DevicePicker, { kind: "audioinput", label: "Microphone", onPick }),
-    /* @__PURE__ */ jsx5("div", { className: "mx-meet__meter", role: "meter", "aria-label": "Microphone level", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(level * 100), children: /* @__PURE__ */ jsx5("span", { style: { width: `${Math.min(100, Math.round(level * 160))}%` } }) }),
-    /* @__PURE__ */ jsx5(DevicePicker, { kind: "audiooutput", label: "Speaker", onPick }),
+    /* @__PURE__ */ jsx6(DevicePicker, { kind: "audioinput", label: "Microphone", onPick }),
+    /* @__PURE__ */ jsx6("div", { className: "mx-meet__meter", role: "meter", "aria-label": "Microphone level", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(level * 100), children: /* @__PURE__ */ jsx6("span", { style: { width: `${Math.min(100, Math.round(level * 160))}%` } }) }),
+    /* @__PURE__ */ jsx6(DevicePicker, { kind: "audiooutput", label: "Speaker", onPick }),
     /* @__PURE__ */ jsxs3(
       "button",
       {
@@ -3837,13 +3896,13 @@ function DeviceSettings({
           void playTestSound(speaker).finally(() => setTesting(false));
         },
         children: [
-          /* @__PURE__ */ jsx5(SpeakerIcon, { width: 14, height: 14 }),
+          /* @__PURE__ */ jsx6(SpeakerIcon, { width: 14, height: 14 }),
           " ",
           testing ? "Playing\u2026" : "Test speaker"
         ]
       }
     ),
-    /* @__PURE__ */ jsx5(DevicePicker, { kind: "videoinput", label: "Camera", onPick })
+    /* @__PURE__ */ jsx6(DevicePicker, { kind: "videoinput", label: "Camera", onPick })
   ] });
 }
 function EffectsSettings({ preview }) {
@@ -3863,7 +3922,7 @@ function EffectsSettings({ preview }) {
   };
   return /* @__PURE__ */ jsxs3("section", { className: "mx-meet__section", "aria-label": "Effects", children: [
     /* @__PURE__ */ jsxs3("div", { className: "mx-meet__check", children: [
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6(
         Checkbox,
         {
           id: "mx-meet-noise",
@@ -3872,13 +3931,13 @@ function EffectsSettings({ preview }) {
         }
       ),
       /* @__PURE__ */ jsxs3("div", { className: "mx-meet__check-text", children: [
-        /* @__PURE__ */ jsx5(Label, { htmlFor: "mx-meet-noise", children: "Noise suppression" }),
-        /* @__PURE__ */ jsx5("span", { className: "mx-meet__hint", children: "Filters keyboards, fans and background chatter." })
+        /* @__PURE__ */ jsx6(Label, { htmlFor: "mx-meet-noise", children: "Noise suppression" }),
+        /* @__PURE__ */ jsx6("span", { className: "mx-meet__hint", children: "Filters keyboards, fans and background chatter." })
       ] })
     ] }),
     supported ? /* @__PURE__ */ jsxs3("div", { className: "mx-meet__field", children: [
-      /* @__PURE__ */ jsx5(Label, { children: "Background" }),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6(Label, { children: "Background" }),
+      /* @__PURE__ */ jsx6(
         SegmentedControl,
         {
           fullWidth: true,
@@ -3897,7 +3956,7 @@ function EffectsSettings({ preview }) {
           ]
         }
       ),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6(
         "input",
         {
           ref: fileRef,
@@ -3912,7 +3971,7 @@ function EffectsSettings({ preview }) {
           }
         }
       ),
-      error !== null ? /* @__PURE__ */ jsx5("p", { className: "mx-meet__error", children: error }) : null
+      error !== null ? /* @__PURE__ */ jsx6("p", { className: "mx-meet__error", children: error }) : null
     ] }) : null
   ] });
 }
@@ -3999,29 +4058,29 @@ function LobbyPanel() {
   if (!lobby.canAdmit || lobby.waiting.length === 0) return null;
   return /* @__PURE__ */ jsxs3("section", { className: "mx-meet__lobby", "aria-label": "Waiting room", children: [
     /* @__PURE__ */ jsxs3("header", { className: "mx-meet__lobby-head", children: [
-      /* @__PURE__ */ jsx5("h3", { className: "mx-meet__lobby-title", children: lobby.waiting.length === 1 ? "1 person is waiting" : `${lobby.waiting.length} people are waiting` }),
-      /* @__PURE__ */ jsx5("button", { type: "button", className: "mx-meet__link", onClick: () => void lobby.admitAll(), children: "Admit all" })
+      /* @__PURE__ */ jsx6("h3", { className: "mx-meet__lobby-title", children: lobby.waiting.length === 1 ? "1 person is waiting" : `${lobby.waiting.length} people are waiting` }),
+      /* @__PURE__ */ jsx6("button", { type: "button", className: "mx-meet__link", onClick: () => void lobby.admitAll(), children: "Admit all" })
     ] }),
-    /* @__PURE__ */ jsx5("ul", { className: "mx-meet__lobby-list", children: lobby.waiting.map((entry) => /* @__PURE__ */ jsxs3(
+    /* @__PURE__ */ jsx6("ul", { className: "mx-meet__lobby-list", children: lobby.waiting.map((entry) => /* @__PURE__ */ jsxs3(
       "li",
       {
         className: "mx-meet__lobby-row",
         "data-meet-lobby-entry": "",
         "data-meet-participant-name": entry.displayName,
         children: [
-          /* @__PURE__ */ jsx5(Avatar, { name: entry.displayName, url: entry.avatarUrl, size: 32 }),
+          /* @__PURE__ */ jsx6(Avatar, { name: entry.displayName, url: entry.avatarUrl, size: 32 }),
           /* @__PURE__ */ jsxs3("span", { className: "mx-meet__person-name", children: [
             entry.displayName,
-            entry.userId === null ? /* @__PURE__ */ jsx5("span", { className: "mx-meet__badge", children: "Guest" }) : null
+            entry.userId === null ? /* @__PURE__ */ jsx6("span", { className: "mx-meet__badge", children: "Guest" }) : null
           ] }),
-          /* @__PURE__ */ jsx5(ControlButton, { label: `Admit ${entry.displayName}`, onClick: () => void lobby.admit(entry), children: /* @__PURE__ */ jsx5(CheckIcon, { width: 16, height: 16 }) }),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(ControlButton, { label: `Admit ${entry.displayName}`, onClick: () => void lobby.admit(entry), children: /* @__PURE__ */ jsx6(CheckIcon, { width: 16, height: 16 }) }),
+          /* @__PURE__ */ jsx6(
             ControlButton,
             {
               label: `Deny ${entry.displayName}`,
               danger: true,
               onClick: () => void lobby.deny(entry),
-              children: /* @__PURE__ */ jsx5(CloseIcon, { width: 16, height: 16 })
+              children: /* @__PURE__ */ jsx6(CloseIcon, { width: 16, height: 16 })
             }
           )
         ]
@@ -4036,19 +4095,19 @@ function NoteTakerRow() {
   const duplicateError = status.refusal !== null && ai.error !== null && status.refusal.reason === ai.error.message && status.refusal.remedy === ai.error.remedy;
   return /* @__PURE__ */ jsxs3("section", { className: "mx-meet__note-taker", "aria-label": "Note-taker", children: [
     /* @__PURE__ */ jsxs3("p", { className: `mx-meet__note-taker-state mx-meet__note-taker-state--${status.state}`, children: [
-      /* @__PURE__ */ jsx5("span", { className: "mx-meet__note-taker-dot", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx6("span", { className: "mx-meet__note-taker-dot", "aria-hidden": "true" }),
       ai.noteTakerLabel
     ] }),
-    status.detail !== null ? /* @__PURE__ */ jsx5("p", { className: "mx-meet__panel-note", children: status.detail }) : null,
+    status.detail !== null ? /* @__PURE__ */ jsx6("p", { className: "mx-meet__panel-note", children: status.detail }) : null,
     status.refusal !== null ? /* @__PURE__ */ jsxs3(ErrorBox, { as: "div", className: "mx-meet__refusal", error: status.refusal, operation: "Join this meeting", origin: "meet/components", children: [
-      /* @__PURE__ */ jsx5("p", { className: "mx-meet__refusal-reason", children: status.refusal.reason }),
-      status.refusal.remedy.length > 0 ? /* @__PURE__ */ jsx5("p", { className: "mx-meet__refusal-remedy", children: status.refusal.remedy }) : null
+      /* @__PURE__ */ jsx6("p", { className: "mx-meet__refusal-reason", children: status.refusal.reason }),
+      status.refusal.remedy.length > 0 ? /* @__PURE__ */ jsx6("p", { className: "mx-meet__refusal-remedy", children: status.refusal.remedy }) : null
     ] }) : null,
     ai.error !== null && !duplicateError ? /* @__PURE__ */ jsxs3(ErrorBox, { as: "div", className: "mx-meet__refusal", error: ai.error, operation: "Run the meeting assistant", origin: "meet/components", children: [
-      /* @__PURE__ */ jsx5("p", { className: "mx-meet__refusal-reason", children: ai.error.message }),
-      /* @__PURE__ */ jsx5("p", { className: "mx-meet__refusal-remedy", children: ai.error.remedy })
+      /* @__PURE__ */ jsx6("p", { className: "mx-meet__refusal-reason", children: ai.error.message }),
+      /* @__PURE__ */ jsx6("p", { className: "mx-meet__refusal-remedy", children: ai.error.remedy })
     ] }) : null,
-    ai.canControlNoteTaker ? status.state === "transcribing" || status.state === "joining" || status.state === "handoff_pending" ? /* @__PURE__ */ jsx5(
+    ai.canControlNoteTaker ? status.state === "transcribing" || status.state === "joining" || status.state === "handoff_pending" ? /* @__PURE__ */ jsx6(
       "button",
       {
         type: "button",
@@ -4056,7 +4115,7 @@ function NoteTakerRow() {
         onClick: () => void ai.stopNoteTaker(),
         children: "Dismiss the note-taker"
       }
-    ) : /* @__PURE__ */ jsx5(
+    ) : /* @__PURE__ */ jsx6(
       "button",
       {
         type: "button",
@@ -4073,10 +4132,10 @@ function NoteList({
   empty
 }) {
   return /* @__PURE__ */ jsxs3("section", { className: "mx-meet__note-group", "aria-label": title, children: [
-    /* @__PURE__ */ jsx5("h3", { className: "mx-meet__note-group-title", children: title }),
-    notes.length === 0 ? /* @__PURE__ */ jsx5("p", { className: "mx-meet__panel-note", children: empty }) : /* @__PURE__ */ jsx5("ul", { className: "mx-meet__notes", children: notes.map((note) => /* @__PURE__ */ jsxs3("li", { className: "mx-meet__note", children: [
+    /* @__PURE__ */ jsx6("h3", { className: "mx-meet__note-group-title", children: title }),
+    notes.length === 0 ? /* @__PURE__ */ jsx6("p", { className: "mx-meet__panel-note", children: empty }) : /* @__PURE__ */ jsx6("ul", { className: "mx-meet__notes", children: notes.map((note) => /* @__PURE__ */ jsxs3("li", { className: "mx-meet__note", children: [
       note.text,
-      note.assigneeDisplayName !== void 0 && note.assigneeDisplayName !== null ? /* @__PURE__ */ jsx5("span", { className: "mx-meet__assignee", children: note.assigneeDisplayName }) : null
+      note.assigneeDisplayName !== void 0 && note.assigneeDisplayName !== null ? /* @__PURE__ */ jsx6("span", { className: "mx-meet__assignee", children: note.assigneeDisplayName }) : null
     ] }, note.id)) })
   ] });
 }
@@ -4084,10 +4143,10 @@ function AiPanel({ onClose }) {
   const ai = useMeetAi();
   const [question, setQuestion] = useState4("");
   return /* @__PURE__ */ jsxs3(PanelShell, { title: "Meeting assistant", onClose, children: [
-    /* @__PURE__ */ jsx5(NoteTakerRow, {}),
+    /* @__PURE__ */ jsx6(NoteTakerRow, {}),
     ai.summary !== null ? /* @__PURE__ */ jsxs3("section", { className: "mx-meet__note-group", "aria-label": "Summary", children: [
-      /* @__PURE__ */ jsx5("h3", { className: "mx-meet__note-group-title", children: "Summary" }),
-      /* @__PURE__ */ jsx5("p", { className: "mx-meet__summary", children: ai.summary.text })
+      /* @__PURE__ */ jsx6("h3", { className: "mx-meet__note-group-title", children: "Summary" }),
+      /* @__PURE__ */ jsx6("p", { className: "mx-meet__summary", children: ai.summary.text })
     ] }) : null,
     ai.wrapUp !== null ? /* @__PURE__ */ jsxs3("p", { className: "mx-meet__wrap-up-notice", role: "status", children: [
       "The wrap-up is written \u2014 ",
@@ -4101,7 +4160,7 @@ function AiPanel({ onClose }) {
       ai.wrapUp.segmentCount === 1 ? "transcript line" : "transcript lines",
       "."
     ] }) : null,
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       NoteList,
       {
         title: "Notes",
@@ -4109,7 +4168,7 @@ function AiPanel({ onClose }) {
         empty: "Notes appear here as the meeting goes on."
       }
     ),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       NoteList,
       {
         title: "Decisions",
@@ -4117,7 +4176,7 @@ function AiPanel({ onClose }) {
         empty: "Nothing has been decided yet."
       }
     ),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       NoteList,
       {
         title: "Action items",
@@ -4126,14 +4185,14 @@ function AiPanel({ onClose }) {
       }
     ),
     ai.transcript.length > 0 ? /* @__PURE__ */ jsxs3("section", { className: "mx-meet__note-group", "aria-label": "Transcript", children: [
-      /* @__PURE__ */ jsx5("h3", { className: "mx-meet__note-group-title", children: "Transcript" }),
-      /* @__PURE__ */ jsx5("ul", { className: "mx-meet__transcript", children: ai.transcript.map((line) => /* @__PURE__ */ jsxs3(
+      /* @__PURE__ */ jsx6("h3", { className: "mx-meet__note-group-title", children: "Transcript" }),
+      /* @__PURE__ */ jsx6("ul", { className: "mx-meet__transcript", children: ai.transcript.map((line) => /* @__PURE__ */ jsxs3(
         "li",
         {
           className: line.final && line.source === "record" ? "mx-meet__line" : "mx-meet__line mx-meet__line--interim",
           children: [
-            /* @__PURE__ */ jsx5("strong", { children: line.speaker }),
-            /* @__PURE__ */ jsx5("span", { children: line.text })
+            /* @__PURE__ */ jsx6("strong", { children: line.speaker }),
+            /* @__PURE__ */ jsx6("span", { children: line.text })
           ]
         },
         line.id
@@ -4150,7 +4209,7 @@ function AiPanel({ onClose }) {
           void ai.ask(asked);
         },
         children: [
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             "input",
             {
               className: "mx-meet__input",
@@ -4160,12 +4219,12 @@ function AiPanel({ onClose }) {
               "aria-label": "Ask about this meeting"
             }
           ),
-          /* @__PURE__ */ jsx5("button", { type: "submit", className: "mx-meet__send", disabled: ai.asking, children: ai.asking ? "Asking\u2026" : "Ask" })
+          /* @__PURE__ */ jsx6("button", { type: "submit", className: "mx-meet__send", disabled: ai.asking, children: ai.asking ? "Asking\u2026" : "Ask" })
         ]
       }
     ),
-    ai.asking && ai.phase !== null ? /* @__PURE__ */ jsx5("p", { className: "mx-meet__panel-note", role: "status", children: ai.phase }) : null,
-    ai.answer !== null ? /* @__PURE__ */ jsx5("p", { className: "mx-meet__answer", children: ai.answer }) : null,
+    ai.asking && ai.phase !== null ? /* @__PURE__ */ jsx6("p", { className: "mx-meet__panel-note", role: "status", children: ai.phase }) : null,
+    ai.answer !== null ? /* @__PURE__ */ jsx6("p", { className: "mx-meet__answer", children: ai.answer }) : null,
     ai.answer !== null && ai.coverage !== null ? /* @__PURE__ */ jsxs3("p", { className: "mx-meet__coverage", children: [
       "Answered from ",
       ai.coverage.segmentsUsed,
@@ -4176,8 +4235,8 @@ function AiPanel({ onClose }) {
       "."
     ] }) : null,
     ai.error !== null ? /* @__PURE__ */ jsxs3(ErrorBox, { as: "div", className: "mx-meet__refusal", error: ai.error, operation: "Run the meeting assistant", origin: "meet/components", children: [
-      /* @__PURE__ */ jsx5("p", { className: "mx-meet__refusal-reason", children: ai.error.message }),
-      /* @__PURE__ */ jsx5("p", { className: "mx-meet__refusal-remedy", children: ai.error.remedy })
+      /* @__PURE__ */ jsx6("p", { className: "mx-meet__refusal-reason", children: ai.error.message }),
+      /* @__PURE__ */ jsx6("p", { className: "mx-meet__refusal-remedy", children: ai.error.remedy })
     ] }) : null
   ] });
 }
@@ -4194,22 +4253,22 @@ function Captions({ lines = 3 }) {
         {
           className: line.final ? "mx-meet__caption" : "mx-meet__caption mx-meet__caption--interim",
           children: [
-            /* @__PURE__ */ jsx5("strong", { children: line.speaker }),
+            /* @__PURE__ */ jsx6("strong", { children: line.speaker }),
             " ",
             translated ?? line.text,
-            translated !== void 0 ? /* @__PURE__ */ jsx5("span", { className: "mx-meet__caption-original", children: line.text }) : null
+            translated !== void 0 ? /* @__PURE__ */ jsx6("span", { className: "mx-meet__caption-original", children: line.text }) : null
           ]
         },
         line.id
       );
     }),
-    translation.language !== null && translation.error !== null ? /* @__PURE__ */ jsx5("p", { className: "mx-meet__caption mx-meet__caption--interim", children: translation.error }) : null
+    translation.language !== null && translation.error !== null ? /* @__PURE__ */ jsx6("p", { className: "mx-meet__caption mx-meet__caption--interim", children: translation.error }) : null
   ] });
 }
 function ConsentNotice() {
   const notice = useConsentNotice();
   if (notice === null) return null;
-  return /* @__PURE__ */ jsx5("p", { className: "mx-meet__consent", role: "status", children: notice });
+  return /* @__PURE__ */ jsx6("p", { className: "mx-meet__consent", role: "status", children: notice });
 }
 function AttendanceNotice() {
   const media = useLocalMedia();
@@ -4225,21 +4284,22 @@ function AttendanceNotice() {
       ...code !== null ? { "data-meet-notice": code } : {},
       children: [
         notice,
-        refused === null ? null : /* @__PURE__ */ jsx5("span", { className: "mx-meet__remedy", children: refused.remedy })
+        refused === null ? null : /* @__PURE__ */ jsx6("span", { className: "mx-meet__remedy", children: refused.remedy })
       ]
     }
   );
 }
 function PreJoin(props) {
   const host = useMeetHost();
-  if (host === null) return /* @__PURE__ */ jsx5(InertNotice, { what: "This meeting" });
-  return /* @__PURE__ */ jsx5(PreJoinBody, { ...props, host });
+  if (host === null) return /* @__PURE__ */ jsx6(InertNotice, { what: "This meeting" });
+  return /* @__PURE__ */ jsx6(PreJoinBody, { ...props, host });
 }
 function PreJoinBody({
   roomName,
   meetingId,
   slug,
   onJoined,
+  observe: observe2 = false,
   host
 }) {
   const room = useRoom();
@@ -4261,7 +4321,7 @@ function PreJoinBody({
   }, [host]);
   return /* @__PURE__ */ jsxs3("div", { className: "mx-meet__prejoin", children: [
     /* @__PURE__ */ jsxs3("div", { className: "mx-meet__preview", children: [
-      mode === "video" && preview.preview !== null ? /* @__PURE__ */ jsx5(
+      mode === "video" && preview.preview !== null ? /* @__PURE__ */ jsx6(
         "video",
         {
           className: "mx-meet__video mx-meet__video--mirror",
@@ -4272,16 +4332,16 @@ function PreJoinBody({
             if (element !== null) preview.preview?.attach(element);
           }
         }
-      ) : /* @__PURE__ */ jsx5("div", { className: "mx-meet__tile-placeholder", children: /* @__PURE__ */ jsx5(Avatar, { name: host.identity.displayName, url: host.identity.avatarUrl, size: 96 }) }),
-      mode === "video" && preview.error !== null ? /* @__PURE__ */ jsx5("p", { className: "mx-meet__preview-note", children: preview.error }) : null,
-      microphone && micStream !== null ? /* @__PURE__ */ jsx5("div", { className: "mx-meet__meter mx-meet__meter--preview", role: "meter", "aria-label": "Microphone level", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(level * 100), children: /* @__PURE__ */ jsx5("span", { style: { width: `${Math.min(100, Math.round(level * 160))}%` } }) }) : null
+      ) : /* @__PURE__ */ jsx6("div", { className: "mx-meet__tile-placeholder", children: /* @__PURE__ */ jsx6(Avatar, { name: host.identity.displayName, url: host.identity.avatarUrl, size: 96 }) }),
+      mode === "video" && preview.error !== null ? /* @__PURE__ */ jsx6("p", { className: "mx-meet__preview-note", children: preview.error }) : null,
+      microphone && micStream !== null ? /* @__PURE__ */ jsx6("div", { className: "mx-meet__meter mx-meet__meter--preview", role: "meter", "aria-label": "Microphone level", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(level * 100), children: /* @__PURE__ */ jsx6("span", { style: { width: `${Math.min(100, Math.round(level * 160))}%` } }) }) : null
     ] }),
     /* @__PURE__ */ jsxs3("div", { className: "mx-meet__prejoin-panel", children: [
-      /* @__PURE__ */ jsx5("h1", { className: "mx-meet__prejoin-title", children: "Ready to join?" }),
-      notice?.kind === "removed" ? /* @__PURE__ */ jsx5("p", { className: "mx-meet__warning", children: notice.text }) : null,
+      /* @__PURE__ */ jsx6("h1", { className: "mx-meet__prejoin-title", children: "Ready to join?" }),
+      notice?.kind === "removed" ? /* @__PURE__ */ jsx6("p", { className: "mx-meet__warning", children: notice.text }) : null,
       devices?.labelsHidden === true ? /* @__PURE__ */ jsxs3("p", { className: "mx-meet__panel-note", children: [
         "Your browser is hiding device names until you allow camera and microphone access.",
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           "button",
           {
             type: "button",
@@ -4293,10 +4353,10 @@ function PreJoinBody({
           }
         )
       ] }) : null,
-      devices?.fallbackNotice != null ? /* @__PURE__ */ jsx5("p", { className: "mx-meet__warning", children: devices.fallbackNotice }) : null,
-      /* @__PURE__ */ jsx5(DevicePicker, { kind: "audioinput", label: "Microphone" }),
+      devices?.fallbackNotice != null ? /* @__PURE__ */ jsx6("p", { className: "mx-meet__warning", children: devices.fallbackNotice }) : null,
+      /* @__PURE__ */ jsx6(DevicePicker, { kind: "audioinput", label: "Microphone" }),
       /* @__PURE__ */ jsxs3("div", { className: "mx-meet__field-row", children: [
-        /* @__PURE__ */ jsx5(DevicePicker, { kind: "audiooutput", label: "Speaker" }),
+        /* @__PURE__ */ jsx6(DevicePicker, { kind: "audiooutput", label: "Speaker" }),
         /* @__PURE__ */ jsxs3(
           Button,
           {
@@ -4310,19 +4370,19 @@ function PreJoinBody({
               );
             },
             children: [
-              /* @__PURE__ */ jsx5(SpeakerIcon, {}),
+              /* @__PURE__ */ jsx6(SpeakerIcon, {}),
               " ",
               speakerTesting ? "Playing\u2026" : "Test"
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ jsx5(DevicePicker, { kind: "videoinput", label: "Camera" }),
-      /* @__PURE__ */ jsx5(EffectsSettings, { preview: preview.preview }),
-      recording.consentNotice !== null ? /* @__PURE__ */ jsx5(Alert, { variant: "info", children: /* @__PURE__ */ jsx5(AlertDescription, { children: recording.consentNotice }) }) : null,
+      /* @__PURE__ */ jsx6(DevicePicker, { kind: "videoinput", label: "Camera" }),
+      /* @__PURE__ */ jsx6(EffectsSettings, { preview: preview.preview }),
+      recording.consentNotice !== null ? /* @__PURE__ */ jsx6(Alert, { variant: "info", children: /* @__PURE__ */ jsx6(AlertDescription, { children: recording.consentNotice }) }) : null,
       /* @__PURE__ */ jsxs3("div", { className: "mx-meet__prejoin-actions", children: [
         /* @__PURE__ */ jsxs3("div", { className: "mx-meet__check", children: [
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             Checkbox,
             {
               id: "mx-meet-join-video",
@@ -4330,10 +4390,10 @@ function PreJoinBody({
               onCheckedChange: (checked) => setMode(checked === true ? "video" : "audio")
             }
           ),
-          /* @__PURE__ */ jsx5(Label, { htmlFor: "mx-meet-join-video", children: "Join with video" })
+          /* @__PURE__ */ jsx6(Label, { htmlFor: "mx-meet-join-video", children: "Join with video" })
         ] }),
         /* @__PURE__ */ jsxs3("div", { className: "mx-meet__check", children: [
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             Checkbox,
             {
               id: "mx-meet-join-mic",
@@ -4341,9 +4401,9 @@ function PreJoinBody({
               onCheckedChange: (checked) => setMicrophone(checked === true)
             }
           ),
-          /* @__PURE__ */ jsx5(Label, { htmlFor: "mx-meet-join-mic", children: "Join with microphone" })
+          /* @__PURE__ */ jsx6(Label, { htmlFor: "mx-meet-join-mic", children: "Join with microphone" })
         ] }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           Button,
           {
             type: "button",
@@ -4354,19 +4414,21 @@ function PreJoinBody({
               preview.release();
               void room.join({
                 roomName,
-                mode,
-                microphone,
+                // An observer publishes nothing: no camera, no microphone (MD-16).
+                mode: observe2 ? "audio" : mode,
+                microphone: observe2 ? false : microphone,
                 ...meetingId !== void 0 ? { meetingId } : {},
-                ...slug !== void 0 ? { slug } : {}
+                ...slug !== void 0 ? { slug } : {},
+                ...observe2 ? { observe: true } : {}
               }).then(() => onJoined?.()).catch(() => void 0).finally(() => setJoining(false));
             },
-            children: joining ? "Joining\u2026" : "Join now"
+            children: joining ? "Joining\u2026" : observe2 ? "Observe" : "Join now"
           }
         )
       ] }),
       room.failure !== null ? /* @__PURE__ */ jsxs3("p", { className: "mx-meet__error", children: [
         room.failure.message,
-        /* @__PURE__ */ jsx5("span", { className: "mx-meet__remedy", children: room.failure.remedy })
+        /* @__PURE__ */ jsx6("span", { className: "mx-meet__remedy", children: room.failure.remedy })
       ] }) : null
     ] })
   ] });
@@ -4425,7 +4487,7 @@ function DevicePicker({
   const valueOf = (deviceId) => deviceId.length > 0 ? deviceId : "default";
   const current = devices?.selected[kind] ?? host.devices.resolve(kind) ?? "";
   return /* @__PURE__ */ jsxs3("div", { className: "mx-meet__field", children: [
-    /* @__PURE__ */ jsx5(Label, { htmlFor: triggerId, children: label }),
+    /* @__PURE__ */ jsx6(Label, { htmlFor: triggerId, children: label }),
     /* @__PURE__ */ jsxs3(
       Select,
       {
@@ -4436,8 +4498,8 @@ function DevicePicker({
           else host.devices.select(kind, deviceId);
         },
         children: [
-          /* @__PURE__ */ jsx5(SelectTrigger, { id: triggerId, "aria-label": label, children: /* @__PURE__ */ jsx5(SelectValue, { placeholder: label }) }),
-          /* @__PURE__ */ jsx5(SelectContent, { children: list.map((device) => /* @__PURE__ */ jsx5(SelectItem, { value: valueOf(device.deviceId), children: device.label.length > 0 ? device.label : `${label} (name hidden)` }, device.deviceId || "default")) })
+          /* @__PURE__ */ jsx6(SelectTrigger, { id: triggerId, "aria-label": label, children: /* @__PURE__ */ jsx6(SelectValue, { placeholder: label }) }),
+          /* @__PURE__ */ jsx6(SelectContent, { children: list.map((device) => /* @__PURE__ */ jsx6(SelectItem, { value: valueOf(device.deviceId), children: device.label.length > 0 ? device.label : `${label} (name hidden)` }, device.deviceId || "default")) })
         ]
       }
     )
@@ -4448,46 +4510,49 @@ function MeetSkinRoom({
   meetingId,
   slug,
   onLeave,
-  headerControls
+  headerControls,
+  observe: observe2 = false
 }) {
   const { host, snapshot, isHost } = useMeetCore();
   const elapsed = useElapsed(snapshot?.meeting?.startedAt ?? null);
   const phase = snapshot?.phase ?? "idle";
   if (host === null) return null;
   if (phase === "idle" || phase === "failed" || phase === "left") {
-    return /* @__PURE__ */ jsx5("div", { className: "mx-meet", children: /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx6("div", { className: "mx-meet", children: /* @__PURE__ */ jsx6(
       PreJoin,
       {
         roomName,
         ...meetingId !== void 0 ? { meetingId } : {},
-        ...slug !== void 0 ? { slug } : {}
+        ...slug !== void 0 ? { slug } : {},
+        observe: observe2
       }
     ) });
   }
   if (phase === "lobby") {
-    return /* @__PURE__ */ jsx5("div", { className: "mx-meet mx-meet--lobby", children: /* @__PURE__ */ jsx5(WaitingRoom, { host, ...onLeave !== void 0 ? { onLeave } : {} }) });
+    return /* @__PURE__ */ jsx6("div", { className: "mx-meet mx-meet--lobby", children: /* @__PURE__ */ jsx6(WaitingRoom, { host, ...onLeave !== void 0 ? { onLeave } : {} }) });
   }
   return /* @__PURE__ */ jsxs3("div", { className: "mx-meet", children: [
-    /* @__PURE__ */ jsx5(ConsentNotice, {}),
-    /* @__PURE__ */ jsx5(AttendanceNotice, {}),
+    /* @__PURE__ */ jsx6(ConsentNotice, {}),
+    /* @__PURE__ */ jsx6(AttendanceNotice, {}),
     /* @__PURE__ */ jsxs3("header", { className: "mx-meet__header", children: [
-      /* @__PURE__ */ jsx5("h1", { className: "mx-meet__title", children: snapshot?.meeting?.title ?? "Meeting" }),
+      /* @__PURE__ */ jsx6("h1", { className: "mx-meet__title", children: snapshot?.meeting?.title ?? "Meeting" }),
       /* @__PURE__ */ jsxs3("span", { className: "mx-meet__meta", children: [
         participantSummary(snapshot?.participants ?? []),
         elapsed > 0 ? ` \xB7 ${formatDurationMs2(elapsed)}` : ""
       ] }),
-      /* @__PURE__ */ jsx5(RecordingIndicator, {}),
+      /* @__PURE__ */ jsx6(RecordingIndicator, {}),
+      isObserverRole(snapshot?.grants.role) ? /* @__PURE__ */ jsx6("span", { className: "mx-meet__badge", "data-meet-observing": "self", children: "Observing" }) : null,
       snapshot?.locked === true ? /* @__PURE__ */ jsxs3("span", { className: "mx-meet__badge", children: [
-        /* @__PURE__ */ jsx5(LockIcon, { width: 12, height: 12 }),
+        /* @__PURE__ */ jsx6(LockIcon, { width: 12, height: 12 }),
         " Locked"
       ] }) : null,
-      headerControls !== void 0 && headerControls !== null ? /* @__PURE__ */ jsx5("span", { className: "mx-meet__header-controls", "data-meet-header-controls": "", children: headerControls }) : null,
-      isHost ? /* @__PURE__ */ jsx5(HostMenu, {}) : null
+      headerControls !== void 0 && headerControls !== null ? /* @__PURE__ */ jsx6("span", { className: "mx-meet__header-controls", "data-meet-header-controls": "", children: headerControls }) : null,
+      isHost ? /* @__PURE__ */ jsx6(HostMenu, {}) : null
     ] }),
-    phase === "reconnecting" ? /* @__PURE__ */ jsx5("p", { className: "mx-meet__banner", role: "status", children: "Reconnecting\u2026" }) : null,
-    /* @__PURE__ */ jsx5(Stage, {}),
-    /* @__PURE__ */ jsx5(Captions, {}),
-    /* @__PURE__ */ jsx5(ControlBar, { ...onLeave !== void 0 ? { onLeave } : {} })
+    phase === "reconnecting" ? /* @__PURE__ */ jsx6("p", { className: "mx-meet__banner", role: "status", children: "Reconnecting\u2026" }) : null,
+    /* @__PURE__ */ jsx6(Stage, {}),
+    /* @__PURE__ */ jsx6(Captions, {}),
+    /* @__PURE__ */ jsx6(ControlBar, { ...onLeave !== void 0 ? { onLeave } : {} })
   ] });
 }
 function WaitingRoom({ host, onLeave }) {
@@ -4498,33 +4563,33 @@ function WaitingRoom({ host, onLeave }) {
     setBusy(true);
     void action().catch(() => void 0).finally(() => setBusy(false));
   };
-  const home = /* @__PURE__ */ jsx5(Button, { type: "button", variant: "outline", onClick: () => onLeave !== void 0 ? onLeave() : window.location.assign("/"), children: "Back to home" });
+  const home = /* @__PURE__ */ jsx6(Button, { type: "button", variant: "outline", onClick: () => onLeave !== void 0 ? onLeave() : window.location.assign("/"), children: "Back to home" });
   let title;
   let line = null;
   let actions;
   switch (admission) {
     case "waiting_host":
       title = "Waiting for the host to start";
-      actions = /* @__PURE__ */ jsx5(Button, { type: "button", variant: "outline", disabled: busy, onClick: run(withdraw), children: "Leave" });
+      actions = /* @__PURE__ */ jsx6(Button, { type: "button", variant: "outline", disabled: busy, onClick: run(withdraw), children: "Leave" });
       break;
     case "denied":
       title = "The host declined your request";
       actions = /* @__PURE__ */ jsxs3(Fragment, { children: [
-        waiting?.reknockAllowed === true ? /* @__PURE__ */ jsx5(Button, { type: "button", disabled: busy, onClick: run(askAgain), children: "Ask to join again" }) : null,
+        waiting?.reknockAllowed === true ? /* @__PURE__ */ jsx6(Button, { type: "button", disabled: busy, onClick: run(askAgain), children: "Ask to join again" }) : null,
         home
       ] });
       break;
     case "expired":
       title = "No one responded";
       actions = /* @__PURE__ */ jsxs3(Fragment, { children: [
-        /* @__PURE__ */ jsx5(Button, { type: "button", disabled: busy, onClick: run(askAgain), children: "Ask again" }),
+        /* @__PURE__ */ jsx6(Button, { type: "button", disabled: busy, onClick: run(askAgain), children: "Ask again" }),
         home
       ] });
       break;
     case "withdrawn":
       title = "You left the waiting room";
       actions = /* @__PURE__ */ jsxs3(Fragment, { children: [
-        /* @__PURE__ */ jsx5(Button, { type: "button", disabled: busy, onClick: run(askAgain), children: "Rejoin" }),
+        /* @__PURE__ */ jsx6(Button, { type: "button", disabled: busy, onClick: run(askAgain), children: "Rejoin" }),
         home
       ] });
       break;
@@ -4535,13 +4600,13 @@ function WaitingRoom({ host, onLeave }) {
     default:
       title = "Waiting for the host to let you in";
       line = waiting?.admittersPresent === false ? "The host isn't here yet" : null;
-      actions = /* @__PURE__ */ jsx5(Button, { type: "button", variant: "outline", disabled: busy, onClick: run(withdraw), children: "Cancel request" });
+      actions = /* @__PURE__ */ jsx6(Button, { type: "button", variant: "outline", disabled: busy, onClick: run(withdraw), children: "Cancel request" });
   }
   return /* @__PURE__ */ jsxs3("div", { className: "mx-meet__waiting", children: [
-    /* @__PURE__ */ jsx5(Avatar, { name: host.identity.displayName, url: host.identity.avatarUrl, size: 72 }),
-    /* @__PURE__ */ jsx5("h1", { className: "mx-meet__prejoin-title", children: title }),
-    line !== null ? /* @__PURE__ */ jsx5("p", { className: "mx-meet__empty-body", role: "status", "data-meet-notice": "host-absent", children: line }) : null,
-    /* @__PURE__ */ jsx5("div", { className: "mx-meet__waiting-actions", children: actions })
+    /* @__PURE__ */ jsx6(Avatar, { name: host.identity.displayName, url: host.identity.avatarUrl, size: 72 }),
+    /* @__PURE__ */ jsx6("h1", { className: "mx-meet__prejoin-title", children: title }),
+    line !== null ? /* @__PURE__ */ jsx6("p", { className: "mx-meet__empty-body", role: "status", "data-meet-notice": "host-absent", children: line }) : null,
+    /* @__PURE__ */ jsx6("div", { className: "mx-meet__waiting-actions", children: actions })
   ] });
 }
 function HostMenu() {
@@ -4551,7 +4616,7 @@ function HostMenu() {
   const [confirmingEnd, setConfirmingEnd] = useState4(false);
   const locked = snapshot?.locked === true;
   return /* @__PURE__ */ jsxs3("div", { className: "mx-meet__host-menu", children: [
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       "button",
       {
         type: "button",
@@ -4563,8 +4628,8 @@ function HostMenu() {
       }
     ),
     end.canEnd ? confirmingEnd ? /* @__PURE__ */ jsxs3("span", { className: "mx-meet__confirm", role: "group", "aria-label": "End this meeting?", children: [
-      /* @__PURE__ */ jsx5("span", { className: "mx-meet__confirm-text", children: "End it for everyone? Every participant is disconnected, the note-taker stops, and the wrap-up is written. Nobody can rejoin this meeting afterwards." }),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6("span", { className: "mx-meet__confirm-text", children: "End it for everyone? Every participant is disconnected, the note-taker stops, and the wrap-up is written. Nobody can rejoin this meeting afterwards." }),
+      /* @__PURE__ */ jsx6(
         "button",
         {
           type: "button",
@@ -4576,7 +4641,7 @@ function HostMenu() {
           children: "End it"
         }
       ),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6(
         "button",
         {
           type: "button",
@@ -4585,7 +4650,7 @@ function HostMenu() {
           children: "Keep it running"
         }
       )
-    ] }) : /* @__PURE__ */ jsx5(
+    ] }) : /* @__PURE__ */ jsx6(
       "button",
       {
         type: "button",
@@ -4594,14 +4659,14 @@ function HostMenu() {
         children: end.ending ? "Ending\u2026" : "End meeting for everyone"
       }
     ) : null,
-    end.notice !== null ? /* @__PURE__ */ jsx5("span", { className: "mx-meet__notice", role: "status", children: end.notice }) : null
+    end.notice !== null ? /* @__PURE__ */ jsx6("span", { className: "mx-meet__notice", role: "status", children: end.notice }) : null
   ] });
 }
 function ReactionOverlay({
   reactions
 }) {
   if (reactions.length === 0) return null;
-  return /* @__PURE__ */ jsx5("div", { className: "mx-meet__reactions", "aria-hidden": "true", children: reactions.map((reaction) => /* @__PURE__ */ jsx5("span", { className: "mx-meet__reaction", children: reaction.emoji }, reaction.id)) });
+  return /* @__PURE__ */ jsx6("div", { className: "mx-meet__reactions", "aria-hidden": "true", children: reactions.map((reaction) => /* @__PURE__ */ jsx6("span", { className: "mx-meet__reaction", children: reaction.emoji }, reaction.id)) });
 }
 function clockOf(iso) {
   const at = new Date(iso);
@@ -4619,10 +4684,10 @@ function GuestRecordAccessControl({
   if (host === null || !isHost) return null;
   const resolved = access.setting === "default" && access.effective !== null ? ` Right now that means: ${guestRecordAccessLabel(access.effective.level).toLowerCase()}.` : "";
   return /* @__PURE__ */ jsxs3("section", { className: "mx-meet__record-section", "aria-label": "What guests may read", children: [
-    /* @__PURE__ */ jsx5("h2", { className: "mx-meet__record-section-title", children: "What guests may read" }),
+    /* @__PURE__ */ jsx6("h2", { className: "mx-meet__record-section-title", children: "What guests may read" }),
     /* @__PURE__ */ jsxs3("label", { className: "mx-meet__field", children: [
-      /* @__PURE__ */ jsx5("span", { className: "mx-meet__field-label", children: "People who attended by link, without an account" }),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6("span", { className: "mx-meet__field-label", children: "People who attended by link, without an account" }),
+      /* @__PURE__ */ jsx6(
         "select",
         {
           className: "mx-meet__select",
@@ -4633,7 +4698,7 @@ function GuestRecordAccessControl({
               event.target.value
             );
           },
-          children: GUEST_RECORD_ACCESS_CHOICES.map((choice) => /* @__PURE__ */ jsx5("option", { value: choice, children: guestRecordAccessLabel(choice) }, choice))
+          children: GUEST_RECORD_ACCESS_CHOICES.map((choice) => /* @__PURE__ */ jsx6("option", { value: choice, children: guestRecordAccessLabel(choice) }, choice))
         }
       )
     ] }),
@@ -4641,10 +4706,10 @@ function GuestRecordAccessControl({
       guestRecordAccessExplanation(access.setting),
       resolved
     ] }),
-    access.saving ? /* @__PURE__ */ jsx5("p", { className: "mx-meet__panel-note", role: "status", children: "Saving what guests may read\u2026" }) : null,
+    access.saving ? /* @__PURE__ */ jsx6("p", { className: "mx-meet__panel-note", role: "status", children: "Saving what guests may read\u2026" }) : null,
     access.error !== null ? /* @__PURE__ */ jsxs3(ErrorBox, { as: "div", className: "mx-meet__refusal", error: access.error, operation: "Change who can join", origin: "meet/components", children: [
-      /* @__PURE__ */ jsx5("p", { className: "mx-meet__refusal-reason", children: access.error.message }),
-      /* @__PURE__ */ jsx5("p", { className: "mx-meet__refusal-remedy", children: access.error.remedy })
+      /* @__PURE__ */ jsx6("p", { className: "mx-meet__refusal-reason", children: access.error.message }),
+      /* @__PURE__ */ jsx6("p", { className: "mx-meet__refusal-remedy", children: access.error.remedy })
     ] }) : null
   ] });
 }