@livo-tv/sdk 1.1.2 → 1.2.1

package/dist/studio/index.cjs

@@ -11,13 +11,13 @@ var tailwindMerge = require('tailwind-merge');
 var button = require('@base-ui/react/button');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
-var mergeProps = require('@base-ui/react/merge-props');
-var useRender = require('@base-ui/react/use-render');
-var menu = require('@base-ui/react/menu');
 var tooltip = require('@base-ui/react/tooltip');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 var input = require('@base-ui/react/input');
 var LabelPrimitive = require('@radix-ui/react-label');
+var mergeProps = require('@base-ui/react/merge-props');
+var useRender = require('@base-ui/react/use-render');
+var menu = require('@base-ui/react/menu');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -1086,6 +1086,93 @@ function StudioWindowGate({
   }
   return /* @__PURE__ */ jsxRuntime.jsx(StudioWindowGateContext.Provider, { value: { reportDuplicate }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children }, generation) });
 }
+
+// src/studio/lib/devices.ts
+var STUDIO_DEVICE_CHANGE_DEBOUNCE_MS = 250;
+var STORAGE_KEYS = {
+  audio: "livo-studio-device-audio",
+  video: "livo-studio-device-video",
+  speaker: "livo-studio-device-speaker"
+};
+var DEVICE_KINDS = ["audio", "video", "speaker"];
+function readStudioDeviceSelection(storage = defaultStorage()) {
+  return {
+    audio: storage?.getItem(STORAGE_KEYS.audio)?.trim() ?? "",
+    video: storage?.getItem(STORAGE_KEYS.video)?.trim() ?? "",
+    speaker: storage?.getItem(STORAGE_KEYS.speaker)?.trim() ?? ""
+  };
+}
+function persistStudioDeviceSelection(kind, deviceId, storage = defaultStorage()) {
+  storage?.setItem(STORAGE_KEYS[kind], deviceId.trim());
+}
+function mapMediaDevices(devices) {
+  const next = { audio: [], video: [], speaker: [] };
+  for (const device of devices) {
+    const kind = mediaKindToStudio(device.kind);
+    if (!kind || !device.deviceId) continue;
+    next[kind].push({
+      deviceId: device.deviceId,
+      label: device.label.trim() || `Device ${next[kind].length + 1}`
+    });
+  }
+  return next;
+}
+function resolveDeviceSelection(saved, devices) {
+  const effective = {
+    audio: "",
+    video: "",
+    speaker: ""
+  };
+  const missing = {
+    audio: false,
+    video: false,
+    speaker: false
+  };
+  for (const kind of DEVICE_KINDS) {
+    const id = saved[kind];
+    if (!id) continue;
+    if (devices[kind].some((option) => option.deviceId === id)) {
+      effective[kind] = id;
+      continue;
+    }
+    missing[kind] = true;
+  }
+  return { effective, missing };
+}
+function displayDeviceId(value, options) {
+  if (options.some((option) => option.deviceId === value)) return value;
+  return options[0]?.deviceId ?? "";
+}
+async function applyStudioDeviceSelection(setDevice, saved, listed) {
+  const { effective } = resolveDeviceSelection(saved, listed);
+  await Promise.allSettled(
+    DEVICE_KINDS.filter((kind) => effective[kind]).map(
+      (kind) => setDevice(kind, effective[kind])
+    )
+  );
+}
+function mediaKindToStudio(kind) {
+  switch (kind) {
+    case "audioinput":
+      return "audio";
+    case "videoinput":
+      return "video";
+    case "audiooutput":
+      return "speaker";
+    default: {
+      const _exhaustive = kind;
+      return _exhaustive;
+    }
+  }
+}
+function defaultStorage() {
+  if (typeof window === "undefined") return null;
+  try {
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
 function AudioWaveform({
   track,
   reducedMotion,
@@ -1159,1211 +1246,868 @@ function AudioWaveform({
     }
   );
 }
-function StudioDevicePreflight({
-  reducedMotion,
-  cameraLabel,
-  micLabel,
-  cameraOn = true,
-  muted = false
+function TooltipProvider({
+  delay = 0,
+  ...props
 }) {
-  const videoRef = react.useRef(null);
-  const streamRef = react.useRef(null);
-  const [audioTrack, setAudioTrack] = react.useState(null);
-  const [cameraOk, setCameraOk] = react.useState(false);
-  const [micOk, setMicOk] = react.useState(false);
-  react.useEffect(() => {
-    let cancelled = false;
-    void navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then((next) => {
-      if (cancelled) {
-        for (const track of next.getTracks()) track.stop();
-        return;
-      }
-      streamRef.current = next;
-      const video = next.getVideoTracks()[0] ?? null;
-      const audio = next.getAudioTracks()[0] ?? null;
-      setCameraOk(Boolean(video));
-      setMicOk(Boolean(audio));
-      setAudioTrack(audio);
-      if (videoRef.current && video) {
-        videoRef.current.srcObject = next;
-      }
-    }).catch(() => {
-      if (!cancelled) {
-        setCameraOk(false);
-        setMicOk(false);
-      }
-    });
-    return () => {
-      cancelled = true;
-      if (streamRef.current) {
-        for (const track of streamRef.current.getTracks()) track.stop();
-        streamRef.current = null;
-      }
-    };
-  }, []);
-  react.useEffect(() => {
-    const stream = streamRef.current;
-    if (!stream) return;
-    for (const track of stream.getVideoTracks()) track.enabled = cameraOn;
-    for (const track of stream.getAudioTracks()) track.enabled = !muted;
-  }, [cameraOn, muted]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col items-center gap-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "video",
-      {
-        ref: videoRef,
-        autoPlay: true,
-        muted: true,
-        playsInline: true,
-        className: "bg-muted aspect-video w-full rounded-xl object-cover"
-      }
-    ),
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    tooltip.Tooltip.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delay,
+      ...props
+    }
+  );
+}
+function Tooltip({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    tooltip.Tooltip.Positioner,
+    {
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      className: "isolate z-50",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        tooltip.Tooltip.Popup,
+        {
+          "data-slot": "tooltip-content",
+          className: cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          ),
+          ...props,
+          children: [
+            children,
+            /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })
+          ]
+        }
+      )
+    }
+  ) });
+}
+function ControlIcon({
+  label,
+  pressed = false,
+  disabled = false,
+  pending = false,
+  tone = "default",
+  badge,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      AudioWaveform,
+      TooltipTrigger,
       {
-        track: muted ? null : audioTrack,
-        reducedMotion
+        render: /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            type: "button",
+            size: "icon-lg",
+            variant: tone === "danger" ? "destructive" : pressed ? "default" : "secondary",
+            className: "overflow-visible",
+            "aria-label": label,
+            "aria-pressed": pressed,
+            disabled,
+            onClick
+          }
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative overflow-visible", children: [
+          pending ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin motion-reduce:animate-none" }) : children,
+          badge != null && badge > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-primary text-primary-foreground absolute -top-2 -right-2 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[0.65rem]", children: badge }) : null
+        ] })
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-muted-foreground text-sm", role: "status", children: [
-      cameraLabel,
-      ": ",
-      cameraOk && cameraOn ? "OK" : "\u2014",
-      " \xB7 ",
-      micLabel,
-      ":",
-      " ",
-      micOk && !muted ? "OK" : "\u2014"
-    ] })
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: label })
   ] });
 }
-var badgeVariants = classVarianceAuthority.cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground",
-        secondary: "border-transparent bg-secondary text-secondary-foreground",
-        destructive: "border-transparent bg-destructive text-destructive-foreground",
-        outline: "text-foreground",
-        success: "border-transparent bg-chart-5/15 text-chart-5 dark:bg-chart-5/25",
-        warning: "border-transparent bg-chart-4/15 text-chart-4 dark:bg-chart-4/25"
-      }
-    },
-    defaultVariants: { variant: "default" }
-  }
-);
-function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(badgeVariants({ variant }), className), ...props });
+function Dialog({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { "data-slot": "dialog", ...props });
 }
-function StudioPipPanel({
-  meeting,
-  labels,
-  cameraOn,
-  muted,
-  screenOn,
-  showMediaControls = true,
-  showScreenControl = false,
-  canShareFreely = false,
-  screenAvailable = true,
-  screenPending = false,
-  shareGrant = "idle",
-  onAir,
-  elapsed,
-  unread = 0,
-  onToggleMute,
-  onToggleCamera,
-  onToggleScreen,
-  onAskToShare,
-  onCancelShareRequest,
-  onBack
+function DialogPortal({
+  ...props
 }) {
-  const tiles = meeting.participants();
-  const spotlight = resolveStudioPipSpotlight(tiles, meeting.activeSpeakerId());
-  const selfView = resolveStudioPipSelfView(tiles, spotlight);
-  const speaking = spotlight !== null && spotlight.participantId === meeting.activeSpeakerId();
-  const backLabel = unread > 0 ? `${labels.backToStudio} (${unread})` : labels.backToStudio;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Overlay,
     {
-      role: "region",
-      "aria-label": labels.pipTitle,
-      className: "bg-background flex h-full min-h-0 flex-col gap-2 p-2 text-foreground",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cn(
-              "bg-muted relative min-h-0 flex-1 overflow-hidden rounded-xl",
-              speaking && "ring-2 ring-primary"
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                PipSpotlight,
-                {
-                  meeting,
-                  spotlight,
-                  cameraOffLabel: labels.cameraOff
-                }
-              ),
-              onAir ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-2 left-2 flex items-center gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full border bg-background/80 px-2 py-0.5 text-xs backdrop-blur-sm", children: labels.live }),
-                elapsed ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground tabular-nums text-xs", children: elapsed }) : null
-              ] }) : null,
-              selfView ? /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  "data-testid": "pip-self-view",
-                  className: "absolute right-2 bottom-2 aspect-video w-[30%] overflow-hidden rounded-lg ring-1 ring-white/40",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(PipTrackVideo, { track: meeting.localVideoTrack(), fit: "cover" })
-                }
-              ) : null
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: "flex flex-wrap items-center justify-center gap-2", children: [
-          showMediaControls ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              PipControl,
-              {
-                label: muted ? labels.unmute : labels.mute,
-                off: muted,
-                onClick: onToggleMute,
-                children: muted ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MicOff, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, {})
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              PipControl,
-              {
-                label: labels.camera,
-                off: !cameraOn,
-                onClick: onToggleCamera,
-                children: cameraOn ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.VideoOff, {})
-              }
-            )
-          ] }) : null,
-          showMediaControls && (showScreenControl || screenOn) ? pipScreenControls({
-            labels,
-            screenOn,
-            canShareFreely,
-            screenAvailable,
-            screenPending,
-            shareGrant,
-            onToggleScreen,
-            onAskToShare,
-            onCancelShareRequest
-          }) : null,
-          /* @__PURE__ */ jsxRuntime.jsx(PipControl, { label: backLabel, onClick: onBack, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Undo2, {}),
-            unread > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "absolute -top-2 -right-2 h-4 min-w-4 px-1 text-[0.65rem]", children: unread }) : null
-          ] }) })
-        ] })
-      ]
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
     }
   );
 }
-function PipSpotlight({
-  meeting,
-  spotlight,
-  cameraOffLabel
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
 }) {
-  if (!spotlight || spotlight.kind === "idle") {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-2", children: [
-      spotlight?.picture ? /* @__PURE__ */ jsxRuntime.jsx(
-        "img",
-        {
-          src: spotlight.picture,
-          alt: "",
-          className: "size-14 rounded-full object-cover"
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-background flex size-14 items-center justify-center rounded-full text-lg", children: (spotlight?.name ?? "?").slice(0, 1).toUpperCase() }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-xs", children: spotlight?.name ?? cameraOffLabel })
-    ] });
-  }
-  const track = spotlight.kind === "screen" ? meeting.participantScreenTrack(spotlight.participantId) : meeting.participantVideoTrack(spotlight.participantId);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      PipTrackVideo,
+  return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      DialogPrimitive__namespace.Content,
       {
-        track,
-        fit: spotlight.kind === "screen" ? "contain" : "cover"
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton ? /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "size-4" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+          ] }) : null
+        ]
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "absolute inset-x-0 bottom-0 bg-linear-to-t from-black/70 to-transparent p-2 text-xs font-medium text-white", children: spotlight.name })
+    )
   ] });
 }
-function PipTrackVideo({
-  track,
-  fit
-}) {
-  const ref = react.useRef(null);
-  react.useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    if (!track) {
-      el.srcObject = null;
-      return;
-    }
-    el.srcObject = new MediaStream([track]);
-    void el.play().catch(() => void 0);
-    return () => {
-      el.srcObject = null;
-    };
-  }, [track]);
+function DialogHeader({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "video",
+    "div",
     {
-      ref,
-      autoPlay: true,
-      playsInline: true,
-      muted: true,
-      className: cn(
-        "absolute inset-0 size-full",
-        fit === "contain" ? "object-contain" : "object-cover"
-      )
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
     }
   );
 }
