@arbidocs/blocks 0.4.109 → 0.4.111

package/dist/calls/index.js

@@ -0,0 +1,2753 @@
+"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, 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, 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",
+  // Solid: a control whose thing is on reads as on at a glance (CC on, chat open, sharing).
+  active: "bg-primary text-primary-foreground hover:bg-primary/90",
+  off: "bg-red-bg text-red-text hover:bg-red-bg/80",
+  danger: "bg-destructive text-destructive-foreground hover:bg-destructive/90"
+};
+var CallControlButton = forwardRef(
+  function CallControlButton2({
+    label,
+    shortcut,
+    tone = "neutral",
+    side = "top",
+    tooltip = true,
+    className,
+    children,
+    ...props
+  }, ref) {
+    const button = /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref,
+        type: "button",
+        variant: "ghost",
+        size: "icon",
+        "aria-label": label,
+        className: cn("relative shrink-0 [&_svg]:size-[18px]", TONE[tone], className),
+        ...props,
+        children
+      }
+    );
+    if (!tooltip) return button;
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", children: button }) }),
+      /* @__PURE__ */ jsxs(TooltipContent, { side, children: [
+        label,
+        shortcut && /* @__PURE__ */ jsx("kbd", { className: "ml-2 rounded-sm border border-border px-1 font-sans text-[11px] text-muted-foreground", children: shortcut })
+      ] })
+    ] });
+  }
+);
+function ControlBadge({
+  count,
+  tone = "alert",
+  testId
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "pointer-events-none absolute -right-1 min-w-[1.125rem] rounded-full px-1 text-center text-[10px] font-semibold leading-[1.125rem]",
+        tone === "alert" ? "-top-1 bg-destructive text-destructive-foreground ring-2 ring-background" : "-bottom-1 bg-background text-muted-foreground ring-1 ring-border"
+      ),
+      "data-testid": testId,
+      children: count > 99 ? "99+" : count
+    }
+  );
+}
+function CallStatusChip({
+  tone,
+  icon,
+  label,
+  compact = false,
+  pulse = false,
+  title,
+  children,
+  className,
+  testId,
+  ...rest
+}) {
+  const tones = {
+    red: "border-red-border bg-red-bg text-red-text",
+    green: "border-green-border bg-green-bg text-green-text",
+    yellow: "border-yellow-border bg-yellow-bg text-yellow-text",
+    neutral: "border-border bg-muted text-muted-foreground"
+  };
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex h-6 shrink-0 items-center gap-1.5 rounded-md border px-2 text-xs font-medium",
+        tones[tone],
+        className
+      ),
+      title,
+      "data-testid": testId,
+      ...rest,
+      children: [
+        pulse && /* @__PURE__ */ jsxs("span", { className: "relative flex size-2 shrink-0", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx("span", { className: "absolute inline-flex size-full animate-ping rounded-full bg-red-solid opacity-60 motion-reduce:hidden" }),
+          /* @__PURE__ */ jsx("span", { className: "relative inline-flex size-2 rounded-full bg-red-solid" })
+        ] }),
+        icon,
+        /* @__PURE__ */ jsx("span", { className: cn("min-w-0 truncate", compact && "sr-only"), children: label }),
+        children
+      ]
+    }
+  );
+}
+function useElementSize() {
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  const observer = useRef(null);
+  const ref = useMemo(
+    () => (el) => {
+      observer.current?.disconnect();
+      observer.current = null;
+      if (!el || typeof ResizeObserver === "undefined") return;
+      const ro = new ResizeObserver((entries) => {
+        const r = entries[0]?.contentRect;
+        if (!r) return;
+        setSize(
+          (s) => s.width === r.width && s.height === r.height ? s : { width: r.width, height: r.height }
+        );
+      });
+      ro.observe(el);
+      observer.current = ro;
+    },
+    []
+  );
+  useEffect(() => () => observer.current?.disconnect(), []);
+  return [ref, size];
+}
+function useBriefNotice(announce = true, onFolded, ms = NOTICE_MS) {
+  const [expanded, setExpanded] = useState(announce);
+  const folded = useRef(onFolded);
+  folded.current = onFolded;
+  useEffect(() => {
+    if (!expanded) return;
+    const id = setTimeout(() => {
+      setExpanded(false);
+      folded.current?.();
+    }, ms);
+    return () => clearTimeout(id);
+  }, [expanded, ms]);
+  return expanded;
+}
+function typing(e) {
+  const el = e.target;
+  return !!el?.closest?.('input, textarea, select, [contenteditable="true"], [role="textbox"]');
+}
+function useShortcutKeys(ref, enabled) {
+  useEffect(() => {
+    if (!enabled) return;
+    const onKey = (e) => {
+      if (e.repeat || e.ctrlKey || e.metaKey || e.altKey || typing(e)) return;
+      const key = e.key.toLowerCase();
+      if (!/^[a-z]$/.test(key)) return;
+      const button = ref.current?.querySelector(
+        `[data-call-shortcut="${key}"]:not(:disabled)`
+      );
+      if (!button) return;
+      e.preventDefault();
+      button.click();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [ref, enabled]);
+}
+var CallTile = forwardRef(function CallTile2({
+  name,
+  initials,
+  video,
+  source = "camera",
+  local = false,
+  mirror = false,
+  speaking = false,
+  level = 0,
+  micMuted = false,
+  poorConnection = false,
+  size = "normal",
+  youLabel,
+  className,
+  style,
+  ...rest
+}, ref) {
+  const screen = source === "screen";
+  const ring = speaking && !screen ? Math.min(1, Math.max(0, level)) : 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("call-tile", className),
+      "data-call-tile": "",
+      "data-source": source,
+      "data-local": local,
+      "data-mirror": mirror && source === "camera" && !!video,
+      "data-speaking": speaking && !screen,
+      style: { "--call-level": ring.toFixed(2), ...style },
+      ...rest,
+      children: [
+        video ?? /* @__PURE__ */ jsx("div", { className: "call-tile-placeholder", "aria-hidden": true, children: /* @__PURE__ */ jsx("span", { className: cn("call-tile-avatar", size === "small" && "call-tile-avatar-sm"), children: initials }) }),
+        /* @__PURE__ */ jsxs("div", { className: "call-tile-name", children: [
+          typeof name === "string" ? /* @__PURE__ */ jsxs("span", { className: "call-tile-chip min-w-0", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: name }),
+            local && !screen && youLabel && /* @__PURE__ */ jsx("span", { className: "shrink-0 opacity-80", children: youLabel })
+          ] }) : /* @__PURE__ */ jsx("span", { className: "call-tile-chip min-w-0 overflow-hidden py-0.5 pl-0.5", children: name }),
+          (screen || micMuted || speaking) && /* @__PURE__ */ jsxs("span", { className: "call-tile-chip shrink-0", children: [
+            screen && /* @__PURE__ */ jsx(MonitorUp, { className: "size-3.5", "aria-label": "Screen" }),
+            !screen && micMuted && /* @__PURE__ */ jsx(MicOff, { className: "size-3.5", "aria-label": "Microphone off" }),
+            speaking && !screen && /* @__PURE__ */ jsx(AudioLines, { className: "call-tile-speaking size-3.5", "aria-label": "Speaking" })
+          ] })
+        ] }),
+        poorConnection && /* @__PURE__ */ jsx("span", { className: "call-tile-signal", title: "Poor connection", children: /* @__PURE__ */ jsx(SignalLow, { className: "size-3.5", "aria-label": "Poor connection" }) })
+      ]
+    }
+  );
+});
+var GRID_GAP = 8;
+function CallGrid({
+  items,
+  getKey,
+  renderTile,
+  moreLabel = (n) => `${n} more`,
+  className
+}) {
+  const [ref, size] = useElementSize();
+  const { shown, hidden } = gridSlots(items);
+  const count = shown.length + (hidden ? 1 : 0);
+  const layout = gridLayout(count, size.width, size.height, GRID_GAP);
+  const box = { width: layout.tileWidth, height: layout.tileHeight };
+  const rows = [];
+  let next = 0;
+  for (const n of layout.rowCounts) rows.push(Array.from({ length: n }, () => next++));
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex size-full min-h-0 flex-col items-center", className),
+      style: { gap: GRID_GAP },
+      "data-testid": "call-grid",
+      "data-cols": layout.cols,
+      children: layout.tileWidth > 0 && rows.map((row, r) => /* @__PURE__ */ jsx("div", { className: "flex justify-center", style: { gap: GRID_GAP }, children: row.map(
+        (i) => i < shown.length ? /* @__PURE__ */ jsx("div", { className: "call-tile-box", style: box, children: renderTile(shown[i]) }, getKey(shown[i])) : /* @__PURE__ */ jsxs("div", { className: "call-tile call-tile-more", style: box, children: [
+          /* @__PURE__ */ jsx(Users, { className: "size-5", "aria-hidden": true }),
+          /* @__PURE__ */ jsx("span", { children: moreLabel(hidden) })
+        ] }, "more")
+      ) }, r))
+    }
+  );
+}
+function CallFocus({
+  focus,
+  others,
+  getKey,
+  renderTile,
+  className,
+  testId = "call-focus"
+}) {
+  const [ref, size] = useElementSize();
+  const narrow = size.width > 0 && size.width < 640;
+  const box = spotlightBox(size.width, size.height, others.length, narrow);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex size-full min-h-0 gap-2",
+        narrow ? "flex-col items-center" : "flex-row items-start justify-center",
+        className
+      ),
+      "data-testid": testId,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "call-tile-box shrink-0",
+            style: { width: box.width, height: box.height },
+            "data-testid": "call-spotlight",
+            children: box.width > 0 && renderTile(focus, "normal")
+          },
+          getKey(focus)
+        ),
+        others.length > 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "grid shrink-0 gap-2",
+              narrow ? "w-full grid-cols-3 content-start" : "w-60 grid-cols-1 overflow-y-auto"
+            ),
+            style: narrow ? { width: box.width } : void 0,
+            "data-testid": "call-filmstrip",
+            children: others.map((t) => /* @__PURE__ */ jsx("div", { className: "call-tile-box aspect-video w-full min-w-0", children: renderTile(t, "small") }, getKey(t)))
+          }
+        )
+      ]
+    }
+  );
+}
+function FoldingLabel({
+  sentence,
+  short,
+  expanded
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: cn(!expanded && "sr-only"), children: sentence }),
+    !expanded && /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: short })
+  ] });
+}
+function RecordingStatusChip({
+  sentence,
+  short = "Recording",
+  compact = false,
+  announce = true,
+  onAnnounced,
+  className,
+  ...rest
+}) {
+  const expanded = useBriefNotice(announce, onAnnounced);
+  return /* @__PURE__ */ jsx(
+    CallStatusChip,
+    {
+      tone: "red",
+      pulse: true,
+      role: "status",
+      "aria-live": "polite",
+      label: /* @__PURE__ */ jsx(FoldingLabel, { sentence, short, expanded }),
+      compact: compact && !expanded,
+      title: sentence,
+      className,
+      "data-expanded": expanded,
+      ...rest
+    }
+  );
+}
+function TranscriptionStatusChip({
+  sentence,
+  announce = true,
+  onAnnounced,
+  short = "Transcribing",
+  detail,
+  muted,
+  onMutedChange,
+  muteLabel,
+  unmuteLabel,
+  compact = false,
+  className,
+  ...rest
+}) {
+  const expanded = useBriefNotice(announce, onAnnounced);
+  const label = muted ? unmuteLabel : muteLabel;
+  return /* @__PURE__ */ jsx(
+    CallStatusChip,
+    {
+      tone: "red",
+      role: "status",
+      "aria-live": "polite",
+      icon: /* @__PURE__ */ jsx(Captions, { className: "size-3.5 shrink-0", "aria-hidden": true }),
+      label: /* @__PURE__ */ jsx(FoldingLabel, { sentence, short, expanded }),
+      compact: compact && !expanded,
+      title: detail ? `${sentence}. ${detail}` : sentence,
+      className: cn("pr-0.5", className),
+      "data-expanded": expanded,
+      ...rest,
+      children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "inline-flex h-5! w-5! shrink-0 items-center justify-center rounded-sm p-0! hover:bg-red-text/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "aria-pressed": muted,
+            "aria-label": label,
+            onClick: () => onMutedChange(!muted),
+            "data-testid": "transcription-mute",
+            children: muted ? /* @__PURE__ */ jsx(MicOff, { className: "size-3.5", "aria-hidden": true }) : /* @__PURE__ */ jsx(Mic, { className: "size-3.5", "aria-hidden": true })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: label })
+      ] })
+    }
+  );
+}
+function EncryptionStatusChip({
+  state,
+  compact = false,
+  labels = {
+    on: "Encrypted",
+    pending: "Encrypting\u2026",
+    off: "Not encrypted",
+    onTitle: "Media is end-to-end encrypted; the media server only sees ciphertext.",
+    offTitle: "This call is not end-to-end encrypted."
+  }
+}) {
+  const on = state === "on";
+  return /* @__PURE__ */ jsx(
+    CallStatusChip,
+    {
+      tone: on ? "neutral" : "yellow",
+      icon: on ? /* @__PURE__ */ jsx(Lock, { className: "size-3.5 shrink-0", "aria-hidden": true }) : /* @__PURE__ */ jsx(LockOpen, { className: "size-3.5 shrink-0", "aria-hidden": true }),
+      label: on ? labels.on : state === "pending" ? labels.pending : labels.off,
+      compact,
+      title: on ? labels.onTitle : labels.offTitle,
+      "data-testid": "call-encryption-badge",
+      "data-state": state
+    }
+  );
+}
+function CaptionsStrip({
+  captions,
+  reserve = false,
+  waitingText = "Captions appear here as people speak.",
+  className
+}) {
+  const [now, setNow] = useState(() => Date.now());
+  const visible = captions.filter((c) => now - c.receivedAt < CAPTION_TTL_MS).slice(-CAPTION_LINES);
+  const showing = visible.length > 0;
+  const newest = captions[captions.length - 1]?.receivedAt;
+  useEffect(() => {
+    setNow(Date.now());
+  }, [newest]);
+  useEffect(() => {
+    if (!showing) return;
+    const id = setInterval(() => setNow(Date.now()), 1e3);
+    return () => clearInterval(id);
+  }, [showing]);
+  if (!showing && !reserve) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "shrink-0 rounded-md bg-muted px-3 py-2 text-sm leading-5 text-foreground",
+        className
+      ),
+      "aria-live": "polite",
+      "data-testid": "captions-overlay",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-10 flex-col justify-end overflow-hidden", children: [
+        !showing && /* @__PURE__ */ jsx("p", { className: "truncate text-muted-foreground", "data-testid": "captions-waiting", children: waitingText }),
+        visible.map((c) => /* @__PURE__ */ jsxs(
+          "p",
+          {
+            className: "flex min-w-0 shrink-0 gap-1.5",
+            "data-testid": "caption-line",
+            "data-speaker": c.speakerId,
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "max-w-[40%] shrink-0 truncate font-semibold",
+                    speakerAccent(c.speakerId)
+                  ),
+                  children: c.name
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: ": " }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "flex min-w-0 flex-1 flex-col justify-end overflow-hidden",
+                  style: { height: `${(visible.length > 1 ? 1 : CAPTION_LINES) * 1.25}rem` },
+                  children: /* @__PURE__ */ jsx("span", { className: "break-words", children: c.text })
+                }
+              )
+            ]
+          },
+          `${c.speakerId}:${c.id}`
+        ))
+      ] })
+    }
+  );
+}
+function CallControlBar({
+  left,
+  right,
+  children,
+  shortcuts = false,
+  className
+}) {
+  const ref = useRef(null);
+  useShortcutKeys(ref, shortcuts);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "grid h-16 shrink-0 grid-cols-[1fr_auto_1fr] items-center gap-2 border-t border-border bg-background px-3 sm:px-4",
+        className
+      ),
+      "data-testid": "call-controls",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-2", children: left }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end gap-2", children: right })
+      ]
+    }
+  );
+}
+function ControlGroup({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children });
+}
+function ControlDivider() {
+  return /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mx-1 h-6" });
+}
+function ElapsedTime({ since, title }) {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 1e3);
+    return () => clearInterval(id);
+  }, []);
+  return /* @__PURE__ */ jsx("span", { className: "text-sm tabular-nums text-muted-foreground", title, children: formatElapsed(now - since) });
+}
+function MediaControl({
+  kind,
+  enabled,
+  pending = false,
+  onToggle,
+  devices,
+  activeDeviceId,
+  onSelectDevice,
+  shortcut,
+  testId,
+  options = []
+}) {
+  const mic = kind === "microphone";
+  const label = enabled ? `Turn off ${kind}` : `Turn on ${kind}`;
+  const Icon = mic ? enabled ? Mic : MicOff : enabled ? Video : VideoOff;
+  const title = mic ? "Microphone" : "Camera";
+  return /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center", role: "group", "aria-label": title, children: [
+    /* @__PURE__ */ jsx(
+      CallControlButton,
+      {
+        label,
+        shortcut,
+        tone: enabled ? "neutral" : "off",
+        "aria-pressed": enabled,
+        disabled: pending,
+        onClick: onToggle,
+        className: "rounded-r-none",
+        "data-testid": testId,
+        "data-call-shortcut": shortcut?.toLowerCase(),
+        "data-enabled": enabled,
+        children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": true })
+      }
+    ),
+    /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          "aria-label": `Choose ${kind}`,
+          title: `Choose ${kind}`,
+          className: cn(
+            "h-9 w-6 shrink-0 rounded-l-none border-l px-0 pointer-coarse:h-11! pointer-coarse:w-8",
+            enabled ? "border-background bg-muted text-muted-foreground hover:bg-accent hover:text-foreground" : "border-background bg-red-bg text-red-text hover:bg-red-bg/80"
+          ),
+          "data-testid": `${testId}-devices`,
+          children: /* @__PURE__ */ jsx(ChevronUp, { className: "size-3.5", "aria-hidden": true })
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(DropdownMenuContent, { side: "top", align: "start", className: "w-72", children: [
+        /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-xs font-medium text-muted-foreground", children: title }),
+        devices.length === 0 ? /* @__PURE__ */ jsxs(DropdownMenuItem, { disabled: true, children: [
+          "No ",
+          kind,
+          " found"
+        ] }) : /* @__PURE__ */ jsx(DropdownMenuRadioGroup, { value: activeDeviceId, onValueChange: onSelectDevice, children: devices.map((d, i) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value: d.deviceId, children: /* @__PURE__ */ jsx("span", { className: "truncate", children: d.label || `${title} ${i + 1}` }) }, d.deviceId)) }),
+        options.length > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+        options.map((o) => /* @__PURE__ */ jsx(
+          DropdownMenuCheckboxItem,
+          {
+            checked: o.checked,
+            onCheckedChange: (c) => o.onChange(c === true),
+            "data-testid": o.testId,
+            children: o.label
+          },
+          o.label
+        ))
+      ] })
+    ] })
+  ] });
+}
+function RecordControl({
+  on,
+  busy = false,
+  modes,
+  note,
+  onStart,
+  onStop
+}) {
+  const [choosing, setChoosing] = useState(false);
+  const menuRef = useRef(null);
+  useEffect(() => {
+    if (!choosing) return;
+    const onDown = (e) => {
+      if (!menuRef.current?.contains(e.target)) setChoosing(false);
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") setChoosing(false);
+    };
+    document.addEventListener("pointerdown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("pointerdown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [choosing]);
+  const base = "h-9 shrink-0 gap-2 px-3 pointer-coarse:h-11!";
+  if (on) {
+    return /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        className: cn(base, "bg-red-bg text-red-text hover:bg-red-bg/80"),
+        disabled: busy,
+        onClick: onStop,
+        "data-testid": "recording-stop",
+        children: [
+          busy ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": true }) : /* @__PURE__ */ jsxs("span", { className: "relative flex size-2.5", "aria-hidden": true, children: [
+            /* @__PURE__ */ jsx("span", { className: "absolute inline-flex size-full animate-ping rounded-full bg-red-solid opacity-60 motion-reduce:hidden" }),
+            /* @__PURE__ */ jsx("span", { className: "relative inline-flex size-2.5 rounded-full bg-red-solid" })
+          ] }),
+          "Stop recording"
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: menuRef, className: "relative", children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        className: cn(base, "bg-muted text-foreground hover:bg-accent"),
+        disabled: busy,
+        "aria-expanded": choosing,
+        "aria-haspopup": "menu",
+        onClick: () => setChoosing((c) => !c),
+        "data-testid": "recording-start",
+        children: [
+          busy ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": true }) : /* @__PURE__ */ jsx(Circle, { className: "size-3 fill-red-solid text-red-solid", "aria-hidden": true }),
+          "Record"
+        ]
+      }
+    ),
+    choosing && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "menu",
+        "aria-label": "Record",
+        className: "absolute bottom-full left-1/2 z-50 mb-2 w-64 -translate-x-1/2 rounded-md border bg-popover p-1 text-popover-foreground shadow-lg",
+        children: [
+          note && /* @__PURE__ */ jsx("p", { className: "px-2 py-1.5 text-xs text-muted-foreground", children: note }),
+          modes.map((m) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              className: "flex w-full flex-col items-start rounded-sm px-2 py-1.5 text-left text-sm outline-none hover:bg-accent focus-visible:bg-accent pointer-coarse:min-h-11",
+              onClick: () => {
+                setChoosing(false);
+                onStart(m.mode);
+              },
+              "data-testid": m.testId,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "font-medium", children: m.label }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: m.description })
+              ]
+            },
+            m.mode
+          ))
+        ]
+      }
+    )
+  ] });
+}
+function LeaveButton({
+  onLeave,
+  compact = false,
+  label = "Leave",
+  title = "Leave call",
+  options
+}) {
+  const menu = !!options?.length;
+  const button = /* @__PURE__ */ jsxs(
+    Button,
+    {
+      type: "button",
+      variant: "destructive",
+      size: compact ? "icon" : "default",
+      className: cn("shrink-0", !compact && "px-4"),
+      "aria-label": title,
+      title,
+      onClick: menu ? void 0 : onLeave,
+      "data-testid": "call-leave",
+      children: [
+        /* @__PURE__ */ jsx(PhoneOff, { className: "size-4", "aria-hidden": true }),
+        !compact && label
+      ]
+    }
+  );
+  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) => 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: [
+      details && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "flex flex-col gap-1 font-normal", children: details }),
+        shown.length > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {})
+      ] }),
+      shown.map((group, i) => /* @__PURE__ */ jsxs("div", { role: "none", children: [
+        i > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+        isSection(group) ? group.content : group.map((item) => /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            onSelect: item.onSelect,
+            disabled: item.disabled,
+            "data-testid": item.testId,
+            children: [
+              item.icon,
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
+              item.trailing
+            ]
+          },
+          item.key
+        ))
+      ] }, isSection(group) ? group.key : group[0].key))
+    ] })
+  ] });
+}
+function HeaderIconButton({
+  label,
+  onClick,
+  children,
+  testId,
+  pressed
+}) {
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon",
+        className: "text-muted-foreground hover:text-foreground",
+        "aria-label": label,
+        "aria-pressed": pressed,
+        onClick,
+        "data-testid": testId,
+        children
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: label })
+  ] });
+}
+function CallHeader({
+  title,
+  icon,
+  status,
+  view,
+  onViewChange,
+  onMinimise,
+  minimiseLabel = "Minimise \u2014 keep working while the call goes on"
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "@container", children: /* @__PURE__ */ jsx(
+    TabHeader,
+    {
+      tabs: [
+        {
+          id: "call",
+          label: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, showWithText: true, children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "block min-w-0 max-w-[calc(100cqw-16rem)] truncate",
+                "data-testid": "call-title",
+                children: title
+              }
+            ) }),
+            /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: title })
+          ] }),
+          icon: icon ?? /* @__PURE__ */ jsx(Phone, { className: "size-4" })
+        }
+      ],
+      activeTabId: "call",
+      onTabChange: () => void 0,
+      testId: "call-header",
+      className: "pb-0",
+      rightContent: (compact) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        typeof status === "function" ? status(compact) : status,
+        view && onViewChange && /* @__PURE__ */ jsx(
+          HeaderIconButton,
+          {
+            label: view === "speaker" ? "Gallery view (everyone equal)" : "Speaker view (who talks, large)",
+            onClick: () => onViewChange(view === "speaker" ? "gallery" : "speaker"),
+            testId: "call-view-toggle",
+            children: view === "speaker" ? /* @__PURE__ */ jsx(LayoutGrid, { className: "size-4" }) : /* @__PURE__ */ jsx(UserRound, { className: "size-4" })
+          }
+        ),
+        onMinimise && /* @__PURE__ */ jsx(
+          HeaderIconButton,
+          {
+            label: minimiseLabel,
+            onClick: onMinimise,
+            testId: "call-dock-toggle",
+            children: /* @__PURE__ */ jsx(PictureInPicture2, { className: "size-4" })
+          }
+        )
+      ] })
+    }
+  ) });
+}
+function SpeakingNow({
+  names,
+  idleText = "No one is speaking",
+  className
+}) {
+  const talking = names.length > 0;
+  return /* @__PURE__ */ jsxs(
+    "p",
+    {
+      className: cn(
+        "flex min-w-0 items-center gap-1.5 text-sm",
+        talking ? "text-foreground" : "text-muted-foreground",
+        className
+      ),
+      "aria-live": "polite",
+      "data-testid": "call-speaking-now",
+      children: [
+        /* @__PURE__ */ jsx(
+          AudioLines,
+          {
+            className: cn(
+              "size-4 shrink-0",
+              talking ? "text-theme-cyan motion-safe:animate-pulse" : "text-muted-foreground"
+            ),
+            "aria-hidden": true
+          }
+        ),
+        talking ? /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1 overflow-hidden", children: [
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", children: "Speaking:" }),
+          names.map((n, i) => /* @__PURE__ */ jsx("span", { className: "flex min-w-0 shrink-0 items-center", children: n }, i))
+        ] }) : /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: idleText })
+      ]
+    }
+  );
+}
+function CallNotice({ children }) {
+  return /* @__PURE__ */ jsxs(
+    "p",
+    {
+      className: "flex min-w-0 items-center gap-1.5 text-sm text-red-text motion-safe:animate-in motion-safe:fade-in-0",
+      role: "status",
+      "aria-live": "polite",
+      "data-testid": "call-notice",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "size-2 shrink-0 rounded-full bg-red-solid", "aria-hidden": true }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children })
+      ]
+    }
+  );
+}
+function CallStageFrame({
+  header,
+  subheader,
+  stage,
+  stageRef,
+  stageOverlay,
+  people,
+  stageHeight,
+  controls,
+  className
+}) {
+  const [bodyRef, body] = useElementSize();
+  const PAD_X = 24;
+  const PAD_B = 12;
+  const sized = !!people && !!stageHeight && body.width > 0 && body.height > 0 ? Math.ceil(stageHeight(body.width - PAD_X, Math.round(body.height * 0.62)) + PAD_B) : null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex size-full min-h-0 flex-col bg-background text-foreground", className), children: [
+    header,
+    subheader && /* @__PURE__ */ jsx("div", { className: "flex min-h-9 shrink-0 flex-col justify-center gap-0.5 px-3 py-1", children: subheader }),
+    /* @__PURE__ */ jsxs("div", { ref: bodyRef, className: "relative flex min-h-0 flex-1 flex-col", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn("flex min-h-0 flex-col px-3 pb-3", sized == null ? "flex-1" : "shrink-0"),
+          style: sized == null ? void 0 : { height: sized },
+          children: /* @__PURE__ */ jsxs("div", { ref: stageRef, className: "relative min-h-0 flex-1", "data-testid": "call-stage", children: [
+            stage,
+            stageOverlay
+          ] })
+        }
+      ),
+      people
+    ] }),
+    controls
+  ] });
+}
+function CallSidePanel({
+  title,
+  icon,
+  actions,
+  onClose,
+  closeLabel,
+  closeTestId,
+  tabs,
+  activeTab,
+  onTabChange,
+  children,
+  className,
+  ...rest
+}) {
+  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: 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
+      ] })
+    }
+  );
+}
+function VoiceMeter({
+  level,
+  muted = false,
+  className
+}) {
+  if (muted) {
+    return /* @__PURE__ */ jsx("span", { className: cn("flex items-center text-red-text", className), title: "Microphone off", children: /* @__PURE__ */ jsx(MicOff, { className: "size-4", "aria-label": "Microphone off" }) });
+  }
+  const lit = Math.round(Math.min(1, Math.max(0, level)) * 5);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("flex h-4 items-end gap-0.5", className),
+      role: "meter",
+      "aria-label": "Voice level",
+      "aria-valuemin": 0,
+      "aria-valuemax": 5,
+      "aria-valuenow": lit,
+      children: [0.35, 0.55, 0.75, 0.9, 1].map((h, i) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn("w-1 rounded-sm", i < lit ? "bg-theme-cyan" : "bg-muted-foreground/30"),
+          style: { height: `${h * 100}%` }
+        },
+        i
+      ))
+    }
+  );
+}
+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,
+  removingId,
+  onRemove,
+  onAskToMute,
+  onMute
+}) {
+  const hasActions = !p.isLocal && (canRemove || (onAskToMute || onMute) && !p.micMuted || onMute && p.cameraOn);
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: "flex h-10 items-center gap-2 rounded-md px-2 hover:bg-muted",
+      "data-testid": `call-person-${p.id}`,
+      "data-speaking": p.speaking || void 0,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-1.5 text-sm", children: [
+          p.entity ? (
+            // The ring hugs the person's pill, not the whole row.
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "inline-flex min-w-0 rounded-full",
+                  p.speaking && "ring-2 ring-theme-cyan ring-offset-2 ring-offset-background"
+                ),
+                children: p.entity
+              }
+            )
+          ) : /* @__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 })
+        ] }),
+        /* @__PURE__ */ jsx(VoiceMeter, { level: p.level ?? 0, muted: p.micMuted }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "flex w-4 justify-center",
+              p.cameraOn ? "text-muted-foreground" : "text-red-text"
+            ),
+            title: p.cameraOn ? "Camera on" : "Camera off",
+            children: p.cameraOn ? /* @__PURE__ */ jsx(Video, { className: "size-4", "aria-label": "Camera on" }) : /* @__PURE__ */ jsx(VideoOff, { className: "size-4", "aria-label": "Camera off" })
+          }
+        ),
+        hasActions ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              className: "size-8 text-muted-foreground hover:text-foreground",
+              "aria-label": `Actions for ${p.name}`,
+              "data-testid": `call-person-menu-${p.id}`,
+              children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" })
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [
+            onAskToMute && !p.micMuted && /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                onSelect: () => onAskToMute(p),
+                "data-testid": `call-ask-mute-${p.id}`,
+                children: [
+                  /* @__PURE__ */ jsx(MicOff, { "aria-hidden": true }),
+                  "Ask to mute"
+                ]
+              }
+            ),
+            onMute && !p.micMuted && /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                onSelect: () => onMute(p, "audio"),
+                "data-testid": `call-mute-${p.id}`,
+                children: [
+                  /* @__PURE__ */ jsx(MicOff, { "aria-hidden": true }),
+                  "Mute"
+                ]
+              }
+            ),
+            onMute && p.cameraOn && /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                onSelect: () => onMute(p, "video"),
+                "data-testid": `call-camera-off-${p.id}`,
+                children: [
+                  /* @__PURE__ */ jsx(VideoOff, { "aria-hidden": true }),
+                  "Turn off camera"
+                ]
+              }
+            ),
+            canRemove && /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                onSelect: () => onRemove(p),
+                disabled: removingId === p.id,
+                className: "text-destructive focus:text-destructive",
+                "data-testid": `call-remove-${p.id}`,
+                children: [
+                  /* @__PURE__ */ jsx(UserX, { "aria-hidden": true }),
+                  "Remove from call"
+                ]
+              }
+            )
+          ] })
+        ] }) : (
+          // Keeps every row's meter and icons in the same column.
+          /* @__PURE__ */ jsx("span", { className: "size-8 shrink-0", "aria-hidden": true })
+        )
+      ]
+    }
+  );
+}
+function CallParticipants({
+  people,
+  canRemove,
+  removingId,
+  onRemove,
+  onAskToMute,
+  onMute,
+  compact = false,
+  className
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const rows = /* @__PURE__ */ jsx("ul", { className: "min-h-0 flex-1 overflow-y-auto px-1 pb-2", "data-testid": "call-people-list", children: people.map((p) => /* @__PURE__ */ jsx(
+    PersonRow,
+    {
+      p,
+      canRemove,
+      removingId,
+      onRemove,
+      onAskToMute,
+      onMute
+    },
+    p.id
+  )) });
+  const heading = /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: [
+    "People (",
+    people.length,
+    ")"
+  ] });
+  if (compact && !expanded) {
+    const talking = people.filter((p) => p.speaking);
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        className: cn(
+          "flex h-11 shrink-0 items-center gap-2 border-t border-border px-3",
+          className
+        ),
+        "aria-label": "People",
+        "data-testid": "call-people",
+        "data-compact": "",
+        children: [
+          heading,
+          /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden", children: talking.map((p) => /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: p.entity ?? p.name }, p.id)) }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              className: "h-8 shrink-0",
+              "aria-expanded": false,
+              onClick: () => setExpanded(true),
+              "data-testid": "call-people-show-all",
+              children: [
+                "Show all (",
+                people.length,
+                ")"
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn(
+        "flex min-h-0 flex-col border-t border-border",
+        compact && "absolute inset-x-0 bottom-0 z-20 max-h-[80%] bg-background shadow-lg",
+        className
+      ),
+      "aria-label": "People",
+      "data-testid": "call-people",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex h-9 shrink-0 items-center justify-between px-3", children: [
+          heading,
+          compact && /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              className: "h-7",
+              "aria-expanded": true,
+              onClick: () => setExpanded(false),
+              "data-testid": "call-people-show-less",
+              children: "Show less"
+            }
+          )
+        ] }),
+        rows
+      ]
+    }
+  );
+}
+function LobbyRequests({
+  requests,
+  onDecide
+}) {
+  if (!requests.length) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "absolute left-3 top-3 z-10 flex w-72 max-w-[calc(100%-1.5rem)] flex-col gap-2",
+      role: "region",
+      "aria-label": "Lobby",
+      "data-testid": "call-lobby",
+      children: requests.map((k) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center gap-3 rounded-md border border-border bg-popover p-3 text-sm text-popover-foreground shadow-lg",
+          "data-testid": "call-lobby-knock",
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1", children: [
+              k.entity ?? /* @__PURE__ */ jsx("span", { className: "font-medium", children: k.name }),
+              /* @__PURE__ */ jsx("span", { children: "wants to join." })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                className: "h-8",
+                onClick: () => onDecide(k.id, false),
+                "data-testid": "call-lobby-deny",
+                children: "Deny"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                size: "sm",
+                className: "h-8",
+                onClick: () => onDecide(k.id, true),
+                "data-testid": "call-lobby-admit",
+                children: "Admit"
+              }
+            )
+          ]
+        },
+        k.id
+      ))
+    }
+  );
+}
+function MinimisedCall({
+  title,
+  video,
+  status,
+  speaking,
+  micEnabled,
+  onToggleMic,
+  cameraEnabled,
+  onToggleCamera,
+  onRestore,
+  onLeave,
+  restoreLabel = "Back to the call",
+  shortcuts = true,
+  className
+}) {
+  const ref = useRef(null);
+  useShortcutKeys(ref, shortcuts);
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col", className), "data-testid": "call-minimised", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "group relative aspect-video w-full overflow-hidden rounded-t-md bg-hero focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+        onClick: onRestore,
+        "aria-label": restoreLabel,
+        "data-testid": "call-minimised-restore",
+        children: /* @__PURE__ */ jsx("span", { className: "call-tile-box absolute inset-0", children: video ?? /* @__PURE__ */ jsx("span", { className: "call-tile", children: /* @__PURE__ */ jsx("span", { className: "call-tile-placeholder", children: /* @__PURE__ */ jsx("span", { className: "call-tile-avatar call-tile-avatar-sm", children: /* @__PURE__ */ jsx(Phone, { className: "size-4", "aria-hidden": true }) }) }) }) })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 px-3 py-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium", title, children: title }),
+        status && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center gap-1", children: status })
+      ] }),
+      speaking,
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        onToggleMic && micEnabled !== void 0 && /* @__PURE__ */ jsx(
+          CallControlButton,
+          {
+            label: micEnabled ? "Turn off microphone" : "Turn on microphone",
+            shortcut: "M",
+            tone: micEnabled ? "neutral" : "off",
+            "aria-pressed": micEnabled,
+            onClick: onToggleMic,
+            className: "size-8",
+            "data-testid": "call-minimised-mic",
+            "data-call-shortcut": "m",
+            children: micEnabled ? /* @__PURE__ */ jsx(Mic, { "aria-hidden": true }) : /* @__PURE__ */ jsx(MicOff, { "aria-hidden": true })
+          }
+        ),
+        onToggleCamera && cameraEnabled !== void 0 && /* @__PURE__ */ jsx(
+          CallControlButton,
+          {
+            label: cameraEnabled ? "Turn off camera" : "Turn on camera",
+            shortcut: "V",
+            tone: cameraEnabled ? "neutral" : "off",
+            "aria-pressed": cameraEnabled,
+            onClick: onToggleCamera,
+            className: "size-8",
+            "data-testid": "call-minimised-camera",
+            "data-call-shortcut": "v",
+            children: cameraEnabled ? /* @__PURE__ */ jsx(Video, { "aria-hidden": true }) : /* @__PURE__ */ jsx(VideoOff, { "aria-hidden": true })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+        /* @__PURE__ */ jsx(
+          CallControlButton,
+          {
+            label: restoreLabel,
+            onClick: onRestore,
+            className: "size-8",
+            "data-testid": "call-dock-expand",
+            children: /* @__PURE__ */ jsx(Maximize2, { "aria-hidden": true })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CallControlButton,
+          {
+            label: "Leave call",
+            tone: "danger",
+            onClick: onLeave,
+            className: "size-8",
+            "data-testid": "call-dock-leave",
+            children: /* @__PURE__ */ jsx(PhoneOff, { "aria-hidden": true })
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function IncomingCallCard({
+  callerName,
+  caller,
+  context,
+  busy = false,
+  muted,
+  onMutedChange,
+  onAccept,
+  onDecline,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "alertdialog",
+      "aria-labelledby": "incoming-call-title",
+      "aria-describedby": "incoming-call-desc",
+      "data-testid": "incoming-call-dialog",
+      className: cn(
+        "w-80 max-w-[calc(100vw-2rem)] rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-xl motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-top-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsxs("span", { className: "relative flex size-10 shrink-0", "aria-hidden": true, children: [
+            /* @__PURE__ */ jsx("span", { className: "absolute inset-0 rounded-full bg-primary/20 motion-safe:animate-ping" }),
+            /* @__PURE__ */ jsx("span", { className: "relative flex size-10 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(Phone, { className: "size-5" }) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 pt-0.5", children: [
+            /* @__PURE__ */ jsxs("div", { id: "incoming-call-title", className: "flex min-w-0 text-sm font-semibold", children: [
+              caller ?? /* @__PURE__ */ jsx("span", { className: "truncate", children: callerName }),
+              caller && /* @__PURE__ */ jsx("span", { className: "sr-only", children: callerName })
+            ] }),
+            /* @__PURE__ */ jsx("p", { id: "incoming-call-desc", className: "text-xs text-muted-foreground", children: context })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              className: "-mr-1 -mt-1 size-8 shrink-0 text-muted-foreground hover:text-foreground",
+              "aria-pressed": muted,
+              "aria-label": muted ? "Unmute ringtone" : "Mute ringtone",
+              title: muted ? "Unmute ringtone" : "Mute ringtone",
+              onClick: () => onMutedChange(!muted),
+              "data-testid": "incoming-call-mute",
+              children: muted ? /* @__PURE__ */ jsx(BellOff, { className: "size-4" }) : /* @__PURE__ */ jsx(Bell, { className: "size-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-4 grid grid-cols-2 gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "destructive",
+              onClick: onDecline,
+              disabled: busy,
+              "data-testid": "incoming-call-decline",
+              children: [
+                /* @__PURE__ */ jsx(PhoneOff, { className: "size-4", "aria-hidden": true }),
+                "Decline"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              onClick: onAccept,
+              disabled: busy,
+              "data-testid": "incoming-call-accept",
+              autoFocus: true,
+              children: [
+                busy ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": true }) : /* @__PURE__ */ jsx(Phone, { className: "size-4", "aria-hidden": true }),
+                "Accept"
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+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: [
+        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
+      ]
+    }
+  );
+}
+function ConnectionOverlay({ label }) {
+  return /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-10 flex items-center justify-center rounded-md bg-background/70 text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsx(Loader2, { className: "mr-2 size-4 animate-spin", "aria-hidden": true }),
+    label
+  ] });
+}
+
+// src/calls/join-choices.ts
+var DEFAULT_JOIN_CHOICES = { audioEnabled: true, videoEnabled: false };
+function describeMediaError(err, kind) {
+  const Kind = kind === "camera" ? "Camera" : "Microphone";
+  const name = err?.name;
+  if (name === "NotAllowedError" || name === "SecurityError")
+    return `${Kind} access is blocked. Allow it in the browser's site settings and try again.`;
+  if (name === "NotFoundError" || name === "OverconstrainedError") return `No ${kind} was found.`;
+  if (name === "NotReadableError") return `${Kind} is in use by another app.`;
+  return `${Kind} could not start${err?.message ? `: ${err.message}` : "."}`;
+}
+function useDevices(kind, refreshKey) {
+  const [devices, setDevices] = useState([]);
+  useEffect(() => {
+    const md = navigator.mediaDevices;
+    if (!md?.enumerateDevices) return;
+    let cancelled = false;
+    const load = () => md.enumerateDevices().then((all) => {
+      if (!cancelled) setDevices(all.filter((d) => d.kind === kind && d.deviceId));
+    }).catch(() => {
+    });
+    void load();
+    md.addEventListener?.("devicechange", load);
+    return () => {
+      cancelled = true;
+      md.removeEventListener?.("devicechange", load);
+    };
+  }, [kind, refreshKey]);
+  return devices;
+}
+function usePreviewStream(kind, enabled, deviceId, describe) {
+  const [stream, setStream] = useState(null);
+  const [error, setError] = useState(null);
+  const describeRef = useRef(describe);
+  describeRef.current = describe;
+  useEffect(() => {
+    if (!enabled) {
+      setStream(null);
+      return;
+    }
+    const md = navigator.mediaDevices;
+    if (!md?.getUserMedia) {
+      setError(
+        window.isSecureContext ? "This browser cannot access the camera or microphone." : "Camera and microphone need HTTPS (or localhost)."
+      );
+      return;
+    }
+    let cancelled = false;
+    let opened = null;
+    const constraint = deviceId ? { deviceId: { exact: deviceId } } : true;
+    md.getUserMedia(kind === "videoinput" ? { video: constraint } : { audio: constraint }).then((s) => {
+      opened = s;
+      if (cancelled) s.getTracks().forEach((t) => t.stop());
+      else {
+        setError(null);
+        setStream(s);
+      }
+    }).catch((err) => {
+      if (!cancelled)
+        setError(describeRef.current(err, kind === "videoinput" ? "camera" : "microphone"));
+    });
+    return () => {
+      cancelled = true;
+      opened?.getTracks().forEach((t) => t.stop());
+      setStream(null);
+    };
+  }, [kind, enabled, deviceId]);
+  return { stream, error };
+}
+function useAudioLevel(stream) {
+  const [level, setLevel] = useState(0);
+  useEffect(() => {
+    if (!stream || typeof AudioContext === "undefined") {
+      setLevel(0);
+      return;
+    }
+    let ctx;
+    try {
+      ctx = new AudioContext();
+    } catch {
+      return;
+    }
+    const analyser = ctx.createAnalyser();
+    analyser.fftSize = 512;
+    ctx.createMediaStreamSource(stream).connect(analyser);
+    const buf = new Uint8Array(analyser.fftSize);
+    let frame = 0;
+    const tick = () => {
+      analyser.getByteTimeDomainData(buf);
+      let peak = 0;
+      for (const v of buf) peak = Math.max(peak, Math.abs(v - 128));
+      setLevel(Math.min(1, peak / 64));
+      frame = requestAnimationFrame(tick);
+    };
+    void ctx.resume().catch(() => {
+    });
+    tick();
+    return () => {
+      cancelAnimationFrame(frame);
+      void ctx.close().catch(() => {
+      });
+    };
+  }, [stream]);
+  return level;
+}
+function DeviceSelect({
+  devices,
+  value,
+  onChange,
+  label,
+  icon,
+  disabled,
+  testId
+}) {
+  const current = value ?? devices[0]?.deviceId;
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-xs font-medium text-muted-foreground [&_svg]:size-3.5", children: [
+      icon,
+      label
+    ] }),
+    /* @__PURE__ */ jsxs(Select, { value: current, onValueChange: onChange, disabled: disabled || devices.length < 2, children: [
+      /* @__PURE__ */ jsx(SelectTrigger, { "aria-label": label, className: "h-9 min-w-0 text-sm", "data-testid": testId, children: /* @__PURE__ */ jsx(SelectValue, { placeholder: `Default ${label.toLowerCase()}` }) }),
+      /* @__PURE__ */ jsx(SelectContent, { children: devices.map((d, i) => /* @__PURE__ */ jsx(SelectItem, { value: d.deviceId, children: d.label || `${label} ${i + 1}` }, d.deviceId)) })
+    ] })
+  ] });
+}
+function PreJoin({
+  title,
+  heading = "Ready to join?",
+  headingAs: Heading = "h2",
+  children,
+  joinLabel = "Join",
+  cancelLabel = "Cancel",
+  busy = false,
+  error,
+  onJoin,
+  onCancel,
+  describeError = describeMediaError,
+  mirror = true,
+  className
+}) {
+  const [choices, setChoices] = useState(DEFAULT_JOIN_CHOICES);
+  const video = usePreviewStream(
+    "videoinput",
+    choices.videoEnabled,
+    choices.videoDeviceId,
+    describeError
+  );
+  const audio = usePreviewStream(
+    "audioinput",
+    choices.audioEnabled,
+    choices.audioDeviceId,
+    describeError
+  );
+  const level = useAudioLevel(audio.stream);
+  const cameras = useDevices("videoinput", video.stream);
+  const mics = useDevices("audioinput", audio.stream);
+  const videoRef = useRef(null);
+  useEffect(() => {
+    if (videoRef.current) videoRef.current.srcObject = video.stream;
+  }, [video.stream]);
+  const set = (patch) => setChoices((c) => ({ ...c, ...patch }));
+  const deviceError = video.error ?? audio.error;
+  return /* @__PURE__ */ jsx("div", { className: cn("@container flex w-full", className), "data-testid": "call-prejoin", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto grid w-full max-w-4xl items-center gap-6 @2xl:grid-cols-[3fr_2fr] @2xl:gap-8", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "relative aspect-video w-full overflow-hidden rounded-md bg-hero", children: choices.videoEnabled && video.stream ? /* @__PURE__ */ jsx(
+        "video",
+        {
+          ref: videoRef,
+          autoPlay: true,
+          muted: true,
+          playsInline: true,
+          className: cn("size-full object-cover", mirror && "-scale-x-100"),
+          "data-testid": "call-prejoin-video"
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: "flex size-full items-center justify-center text-sm text-white/80", children: choices.videoEnabled ? /* @__PURE__ */ jsx(Loader2, { className: "size-5 animate-spin", "aria-label": "Starting camera" }) : "Camera is off" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-3", children: [
+        /* @__PURE__ */ jsx(
+          CallControlButton,
+          {
+            label: choices.audioEnabled ? "Turn off microphone" : "Turn on microphone",
+            tone: choices.audioEnabled ? "neutral" : "off",
+            "aria-pressed": choices.audioEnabled,
+            onClick: () => set({ audioEnabled: !choices.audioEnabled }),
+            "data-testid": "call-prejoin-mic-toggle",
+            children: choices.audioEnabled ? /* @__PURE__ */ jsx(Mic, { "aria-hidden": true }) : /* @__PURE__ */ jsx(MicOff, { "aria-hidden": true })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CallControlButton,
+          {
+            label: choices.videoEnabled ? "Turn off camera" : "Turn on camera",
+            tone: choices.videoEnabled ? "neutral" : "off",
+            "aria-pressed": choices.videoEnabled,
+            onClick: () => set({ videoEnabled: !choices.videoEnabled }),
+            "data-testid": "call-prejoin-camera-toggle",
+            children: choices.videoEnabled ? /* @__PURE__ */ jsx(Video, { "aria-hidden": true }) : /* @__PURE__ */ jsx(VideoOff, { "aria-hidden": true })
+          }
+        )
+      ] })
+    ] }),
+    /* @__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(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: [
+        /* @__PURE__ */ jsx(
+          DeviceSelect,
+          {
+            devices: mics,
+            value: choices.audioDeviceId,
+            onChange: (id) => set({ audioDeviceId: id }),
+            label: "Microphone",
+            icon: /* @__PURE__ */ jsx(Mic, {}),
+            disabled: !choices.audioEnabled,
+            testId: "call-prejoin-mic-select"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-1.5 w-full overflow-hidden rounded-full bg-muted",
+            role: "meter",
+            "aria-label": "Microphone level",
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-valuenow": Math.round(level * 100),
+            "data-testid": "call-prejoin-mic-level",
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-full bg-primary transition-[width] duration-75 motion-reduce:transition-none",
+                style: { width: `${Math.round(level * 100)}%` }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DeviceSelect,
+          {
+            devices: cameras,
+            value: choices.videoDeviceId,
+            onChange: (id) => set({ videoDeviceId: id }),
+            label: "Camera",
+            icon: /* @__PURE__ */ jsx(Video, {}),
+            disabled: !choices.videoEnabled,
+            testId: "call-prejoin-camera-select"
+          }
+        )
+      ] }),
+      children,
+      (error || deviceError) && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-sm text-destructive", "data-testid": "call-prejoin-error", children: error ?? deviceError }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            className: "flex-1",
+            disabled: busy,
+            onClick: () => onJoin(choices),
+            "data-testid": "call-prejoin-join",
+            children: [
+              busy && /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": true }),
+              joinLabel
+            ]
+          }
+        ),
+        onCancel && /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            onClick: onCancel,
+            disabled: busy,
+            "data-testid": "call-prejoin-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 { 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