@arbidocs/blocks 0.4.110 → 0.4.111

package/dist/calls/index.js

@@ -1,14 +1,17 @@
 "use client";
+import { ConfirmDialog } from '../chunk-JJLMCV3T.js';
 import { TabHeader } from '../chunk-4WWM3GQ5.js';
+import '../chunk-TX2ZICS7.js';
 import { NOTICE_MS, gridSlots, gridLayout, spotlightBox, CAPTION_TTL_MS, CAPTION_LINES, speakerAccent, formatElapsed, initialsOf } from '../chunk-Z3AZ7Q5X.js';
 export { CAPTION_LINES, CAPTION_TTL_MS, INITIAL_SPOTLIGHT, MAX_GRID_TILES, NOTICE_MS, SPEAKER_ACCENTS, SPEAKING_LEVEL, TILE_ASPECT, formatElapsed, gridLayout, gridSlots, initialsOf, nearestCorner, nextSpotlight, pickSpotlight, rowCounts, speakerAccent, speakerBorder, spotlightBox, stageContentHeight } from '../chunk-Z3AZ7Q5X.js';
 import '../chunk-NPLYHR2E.js';
 import '../chunk-7F6CBP3Z.js';
+import { fromNow } from '../chunk-OXF2IFXG.js';
 import '../chunk-VUNV25KB.js';
-import { forwardRef, useState, useRef, useMemo, useEffect } from 'react';
-import { Button, cn, Tooltip, TooltipTrigger, TooltipContent, Separator, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuCheckboxItem, Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@arbidocs/react/ui';
+import { forwardRef, useState, useRef, useMemo, useEffect, useCallback } from 'react';
+import { Button, cn, Tooltip, TooltipTrigger, TooltipContent, Separator, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuCheckboxItem, TabsList, TabsTrigger, Tabs, TabsContent, Input, Textarea, Dialog, DialogContent, DialogTitle, DialogDescription, Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@arbidocs/react/ui';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { MonitorUp, MicOff, AudioLines, SignalLow, Users, Mic, Captions, Lock, LockOpen, Video, VideoOff, ChevronUp, Loader2, Circle, PhoneOff, MoreHorizontal, LayoutGrid, UserRound, PictureInPicture2, Phone, X, Maximize2, BellOff, Bell, UserX } from 'lucide-react';
+import { MonitorUp, MicOff, AudioLines, SignalLow, Users, Mic, Captions, Lock, LockOpen, Video, VideoOff, ChevronUp, Loader2, Circle, PhoneOff, MoreHorizontal, LayoutGrid, UserRound, PictureInPicture2, Phone, X, Maximize2, BellOff, Bell, CalendarCheck, Radio, SquareX, EyeOff, Hand, Search, Send, MessageCircleQuestion, UserX, CheckCheck, RotateCcw, Trash2, MessageSquareText } from 'lucide-react';
 
 var TONE = {
   neutral: "bg-muted text-foreground hover:bg-accent",
@@ -680,9 +683,11 @@ function LeaveButton({
   onLeave,
   compact = false,
   label = "Leave",
-  title = "Leave call"
+  title = "Leave call",
+  options
 }) {
-  return /* @__PURE__ */ jsxs(
+  const menu = !!options?.length;
+  const button = /* @__PURE__ */ jsxs(
     Button,
     {
       type: "button",
@@ -691,7 +696,7 @@ function LeaveButton({
       className: cn("shrink-0", !compact && "px-4"),
       "aria-label": title,
       title,
-      onClick: onLeave,
+      onClick: menu ? void 0 : onLeave,
       "data-testid": "call-leave",
       children: [
         /* @__PURE__ */ jsx(PhoneOff, { className: "size-4", "aria-hidden": true }),
@@ -699,13 +704,34 @@ function LeaveButton({
       ]
     }
   );
+  if (!menu) return button;
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [
+      /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: onLeave, "data-testid": "call-leave-only", children: [
+        /* @__PURE__ */ jsx(PhoneOff, { "aria-hidden": true }),
+        label
+      ] }),
+      options.map((o) => /* @__PURE__ */ jsx(
+        DropdownMenuItem,
+        {
+          onSelect: o.onSelect,
+          className: "text-red-text focus:text-red-text",
+          "data-testid": o.testId,
+          children: o.label
+        },
+        o.key
+      ))
+    ] })
+  ] });
 }
+var isSection = (g) => !Array.isArray(g);
 function MoreMenu({
   details,
   groups,
   label = "More options"
 }) {
-  const shown = groups.filter((g) => g.length > 0);
+  const shown = groups.filter((g) => isSection(g) || g.length > 0);
   return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
     /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(CallControlButton, { label, tooltip: false, "data-testid": "call-more", children: /* @__PURE__ */ jsx(MoreHorizontal, { "aria-hidden": true }) }) }),
     /* @__PURE__ */ jsxs(DropdownMenuContent, { side: "top", align: "end", className: "w-72", "data-testid": "call-more-menu", children: [
@@ -715,7 +741,7 @@ function MoreMenu({
       ] }),
       shown.map((group, i) => /* @__PURE__ */ jsxs("div", { role: "none", children: [
         i > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-        group.map((item) => /* @__PURE__ */ jsxs(
+        isSection(group) ? group.content : group.map((item) => /* @__PURE__ */ jsxs(
           DropdownMenuItem,
           {
             onSelect: item.onSelect,
@@ -729,7 +755,7 @@ function MoreMenu({
           },
           item.key
         ))
-      ] }, group[0].key))
+      ] }, isSection(group) ? group.key : group[0].key))
     ] })
   ] });
 }
