@arbidocs/blocks 0.4.109 → 0.4.110

package/dist/calls/index.js

@@ -0,0 +1,1737 @@
+"use client";
+import { TabHeader } from '../chunk-4WWM3GQ5.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 '../chunk-VUNV25KB.js';
+import { forwardRef, useState, useRef, useMemo, useEffect } from 'react';
+import { Button, cn, Tooltip, TooltipTrigger, TooltipContent, Separator, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuCheckboxItem, Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@arbidocs/react/ui';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { MonitorUp, MicOff, AudioLines, SignalLow, Users, Mic, Captions, Lock, LockOpen, Video, VideoOff, ChevronUp, Loader2, Circle, PhoneOff, MoreHorizontal, LayoutGrid, UserRound, PictureInPicture2, Phone, X, Maximize2, BellOff, Bell, UserX } from 'lucide-react';
+
+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"
+}) {
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      type: "button",
+      variant: "destructive",
+      size: compact ? "icon" : "default",
+      className: cn("shrink-0", !compact && "px-4"),
+      "aria-label": title,
+      title,
+      onClick: onLeave,
+      "data-testid": "call-leave",
+      children: [
+        /* @__PURE__ */ jsx(PhoneOff, { className: "size-4", "aria-hidden": true }),
+        !compact && label
+      ]
+    }
+  );
+}
+function MoreMenu({
+  details,
+  groups,
+  label = "More options"
+}) {
+  const shown = groups.filter((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, {}),
+        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
+        ))
+      ] }, 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,
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: cn("flex min-h-0 flex-col bg-background text-foreground", className),
+      "aria-label": title,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex h-12 shrink-0 items-center gap-2 border-b border-border pl-3 pr-1.5", children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2 text-base font-semibold text-primary", children: [
+            icon,
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: title })
+          ] }),
+          actions,
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              className: "size-8 text-muted-foreground hover:text-foreground",
+              "aria-label": closeLabel,
+              title: closeLabel,
+              onClick: onClose,
+              "data-testid": closeTestId,
+              children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+            }
+          )
+        ] }),
+        children
+      ]
+    }
+  );
+}
+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 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__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "flex size-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary",
+                "aria-hidden": true,
+                children: initialsOf(p.name)
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "min-w-0 truncate", children: [
+              p.name,
+              p.isLocal && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: " (me)" })
+            ] })
+          ] }),
+          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,
+  action,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex size-full flex-col items-center justify-center gap-3 p-6 text-center",
+      "data-testid": testId,
+      children: [
+        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 }),
+        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?",
+  children,
+  joinLabel = "Join",
+  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("h2", { 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,
+            "data-testid": "call-prejoin-cancel",
+            children: "Cancel"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+
+export { CallControlBar, CallControlButton, CallFocus, CallGrid, CallHeader, CallNotice, CallParticipants, CallSidePanel, CallStageFrame, CallStateMessage, CallStatusChip, CallTile, CaptionsStrip, ConnectionOverlay, ControlBadge, ControlDivider, ControlGroup, DEFAULT_JOIN_CHOICES, ElapsedTime, EncryptionStatusChip, IncomingCallCard, LeaveButton, LobbyRequests, MediaControl, MinimisedCall, MoreMenu, PreJoin, RecordControl, RecordingStatusChip, SpeakingNow, TranscriptionStatusChip, VoiceMeter, describeMediaError, useBriefNotice, useElementSize, useShortcutKeys };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map