-function pipScreenControls({
-  labels,
-  screenOn,
-  canShareFreely,
-  screenAvailable,
-  screenPending,
-  shareGrant,
-  onToggleScreen,
-  onAskToShare,
-  onCancelShareRequest
-}) {
-  if (canShareFreely || screenOn) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      PipControl,
-      {
-        label: screenOn ? labels.stopScreen : labels.screen,
-        off: screenOn,
-        disabled: screenPending || !screenAvailable && !screenOn,
-        onClick: onToggleScreen,
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MonitorUp, {})
-      }
-    );
-  }
-  if (shareGrant === "requested") {
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        PipControl,
-        {
-          label: labels.shareRequested,
-          off: true,
-          disabled: true,
-          onClick: () => void 0,
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MonitorUp, {})
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        PipControl,
-        {
-          label: labels.cancelShareRequest,
-          onClick: () => onCancelShareRequest?.(),
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {})
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(PipControl, { label: labels.askToShare, onClick: () => onAskToShare?.(), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MonitorUp, {}) });
-}
-function PipControl({
-  label,
-  onClick,
-  off = false,
-  disabled = false,
-  children
+function DialogTitle({
+  className,
+  ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Button,
+    DialogPrimitive__namespace.Title,
     {
-      type: "button",
-      size: "icon-lg",
-      variant: off ? "destructive" : "secondary",
-      className: "size-10 rounded-full",
-      "aria-label": label,
-      disabled,
-      onClick,
-      children
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
     }
   );
 }
-function StudioRemoteAudio({
-  meeting,
-  participantId
+function DialogDescription({
+  className,
+  ...props
 }) {
-  const ref = react.useRef(null);
-  react.useEffect(() => {
-    meeting.attachAudio(participantId, ref.current);
-    return () => meeting.attachAudio(participantId, null);
-  }, [meeting, participantId]);
-  return /* @__PURE__ */ jsxRuntime.jsx("audio", { ref, autoPlay: true, className: "sr-only" });
-}
-function BubbleGroup({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    DialogPrimitive__namespace.Description,
     {
-      "data-slot": "bubble-group",
-      className: cn("flex min-w-0 flex-col gap-2", className),
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
       ...props
     }
   );
 }
-var bubbleVariants = classVarianceAuthority.cva(
-  "group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full",
-  {
-    variants: {
-      variant: {
-        default: "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
-        secondary: "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
-        muted: "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
-        tinted: "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
-        outline: "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
-        ghost: "border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50",
-        destructive: "*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    input.Input,
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      ),
+      ...props
     }
-  }
-);
-function Bubble({
-  variant = "default",
-  align = "start",
+  );
+}
+function Label({
   className,
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    LabelPrimitive__namespace.Root,
     {
-      "data-slot": "bubble",
-      "data-variant": variant,
-      "data-align": align,
-      className: cn(bubbleVariants({ variant }), className),
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
       ...props
     }
   );
 }
-function BubbleContent({
-  className,
-  render,
-  ...props
-}) {
-  return useRender.useRender({
-    defaultTagName: "div",
-    props: mergeProps.mergeProps(
-      {
-        className: cn(
-          "w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50",
-          className
-        )
-      },
-      props
-    ),
-    render,
-    state: {
-      slot: "bubble-content"
+var EMPTY_DEVICES = {
+  audio: [],
+  video: [],
+  speaker: []
+};
+function useMediaDevices(refreshKey = 0, enabled = true) {
+  const [devices, setDevices] = react.useState(EMPTY_DEVICES);
+  react.useEffect(() => {
+    if (!enabled) return;
+    if (typeof navigator === "undefined" || !navigator.mediaDevices) {
+      return;
     }
-  });
-}
-classVarianceAuthority.cva(
-  "absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0",
-  {
-    variants: {
-      side: {
-        top: "top-0 -translate-y-3/4",
-        bottom: "bottom-0 translate-y-3/4"
-      },
-      align: {
-        start: "left-3",
-        end: "right-3"
+    let cancelled = false;
+    let timer;
+    const load = async () => {
+      try {
+        const list = await navigator.mediaDevices.enumerateDevices();
+        if (!cancelled) setDevices(mapMediaDevices(list));
+      } catch {
+        if (!cancelled) setDevices(EMPTY_DEVICES);
       }
-    },
-    defaultVariants: {
-      side: "bottom",
-      align: "end"
-    }
-  }
-);
+    };
+    const onChange = () => {
+      window.clearTimeout(timer);
+      timer = window.setTimeout(() => {
+        void load();
+      }, STUDIO_DEVICE_CHANGE_DEBOUNCE_MS);
+    };
+    void load();
+    navigator.mediaDevices.addEventListener("devicechange", onChange);
+    return () => {
+      cancelled = true;
+      window.clearTimeout(timer);
+      navigator.mediaDevices.removeEventListener("devicechange", onChange);
+    };
+  }, [enabled, refreshKey]);
+  return devices;
+}
 
-// src/studio/lib/chat-groups.ts
-function groupChatMessages(messages, selfId) {
-  const groups = [];
-  for (const row of messages) {
-    const mine = Boolean(selfId) && row.userId === selfId;
-    const last = groups[groups.length - 1];
-    if (last && last.userId === row.userId && last.mine === mine) {
-      last.rows.push(row);
-      continue;
+// src/studio/lib/speaker-test.ts
+var TEST_MS = 400;
+var TEST_HZ = 440;
+async function playSpeakerTest(deviceId) {
+  const AudioCtx = window.AudioContext || window.webkitAudioContext;
+  if (!AudioCtx) {
+    throw new Error("AudioContext unavailable");
+  }
+  const ctx = new AudioCtx();
+  void ctx.resume();
+  const oscillator = ctx.createOscillator();
+  const gain = ctx.createGain();
+  oscillator.type = "sine";
+  oscillator.frequency.value = TEST_HZ;
+  gain.gain.value = 0.18;
+  oscillator.connect(gain);
+  let audio = null;
+  try {
+    const probe = document.createElement("audio");
+    const canRoute = Boolean(deviceId) && typeof probe.setSinkId === "function";
+    if (canRoute && deviceId) {
+      const destination = ctx.createMediaStreamDestination();
+      gain.connect(destination);
+      audio = probe;
+      audio.autoplay = true;
+      audio.playsInline = true;
+      audio.srcObject = destination.stream;
+      try {
+        await audio.setSinkId?.(deviceId);
+        await audio.play();
+      } catch {
+        gain.disconnect();
+        gain.connect(ctx.destination);
+        audio.srcObject = null;
+        audio.remove();
+        audio = null;
+      }
+    } else {
+      gain.connect(ctx.destination);
     }
-    groups.push({
-      userId: row.userId,
-      name: row.name,
-      mine,
-      rows: [row]
+    oscillator.start();
+    await new Promise((resolve) => {
+      window.setTimeout(resolve, TEST_MS);
     });
+    oscillator.stop();
+  } finally {
+    if (audio) {
+      audio.srcObject = null;
+      audio.remove();
+    }
+    await ctx.close();
   }
-  return groups;
 }
-function senderInitials(name) {
-  const parts = name.trim().split(/\s+/).filter((part) => part.length > 0);
-  if (parts.length === 0) return "?";
-  const first = parts[0];
-  if (parts.length === 1) return first.slice(0, 2).toUpperCase();
-  return `${first[0]}${parts[1][0]}`.toUpperCase();
+function StudioDeviceSelectGroup({
+  devices,
+  selected,
+  labels,
+  onChange,
+  speakerAction
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[8.5rem_minmax(0,1fr)] items-center gap-x-3 gap-y-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DeviceRow,
+      {
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, {}),
+        label: labels.cameraDevice,
+        options: devices.video,
+        value: selected.video,
+        onChange: (id) => onChange("video", id)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DeviceRow,
+      {
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, {}),
+        label: labels.micDevice,
+        options: devices.audio,
+        value: selected.audio,
+        onChange: (id) => onChange("audio", id)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DeviceRow,
+      {
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Volume2, {}),
+        label: labels.speakerDevice,
+        options: devices.speaker,
+        value: selected.speaker,
+        onChange: (id) => onChange("speaker", id),
+        action: speakerAction
+      }
+    )
+  ] });
 }
-function StudioChatPanel({
+function DeviceRow({
+  icon,
+  label,
+  options,
+  value,
+  onChange,
+  action
+}) {
+  const display = displayDeviceId(value, options);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground flex min-w-0 items-center gap-2 text-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "[&_svg]:size-4", "aria-hidden": true, children: icon }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+      options.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+        "select",
+        {
+          "aria-label": label,
+          className: cn(
+            "border-input bg-background h-8 min-w-0 flex-1 rounded-md border px-2 text-base md:text-sm"
+          ),
+          value: display,
+          onChange: (event) => onChange(event.target.value),
+          children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.deviceId, children: option.label }, option.deviceId))
+        }
+      ) : null,
+      action
+    ] })
+  ] });
+}
+function StudioSettingsDialog({
+  open,
+  onOpenChange,
   meeting,
-  selfId,
-  participants,
-  isModerator: isModerator2,
-  labels
+  labels,
+  reducedMotion,
+  cameraOn
 }) {
-  const [tick, setTick] = react.useState(0);
-  const [draft, setDraft] = react.useState("");
-  const [editingId, setEditingId] = react.useState(null);
-  const listRef = react.useRef(null);
-  react.useEffect(
-    () => meeting.subscribeChat(() => setTick((n) => n + 1)),
-    [meeting]
-  );
-  const messages = react.useMemo(
-    () => meeting.chatMessages().filter((row) => !row.targetUserIds?.length),
-    [meeting, tick]
-  );
-  const pinned = react.useMemo(() => meeting.pinnedChatMessages(), [meeting, tick]);
-  const limit = meeting.chatMaxTextLimit();
-  const pictures = react.useMemo(() => {
-    const map = /* @__PURE__ */ new Map();
-    for (const row of participants) {
-      if (row.userId) map.set(row.userId, row.picture);
-    }
-    return map;
-  }, [participants]);
-  const groups = react.useMemo(
-    () => groupChatMessages(messages, selfId),
-    [messages, selfId]
+  const devices = useMediaDevices(open ? 1 : 0, open);
+  const [saved, setSaved] = react.useState(
+    () => readStudioDeviceSelection()
   );
+  const [audioTrack, setAudioTrack] = react.useState(null);
+  const [videoTrack, setVideoTrack] = react.useState(null);
+  const [testingSpeaker, setTestingSpeaker] = react.useState(false);
+  const [displayName, setDisplayName] = react.useState("");
+  const [savedDisplayName, setSavedDisplayName] = react.useState("");
+  const [savingDisplayName, setSavingDisplayName] = react.useState(false);
+  const { effective } = resolveDeviceSelection(saved, devices);
   react.useEffect(() => {
-    const list = listRef.current;
-    if (!list) return;
-    list.scrollTop = list.scrollHeight;
-  }, [messages.length]);
-  async function onSend() {
-    const text = draft.trim();
-    if (!text) return;
-    setDraft("");
+    if (!open) return;
+    setSaved(readStudioDeviceSelection());
+  }, [open]);
+  react.useEffect(() => {
+    if (!open) return;
+    const selfName = meeting.participants().find((row) => row.isSelf)?.name?.trim() ?? "";
+    setDisplayName(selfName);
+    setSavedDisplayName(selfName);
+  }, [meeting, open]);
+  react.useEffect(() => {
+    if (!open) return;
+    const sync = () => {
+      setAudioTrack(meeting.localAudioTrack());
+      setVideoTrack(meeting.localVideoTrack());
+    };
+    sync();
+    return meeting.subscribeMedia(sync);
+  }, [meeting, open]);
+  const trimmedDisplayName = displayName.trim();
+  const displayNameUnchanged = trimmedDisplayName === savedDisplayName;
+  const displayNameSaveDisabled = !trimmedDisplayName || displayNameUnchanged || savingDisplayName;
+  async function onChange(kind, deviceId) {
+    persistStudioDeviceSelection(kind, deviceId);
+    setSaved((prev) => ({ ...prev, [kind]: deviceId }));
     try {
-      if (editingId) {
-        await meeting.editChatMessage(editingId, text);
-        setEditingId(null);
-        return;
-      }
-      await meeting.sendChatMessage(text);
-    } catch (error) {
-      const message = error instanceof Error ? error.message.toLowerCase() : "";
-      sonner.toast.error(
-        message.includes("rate") ? labels.chatRateLimited : labels.chatError
-      );
+      await meeting.setDevice(kind, deviceId);
+    } catch {
     }
   }
-  function messageActions(row, mine) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "p",
-      {
-        className: mine ? "text-muted-foreground flex flex-wrap justify-end gap-2 text-xs" : "text-muted-foreground flex flex-wrap gap-2 text-xs",
-        children: [
-          row.isEdited ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: labels.chatEdited }) : null,
-          mine ? /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                setEditingId(row.id);
-                setDraft(row.text);
-              },
-              children: labels.chatEdit
-            }
-          ) : null,
-          isModerator2 || mine ? /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => void meeting.deleteChatMessage(row.id).catch(() => sonner.toast.error(labels.chatError)),
-              children: labels.chatDelete
-            }
-          ) : null,
-          isModerator2 ? /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => void meeting.pinChatMessage(row.id, row.pinned !== true).catch(() => sonner.toast.error(labels.chatError)),
-              children: row.pinned ? labels.chatUnpin : labels.chatPin
-            }
-          ) : null
-        ]
-      }
-    );
+  async function onSaveDisplayName() {
+    if (displayNameSaveDisabled) return;
+    setSavingDisplayName(true);
+    try {
+      await meeting.setDisplayName(trimmedDisplayName);
+      setSavedDisplayName(trimmedDisplayName);
+      setDisplayName(trimmedDisplayName);
+      sonner.toast.success(labels.displayNameSaved);
+    } catch {
+      sonner.toast.error(labels.displayNameError);
+    } finally {
+      setSavingDisplayName(false);
+    }
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [
-    pinned[0] ? /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "status", className: "bg-muted border-b px-3 py-2 text-sm", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-xs", children: labels.chatPinned }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { children: pinned[0].text })
-    ] }) : null,
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref: listRef,
-        role: "log",
-        "aria-live": "polite",
-        className: "flex min-h-0 flex-1 flex-col gap-3 overflow-auto p-3",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              type: "button",
-              size: "xs",
-              variant: "ghost",
-              className: "self-center",
-              onClick: () => {
-                const oldest = messages[0]?.time;
-                void meeting.fetchChatHistory({
-                  timestamp: oldest
-                });
-              },
-              children: labels.chatLoadOlder
-            }
-          ),
-          groups.map((group) => {
-            const bubbles = group.rows.map((row) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Bubble,
-                {
-                  align: group.mine ? "end" : "start",
-                  variant: group.mine ? "default" : "secondary",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(BubbleContent, { children: row.text })
-                }
-              ),
-              messageActions(row, group.mine)
-            ] }, row.id));
-            if (group.mine) {
-              return /* @__PURE__ */ jsxRuntime.jsx(BubbleGroup, { className: "items-end", children: bubbles }, group.rows[0].id);
-            }
-            const picture = pictures.get(group.userId) ?? null;
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: "flex max-w-full gap-2 self-start",
-                children: [
-                  picture ? /* @__PURE__ */ jsxRuntime.jsx(
-                    "img",
-                    {
-                      src: picture,
-                      alt: "",
-                      className: "mt-0.5 size-7 shrink-0 rounded-full object-cover"
-                    }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-muted text-muted-foreground mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full text-xs", children: senderInitials(group.name) }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mb-1 text-xs", children: group.name }),
-                    /* @__PURE__ */ jsxRuntime.jsx(BubbleGroup, { children: bubbles })
-                  ] })
-                ]
-              },
-              group.rows[0].id
-            );
-          })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "form",
-      {
-        className: "flex flex-col gap-2 border-t p-3",
-        onSubmit: (event) => {
-          event.preventDefault();
-          void onSend();
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              className: "border-input bg-background min-w-0 flex-1 rounded-md border px-2 py-1 text-sm",
-              value: draft,
-              maxLength: limit,
-              onChange: (event) => setDraft(event.target.value),
-              placeholder: labels.chatPlaceholder,
-              "aria-label": labels.chatPlaceholder
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-muted-foreground text-xs", children: [
-              draft.length,
-              "/",
-              limit
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", size: "sm", children: editingId ? labels.chatSave : labels.chatSend })
-          ] })
-        ]
-      }
-    )
-  ] });
-}
-function StudioWaitingRoom({
-  waitlisted,
-  labels,
-  onAdmitAs,
-  onAdmitAll,
-  onDeny
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": labels.waiting, className: "space-y-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: labels.waiting }),
-    waitlisted.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: labels.noWaiting }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2", children: [
+  async function onTestSpeaker() {
+    if (testingSpeaker) return;
+    const speakerId = effective.speaker || devices.speaker[0]?.deviceId;
+    setTestingSpeaker(true);
+    try {
+      await playSpeakerTest(speakerId || void 0);
+    } catch {
+      sonner.toast.error(labels.testSpeakerError);
+    } finally {
+      setTestingSpeaker(false);
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-md", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: labels.settingsTitle }),
+      /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: labels.settingsDescription })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "studio-display-name", children: labels.guestName }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
+          Input,
           {
-            type: "button",
-            size: "xs",
-            className: "w-full",
-            onClick: () => onAdmitAll("panelist"),
-            children: labels.admitAllPanelists
+            id: "studio-display-name",
+            value: displayName,
+            maxLength: STUDIO_DISPLAY_NAME_MAX,
+            onChange: (event) => setDisplayName(event.target.value)
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
           Button,
           {
             type: "button",
-            size: "xs",
             variant: "outline",
-            className: "w-full",
-            onClick: () => onAdmitAll("audience"),
-            children: labels.admitAllAudience
+            disabled: displayNameSaveDisabled,
+            onClick: () => void onSaveDisplayName(),
+            children: labels.displayNameSave
           }
         )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2", children: waitlisted.map((guest) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "space-y-2 rounded-md border p-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-sm", children: guest.name }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              type: "button",