@@ -907,40 +933,69 @@ function CallSidePanel({
   onClose,
   closeLabel,
   closeTestId,
+  tabs,
+  activeTab,
+  onTabChange,
   children,
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs(
+  const tabbed = !!tabs?.length;
+  const current = activeTab ?? tabs?.[0]?.id;
+  const header = /* @__PURE__ */ jsxs("div", { className: "flex h-12 shrink-0 items-center gap-2 border-b border-border pl-3 pr-1.5", children: [
+    tabbed ? /* @__PURE__ */ jsx(TabsList, { className: "h-8 min-w-0 flex-1 justify-start overflow-x-auto bg-transparent p-0", children: tabs.map((t) => /* @__PURE__ */ jsxs(
+      TabsTrigger,
+      {
+        value: t.id,
+        className: "h-8 gap-1.5 px-2.5 data-[state=active]:bg-muted data-[state=active]:text-primary data-[state=active]:shadow-none",
+        "data-testid": t.testId,
+        children: [
+          t.label,
+          t.count !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-xs tabular-nums text-muted-foreground", children: t.count })
+        ]
+      },
+      t.id
+    )) }) : /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2 text-base font-semibold text-primary", children: [
+      icon,
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: title })
+    ] }),
+    actions,
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon",
+        className: "size-8 text-muted-foreground hover:text-foreground",
+        "aria-label": closeLabel,
+        title: closeLabel,
+        onClick: onClose,
+        "data-testid": closeTestId,
+        children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx(
     "aside",
     {
       className: cn("flex min-h-0 flex-col bg-background text-foreground", className),
       "aria-label": title,
       ...rest,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex h-12 shrink-0 items-center gap-2 border-b border-border pl-3 pr-1.5", children: [
-          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2 text-base font-semibold text-primary", children: [
-            icon,
-            /* @__PURE__ */ jsx("span", { className: "truncate", children: title })
-          ] }),
-          actions,
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              type: "button",
-              variant: "ghost",
-              size: "icon",
-              className: "size-8 text-muted-foreground hover:text-foreground",
-              "aria-label": closeLabel,
-              title: closeLabel,
-              onClick: onClose,
-              "data-testid": closeTestId,
-              children: /* @__PURE__ */ jsx(X, { className: "size-4" })
-            }
-          )
-        ] }),
+      children: tabbed ? /* @__PURE__ */ jsxs(
+        Tabs,
+        {
+          value: current,
+          onValueChange: (id) => onTabChange?.(id),
+          className: "flex min-h-0 flex-1 flex-col",
+          children: [
+            header,
+            current && /* @__PURE__ */ jsx(TabsContent, { value: current, className: "mt-0 flex min-h-0 flex-1 flex-col", children })
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        header,
         children
-      ]
+      ] })
     }
   );
 }
@@ -973,6 +1028,31 @@ function VoiceMeter({
     }
   );
 }
+function CallPersonLabel({
+  name,
+  entity,
+  isLocal = false,
+  youLabel = "(me)"
+}) {
+  if (entity) return /* @__PURE__ */ jsx(Fragment, { children: entity });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "flex size-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary",
+        "aria-hidden": true,
+        children: initialsOf(name)
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "min-w-0 truncate", children: [
+      name,
+      isLocal && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+        " ",
+        youLabel
+      ] })
+    ] })
+  ] });
+}
 function PersonRow({
   p,
   canRemove,
@@ -1002,20 +1082,7 @@ function PersonRow({
                 children: p.entity
               }
             )
-          ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "flex size-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary",
-                "aria-hidden": true,
-                children: initialsOf(p.name)
-              }
-            ),
-            /* @__PURE__ */ jsxs("span", { className: "min-w-0 truncate", children: [
-              p.name,
-              p.isLocal && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: " (me)" })
-            ] })
-          ] }),
+          ) : /* @__PURE__ */ jsx(CallPersonLabel, { name: p.name, isLocal: p.isLocal }),
           p.speaking && /* @__PURE__ */ jsx("span", { className: "sr-only", children: " \u2014 speaking" }),
           p.note && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: p.note })
         ] }),
@@ -1427,18 +1494,22 @@ function CallStateMessage({
   title,
   description,
   spinner = true,
+  icon,
   action,
+  children,
   testId
 }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: "flex size-full flex-col items-center justify-center gap-3 p-6 text-center",
+      role: "status",
       "data-testid": testId,
       children: [
-        spinner && /* @__PURE__ */ jsx(Loader2, { className: "size-6 animate-spin text-muted-foreground", "aria-hidden": true }),
+        icon ?? (spinner && /* @__PURE__ */ jsx(Loader2, { className: "size-6 animate-spin text-muted-foreground", "aria-hidden": true })),
         /* @__PURE__ */ jsx("p", { className: "text-base font-semibold", children: title }),
         description && /* @__PURE__ */ jsx("p", { className: "max-w-sm text-sm text-muted-foreground", children: description }),
+        children,
         action
       ]
     }
@@ -1580,8 +1651,10 @@ function DeviceSelect({
 function PreJoin({
   title,
   heading = "Ready to join?",
+  headingAs: Heading = "h2",
   children,
   joinLabel = "Join",
+  cancelLabel = "Cancel",
   busy = false,
   error,
   onJoin,
@@ -1652,7 +1725,7 @@ function PreJoin({
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold", children: heading }),
+        /* @__PURE__ */ jsx(Heading, { className: "text-xl font-semibold", children: heading }),
         title && /* @__PURE__ */ jsx("p", { className: "truncate text-sm text-muted-foreground", children: title })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
@@ -1723,15 +1796,958 @@ function PreJoin({
             type: "button",
             variant: "outline",
             onClick: onCancel,
+            disabled: busy,
             "data-testid": "call-prejoin-cancel",
-            children: "Cancel"
+            children: cancelLabel
           }
         )
       ] })
     ] })
   ] }) });
 }
