@ai-matrx/meet 0.7.84 → 0.8.0

package/dist/react.js

@@ -2,6 +2,7 @@
 "use client";
 
 // src/react/provider.tsx
+import { globalSlot as globalSlot2 } from "@ai-matrx/kit/global-slot";
 import {
   createContext,
   useCallback,
@@ -901,22 +902,9 @@ function fileDownloadPath(fileId) {
 
 // src/core/channels.ts
 import { defineChannelNamespace } from "@ai-matrx/realtime";
-
-// src/core/slot.ts
-var NAMESPACE = "ai-matrx.meet";
-function globalSlot(name, create) {
-  const key = /* @__PURE__ */ Symbol.for(`${NAMESPACE}.${name}`);
-  const host = globalThis;
-  const existing = host[key];
-  if (existing !== void 0) return existing;
-  const created = create();
-  host[key] = created;
-  return created;
-}
-
-// src/core/channels.ts
+import { globalSlot } from "@ai-matrx/kit/global-slot";
 function namespaces() {
-  return globalSlot("channel-namespaces", () => ({
+  return globalSlot("ai-matrx.meet.channel-namespaces", () => ({
     user: defineChannelNamespace({
       namespace: "meet-user",
       parts: ["userId"],
@@ -3499,87 +3487,22 @@ function snippetRuns(snippet) {
 }
 
 // src/core/session-identity.ts
-var RESOLVING = Object.freeze({
-  state: "resolving",
-  userId: null
-});
-var SERVER_SESSION_IDENTITY = RESOLVING;
-function authOf(client) {
-  const candidate = client.auth;
-  if (candidate === null || typeof candidate !== "object") return null;
-  const auth = candidate;
-  if (typeof auth.getSession !== "function") return null;
-  if (typeof auth.onAuthStateChange !== "function") return null;
-  return auth;
-}
-function userIdOf(session) {
-  const id = session?.user?.id;
-  return typeof id === "string" && id.length > 0 ? asUserId(id) : null;
-}
-function createSessionIdentity(options) {
-  const { client, onDiagnostic } = options;
-  const listeners = /* @__PURE__ */ new Set();
-  let current = RESOLVING;
-  let disposed = false;
-  const publish = (state, userId) => {
-    if (disposed) return;
-    if (current.state === state && current.userId === userId) return;
-    current = Object.freeze({ state, userId });
-    for (const listener of [...listeners]) listener();
-  };
-  const auth = authOf(client);
-  if (auth === null) {
-    onDiagnostic?.({
-      level: "error",
-      message: "Meet cannot tell who is signed in: the Supabase client it was given has no auth session source.",
-      remedy: "Pass your app's browser Supabase client to <MeetProvider client={...}> \u2014 the same client it signs in with. Meet reads the acting user from that client's session; there is no prop for a user id, on purpose."
-    });
-    current = Object.freeze({ state: "resolved", userId: null });
-    return {
-      snapshot: () => current,
-      subscribe: (listener) => {
-        listeners.add(listener);
-        return () => listeners.delete(listener);
-      },
-      dispose: () => {
-        disposed = true;
-        listeners.clear();
-      }
-    };
-  }
-  void (async () => {
-    try {
-      const result = await auth.getSession();
-      publish("resolved", userIdOf(result?.data?.session));
-    } catch (error) {
-      onDiagnostic?.({
-        level: "warn",
-        message: `Meet could not read the signed-in session: ${String(
-          error?.message ?? error
-        )}`,
-        remedy: "Calls and meetings stay unavailable on this device until the session can be read. Reload the page; if it persists, sign in again."
-      });
-      publish("resolved", null);
-    }
-  })();
-  const subscription = auth.onAuthStateChange((_event, session) => {
-    publish("resolved", userIdOf(session));
+import {
+  createSessionIdentity as createDataSessionIdentity
+} from "@ai-matrx/data/session-identity";
+import { authOf, SERVER_SESSION_IDENTITY } from "@ai-matrx/data/session-identity";
+var MEET_SESSION_WORDS = {
+  product: "Meet",
+  noAuthSourceRemedy: "Pass your app's browser Supabase client to <MeetProvider client={...}> \u2014 the same client it signs in with. Meet reads the acting user from that client's session; there is no prop for a user id, on purpose.",
+  unreadableRemedy: "Calls and meetings stay unavailable on this device until the session can be read. Reload the page; if it persists, sign in again."
+};
+function createMeetSessionIdentity(options) {
+  return createDataSessionIdentity({
+    client: options.client,
+    words: MEET_SESSION_WORDS,
+    toUserId: asUserId,
+    onDiagnostic: options.onDiagnostic
   });
-  return {
-    snapshot: () => current,
-    subscribe: (listener) => {
-      listeners.add(listener);
-      return () => listeners.delete(listener);
-    },
-    dispose: () => {
-      disposed = true;
-      listeners.clear();
-      try {
-        subscription.data.subscription.unsubscribe();
-      } catch {
-      }
-    }
-  };
 }
 
 // src/core/room-events.ts
@@ -5223,7 +5146,7 @@ async function createCameraPreview(deviceId2, effect) {
 
 // src/react/provider.tsx
 import { jsx } from "react/jsx-runtime";
-var MeetContext = createContext(null);
+var MeetContext = globalSlot2("ai-matrx.meet.react.context", () => createContext(null));
 function defaultDiagnostics(event) {
   const line = `[@ai-matrx/meet] ${event.message}${event.remedy !== void 0 ? `
   \u2192 ${event.remedy}` : ""}`;
@@ -5251,7 +5174,7 @@ function useSessionIdentity(client, report) {
       setSnapshot(SERVER_SESSION_IDENTITY);
       return void 0;
     }
-    const identity = createSessionIdentity({ client, onDiagnostic: report });
+    const identity = createMeetSessionIdentity({ client, onDiagnostic: report });
     setSnapshot(identity.snapshot());
     const unsubscribe = identity.subscribe(() => setSnapshot(identity.snapshot()));
     return () => {
@@ -7201,23 +7124,15 @@ function useGuestRecordAccess(meeting) {
   };
 }
 
-// src/react/components.tsx
-import { useEffect as useEffect5, useLayoutEffect, useMemo as useMemo4, useRef as useRef5, useState as useState4 } from "react";
-import {
-  Alert,
-  AlertDescription,
-  Button,
-  Checkbox,
-  ErrorBox,
-  Label,
-  SegmentedControl,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from "@ai-matrx/design-system";
-import { avatarPaletteIndex, formatDurationMs as formatDurationMs4, getInitials } from "@ai-matrx/kit/format";
+// src/react/skin-root.tsx
+import { useEffect as useEffect8 } from "react";
+
+// src/skins/meet/components.tsx
+import { useEffect as useEffect6, useLayoutEffect, useRef as useRef6, useState as useState4 } from "react";
+
+// src/react/facade.ts
+import { useMemo as useMemo4 } from "react";
+import { avatarPaletteIndex, formatDurationMs as formatDurationMs3, getInitials } from "@ai-matrx/kit/format";
 
 // src/core/after.ts
 import { toDelimited } from "@ai-matrx/kit/delimited";
@@ -7654,11 +7569,151 @@ function countLabel(count2, singular, plural = `${singular}s`) {
   return `${count2} ${count2 === 1 ? singular : plural}`;
 }
 
-// src/react/collab.tsx
-import { useEffect as useEffect4, useRef as useRef4, useState as useState3 } from "react";
-import { formatDurationMs as formatDurationMs3 } from "@ai-matrx/kit/format";
+// src/core/collab-state.ts
+function availableActivities(collab, isHost) {
+  const settings = collab?.settings ?? null;
+  if (settings === null) return [];
+  const out = [];
+  if (settings.whiteboardEnabled) out.push("whiteboard");
+  if (settings.pollsEnabled && (isHost || (collab?.polls.length ?? 0) > 0)) out.push("polls");
+  if (settings.qaEnabled) out.push("qa");
+  if (settings.breakoutsEnabled && (isHost || collab?.breakout?.state === "open")) out.push("breakouts");
+  return out;
+}
+function activityAttention(collab, isHost) {
+  if (collab === null) return false;
+  if (collab.polls.some((poll) => poll.state === "live" && poll.myVote.length === 0 && !isHost)) return true;
+  if (isHost && collab.questions.some((q) => q.state === "open")) return true;
+  return false;
+}
+async function performCollab(runtime, request) {
+  if (runtime === null) return { ok: false, message: "This meeting is not connected." };
+  try {
+    const result = await runtime.inRoom.collab(request);
+    return { ok: true, message: result.message, itemId: result.itemId };
+  } catch (error) {
+    return { ok: false, message: error.message ?? "That did not work." };
+  }
+}
+async function moveToRoom(runtime, roomId) {
+  if (runtime === null) return { ok: false, message: "This meeting is not connected." };
+  try {
+    await runtime.engine.moveToBreakout(roomId);
+    return { ok: true, message: roomId === null ? "Back in the main room." : "Joined the breakout room." };
+  } catch (error) {
+    return { ok: false, message: error.message ?? "That room could not be joined." };
+  }
+}
+function untranslatedLines(lines, translations) {
+  return lines.filter((line) => line.final && translations[line.id] === void 0).map(({ id, text: text3 }) => ({ id, text: text3 }));
+}
+function nextTranslationBatch(pending, language, asked) {
+  const batch = pending.filter((line) => !asked.has(`${language}:${line.id}`)).slice(-20);
+  for (const line of batch) asked.add(`${language}:${line.id}`);
+  return batch;
+}
+function setCaptionLanguage(store, next) {
+  store.patch({
+    collab: {
+      ...store.snapshot().collab,
+      captionLanguage: next,
+      captionTranslations: {},
+      captionTranslationError: null
+    }
+  });
+}
+function takePanelRequest(store) {
+  const request = store.snapshot().collab.panelRequest;
+  if (request === null) return null;
+  store.patch({ collab: { ...store.snapshot().collab, panelRequest: null } });
+  return request.panel;
+}
+function takeMoveRequest(store) {
+  const request = store.snapshot().collab.moveRequest;
+  if (request === null) return null;
+  store.patch({ collab: { ...store.snapshot().collab, moveRequest: null } });
+  return { roomId: request.roomId };
+}
 
-// src/react/icons.tsx
+// src/react/collab-hooks.ts
+import { useEffect as useEffect4, useRef as useRef4 } from "react";
+function useCollab() {
+  const host = useMeetHost();
+  const snapshot = useMeetSnapshot();
+  const isHost = useIsHost();
+  return {
+    collab: snapshot?.collab ?? null,
+    isHost,
+    localIdentity: snapshot?.localIdentity ?? null,
+    breakoutRoomId: snapshot?.breakoutRoomId ?? null,
+    act: (request) => performCollab(host, request),
+    moveTo: (roomId) => moveToRoom(host, roomId)
+  };
+}
+function useAvailableActivities() {
+  const { collab, isHost } = useCollab();
+  return availableActivities(collab, isHost);
+}
+function useActivityAttention() {
+  const { collab, isHost } = useCollab();
+  return activityAttention(collab, isHost);
+}
+function useCaptionTranslation(lines) {
+  const host = useMeetHost();
+  const snapshot = useMeetSnapshot();
+  const collab = snapshot?.collab ?? null;
+  const language = collab?.captionLanguage ?? null;
+  const asked = useRef4(/* @__PURE__ */ new Set());
+  const translations = collab?.captionTranslations ?? {};
+  const missing = untranslatedLines(lines, translations);
+  const key = `${language ?? ""}|${missing.map((l) => l.id).join(",")}`;
+  const pending = useRef4(missing);
+  pending.current = missing;
+  useEffect4(() => {
+    if (host === null || language === null) return;
+    const batch = nextTranslationBatch(pending.current, language, asked.current);
+    if (batch.length === 0) return;
+    void host.inRoom.translateCaptions(language, batch).catch(() => void 0);
+  }, [host, language, key]);
+  return { language, translations, error: collab?.captionTranslationError ?? null };
+}
+function useCollabPanelRequest(onRequest) {
+  const host = useMeetHost();
+  const at = useMeetSnapshot()?.collab.panelRequest?.at ?? null;
+  const callback = useRef4(onRequest);
+  callback.current = onRequest;
+  useEffect4(() => {
+    if (host === null) return;
+    const panel = takePanelRequest(host.store);
+    if (panel === null) return;
+    callback.current(panel);
+  }, [at, host]);
+}
+
+// src/core/reactions.ts
+var MEET_REACTIONS = ["\u{1F496}", "\u{1F44D}", "\u{1F389}", "\u{1F44F}", "\u{1F602}", "\u{1F62E}", "\u{1F622}", "\u{1F914}", "\u{1F44E}"];
+
+// src/react/facade.ts
+function useMeetCore() {
+  const host = useMeetHost();
+  const snapshot = useMeetSnapshot();
+  const devices = useDeviceSnapshot();
+  const role = useRole();
+  const isHost = useIsHost();
+  const observation = useCoreObservation();
+  return useMemo4(
+    () => ({ host, snapshot, devices, role, isHost, observation }),
+    [host, snapshot, devices, role, isHost, observation]
+  );
+}
+
+// src/skins/meet/components.tsx
+import { Alert, AlertDescription, Button, Checkbox, ErrorBox, Label, SegmentedControl, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@ai-matrx/design-system";
+
+// src/skins/meet/collab.tsx
+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";
 function Icon({ children, ...props }) {
   return /* @__PURE__ */ jsx3(
@@ -7754,12 +7809,6 @@ function LockIcon(props) {
     /* @__PURE__ */ jsx3("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" })
-  ] });
-}
 function SettingsIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
     /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "3" }),
@@ -7778,12 +7827,6 @@ function PinIcon(props) {
     /* @__PURE__ */ jsx3("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" })
-  ] });
-}
 function SmileIcon(props) {
   return /* @__PURE__ */ jsxs(Icon, { ...props, children: [
     /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "10" }),
@@ -7896,40 +7939,11 @@ function UndoIcon(props) {
   ] });
 }
 
-// src/react/collab.tsx
+// src/skins/meet/collab.tsx
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-function useCollab() {
-  const host = useMeetHost();
-  const snapshot = useMeetSnapshot();
-  const isHost = useIsHost();
-  return {
-    collab: snapshot?.collab ?? null,
-    isHost,
-    localIdentity: snapshot?.localIdentity ?? null,
-    breakoutRoomId: snapshot?.breakoutRoomId ?? null,
-    async act(request) {
-      if (host === null) return { ok: false, message: "This meeting is not connected." };
-      try {
-        const result = await host.inRoom.collab(request);
-        return { ok: true, message: result.message, itemId: result.itemId };
-      } catch (error) {
-        return { ok: false, message: error.message ?? "That did not work." };
-      }
-    },
-    async moveTo(roomId) {
-      if (host === null) return { ok: false, message: "This meeting is not connected." };
-      try {
-        await host.engine.moveToBreakout(roomId);
-        return { ok: true, message: roomId === null ? "Back in the main room." : "Joined the breakout room." };
-      } catch (error) {
-        return { ok: false, message: error.message ?? "That room could not be joined." };
-      }
-    }
-  };
-}
 function useNotice() {
   const [notice, setNotice] = useState3(null);
-  useEffect4(() => {
+  useEffect5(() => {
     if (notice === null) return void 0;
     const timer = setTimeout(() => setNotice(null), notice.failed ? 7e3 : 3e3);
     return () => clearTimeout(timer);
@@ -7953,24 +7967,6 @@ function ActivityIcon({ panel }) {
   if (panel === "whiteboard") return /* @__PURE__ */ jsx4(WhiteboardIcon, { ...props });
   return /* @__PURE__ */ jsx4(BreakoutIcon, { ...props });
 }
-function useAvailableActivities() {
-  const { collab, isHost } = useCollab();
-  const settings = collab?.settings ?? null;
-  if (settings === null) return [];
-  const out = [];
-  if (settings.whiteboardEnabled) out.push("whiteboard");
-  if (settings.pollsEnabled && (isHost || (collab?.polls.length ?? 0) > 0)) out.push("polls");
-  if (settings.qaEnabled) out.push("qa");
-  if (settings.breakoutsEnabled && (isHost || collab?.breakout?.state === "open")) out.push("breakouts");
-  return out;
-}
-function useActivityAttention() {
-  const { collab, isHost } = useCollab();
-  if (collab === null) return false;
-  if (collab.polls.some((poll) => poll.state === "live" && poll.myVote.length === 0 && !isHost)) return true;
-  if (isHost && collab.questions.some((q) => q.state === "open")) return true;
-  return false;
-}
 function ActivitiesControl({
   active,
   onOpen
@@ -8090,7 +8086,7 @@ function PollCard({ poll }) {
   const { act, isHost } = useCollab();
   const [picked, setPicked] = useState3(poll.myVote.slice());
   const [notice, show] = useNotice();
-  useEffect4(() => setPicked(poll.myVote.slice()), [poll.myVote]);
+  useEffect5(() => setPicked(poll.myVote.slice()), [poll.myVote]);
   const counts = poll.options.some((o) => o.votes !== void 0);
   const total = poll.options.reduce((sum, o) => sum + (o.votes ?? 0), 0);
   const canVote = poll.state === "live";
@@ -8348,7 +8344,7 @@ function WhiteboardPanel({ onClose }) {
   const [drawing, setDrawing] = useState3(null);
   const [pending, setPending] = useState3([]);
   const [notice, show] = useNotice();
-  const svgRef = useRef4(null);
+  const svgRef = useRef5(null);
   const strokes = collab?.strokes ?? [];
   const mine = strokes.filter((s) => s.by === localIdentity);
   const point = (event) => {
@@ -8490,7 +8486,7 @@ function clock(ms2) {
 var BREAKOUT_EXPIRE_RETRY_MS = 5e3;
 function useNow(active) {
   const [now, setNow] = useState3(() => Date.now());
-  useEffect4(() => {
+  useEffect5(() => {
     if (!active) return void 0;
     const timer = setInterval(() => setNow(Date.now()), 1e3);
     return () => clearInterval(timer);
@@ -8736,17 +8732,17 @@ function BreakoutBanner() {
   const assigned = assignedRoom(open, localIdentity);
   const [dismissedBroadcast, setDismissedBroadcast] = useState3(null);
   const [failure, setFailure] = useState3(null);
-  const expireAsked = useRef4(null);
+  const expireAsked = useRef5(null);
   const moveAt = collab?.moveRequest?.at ?? null;
-  useEffect4(() => {
-    const request = host?.store.snapshot().collab.moveRequest ?? null;
-    if (request === null || host === null) return;
-    host.store.patch({ collab: { ...host.store.snapshot().collab, moveRequest: null } });
+  useEffect5(() => {
+    if (host === null) return;
+    const request = takeMoveRequest(host.store);
+    if (request === null) return;
     const here = host.store.snapshot().breakoutRoomId;
     if ((here ?? null) === request.roomId) return;
     void moveTo(request.roomId).then((result) => setFailure(result.ok ? null : result.message));
   }, [moveAt, host, moveTo]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (open === null || remaining === null || remaining > 0) return;
     const asked = expireAsked.current;
     if (asked !== null && asked.id === open.id && now - asked.at < BREAKOUT_EXPIRE_RETRY_MS) return;
@@ -8791,26 +8787,6 @@ function BreakoutBanner() {
     ] }) : null
   ] });
 }
-function useCaptionTranslation(lines) {
-  const host = useMeetHost();
-  const snapshot = useMeetSnapshot();
-  const collab = snapshot?.collab ?? null;
-  const language = collab?.captionLanguage ?? null;
-  const asked = useRef4(/* @__PURE__ */ new Set());
-  const translations = collab?.captionTranslations ?? {};
-  const missing = lines.filter((line) => line.final && translations[line.id] === void 0).map(({ id, text: text3 }) => ({ id, text: text3 }));
-  const key = `${language ?? ""}|${missing.map((l) => l.id).join(",")}`;
-  const pending = useRef4(missing);
-  pending.current = missing;
-  useEffect4(() => {
-    if (host === null || language === null) return;
-    const batch = pending.current.filter((line) => !asked.current.has(`${language}:${line.id}`)).slice(-20);
-    if (batch.length === 0) return;
-    for (const line of batch) asked.current.add(`${language}:${line.id}`);
-    void host.inRoom.translateCaptions(language, batch).catch(() => void 0);
-  }, [host, language, key]);
-  return { language, translations, error: collab?.captionTranslationError ?? null };
-}
 function CaptionLanguageSettings() {
   const host = useMeetHost();
   const snapshot = useMeetSnapshot();
@@ -8831,14 +8807,7 @@ function CaptionLanguageSettings() {
           value: current,
           onChange: (event) => {
             const next = event.target.value === "" ? null : event.target.value;
-            host.store.patch({
-              collab: {
-                ...host.store.snapshot().collab,
-                captionLanguage: next,
-                captionTranslations: {},
-                captionTranslationError: null
-              }
-            });
+            setCaptionLanguage(host.store, next);
           },
           children: [
             /* @__PURE__ */ jsx4("option", { value: "", children: "Off \u2014 as spoken" }),
@@ -8854,20 +8823,8 @@ function CaptionLanguageSettings() {
     collab?.captionTranslationError != null ? /* @__PURE__ */ jsx4("p", { className: "mx-meet__panel-note mx-meet__collab-error", children: collab.captionTranslationError }) : null
   ] });
 }
-function useCollabPanelRequest(onRequest) {
-  const host = useMeetHost();
-  const at = useMeetSnapshot()?.collab.panelRequest?.at ?? null;
-  const callback = useRef4(onRequest);
-  callback.current = onRequest;
-  useEffect4(() => {
-    const request = host?.store.snapshot().collab.panelRequest ?? null;
-    if (request === null || host === null) return;
-    host.store.patch({ collab: { ...host.store.snapshot().collab, panelRequest: null } });
-    callback.current(request.panel);
-  }, [at, host]);
-}
 
-// src/react/components.tsx
+// src/skins/meet/components.tsx
 import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function InertNotice({ what }) {
   return /* @__PURE__ */ jsxs3("div", { className: "mx-meet__empty", role: "status", children: [
@@ -8951,10 +8908,6 @@ 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 }) });
-}
 function RoleBadge({ role }) {
   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" });
@@ -9079,7 +9032,6 @@ function Stage({ pageSize }) {
     ] }) : null
   ] });
 }
-var MEET_REACTIONS = ["\u{1F496}", "\u{1F44D}", "\u{1F389}", "\u{1F44F}", "\u{1F602}", "\u{1F62E}", "\u{1F622}", "\u{1F914}", "\u{1F44E}"];
 function ControlBar({ onLeave }) {
   const room = useRoom();
   const recording = useRecording();
@@ -9104,7 +9056,7 @@ function ControlBar({ onLeave }) {
   });
   const privateChatAt = snapshot?.privateChatRequest?.at ?? null;
   const meetStore = useMeetHost()?.store ?? null;
-  useEffect5(() => {
+  useEffect6(() => {
     const request = meetStore?.snapshot().privateChatRequest ?? null;
     if (request === null) return;
     setChatTo(request.to);
@@ -9343,12 +9295,12 @@ function useUnreadChat(open) {
   const chat = snapshot?.chat ?? [];
   const local = snapshot?.localIdentity ?? null;
   const [seen, setSeen] = useState4(0);
-  useEffect5(() => {
+  useEffect6(() => {
     if (open) setSeen(chat.length);
   }, [open, chat.length]);
   const loaded = snapshot?.chatLoaded === true;
   const [baseline, setBaseline] = useState4(null);
-  useEffect5(() => {
+  useEffect6(() => {
     if (loaded && baseline === null) setBaseline(chat.length);
   }, [loaded, baseline, chat.length]);
   if (open) return 0;
@@ -9361,7 +9313,7 @@ function Popover({
   children,
   placement = "up"
 }) {
-  const ref = useRef5(null);
+  const ref = useRef6(null);
   const [style, setStyle] = useState4({
     position: "fixed",
     top: 0,
@@ -9413,7 +9365,7 @@ function Popover({
       window.removeEventListener("scroll", place, true);
     };
   }, [placement]);
-  useEffect5(() => {
+  useEffect6(() => {
     const onKey = (event) => {
       if (event.key === "Escape") onClose();
     };
@@ -9447,7 +9399,7 @@ function MenuItem({
   );
 }
 function Toast({ text: text3, failed, onDone }) {
-  useEffect5(() => {
+  useEffect6(() => {
     const timer = setTimeout(onDone, failed ? 7e3 : 4e3);
     return () => clearTimeout(timer);
   }, [text3, failed, onDone]);
@@ -9486,7 +9438,7 @@ function MeetingOverlays() {
   ] });
 }
 function ShortcutsSheet({ onClose }) {
-  useEffect5(() => {
+  useEffect6(() => {
     const onKey = (event) => {
       if (event.key === "Escape") onClose();
     };
@@ -9524,7 +9476,7 @@ function PanelShell({
   onClose,
   children
 }) {
-  const ref = useRef5(null);
+  const ref = useRef6(null);
   useLayoutEffect(() => {
     const panel = ref.current;
     const root = panel?.closest(".mx-meet");
@@ -9554,15 +9506,15 @@ function ChatPanel({
   const room = useRoom();
   const [draft, setDraft] = useState4("");
   const [recipient, setRecipient] = useState4(to);
-  const listRef = useRef5(null);
+  const listRef = useRef6(null);
   const messages = snapshot?.chat ?? [];
   const local = snapshot?.localIdentity ?? null;
   const people = (snapshot?.participants ?? []).filter(
     (participant) => !participant.isLocal && !participant.isAgent
   );
   const recipientName = recipient === null ? null : people.find((p) => p.identity === recipient)?.displayName ?? null;
-  useEffect5(() => setRecipient(to), [to]);
-  useEffect5(() => {
+  useEffect6(() => setRecipient(to), [to]);
+  useEffect6(() => {
     const list = listRef.current;
     if (list !== null) list.scrollTop = list.scrollHeight;
   }, [messages.length]);
@@ -10018,7 +9970,7 @@ function DeviceSettings({
   const stream = useMicrophoneStream(microphone);
   const level = useAudioLevel(stream);
   const [testing, setTesting] = useState4(false);
-  useEffect5(() => {
+  useEffect6(() => {
     void host.devices.refresh();
   }, [host]);
   return /* @__PURE__ */ jsxs3("section", { className: "mx-meet__section", "aria-label": "Devices", children: [
@@ -10048,7 +10000,7 @@ function DeviceSettings({
 function EffectsSettings({ preview }) {
   const effects = useMediaEffects();
   const [error, setError] = useState4(null);
-  const fileRef = useRef5(null);
+  const fileRef = useRef6(null);
   const supported = effects.backgroundsSupported || preview != null || videoEffectsSupported();
   const apply = (next) => {
     setError(null);
@@ -10171,7 +10123,7 @@ async function playTestSound(sinkId) {
 }
 function useMicrophoneStream(deviceId2) {
   const [stream, setStream] = useState4(null);
-  useEffect5(() => {
+  useEffect6(() => {
     if (deviceId2 === "off") return void 0;
     let live = true;
     let opened = null;
@@ -10455,7 +10407,7 @@ function PreJoinBody({
   const micStream = useMicrophoneStream(microphone ? mic : "off");
   const level = useAudioLevel(micStream);
   const [speakerTesting, setSpeakerTesting] = useState4(false);
-  useEffect5(() => {
+  useEffect6(() => {
     void host.devices.refresh();
   }, [host]);
   return /* @__PURE__ */ jsxs3("div", { className: "mx-meet__prejoin", children: [
@@ -10573,10 +10525,10 @@ function PreJoinBody({
 function useCameraPreview(deviceId2, effects) {
   const [preview, setPreview] = useState4(null);
   const [error, setError] = useState4(null);
-  const current = useRef5(null);
-  const initialEffect = useRef5(toVideoEffect(effects));
+  const current = useRef6(null);
+  const initialEffect = useRef6(toVideoEffect(effects));
   initialEffect.current = toVideoEffect(effects);
-  useEffect5(() => {
+  useEffect6(() => {
     if (deviceId2 === void 0) return void 0;
     let live = true;
     setError(null);
@@ -10642,43 +10594,17 @@ function DevicePicker({
     )
   ] });
 }
-function MeetingRoom(props) {
-  const host = useMeetHost();
-  if (host === null) {
-    return /* @__PURE__ */ jsx5(MeetRoot, { meeting: props.meeting, children: /* @__PURE__ */ jsx5("div", { className: "mx-meet", children: /* @__PURE__ */ jsx5(InertNotice, { what: "This meeting" }) }) });
-  }
-  return /* @__PURE__ */ jsx5(MeetRoot, { meeting: props.meeting, children: /* @__PURE__ */ jsx5(MeetingRoomBody, { ...props, host }) });
-}
-function MeetingRoomBody({
+function MeetSkinRoom({
   roomName,
   meetingId,
   slug,
-  meeting: given,
   onLeave,
-  headerControls,
-  host
+  headerControls
 }) {
-  const snapshot = useMeetSnapshot();
-  const isHost = useIsHost();
+  const { host, snapshot, isHost } = useMeetCore();
   const elapsed = useElapsed(snapshot?.meeting?.startedAt ?? null);
   const phase = snapshot?.phase ?? "idle";
-  useEffect5(() => {
-    host.meetings.watch(roomName);
-  }, [host, roomName]);
-  useEffect5(() => {
-    if (given === void 0) return;
-    if (host.store.snapshot().meeting !== null) return;
-    host.store.patch({ meeting: given, locked: given.locked });
-  }, [host, given]);
-  const watchedId = meetingId ?? snapshot?.meeting?.id ?? null;
-  useEffect5(() => {
-    if (watchedId === null) return;
-    host.meetings.watchMeeting(asMeetingId(watchedId));
-  }, [host, watchedId]);
-  const record = snapshot?.meeting ?? given ?? null;
-  if (hasEnded(record) && phase !== "connected" && phase !== "reconnecting") {
-    return /* @__PURE__ */ jsx5(MeetingRecordView, { meeting: record });
-  }
+  if (host === null) return null;
   if (phase === "idle" || phase === "failed" || phase === "left") {
     return /* @__PURE__ */ jsx5("div", { className: "mx-meet", children: /* @__PURE__ */ jsx5(
       PreJoin,
@@ -10699,7 +10625,7 @@ function MeetingRoomBody({
       /* @__PURE__ */ jsx5("h1", { className: "mx-meet__title", children: snapshot?.meeting?.title ?? "Meeting" }),
       /* @__PURE__ */ jsxs3("span", { className: "mx-meet__meta", children: [
         participantSummary(snapshot?.participants ?? []),
-        elapsed > 0 ? ` \xB7 ${formatDurationMs4(elapsed)}` : ""
+        elapsed > 0 ? ` \xB7 ${formatDurationMs3(elapsed)}` : ""
       ] }),
       /* @__PURE__ */ jsx5(RecordingIndicator, {}),
       snapshot?.locked === true ? /* @__PURE__ */ jsxs3("span", { className: "mx-meet__badge", children: [
@@ -10716,8 +10642,8 @@ function MeetingRoomBody({
   ] });
 }
 function WaitingRoom({ roomName, host }) {
-  const knocked = useRef5(false);
-  useEffect5(() => {
+  const knocked = useRef6(false);
+  useEffect6(() => {
     if (knocked.current) return;
     knocked.current = true;
     host.meetings.knock(roomName);
@@ -10785,150 +10711,17 @@ function HostMenu() {
     end.notice !== null ? /* @__PURE__ */ jsx5("span", { className: "mx-meet__notice", role: "status", children: end.notice }) : null
   ] });
 }
-function CallButton({
-  person,
-  mode = "video",
-  children
-}) {
-  const calls = useCalls();
-  if (!calls.canCall) return null;
-  return /* @__PURE__ */ jsx5(
-    "button",
-    {
-      type: "button",
-      className: "mx-meet__call-button",
-      onClick: () => {
-        void calls.call([person.userId], mode);
-      },
-      "aria-label": `Call ${person.displayName}`,
-      children: children ?? /* @__PURE__ */ jsx5(PhoneIcon, { width: 18, height: 18 })
-    }
-  );
-}
-function IncomingCallHost() {
-  const calls = useCalls();
-  if (calls.incoming.length === 0) return null;
-  return /* @__PURE__ */ jsx5("div", { className: "mx-meet__ringing-stack", children: calls.incoming.map((invite) => /* @__PURE__ */ jsx5(IncomingCallCard, { invite }, invite.id)) });
-}
-function IncomingCallCard({ invite }) {
-  const calls = useCalls();
-  return /* @__PURE__ */ jsxs3("section", { className: "mx-meet__ringing", role: "alertdialog", "aria-label": "Incoming call", children: [
-    /* @__PURE__ */ jsx5(Avatar, { name: invite.callerName, url: invite.callerAvatarUrl, size: 56 }),
-    /* @__PURE__ */ jsxs3("div", { className: "mx-meet__ringing-text", children: [
-      /* @__PURE__ */ jsx5("strong", { children: invite.callerName }),
-      /* @__PURE__ */ jsx5("span", { children: invite.mode === "video" ? "Incoming video call" : "Incoming call" })
-    ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "mx-meet__ringing-actions", children: [
-      /* @__PURE__ */ jsx5(ControlButton, { label: "Decline", danger: true, onClick: () => void calls.decline(invite), children: /* @__PURE__ */ jsx5(PhoneOffIcon, {}) }),
-      invite.mode === "video" ? /* @__PURE__ */ jsx5(
-        ControlButton,
-        {
-          label: "Accept without video",
-          onClick: () => void calls.accept({ ...invite, mode: "audio" }),
-          children: /* @__PURE__ */ jsx5(CameraOffIcon, {})
-        }
-      ) : null,
-      /* @__PURE__ */ jsx5(ControlButton, { label: "Accept", onClick: () => void calls.accept(invite), children: /* @__PURE__ */ jsx5(PhoneIcon, {}) })
-    ] })
-  ] });
-}
-function ScheduleMeeting(props) {
-  const host = useMeetHost();
-  if (host === null) return /* @__PURE__ */ jsx5(InertNotice, { what: "Scheduling a meeting" });
-  return /* @__PURE__ */ jsx5(ScheduleMeetingBody, { ...props, host });
-}
-function ScheduleMeetingBody({
-  appBaseUrl,
-  onScheduled,
-  host
-}) {
-  const [title, setTitle] = useState4("");
-  const [when2, setWhen] = useState4("");
-  const [kind, setKind] = useState4("scheduled");
-  const [busy, setBusy] = useState4(false);
-  const [link, setLink] = useState4(null);
-  const [error, setError] = useState4(null);
-  const disabled = useMemo4(() => title.trim().length === 0 || busy, [title, busy]);
-  return /* @__PURE__ */ jsxs3(
-    "form",
-    {
-      className: "mx-meet__schedule",
-      onSubmit: (event) => {
-        event.preventDefault();
-        if (host.identity.userId === null) return;
-        setBusy(true);
-        setError(null);
-        void host.repository.getOrCreateMeeting({
-          organizationId: host.identity.organizationId,
-          hostUserId: host.identity.userId,
-          title: title.trim(),
-          kind,
-          scheduledFor: when2.length > 0 ? new Date(when2).toISOString() : null
-        }).then((meeting) => {
-          setLink(meetingLink(appBaseUrl, meeting.slug));
-          onScheduled?.(meeting.slug);
-        }).catch((thrown) => {
-          setError(
-            thrown.remedy ?? thrown.message ?? "The meeting could not be created."
-          );
-        }).finally(() => setBusy(false));
-      },
-      children: [
-        /* @__PURE__ */ jsxs3("label", { className: "mx-meet__field", children: [
-          /* @__PURE__ */ jsx5("span", { className: "mx-meet__field-label", children: "Title" }),
-          /* @__PURE__ */ jsx5(
-            "input",
-            {
-              className: "mx-meet__input",
-              value: title,
-              onChange: (event) => setTitle(event.target.value),
-              placeholder: "Weekly sync"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs3("label", { className: "mx-meet__field", children: [
-          /* @__PURE__ */ jsx5("span", { className: "mx-meet__field-label", children: "When" }),
-          /* @__PURE__ */ jsx5(
-            "input",
-            {
-              className: "mx-meet__input",
-              type: "datetime-local",
-              value: when2,
-              onChange: (event) => setWhen(event.target.value)
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs3("label", { className: "mx-meet__field", children: [
-          /* @__PURE__ */ jsx5("span", { className: "mx-meet__field-label", children: "Repeats" }),
-          /* @__PURE__ */ jsxs3(
-            "select",
-            {
-              className: "mx-meet__select",
-              value: kind,
-              onChange: (event) => setKind(event.target.value),
-              children: [
-                /* @__PURE__ */ jsx5("option", { value: "scheduled", children: "Once" }),
-                /* @__PURE__ */ jsx5("option", { value: "recurring", children: "Recurring \u2014 one link, every time" })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx5("button", { type: "submit", className: "mx-meet__primary", disabled, children: busy ? "Creating\u2026" : "Create meeting" }),
-        link !== null ? /* @__PURE__ */ jsxs3("p", { className: "mx-meet__link-out", children: [
-          /* @__PURE__ */ jsx5("span", { children: "Anyone with this link can join \u2014 no account needed." }),
-          /* @__PURE__ */ jsx5("code", { children: link })
-        ] }) : null,
-        error !== null ? /* @__PURE__ */ jsx5("p", { className: "mx-meet__error", children: error }) : 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)) });
 }
+function clockOf(iso) {
+  const at = new Date(iso);
+  if (Number.isNaN(at.getTime())) return "";
+  return at.toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit" });
+}
 function GuestRecordAccessControl({
   meeting
 }) {
@@ -10969,15 +10762,20 @@ function GuestRecordAccessControl({
     ] }) : null
   ] });
 }
+
+// src/react/record.tsx
+import { useEffect as useEffect7, useState as useState5 } from "react";
+import { ErrorBox as ErrorBox2 } from "@ai-matrx/design-system";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function MeetingRecordView({
   meeting,
   onRejoin
 }) {
   const host = useMeetHost();
   if (host === null) {
-    return /* @__PURE__ */ jsx5("div", { className: "mx-meet mx-meet--record", children: /* @__PURE__ */ jsx5(InertNotice, { what: "This meeting record" }) });
+    return /* @__PURE__ */ jsx6("div", { className: "mx-meet mx-meet--record", children: /* @__PURE__ */ jsx6(InertNotice, { what: "This meeting record" }) });
   }
-  return /* @__PURE__ */ jsx5(MeetingRecordBody, { meeting, ...onRejoin !== void 0 ? { onRejoin } : {} });
+  return /* @__PURE__ */ jsx6(MeetingRecordBody, { meeting, ...onRejoin !== void 0 ? { onRejoin } : {} });
 }
 function MeetingRecordBody({
   meeting,
@@ -10985,19 +10783,19 @@ function MeetingRecordBody({
 }) {
   const host = useRequiredMeetHost();
   const record = useMeetingRecord(meeting);
-  const [question, setQuestion] = useState4("");
-  const [tab, setTab] = useState4("summary");
+  const [question, setQuestion] = useState5("");
+  const [tab, setTab] = useState5("summary");
   if (record.failure !== null) {
-    return /* @__PURE__ */ jsx5("div", { className: "mx-meet mx-meet--record", children: /* @__PURE__ */ jsxs3(ErrorBox, { as: "div", className: "mx-meet__empty", error: record.failure, operation: "Open this meeting record", origin: "meet/components", children: [
-      /* @__PURE__ */ jsx5("p", { className: "mx-meet__empty-title", children: "This meeting record could not be opened" }),
-      /* @__PURE__ */ jsx5("p", { className: "mx-meet__empty-body", children: record.failure.message }),
-      /* @__PURE__ */ jsx5("p", { className: "mx-meet__empty-body", children: record.failure.remedy })
+    return /* @__PURE__ */ jsx6("div", { className: "mx-meet mx-meet--record", children: /* @__PURE__ */ jsxs4(ErrorBox2, { as: "div", className: "mx-meet__empty", error: record.failure, operation: "Open this meeting record", origin: "meet/components", children: [
+      /* @__PURE__ */ jsx6("p", { className: "mx-meet__empty-title", children: "This meeting record could not be opened" }),
+      /* @__PURE__ */ jsx6("p", { className: "mx-meet__empty-body", children: record.failure.message }),
+      /* @__PURE__ */ jsx6("p", { className: "mx-meet__empty-body", children: record.failure.remedy })
     ] }) });
   }
   if (record.loading || record.record === null) {
-    return /* @__PURE__ */ jsx5("div", { className: "mx-meet mx-meet--record", children: /* @__PURE__ */ jsxs3("div", { className: "mx-meet__empty", role: "status", children: [
-      /* @__PURE__ */ jsx5("p", { className: "mx-meet__empty-title", children: "Opening the meeting record\u2026" }),
-      /* @__PURE__ */ jsx5("p", { className: "mx-meet__empty-body", children: "Reading the summary, the notes and the transcript this meeting left behind." })
+    return /* @__PURE__ */ jsx6("div", { className: "mx-meet mx-meet--record", children: /* @__PURE__ */ jsxs4("div", { className: "mx-meet__empty", role: "status", children: [
+      /* @__PURE__ */ jsx6("p", { className: "mx-meet__empty-title", children: "Opening the meeting record\u2026" }),
+      /* @__PURE__ */ jsx6("p", { className: "mx-meet__empty-body", children: "Reading the summary, the notes and the transcript this meeting left behind." })
     ] }) });
   }
   const bundle = record.record;
@@ -11016,44 +10814,44 @@ function MeetingRecordBody({
   );
   const entirelyRestricted = everyRecordPartRefused && bundle.attendees.length === 0 && bundle.liveNotes.length === 0 && bundle.transcript.length === 0 && bundle.recording === null && bundle.summary === null && bundle.decisions.length === 0 && bundle.actionItems.length === 0;
   if (entirelyRestricted) {
-    return /* @__PURE__ */ jsxs3("div", { className: "mx-meet mx-meet--record", children: [
-      /* @__PURE__ */ jsx5("header", { className: "mx-meet__record-head", children: /* @__PURE__ */ jsxs3("div", { className: "mx-meet__record-head-inner", children: [
-        /* @__PURE__ */ jsx5("p", { className: "mx-meet__record-eyebrow", children: "Meeting record" }),
-        /* @__PURE__ */ jsx5("h1", { className: "mx-meet__record-title", children: meeting.title }),
-        /* @__PURE__ */ jsx5("p", { className: "mx-meet__record-when", children: meetingWhen(meeting) }),
-        onRejoin !== void 0 ? /* @__PURE__ */ jsx5("button", { type: "button", className: "mx-meet__link", onClick: onRejoin, children: "Open this link again" }) : null
+    return /* @__PURE__ */ jsxs4("div", { className: "mx-meet mx-meet--record", children: [
+      /* @__PURE__ */ jsx6("header", { className: "mx-meet__record-head", children: /* @__PURE__ */ jsxs4("div", { className: "mx-meet__record-head-inner", children: [
+        /* @__PURE__ */ jsx6("p", { className: "mx-meet__record-eyebrow", children: "Meeting record" }),
+        /* @__PURE__ */ jsx6("h1", { className: "mx-meet__record-title", children: meeting.title }),
+        /* @__PURE__ */ jsx6("p", { className: "mx-meet__record-when", children: meetingWhen(meeting) }),
+        onRejoin !== void 0 ? /* @__PURE__ */ jsx6("button", { type: "button", className: "mx-meet__link", onClick: onRejoin, children: "Open this link again" }) : null
       ] }) }),
-      /* @__PURE__ */ jsx5("div", { className: "mx-meet__record-body", children: restrictionNotices.map((notice2) => /* @__PURE__ */ jsxs3("div", { className: "mx-meet__record-access", role: "status", children: [
-        /* @__PURE__ */ jsx5("p", { className: "mx-meet__record-access-title", children: "About this record" }),
-        /* @__PURE__ */ jsx5("p", { className: "mx-meet__record-access-message", children: notice2.message }),
-        /* @__PURE__ */ jsx5("p", { className: "mx-meet__record-access-remedy", children: notice2.remedy })
+      /* @__PURE__ */ jsx6("div", { className: "mx-meet__record-body", children: restrictionNotices.map((notice2) => /* @__PURE__ */ jsxs4("div", { className: "mx-meet__record-access", role: "status", children: [
+        /* @__PURE__ */ jsx6("p", { className: "mx-meet__record-access-title", children: "About this record" }),
+        /* @__PURE__ */ jsx6("p", { className: "mx-meet__record-access-message", children: notice2.message }),
+        /* @__PURE__ */ jsx6("p", { className: "mx-meet__record-access-remedy", children: notice2.remedy })
       ] }, notice2.parts.join("-"))) })
     ] });
   }
-  return /* @__PURE__ */ jsxs3("div", { className: "mx-meet mx-meet--record", children: [
-    /* @__PURE__ */ jsx5("header", { className: "mx-meet__record-head", children: /* @__PURE__ */ jsxs3("div", { className: "mx-meet__record-head-inner", children: [
-      /* @__PURE__ */ jsx5("p", { className: "mx-meet__record-eyebrow", children: "Meeting record" }),
-      /* @__PURE__ */ jsx5("h1", { className: "mx-meet__record-title", children: meeting.title }),
-      /* @__PURE__ */ jsx5("p", { className: "mx-meet__record-when", children: meetingWhen(meeting) }),
-      onRejoin !== void 0 ? /* @__PURE__ */ jsx5("button", { type: "button", className: "mx-meet__link", onClick: onRejoin, children: "Open this link again" }) : null
+  return /* @__PURE__ */ jsxs4("div", { className: "mx-meet mx-meet--record", children: [
+    /* @__PURE__ */ jsx6("header", { className: "mx-meet__record-head", children: /* @__PURE__ */ jsxs4("div", { className: "mx-meet__record-head-inner", children: [
+      /* @__PURE__ */ jsx6("p", { className: "mx-meet__record-eyebrow", children: "Meeting record" }),
+      /* @__PURE__ */ jsx6("h1", { className: "mx-meet__record-title", children: meeting.title }),
+      /* @__PURE__ */ jsx6("p", { className: "mx-meet__record-when", children: meetingWhen(meeting) }),
+      onRejoin !== void 0 ? /* @__PURE__ */ jsx6("button", { type: "button", className: "mx-meet__link", onClick: onRejoin, children: "Open this link again" }) : null
     ] }) }),
-    /* @__PURE__ */ jsxs3("div", { className: "mx-meet__record-body", children: [
-      restrictionNotices.map((notice2) => /* @__PURE__ */ jsxs3("div", { className: "mx-meet__record-access", role: "status", children: [
-        /* @__PURE__ */ jsx5("p", { className: "mx-meet__record-access-title", children: "About this record" }),
-        /* @__PURE__ */ jsx5("p", { className: "mx-meet__record-access-message", children: notice2.message }),
-        /* @__PURE__ */ jsx5("p", { className: "mx-meet__record-access-remedy", children: notice2.remedy })
+    /* @__PURE__ */ jsxs4("div", { className: "mx-meet__record-body", children: [
+      restrictionNotices.map((notice2) => /* @__PURE__ */ jsxs4("div", { className: "mx-meet__record-access", role: "status", children: [
+        /* @__PURE__ */ jsx6("p", { className: "mx-meet__record-access-title", children: "About this record" }),
+        /* @__PURE__ */ jsx6("p", { className: "mx-meet__record-access-message", children: notice2.message }),
+        /* @__PURE__ */ jsx6("p", { className: "mx-meet__record-access-remedy", children: notice2.remedy })
       ] }, notice2.parts.join("-"))),
       attended.length === 0 ? (
         /* NOT SILENCE. A refused attendance read used to remove the whole
            section, so the reader could not tell "nobody" from "not shown". */
-        /* @__PURE__ */ jsxs3("section", { className: "mx-meet__record-section", "aria-label": "Who attended", children: [
-          /* @__PURE__ */ jsx5("h2", { className: "mx-meet__record-section-title", children: "Who attended" }),
-          /* @__PURE__ */ jsx5("p", { className: "mx-meet__panel-note", children: absenceSentence(bundle, "attendance", "Nobody is recorded as having attended.") })
+        /* @__PURE__ */ jsxs4("section", { className: "mx-meet__record-section", "aria-label": "Who attended", children: [
+          /* @__PURE__ */ jsx6("h2", { className: "mx-meet__record-section-title", children: "Who attended" }),
+          /* @__PURE__ */ jsx6("p", { className: "mx-meet__panel-note", children: absenceSentence(bundle, "attendance", "Nobody is recorded as having attended.") })
         ] })
-      ) : /* @__PURE__ */ jsxs3("section", { className: "mx-meet__record-section", "aria-label": "Who attended", children: [
-        /* @__PURE__ */ jsx5("h2", { className: "mx-meet__record-section-title", children: "Who attended" }),
-        /* @__PURE__ */ jsx5("ul", { className: "mx-meet__record-attendees", children: attended.map((person) => /* @__PURE__ */ jsxs3("li", { className: "mx-meet__record-attendee", children: [
-          /* @__PURE__ */ jsx5(
+      ) : /* @__PURE__ */ jsxs4("section", { className: "mx-meet__record-section", "aria-label": "Who attended", children: [
+        /* @__PURE__ */ jsx6("h2", { className: "mx-meet__record-section-title", children: "Who attended" }),
+        /* @__PURE__ */ jsx6("ul", { className: "mx-meet__record-attendees", children: attended.map((person) => /* @__PURE__ */ jsxs4("li", { className: "mx-meet__record-attendee", children: [
+          /* @__PURE__ */ jsx6(
             Avatar,
             {
               name: displayNameFor(bundle.names, person.identity, person.displayName),
@@ -11061,26 +10859,26 @@ function MeetingRecordBody({
               size: 28
             }
           ),
-          /* @__PURE__ */ jsxs3("span", { className: "mx-meet__person-name", children: [
+          /* @__PURE__ */ jsxs4("span", { className: "mx-meet__person-name", children: [
             displayNameFor(bundle.names, person.identity, person.displayName),
-            person.role === "host" ? /* @__PURE__ */ jsx5("span", { className: "mx-meet__badge", children: "Host" }) : null,
-            person.role === "guest" ? /* @__PURE__ */ jsx5("span", { className: "mx-meet__badge", children: "Guest" }) : null,
-            person.isAgent ? /* @__PURE__ */ jsx5("span", { className: "mx-meet__badge", children: "Meeting assistant" }) : null
+            person.role === "host" ? /* @__PURE__ */ jsx6("span", { className: "mx-meet__badge", children: "Host" }) : null,
+            person.role === "guest" ? /* @__PURE__ */ jsx6("span", { className: "mx-meet__badge", children: "Guest" }) : null,
+            person.isAgent ? /* @__PURE__ */ jsx6("span", { className: "mx-meet__badge", children: "Meeting assistant" }) : null
           ] })
         ] }, person.id)) })
       ] }),
-      bundle.recording !== null ? /* @__PURE__ */ jsxs3("section", { className: "mx-meet__record-section mx-meet__recording-card", "aria-label": "Recording", children: [
-        /* @__PURE__ */ jsx5("h2", { className: "mx-meet__record-section-title", children: "Recording" }),
-        fileId !== null ? /* @__PURE__ */ jsxs3(Fragment, { children: [
-          /* @__PURE__ */ jsx5(RecordingPlayer, { fileId }),
-          notice !== null ? /* @__PURE__ */ jsx5("p", { className: "mx-meet__panel-note", children: notice }) : null
-        ] }) : /* @__PURE__ */ jsx5("p", { className: "mx-meet__panel-note", children: notice ?? "This recording has no file." })
-      ] }) : wasRefused(bundle, "recording") ? /* @__PURE__ */ jsxs3("section", { className: "mx-meet__record-section", "aria-label": "Recording", children: [
-        /* @__PURE__ */ jsx5("h2", { className: "mx-meet__record-section-title", children: "Recording" }),
-        /* @__PURE__ */ jsx5("p", { className: "mx-meet__panel-note", children: REFUSED_ABSENCE })
+      bundle.recording !== null ? /* @__PURE__ */ jsxs4("section", { className: "mx-meet__record-section mx-meet__recording-card", "aria-label": "Recording", children: [
+        /* @__PURE__ */ jsx6("h2", { className: "mx-meet__record-section-title", children: "Recording" }),
+        fileId !== null ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+          /* @__PURE__ */ jsx6(RecordingPlayer, { fileId }),
+          notice !== null ? /* @__PURE__ */ jsx6("p", { className: "mx-meet__panel-note", children: notice }) : null
+        ] }) : /* @__PURE__ */ jsx6("p", { className: "mx-meet__panel-note", children: notice ?? "This recording has no file." })
+      ] }) : wasRefused(bundle, "recording") ? /* @__PURE__ */ jsxs4("section", { className: "mx-meet__record-section", "aria-label": "Recording", children: [
+        /* @__PURE__ */ jsx6("h2", { className: "mx-meet__record-section-title", children: "Recording" }),
+        /* @__PURE__ */ jsx6("p", { className: "mx-meet__panel-note", children: REFUSED_ABSENCE })
       ] }) : null,
-      /* @__PURE__ */ jsxs3("nav", { className: "mx-meet__record-tabs", "aria-label": "Meeting record sections", children: [
-        /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsxs4("nav", { className: "mx-meet__record-tabs", "aria-label": "Meeting record sections", children: [
+        /* @__PURE__ */ jsx6(
           "button",
           {
             type: "button",
@@ -11090,7 +10888,7 @@ function MeetingRecordBody({
             children: "Summary & decisions"
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           "button",
           {
             type: "button",
@@ -11100,7 +10898,7 @@ function MeetingRecordBody({
             children: "Notes as it happened"
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           "button",
           {
             type: "button",
@@ -11111,15 +10909,15 @@ function MeetingRecordBody({
           }
         )
       ] }),
-      tab === "summary" ? /* @__PURE__ */ jsxs3(Fragment, { children: [
-        /* @__PURE__ */ jsxs3("section", { className: "mx-meet__record-section", "aria-label": "Summary", children: [
-          /* @__PURE__ */ jsx5("h2", { className: "mx-meet__record-section-title", children: "Summary" }),
-          wrapUp.state === "written" ? /* @__PURE__ */ jsx5("p", { className: "mx-meet__record-summary", children: bundle.summary?.text }) : wrapUp.state === "in-progress" ? /* @__PURE__ */ jsxs3("div", { className: "mx-meet__panel-note", role: "status", children: [
-            /* @__PURE__ */ jsx5("p", { children: wrapUp.message }),
-            /* @__PURE__ */ jsx5("button", { type: "button", className: "mx-meet__link", onClick: record.reload, children: "Check again" })
-          ] }) : /* @__PURE__ */ jsx5("p", { className: "mx-meet__panel-note", role: wrapUp.state === "failed" ? "alert" : void 0, children: wrapUp.message })
+      tab === "summary" ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+        /* @__PURE__ */ jsxs4("section", { className: "mx-meet__record-section", "aria-label": "Summary", children: [
+          /* @__PURE__ */ jsx6("h2", { className: "mx-meet__record-section-title", children: "Summary" }),
+          wrapUp.state === "written" ? /* @__PURE__ */ jsx6("p", { className: "mx-meet__record-summary", children: bundle.summary?.text }) : wrapUp.state === "in-progress" ? /* @__PURE__ */ jsxs4("div", { className: "mx-meet__panel-note", role: "status", children: [
+            /* @__PURE__ */ jsx6("p", { children: wrapUp.message }),
+            /* @__PURE__ */ jsx6("button", { type: "button", className: "mx-meet__link", onClick: record.reload, children: "Check again" })
+          ] }) : /* @__PURE__ */ jsx6("p", { className: "mx-meet__panel-note", role: wrapUp.state === "failed" ? "alert" : void 0, children: wrapUp.message })
         ] }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           NoteList,
           {
             title: "Decisions",
@@ -11131,7 +10929,7 @@ function MeetingRecordBody({
             )
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           NoteList,
           {
             title: "Action items",
@@ -11144,42 +10942,42 @@ function MeetingRecordBody({
           }
         )
       ] }) : null,
-      tab === "notes" ? /* @__PURE__ */ jsxs3("section", { className: "mx-meet__record-section", "aria-label": "Notes as it happened", children: [
-        /* @__PURE__ */ jsx5("h2", { className: "mx-meet__record-section-title", children: "Notes as it happened" }),
-        bundle.liveNotes.length === 0 ? /* @__PURE__ */ jsx5("p", { className: "mx-meet__panel-note", children: absenceSentence(
+      tab === "notes" ? /* @__PURE__ */ jsxs4("section", { className: "mx-meet__record-section", "aria-label": "Notes as it happened", children: [
+        /* @__PURE__ */ jsx6("h2", { className: "mx-meet__record-section-title", children: "Notes as it happened" }),
+        bundle.liveNotes.length === 0 ? /* @__PURE__ */ jsx6("p", { className: "mx-meet__panel-note", children: absenceSentence(
           bundle,
           "notes",
           "No live notes are available for this meeting."
-        ) }) : /* @__PURE__ */ jsx5("ul", { className: "mx-meet__notes", children: bundle.liveNotes.map((note) => /* @__PURE__ */ jsxs3("li", { className: "mx-meet__note", children: [
-          note.window !== null ? /* @__PURE__ */ jsxs3("span", { className: "mx-meet__badge", children: [
+        ) }) : /* @__PURE__ */ jsx6("ul", { className: "mx-meet__notes", children: bundle.liveNotes.map((note) => /* @__PURE__ */ jsxs4("li", { className: "mx-meet__note", children: [
+          note.window !== null ? /* @__PURE__ */ jsxs4("span", { className: "mx-meet__badge", children: [
             "Window ",
             note.window
           ] }) : null,
           note.text
         ] }, note.id)) })
       ] }) : null,
-      tab === "transcript" ? /* @__PURE__ */ jsxs3("section", { className: "mx-meet__record-section", "aria-label": "Transcript", children: [
-        /* @__PURE__ */ jsxs3("h2", { className: "mx-meet__record-section-title", children: [
+      tab === "transcript" ? /* @__PURE__ */ jsxs4("section", { className: "mx-meet__record-section", "aria-label": "Transcript", children: [
+        /* @__PURE__ */ jsxs4("h2", { className: "mx-meet__record-section-title", children: [
           "Transcript",
-          /* @__PURE__ */ jsx5("span", { className: "mx-meet__record-count", children: bundle.transcript.length === 1 ? "1 line" : `${bundle.transcript.length} lines` })
+          /* @__PURE__ */ jsx6("span", { className: "mx-meet__record-count", children: bundle.transcript.length === 1 ? "1 line" : `${bundle.transcript.length} lines` })
         ] }),
-        blocks.length === 0 ? /* @__PURE__ */ jsx5("p", { className: "mx-meet__panel-note", children: absenceSentence(
+        blocks.length === 0 ? /* @__PURE__ */ jsx6("p", { className: "mx-meet__panel-note", children: absenceSentence(
           bundle,
           "transcript",
           "No transcript is available for this meeting."
-        ) }) : /* @__PURE__ */ jsx5("ol", { className: "mx-meet__record-transcript", children: blocks.map((block) => /* @__PURE__ */ jsxs3("li", { className: "mx-meet__record-block", children: [
-          /* @__PURE__ */ jsxs3("p", { className: "mx-meet__record-speaker", children: [
+        ) }) : /* @__PURE__ */ jsx6("ol", { className: "mx-meet__record-transcript", children: blocks.map((block) => /* @__PURE__ */ jsxs4("li", { className: "mx-meet__record-block", children: [
+          /* @__PURE__ */ jsxs4("p", { className: "mx-meet__record-speaker", children: [
             block.speaker,
-            /* @__PURE__ */ jsx5("time", { className: "mx-meet__record-time", dateTime: block.startedAt, children: clockOf(block.startedAt) })
+            /* @__PURE__ */ jsx6("time", { className: "mx-meet__record-time", dateTime: block.startedAt, children: clockOf(block.startedAt) })
           ] }),
-          block.lines.map((line) => /* @__PURE__ */ jsx5("p", { className: "mx-meet__record-line", children: line.text }, line.id))
+          block.lines.map((line) => /* @__PURE__ */ jsx6("p", { className: "mx-meet__record-line", children: line.text }, line.id))
         ] }, block.id)) })
       ] }) : null,
-      /* @__PURE__ */ jsx5(GuestRecordAccessControl, { meeting }),
-      /* @__PURE__ */ jsxs3("section", { className: "mx-meet__record-section", "aria-label": "Ask about this meeting", children: [
-        /* @__PURE__ */ jsx5("h2", { className: "mx-meet__record-section-title", children: "Ask about this meeting" }),
-        guestFinishedMeeting ? /* @__PURE__ */ jsx5("p", { className: "mx-meet__panel-note", children: "Sign in to ask the assistant about a meeting after it ends." }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
-          /* @__PURE__ */ jsxs3(
+      /* @__PURE__ */ jsx6(GuestRecordAccessControl, { meeting }),
+      /* @__PURE__ */ jsxs4("section", { className: "mx-meet__record-section", "aria-label": "Ask about this meeting", children: [
+        /* @__PURE__ */ jsx6("h2", { className: "mx-meet__record-section-title", children: "Ask about this meeting" }),
+        guestFinishedMeeting ? /* @__PURE__ */ jsx6("p", { className: "mx-meet__panel-note", children: "Sign in to ask the assistant about a meeting after it ends." }) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
+          /* @__PURE__ */ jsxs4(
             "form",
             {
               className: "mx-meet__composer",
@@ -11190,7 +10988,7 @@ function MeetingRecordBody({
                 void record.ask(trimmed);
               },
               children: [
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx6(
                   "input",
                   {
                     className: "mx-meet__input",
@@ -11200,7 +10998,7 @@ function MeetingRecordBody({
                     "aria-label": "Ask about this meeting"
                   }
                 ),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx6(
                   "button",
                   {
                     type: "submit",
@@ -11212,8 +11010,8 @@ function MeetingRecordBody({
               ]
             }
           ),
-          record.answer !== null ? /* @__PURE__ */ jsx5("p", { className: "mx-meet__answer", children: record.answer }) : null,
-          record.coverage !== null ? /* @__PURE__ */ jsxs3("p", { className: "mx-meet__coverage", children: [
+          record.answer !== null ? /* @__PURE__ */ jsx6("p", { className: "mx-meet__answer", children: record.answer }) : null,
+          record.coverage !== null ? /* @__PURE__ */ jsxs4("p", { className: "mx-meet__coverage", children: [
             "Answered from ",
             record.coverage.segmentsUsed,
             " of ",
@@ -11224,9 +11022,9 @@ function MeetingRecordBody({
             record.coverage.truncated ? " (the oldest were left out)" : "",
             "."
           ] }) : null,
-          record.askError !== null ? /* @__PURE__ */ jsxs3(ErrorBox, { as: "div", className: "mx-meet__refusal", error: record.askError, operation: "Ask about this meeting", origin: "meet/components", children: [
-            /* @__PURE__ */ jsx5("p", { className: "mx-meet__refusal-reason", children: record.askError.message }),
-            /* @__PURE__ */ jsx5("p", { className: "mx-meet__refusal-remedy", children: record.askError.remedy })
+          record.askError !== null ? /* @__PURE__ */ jsxs4(ErrorBox2, { as: "div", className: "mx-meet__refusal", error: record.askError, operation: "Ask about this meeting", origin: "meet/components", children: [
+            /* @__PURE__ */ jsx6("p", { className: "mx-meet__refusal-reason", children: record.askError.message }),
+            /* @__PURE__ */ jsx6("p", { className: "mx-meet__refusal-remedy", children: record.askError.remedy })
           ] }) : null
         ] })
       ] })
@@ -11237,21 +11035,21 @@ var STREAM_REFUSED = "Streaming playback did not start, so this recording was do
 var PLAYBACK_RETRY_REMEDY = "Reload the page and try again. If it still will not play, ask a meeting host to check the recording.";
 function RecordingPlayer(props) {
   const host = useMeetHost();
-  if (host === null) return /* @__PURE__ */ jsx5(InertNotice, { what: "This recording" });
-  return /* @__PURE__ */ jsx5(RecordingPlayerBody, { ...props, host });
+  if (host === null) return /* @__PURE__ */ jsx6(InertNotice, { what: "This recording" });
+  return /* @__PURE__ */ jsx6(RecordingPlayerBody, { ...props, host });
 }
 function RecordingPlayerBody({ fileId, host }) {
-  const [media, setMedia] = useState4(null);
-  const [loading, setLoading] = useState4(false);
-  const [error, setError] = useState4(null);
-  useEffect5(() => {
+  const [media, setMedia] = useState5(null);
+  const [loading, setLoading] = useState5(false);
+  const [error, setError] = useState5(null);
+  useEffect7(() => {
     if (media === null || media.kind !== "bytes") return void 0;
     const url = media.url;
     return () => URL.revokeObjectURL(url);
   }, [media]);
   if (media !== null) {
-    return /* @__PURE__ */ jsxs3("div", { className: "mx-meet__record-section", children: [
-      /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsxs4("div", { className: "mx-meet__record-section", children: [
+      /* @__PURE__ */ jsx6(
         "video",
         {
           className: "mx-meet__record-player",
@@ -11293,15 +11091,15 @@ function RecordingPlayerBody({ fileId, host }) {
           }
         }
       ),
-      media.fallbackReason !== null ? /* @__PURE__ */ jsx5("p", { className: "mx-meet__panel-note", children: media.fallbackReason }) : null
+      media.fallbackReason !== null ? /* @__PURE__ */ jsx6("p", { className: "mx-meet__panel-note", children: media.fallbackReason }) : null
     ] });
   }
-  return /* @__PURE__ */ jsxs3("div", { className: "mx-meet__record-section", children: [
-    error !== null ? /* @__PURE__ */ jsxs3(ErrorBox, { as: "div", className: "mx-meet__refusal", error, operation: "Complete this meeting action", origin: "meet/components", children: [
-      /* @__PURE__ */ jsx5("p", { className: "mx-meet__refusal-reason", children: error.message }),
-      /* @__PURE__ */ jsx5("p", { className: "mx-meet__refusal-remedy", children: error.remedy })
+  return /* @__PURE__ */ jsxs4("div", { className: "mx-meet__record-section", children: [
+    error !== null ? /* @__PURE__ */ jsxs4(ErrorBox2, { as: "div", className: "mx-meet__refusal", error, operation: "Complete this meeting action", origin: "meet/components", children: [
+      /* @__PURE__ */ jsx6("p", { className: "mx-meet__refusal-reason", children: error.message }),
+      /* @__PURE__ */ jsx6("p", { className: "mx-meet__refusal-remedy", children: error.remedy })
     ] }) : null,
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       "button",
       {
         type: "button",
@@ -11329,45 +11127,84 @@ function RecordingPlayerBody({ fileId, host }) {
     )
   ] });
 }
-function clockOf(iso) {
-  const at = new Date(iso);
-  if (Number.isNaN(at.getTime())) return "";
-  return at.toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit" });
-}
-function MeetingList({ baseUrl }) {
+
+// src/react/skin-root.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function MeetingSkinRoot(props) {
   const host = useMeetHost();
-  const list = useMeetings();
-  if (host === null) return /* @__PURE__ */ jsx5(InertNotice, { what: "Your meetings" });
-  if (list.failure !== null) {
-    return /* @__PURE__ */ jsxs3(ErrorBox, { as: "div", className: "mx-meet__empty", error: list.failure, operation: "List your meetings", origin: "meet/components", children: [
-      /* @__PURE__ */ jsx5("p", { className: "mx-meet__empty-title", children: "Your meetings could not be listed" }),
-      /* @__PURE__ */ jsx5("p", { className: "mx-meet__empty-body", children: list.failure.message }),
-      /* @__PURE__ */ jsx5("p", { className: "mx-meet__empty-body", children: list.failure.remedy })
-    ] });
-  }
-  if (list.loading) {
-    return /* @__PURE__ */ jsx5("div", { className: "mx-meet__empty", role: "status", children: /* @__PURE__ */ jsx5("p", { className: "mx-meet__empty-title", children: "Loading your meetings\u2026" }) });
+  if (host === null) {
+    return /* @__PURE__ */ jsx7(MeetRoot, { meeting: props.meeting, children: /* @__PURE__ */ jsx7("div", { className: "mx-meet", children: /* @__PURE__ */ jsx7(InertNotice, { what: "This meeting" }) }) });
   }
-  if (list.meetings.length === 0) {
-    return /* @__PURE__ */ jsxs3("div", { className: "mx-meet__empty", role: "status", children: [
-      /* @__PURE__ */ jsx5("p", { className: "mx-meet__empty-title", children: "No meetings yet" }),
-      /* @__PURE__ */ jsx5("p", { className: "mx-meet__empty-body", children: "Create one above. Its link works before, during and after the meeting \u2014 afterwards it opens the record." })
-    ] });
+  return /* @__PURE__ */ jsx7(MeetRoot, { meeting: props.meeting, children: /* @__PURE__ */ jsx7(MeetingSkinRootBody, { ...props, host }) });
+}
+function MeetingSkinRootBody({
+  roomName,
+  meetingId,
+  slug,
+  meeting: given,
+  onLeave,
+  headerControls,
+  host
+}) {
+  const snapshot = useMeetSnapshot();
+  const phase = snapshot?.phase ?? "idle";
+  useEffect8(() => {
+    host.meetings.watch(roomName);
+  }, [host, roomName]);
+  useEffect8(() => {
+    if (given === void 0) return;
+    if (host.store.snapshot().meeting !== null) return;
+    host.store.patch({ meeting: given, locked: given.locked });
+  }, [host, given]);
+  const watchedId = meetingId ?? snapshot?.meeting?.id ?? null;
+  useEffect8(() => {
+    if (watchedId === null) return;
+    host.meetings.watchMeeting(asMeetingId(watchedId));
+  }, [host, watchedId]);
+  const record = snapshot?.meeting ?? given ?? null;
+  if (hasEnded(record) && phase !== "connected" && phase !== "reconnecting") {
+    return /* @__PURE__ */ jsx7(MeetingRecordView, { meeting: record });
   }
-  const origin = baseUrl ?? (typeof window === "undefined" ? "" : window.location.origin);
-  return /* @__PURE__ */ jsx5("ul", { className: "mx-meet-list", children: list.meetings.map((meeting) => {
-    const ended = meeting.endedAt !== null;
-    return /* @__PURE__ */ jsxs3("li", { className: "mx-meet-list__row", children: [
-      /* @__PURE__ */ jsxs3("div", { className: "mx-meet-list__main", children: [
-        /* @__PURE__ */ jsxs3("span", { className: "mx-meet-list__title", children: [
-          meeting.title,
-          ended ? /* @__PURE__ */ jsx5("span", { className: "mx-meet__badge", children: "Ended" }) : null
-        ] }),
-        /* @__PURE__ */ jsx5("span", { className: "mx-meet-list__when", children: meetingWhen(meeting) })
-      ] }),
-      /* @__PURE__ */ jsx5("a", { className: "mx-meet-list__action", href: meetingLink(origin, meeting.slug), children: ended ? "Open the record" : "Join" })
-    ] }, meeting.id);
-  }) });
+  return /* @__PURE__ */ jsx7(
+    MeetSkinRoom,
+    {
+      roomName,
+      ...meetingId !== void 0 ? { meetingId } : {},
+      ...slug !== void 0 ? { slug } : {},
+      ...onLeave !== void 0 ? { onLeave } : {},
+      ...headerControls !== void 0 ? { headerControls } : {}
+    }
+  );
+}
+
+// src/react/calls-ui.tsx
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function IncomingCallHost() {
+  const calls = useCalls();
+  if (calls.incoming.length === 0) return null;
+  return /* @__PURE__ */ jsx8("div", { className: "mx-meet__ringing-stack", children: calls.incoming.map((invite) => /* @__PURE__ */ jsx8(IncomingCallCard, { invite }, invite.id)) });
+}
+function IncomingCallCard({ invite }) {
+  const calls = useCalls();
+  return /* @__PURE__ */ jsxs5("section", { className: "mx-meet__ringing", role: "alertdialog", "aria-label": "Incoming call", children: [
+    /* @__PURE__ */ jsx8(Avatar, { name: invite.callerName, url: invite.callerAvatarUrl, size: 56 }),
+    /* @__PURE__ */ jsxs5("div", { className: "mx-meet__ringing-text", children: [
+      /* @__PURE__ */ jsx8("strong", { children: invite.callerName }),
+      /* @__PURE__ */ jsx8("span", { children: invite.mode === "video" ? "Incoming video call" : "Incoming call" })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "mx-meet__ringing-actions", children: [
+      /* @__PURE__ */ jsx8(ControlButton, { label: "Decline", danger: true, onClick: () => void calls.decline(invite), children: /* @__PURE__ */ jsx8(PhoneOffIcon, {}) }),
+      invite.mode === "video" ? /* @__PURE__ */ jsx8(
+        ControlButton,
+        {
+          label: "Accept without video",
+          onClick: () => void calls.accept({ ...invite, mode: "audio" }),
+          children: /* @__PURE__ */ jsx8(CameraOffIcon, {})
+        }
+      ) : null,
+      /* @__PURE__ */ jsx8(ControlButton, { label: "Accept", onClick: () => void calls.accept(invite), children: /* @__PURE__ */ jsx8(PhoneIcon, {}) })
+    ] })
+  ] });
 }
 
 // src/core/invitations.ts
@@ -11522,54 +11359,26 @@ async function pushMeetingToGoogleCalendar(api, meetingId, target) {
 }
 export {
   ATTENDANCE_CSV_HEADER,
-  ActivitiesControl,
-  ActivitiesIcon,
-  AiPanel,
-  AttendanceNotice,
-  Avatar,
-  BreakoutBanner,
-  BreakoutIcon,
-  BreakoutsPanel,
   CALL_INVITE_KIND,
   CALL_INVITE_VERSION,
   CAPTION_LANGUAGES,
   CONSENT_NOTICE_ATTRIBUTE,
-  CallButton,
-  CameraIcon,
-  CameraOffIcon,
-  CaptionLanguageSettings,
-  Captions,
-  ChatIcon,
-  ChatPanel,
-  CheckIcon,
-  CloseIcon,
-  ConnectionDot,
-  ConsentNotice,
-  ControlBar,
-  ControlButton,
   DATA_TOPICS,
   DEFAULT_EFFECTS,
   DEFAULT_PAGE_SIZE,
   EMPTY_COLLAB,
   END_MEETING_NOT_SERVED,
   FILE_SESSION_PATH,
-  FlagIcon,
   GUEST_RECORD_ACCESS_CHOICES,
   GUEST_RECORD_ACCESS_LEVELS,
   GUEST_RECORD_ACCESS_METADATA_KEY,
   GUEST_RECORD_NOT_SHARED,
   GuestRecordAccessControl,
-  HandIcon,
-  HostMenu,
   IDLE_MEDIA,
   IDLE_TRACK,
   IncomingCallCard,
   IncomingCallHost,
-  KeyboardIcon,
   LISTEN_ONLY_NOTICE,
-  LayoutIcon,
-  LobbyPanel,
-  LockIcon,
   MEETING_INVITE_KIND,
   MEETING_INVITE_VERSION,
   MEETING_RECORD_GRACE_MS,
@@ -11584,33 +11393,14 @@ export {
   MeetError,
   MeetProvider,
   MeetRoot,
-  MeetingList,
-  MeetingOverlays,
   MeetingRecordView,
-  MeetingRoom,
-  MicIcon,
-  MicOffIcon,
-  MoreIcon,
+  MeetingSkinRoot,
   NOTE_TAKER_IDENTITY_PREFIX,
   NOTE_TAKER_METADATA_KEY,
   NO_GRANTS,
   ORGANIZATION_HEADER,
   PARTICIPANT_CAN_RECORD_ATTRIBUTE,
   PARTICIPANT_ROLE_ATTRIBUTE,
-  ParticipantTile,
-  PencilIcon,
-  PeopleIcon,
-  PeoplePanel,
-  PersonMenu,
-  PhoneIcon,
-  PhoneOffIcon,
-  PinIcon,
-  PollIcon,
-  PollsPanel,
-  PreJoin,
-  QaPanel,
-  QualityBars,
-  QuestionIcon,
   REACTION_TTL_MS,
   REFUSED_ABSENCE,
   ROLE_RANK,
@@ -11618,30 +11408,13 @@ export {
   ROOM_EVENT_PREFIX,
   ROOM_TOKEN_HEADER,
   RPCS,
-  ReactionOverlay,
-  RecordIcon,
-  RecordingIndicator,
   RecordingPlayer,
-  ScheduleMeeting,
-  ScreenShareIcon,
-  SearchIcon,
-  SettingsIcon,
-  SettingsPanel,
-  ShortcutsSheet,
-  SignalIcon,
-  SmileIcon,
-  SparklesIcon,
-  SpeakerIcon,
-  SpotlightIcon,
-  Stage,
   TABLES,
   TRANSCRIPTION_ATTRIBUTES,
   TRANSCRIPTION_TOPIC,
-  WhiteboardIcon,
-  WhiteboardPanel,
-  WifiLowIcon,
   absenceSentence,
   activeWrapUpSummary,
+  activityAttention,
   announceMeeting,
   applyCollabPacket,
   applyRoomEvent,
@@ -11658,6 +11431,7 @@ export {
   attendanceTotals,
   attendeeKey,
   autoAssign,
+  availableActivities,
   breakoutRemainingMs,
   callInviteAction,
   callInviteText,
@@ -11730,6 +11504,8 @@ export {
   mergeCaption,
   mergeRecord,
   microphoneNoticeCode,
+  moveToRoom,
+  nextTranslationBatch,
   normalizeDeviceError,
   normalizeMeetError,
   normalizeSpoken,
@@ -11746,6 +11522,7 @@ export {
   parseRoomToken,
   participantAttributes,
   participantSummary,
+  performCollab,
   playableRecordingFileId,
   projectInvitee,
   projectLibraryRecording,
@@ -11768,15 +11545,20 @@ export {
   rootAttributes,
   searchTranscript,
   sendFollowUp,
+  setCaptionLanguage,
   setGuestRecordAccess,
   settingsPatch,
   snapshotParticipant,
   snippetRuns,
   staticObservation,
   summarizeMeetingRecordRestrictions,
+  takeMoveRequest,
+  takePanelRequest,
   transcriptDocument,
   unavailableFrom,
   uniqueAttendees,
+  untranslatedLines,
+  useActivityAttention,
   useAudioLevel,
   useAvailableActivities,
   useCalls,
@@ -11801,6 +11583,7 @@ export {
   useLocalUserId,
   useMediaEffects,
   useMeetAi,
+  useMeetCore,
   useMeetHost,
   useMeetShortcuts,
   useMeetSnapshot,