-              size: "xs",
-              className: "w-full",
-              onClick: () => onAdmitAs(guest.id, "panelist"),
-              children: labels.admitAsPanelist
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              type: "button",
-              size: "xs",
-              variant: "outline",
-              className: "w-full",
-              onClick: () => onAdmitAs(guest.id, "audience"),
-              children: labels.admitAsAudience
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              type: "button",
-              size: "xs",
-              variant: "ghost",
-              className: "w-full",
-              onClick: () => onDeny(guest.id),
-              children: labels.deny
-            }
-          )
-        ] })
-      ] }, guest.id)) })
-    ] })
-  ] });
-}
-function StudioSidePanel({
-  tab,
-  onTabChange,
-  onClose,
-  meeting,
-  selfId,
-  participants,
-  waitlisted,
-  stageRequests,
-  isModerator: isModerator2,
-  chatBadge,
-  peopleBadge,
-  labels,
-  onAdmitAs,
-  onAdmitAll,
-  onDeny,
-  onGrantStage,
-  onDenyStage,
-  onTakeOffAir,
-  guestUrl,
-  onShareGuestLink
-}) {
-  const panelists = participants.filter((row) => isOnStage(row.stageStatus));
-  const audience = participants.filter((row) => !isOnStage(row.stageStatus));
-  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "bg-background flex w-full flex-col border-t md:w-80 md:border-l md:border-t-0", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex border-b", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        Button,
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SettingsCameraPreview,
+      {
+        track: videoTrack,
+        open,
+        cameraOn,
+        cameraOffLabel: labels.cameraOff
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "sr-only", children: labels.micLevel }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AudioWaveform,
         {
-          type: "button",
-          size: "sm",
-          variant: tab === "chat" ? "secondary" : "ghost",
-          className: "relative flex-1 rounded-none",
-          onClick: () => onTabChange("chat"),
-          children: [
-            labels.chat,
-            chatBadge > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-primary text-primary-foreground ml-2 inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[0.65rem]", children: chatBadge }) : null
-          ]
-        }
-      ),
-      isModerator2 ? /* @__PURE__ */ jsxRuntime.jsxs(
-        Button,
-        {
-          type: "button",
-          size: "sm",
-          variant: tab === "people" ? "secondary" : "ghost",
-          className: "relative flex-1 rounded-none",
-          onClick: () => onTabChange("people"),
-          children: [
-            labels.people,
-            peopleBadge > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-primary text-primary-foreground ml-2 inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[0.65rem]", children: peopleBadge }) : null
-          ]
-        }
-      ) : null,
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          type: "button",
-          size: "icon-xs",
-          variant: "ghost",
-          className: "m-1 shrink-0",
-          "aria-label": labels.closePanel,
-          onClick: onClose,
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {})
+          track: audioTrack,
+          reducedMotion,
+          className: "w-full"
         }
       )
     ] }),
-    tab === "chat" ? /* @__PURE__ */ jsxRuntime.jsx(
-      StudioChatPanel,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      StudioDeviceSelectGroup,
       {
-        meeting,
-        selfId,
-        participants,
-        isModerator: isModerator2,
-        labels
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-4 overflow-auto p-3", children: [
-      guestUrl ? /* @__PURE__ */ jsxRuntime.jsxs(
-        Button,
-        {
-          type: "button",
-          variant: "outline",
-          className: "w-full",
-          onClick: onShareGuestLink,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link2, {}),
-            labels.shareLink
-          ]
-        }
-      ) : null,
-      /* @__PURE__ */ jsxRuntime.jsx(
-        StudioWaitingRoom,
-        {
-          waitlisted,
-          labels,
-          onAdmitAs,
-          onAdmitAll,
-          onDeny
-        }
-      ),
-      stageRequests.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": labels.stageRequests, className: "space-y-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: labels.stageRequests }),
-        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2", children: stageRequests.map((request) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "li",
+        devices,
+        selected: effective,
+        labels,
+        onChange: (kind, id) => void onChange(kind, id),
+        speakerAction: /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
           {
-            className: "space-y-2 rounded-md border p-2",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-sm", children: request.name }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  Button,
-                  {
-                    type: "button",
-                    size: "xs",
-                    className: "w-full",
-                    onClick: () => onGrantStage(request.userId),
-                    children: labels.bringOnAir
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  Button,
-                  {
-                    type: "button",
-                    size: "xs",
-                    variant: "outline",
-                    className: "w-full",
-                    onClick: () => onDenyStage(request.userId),
-                    children: labels.deny
-                  }
-                )
-              ] })
-            ]
-          },
-          request.userId
-        )) })
-      ] }) : null,
-      /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": labels.panelists, className: "space-y-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: labels.panelists }),
-        panelists.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: labels.noPanelists }) : /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2", children: panelists.map((row) => {
-          const userId = row.userId;
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "li",
-            {
-              className: "space-y-2 rounded-md border p-2",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-sm", children: row.name }),
-                !row.isSelf && userId ? /* @__PURE__ */ jsxRuntime.jsx(
-                  Button,
-                  {
-                    type: "button",
-                    size: "xs",
-                    variant: "outline",
-                    className: "w-full",
-                    onClick: () => onTakeOffAir(userId),
-                    children: labels.offAir
-                  }
-                ) : null
-              ]
-            },
-            row.id
-          );
-        }) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": labels.audience, className: "space-y-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: labels.audience }),
-        audience.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: labels.noAudience }) : /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2", children: audience.map((row) => {
-          const userId = row.userId;
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "li",
-            {
-              className: "space-y-2 rounded-md border p-2",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-sm", children: row.name }),
-                !row.isSelf && userId ? /* @__PURE__ */ jsxRuntime.jsx(
-                  Button,
-                  {
-                    type: "button",
-                    size: "xs",
-                    variant: "outline",
-                    className: "w-full",
-                    onClick: () => onGrantStage(userId),
-                    children: labels.bringOnAir
-                  }
-                ) : null
-              ]
-            },
-            row.id
-          );
-        }) })
-      ] })
-    ] })
-  ] });
-}
-function DropdownMenu({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Root, { "data-slot": "dropdown-menu", ...props });
-}
-function DropdownMenuTrigger({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+            type: "button",
+            size: "sm",
+            variant: "outline",
+            disabled: testingSpeaker,
+            onClick: () => void onTestSpeaker(),
+            children: labels.testSpeaker
+          }
+        )
+      }
+    )
+  ] }) });
 }
-function DropdownMenuContent({
-  align = "start",
-  alignOffset = 0,
-  side = "bottom",
-  sideOffset = 4,
-  className,
-  ...props
+function SettingsCameraPreview({
+  track,
+  open,
+  cameraOn,
+  cameraOffLabel
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    menu.Menu.Positioner,
+  const ref = react.useRef(null);
+  react.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (!open || !cameraOn || !track) {
+      el.srcObject = null;
+      return;
+    }
+    el.srcObject = new MediaStream([track]);
+    void el.play().catch(() => void 0);
+    return () => {
+      el.srcObject = null;
+    };
+  }, [cameraOn, open, track]);
+  if (!cameraOn) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted flex aspect-video w-full items-center justify-center rounded-xl", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: cameraOffLabel }) });
+  }
+  if (!track) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted aspect-video w-full rounded-xl", "aria-hidden": true });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted relative aspect-video w-full overflow-hidden rounded-xl", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "video",
     {
-      className: "isolate z-50 outline-none",
-      align,
-      alignOffset,
-      side,
-      sideOffset,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        menu.Menu.Popup,
-        {
-          "data-slot": "dropdown-menu-content",
-          className: cn(
-            "z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
-            className
-          ),
-          ...props
-        }
-      )
+      ref,
+      autoPlay: true,
+      muted: true,
+      playsInline: true,
+      className: "absolute inset-0 size-full -scale-x-100 object-cover"
     }
   ) });
 }
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
+function StudioGuestWaiting({
+  meeting,
+  reducedMotion,
+  cameraOn,
+  muted,
+  labels,
+  settingsOpen,
+  onToggleCamera,
+  onToggleMute,
+  onOpenSettings,
+  onCloseSettings
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    menu.Menu.Item,
-    {
-      "data-slot": "dropdown-menu-item",
-      "data-inset": inset,
-      "data-variant": variant,
-      className: cn(
-        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DropdownMenuSeparator({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    menu.Menu.Separator,
-    {
-      "data-slot": "dropdown-menu-separator",
-      className: cn("-mx-1 my-1 h-px bg-border", className),
-      ...props
-    }
-  );
-}
-function StudioTileMenu({
-  tile,
-  canModerate,
-  canManageStage,
-  takeOffBlocked,
-  labels,
-  onKick,
-  onMute,
-  onStopCamera,
-  onStopScreen,
-  onToggleStage,
-  onTogglePin,
-  onToggleChat
-}) {
-  const onStage = isOnStage(tile.stageStatus);
-  const showPersonItems = canModerate && tile.kind !== "screen";
-  const showScreenItems = canModerate && tile.kind === "screen";
-  const showStageItems = canManageStage && tile.kind !== "screen";
-  if (!showPersonItems && !showScreenItems && !showStageItems) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+  const [audioTrack, setAudioTrack] = react.useState(null);
+  const [videoTrack, setVideoTrack] = react.useState(null);
+  react.useEffect(() => {
+    const sync = () => {
+      setAudioTrack(meeting.localAudioTrack());
+      setVideoTrack(meeting.localVideoTrack());
+    };
+    sync();
+    return meeting.subscribeMedia(sync);
+  }, [meeting]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex min-h-dvh w-full max-w-lg flex-col justify-center gap-6 p-6", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      DropdownMenuTrigger,
+      WaitingCameraPreview,
       {
-        render: /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            type: "button",
-            size: "icon-xs",
-            variant: "ghost",
-            className: "text-white hover:text-white",
-            "aria-label": labels.tileMenu
-          }
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { className: "size-3.5" })
+        track: videoTrack,
+        cameraOn,
+        cameraOffLabel: labels.cameraOff
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { align: "end", className: "min-w-44", children: [
-      showScreenItems ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { onClick: onStopScreen, children: labels.stopScreen }) : null,
-      showPersonItems && tile.audioEnabled ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { onClick: onMute, children: labels.mute }) : null,
-      showPersonItems && tile.kind === "camera" && tile.videoEnabled ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { onClick: onStopCamera, children: labels.stopCamera }) : null,
-      showPersonItems || showScreenItems ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { onClick: onTogglePin, children: tile.pinned ? labels.unpin : labels.pin }) : null,
-      showPersonItems ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { onClick: onToggleChat, children: tile.chatCanSend === false ? labels.allowChat : labels.muteChat }) : null,
-      showStageItems ? /* @__PURE__ */ jsxRuntime.jsx(
-        DropdownMenuItem,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AudioWaveform,
+      {
+        track: muted ? null : audioTrack,
+        reducedMotion
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-center text-sm", role: "status", children: labels.waitingHost }),
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ControlIcon,
         {
-          disabled: onStage && takeOffBlocked,
-          onClick: onToggleStage,
-          children: onStage ? takeOffBlocked ? labels.offAirLastVisible : labels.takeOffAir : labels.bringOnAir
+          label: muted ? labels.unmute : labels.mute,
+          pressed: muted,
+          tone: muted ? "danger" : "default",
+          onClick: onToggleMute,
+          children: muted ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MicOff, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, {})
         }
-      ) : null,
-      showPersonItems ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { variant: "destructive", onClick: onKick, children: labels.kick })
-      ] }) : null
-    ] })
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ControlIcon,
+        {
+          label: labels.camera,
+          pressed: cameraOn,
+          onClick: onToggleCamera,
+          children: cameraOn ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.VideoOff, {})
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ControlIcon,
+        {
+          label: labels.settings,
+          pressed: settingsOpen,
+          onClick: onOpenSettings,
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, {})
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      StudioSettingsDialog,
+      {
+        open: settingsOpen,
+        onOpenChange: onCloseSettings,
+        meeting,
+        labels,
+        reducedMotion,
+        cameraOn
+      }
+    )
   ] });
 }