+function WebinarWaiting({
+  variant,
+  title,
+  when,
+  host,
+  onLeave,
+  leaveLabel = "Leave"
+}) {
+  const waiting = variant === "waiting";
+  return /* @__PURE__ */ jsx(
+    CallStateMessage,
+    {
+      title: waiting ? "Starting soon" : "This webinar has ended",
+      description: waiting ? "The host hasn't gone live yet. You'll join automatically when the webinar starts." : "Thanks for attending.",
+      spinner: waiting,
+      icon: waiting ? void 0 : /* @__PURE__ */ jsx(CalendarCheck, { className: "size-6 text-muted-foreground", "aria-hidden": true }),
+      testId: waiting ? "webinar-waiting" : "webinar-ended",
+      action: onLeave && /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          onClick: onLeave,
+          "data-testid": "webinar-waiting-leave",
+          children: leaveLabel
+        }
+      ),
+      children: (title || when || host) && /* @__PURE__ */ jsxs("div", { className: "flex max-w-sm flex-col items-center gap-1 text-sm", children: [
+        title && /* @__PURE__ */ jsx("p", { className: "font-medium", "data-testid": "webinar-waiting-title", children: title }),
+        when && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", "data-testid": "webinar-waiting-when", children: when }),
+        host && /* @__PURE__ */ jsxs(
+          "p",
+          {
+            className: "flex flex-wrap items-center justify-center gap-1 text-muted-foreground",
+            "data-testid": "webinar-waiting-host",
+            children: [
+              /* @__PURE__ */ jsx("span", { children: "Hosted by" }),
+              host
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+function usePending() {
+  const [keys, setKeys] = useState(() => /* @__PURE__ */ new Set());
+  const mounted = useRef(true);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const set = useCallback((key, on) => {
+    if (!mounted.current) return;
+    setKeys((prev) => {
+      if (prev.has(key) === on) return prev;
+      const next = new Set(prev);
+      if (on) next.add(key);
+      else next.delete(key);
+      return next;
+    });
+  }, []);
+  const run = useCallback(
+    async (key, fn) => {
+      let result;
+      try {
+        result = fn();
+      } catch {
+        return false;
+      }
+      if (!result || typeof result.then !== "function") return true;
+      set(key, true);
+      try {
+        await result;
+        return true;
+      } catch {
+        return false;
+      } finally {
+        set(key, false);
+      }
+    },
+    [set]
+  );
+  const isPending = useCallback((key) => keys.has(key), [keys]);
+  return { isPending, run };
+}
+function useNow(ms = 3e4, fixed) {
+  const [now, setNow] = useState(() => /* @__PURE__ */ new Date());
+  const ticking = !fixed;
+  useEffect(() => {
+    if (!ticking) return;
+    const id = setInterval(() => setNow(/* @__PURE__ */ new Date()), ms);
+    return () => clearInterval(id);
+  }, [ms, ticking]);
+  return fixed ?? now;
+}
+function WebinarLiveChip({
+  compact = false,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    CallStatusChip,
+    {
+      tone: "red",
+      icon: /* @__PURE__ */ jsx(Radio, { className: "size-3.5 shrink-0", "aria-hidden": true }),
+      label: "Live",
+      compact,
+      title: "Live: attendees see and hear the stage",
+      role: "status",
+      className,
+      testId: "webinar-live-chip"
+    }
+  );
+}
+function WebinarLiveControl({
+  live,
+  onGoLive,
+  onEnd,
+  compact = false,
+  className
+}) {
+  const { isPending, run } = usePending();
+  const [confirming, setConfirming] = useState(false);
+  if (!live) {
+    if (!onGoLive) return null;
+    const busy = isPending("live");
+    return /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        size: compact ? "icon" : "sm",
+        className: cn("h-8 shrink-0", !compact && "px-3", className),
+        disabled: busy,
+        "aria-label": "Go live",
+        title: "Go live: let attendees see and hear the stage",
+        onClick: () => void run("live", onGoLive),
+        "data-testid": "webinar-go-live",
+        children: [
+          busy ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": true }) : /* @__PURE__ */ jsx(Radio, { className: "size-4", "aria-hidden": true }),
+          !compact && "Go live"
+        ]
+      }
+    );
+  }
+  if (!onEnd) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: compact ? "icon" : "default",
+        className: cn(
+          "shrink-0 border-red-border text-red-text hover:bg-red-bg hover:text-red-text",
+          !compact && "px-4",
+          className
+        ),
+        "aria-label": "End webinar",
+        title: "End webinar for everyone",
+        onClick: () => setConfirming(true),
+        "data-testid": "webinar-end",
+        children: [
+          /* @__PURE__ */ jsx(SquareX, { className: "size-4", "aria-hidden": true }),
+          !compact && "End webinar"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(WebinarEndConfirm, { open: confirming, onOpenChange: setConfirming, onEnd })
+  ] });
+}
+function WebinarEndConfirm({
+  open,
+  onOpenChange,
+  onEnd
+}) {
+  const { isPending, run } = usePending();
+  const ending = isPending("end");
+  return /* @__PURE__ */ jsx(
+    ConfirmDialog,
+    {
+      isOpen: open,
+      onClose: () => onOpenChange(false),
+      onConfirm: () => void run("end", onEnd).then((ok) => {
+        if (ok) onOpenChange(false);
+      }),
+      title: "End the webinar?",
+      description: "Everyone leaves, attendees and panelists alike. The stage closes and cannot be reopened in this session.",
+      confirmText: "End webinar",
+      isLoading: ending,
+      testId: "webinar-end-confirm",
+      testIds: { cancel: "webinar-end-cancel", confirm: "webinar-end-confirm-button" }
+    }
+  );
+}
+function BackstageBanner({
+  onGoLive,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex min-h-10 min-w-0 items-center gap-2 rounded-md border border-yellow-border bg-yellow-bg py-1 pl-3 pr-1 text-sm text-yellow-text",
+        className
+      ),
+      role: "status",
+      "data-testid": "webinar-backstage",
+      children: [
+        /* @__PURE__ */ jsx(EyeOff, { className: "size-4 shrink-0", "aria-hidden": true }),
+        /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Backstage" }),
+          " \u2014 attendees can't see or hear you yet",
+          !onGoLive && /* @__PURE__ */ jsx("span", { className: "text-yellow-text/80", children: ". The host goes live when ready." })
+        ] }),
+        onGoLive && /* @__PURE__ */ jsx(WebinarLiveControl, { live: false, onGoLive })
+      ]
+    }
+  );
+}
+function RaiseHandButton({
+  raised,
+  onToggle,
+  pending = false,
+  shortcut = "H",
+  className
+}) {
+  const { isPending, run } = usePending();
+  const busy = pending || isPending("hand");
+  return /* @__PURE__ */ jsx(
+    CallControlButton,
+    {
+      label: raised ? "Lower hand" : "Raise hand",
+      shortcut,
+      tone: raised ? "active" : "neutral",
+      "aria-pressed": raised,
+      disabled: busy,
+      "aria-busy": busy || void 0,
+      onClick: () => void run("hand", () => onToggle(!raised)),
+      className,
+      "data-testid": "webinar-raise-hand",
+      "data-raised": raised,
+      "data-call-shortcut": shortcut.toLowerCase(),
+      children: /* @__PURE__ */ jsx(Hand, { "aria-hidden": true })
+    }
+  );
+}
+var ROLE_NOTE = {
+  host: "Host",
+  cohost: "Co-host",
+  panelist: "Panelist",
+  attendee: null
+};
+function SectionTitle({ children }) {
+  return /* @__PURE__ */ jsx("h3", { className: "flex items-center gap-1.5 px-2 pb-1 pt-3 text-xs font-medium text-muted-foreground", children });
+}
+function Row({ testId, children }) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      className: "flex min-h-11 items-center gap-3 rounded-md px-2 py-1 hover:bg-muted",
+      "data-testid": testId,
+      children
+    }
+  );
+}
+function WebinarAudiencePanel({
+  hands,
+  attendees,
+  onPromote,
+  onDemote,
+  searchThreshold = 8,
+  now: fixedNow,
+  className
+}) {
+  const now = useNow(3e4, fixedNow);
+  const { isPending, run } = usePending();
+  const [query, setQuery] = useState("");
+  const queue = useMemo(
+    () => [...hands].sort((a, b) => Date.parse(a.raisedAt) - Date.parse(b.raisedAt)),
+    [hands]
+  );
+  const searchable = attendees.length > searchThreshold;
+  const q = searchable ? query.trim().toLowerCase() : "";
+  const shown = q ? attendees.filter((a) => a.name.toLowerCase().includes(q)) : attendees;
+  const action = (id, name, promote, where) => {
+    const key = `${promote ? "promote" : "demote"}:${id}`;
+    const busy = isPending(key);
+    return /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        className: "h-8 shrink-0",
+        disabled: busy,
+        "aria-label": promote ? `Promote ${name} to the stage` : `Move ${name} to the audience`,
+        onClick: () => void run(key, () => promote ? onPromote(id) : onDemote(id)),
+        "data-testid": `webinar-${where === "hand" ? "hand-" : ""}${promote ? "promote" : "demote"}-${id}`,
+        children: [
+          busy && /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": true }),
+          promote ? "Promote" : "Move to audience"
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("min-h-0 flex-1 overflow-y-auto px-2 pb-2", className),
+      "data-testid": "webinar-audience",
+      children: [
+        /* @__PURE__ */ jsxs("section", { "aria-label": "Raised hands", children: [
+          /* @__PURE__ */ jsxs(SectionTitle, { children: [
+            /* @__PURE__ */ jsx(Hand, { className: "size-3.5", "aria-hidden": true }),
+            "Raised hands (",
+            queue.length,
+            ")"
+          ] }),
+          queue.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-2 py-2 text-sm text-muted-foreground", "data-testid": "webinar-hands-empty", children: "No hands raised." }) : /* @__PURE__ */ jsx("ol", { children: queue.map((h) => /* @__PURE__ */ jsxs(Row, { testId: `webinar-hand-${h.id}`, children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "flex min-w-0 items-center gap-1.5 text-sm", children: /* @__PURE__ */ jsx(CallPersonLabel, { name: h.name, entity: h.entity }) }),
+              /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+                "Raised ",
+                fromNow(h.raisedAt, now)
+              ] })
+            ] }),
+            action(h.id, h.name, true, "hand")
+          ] }, h.id)) })
+        ] }),
+        /* @__PURE__ */ jsxs("section", { "aria-label": "Attendees", children: [
+          /* @__PURE__ */ jsxs(SectionTitle, { children: [
+            "Attendees (",
+            attendees.length,
+            ")"
+          ] }),
+          searchable && /* @__PURE__ */ jsxs("div", { className: "relative px-2 pb-1", children: [
+            /* @__PURE__ */ jsx(
+              Search,
+              {
+                className: "pointer-events-none absolute left-4.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground",
+                "aria-hidden": true
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "search",
+                value: query,
+                onChange: (e) => setQuery(e.target.value),
+                placeholder: "Find someone",
+                "aria-label": "Find an attendee",
+                className: "h-8 pl-8 text-sm",
+                "data-testid": "webinar-attendee-search"
+              }
+            )
+          ] }),
+          shown.length === 0 ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "px-2 py-2 text-sm text-muted-foreground",
+              "data-testid": "webinar-attendees-empty",
+              children: q ? `No one matches \u201C${query.trim()}\u201D.` : "No attendees yet."
+            }
+          ) : /* @__PURE__ */ jsx("ul", { children: shown.map((a) => {
+            const note = ROLE_NOTE[a.role];
+            return /* @__PURE__ */ jsxs(Row, { testId: `webinar-attendee-${a.id}`, children: [
+              /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-1.5 text-sm", children: [
+                /* @__PURE__ */ jsx(CallPersonLabel, { name: a.name, entity: a.entity }),
+                (note || a.onStage) && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: [note, a.onStage ? "On stage" : null].filter(Boolean).join(" \xB7 ") })
+              ] }),
+              a.handRaised && /* @__PURE__ */ jsx(
+                Hand,
+                {
+                  className: "size-4 shrink-0 text-primary",
+                  "aria-label": "Hand raised",
+                  "data-testid": `webinar-attendee-hand-${a.id}`
+                }
+              ),
+              a.onStage ? a.role !== "host" && action(a.id, a.name, false, "list") : !a.handRaised && action(a.id, a.name, true, "list")
+            ] }, a.id);
+          }) })
+        ] })
+      ]
+    }
+  );
+}
+var DEFAULT_MAX = 500;
+function sortQuestions(questions, filter) {
+  const match = (s) => filter === "open" ? s === "open" || s === "answering" : s === filter;
+  return questions.filter((q) => match(q.status)).sort(
+    (a, b) => Number(b.status === "answering") - Number(a.status === "answering") || b.voteCount - a.voteCount || Date.parse(a.createdAt) - Date.parse(b.createdAt)
+  );
+}
+function PanelComposer({
+  placeholder,
+  ariaLabel,
+  sendLabel,
+  maxLength,
+  busy,
+  onSend,
+  onCancel,
+  autoFocus,
+  testId
+}) {
+  const [text, setText] = useState("");
+  const body = text.trim();
+  const canSend = !!body && body.length <= maxLength && !busy;
+  const send = () => {
+    if (!canSend) return;
+    void onSend(body).then((ok) => {
+      if (ok) setText("");
+    });
+  };
+  const onKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+      e.preventDefault();
+      send();
+    } else if (e.key === "Escape" && onCancel) {
+      e.preventDefault();
+      onCancel();
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", "data-testid": testId, children: [
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        value: text,
+        onChange: (e) => setText(e.target.value),
+        onKeyDown,
+        placeholder,
+        "aria-label": ariaLabel,
+        maxLength,
+        rows: 2,
+        disabled: busy,
+        autoFocus,
+        className: "min-h-[60px] resize-none",
+        "data-testid": `${testId}-input`
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cn(
+            "flex-1 text-xs tabular-nums text-muted-foreground",
+            text.length >= maxLength && "text-red-text"
+          ),
+          "aria-live": "polite",
+          "data-testid": `${testId}-count`,
+          children: [
+            text.length,
+            "/",
+            maxLength
+          ]
+        }
+      ),
+      onCancel && /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          className: "h-8",
+          onClick: onCancel,
+          disabled: busy,
+          "data-testid": `${testId}-cancel`,
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          className: "h-8",
+          onClick: send,
+          disabled: !canSend,
+          "data-testid": `${testId}-send`,
+          children: [
+            busy ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": true }) : /* @__PURE__ */ jsx(Send, { className: "size-4", "aria-hidden": true }),
+            sendLabel
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function QuestionItem({
+  q,
+  team,
+  now,
+  maxLength,
+  pending,
+  run,
+  onVote,
+  onStatusChange,
+  onAnswer,
+  onDelete
+}) {
+  const [answering, setAnswering] = useState(false);
+  const voteKey = `vote:${q.id}`;
+  const statusKey = `status:${q.id}`;
+  const answerKey = `answer:${q.id}`;
+  const busy = pending(statusKey) || pending(answerKey) || pending(`delete:${q.id}`);
+  const setStatus = (status) => () => onStatusChange ? onStatusChange(q, status) : void 0;
+  const can = team && !!onStatusChange;
+  const primary = !can ? null : q.status === "open" ? { key: "live", label: "Answer live", icon: /* @__PURE__ */ jsx(Radio, {}), run: setStatus("answering") } : q.status === "answering" ? {
+    key: "answered",
+    label: "Mark answered",
+    icon: /* @__PURE__ */ jsx(CheckCheck, {}),
+    run: setStatus("answered")
+  } : { key: "reopen", label: "Reopen", icon: /* @__PURE__ */ jsx(RotateCcw, {}), run: setStatus("open") };
+  const more = [
+    ...can && q.status === "open" ? [
+      {
+        key: "answered",
+        label: "Mark answered",
+        icon: /* @__PURE__ */ jsx(CheckCheck, {}),
+        run: setStatus("answered")
+      }
+    ] : [],
+    ...can && q.status === "answering" ? [{ key: "reopen", label: "Reopen", icon: /* @__PURE__ */ jsx(RotateCcw, {}), run: setStatus("open") }] : [],
+    ...can && q.status !== "dismissed" ? [{ key: "dismiss", label: "Dismiss", icon: /* @__PURE__ */ jsx(X, {}), run: setStatus("dismissed") }] : [],
+    ...q.mine && q.status === "open" && onDelete ? [
+      {
+        key: "delete",
+        label: "Delete question",
+        icon: /* @__PURE__ */ jsx(Trash2, {}),
+        run: () => onDelete(q),
+        destructive: true
+      }
+    ] : []
+  ];
+  const canAnswerInText = team && !!onAnswer && !q.answer && q.status !== "dismissed";
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: "flex gap-2 rounded-md border border-border p-2",
+      "data-testid": `webinar-question-${q.id}`,
+      "data-status": q.status,
+      children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            className: cn(
+              "h-auto w-10 shrink-0 flex-col gap-0 self-start px-0 py-1 text-xs tabular-nums",
+              q.voted ? "bg-primary/10 text-primary hover:bg-primary/15" : "text-muted-foreground"
+            ),
+            "aria-pressed": q.voted,
+            "aria-label": q.mine ? `${q.voteCount} upvotes (your question)` : q.voted ? `Remove upvote (${q.voteCount})` : `Upvote (${q.voteCount})`,
+            title: q.mine ? "You can't upvote your own question" : void 0,
+            disabled: q.mine || pending(voteKey),
+            onClick: () => void run(voteKey, () => onVote(q, !q.voted)),
+            "data-testid": `webinar-question-vote-${q.id}`,
+            children: [
+              /* @__PURE__ */ jsx(ChevronUp, { className: "size-4", "aria-hidden": true }),
+              /* @__PURE__ */ jsx("span", { "data-testid": `webinar-question-votes-${q.id}`, children: q.voteCount })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "flex min-w-0 items-center gap-1.5 text-sm text-foreground",
+                "data-testid": `webinar-question-asker-${q.id}`,
+                children: q.askerName === null && !q.asker ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Attendee" }) : /* @__PURE__ */ jsx(CallPersonLabel, { name: q.askerName ?? "", entity: q.asker, isLocal: q.mine })
+              }
+            ),
+            /* @__PURE__ */ jsx("time", { dateTime: q.createdAt, children: fromNow(q.createdAt, now) }),
+            q.status === "answering" && /* @__PURE__ */ jsx(
+              CallStatusChip,
+              {
+                tone: "red",
+                icon: /* @__PURE__ */ jsx(Radio, { className: "size-3.5 shrink-0", "aria-hidden": true }),
+                label: "Answering live",
+                testId: `webinar-question-live-${q.id}`
+              }
+            ),
+            q.status === "answered" && /* @__PURE__ */ jsx(
+              CallStatusChip,
+              {
+                tone: "green",
+                icon: /* @__PURE__ */ jsx(CheckCheck, { className: "size-3.5 shrink-0", "aria-hidden": true }),
+                label: "Answered",
+                testId: `webinar-question-answered-${q.id}`
+              }
+            ),
+            q.status === "dismissed" && /* @__PURE__ */ jsx(CallStatusChip, { tone: "neutral", label: "Dismissed" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "whitespace-pre-wrap break-words text-sm",
+              "data-testid": `webinar-question-body-${q.id}`,
+              children: q.body
+            }
+          ),
+          q.answer && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex flex-col gap-1 rounded-md bg-muted px-2.5 py-2 text-sm",
+              "data-testid": `webinar-question-answer-${q.id}`,
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5 text-xs font-medium text-muted-foreground", children: [
+                  "Answer",
+                  q.answeredBy
+                ] }),
+                /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap break-words", children: q.answer })
+              ]
+            }
+          ),
+          answering && onAnswer && /* @__PURE__ */ jsx(
+            PanelComposer,
+            {
+              placeholder: "Write an answer",
+              ariaLabel: "Answer in text",
+              sendLabel: "Send answer",
+              maxLength,
+              busy: pending(answerKey),
+              autoFocus: true,
+              onSend: (text) => run(answerKey, () => onAnswer(q, text)).then((ok) => {
+                if (ok) setAnswering(false);
+                return ok;
+              }),
+              onCancel: () => setAnswering(false),
+              testId: `webinar-answer-${q.id}`
+            }
+          ),
+          (primary || canAnswerInText || more.length > 0) && !answering && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
+            primary && /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                size: "sm",
+                className: "h-7 gap-1.5 px-2 text-xs [&_svg]:size-3.5",
+                disabled: busy,
+                onClick: () => void run(statusKey, primary.run),
+                "data-testid": `webinar-question-${primary.key}-${q.id}`,
+                children: [
+                  pending(statusKey) ? /* @__PURE__ */ jsx(Loader2, { className: "animate-spin", "aria-hidden": true }) : primary.icon,
+                  primary.label
+                ]
+              }
+            ),
+            canAnswerInText && /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                className: "h-7 gap-1.5 px-2 text-xs [&_svg]:size-3.5",
+                disabled: busy,
+                onClick: () => setAnswering(true),
+                "data-testid": `webinar-question-answer-text-${q.id}`,
+                children: [
+                  /* @__PURE__ */ jsx(MessageSquareText, { "aria-hidden": true }),
+                  "Answer in text"
+                ]
+              }
+            ),
+            more.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+              /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon",
+                  className: "ml-auto size-7 text-muted-foreground hover:text-foreground",
+                  "aria-label": "More question actions",
+                  disabled: busy,
+                  "data-testid": `webinar-question-menu-${q.id}`,
+                  children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", className: "w-48", children: more.map((a) => /* @__PURE__ */ jsxs(
+                DropdownMenuItem,
+                {
+                  onSelect: () => void run(a.key === "delete" ? `delete:${q.id}` : statusKey, a.run),
+                  className: cn(a.destructive && "text-destructive focus:text-destructive"),
+                  "data-testid": `webinar-question-${a.key}-${q.id}`,
+                  children: [
+                    a.icon,
+                    a.label
+                  ]
+                },
+                a.key
+              )) })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+var EMPTY = {
+  open: {
+    team: "Questions from the audience appear here.",
+    audience: "No questions yet. Ask the first one."
+  },
+  answered: { team: "No answered questions yet.", audience: "No answered questions yet." },
+  dismissed: { team: "Nothing dismissed.", audience: "Nothing dismissed." }
+};
+function QAPanel({
+  questions,
+  team = false,
+  maxLength = DEFAULT_MAX,
+  canAsk = true,
+  onAsk,
+  onVote,
+  onStatusChange,
+  onAnswer,
+  onDelete,
+  defaultFilter = "open",
+  now: fixedNow,
+  className
+}) {
+  const now = useNow(3e4, fixedNow);
+  const { isPending, run } = usePending();
+  const [filter, setFilter] = useState(
+    defaultFilter === "dismissed" && !team ? "open" : defaultFilter
+  );
+  const filters = [
+    { id: "open", label: "Open" },
+    { id: "answered", label: "Answered" },
+    ...team ? [{ id: "dismissed", label: "Dismissed" }] : []
+  ];
+  const lists = useMemo(
+    () => ({
+      open: sortQuestions(questions, "open"),
+      answered: sortQuestions(questions, "answered"),
+      // Dismissed questions are the team's business only.
+      dismissed: team ? sortQuestions(questions, "dismissed") : []
+    }),
+    [questions, team]
+  );
+  const shown = lists[filter];
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-0 flex-1 flex-col", className), "data-testid": "webinar-qa", children: [
+    /* @__PURE__ */ jsxs(
+      Tabs,
+      {
+        value: filter,
+        onValueChange: (v) => setFilter(v),
+        className: "flex min-h-0 flex-1 flex-col",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "shrink-0 px-3 pt-3", children: /* @__PURE__ */ jsx(TabsList, { className: "h-8 w-full", children: filters.map((f) => /* @__PURE__ */ jsxs(
+            TabsTrigger,
+            {
+              value: f.id,
+              className: "h-6 flex-1 gap-1.5 px-2 text-xs",
+              "data-testid": `webinar-qa-filter-${f.id}`,
+              children: [
+                f.label,
+                /* @__PURE__ */ jsx("span", { className: "tabular-nums text-muted-foreground", children: lists[f.id].length })
+              ]
+            },
+            f.id
+          )) }) }),
+          /* @__PURE__ */ jsx(TabsContent, { value: filter, className: "mt-0 min-h-0 flex-1 overflow-y-auto p-3", children: shown.length === 0 ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "py-6 text-center text-sm text-muted-foreground",
+              "data-testid": "webinar-qa-empty",
+              children: filter === "open" && questions.length > 0 ? "No open questions right now." : EMPTY[filter][team ? "team" : "audience"]
+            }
+          ) : /* @__PURE__ */ jsx("ol", { className: "flex flex-col gap-2", children: shown.map((q) => /* @__PURE__ */ jsx(
+            QuestionItem,
+            {
+              q,
+              team,
+              now,
+              maxLength,
+              pending: isPending,
+              run,
+              onVote,
+              onStatusChange,
+              onAnswer,
+              onDelete
+            },
+            q.id
+          )) }) })
+        ]
+      }
+    ),
+    canAsk && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-border p-3", children: /* @__PURE__ */ jsx(
+      PanelComposer,
+      {
+        placeholder: "Ask a question",
+        ariaLabel: "Ask a question",
+        sendLabel: "Ask",
+        maxLength,
+        busy: isPending("ask"),
+        onSend: (text) => run("ask", () => onAsk(text)),
+        testId: "webinar-ask"
+      }
+    ) })
+  ] });
+}
+var OPTIONS = [
+  { value: "panelists", label: "Panelists only" },
+  { value: "everyone", label: "Everyone" }
+];
+function ChatPermissionSetting({
+  value,
+  onChange,
+  pending = false
+}) {
+  const [choosing, setChoosing] = useState(null);
+  const busy = pending || choosing !== null;
+  const select = (next) => {
+    const v = next;
+    if (v === value || busy) return;
+    const result = onChange(v);
+    if (result && typeof result.then === "function") {
+      setChoosing(v);
+      void result.then(
+        () => setChoosing(null),
+        () => setChoosing(null)
+      );
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": "Who can chat", "data-testid": "webinar-chat-permission", children: [
+    /* @__PURE__ */ jsxs(DropdownMenuLabel, { className: "flex items-center gap-1.5 text-xs font-medium text-muted-foreground", children: [
+      "Who can chat",
+      busy && /* @__PURE__ */ jsx(Loader2, { className: "size-3.5 animate-spin", "aria-label": "Saving" })
+    ] }),
+    /* @__PURE__ */ jsx(DropdownMenuRadioGroup, { value: choosing ?? value, onValueChange: select, children: OPTIONS.map((o) => /* @__PURE__ */ jsx(
+      DropdownMenuRadioItem,
+      {
+        value: o.value,
+        disabled: busy,
+        "data-testid": `webinar-chat-${o.value}`,
+        children: o.label
+      },
+      o.value
+    )) })
+  ] });
+}
+function chatPermissionSection(props) {
+  return { key: "webinar-chat", content: /* @__PURE__ */ jsx(ChatPermissionSetting, { ...props }) };
+}
+function OnStageCheck({
+  open,
+  onJoinStage,
+  onStayInAudience,
+  busy = false,
+  error,
+  mirror = true,
+  describeError = describeMediaError
+}) {
+  const { isPending, run } = usePending();
+  const working = busy || isPending("join") || isPending("stay");
+  const stay = () => {
+    if (!working) void run("stay", onStayInAudience);
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (next) => !next && stay(), children: /* @__PURE__ */ jsx(DialogContent, { presentation: "sheet", className: "max-w-3xl", "data-testid": "webinar-on-stage", children: /* @__PURE__ */ jsx(
+    PreJoin,
+    {
+      heading: "You're on stage",
+      headingAs: DialogTitle,
+      joinLabel: "Join stage",
+      cancelLabel: "Stay in audience",
+      busy: working,
+      error,
+      mirror,
+      describeError,
+      onJoin: (choices) => void run("join", () => onJoinStage(choices)),
+      onCancel: stay,
+      children: /* @__PURE__ */ jsx(DialogDescription, { children: "A host invited you to speak. Check your microphone and camera: once you join, everyone sees and hears you." })
+    }
+  ) }) });
+}
+function WebinarViewer({
+  header,
+  stage,
+  stageRef,
+  stageOverlay,
+  captions,
+  side,
+  sideToggle,
+  hand,
+  onLeave,
+  left,
+  controls,
+  shortcuts = true,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "@container flex size-full min-h-0 flex-col bg-background text-foreground",
+        className
+      ),
+      "data-testid": "webinar-viewer",
+      children: [
+        header,
+        /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-0 flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col gap-2 px-3 pb-3 pt-1", children: [
+            /* @__PURE__ */ jsxs("div", { ref: stageRef, className: "relative min-h-0 flex-1", "data-testid": "call-stage", children: [
+              stage,
+              stageOverlay
+            ] }),
+            captions
+          ] }),
+          side && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute inset-0 z-20 flex min-h-0 flex-col border-t border-border motion-safe:animate-in motion-safe:fade-in-0 @3xl:static @3xl:z-auto @3xl:w-80 @3xl:shrink-0 @3xl:border-l @3xl:border-t-0",
+              "data-testid": "webinar-viewer-side",
+              children: side
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(CallControlBar, { shortcuts, left, right: /* @__PURE__ */ jsx(LeaveButton, { onLeave }), children: /* @__PURE__ */ jsxs(ControlGroup, { children: [
+          /* @__PURE__ */ jsx(RaiseHandButton, { ...hand }),
+          sideToggle && /* @__PURE__ */ jsxs(
+            CallControlButton,
+            {
+              label: sideToggle.open ? `Close ${sideToggle.label}` : sideToggle.label,
+              tone: sideToggle.open ? "active" : "neutral",
+              "aria-pressed": sideToggle.open,
+              onClick: sideToggle.onToggle,
+              "data-testid": "webinar-side-toggle",
+              children: [
+                /* @__PURE__ */ jsx(MessageCircleQuestion, { "aria-hidden": true }),
+                !!sideToggle.count && /* @__PURE__ */ jsx(ControlBadge, { count: sideToggle.count, tone: "quiet" })
+              ]
+            }
+          ),
+          controls
+        ] }) })
+      ]
+    }
+  );
+}
 