-function StudioTile({
-  tile,
+function WaitingCameraPreview({
+  track,
+  cameraOn,
+  cameraOffLabel
+}) {
+  const ref = react.useRef(null);
+  react.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (!cameraOn || !track) {
+      el.srcObject = null;
+      return;
+    }
+    el.srcObject = new MediaStream([track]);
+    void el.play().catch(() => void 0);
+    return () => {
+      el.srcObject = null;
+    };
+  }, [cameraOn, track]);
+  if (!cameraOn) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted flex aspect-video w-full items-center justify-center rounded-xl", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: cameraOffLabel }) });
+  }
+  if (!track) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted aspect-video w-full rounded-xl", "aria-hidden": true });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted relative aspect-video w-full overflow-hidden rounded-xl", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "video",
+    {
+      ref,
+      autoPlay: true,
+      muted: true,
+      playsInline: true,
+      className: "absolute inset-0 size-full -scale-x-100 object-cover"
+    }
+  ) });
+}
+function StudioLiveBadge({
+  children,
+  role
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      role,
+      className: "flex items-center gap-1.5 rounded bg-red-600 px-2 py-0.5 text-xs font-semibold tracking-wide text-white",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-1.5 animate-pulse rounded-full bg-white motion-reduce:animate-none" }),
+        children
+      ]
+    }
+  );
+}
+var badgeVariants = classVarianceAuthority.cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        destructive: "border-transparent bg-destructive text-destructive-foreground",
+        outline: "text-foreground",
+        success: "border-transparent bg-chart-5/15 text-chart-5 dark:bg-chart-5/25",
+        warning: "border-transparent bg-chart-4/15 text-chart-4 dark:bg-chart-4/25"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+function StudioPipPanel({
   meeting,
-  reducedMotion,
-  compact,
-  canModerate,
-  canManageStage,
-  takeOffBlocked,
-  confirmTakeOff,
   labels,
-  onKick,
-  onMute,
-  onStopCamera,
-  onStopScreen,
-  onToggleStage,
-  onTogglePin,
-  onToggleChat
+  cameraOn,
+  muted,
+  screenOn,
+  showMediaControls = true,
+  showScreenControl = false,
+  canShareFreely = false,
+  screenAvailable = true,
+  screenPending = false,
+  shareGrant = "idle",
+  onAir,
+  elapsed,
+  unread = 0,
+  onToggleMute,
+  onToggleCamera,
+  onToggleScreen,
+  onAskToShare,
+  onCancelShareRequest,
+  onBack
 }) {
-  const onStage = isOnStage(tile.stageStatus);
-  const [confirm, setConfirm] = react.useState(null);
-  const showMenu = (canModerate || canManageStage) && !tile.isSelf;
+  const tiles = meeting.participants();
+  const spotlight = resolveStudioPipSpotlight(tiles, meeting.activeSpeakerId());
+  const selfView = resolveStudioPipSelfView(tiles, spotlight);
+  const speaking = spotlight !== null && spotlight.participantId === meeting.activeSpeakerId();
+  const backLabel = unread > 0 ? `${labels.backToStudio} (${unread})` : labels.backToStudio;
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "article",
+    "div",
     {
-      "aria-label": tile.name,
-      className: cn(
-        "bg-muted relative overflow-hidden rounded-xl",
-        compact ? "aspect-video w-40 shrink-0 md:w-full" : tile.kind === "screen" ? "min-h-48 flex-1" : "aspect-video"
-      ),
+      role: "region",
+      "aria-label": labels.pipTitle,
+      className: "bg-background flex h-full min-h-0 flex-col gap-2 p-2 text-foreground",
       children: [
-        tile.kind === "idle" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-3", children: [
-          tile.picture ? /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
-            {
-              src: tile.picture,
-              alt: "",
-              className: "size-16 rounded-full object-cover"
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-background flex size-16 items-center justify-center rounded-full text-xl", children: tile.name.slice(0, 1).toUpperCase() }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            AudioWaveform,
-            {
-              track: tile.isSelf ? meeting.localAudioTrack() : null,
-              reducedMotion
-            }
-          )
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx(
-          StudioTileVideo,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
           {
-            meeting,
-            participantId: tile.id,
-            kind: tile.kind,
-            mirror: tile.kind === "camera" && tile.isSelf,
-            contain: tile.kind === "screen"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-x-0 bottom-0 z-10 flex items-end justify-between gap-2 bg-linear-to-t from-black/70 to-transparent p-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "min-w-0 truncate text-xs font-medium text-white", children: [
-            tile.name,
-            !onStage ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 rounded-full border border-white/40 px-1.5 py-0.5 text-[0.65rem]", children: labels.offAir }) : null
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(TileStatusIcons, { tile, labels }),
-            showMenu ? /* @__PURE__ */ jsxRuntime.jsx(
-              StudioTileMenu,
-              {
-                tile,
-                canModerate,
-                canManageStage,
-                takeOffBlocked,
-                labels,
-                onKick: () => setConfirm("kick"),
-                onMute,
-                onStopCamera,
-                onStopScreen,
-                onToggleStage: () => {
-                  if (onStage && confirmTakeOff && !takeOffBlocked) {
-                    setConfirm("takeOff");
-                    return;
-                  }
-                  onToggleStage();
-                },
-                onTogglePin,
-                onToggleChat
-              }
-            ) : null
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ConfirmAction,
-          {
-            open: confirm === "kick",
-            onOpenChange: (open) => {
-              if (!open) setConfirm(null);
-            },
-            triggerLabel: labels.kick,
-            title: labels.kickTitle,
-            description: labels.kickDescription,
-            confirmLabel: labels.kickConfirm,
-            onConfirm: () => {
-              setConfirm(null);
-              onKick();
-            }
+            className: cn(
+              "bg-muted relative min-h-0 flex-1 overflow-hidden rounded-xl",
+              speaking && "ring-2 ring-primary"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                PipSpotlight,
+                {
+                  meeting,
+                  spotlight,
+                  cameraOffLabel: labels.cameraOff
+                }
+              ),
+              onAir ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-2 left-2 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(StudioLiveBadge, { children: labels.live }),
+                elapsed ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground tabular-nums text-xs", children: elapsed }) : null
+              ] }) : null,
+              selfView ? /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "data-testid": "pip-self-view",
+                  className: "absolute right-2 bottom-2 aspect-video w-[30%] overflow-hidden rounded-lg ring-1 ring-white/40",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(PipTrackVideo, { track: meeting.localVideoTrack(), fit: "cover" })
+                }
+              ) : null
+            ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ConfirmAction,
-          {
-            open: confirm === "takeOff",
-            onOpenChange: (open) => {
-              if (!open) setConfirm(null);
-            },
-            triggerLabel: labels.takeOffAir,
-            title: labels.takeOffAirTitle,
-            description: labels.takeOffAirDescription,
-            confirmLabel: labels.takeOffAirConfirm,
-            onConfirm: () => {
-              setConfirm(null);
-              onToggleStage();
-            }
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: "flex flex-wrap items-center justify-center gap-2", children: [
+          showMediaControls ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              PipControl,
+              {
+                label: muted ? labels.unmute : labels.mute,
+                off: muted,
+                onClick: onToggleMute,
+                children: muted ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MicOff, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, {})
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              PipControl,
+              {
+                label: labels.camera,
+                off: !cameraOn,
+                onClick: onToggleCamera,
+                children: cameraOn ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.VideoOff, {})
+              }
+            )
+          ] }) : null,
+          showMediaControls && (showScreenControl || screenOn) ? pipScreenControls({
+            labels,
+            screenOn,
+            canShareFreely,
+            screenAvailable,
+            screenPending,
+            shareGrant,
+            onToggleScreen,
+            onAskToShare,
+            onCancelShareRequest
+          }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(PipControl, { label: backLabel, onClick: onBack, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Undo2, {}),
+            unread > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "absolute -top-2 -right-2 h-4 min-w-4 px-1 text-[0.65rem]", children: unread }) : null
+          ] }) })
+        ] })
       ]
     }
   );
 }
-function TileStatusIcons({
-  tile,
-  labels
+function PipSpotlight({
+  meeting,
+  spotlight,
+  cameraOffLabel
 }) {
+  if (!spotlight || spotlight.kind === "idle") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-2", children: [
+      spotlight?.picture ? /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: spotlight.picture,
+          alt: "",
+          className: "size-14 rounded-full object-cover"
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-background flex size-14 items-center justify-center rounded-full text-lg", children: (spotlight?.name ?? "?").slice(0, 1).toUpperCase() }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-xs", children: spotlight?.name ?? cameraOffLabel })
+    ] });
+  }
+  const track = spotlight.kind === "screen" ? meeting.participantScreenTrack(spotlight.participantId) : meeting.participantVideoTrack(spotlight.participantId);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    tile.audioEnabled ? null : /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { label: labels.mute, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MicOff, {}) }),
-    tile.kind !== "screen" && !tile.videoEnabled ? /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { label: labels.cameraOff, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.VideoOff, {}) }) : null,
-    tile.kind !== "screen" && tile.screenShareEnabled ? /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { label: labels.stopScreen, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MonitorUp, {}) }) : null,
-    tile.pinned ? /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { label: labels.pin, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pin, {}) }) : null,
-    tile.chatCanSend === false ? /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { label: labels.muteChat, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquareOff, {}) }) : null
-  ] });
-}
-function StatusIcon({
-  label,
-  children
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex text-white", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "[&_svg]:size-3.5", children }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: label })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PipTrackVideo,
+      {
+        track,
+        fit: spotlight.kind === "screen" ? "contain" : "cover"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "absolute inset-x-0 bottom-0 bg-linear-to-t from-black/70 to-transparent p-2 text-xs font-medium text-white", children: spotlight.name })
   ] });
 }
-function StudioTileVideo({
-  meeting,
-  participantId,
-  kind,
-  mirror,
-  contain
+function PipTrackVideo({
+  track,
+  fit
 }) {
   const ref = react.useRef(null);
   react.useEffect(() => {
-    meeting.attachVideo(participantId, ref.current, kind);
-    return () => meeting.attachVideo(participantId, null, kind);
-  }, [kind, meeting, participantId]);
+    const el = ref.current;
+    if (!el) return;
+    if (!track) {
+      el.srcObject = null;
+      return;
+    }
+    el.srcObject = new MediaStream([track]);
+    void el.play().catch(() => void 0);
+    return () => {
+      el.srcObject = null;
+    };
+  }, [track]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "video",
     {
@@ -2371,604 +2115,1063 @@ function StudioTileVideo({
       autoPlay: true,
       playsInline: true,
       muted: true,
-      disablePictureInPicture: true,
-      controlsList: "nodownload noplaybackrate noremoteplayback",
       className: cn(
         "absolute inset-0 size-full",
-        "pointer-events-none",
-        contain ? "object-contain" : "object-cover",
-        mirror && "-scale-x-100"
+        fit === "contain" ? "object-contain" : "object-cover"
       )
     }
   );
 }
-function StudioStage({
-  participants,
-  meeting,
-  reducedMotion,
-  canModerate,
-  canManageStage,
-  onAir,
+function pipScreenControls({
   labels,
-  onKick,
-  onMute,
-  onStopCamera,
-  onStopScreen,
-  onToggleStage,
-  onTogglePin,
-  onToggleChat,
-  canTakeOff,
-  onOpenPeople
+  screenOn,
+  canShareFreely,
+  screenAvailable,
+  screenPending,
+  shareGrant,
+  onToggleScreen,
+  onAskToShare,
+  onCancelShareRequest
 }) {
-  const displayTiles = expandStudioTiles(participants);
-  const stage = studioStageLayout(displayTiles, {
-    activeSpeakerId: meeting.activeSpeakerId()
-  });
-  const sharing = stage.spotlight.length > 0;
-  const overflowLabel = labels.stageOverflow.replace(
-    "{count}",
-    String(stage.overflow)
-  );
-  function renderTile(tile, compact) {
-    const takeOffBlocked = !canTakeOff(tile.id);
+  if (canShareFreely || screenOn) {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      StudioTile,
+      PipControl,
       {
-        tile,
-        meeting,
-        reducedMotion,
-        compact,
-        canModerate: canModerate && !tile.isSelf,
-        canManageStage: canManageStage && !tile.isSelf,
-        takeOffBlocked,
-        confirmTakeOff: onAir,
-        labels,
-        onKick: () => onKick(tile.id),
-        onMute: () => onMute(tile.id),
-        onStopCamera: () => onStopCamera(tile.id),
-        onStopScreen: () => onStopScreen(tile.id),
-        onToggleStage: () => onToggleStage(tile),
-        onTogglePin: () => onTogglePin(tile),
-        onToggleChat: () => onToggleChat(tile)
-      },
-      tile.tileId
-    );
-  }
-  function overflowChip(compact) {
-    if (stage.overflow <= 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Button,
-      {
-        type: "button",
-        variant: "secondary",
-        className: cn(
-          "shrink-0",
-          compact ? "aspect-video w-40 md:w-full" : "aspect-video min-h-24"
-        ),
-        onClick: onOpenPeople,
-        children: overflowLabel
+        label: screenOn ? labels.stopScreen : labels.screen,
+        off: screenOn,
+        disabled: screenPending || !screenAvailable && !screenOn,
+        onClick: onToggleScreen,
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MonitorUp, {})
       }
     );
   }
-  if (sharing) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 flex-col md:flex-row", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col gap-2 bg-black p-3", children: stage.spotlight.map((tile) => renderTile(tile, false)) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 overflow-auto p-2 md:w-64 md:flex-col", children: [
-        stage.strip.map((tile) => renderTile(tile, true)),
-        overflowChip(true)
-      ] })
+  if (shareGrant === "requested") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        PipControl,
+        {
+          label: labels.shareRequested,
+          off: true,
+          disabled: true,
+          onClick: () => void 0,
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MonitorUp, {})
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        PipControl,
+        {
+          label: labels.cancelShareRequest,
+          onClick: () => onCancelShareRequest?.(),
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {})
+        }
+      )
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+  return /* @__PURE__ */ jsxRuntime.jsx(PipControl, { label: labels.askToShare, onClick: () => onAskToShare?.(), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MonitorUp, {}) });
+}
+function PipControl({
+  label,
+  onClick,
+  off = false,
+  disabled = false,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button,
     {
-      className: cn(
-        "mx-auto grid min-h-0 w-full flex-1 content-center gap-3 overflow-auto p-4",
-        stage.strip.length <= 1 ? "max-w-3xl grid-cols-1" : stage.strip.length <= 4 ? "max-w-5xl grid-cols-1 sm:grid-cols-2" : stage.strip.length <= 6 ? "max-w-6xl grid-cols-1 sm:grid-cols-2 xl:grid-cols-3" : "grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4"
-      ),
-      children: [
-        stage.strip.map((tile) => renderTile(tile, false)),
-        overflowChip(false)
-      ]
+      type: "button",
+      size: "icon-lg",
+      variant: off ? "destructive" : "secondary",
+      className: "size-10 rounded-full",
+      "aria-label": label,
+      disabled,
+      onClick,
+      children
     }
   );
 }
-function TooltipProvider({
-  delay = 0,
-  ...props
+function StudioRemoteAudio({
+  meeting,
+  participantId
 }) {
+  const ref = react.useRef(null);
+  react.useEffect(() => {
+    meeting.attachAudio(participantId, ref.current);
+    return () => meeting.attachAudio(participantId, null);
+  }, [meeting, participantId]);
+  return /* @__PURE__ */ jsxRuntime.jsx("audio", { ref, autoPlay: true, className: "sr-only" });
+}
+function BubbleGroup({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    tooltip.Tooltip.Provider,
+    "div",
     {
-      "data-slot": "tooltip-provider",
-      delay,
+      "data-slot": "bubble-group",
+      className: cn("flex min-w-0 flex-col gap-2", className),
       ...props
     }
   );
 }
-function Tooltip({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Root, { "data-slot": "tooltip", ...props });
-}
-function TooltipTrigger({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Trigger, { "data-slot": "tooltip-trigger", ...props });
-}
-function TooltipContent({
-  className,
-  side = "top",
-  sideOffset = 4,
-  align = "center",
-  alignOffset = 0,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    tooltip.Tooltip.Positioner,
-    {
-      align,
-      alignOffset,
-      side,
-      sideOffset,
-      className: "isolate z-50",
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        tooltip.Tooltip.Popup,
-        {
-          "data-slot": "tooltip-content",
-          className: cn(
-            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-            className
-          ),
-          ...props,
-          children: [
-            children,
-            /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })
-          ]
-        }
-      )
+var bubbleVariants = classVarianceAuthority.cva(
+  "group/bubble relative flex w-max max-w-[80%] flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full",
+  {
+    variants: {
+      variant: {
+        default: "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
+        secondary: "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
+        muted: "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
+        tinted: "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
+        outline: "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
+        ghost: "border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50",
+        destructive: "*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
     }
-  ) });
-}
-function Dialog({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { "data-slot": "dialog", ...props });
-}
-function DialogPortal({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { "data-slot": "dialog-portal", ...props });
-}
-function DialogOverlay({
+  }
+);
+function Bubble({
+  variant = "default",
+  align = "start",
   className,
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Overlay,
+    "div",
     {
-      "data-slot": "dialog-overlay",
-      className: cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      ),
+      "data-slot": "bubble",
+      "data-variant": variant,
+      "data-align": align,
+      className: cn(bubbleVariants({ variant }), className),
       ...props
     }
   );
 }
-function DialogContent({
+function BubbleContent({
   className,
-  children,
-  showCloseButton = true,
+  render,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      DialogPrimitive__namespace.Content,
+  return useRender.useRender({
+    defaultTagName: "div",
+    props: mergeProps.mergeProps(
       {
-        "data-slot": "dialog-content",
         className: cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          "w-max max-w-full overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed break-words group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50",
           className
-        ),
-        ...props,
-        children: [
-          children,
-          showCloseButton ? /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "size-4" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-          ] }) : null
-        ]
-      }
-    )
-  ] });
+        )
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "bubble-content"
+    }
+  });
 }
-function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "dialog-header",
-      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
-      ...props
+classVarianceAuthority.cva(
+  "absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0",
+  {
+    variants: {
+      side: {
+        top: "top-0 -translate-y-3/4",
+        bottom: "bottom-0 translate-y-3/4"
+      },
+      align: {
+        start: "left-3",
+        end: "right-3"
+      }
+    },
+    defaultVariants: {
+      side: "bottom",
+      align: "end"
     }
-  );
+  }
+);
+
+// src/studio/lib/chat-groups.ts
+function groupChatMessages(messages, selfUserId) {
+  const groups = [];
+  for (const row of messages) {
+    const mine = Boolean(selfUserId) && row.userId === selfUserId;
+    const last = groups[groups.length - 1];
+    if (last && last.userId === row.userId && last.mine === mine) {
+      last.rows.push(row);
+      continue;
+    }
+    groups.push({
+      userId: row.userId,
+      name: row.name,
+      mine,
+      rows: [row]
+    });
+  }
+  return groups;
+}
+function senderInitials(name) {
+  const parts = name.trim().split(/\s+/).filter((part) => part.length > 0);
+  if (parts.length === 0) return "?";
+  const first = parts[0];
+  if (parts.length === 1) return first.slice(0, 2).toUpperCase();
+  return `${first[0]}${parts[1][0]}`.toUpperCase();
+}
+function StudioChatPanel({
+  meeting,
+  selfUserId,
+  participants,
+  isModerator: isModerator2,
+  labels
+}) {
+  const [tick, setTick] = react.useState(0);
+  const [draft, setDraft] = react.useState("");
+  const [editingId, setEditingId] = react.useState(null);
+  const listRef = react.useRef(null);
+  react.useEffect(
+    () => meeting.subscribeChat(() => setTick((n) => n + 1)),
+    [meeting]
+  );
+  const messages = react.useMemo(
+    () => meeting.chatMessages().filter((row) => !row.targetUserIds?.length),
+    [meeting, tick]
+  );
+  const pinned = react.useMemo(() => meeting.pinnedChatMessages(), [meeting, tick]);
+  const limit = meeting.chatMaxTextLimit();
+  const pictures = react.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const row of participants) {
+      if (row.userId) map.set(row.userId, row.picture);
+    }
+    return map;
+  }, [participants]);
+  const groups = react.useMemo(
+    () => groupChatMessages(messages, selfUserId),
+    [messages, selfUserId]
+  );
+  react.useEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+    list.scrollTop = list.scrollHeight;
+  }, [messages.length]);
+  async function onSend() {
+    const text = draft.trim();
+    if (!text) return;
+    setDraft("");
+    try {
+      if (editingId) {
+        await meeting.editChatMessage(editingId, text);
+        setEditingId(null);
+        return;
+      }
+      await meeting.sendChatMessage(text);
+    } catch (error) {
+      const message = error instanceof Error ? error.message.toLowerCase() : "";
+      sonner.toast.error(
+        message.includes("rate") ? labels.chatRateLimited : labels.chatError
+      );
+    }
+  }
+  function messageActions(row, mine) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "p",
+      {
+        className: mine ? "text-muted-foreground flex flex-wrap justify-end gap-2 text-xs" : "text-muted-foreground flex flex-wrap gap-2 text-xs",
+        children: [
+          row.isEdited ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: labels.chatEdited }) : null,
+          mine ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setEditingId(row.id);
+                setDraft(row.text);
+              },
+              children: labels.chatEdit
+            }
+          ) : null,
+          isModerator2 || mine ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => void meeting.deleteChatMessage(row.id).catch(() => sonner.toast.error(labels.chatError)),
+              children: labels.chatDelete
+            }
+          ) : null,
+          isModerator2 ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => void meeting.pinChatMessage(row.id, row.pinned !== true).catch(() => sonner.toast.error(labels.chatError)),
+              children: row.pinned ? labels.chatUnpin : labels.chatPin
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+    pinned[0] ? /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "status", className: "bg-muted border-b px-3 py-2 text-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-xs", children: labels.chatPinned }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { children: pinned[0].text })
+    ] }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: listRef,
+        role: "log",
+        "aria-live": "polite",
+        className: "flex min-h-0 flex-1 flex-col gap-3 overflow-auto p-3",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              type: "button",
+              size: "xs",
+              variant: "ghost",
+              className: "self-center",
+              onClick: () => {
+                const oldest = messages[0]?.time;
+                void meeting.fetchChatHistory({
+                  timestamp: oldest
+                });
+              },
+              children: labels.chatLoadOlder
+            }
+          ),
+          groups.map((group) => {
+            const bubbles = group.rows.map((row) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Bubble,
+                {
+                  align: group.mine ? "end" : "start",
+                  variant: group.mine ? "default" : "secondary",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(BubbleContent, { children: row.text })
+                }
+              ),
+              messageActions(row, group.mine)
+            ] }, row.id));
+            if (group.mine) {
+              return /* @__PURE__ */ jsxRuntime.jsx(BubbleGroup, { className: "items-end", children: bubbles }, group.rows[0].id);
+            }
+            const picture = pictures.get(group.userId) ?? null;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "flex max-w-full gap-2 self-start",
+                children: [
+                  picture ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      src: picture,
+                      alt: "",
+                      className: "mt-0.5 size-7 shrink-0 rounded-full object-cover"
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-muted text-muted-foreground mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full text-xs", children: senderInitials(group.name) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mb-1 text-xs", children: group.name }),
+                    /* @__PURE__ */ jsxRuntime.jsx(BubbleGroup, { children: bubbles })
+                  ] })
+                ]
+              },
+              group.rows[0].id
+            );
+          })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "form",
+      {
+        className: "flex flex-col gap-2 border-t p-3",
+        onSubmit: (event) => {
+          event.preventDefault();
+          void onSend();
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              className: "min-w-0 flex-1",
+              value: draft,
+              maxLength: limit,
+              onChange: (event) => setDraft(event.target.value),
+              placeholder: labels.chatPlaceholder,
+              "aria-label": labels.chatPlaceholder
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-muted-foreground text-xs", children: [
+              draft.length,
+              "/",
+              limit
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", size: "sm", children: editingId ? labels.chatSave : labels.chatSend })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function StudioWaitingRoom({
+  waitlisted,
+  labels,
+  onAdmitAs,
+  onAdmitAll,
+  onDeny
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": labels.waiting, className: "space-y-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: labels.waiting }),
+    waitlisted.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: labels.noWaiting }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            type: "button",
+            size: "xs",
+            className: "w-full",
+            onClick: () => onAdmitAll("panelist"),
+            children: labels.admitAllPanelists
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            type: "button",
+            size: "xs",
+            variant: "outline",
+            className: "w-full",
+            onClick: () => onAdmitAll("audience"),
+            children: labels.admitAllAudience
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2", children: waitlisted.map((guest) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "space-y-2 rounded-md border p-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-sm", children: guest.name }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              type: "button",
+              size: "xs",
+              className: "w-full",
+              onClick: () => onAdmitAs(guest.id, "panelist"),
+              children: labels.admitAsPanelist
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              type: "button",
+              size: "xs",
+              variant: "outline",
+              className: "w-full",
+              onClick: () => onAdmitAs(guest.id, "audience"),
+              children: labels.admitAsAudience
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              type: "button",
+              size: "xs",
+              variant: "ghost",
+              className: "w-full",
+              onClick: () => onDeny(guest.id),
+              children: labels.deny
+            }
+          )
+        ] })
+      ] }, guest.id)) })
+    ] })
+  ] });
+}
+function StudioSidePanel({
+  tab,
+  onTabChange,
+  onClose,
+  meeting,
+  selfUserId,
+  participants,
+  waitlisted,
+  stageRequests,
+  isModerator: isModerator2,
+  chatBadge,
+  peopleBadge,
+  labels,
+  onAdmitAs,
+  onAdmitAll,
+  onDeny,
+  onGrantStage,
+  onDenyStage,
+  onTakeOffAir,
+  guestUrl,
+  onShareGuestLink
+}) {
+  const panelists = participants.filter((row) => isOnStage(row.stageStatus));
+  const audience = participants.filter((row) => !isOnStage(row.stageStatus));
+  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "bg-background flex min-h-0 w-full flex-1 flex-col border-t md:w-80 md:flex-none md:border-l md:border-t-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: tab === "chat" ? "secondary" : "ghost",
+          className: "relative flex-1 rounded-none",
+          onClick: () => onTabChange("chat"),
+          children: [
+            labels.chat,
+            chatBadge > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-primary text-primary-foreground ml-2 inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[0.65rem]", children: chatBadge }) : null
+          ]
+        }
+      ),
+      isModerator2 ? /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: tab === "people" ? "secondary" : "ghost",
+          className: "relative flex-1 rounded-none",
+          onClick: () => onTabChange("people"),
+          children: [
+            labels.people,
+            peopleBadge > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-primary text-primary-foreground ml-2 inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[0.65rem]", children: peopleBadge }) : null
+          ]
+        }
+      ) : null,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          type: "button",
+          size: "icon-xs",
+          variant: "ghost",
+          className: "m-1 shrink-0",
+          "aria-label": labels.closePanel,
+          onClick: onClose,
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {})
+        }
+      )
+    ] }),
+    tab === "chat" ? /* @__PURE__ */ jsxRuntime.jsx(
+      StudioChatPanel,
+      {
+        meeting,
+        selfUserId,
+        participants,
+        isModerator: isModerator2,
+        labels
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-4 overflow-auto p-3", children: [
+      guestUrl ? /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          className: "w-full",
+          onClick: onShareGuestLink,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link2, {}),
+            labels.shareLink
+          ]
+        }
+      ) : null,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        StudioWaitingRoom,
+        {
+          waitlisted,
+          labels,
+          onAdmitAs,
+          onAdmitAll,
+          onDeny
+        }
+      ),
+      stageRequests.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": labels.stageRequests, className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: labels.stageRequests }),
+        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2", children: stageRequests.map((request) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "li",
+          {
+            className: "space-y-2 rounded-md border p-2",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-sm", children: request.name }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    type: "button",
+                    size: "xs",
+                    className: "w-full",
+                    onClick: () => onGrantStage(request.userId),
+                    children: labels.bringOnAir
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    type: "button",
+                    size: "xs",
+                    variant: "outline",
+                    className: "w-full",
+                    onClick: () => onDenyStage(request.userId),
+                    children: labels.deny
+                  }
+                )
+              ] })
+            ]
+          },
+          request.userId
+        )) })
+      ] }) : null,
+      /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": labels.panelists, className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: labels.panelists }),
+        panelists.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: labels.noPanelists }) : /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2", children: panelists.map((row) => {
+          const userId = row.userId;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "li",
+            {
+              className: "space-y-2 rounded-md border p-2",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-sm", children: row.name }),
+                !row.isSelf && userId ? /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    type: "button",
+                    size: "xs",
+                    variant: "outline",
+                    className: "w-full",
+                    onClick: () => onTakeOffAir(userId),
+                    children: labels.offAir
+                  }
+                ) : null
+              ]
+            },
+            row.id
+          );
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": labels.audience, className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: labels.audience }),
+        audience.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: labels.noAudience }) : /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2", children: audience.map((row) => {
+          const userId = row.userId;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "li",
+            {
+              className: "space-y-2 rounded-md border p-2",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-sm", children: row.name }),
+                !row.isSelf && userId ? /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    type: "button",
+                    size: "xs",
+                    variant: "outline",
+                    className: "w-full",
+                    onClick: () => onGrantStage(userId),
+                    children: labels.bringOnAir
+                  }
+                ) : null
+              ]
+            },
+            row.id
+          );
+        }) })
+      ] })
+    ] })
+  ] });
+}
+function DropdownMenu({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
 }
-function DialogTitle({
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Title,
+  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    menu.Menu.Positioner,
     {
-      "data-slot": "dialog-title",
-      className: cn("text-lg leading-none font-semibold", className),
-      ...props
+      className: "isolate z-50 outline-none",
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        menu.Menu.Popup,
+        {
+          "data-slot": "dropdown-menu-content",
+          className: cn(
+            "z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          ),
+          ...props
+        }
+      )
     }
-  );
+  ) });
 }