-export { CallControlBar, CallControlButton, CallFocus, CallGrid, CallHeader, CallNotice, CallParticipants, CallSidePanel, CallStageFrame, CallStateMessage, CallStatusChip, CallTile, CaptionsStrip, ConnectionOverlay, ControlBadge, ControlDivider, ControlGroup, DEFAULT_JOIN_CHOICES, ElapsedTime, EncryptionStatusChip, IncomingCallCard, LeaveButton, LobbyRequests, MediaControl, MinimisedCall, MoreMenu, PreJoin, RecordControl, RecordingStatusChip, SpeakingNow, TranscriptionStatusChip, VoiceMeter, describeMediaError, useBriefNotice, useElementSize, useShortcutKeys };
+export { BackstageBanner, CallControlBar, CallControlButton, CallFocus, CallGrid, CallHeader, CallNotice, CallParticipants, CallPersonLabel, CallSidePanel, CallStageFrame, CallStateMessage, CallStatusChip, CallTile, CaptionsStrip, ChatPermissionSetting, ConnectionOverlay, ControlBadge, ControlDivider, ControlGroup, DEFAULT_JOIN_CHOICES, ElapsedTime, EncryptionStatusChip, IncomingCallCard, LeaveButton, LobbyRequests, MediaControl, MinimisedCall, MoreMenu, OnStageCheck, PanelComposer, PreJoin, QAPanel, RaiseHandButton, RecordControl, RecordingStatusChip, SpeakingNow, TranscriptionStatusChip, VoiceMeter, WebinarAudiencePanel, WebinarEndConfirm, WebinarLiveChip, WebinarLiveControl, WebinarViewer, WebinarWaiting, chatPermissionSection, describeMediaError, sortQuestions, useBriefNotice, useElementSize, useShortcutKeys };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map