-function DialogDescription({
+function DropdownMenuItem({
   className,
+  inset,
+  variant = "default",
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Description,
-    {
-      "data-slot": "dialog-description",
-      className: cn("text-muted-foreground text-sm", className),
-      ...props
-    }
-  );
-}
-function Input({ className, type, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    input.Input,
+    menu.Menu.Item,
     {
-      type,
-      "data-slot": "input",
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
       className: cn(
-        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
         className
       ),
       ...props
     }
   );
 }
-function Label({
+function DropdownMenuSeparator({
   className,
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    LabelPrimitive__namespace.Root,
+    menu.Menu.Separator,
     {
-      "data-slot": "label",
-      className: cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      ),
+      "data-slot": "dropdown-menu-separator",
+      className: cn("-mx-1 my-1 h-px bg-border", className),
       ...props
     }
   );
 }
-
-// src/studio/lib/speaker-test.ts
-var TEST_MS = 400;
-var TEST_HZ = 440;
-async function playSpeakerTest(deviceId) {
-  const AudioCtx = window.AudioContext || window.webkitAudioContext;
-  if (!AudioCtx) {
-    throw new Error("AudioContext unavailable");
-  }
-  const ctx = new AudioCtx();
-  const destination = ctx.createMediaStreamDestination();
-  const oscillator = ctx.createOscillator();
-  const gain = ctx.createGain();
-  oscillator.type = "sine";
-  oscillator.frequency.value = TEST_HZ;
-  gain.gain.value = 0.18;
-  oscillator.connect(gain);
-  gain.connect(destination);
-  const audio = document.createElement("audio");
-  audio.autoplay = true;
-  audio.srcObject = destination.stream;
-  try {
-    const sink = audio;
-    if (typeof sink.setSinkId !== "function") {
-      throw new Error("setSinkId unsupported");
-    }
-    await sink.setSinkId(deviceId);
-    oscillator.start();
-    await ctx.resume();
-    await new Promise((resolve) => {
-      window.setTimeout(resolve, TEST_MS);
-    });
-    oscillator.stop();
-  } finally {
-    audio.srcObject = null;
-    audio.remove();
-    await ctx.close();
-  }
+function StudioTileMenu({
+  tile,
+  canModerate,
+  canManageStage,
+  takeOffBlocked,
+  labels,
+  onKick,
+  onMute,
+  onStopCamera,
+  onStopScreen,
+  onToggleStage,
+  onTogglePin,
+  onToggleChat
+}) {
+  const onStage = isOnStage(tile.stageStatus);
+  const showPersonItems = canModerate && tile.kind !== "screen";
+  const showScreenItems = canModerate && tile.kind === "screen";
+  const showStageItems = canManageStage && tile.kind !== "screen";
+  if (!showPersonItems && !showScreenItems && !showStageItems) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DropdownMenuTrigger,
+      {
+        render: /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            type: "button",
+            size: "icon-xs",
+            variant: "ghost",
+            className: "text-white hover:text-white",
+            "aria-label": labels.tileMenu
+          }
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { className: "size-3.5" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { align: "end", className: "min-w-44", children: [
+      showScreenItems ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { onClick: onStopScreen, children: labels.stopScreen }) : null,
+      showPersonItems && tile.audioEnabled ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { onClick: onMute, children: labels.mute }) : null,
+      showPersonItems && tile.kind === "camera" && tile.videoEnabled ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { onClick: onStopCamera, children: labels.stopCamera }) : null,
+      showPersonItems || showScreenItems ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { onClick: onTogglePin, children: tile.pinned ? labels.unpin : labels.pin }) : null,
+      showPersonItems ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { onClick: onToggleChat, children: tile.chatCanSend === false ? labels.allowChat : labels.muteChat }) : null,
+      showStageItems ? /* @__PURE__ */ jsxRuntime.jsx(
+        DropdownMenuItem,
+        {
+          disabled: onStage && takeOffBlocked,
+          onClick: onToggleStage,
+          children: onStage ? takeOffBlocked ? labels.offAirLastVisible : labels.takeOffAir : labels.bringOnAir
+        }
+      ) : null,
+      showPersonItems ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { variant: "destructive", onClick: onKick, children: labels.kick })
+      ] }) : null
+    ] })
+  ] });
 }
-function StudioSettingsDialog({
-  open,
-  onOpenChange,
+function StudioTile({
+  tile,
   meeting,
-  labels,
   reducedMotion,
-  cameraOn
+  compact,
+  fill = false,
+  canModerate,
+  canManageStage,
+  takeOffBlocked,
+  confirmTakeOff,
+  labels,
+  onKick,
+  onMute,
+  onStopCamera,
+  onStopScreen,
+  onToggleStage,
+  onTogglePin,
+  onToggleChat
 }) {
-  const [devices, setDevices] = react.useState({
-    audio: [],
-    video: [],
-    speaker: []
-  });
-  const [selected, setSelected] = react.useState({
-    audio: "",
-    video: "",
-    speaker: ""
-  });
-  const [audioTrack, setAudioTrack] = react.useState(null);
-  const [videoTrack, setVideoTrack] = react.useState(null);
-  const [testingSpeaker, setTestingSpeaker] = react.useState(false);
-  const [displayName, setDisplayName] = react.useState("");
-  const [savedDisplayName, setSavedDisplayName] = react.useState("");
-  const [savingDisplayName, setSavingDisplayName] = react.useState(false);
-  react.useEffect(() => {
-    if (!open) return;
-    const selfName = meeting.participants().find((row) => row.isSelf)?.name?.trim() ?? "";
-    setDisplayName(selfName);
-    setSavedDisplayName(selfName);
-  }, [meeting, open]);
-  react.useEffect(() => {
-    if (!open) return;
-    const sync = () => {
-      setAudioTrack(meeting.localAudioTrack());
-      setVideoTrack(meeting.localVideoTrack());
-    };
-    sync();
-    return meeting.subscribeMedia(sync);
-  }, [meeting, open]);
-  react.useEffect(() => {
-    if (!open) return;
-    let cancelled = false;
-    void meeting.listDevices().then((next) => {
-      if (cancelled) return;
-      setDevices(next);
-      setSelected((prev) => ({
-        audio: prev.audio || next.audio[0]?.deviceId || "",
-        video: prev.video || next.video[0]?.deviceId || "",
-        speaker: prev.speaker || next.speaker[0]?.deviceId || ""
-      }));
-    }).catch(() => {
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [meeting, open]);
-  const trimmedDisplayName = displayName.trim();
-  const displayNameUnchanged = trimmedDisplayName === savedDisplayName;
-  const displayNameSaveDisabled = !trimmedDisplayName || displayNameUnchanged || savingDisplayName;
-  async function onChange(kind, deviceId) {
-    setSelected((prev) => ({ ...prev, [kind]: deviceId }));
-    await meeting.setDevice(kind, deviceId);
-  }
-  async function onSaveDisplayName() {
-    if (displayNameSaveDisabled) return;
-    setSavingDisplayName(true);
-    try {
-      await meeting.setDisplayName(trimmedDisplayName);
-      setSavedDisplayName(trimmedDisplayName);
-      setDisplayName(trimmedDisplayName);
-      sonner.toast.success(labels.displayNameSaved);
-    } catch {
-      sonner.toast.error(labels.displayNameError);
-    } finally {
-      setSavingDisplayName(false);
-    }
-  }
-  async function onTestSpeaker() {
-    if (!selected.speaker || testingSpeaker) return;
-    setTestingSpeaker(true);
-    try {
-      await playSpeakerTest(selected.speaker);
-    } catch {
-      sonner.toast.error(labels.testSpeakerError);
-    } finally {
-      setTestingSpeaker(false);
-    }
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-md", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: labels.settingsTitle }),
-      /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: labels.settingsDescription })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "studio-display-name", children: labels.guestName }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+  const onStage = isOnStage(tile.stageStatus);
+  const [confirm, setConfirm] = react.useState(null);
+  const showMenu = (canModerate || canManageStage) && !tile.isSelf;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "article",
+    {
+      "aria-label": tile.name,
+      className: cn(
+        "bg-muted relative overflow-hidden rounded-xl",
+        compact ? "aspect-video w-40 shrink-0 md:w-full" : tile.kind === "screen" ? "min-h-0 flex-1 md:min-h-48" : fill ? "size-full min-h-0 md:aspect-video md:h-auto" : "aspect-video"
+      ),
+      children: [
+        tile.kind === "idle" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-3", children: [
+          tile.picture ? /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: tile.picture,
+              alt: "",
+              className: "size-16 rounded-full object-cover"
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-background flex size-16 items-center justify-center rounded-full text-xl", children: tile.name.slice(0, 1).toUpperCase() }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            AudioWaveform,
+            {
+              track: tile.isSelf ? meeting.localAudioTrack() : null,
+              reducedMotion
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+          StudioTileVideo,
+          {
+            meeting,
+            participantId: tile.id,
+            kind: tile.kind,
+            mirror: tile.kind === "camera" && tile.isSelf,
+            contain: tile.kind === "screen"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-x-0 bottom-0 z-10 flex items-end justify-between gap-2 bg-linear-to-t from-black/70 to-transparent p-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "min-w-0 truncate text-xs font-medium text-white", children: [
+            tile.name,
+            !onStage ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 rounded-full border border-white/40 px-1.5 py-0.5 text-[0.65rem]", children: labels.offAir }) : null
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TileStatusIcons, { tile, labels }),
+            showMenu ? /* @__PURE__ */ jsxRuntime.jsx(
+              StudioTileMenu,
+              {
+                tile,
+                canModerate,
+                canManageStage,
+                takeOffBlocked,
+                labels,
+                onKick: () => setConfirm("kick"),
+                onMute,
+                onStopCamera,
+                onStopScreen,
+                onToggleStage: () => {
+                  if (onStage && confirmTakeOff && !takeOffBlocked) {
+                    setConfirm("takeOff");
+                    return;
+                  }
+                  onToggleStage();
+                },
+                onTogglePin,
+                onToggleChat
+              }
+            ) : null
+          ] })
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          Input,
+          ConfirmAction,
           {
-            id: "studio-display-name",
-            value: displayName,
-            maxLength: STUDIO_DISPLAY_NAME_MAX,
-            onChange: (event) => setDisplayName(event.target.value)
+            open: confirm === "kick",
+            onOpenChange: (open) => {
+              if (!open) setConfirm(null);
+            },
+            triggerLabel: labels.kick,
+            title: labels.kickTitle,
+            description: labels.kickDescription,
+            confirmLabel: labels.kickConfirm,
+            onConfirm: () => {
+              setConfirm(null);
+              onKick();
+            }
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
+          ConfirmAction,
           {
-            type: "button",
-            variant: "outline",
-            disabled: displayNameSaveDisabled,
-            onClick: () => void onSaveDisplayName(),
-            children: labels.displayNameSave
+            open: confirm === "takeOff",
+            onOpenChange: (open) => {
+              if (!open) setConfirm(null);
+            },
+            triggerLabel: labels.takeOffAir,
+            title: labels.takeOffAirTitle,
+            description: labels.takeOffAirDescription,
+            confirmLabel: labels.takeOffAirConfirm,
+            onConfirm: () => {
+              setConfirm(null);
+              onToggleStage();
+            }
           }
         )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      SettingsCameraPreview,
-      {
-        track: videoTrack,
-        open,
-        cameraOn,
-        cameraOffLabel: labels.cameraOff
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "sr-only", children: labels.micLevel }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        AudioWaveform,
-        {
-          track: audioTrack,
-          reducedMotion,
-          className: "w-full"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[8.5rem_minmax(0,1fr)] items-center gap-x-3 gap-y-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        DeviceRow,
-        {
-          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, {}),
-          label: labels.cameraDevice,
-          options: devices.video,
-          value: selected.video,
-          onChange: (id) => void onChange("video", id)
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        DeviceRow,
-        {
-          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, {}),
-          label: labels.micDevice,
-          options: devices.audio,
-          value: selected.audio,
-          onChange: (id) => void onChange("audio", id)
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        DeviceRow,
-        {
-          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Volume2, {}),
-          label: labels.speakerDevice,
-          options: devices.speaker,
-          value: selected.speaker,
-          onChange: (id) => void onChange("speaker", id),
-          action: /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              type: "button",
-              size: "sm",
-              variant: "outline",
-              disabled: !selected.speaker || testingSpeaker,
-              onClick: () => void onTestSpeaker(),
-              children: labels.testSpeaker
-            }
-          )
-        }
-      )
-    ] })
-  ] }) });
+      ]
+    }
+  );
 }
-function SettingsCameraPreview({
-  track,
-  open,
-  cameraOn,
-  cameraOffLabel
+function TileStatusIcons({
+  tile,
+  labels
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    tile.audioEnabled ? null : /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { label: labels.mute, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MicOff, {}) }),
+    tile.kind !== "screen" && !tile.videoEnabled ? /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { label: labels.cameraOff, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.VideoOff, {}) }) : null,
+    tile.kind !== "screen" && tile.screenShareEnabled ? /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { label: labels.stopScreen, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MonitorUp, {}) }) : null,
+    tile.pinned ? /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { label: labels.pin, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pin, {}) }) : null,
+    tile.chatCanSend === false ? /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { label: labels.muteChat, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquareOff, {}) }) : null
+  ] });
+}
+function StatusIcon({
+  label,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex text-white", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "[&_svg]:size-3.5", children }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: label })
+  ] });
+}
+function StudioTileVideo({
+  meeting,
+  participantId,
+  kind,
+  mirror,
+  contain
 }) {
   const ref = react.useRef(null);
   react.useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    if (!open || !cameraOn || !track) {
-      el.srcObject = null;
-      return;
-    }
-    el.srcObject = new MediaStream([track]);
-    void el.play().catch(() => void 0);
-    return () => {
-      el.srcObject = null;
-    };
-  }, [cameraOn, open, track]);
-  if (!cameraOn) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted flex aspect-video w-full items-center justify-center rounded-xl", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: cameraOffLabel }) });
-  }
-  if (!track) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted aspect-video w-full rounded-xl", "aria-hidden": true });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted relative aspect-video w-full overflow-hidden rounded-xl", children: /* @__PURE__ */ jsxRuntime.jsx(
+    meeting.attachVideo(participantId, ref.current, kind);
+    return () => meeting.attachVideo(participantId, null, kind);
+  }, [kind, meeting, participantId]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "video",
     {
       ref,
       autoPlay: true,
-      muted: true,
       playsInline: true,
-      className: "absolute inset-0 size-full -scale-x-100 object-cover"
+      muted: true,
+      disablePictureInPicture: true,
+      controlsList: "nodownload noplaybackrate noremoteplayback",
+      className: cn(
+        "absolute inset-0 size-full",
+        "pointer-events-none",
+        contain ? "object-contain" : "object-cover",
+        mirror && "-scale-x-100"
+      )
     }
-  ) });
-}
-function DeviceRow({
-  icon,
-  label,
-  options,
-  value,
-  onChange,
-  action
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground flex min-w-0 items-center gap-2 text-sm", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "[&_svg]:size-4", "aria-hidden": true, children: icon }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "select",
-        {
-          "aria-label": label,
-          className: cn(
-            "border-input bg-background h-8 min-w-0 flex-1 rounded-md border px-2 text-sm"
-          ),
-          disabled: options.length === 0,
-          value,
-          onChange: (event) => onChange(event.target.value),
-          children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.deviceId, children: option.label }, option.deviceId))
-        }
-      ),
-      action
-    ] })
-  ] });
+  );
 }
-function ControlIcon({
-  label,
-  pressed = false,
-  disabled = false,
-  pending = false,
-  tone = "default",
-  badge,
-  onClick,
-  children
+function StudioStage({
+  participants,
+  meeting,
+  reducedMotion,
+  canModerate,
+  canManageStage,
+  onAir,
+  labels,
+  onKick,
+  onMute,
+  onStopCamera,
+  onStopScreen,
+  onToggleStage,
+  onTogglePin,
+  onToggleChat,
+  canTakeOff,
+  onOpenPeople
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      TooltipTrigger,
+  const displayTiles = expandStudioTiles(participants);
+  const stage = studioStageLayout(displayTiles, {
+    activeSpeakerId: meeting.activeSpeakerId()
+  });
+  const sharing = stage.spotlight.length > 0;
+  const overflowLabel = labels.stageOverflow.replace(
+    "{count}",
+    String(stage.overflow)
+  );
+  function renderTile(tile, compact, fill = false) {
+    const takeOffBlocked = !canTakeOff(tile.id);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      StudioTile,
       {
-        render: /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            type: "button",
-            size: "icon-lg",
-            variant: tone === "danger" ? "destructive" : pressed ? "default" : "secondary",
-            className: "overflow-visible",
-            "aria-label": label,
-            "aria-pressed": pressed,
-            disabled,
-            onClick
-          }
+        tile,
+        meeting,
+        reducedMotion,
+        compact,
+        fill,
+        canModerate: canModerate && !tile.isSelf,
+        canManageStage: canManageStage && !tile.isSelf,
+        takeOffBlocked,
+        confirmTakeOff: onAir,
+        labels,
+        onKick: () => onKick(tile.id),
+        onMute: () => onMute(tile.id),
+        onStopCamera: () => onStopCamera(tile.id),
+        onStopScreen: () => onStopScreen(tile.id),
+        onToggleStage: () => onToggleStage(tile),
+        onTogglePin: () => onTogglePin(tile),
+        onToggleChat: () => onToggleChat(tile)
+      },
+      tile.tileId
+    );
+  }
+  function overflowChip(compact) {
+    if (stage.overflow <= 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        type: "button",
+        variant: "secondary",
+        className: cn(
+          "shrink-0",
+          compact ? "aspect-video w-40 md:w-full" : "aspect-video min-h-24"
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative overflow-visible", children: [
-          pending ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin motion-reduce:animate-none" }) : children,
-          badge != null && badge > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-primary text-primary-foreground absolute -top-2 -right-2 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[0.65rem]", children: badge }) : null
-        ] })
+        onClick: onOpenPeople,
+        children: overflowLabel
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: label })
-  ] });
+    );
+  }
+  if (sharing) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden md:flex-row", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col gap-2 bg-black p-3", children: stage.spotlight.map((tile) => renderTile(tile, false)) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 gap-2 overflow-x-auto p-2 md:w-64 md:flex-col md:overflow-auto", children: [
+        stage.strip.map((tile) => renderTile(tile, true)),
+        overflowChip(true)
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "mx-auto grid min-h-0 w-full flex-1 auto-rows-fr gap-2 overflow-hidden p-2 md:auto-rows-auto md:content-center md:gap-3 md:overflow-auto md:p-4",
+        stage.strip.length <= 1 ? "max-w-3xl grid-cols-1" : stage.strip.length <= 2 ? "max-w-5xl grid-cols-1 sm:grid-cols-2" : stage.strip.length <= 4 ? "max-w-5xl grid-cols-2 sm:grid-cols-2" : stage.strip.length <= 6 ? "max-w-6xl grid-cols-2 sm:grid-cols-2 xl:grid-cols-3" : "grid-cols-2 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4"
+      ),
+      children: [
+        stage.strip.map((tile) => renderTile(tile, false, true)),
+        overflowChip(false)
+      ]
+    }
+  );
 }
 function StudioToolbar({
   session,
@@ -3011,6 +3214,7 @@ function StudioToolbar({
   onClosePip,
   onLeave
 }) {
+  const fullscreenSupported = document.fullscreenEnabled === true && typeof document.documentElement.requestFullscreen === "function";
   async function enterFullscreen() {
     try {
       await document.documentElement.requestFullscreen();
@@ -3059,14 +3263,24 @@ function StudioToolbar({
         children: selfStageStatus === "ON_STAGE" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, {})
       }
     ) : null,
-    session.role === "guest" && stageEnabled && selfStageStatus !== "ON_STAGE" ? /* @__PURE__ */ jsxRuntime.jsx(
+    session.role === "guest" && stageEnabled ? /* @__PURE__ */ jsxRuntime.jsx(
       ControlIcon,
       {
-        label: selfStageStatus === "REQUESTED_TO_JOIN_STAGE" ? labels.stageRequested : labels.askToGoOnAir,
+        label: selfStageStatus === "ON_STAGE" ? labels.goOffAir : selfStageStatus === "REQUESTED_TO_JOIN_STAGE" ? labels.stageRequested : labels.askToGoOnAir,
         pressed: selfStageStatus === "REQUESTED_TO_JOIN_STAGE",
-        disabled: selfStageStatus === "REQUESTED_TO_JOIN_STAGE",
-        onClick: onAskStage,
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Users, {})
+        disabled: selfStageStatus === "REQUESTED_TO_JOIN_STAGE" || selfStageStatus === "ON_STAGE" && !canLeaveStage,
+        onClick: () => {
+          if (selfStageStatus === "ON_STAGE") {
+            if (!canLeaveStage) {
+              sonner.toast.message(labels.offAirLastVisible);
+              return;
+            }
+            onLeaveStage();
+            return;
+          }
+          onAskStage();
+        },
+        children: selfStageStatus === "ON_STAGE" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, {})
       }
     ) : null,
     showScreenControl ? canShareFreely ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -3119,14 +3333,14 @@ function StudioToolbar({
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Users, {})
       }
     ) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(
+    fullscreenSupported ? /* @__PURE__ */ jsxRuntime.jsx(
       ControlIcon,
       {
         label: labels.fullscreen,
         onClick: () => void enterFullscreen(),
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize, {})
       }
-    ),
+    ) : null,
     pipSupported ? /* @__PURE__ */ jsxRuntime.jsx(
       ControlIcon,
       {
@@ -3211,7 +3425,8 @@ function StudioRoom({
   playerOrigin,
   windowGate,
   initialCameraOn = true,
-  initialMuted = false
+  initialMuted = false,
+  initialDevices
 }) {
   const [cameraOn, setCameraOn] = react.useState(initialCameraOn);
   const [screenOn, setScreenOn] = react.useState(false);
@@ -3274,6 +3489,21 @@ function StudioRoom({
       postLivoEvent("live", { streamId: session.stream.id });
     }
   }, [onAir, session.stream.id]);
+  react.useEffect(() => {
+    const saved = initialDevices ?? readStudioDeviceSelection();
+    let cancelled = false;
+    void (async () => {
+      try {
+        const listed = await meeting.listDevices();
+        if (cancelled) return;
+        await applyStudioDeviceSelection(meeting.setDevice, saved, listed);
+      } catch {
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [initialDevices, meeting]);
   react.useEffect(() => {
     return () => {
       for (const id of grantCheckTimers.current) window.clearTimeout(id);
@@ -3473,10 +3703,9 @@ function StudioRoom({
   const self = participants.find((row) => row.isSelf);
   const canShareFreely = session.role === "moderator" || self?.stageStatus === "ON_STAGE" || shareGrant === "granted";
   const selfId = self?.id ?? null;
+  const selfUserId = self?.userId || null;
   const remoteParticipants = participants.filter((row) => !row.isSelf);
-  const incoming = chatMessages.filter(
-    (row) => row.userId !== selfId && row.userId !== self?.userId
-  );
+  const incoming = chatMessages.filter((row) => row.userId !== selfUserId);
   const unread = sideTab === "chat" ? 0 : Math.max(0, incoming.length - seenIncoming);
   const peopleBadge = waitlisted.length + stageRequests.length;
   react.useEffect(() => {
@@ -3816,17 +4045,21 @@ function StudioRoom({
     ) });
   }
   if (inWaitingRoom && session.role === "guest") {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-dvh flex-col items-center justify-center gap-4 p-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        StudioDevicePreflight,
-        {
-          reducedMotion,
-          cameraLabel: labels.preflightCamera,
-          micLabel: labels.preflightMic
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", role: "status", children: labels.waitingHost })
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      StudioGuestWaiting,
+      {
+        meeting,
+        reducedMotion,
+        cameraOn,
+        muted,
+        labels,
+        settingsOpen,
+        onToggleCamera,
+        onToggleMute: () => void onToggleMute(),
+        onOpenSettings: () => setSettingsOpen(true),
+        onCloseSettings: setSettingsOpen
+      }
+    );
   }
   if (participants.length > 0 || waitlisted.length > 0) {
     sawParticipants.current = true;
@@ -3838,7 +4071,14 @@ function StudioRoom({
     /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex h-12 items-center gap-3 border-b px-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "min-w-0 flex-1 truncate text-sm font-medium", children: session.stream.title }),
       onAir && liveStartedAtRef.current !== null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground tabular-nums text-xs", children: formatStudioElapsed(Date.now() - liveStartedAtRef.current) }) : null,
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full border px-2 py-0.5 text-xs", role: "status", children: statusChip }),
+      onAir ? /* @__PURE__ */ jsxRuntime.jsx(StudioLiveBadge, { role: "status", children: statusChip }) : /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "rounded-full border px-2 py-0.5 text-xs",
+          role: "status",
+          children: statusChip
+        }
+      ),
       session.role === "moderator" && (egressLost || !starting && !sending && !onAir && !active) ? /* @__PURE__ */ jsxRuntime.jsx(
         Button,
         {
@@ -3946,7 +4186,7 @@ function StudioRoom({
           onTabChange: setSideTab,
           onClose: () => setSideTab(null),
           meeting,
-          selfId,
+          selfUserId,
           participants,
           waitlisted,
           stageRequests,
@@ -4123,6 +4363,177 @@ function StudioRoom({
     ) : null
   ] });
 }
+function isOverconstrained(error) {
+  if (!error || typeof error !== "object") return false;
+  return error.name === "OverconstrainedError";
+}
+function trackConstraint(deviceId, exact) {
+  if (exact && deviceId) {
+    return { deviceId: { exact: deviceId } };
+  }
+  return true;
+}
+function stopStream(stream) {
+  if (!stream) return;
+  for (const track of stream.getTracks()) {
+    track.onended = null;
+    track.stop();
+  }
+}
+async function requestPreviewStream(wantAudio, wantVideo, audioDeviceId, videoDeviceId, exact) {
+  return navigator.mediaDevices.getUserMedia({
+    audio: wantAudio ? trackConstraint(audioDeviceId, exact) : false,
+    video: wantVideo ? trackConstraint(videoDeviceId, exact) : false
+  });
+}
+function StudioDevicePreflight({
+  reducedMotion,
+  cameraLabel,
+  micLabel,
+  cameraOn = true,
+  muted = false,
+  audioDeviceId = "",
+  videoDeviceId = "",
+  cameraOffLabel = "Camera is off",
+  onPermission,
+  onError
+}) {
+  const videoRef = react.useRef(null);
+  const onPermissionRef = react.useRef(onPermission);
+  const onErrorRef = react.useRef(onError);
+  onPermissionRef.current = onPermission;
+  onErrorRef.current = onError;
+  const [audioTrack, setAudioTrack] = react.useState(null);
+  const [cameraOk, setCameraOk] = react.useState(false);
+  const [micOk, setMicOk] = react.useState(false);
+  react.useEffect(() => {
+    let cancelled = false;
+    let generation = 0;
+    let current = null;
+    function bindEnded(stream, gen) {
+      for (const track of stream.getTracks()) {
+        track.onended = () => {
+          if (cancelled || gen !== generation) return;
+          void acquire();
+        };
+      }
+    }
+    async function acquire() {
+      const gen = ++generation;
+      stopStream(current);
+      current = null;
+      if (cancelled) return;
+      if (!cameraOn && muted) {
+        setAudioTrack(null);
+        setCameraOk(false);
+        setMicOk(false);
+        if (videoRef.current) videoRef.current.srcObject = null;
+        return;
+      }
+      if (!navigator.mediaDevices?.getUserMedia) {
+        setAudioTrack(null);
+        setCameraOk(false);
+        setMicOk(false);
+        onErrorRef.current?.();
+        return;
+      }
+      const wantAudio = !muted;
+      const wantVideo = cameraOn;
+      const hadExact = Boolean(
+        wantAudio && audioDeviceId || wantVideo && videoDeviceId
+      );
+      try {
+        let next;
+        try {
+          next = await requestPreviewStream(
+            wantAudio,
+            wantVideo,
+            audioDeviceId,
+            videoDeviceId,
+            true
+          );
+        } catch (error) {
+          if (!isOverconstrained(error) || !hadExact) {
+            throw error;
+          }
+          next = await requestPreviewStream(
+            wantAudio,
+            wantVideo,
+            audioDeviceId,
+            videoDeviceId,
+            false
+          );
+        }
+        if (cancelled || gen !== generation) {
+          stopStream(next);
+          return;
+        }
+        current = next;
+        const video = next.getVideoTracks()[0] ?? null;
+        const audio = next.getAudioTracks()[0] ?? null;
+        setCameraOk(Boolean(video));
+        setMicOk(Boolean(audio));
+        setAudioTrack(audio);
+        if (videoRef.current) {
+          videoRef.current.srcObject = video ? next : null;
+        }
+        bindEnded(next, gen);
+        onPermissionRef.current?.();
+      } catch {
+        if (cancelled || gen !== generation) return;
+        setAudioTrack(null);
+        setCameraOk(false);
+        setMicOk(false);
+        if (videoRef.current) videoRef.current.srcObject = null;
+        onErrorRef.current?.();
+      }
+    }
+    void acquire();
+    return () => {
+      cancelled = true;
+      generation += 1;
+      stopStream(current);
+      current = null;
+    };
+  }, [audioDeviceId, cameraOn, muted, videoDeviceId]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col items-center gap-3", children: [
+    cameraOn ? /* @__PURE__ */ jsxRuntime.jsx(
+      "video",
+      {
+        ref: videoRef,
+        autoPlay: true,
+        muted: true,
+        playsInline: true,
+        className: "bg-muted aspect-video w-full rounded-xl object-cover"
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted flex aspect-video w-full items-center justify-center rounded-xl", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: cameraOffLabel }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AudioWaveform,
+      {
+        track: muted ? null : audioTrack,
+        reducedMotion
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-muted-foreground text-sm", role: "status", children: [
+      cameraLabel,
+      ": ",
+      cameraOk && cameraOn ? "OK" : "\u2014",
+      " \xB7 ",
+      micLabel,
+      ":",
+      " ",
+      micOk && !muted ? "OK" : "\u2014"
+    ] })
+  ] });
+}
+var LOBBY_DEVICE_LABEL_DEFAULTS = {
+  cameraDevice: "Camera",
+  micDevice: "Microphone",
+  speakerDevice: "Speaker",
+  testSpeaker: "Test",
+  testSpeakerError: "Could not play the speaker test",
+  cameraOff: "Camera is off"
+};
 function StudioGuestLobby({
   reducedMotion,
   cameraOn,
@@ -4133,11 +4544,48 @@ function StudioGuestLobby({
   waitingForHost,
   error,
   labels,
+  savedDevices,
   onCameraChange,
   onMutedChange,
   onDisplayNameChange,
+  onDeviceChange,
   onJoin
 }) {
+  const [refreshKey, setRefreshKey] = react.useState(0);
+  const [internalSaved, setInternalSaved] = react.useState(
+    () => readStudioDeviceSelection()
+  );
+  const [testingSpeaker, setTestingSpeaker] = react.useState(false);
+  const devices = useMediaDevices(refreshKey);
+  const saved = savedDevices ?? internalSaved;
+  const { effective } = resolveDeviceSelection(saved, devices);
+  const deviceLabels = {
+    cameraDevice: labels.cameraDevice ?? LOBBY_DEVICE_LABEL_DEFAULTS.cameraDevice,
+    micDevice: labels.micDevice ?? LOBBY_DEVICE_LABEL_DEFAULTS.micDevice,
+    speakerDevice: labels.speakerDevice ?? LOBBY_DEVICE_LABEL_DEFAULTS.speakerDevice,
+    testSpeaker: labels.testSpeaker ?? LOBBY_DEVICE_LABEL_DEFAULTS.testSpeaker,
+    testSpeakerError: labels.testSpeakerError ?? LOBBY_DEVICE_LABEL_DEFAULTS.testSpeakerError,
+    cameraOff: labels.cameraOff ?? LOBBY_DEVICE_LABEL_DEFAULTS.cameraOff
+  };
+  function changeDevice(kind, deviceId) {
+    persistStudioDeviceSelection(kind, deviceId);
+    onDeviceChange?.(kind, deviceId);
+    if (!savedDevices) {
+      setInternalSaved((prev) => ({ ...prev, [kind]: deviceId }));
+    }
+  }
+  async function onTestSpeaker() {
+    const speakerId = effective.speaker || devices.speaker[0]?.deviceId || "";
+    if (!speakerId || testingSpeaker) return;
+    setTestingSpeaker(true);
+    try {
+      await playSpeakerTest(speakerId);
+    } catch {
+      sonner.toast.error(deviceLabels.testSpeakerError);
+    } finally {
+      setTestingSpeaker(false);
+    }
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex min-h-dvh w-full max-w-lg flex-col justify-center gap-6 p-6", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg font-semibold", children: labels.title }),
@@ -4149,8 +4597,12 @@ function StudioGuestLobby({
         reducedMotion,
         cameraOn,
         muted,
+        audioDeviceId: effective.audio,
+        videoDeviceId: effective.video,
         cameraLabel: labels.camera,
-        micLabel: labels.mic
+        micLabel: labels.mic,
+        cameraOffLabel: deviceLabels.cameraOff,
+        onPermission: () => setRefreshKey((n) => n === 0 ? 1 : n)
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-center gap-2", children: [
@@ -4179,6 +4631,26 @@ function StudioGuestLobby({
         }
       )
     ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      StudioDeviceSelectGroup,
+      {
+        devices,
+        selected: effective,
+        labels: deviceLabels,
+        onChange: changeDevice,
+        speakerAction: /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: "outline",
+            disabled: !(effective.speaker || devices.speaker[0]?.deviceId) || testingSpeaker,
+            onClick: () => void onTestSpeaker(),
+            children: deviceLabels.testSpeaker
+          }
+        )
+      }
+    ),
     showName ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "studio-guest-name", children: labels.name }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -4224,16 +4696,16 @@ function usePrefersReducedMotion() {
 // src/studio/lib/guest-identity.ts
 var NAME_KEY = "livo-studio-display-name";
 var ID_KEY = "livo-studio-guest-id";
-function readStudioGuestIdentity(storage = defaultStorage()) {
+function readStudioGuestIdentity(storage = defaultStorage2()) {
   const guestId = storage?.getItem(ID_KEY)?.trim() || crypto.randomUUID();
   storage?.setItem(ID_KEY, guestId);
   const displayName = storage?.getItem(NAME_KEY)?.trim() ?? "";
   return { displayName, guestId };
 }
-function persistStudioGuestName(displayName, storage = defaultStorage()) {
+function persistStudioGuestName(displayName, storage = defaultStorage2()) {
   storage?.setItem(NAME_KEY, displayName.trim());
 }
-function defaultStorage() {
+function defaultStorage2() {
   if (typeof window === "undefined") return null;
   try {
     return window.localStorage;
@@ -4817,7 +5289,15 @@ function studioMeetingFromRtk(raw) {
         notifyStage();
         return;
       }
-      await meeting.stage?.join?.();
+      try {
+        await meeting.stage?.join?.();
+      } catch {
+        const userId = meeting.self?.userId;
+        if (userId) {
+          await meeting.stage?.grantAccess?.([userId]);
+        }
+        await meeting.stage?.join?.();
+      }
       joinedStageLocally = true;
       await republishCameraIfOn();
       notifyStage();
@@ -5107,7 +5587,11 @@ function useRealtimeKitMeeting(authToken, generation = 0) {
   const [meeting, setMeeting] = react.useState(null);
   const [error, setError] = react.useState(null);
   react.useEffect(() => {
-    if (!authToken) return;
+    if (!authToken) {
+      setMeeting(null);
+      setError(null);
+      return;
+    }
     let cancelled = false;
     let handle = null;
     setError(null);
@@ -5394,6 +5878,9 @@ function LivoGuestStudio({
   const [waitingForHost, setWaitingForHost] = react.useState(false);
   const [cameraOn, setCameraOn] = react.useState(true);
   const [muted, setMuted] = react.useState(false);
+  const [deviceSelection, setDeviceSelection] = react.useState(
+    () => readStudioDeviceSelection()
+  );
   const [retryAfterMs, setRetryAfterMs] = react.useState(null);
   const [sessionGen, setSessionGen] = react.useState(0);
   const joinInFlight = react.useRef(false);
@@ -5408,7 +5895,15 @@ function LivoGuestStudio({
     const identity = readStudioGuestIdentity();
     setDisplayName(identity.displayName);
     setGuestId(identity.guestId);
+    setDeviceSelection(readStudioDeviceSelection());
   }, []);
+  const onDeviceChange = react.useCallback(
+    (kind, deviceId) => {
+      persistStudioDeviceSelection(kind, deviceId);
+      setDeviceSelection((prev) => ({ ...prev, [kind]: deviceId }));
+    },
+    []
+  );
   const join = react.useCallback(async () => {
     if (joinInFlight.current) return;
     const name = displayName.trim();
@@ -5441,9 +5936,9 @@ function LivoGuestStudio({
         setError(err instanceof Error ? err.message : lobbyLabels.joinError);
         setWaitingForHost(false);
       }
-      setJoining(false);
     } finally {
       joinInFlight.current = false;
+      setJoining(false);
     }
   }, [apiUrl, displayName, guestId, lobbyLabels, token]);
   react.useEffect(() => {
@@ -5497,9 +5992,11 @@ function LivoGuestStudio({
         waitingForHost,
         error,
         labels: lobbyLabels,
+        savedDevices: deviceSelection,
         onCameraChange: setCameraOn,
         onMutedChange: setMuted,
         onDisplayNameChange: setDisplayName,
+        onDeviceChange,
         onJoin: () => void join()
       }
     );
@@ -5517,13 +6014,18 @@ function LivoGuestStudio({
       onRejoin: () => {
         setSession(null);
         setSessionGen((n) => n + 1);
+        setJoining(false);
+        setWaitingForHost(false);
+        setError(null);
+        joinInFlight.current = false;
       },
       reducedMotion,
       labels,
       embed,
       playerOrigin,
       initialCameraOn: cameraOn,
-      initialMuted: muted
+      initialMuted: muted,
+      initialDevices: deviceSelection
     }
   );
 }