@q9labsai/chalk-react 5.1.0 → 5.2.0

package/dist/{chunk-XOHNIYSR.js → chunk-G62BKRNX.js}

@@ -3,14 +3,17 @@ import {
   DEFAULT_SPOTLIGHT_OPTIONS,
   EMPTY_GEOMETRY,
   MORE_TILE_ID,
+  WHITEBOARD_ITEM_ID,
   buildStageItems,
   choosePrimary,
   fitGrid,
   fitSpotlight,
+  floatingSpeakerId,
   gridOrder,
   isContentItem,
+  speakingParticipantId,
   stabilizeOrder
-} from "./chunk-ZFWIMKUC.js";
+} from "./chunk-HWQLW4JR.js";
 import {
   ArrowLeft01Icon,
   ArrowRight01Icon,
@@ -102,6 +105,13 @@ function useWhiteboard() {
 function useCan(capability) {
   return useSelf().can(capability);
 }
+function useCanDrawWhiteboard() {
+  const whiteboard = useWhiteboard();
+  const roleDefault = useCan("drawWhiteboard");
+  if (whiteboard.engine.status === "unsubscribed") return roleDefault;
+  if (whiteboard.access.policy === null) return roleDefault && whiteboard.access.canDraw;
+  return whiteboard.access.canDraw;
+}
 function useScreenShare() {
   const client = useSpaceClient();
   const { screenShare } = useMedia();
@@ -385,7 +395,7 @@ function ChalkTooltip({ trigger, children }) {
 
 // src/components/chalk-ui/ChalkPopover.tsx
 import { Popover } from "@base-ui/react/popover";
-import { useRef as useRef3 } from "react";
+import { useState as useState3 } from "react";
 import { jsx as jsx17, jsxs as jsxs5 } from "react/jsx-runtime";
 function ChalkPopover({
   trigger,
@@ -397,20 +407,12 @@ function ChalkPopover({
   open,
   onOpenChange
 }) {
-  const container = useRef3(null);
-  return /* @__PURE__ */ jsx17(
-    "span",
-    {
-      ref: (element) => {
-        container.current = element?.closest("[data-chalk]") ?? element;
-      },
-      style: { display: "contents" },
-      children: /* @__PURE__ */ jsxs5(Popover.Root, { open, onOpenChange, children: [
-        tooltip ? /* @__PURE__ */ jsx17(ChalkTooltip, { trigger: /* @__PURE__ */ jsx17(Popover.Trigger, { render: trigger }), children: tooltip }) : /* @__PURE__ */ jsx17(Popover.Trigger, { render: trigger }),
-        /* @__PURE__ */ jsx17(Popover.Portal, { container, children: /* @__PURE__ */ jsx17(Popover.Positioner, { side: "bottom", align: "start", alignOffset, sideOffset: 8, collisionPadding: 8, className: "chalk-popover-positioner", children: /* @__PURE__ */ jsx17(Popover.Popup, { "aria-label": label, "data-part": "popover", className: cn("chalk-menu chalk-popover", className), children }) }) })
-      ] })
-    }
-  );
+  const [holder, setHolder] = useState3(null);
+  const root = holder?.closest("[data-chalk]") ?? null;
+  return /* @__PURE__ */ jsx17("span", { ref: setHolder, style: { display: "contents" }, children: /* @__PURE__ */ jsxs5(Popover.Root, { open, onOpenChange, children: [
+    tooltip ? /* @__PURE__ */ jsx17(ChalkTooltip, { trigger: /* @__PURE__ */ jsx17(Popover.Trigger, { render: trigger }), children: tooltip }) : /* @__PURE__ */ jsx17(Popover.Trigger, { render: trigger }),
+    /* @__PURE__ */ jsx17(Popover.Portal, { container: root ?? holder, children: /* @__PURE__ */ jsx17(Popover.Positioner, { side: "bottom", align: "start", alignOffset, sideOffset: 8, collisionPadding: 8, collisionBoundary: root ?? void 0, className: "chalk-popover-positioner", children: /* @__PURE__ */ jsx17(Popover.Popup, { "aria-label": label, "data-part": "popover", className: cn("chalk-menu chalk-popover", className), children }) }) })
+  ] }) });
 }
 
 // src/components/chalk-ui/ChalkSegmentedControl.tsx
@@ -437,12 +439,12 @@ function ChalkSegmentedControl({
 }
 
 // src/components/chalk-ui/ChalkCopyButton.tsx
-import { useEffect as useEffect2, useRef as useRef4, useState as useState3 } from "react";
+import { useEffect as useEffect2, useRef as useRef3, useState as useState4 } from "react";
 import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs6 } from "react/jsx-runtime";
 function ChalkCopyButton({ text, label = "Copy link", announcement = "Link copied", showLabel = false }) {
-  const [copied, setCopied] = useState3(false);
-  const [error, setError] = useState3(false);
-  const timer = useRef4(void 0);
+  const [copied, setCopied] = useState4(false);
+  const [error, setError] = useState4(false);
+  const timer = useRef3(void 0);
   useEffect2(() => () => clearTimeout(timer.current), []);
   const copy = async () => {
     try {
@@ -472,10 +474,10 @@ function ChalkCopyButton({ text, label = "Copy link", announcement = "Link copie
 
 // src/components/chalk-ui/ChalkSheet.tsx
 import { Dialog } from "@base-ui/react/dialog";
-import { useCallback as useCallback2, useState as useState4 } from "react";
+import { useCallback as useCallback2, useState as useState5 } from "react";
 import { jsx as jsx20, jsxs as jsxs7 } from "react/jsx-runtime";
 function ChalkSheet({ open, onOpenChange, title, accessibleLabel, children, variant = "default" }) {
-  const [container, setContainer] = useState4(null);
+  const [container, setContainer] = useState5(null);
   const attach = useCallback2((element) => setContainer(element?.closest("[data-chalk]") ?? element), []);
   return /* @__PURE__ */ jsx20("span", { ref: attach, style: { display: "contents" }, children: /* @__PURE__ */ jsx20(Dialog.Root, { open, onOpenChange, children: container ? /* @__PURE__ */ jsxs7(Dialog.Portal, { container, children: [
     /* @__PURE__ */ jsx20(Dialog.Backdrop, { "data-part": "sheet-scrim", className: "chalk-sheet-scrim" }),
@@ -503,32 +505,53 @@ function ChalkSheet({ open, onOpenChange, title, accessibleLabel, children, vari
 }
 
 // src/components/chalk-ui/ChalkToast.tsx
-import { useEffect as useEffect3, useRef as useRef5, useState as useState5 } from "react";
+import { useEffect as useEffect3, useRef as useRef4, useState as useState6 } from "react";
+
+// src/components/toast-stack/notice-announcement.ts
+import { Children, Fragment as Fragment4, isValidElement } from "react";
+function literalText(node) {
+  if (typeof node === "string" || typeof node === "number" || typeof node === "bigint") return String(node);
+  if (node == null || typeof node === "boolean") return "";
+  if (isValidElement(node)) return typeof node.type === "string" || node.type === Fragment4 ? literalText(node.props.children) : "";
+  if (typeof node === "object" && "then" in node) return "";
+  return typeof node === "object" && Symbol.iterator in node ? Children.toArray(node).map(literalText).join("") : "";
+}
+function noticeAnnouncement(toast) {
+  return toast.announcementText ?? literalText(toast.message);
+}
+function noticeIdentity(toast) {
+  return JSON.stringify([noticeAnnouncement(toast), toast.announcementKey, toast.type ?? "info"]);
+}
+
+// src/components/chalk-ui/ChalkToast.tsx
 import { jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
-function ChalkToast({ message, type = "info", duration = type === "info" ? 5e3 : Infinity, action, icon, onDismiss }) {
-  const dismissRef = useRef5(onDismiss);
+function ChalkToast({ message, announcementKey, announcementText, type = "info", duration = type === "info" ? 5e3 : Infinity, action, icon, announce = true, onDismiss }) {
+  const dismissRef = useRef4(onDismiss);
   dismissRef.current = onDismiss;
-  const [exiting, setExiting] = useState5(false);
+  const identity = noticeIdentity({ message, announcementText, announcementKey, type });
+  const [lifetime, setLifetime] = useState6({ identity, exiting: false });
+  if (lifetime.identity !== identity) setLifetime({ identity, exiting: false });
+  const exiting = lifetime.identity === identity && lifetime.exiting;
   useEffect3(() => {
     if (duration === Infinity) return;
-    const timer = setTimeout(() => setExiting(true), duration);
+    const timer = setTimeout(() => setLifetime({ identity, exiting: true }), duration);
     return () => clearTimeout(timer);
-  }, [duration]);
+  }, [duration, identity]);
   useEffect3(() => {
     if (!exiting) return;
     const timer = setTimeout(() => dismissRef.current(), 160);
     return () => clearTimeout(timer);
-  }, [exiting]);
-  return /* @__PURE__ */ jsxs8("div", { "data-part": "toast", "data-exiting": exiting || void 0, className: "chalk-toast", style: type === "error" ? { maxWidth: "min(560px, calc(100% - 32px))" } : void 0, role: type === "error" ? "alert" : "status", "aria-live": type === "error" ? "assertive" : "polite", "aria-atomic": "true", children: [
+  }, [exiting, identity]);
+  return /* @__PURE__ */ jsxs8("div", { "data-part": "toast", "data-type": type, "data-exiting": exiting || void 0, className: "chalk-toast", role: announce ? type === "error" ? "alert" : "status" : void 0, "aria-live": announce ? type === "error" ? "assertive" : "polite" : void 0, "aria-atomic": announce || void 0, children: [
     icon,
-    /* @__PURE__ */ jsx21("span", { style: type === "error" ? { whiteSpace: "normal", lineHeight: 1.35, padding: "4px 0" } : void 0, children: message }),
+    /* @__PURE__ */ jsx21("span", { children: message }),
     action ? /* @__PURE__ */ jsx21(ChalkButton, { onClick: action.onClick, children: action.label }) : null,
-    type === "error" ? /* @__PURE__ */ jsx21("button", { type: "button", "data-part": "toast-dismiss", className: "chalk-dismiss", "aria-label": "Dismiss", onClick: () => setExiting(true), children: /* @__PURE__ */ jsx21("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx21("path", { d: "m6 6 12 12M6 18 18 6" }) }) }) : null
+    type === "error" ? /* @__PURE__ */ jsx21("button", { type: "button", "data-part": "toast-dismiss", className: "chalk-dismiss", "aria-label": "Dismiss", onClick: () => setLifetime({ identity, exiting: true }), children: /* @__PURE__ */ jsx21("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx21("path", { d: "m6 6 12 12M6 18 18 6" }) }) }) : null
   ] });
 }
 
 // src/components/call-limbo/CallLimbo.tsx
-import { useEffect as useEffect4, useRef as useRef6, useState as useState6 } from "react";
+import { useEffect as useEffect4, useRef as useRef5, useState as useState7 } from "react";
 
 // src/theme.ts
 var LIGHT_CHALK_THEME_TOKENS = {
@@ -612,28 +635,29 @@ function chalkThemeStyle(theme, colorScheme = theme?.colorScheme ?? "dark") {
 }
 
 // src/components/toast-stack/CallEventIcon.tsx
-import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
 function CallEventIcon({ kind, error = false }) {
   const paths2 = {
+    speaker: /* @__PURE__ */ jsx22("path", { d: "M11 5 6 9H3v6h3l5 4V5ZM15 8a6 6 0 0 1 0 8M18 5a10 10 0 0 1 0 14" }),
     microphone: /* @__PURE__ */ jsx22("path", { d: "M2 2l20 20M15 9.3V5a3 3 0 0 0-5.7-1.3M9 9v2a3 3 0 0 0 5.1 2.1M17 17a7 7 0 0 1-12-6v-1M19 10v1a7 7 0 0 1-.1 1.2M12 18v4" }),
-    "microphone-on": /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    "microphone-on": /* @__PURE__ */ jsxs9(Fragment5, { children: [
       /* @__PURE__ */ jsx22("rect", { x: "9", y: "2", width: "6", height: "12", rx: "3" }),
       /* @__PURE__ */ jsx22("path", { d: "M19 10v1a7 7 0 0 1-14 0v-1M12 18v4" })
     ] }),
     camera: /* @__PURE__ */ jsx22("path", { d: "M2 2l20 20M10.7 6H14a2 2 0 0 1 2 2v3.3l1 1 4-2.8v8M16 16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2" }),
-    screen: /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    screen: /* @__PURE__ */ jsxs9(Fragment5, { children: [
       /* @__PURE__ */ jsx22("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2" }),
       /* @__PURE__ */ jsx22("path", { d: "M8 21h8M12 17v4M9.5 7.5l5 5M14.5 7.5l-5 5" })
     ] }),
-    recording: /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    recording: /* @__PURE__ */ jsxs9(Fragment5, { children: [
       /* @__PURE__ */ jsx22("circle", { cx: "12", cy: "12", r: "9" }),
       /* @__PURE__ */ jsx22("circle", { cx: "12", cy: "12", r: "3.5", fill: "currentColor" })
     ] }),
-    hand: /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    hand: /* @__PURE__ */ jsxs9(Fragment5, { children: [
       /* @__PURE__ */ jsx22("path", { d: "M18 11V6a2 2 0 0 0-4 0v5M14 10V4a2 2 0 0 0-4 0v6M10 10.5V6a2 2 0 0 0-4 0v8" }),
       /* @__PURE__ */ jsx22("path", { d: "M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.9-6-2.3l-3.6-3.6a2 2 0 0 1 2.8-2.8L7 15" })
     ] }),
-    host: /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    host: /* @__PURE__ */ jsxs9(Fragment5, { children: [
       /* @__PURE__ */ jsx22("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }),
       /* @__PURE__ */ jsx22("circle", { cx: "9", cy: "7", r: "4" }),
       /* @__PURE__ */ jsx22("path", { d: "M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8" })
@@ -645,9 +669,9 @@ function CallEventIcon({ kind, error = false }) {
 // src/components/call-limbo/CallLimbo.tsx
 import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
 function CallLimbo({ spaceName = "Call", message, detail, action, children, overlay = false, active = true, initiallyCovered = false, theme, recorded = false, blocking = true, className }) {
-  const layerRef = useRef6(null);
+  const layerRef = useRef5(null);
   const reducedMotion = usePrefersReducedMotion();
-  const [covered, setCovered] = useState6(active || initiallyCovered);
+  const [covered, setCovered] = useState7(active || initiallyCovered);
   useEffect4(() => {
     let nextFrame = 0;
     const frame = requestAnimationFrame(() => {
@@ -724,11 +748,112 @@ function CallLimbo({ spaceName = "Call", message, detail, action, children, over
   ] });
 }
 
-// src/components/media-request-dialog/media-request-dialog-state.ts
-import { useEffect as useEffect5, useMemo as useMemo2, useState as useState7 } from "react";
-function errorMessage(cause) {
-  return cause instanceof Error ? cause.message : "This media request could not be completed.";
+// src/components/control-bar/command-failure.ts
+import { SpaceClientError } from "@q9labsai/chalk-client";
+function commandFailure(cause) {
+  return cause instanceof SpaceClientError ? cause : new SpaceClientError({
+    code: "client.internal_error",
+    recoverable: false,
+    message: cause instanceof Error ? cause.message : "This command could not be completed."
+  });
+}
+var again = ({ recoverable }) => recoverable ? " Try again." : "";
+var device = ({ source }) => source ?? "device";
+var settings = (context) => `Couldn\u2019t change ${context.source === "screen" ? "screen sharing" : `your ${device(context)} settings`}.`;
+var stop = (context) => context.source === "screen" ? "Couldn\u2019t stop screen sharing." : settings(context);
+var start = (context) => context.source === "screen" ? "Your screen couldn\u2019t be shared." : `Your ${device(context)} couldn\u2019t start.`;
+var test = () => "Couldn\u2019t play the speaker test. Check your browser\u2019s audio settings and system volume.";
+var operationCopy = {
+  start: (context) => `${start(context)}${again(context)}`,
+  stop: (context) => `${stop(context)}${again(context)}`,
+  select: (context) => `Couldn\u2019t select your ${device(context)}.${again(context)}`,
+  test: (context) => `${test(context)}${again(context)}`,
+  request: (context) => `Couldn\u2019t respond to the ${device(context)} request.${again(context)}`,
+  change: (context) => `${settings(context)}${again(context)}`
+};
+var generic = { copy: operationCopy, retry: true };
+var unavailable = { copy: operationCopy, retry: false };
+var specific = (copy) => ({ copy: { ...operationCopy, start: copy, select: copy, request: copy, change: copy }, retry: false });
+var capture = (context) => `${settings(context)} Check that it is connected and available${context.recoverable ? ", then try again" : ""}.`;
+var captureStart = (context) => context.source === "screen" ? `${start(context)}${again(context)}` : `Your ${device(context)} couldn\u2019t start. Check that it is connected and available${context.recoverable ? ", then try again" : ""}.`;
+var MEDIA_FAILURE_POLICY = {
+  "access.invalid": specific(() => "Your call access is unavailable. Rejoin the call."),
+  "access.unavailable": specific(() => "Your call access is unavailable. Rejoin the call."),
+  "chat.cursor_reset_required": unavailable,
+  "chat.payload_invalid": unavailable,
+  "client.internal_error": generic,
+  "collaboration.unavailable": unavailable,
+  "command.rate_limited": generic,
+  "command.rejected": unavailable,
+  "connection.invalid_state": {
+    copy: {
+      ...operationCopy,
+      start: (context) => `That change was interrupted.${again(context)}`,
+      stop: (context) => `That change was interrupted.${again(context)}`,
+      select: (context) => `That change was interrupted.${again(context)}`,
+      change: (context) => `That change was interrupted.${again(context)}`
+    },
+    retry: true
+  },
+  "connection.join_cleanup_unconfirmed": unavailable,
+  "connection.leave_unconfirmed": unavailable,
+  "connection.media_recovery_exhausted": unavailable,
+  "connection.media_start_failed": generic,
+  "connection.state_digest_recovery_failed": unavailable,
+  "connection.sync_recovery_exhausted": unavailable,
+  "connection.sync_start_failed": unavailable,
+  "connection.sync_hello_timeout": unavailable,
+  "environment.unsupported": {
+    copy: {
+      ...operationCopy,
+      start: () => "Media capture is unavailable in this environment. Use a supported browser over HTTPS or the native app.",
+      request: () => "Media capture is unavailable in this environment. Use a supported browser over HTTPS or the native app.",
+      select: (context) => context.source === "speaker" ? "This browser can\u2019t change your speaker. Use your system sound settings to choose an output device." : "Media capture is unavailable in this environment. Use a supported browser over HTTPS or the native app.",
+      test: () => "This browser can\u2019t play a speaker test. Check your browser\u2019s audio settings or use another supported browser.",
+      change: (context) => context.source === "speaker" ? "This browser can\u2019t change your speaker. Use your system sound settings to choose an output device." : "Media capture is unavailable in this environment. Use a supported browser over HTTPS or the native app."
+    },
+    retry: false
+  },
+  "episode.ended": { copy: { start: () => "This call has ended.", stop: () => "This call has ended.", select: () => "This call has ended.", test: () => "This call has ended.", request: () => "This call has ended.", change: () => "This call has ended." }, retry: false },
+  "media.permission_denied": specific(
+    (context) => context.source === "screen" ? `Your screen couldn\u2019t be shared. Allow screen recording for your browser in System Settings${context.recoverable ? ", then try again" : ""}.` : context.source === "speaker" ? "Chalk can\u2019t use your speaker. Check your browser\u2019s audio permissions and system sound settings." : `Chalk can\u2019t use your ${device(context)}. Click the camera icon in the address bar and allow ${context.source === "camera" ? "Camera" : context.source === "microphone" ? "Microphone" : "Camera and Microphone"}.`
+  ),
+  "media.device_not_found": specific((context) => `No ${device(context)} found. Connect one${context.recoverable ? ", then try again" : ""}.`),
+  "media.device_busy": { ...specific((context) => `Your ${device(context)} is being used by another app. Close it there${context.recoverable ? ", then try again" : ""}.`), retry: true },
+  "media.device_constraint_invalid": specific((context) => `Your ${device(context)} doesn\u2019t support these settings. Choose another ${device(context)}${context.recoverable ? ", then try again" : ""}.`),
+  "media.capture_failed": { copy: { ...operationCopy, start: captureStart, request: captureStart, change: (context) => context.source === "screen" ? `${settings(context)}${again(context)}` : capture(context) }, retry: true },
+  "media.request_invalid": {
+    copy: {
+      ...operationCopy,
+      test: () => "The speaker test is no longer available.",
+      request: () => "The media request is no longer active.",
+      select: (context) => `Choose a valid ${device(context)} from the device list.`,
+      start: () => "This media action is no longer available.",
+      stop: () => "This media action is no longer available.",
+      change: () => "This media action is no longer available."
+    },
+    retry: false
+  },
+  "media.timeout": generic,
+  "offline.discarded": unavailable,
+  "participant.invalid": unavailable,
+  "reaction.invalid": unavailable,
+  "whiteboard.unavailable": unavailable
+};
+function commandFailurePresentation(failure, source, operation = "change", hasExactRetry = false) {
+  if (!Object.hasOwn(MEDIA_FAILURE_POLICY, failure.code)) return { message: "This media action couldn\u2019t be completed.", retry: false };
+  if (!source && operation === "change" && !failure.code.startsWith("media.")) return { message: failure.message, retry: false };
+  const rule = MEDIA_FAILURE_POLICY[failure.code];
+  const context = { source, recoverable: failure.recoverable };
+  const message = rule.copy[operation](context);
+  return { message, retry: failure.recoverable && rule.retry && hasExactRetry && source !== void 0 && source !== "speaker" && (operation === "start" || operation === "stop") };
+}
+function commandFailureMessage(failure, source, operation) {
+  return commandFailurePresentation(failure, source, operation).message;
 }
+
+// src/components/media-request-dialog/media-request-dialog-state.ts
+import { useEffect as useEffect5, useMemo as useMemo2, useState as useState8 } from "react";
 function formatExpiryLabel(expiresAtMs, now) {
   if (!Number.isFinite(expiresAtMs)) return null;
   const remainingSeconds = Math.max(0, Math.ceil((expiresAtMs - now) / 1e3));
@@ -739,9 +864,9 @@ function formatExpiryLabel(expiresAtMs, now) {
 }
 function useMediaRequestDialogState({ request, onDecline, onAllow, onActionError }) {
   const expiresAtMs = useMemo2(() => Date.parse(request.expiresAt), [request.expiresAt]);
-  const [now, setNow] = useState7(() => Date.now());
-  const [pendingAction, setPendingAction] = useState7(null);
-  const [errorMessageState, setErrorMessage] = useState7(null);
+  const [now, setNow] = useState8(() => Date.now());
+  const [pendingAction, setPendingAction] = useState8(null);
+  const [errorMessageState, setErrorMessage] = useState8(null);
   useEffect5(() => {
     setNow(Date.now());
     setPendingAction(null);
@@ -760,7 +885,7 @@ function useMediaRequestDialogState({ request, onDecline, onAllow, onActionError
     setPendingAction(action);
     setErrorMessage(null);
     Promise.resolve().then(handler).then(() => onActionError?.(null, action)).catch((cause) => {
-      const message = errorMessage(cause);
+      const message = commandFailureMessage(commandFailure(cause), request.kind === "start_camera" ? "camera" : "microphone", "request");
       setErrorMessage(message);
       onActionError?.(message, action);
     }).finally(() => setPendingAction(null));
@@ -771,7 +896,7 @@ function useMediaRequestDialogState({ request, onDecline, onAllow, onActionError
 // src/components/media-request-dialog/MediaRequestDialog.tsx
 import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
 function MediaRequestDialog({ request, onDecline, onAllow, onActionError }) {
-  const { isExpired, expiryLabel, pendingAction, errorMessage: errorMessage2, runAction } = useMediaRequestDialogState({ request, onDecline, onAllow, onActionError });
+  const { isExpired, expiryLabel, pendingAction, errorMessage, runAction } = useMediaRequestDialogState({ request, onDecline, onAllow, onActionError });
   const RequestIcon = request.kind === "unmute" ? Microphone01Icon : Video01Icon;
   return /* @__PURE__ */ jsxs11(
     "div",
@@ -794,7 +919,7 @@ function MediaRequestDialog({ request, onDecline, onAllow, onActionError }) {
             expiryLabel ? /* @__PURE__ */ jsx24("p", { className: "mt-1 text-xs text-[var(--chalk-app-text-muted)]", role: "status", children: expiryLabel }) : null
           ] })
         ] }),
-        errorMessage2 ? /* @__PURE__ */ jsx24("p", { className: "mt-3 rounded-md border border-[var(--chalk-app-danger)]/35 bg-[var(--chalk-app-danger)]/10 px-3 py-2 text-sm text-[var(--chalk-app-danger)]", role: "alert", children: errorMessage2 }) : null,
+        errorMessage ? /* @__PURE__ */ jsx24("p", { className: "mt-3 rounded-md border border-[var(--chalk-app-danger)]/35 bg-[var(--chalk-app-danger)]/10 px-3 py-2 text-sm text-[var(--chalk-app-danger)]", role: "alert", children: errorMessage }) : null,
         /* @__PURE__ */ jsxs11("div", { className: "mt-4 flex justify-end gap-2", children: [
           /* @__PURE__ */ jsx24("button", { type: "button", className: "rounded-lg px-3 py-2 text-sm text-[var(--chalk-app-text-muted)] hover:bg-[var(--chalk-app-control-hover)] disabled:cursor-not-allowed disabled:opacity-55", onClick: () => runAction("decline"), disabled: isExpired || pendingAction !== null, children: "Not now" }),
           /* @__PURE__ */ jsx24(
@@ -814,11 +939,11 @@ function MediaRequestDialog({ request, onDecline, onAllow, onActionError }) {
 }
 
 // src/components/admission-panel/AdmissionPanel.tsx
-import React8, { useEffect as useEffect10, useState as useState14 } from "react";
+import React8, { useEffect as useEffect10, useState as useState15 } from "react";
 import { IconButton, Spinner } from "@q9labsai/chalk-ui";
 
 // src/components/audio-output/AudioOutput.tsx
-import { useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef7, useState as useState9 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef6, useState as useState10 } from "react";
 
 // src/selectors/space-selectors.ts
 function toVideoParticipants(participants, remoteMedia, localId, displayName, localMedia) {
@@ -879,11 +1004,11 @@ function toAudioParticipants(remoteMedia) {
 }
 
 // src/components/participants-panel/participant-volume-context.tsx
-import { createContext as createContext2, useContext as useContext2, useMemo as useMemo3, useState as useState8 } from "react";
+import { createContext as createContext2, useContext as useContext2, useMemo as useMemo3, useState as useState9 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 var ParticipantVolumeContext = createContext2(null);
 function ParticipantVolumeProvider({ children }) {
-  const [volumes, setVolumes] = useState8(/* @__PURE__ */ new Map());
+  const [volumes, setVolumes] = useState9(/* @__PURE__ */ new Map());
   const value = useMemo3(
     () => ({
       volumes,
@@ -924,11 +1049,11 @@ function AudioOutput({ participants, volume = 1, audioOutputDeviceId, getPartici
   }, [participants, contextParticipants, participantState.roster]);
   const effectiveAudioOutputDeviceId = audioOutputDeviceId ?? media.selection.speaker ?? void 0;
   const effectiveGetParticipantVolume = getParticipantVolume ?? ((participantId) => (volumeContext?.volumes.get(participantId) ?? 100) / 100);
-  const audioElementsRef = useRef7(/* @__PURE__ */ new Map());
-  const screenShareAudioRef = useRef7(/* @__PURE__ */ new Map());
-  const pendingAutoplayRetryRef = useRef7(/* @__PURE__ */ new Set());
-  const [needsAutoplayUnlock, setNeedsAutoplayUnlock] = useState9(false);
-  const resumeAudioRef = useRef7(null);
+  const audioElementsRef = useRef6(/* @__PURE__ */ new Map());
+  const screenShareAudioRef = useRef6(/* @__PURE__ */ new Map());
+  const pendingAutoplayRetryRef = useRef6(/* @__PURE__ */ new Set());
+  const [needsAutoplayUnlock, setNeedsAutoplayUnlock] = useState10(false);
+  const resumeAudioRef = useRef6(null);
   const markAutoplayBlocked = (el) => {
     pendingAutoplayRetryRef.current.add(el);
     setNeedsAutoplayUnlock(true);
@@ -1174,7 +1299,7 @@ function useHaptics({ enabled = true } = {}) {
 
 // src/components/participant-tile/ParticipantTile.tsx
 import { Facehash as Facehash2 } from "@q9labsai/facehash/react";
-import React5, { useMemo as useMemo6, useRef as useRef9, useState as useState12 } from "react";
+import React5, { useMemo as useMemo6, useRef as useRef8, useState as useState13 } from "react";
 
 // src/internal/useMirrorSetting.ts
 import { useSyncExternalStore as useSyncExternalStore2 } from "react";
@@ -1215,33 +1340,33 @@ function setMirrored(next) {
 
 // src/components/stage/StageIcon.tsx
 import "react";
-import { Fragment as Fragment5, jsx as jsx27, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx27, jsxs as jsxs12 } from "react/jsx-runtime";
 var paths = {
-  share: /* @__PURE__ */ jsxs12(Fragment5, { children: [
+  share: /* @__PURE__ */ jsxs12(Fragment6, { children: [
     /* @__PURE__ */ jsx27("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2" }),
     /* @__PURE__ */ jsx27("path", { d: "M8 21h8M12 17v4M9 10l3-3 3 3M12 7v6" })
   ] }),
-  fill: /* @__PURE__ */ jsxs12(Fragment5, { children: [
+  fill: /* @__PURE__ */ jsxs12(Fragment6, { children: [
     /* @__PURE__ */ jsx27("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
     /* @__PURE__ */ jsx27("path", { d: "M7 12h10M7 12l2.5-2.5M7 12l2.5 2.5M17 12l-2.5-2.5M17 12l-2.5 2.5" })
   ] }),
-  fit: /* @__PURE__ */ jsxs12(Fragment5, { children: [
+  fit: /* @__PURE__ */ jsxs12(Fragment6, { children: [
     /* @__PURE__ */ jsx27("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
     /* @__PURE__ */ jsx27("rect", { x: "7.5", y: "9", width: "9", height: "6", rx: "1" })
   ] }),
-  "zoom-in": /* @__PURE__ */ jsxs12(Fragment5, { children: [
+  "zoom-in": /* @__PURE__ */ jsxs12(Fragment6, { children: [
     /* @__PURE__ */ jsx27("circle", { cx: "11", cy: "11", r: "7" }),
     /* @__PURE__ */ jsx27("path", { d: "M21 21l-4.3-4.3M8 11h6M11 8v6" })
   ] }),
-  "zoom-out": /* @__PURE__ */ jsxs12(Fragment5, { children: [
+  "zoom-out": /* @__PURE__ */ jsxs12(Fragment6, { children: [
     /* @__PURE__ */ jsx27("circle", { cx: "11", cy: "11", r: "7" }),
     /* @__PURE__ */ jsx27("path", { d: "M21 21l-4.3-4.3M8 11h6" })
   ] }),
-  pip: /* @__PURE__ */ jsxs12(Fragment5, { children: [
+  pip: /* @__PURE__ */ jsxs12(Fragment6, { children: [
     /* @__PURE__ */ jsx27("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }),
     /* @__PURE__ */ jsx27("rect", { x: "12", y: "12", width: "7", height: "5", rx: "1", fill: "currentColor" })
   ] }),
-  volume: /* @__PURE__ */ jsxs12(Fragment5, { children: [
+  volume: /* @__PURE__ */ jsxs12(Fragment6, { children: [
     /* @__PURE__ */ jsx27("path", { d: "M11 5L6 9H2v6h4l5 4z" }),
     /* @__PURE__ */ jsx27("path", { d: "M15.5 8.5a5 5 0 0 1 0 7M19 5a10 10 0 0 1 0 14" })
   ] }),
@@ -1249,12 +1374,12 @@ var paths = {
   pause: /* @__PURE__ */ jsx27("path", { d: "M9 5v14M15 5v14", strokeWidth: "2.5" }),
   more: /* @__PURE__ */ jsx27("path", { d: "M5 12h.01M12 12h.01M19 12h.01", strokeWidth: "3" }),
   mute: /* @__PURE__ */ jsx27("path", { d: "M2 2l20 20M15 9.3V5a3 3 0 0 0-5.7-1.3M9 9v2a3 3 0 0 0 5.1 2.1M17 17a7 7 0 0 1-12-6v-1M19 10v1a7 7 0 0 1-.1 1.2M12 18v4" }),
-  hand: /* @__PURE__ */ jsxs12(Fragment5, { children: [
+  hand: /* @__PURE__ */ jsxs12(Fragment6, { children: [
     /* @__PURE__ */ jsx27("path", { d: "M18 11V6a2 2 0 0 0-4 0v5M14 10V4a2 2 0 0 0-4 0v6M10 10.5V6a2 2 0 0 0-4 0v8" }),
     /* @__PURE__ */ jsx27("path", { d: "M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.9-6-2.3l-3.6-3.6a2 2 0 0 1 2.8-2.8L7 15" })
   ] }),
   pin: /* @__PURE__ */ jsx27("path", { d: "M12 17v5M9 10.8a2 2 0 0 1-1.1 1.8l-1.8.9A2 2 0 0 0 5 15.2V17h14v-1.8a2 2 0 0 0-1.1-1.8l-1.8-.9a2 2 0 0 1-1.1-1.8V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" }),
-  pen: /* @__PURE__ */ jsxs12(Fragment5, { children: [
+  pen: /* @__PURE__ */ jsxs12(Fragment6, { children: [
     /* @__PURE__ */ jsx27("path", { d: "M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5z" }),
     /* @__PURE__ */ jsx27("path", { d: "M15 5l4 4" })
   ] })
@@ -1264,7 +1389,7 @@ function StageIcon({ name, size = 16, ...props }) {
 }
 
 // src/components/atomic/Avatar.tsx
-import React3, { useEffect as useEffect7, useMemo as useMemo5, useState as useState10 } from "react";
+import React3, { useEffect as useEffect7, useMemo as useMemo5, useState as useState11 } from "react";
 import { Facehash } from "@q9labsai/facehash/react";
 import { jsx as jsx28, jsxs as jsxs13 } from "react/jsx-runtime";
 var GeneratedFacehash = Facehash;
@@ -1283,7 +1408,7 @@ var statusColorMap = {
   offline: "var(--chalk-muted-text)"
 };
 var Avatar = React3.memo(({ name, src, size = "md", status, className, style, gradientPreference, generated = true, animated = true }) => {
-  const [imageError, setImageError] = useState10(false);
+  const [imageError, setImageError] = useState11(false);
   const hasUploadedImage = Boolean(src) && !imageError;
   const shouldShowGeneratedAvatar = generated && Boolean(name) && !hasUploadedImage;
   useEffect7(() => {
@@ -1360,10 +1485,10 @@ function TileShell({ label, accentColor, pinned = false, ring = false, speaking
 }
 
 // src/components/participant-tile/useVideoTrack.ts
-import { useEffect as useEffect8, useRef as useRef8, useState as useState11 } from "react";
+import { useEffect as useEffect8, useRef as useRef7, useState as useState12 } from "react";
 function useVideoTrack(videoRef, track, enabled) {
-  const [status, setStatus] = useState11("idle");
-  const loadedRef = useRef8(false);
+  const [status, setStatus] = useState12("idle");
+  const loadedRef = useRef7(false);
   useEffect8(() => {
     const video = videoRef.current;
     loadedRef.current = false;
@@ -1403,7 +1528,7 @@ function useVideoTrack(videoRef, track, enabled) {
 }
 
 // src/components/participant-tile/ParticipantTile.tsx
-import { Fragment as Fragment6, jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
 var aspectRatioClasses = {
   "16:9": "aspect-video",
   "4:3": "aspect-[4/3]",
@@ -1411,7 +1536,7 @@ var aspectRatioClasses = {
   fill: ""
 };
 var ParticipantTile = React5.memo(function ParticipantTile2({ videoTrack, ...props }) {
-  const videoRef = useRef9(null);
+  const videoRef = useRef8(null);
   const status = useVideoTrack(videoRef, videoTrack, props.participant.isVideoEnabled === true);
   return /* @__PURE__ */ jsx30(ParticipantTileSurface, { ...props, media: /* @__PURE__ */ jsx30("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, className: "h-full w-full object-cover" }), mediaVisible: status === "playing" });
 });
@@ -1440,8 +1565,8 @@ var ParticipantTileSurface = React5.memo(function ParticipantTileSurface2({
 }) {
   const prefersReducedMotion = usePrefersReducedMotion();
   const phone = useMediaQuery("(max-width:640px)");
-  const [optionsOpen, setOptionsOpen] = useState12(false);
-  const returnFocus = useRef9(null);
+  const [optionsOpen, setOptionsOpen] = useState13(false);
+  const returnFocus = useRef8(null);
   const openOptions = () => {
     returnFocus.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
     setOptionsOpen(true);
@@ -1473,9 +1598,9 @@ var ParticipantTileSurface = React5.memo(function ParticipantTileSurface2({
       style,
       dataTour: participant.isLocal ? "local-video" : "video-grid",
       hidden,
-      corner: /* @__PURE__ */ jsxs15(Fragment6, { children: [
-        showStatus && hasPoorConnection ? /* @__PURE__ */ jsx30("span", { role: "img", "aria-label": `${participant.displayName} has a weak connection`, className: "pointer-events-none absolute top-2 left-2 z-30 flex h-6 items-center rounded-[6px] bg-[rgba(12,14,18,.75)] px-[7px]", children: /* @__PURE__ */ jsx30(SignalBars, {}) }) : null,
-        onClick && !phone ? /* @__PURE__ */ jsx30("span", { className: "absolute top-2 right-2 z-30 opacity-0 transition-opacity duration-150 group-hover/tile:opacity-100 focus-within:opacity-100", children: /* @__PURE__ */ jsx30(
+      corner: /* @__PURE__ */ jsxs15(Fragment7, { children: [
+        showStatus && hasPoorConnection ? /* @__PURE__ */ jsx30("span", { role: "img", "data-part": "tile-signal", "aria-label": `${participant.displayName} has a weak connection`, className: "pointer-events-none absolute top-2 left-2 z-30 flex h-6 items-center rounded-[6px] bg-[rgba(12,14,18,.75)] px-[7px]", children: /* @__PURE__ */ jsx30(SignalBars, {}) }) : null,
+        onClick && !phone ? /* @__PURE__ */ jsx30("span", { "data-part": "tile-menu", className: "absolute top-2 right-2 z-30 opacity-0 transition-opacity duration-150 group-hover/tile:opacity-100 focus-within:opacity-100", children: /* @__PURE__ */ jsx30(
           ChalkMenu,
           {
             trigger: /* @__PURE__ */ jsx30("button", { type: "button", "aria-label": `More options for ${participant.displayName}`, className: "grid h-8 w-8 place-items-center rounded-full bg-[rgba(12,14,18,.75)] text-white outline-none hover:bg-[rgba(40,42,48,.95)] focus-visible:ring-2 focus-visible:ring-[var(--chalk-focus)]", children: /* @__PURE__ */ jsx30(StageIcon, { name: "more", size: 18 }) }),
@@ -1483,13 +1608,16 @@ var ParticipantTileSurface = React5.memo(function ParticipantTileSurface2({
           }
         ) }) : null
       ] }),
-      chip: showName || showStatus ? /* @__PURE__ */ jsxs15(Fragment6, { children: [
+      chip: showName || showStatus ? /* @__PURE__ */ jsxs15(Fragment7, { children: [
         pinned && /* @__PURE__ */ jsx30(StageIcon, { name: "pin", size: 14, "aria-label": "Pinned" }),
-        showName && /* @__PURE__ */ jsxs15("span", { dir: "auto", className: "min-w-0 truncate [unicode-bidi:plaintext]", title: participant.displayName, children: [
-          participant.displayName,
-          participant.isLocal && participant.displayName !== "You" && /* @__PURE__ */ jsx30("span", { className: "text-white", children: " (You)" })
+        showName && /* @__PURE__ */ jsxs15(Fragment7, { children: [
+          /* @__PURE__ */ jsxs15("span", { dir: "auto", "data-part": "tile-full-name", className: "min-w-0 truncate [unicode-bidi:plaintext]", title: participant.displayName, children: [
+            participant.displayName,
+            participant.isLocal && participant.displayName !== "You" && /* @__PURE__ */ jsx30("span", { className: "text-white", children: " (You)" })
+          ] }),
+          /* @__PURE__ */ jsx30("span", { dir: "auto", "data-part": "tile-short-name", className: "hidden min-w-0 truncate [unicode-bidi:plaintext]", children: participant.isLocal ? "You" : participant.displayName.split(" ")[0] })
         ] }),
-        following ? /* @__PURE__ */ jsx30("span", { className: "shrink-0 font-semibold opacity-80", children: "following" }) : null,
+        following ? /* @__PURE__ */ jsx30("span", { "data-part": "tile-following", className: "shrink-0 font-semibold opacity-80", children: "following" }) : null,
         showStatus && participant.isMuted && /* @__PURE__ */ jsx30(StageIcon, { name: "mute", size: 14, className: "shrink-0 text-[#ff6b6b]", "aria-label": "Muted" }),
         showStatus && participant.isHandRaised && /* @__PURE__ */ jsxs15("span", { className: "flex shrink-0 items-center text-[#e2bd3a]", role: "img", "aria-label": `Hand raised${participant.handRaiseOrder ? `, number ${participant.handRaiseOrder}` : ""}`, children: [
           /* @__PURE__ */ jsx30(StageIcon, { name: "hand", size: 14 }),
@@ -1560,7 +1688,7 @@ function SignalBars() {
 }
 
 // src/components/atomic/ReactionBubble.tsx
-import React6, { useEffect as useEffect9, useState as useState13, useMemo as useMemo7 } from "react";
+import React6, { useEffect as useEffect9, useState as useState14, useMemo as useMemo7 } from "react";
 import { CELEBRATION_EMOJIS } from "@q9labsai/chalk-ui/reactions";
 import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
 var BASE_PARTICLE_COLORS = ["#14b8a6", "#f59e0b", "#ec4899", "#8b5cf6", "#06b6d4", "#22c55e"];
@@ -1604,7 +1732,7 @@ function getParticleStyle(particle) {
   };
 }
 var ReactionBubble = React6.memo(({ emoji, participantName, onComplete, duration: baseDuration = 3e3, animated = true, className }) => {
-  const [isVisible, setIsVisible] = useState13(true);
+  const [isVisible, setIsVisible] = useState14(true);
   const prefersReducedMotion = usePrefersReducedMotion();
   const participantColors = useMemo7(() => getParticipantColor(participantName || "unknown"), [participantName]);
   const isCelebration = CELEBRATION_EMOJIS.includes(emoji);
@@ -1681,7 +1809,7 @@ var VolumeSlider = React7.memo(({ value, onChange, muted = false, onMuteToggle,
 VolumeSlider.displayName = "VolumeSlider";
 
 // src/components/admission-panel/AdmissionPanel.tsx
-import { Fragment as Fragment7, jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
 var TEXT_BUTTON_CLASS = "inline-flex h-7 items-center rounded-[6px] px-2 text-xs font-semibold text-[var(--chalk-app-text-muted)] transition-colors hover:bg-[var(--chalk-app-control-hover)] hover:text-[var(--chalk-app-text)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--chalk-app-control-active-line)]";
 var ADMIT_BUTTON_CLASS = "inline-flex h-8 items-center rounded-[7px] border border-transparent bg-[var(--chalk-app-control-active)] px-3 text-[13px] font-semibold text-[var(--chalk-app-control-active-text)] transition-colors hover:border-[var(--chalk-app-control-active-line)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--chalk-app-control-active-line)]";
 var DENY_BUTTON_CLASS = "inline-flex h-8 items-center rounded-[7px] px-2.5 text-[13px] font-semibold text-[var(--chalk-app-text-muted)] transition-colors hover:bg-[var(--chalk-app-control-hover)] hover:text-[var(--chalk-app-danger)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--chalk-app-control-active-line)]";
@@ -1692,13 +1820,13 @@ function getWaitingLabel(joinedAt) {
   return `Waiting ${minutes} min`;
 }
 var AdmissionPanelSurface = React8.memo(({ participants, onAdmit, onDeny, onAdmitAll, onDenyAll, loading = false, className, onClose, inline = false }) => {
-  const [, setTick] = useState14(0);
+  const [, setTick] = useState15(0);
   useEffect10(() => {
     const timer = window.setInterval(() => setTick((t) => t + 1), 6e4);
     return () => window.clearInterval(timer);
   }, []);
-  const [busy, setBusy] = useState14(false);
-  const [error, setError] = useState14(null);
+  const [busy, setBusy] = useState15(false);
+  const [error, setError] = useState15(null);
   const perform = async (action) => {
     if (busy) return;
     setBusy(true);
@@ -1712,7 +1840,7 @@ var AdmissionPanelSurface = React8.memo(({ participants, onAdmit, onDeny, onAdmi
     }
   };
   const pending = participants.length;
-  const list = /* @__PURE__ */ jsxs18(Fragment7, { children: [
+  const list = /* @__PURE__ */ jsxs18(Fragment8, { children: [
     error ? /* @__PURE__ */ jsx33("p", { role: "alert", className: "text-sm text-[var(--chalk-danger-text)]", children: error }) : null,
     pending > 0 ? /* @__PURE__ */ jsxs18("div", { className: "flex h-9 items-center justify-between gap-2", children: [
       /* @__PURE__ */ jsx33("span", { className: "text-xs font-semibold uppercase tracking-[0.08em] text-[var(--chalk-app-text-muted)]", "aria-live": "polite", children: pending === 1 ? "1 waiting" : `${pending} waiting` }),
@@ -1771,7 +1899,7 @@ AdmissionPanel.displayName = "AdmissionPanel";
 
 // src/components/composite/ChatPanel.tsx
 import { CHALK_CHAT_ATTACHMENT_LIMITS, CHALK_CHAT_ATTACHMENT_MIME_TYPES } from "@q9labsai/chalk-client";
-import React10, { useEffect as useEffect13, useLayoutEffect, useMemo as useMemo8, useRef as useRef12, useState as useState17 } from "react";
+import React10, { useEffect as useEffect13, useLayoutEffect, useMemo as useMemo8, useRef as useRef11, useState as useState18 } from "react";
 import { Button } from "@q9labsai/chalk-ui";
 
 // src/components/call-card/CallCardStyles.tsx
@@ -2634,21 +2762,21 @@ function CallCardStyles() {
 
 // src/components/composite/MessageBubble.tsx
 import { CHALK_REACTIONS } from "@q9labsai/chalk-client";
-import React9, { useEffect as useEffect12, useRef as useRef11, useState as useState16 } from "react";
+import React9, { useEffect as useEffect12, useRef as useRef10, useState as useState17 } from "react";
 
 // src/components/composite/use-chat-attachment-previews.ts
-import { useCallback as useCallback4, useEffect as useEffect11, useRef as useRef10, useState as useState15 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect11, useRef as useRef9, useState as useState16 } from "react";
 function useChatAttachmentPreviews(attachments, resolveUrl) {
-  const [resolvedUrls, setResolvedUrls] = useState15(() => /* @__PURE__ */ new Map());
-  const [failedAttachmentIds, setFailedAttachmentIds] = useState15(() => /* @__PURE__ */ new Set());
-  const [retryGeneration, setRetryGeneration] = useState15(0);
-  const resolvingAttachmentIds = useRef10(/* @__PURE__ */ new Set());
-  const resolvedUrlsRef = useRef10(resolvedUrls);
-  const failedAttachmentIdsRef = useRef10(failedAttachmentIds);
+  const [resolvedUrls, setResolvedUrls] = useState16(() => /* @__PURE__ */ new Map());
+  const [failedAttachmentIds, setFailedAttachmentIds] = useState16(() => /* @__PURE__ */ new Set());
+  const [retryGeneration, setRetryGeneration] = useState16(0);
+  const resolvingAttachmentIds = useRef9(/* @__PURE__ */ new Set());
+  const resolvedUrlsRef = useRef9(resolvedUrls);
+  const failedAttachmentIdsRef = useRef9(failedAttachmentIds);
   const currentAttachmentIds = new Set(attachments.map((attachment) => attachment.attachmentId));
   const currentImageIds = new Set(attachments.filter((attachment) => attachment.mimeType.startsWith("image/")).map((attachment) => attachment.attachmentId));
-  const currentAttachmentIdsRef = useRef10(currentAttachmentIds);
-  const currentImageIdsRef = useRef10(currentImageIds);
+  const currentAttachmentIdsRef = useRef9(currentAttachmentIds);
+  const currentImageIdsRef = useRef9(currentImageIds);
   resolvedUrlsRef.current = resolvedUrls;
   failedAttachmentIdsRef.current = failedAttachmentIds;
   currentAttachmentIdsRef.current = currentAttachmentIds;
@@ -2697,7 +2825,7 @@ function useChatAttachmentPreviews(attachments, resolveUrl) {
 }
 
 // src/components/composite/MessageBubble.tsx
-import { Fragment as Fragment8, jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
 var MessageBubble = React9.memo(
   ({
     content,
@@ -2724,11 +2852,11 @@ var MessageBubble = React9.memo(
     className
   }) => {
     const { resolvedUrls, failedAttachmentIds, markFailed, retry } = useChatAttachmentPreviews(attachments, onResolveAttachmentUrl);
-    const [reactionError, setReactionError] = useState16(null);
-    const [reacting, setReacting] = useState16(false);
-    const [reactionBarOpen, setReactionBarOpen] = useState16(false);
-    const messageRef = useRef11(null);
-    const press = useRef11(null);
+    const [reactionError, setReactionError] = useState17(null);
+    const [reacting, setReacting] = useState17(false);
+    const [reactionBarOpen, setReactionBarOpen] = useState17(false);
+    const messageRef = useRef10(null);
+    const press = useRef10(null);
     const cancelPress = () => {
       if (press.current) clearTimeout(press.current.timer);
       press.current = null;
@@ -2743,10 +2871,10 @@ var MessageBubble = React9.memo(
       document.addEventListener("pointerdown", dismiss);
       return () => document.removeEventListener("pointerdown", dismiss);
     }, [reactionBarOpen]);
-    const [photo, setPhoto] = useState16(null);
-    const [downloading, setDownloading] = useState16(false);
-    const [downloadError, setDownloadError] = useState16(null);
-    const downloadController = useRef11(null);
+    const [photo, setPhoto] = useState17(null);
+    const [downloading, setDownloading] = useState17(false);
+    const [downloadError, setDownloadError] = useState17(null);
+    const downloadController = useRef10(null);
     useEffect12(() => () => downloadController.current?.abort(), []);
     const downloadPhoto = async () => {
       if (!photo || downloading) return;
@@ -2777,8 +2905,8 @@ var MessageBubble = React9.memo(
         downloadController.current = null;
       }
     };
-    const [photoClosing, setPhotoClosing] = useState16(false);
-    const closeTimer = useRef11(null);
+    const [photoClosing, setPhotoClosing] = useState17(false);
+    const closeTimer = useRef10(null);
     useEffect12(
       () => () => {
         if (closeTimer.current) clearTimeout(closeTimer.current);
@@ -2801,7 +2929,7 @@ var MessageBubble = React9.memo(
     const changePhoto = (step) => {
       if (photos.length > 1) setPhoto(photos[(photoIndex + step + photos.length) % photos.length]);
     };
-    const viewer = useRef11(null);
+    const viewer = useRef10(null);
     const react = async (emoji) => {
       if (!onReact || reacting) return;
       setReactionBarOpen(false);
@@ -2996,7 +3124,7 @@ var MessageBubble = React9.memo(
                 },
                 children: [
                   photo ? /* @__PURE__ */ jsx35("img", { src: resolvedUrls.get(photo.attachmentId), alt: photo.fileName }) : null,
-                  photos.length > 1 ? /* @__PURE__ */ jsxs19(Fragment8, { children: [
+                  photos.length > 1 ? /* @__PURE__ */ jsxs19(Fragment9, { children: [
                     /* @__PURE__ */ jsx35("button", { type: "button", className: "call-photo-viewer-control call-photo-previous", "aria-label": "Previous image", onClick: () => changePhoto(-1), children: /* @__PURE__ */ jsx35(ArrowLeft01Icon, {}) }),
                     /* @__PURE__ */ jsx35("button", { type: "button", className: "call-photo-viewer-control call-photo-next", "aria-label": "Next image", onClick: () => changePhoto(1), children: /* @__PURE__ */ jsx35(ArrowRight01Icon, {}) })
                   ] }) : null
@@ -3099,7 +3227,7 @@ function describeChatUploadFile(file) {
 }
 
 // src/components/composite/ChatPanel.tsx
-import { Fragment as Fragment9, jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
 var ChatPanelPresentation = React10.memo((props) => {
   return /* @__PURE__ */ jsx36(ChatPanelSurface, { ...props });
 });
@@ -3133,12 +3261,12 @@ var ChatPanelSurface = React10.memo(
     autoScrollBehavior,
     className
   }) => {
-    const [draft, setDraft] = useState17("");
-    const [stagedFiles, setStagedFiles] = useState17([]);
-    const uploads = useRef12(/* @__PURE__ */ new Map());
-    const [failedUploads, setFailedUploads] = useState17(/* @__PURE__ */ new Set());
-    const [uploading, setUploading] = useState17(/* @__PURE__ */ new Set());
-    const [previews, setPreviews] = useState17(/* @__PURE__ */ new Map());
+    const [draft, setDraft] = useState18("");
+    const [stagedFiles, setStagedFiles] = useState18([]);
+    const uploads = useRef11(/* @__PURE__ */ new Map());
+    const [failedUploads, setFailedUploads] = useState18(/* @__PURE__ */ new Set());
+    const [uploading, setUploading] = useState18(/* @__PURE__ */ new Set());
+    const [previews, setPreviews] = useState18(/* @__PURE__ */ new Map());
     useEffect13(() => {
       const urls = new Map(stagedFiles.flatMap((file) => file instanceof File && file.type.startsWith("image/") ? [[file, URL.createObjectURL(file)]] : []));
       setPreviews(urls);
@@ -3146,15 +3274,15 @@ var ChatPanelSurface = React10.memo(
         for (const url of urls.values()) URL.revokeObjectURL(url);
       };
     }, [stagedFiles]);
-    const [sending, setSending] = useState17(false);
-    const [pickingFiles, setPickingFiles] = useState17(false);
-    const [composerError, setComposerError] = useState17(null);
-    const scrollRef = useRef12(null);
-    const textareaRef = useRef12(null);
-    const fileInputRef = useRef12(null);
-    const isAtBottomRef = useRef12(true);
-    const lastMarkedSequenceRef = useRef12(localReadThroughSequence);
-    const restoreScrollRef = useRef12(null);
+    const [sending, setSending] = useState18(false);
+    const [pickingFiles, setPickingFiles] = useState18(false);
+    const [composerError, setComposerError] = useState18(null);
+    const scrollRef = useRef11(null);
+    const textareaRef = useRef11(null);
+    const fileInputRef = useRef11(null);
+    const isAtBottomRef = useRef11(true);
+    const lastMarkedSequenceRef = useRef11(localReadThroughSequence);
+    const restoreScrollRef = useRef11(null);
     const grouped = useMemo8(() => groupChatMessages(messages), [messages]);
     const latestSequence = messages.at(-1)?.sequence;
     useLayoutEffect(() => {
@@ -3398,7 +3526,7 @@ var ChatPanelSurface = React10.memo(
         /* @__PURE__ */ jsx36("button", { type: "button", disabled: sending || pickingFiles, "aria-label": `Remove ${describeChatUploadFile(file).fileName}`, onClick: () => removeFile(file), children: /* @__PURE__ */ jsx36(Cancel01Icon, { className: "h-3.5 w-3.5" }) })
       ] }, `${describeChatUploadFile(file).fileName}-${describeChatUploadFile(file).byteLength}-${index}`)) }) : null,
       /* @__PURE__ */ jsx36("div", { className: "call-composer", children: /* @__PURE__ */ jsxs20("div", { className: "call-composer-field", children: [
-        onUploadAttachment ? /* @__PURE__ */ jsxs20(Fragment9, { children: [
+        onUploadAttachment ? /* @__PURE__ */ jsxs20(Fragment10, { children: [
           !pickChatFiles ? /* @__PURE__ */ jsx36("input", { ref: fileInputRef, type: "file", multiple: true, className: "sr-only", "aria-label": "Choose attachments", accept: CHALK_CHAT_ATTACHMENT_MIME_TYPES.join(","), onChange: (event) => selectFiles(event.target.files) }) : null,
           /* @__PURE__ */ jsx36(Button, { type: "button", variant: "ghost", size: "icon", className: "call-attach-button", disabled: disabled || sending || pickingFiles || stagedFiles.length >= CHALK_CHAT_ATTACHMENT_LIMITS.maximumPerMessage, onClick: () => void chooseFiles(), "aria-label": "Attach files", children: /* @__PURE__ */ jsx36("svg", { className: "size-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx36("path", { d: "M20.5 11.2l-8.4 8.4a5 5 0 0 1-7.1-7.1l8.4-8.4a3.3 3.3 0 0 1 4.7 4.7l-8.4 8.4a1.7 1.7 0 0 1-2.4-2.4l7.7-7.7" }) }) })
         ] }) : null,
@@ -3464,7 +3592,7 @@ var ChatPanel = React10.memo((props) => {
 ChatPanel.displayName = "ChatPanel";
 
 // src/components/composite/ReactionsOverlay.tsx
-import { useEffect as useEffect14, useRef as useRef13, useState as useState18 } from "react";
+import { useEffect as useEffect14, useRef as useRef12, useState as useState19 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/composite/reaction-float.ts
@@ -3495,7 +3623,7 @@ function reactionPresentationStyle(eventId, progress) {
 }
 
 // src/components/composite/ReactionsOverlay.tsx
-import { Fragment as Fragment10, jsx as jsx37, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx37, jsxs as jsxs21 } from "react/jsx-runtime";
 function ReactionsOverlayPresentation({ reactions, elapsedMs, maxVisible = 6, className }) {
   return /* @__PURE__ */ jsx37("div", { className: cn("pointer-events-none absolute inset-0 z-30 overflow-hidden", className), "aria-live": "off", children: reactions.slice(-maxVisible).map((reaction) => {
     const duration = Math.max(1, reaction.expiresAtMs - reaction.occurredAtMs);
@@ -3504,12 +3632,12 @@ function ReactionsOverlayPresentation({ reactions, elapsedMs, maxVisible = 6, cl
   }) });
 }
 function ReactionsOverlaySurface({ reactions, maxVisible = 6, className }) {
-  const root = useRef13(null);
+  const root = useRef12(null);
   return /* @__PURE__ */ jsx37("div", { ref: root, className: cn("pointer-events-none absolute inset-0 z-30", className), "aria-live": "polite", "aria-atomic": "false", children: reactions.slice(-maxVisible).map((reaction) => /* @__PURE__ */ jsx37(TileReaction, { reaction, root }, reaction.eventId)) });
 }
 function TileReaction({ reaction, root }) {
-  const [host, setHost] = useState18(null);
-  const emoji = useRef13(null);
+  const [host, setHost] = useState19(null);
+  const emoji = useRef12(null);
   const reduced = usePrefersReducedMotion();
   useEffect14(() => {
     const frame = root.current?.closest("[data-part=call-frame]");
@@ -3529,7 +3657,7 @@ function TileReaction({ reaction, root }) {
     );
     return () => animation.cancel();
   }, [host, reduced]);
-  return /* @__PURE__ */ jsxs21(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs21(Fragment11, { children: [
     /* @__PURE__ */ jsxs21("span", { className: "sr-only", children: [
       reaction.displayName,
       " reacted ",
@@ -3554,68 +3682,68 @@ function CommandErrorAlert({ message }) {
 }
 
 // src/components/control-bar/ControlBar.tsx
-import React12, { useEffect as useEffect17, useRef as useRef15, useState as useState23 } from "react";
+import React12, { useEffect as useEffect17, useRef as useRef14, useState as useState24 } from "react";
 
 // src/components/device-popover/DevicePopover.tsx
 import { Menu as Menu2 } from "@base-ui/react/menu";
-import { useEffect as useEffect15, useRef as useRef14, useState as useState19 } from "react";
+import { useEffect as useEffect15, useRef as useRef13, useState as useState20 } from "react";
 
 // src/components/control-bar/ShellIcon.tsx
-import { Fragment as Fragment11, jsx as jsx39, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx39, jsxs as jsxs22 } from "react/jsx-runtime";
 var GLYPHS = {
-  flip: /* @__PURE__ */ jsxs22(Fragment11, { children: [
+  flip: /* @__PURE__ */ jsxs22(Fragment12, { children: [
     /* @__PURE__ */ jsx39("path", { d: "M3 8h3l2-3h8l2 3h3v12H3z" }),
     /* @__PURE__ */ jsx39("path", { d: "M8 14a4 4 0 0 1 7-2l1 1M16 10v3h-3M16 15a4 4 0 0 1-7 2l-1-1M8 19v-3h3" })
   ] }),
-  mic: /* @__PURE__ */ jsxs22(Fragment11, { children: [
+  mic: /* @__PURE__ */ jsxs22(Fragment12, { children: [
     /* @__PURE__ */ jsx39("rect", { x: "9", y: "2", width: "6", height: "12", rx: "3" }),
     /* @__PURE__ */ jsx39("path", { d: "M19 10v1a7 7 0 0 1-14 0v-1M12 18v4" })
   ] }),
-  micOff: /* @__PURE__ */ jsx39(Fragment11, { children: /* @__PURE__ */ jsx39("path", { d: "M2 2l20 20M15 9.3V5a3 3 0 0 0-5.7-1.3M9 9v2a3 3 0 0 0 5.1 2.1M17 17a7 7 0 0 1-12-6v-1M19 10v1a7 7 0 0 1-.1 1.2M12 18v4" }) }),
-  cam: /* @__PURE__ */ jsxs22(Fragment11, { children: [
+  micOff: /* @__PURE__ */ jsx39(Fragment12, { children: /* @__PURE__ */ jsx39("path", { d: "M2 2l20 20M15 9.3V5a3 3 0 0 0-5.7-1.3M9 9v2a3 3 0 0 0 5.1 2.1M17 17a7 7 0 0 1-12-6v-1M19 10v1a7 7 0 0 1-.1 1.2M12 18v4" }) }),
+  cam: /* @__PURE__ */ jsxs22(Fragment12, { children: [
     /* @__PURE__ */ jsx39("path", { d: "M16 10.5l5-3v9l-5-3z" }),
     /* @__PURE__ */ jsx39("rect", { x: "2", y: "6", width: "14", height: "12", rx: "2" })
   ] }),
-  camOff: /* @__PURE__ */ jsx39(Fragment11, { children: /* @__PURE__ */ jsx39("path", { d: "M2 2l20 20M10.7 6H14a2 2 0 0 1 2 2v3.3l1 1 4-2.8v8M16 16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2" }) }),
-  hang: /* @__PURE__ */ jsx39(Fragment11, { children: /* @__PURE__ */ jsx39("path", { transform: "rotate(135 12 12)", d: "M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z" }) }),
-  down: /* @__PURE__ */ jsx39(Fragment11, { children: /* @__PURE__ */ jsx39("path", { d: "M6 9l6 6 6-6" }) }),
-  up2: /* @__PURE__ */ jsx39(Fragment11, { children: /* @__PURE__ */ jsx39("path", { d: "M18 15l-6-6-6 6" }) }),
-  right: /* @__PURE__ */ jsx39(Fragment11, { children: /* @__PURE__ */ jsx39("path", { d: "M9 18l6-6-6-6" }) }),
-  grid: /* @__PURE__ */ jsxs22(Fragment11, { children: [
+  camOff: /* @__PURE__ */ jsx39(Fragment12, { children: /* @__PURE__ */ jsx39("path", { d: "M2 2l20 20M10.7 6H14a2 2 0 0 1 2 2v3.3l1 1 4-2.8v8M16 16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2" }) }),
+  hang: /* @__PURE__ */ jsx39(Fragment12, { children: /* @__PURE__ */ jsx39("path", { transform: "rotate(135 12 12)", d: "M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z" }) }),
+  down: /* @__PURE__ */ jsx39(Fragment12, { children: /* @__PURE__ */ jsx39("path", { d: "M6 9l6 6 6-6" }) }),
+  up2: /* @__PURE__ */ jsx39(Fragment12, { children: /* @__PURE__ */ jsx39("path", { d: "M18 15l-6-6-6 6" }) }),
+  right: /* @__PURE__ */ jsx39(Fragment12, { children: /* @__PURE__ */ jsx39("path", { d: "M9 18l6-6-6-6" }) }),
+  grid: /* @__PURE__ */ jsxs22(Fragment12, { children: [
     /* @__PURE__ */ jsx39("rect", { x: "3", y: "3", width: "7.5", height: "7.5", rx: "1.5" }),
     /* @__PURE__ */ jsx39("rect", { x: "13.5", y: "3", width: "7.5", height: "7.5", rx: "1.5" }),
     /* @__PURE__ */ jsx39("rect", { x: "3", y: "13.5", width: "7.5", height: "7.5", rx: "1.5" }),
     /* @__PURE__ */ jsx39("rect", { x: "13.5", y: "13.5", width: "7.5", height: "7.5", rx: "1.5" })
   ] }),
-  spot: /* @__PURE__ */ jsxs22(Fragment11, { children: [
+  spot: /* @__PURE__ */ jsxs22(Fragment12, { children: [
     /* @__PURE__ */ jsx39("rect", { x: "3", y: "3", width: "18", height: "12.5", rx: "2" }),
     /* @__PURE__ */ jsx39("path", { d: "M4 20.5h3M10.5 20.5h3M17 20.5h3" })
   ] }),
-  smile: /* @__PURE__ */ jsxs22(Fragment11, { children: [
+  smile: /* @__PURE__ */ jsxs22(Fragment12, { children: [
     /* @__PURE__ */ jsx39("circle", { cx: "12", cy: "12", r: "9" }),
     /* @__PURE__ */ jsx39("path", { d: "M8.5 14.5s1.3 1.8 3.5 1.8 3.5-1.8 3.5-1.8M9 9.5h.01M15 9.5h.01" })
   ] }),
-  pen: /* @__PURE__ */ jsxs22(Fragment11, { children: [
+  pen: /* @__PURE__ */ jsxs22(Fragment12, { children: [
     /* @__PURE__ */ jsx39("path", { d: "M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5z" }),
     /* @__PURE__ */ jsx39("path", { d: "M15 5l4 4" })
   ] }),
-  rec: /* @__PURE__ */ jsxs22(Fragment11, { children: [
+  rec: /* @__PURE__ */ jsxs22(Fragment12, { children: [
     /* @__PURE__ */ jsx39("circle", { cx: "12", cy: "12", r: "9" }),
     /* @__PURE__ */ jsx39("circle", { cx: "12", cy: "12", r: "3.5", fill: "currentColor" })
   ] }),
-  max: /* @__PURE__ */ jsx39(Fragment11, { children: /* @__PURE__ */ jsx39("path", { d: "M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3" }) }),
-  min: /* @__PURE__ */ jsx39(Fragment11, { children: /* @__PURE__ */ jsx39("path", { d: "M8 3v3a2 2 0 0 1-2 2H3M21 8h-3a2 2 0 0 1-2-2V3M3 16h3a2 2 0 0 1 2 2v3M16 21v-3a2 2 0 0 1 2-2h3" }) }),
-  chat: /* @__PURE__ */ jsx39(Fragment11, { children: /* @__PURE__ */ jsx39("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22z" }) }),
-  users: /* @__PURE__ */ jsxs22(Fragment11, { children: [
+  max: /* @__PURE__ */ jsx39(Fragment12, { children: /* @__PURE__ */ jsx39("path", { d: "M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3" }) }),
+  min: /* @__PURE__ */ jsx39(Fragment12, { children: /* @__PURE__ */ jsx39("path", { d: "M8 3v3a2 2 0 0 1-2 2H3M21 8h-3a2 2 0 0 1-2-2V3M3 16h3a2 2 0 0 1 2 2v3M16 21v-3a2 2 0 0 1 2-2h3" }) }),
+  chat: /* @__PURE__ */ jsx39(Fragment12, { children: /* @__PURE__ */ jsx39("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22z" }) }),
+  users: /* @__PURE__ */ jsxs22(Fragment12, { children: [
     /* @__PURE__ */ jsx39("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }),
     /* @__PURE__ */ jsx39("circle", { cx: "9", cy: "7", r: "4" }),
     /* @__PURE__ */ jsx39("path", { d: "M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8" })
   ] }),
-  share: /* @__PURE__ */ jsxs22(Fragment11, { children: [
+  share: /* @__PURE__ */ jsxs22(Fragment12, { children: [
     /* @__PURE__ */ jsx39("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2" }),
     /* @__PURE__ */ jsx39("path", { d: "M8 21h8M12 17v4M9 10l3-3 3 3M12 7v6" })
   ] }),
-  shareOff: /* @__PURE__ */ jsxs22(Fragment11, { children: [
+  shareOff: /* @__PURE__ */ jsxs22(Fragment12, { children: [
     /* @__PURE__ */ jsx39("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2" }),
     /* @__PURE__ */ jsx39("path", { d: "M8 21h8M12 17v4M9.5 7.5l5 5M14.5 7.5l-5 5" })
   ] })
@@ -4215,9 +4343,9 @@ var CALL_SHELL_CSS = `.chalk-shell-dock {
 `;
 
 // src/components/device-popover/DevicePopover.tsx
-import { Fragment as Fragment12, jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
 function InputLevel({ track }) {
-  const [level, setLevel] = useState19(0);
+  const [level, setLevel] = useState20(0);
   useEffect15(() => {
     if (!track || track.readyState !== "live") return;
     const context = new AudioContext();
@@ -4240,8 +4368,8 @@ function InputLevel({ track }) {
   return /* @__PURE__ */ jsx41("span", { className: "chalk-shell-level", role: "meter", "aria-label": "Input level", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": level, children: /* @__PURE__ */ jsx41("i", { style: { transform: `scaleX(${level / 100})` } }) });
 }
 function CameraPreview({ track, mirrored, open, selectedDeviceId, captureCameraPreview }) {
-  const video = useRef14(null);
-  const [unavailable, setUnavailable] = useState19(false);
+  const video = useRef13(null);
+  const [unavailable2, setUnavailable] = useState20(false);
   const trackEnabled = track?.enabled;
   useEffect15(() => {
     const element = video.current;
@@ -4276,7 +4404,7 @@ function CameraPreview({ track, mirrored, open, selectedDeviceId, captureCameraP
   }, [track, trackEnabled, open, selectedDeviceId, captureCameraPreview]);
   return /* @__PURE__ */ jsxs23("div", { className: "chalk-shell-preview", children: [
     /* @__PURE__ */ jsx41("video", { ref: video, autoPlay: true, muted: true, playsInline: true, style: { transform: mirrored ? "scaleX(-1)" : void 0 } }),
-    /* @__PURE__ */ jsx41("small", { children: unavailable ? "Camera preview unavailable. Check camera access." : "Only you see this preview" })
+    /* @__PURE__ */ jsx41("small", { children: unavailable2 ? "Camera preview unavailable. Check camera access." : "Only you see this preview" })
   ] });
 }
 function DeviceSwitch({ label, checked, onChange }) {
@@ -4310,7 +4438,7 @@ function DevicePopover({
   toggleDisabled,
   busy
 }) {
-  const [open, setOpen] = useState19(false);
+  const [open, setOpen] = useState20(false);
   const mic = type === "mic";
   const label = mic ? isActive ? "Mute microphone" : "Unmute microphone" : isActive ? "Turn off camera" : "Turn on camera";
   return /* @__PURE__ */ jsxs23("div", { "data-part": `${type}-split`, className: cn("chalk-shell-split", className), "data-off": !isActive, children: [
@@ -4332,20 +4460,20 @@ function DevicePopover({
         children: [
           !mic ? /* @__PURE__ */ jsx41(CameraPreview, { track, mirrored, open, selectedDeviceId, captureCameraPreview }) : null,
           /* @__PURE__ */ jsx41(ChalkMenuLabel, { children: mic ? "Microphone" : "Camera" }),
-          devices.length ? devices.map((device) => /* @__PURE__ */ jsx41(ChalkMenuItem, { checked: selectedDeviceId === device.deviceId, onClick: () => onDeviceChange(device.deviceId), closeOnClick: false, children: /* @__PURE__ */ jsxs23("span", { className: "chalk-shell-device-label", children: [
-            device.label || (mic ? "Microphone" : "Camera"),
-            mic && selectedDeviceId === device.deviceId ? /* @__PURE__ */ jsx41(InputLevel, { track }) : null
-          ] }) }, device.deviceId)) : /* @__PURE__ */ jsx41(ChalkMenuItem, { disabled: true, children: "No devices found" }),
-          mic ? /* @__PURE__ */ jsxs23(Fragment12, { children: [
+          devices.length ? devices.map((device2) => /* @__PURE__ */ jsx41(ChalkMenuItem, { checked: selectedDeviceId === device2.deviceId, onClick: () => onDeviceChange(device2.deviceId), closeOnClick: false, children: /* @__PURE__ */ jsxs23("span", { className: "chalk-shell-device-label", children: [
+            device2.label || (mic ? "Microphone" : "Camera"),
+            mic && selectedDeviceId === device2.deviceId ? /* @__PURE__ */ jsx41(InputLevel, { track }) : null
+          ] }) }, device2.deviceId)) : /* @__PURE__ */ jsx41(ChalkMenuItem, { disabled: true, children: "No devices found" }),
+          mic ? /* @__PURE__ */ jsxs23(Fragment13, { children: [
             /* @__PURE__ */ jsx41(DeviceSwitch, { label: "Noise suppression", checked: noiseSuppression, onChange: onNoiseSuppressionChange }),
             /* @__PURE__ */ jsx41(Menu2.Separator, { className: "chalk-shell-menu-separator" }),
             /* @__PURE__ */ jsx41(ChalkMenuLabel, { children: "Speaker" }),
-            secondaryDevices?.map((device) => /* @__PURE__ */ jsx41(ChalkMenuItem, { checked: selectedSecondaryDeviceId === device.deviceId, onClick: () => onSecondaryDeviceChange?.(device.deviceId), closeOnClick: false, children: device.label || "Speaker" }, device.deviceId)),
+            secondaryDevices?.map((device2) => /* @__PURE__ */ jsx41(ChalkMenuItem, { checked: selectedSecondaryDeviceId === device2.deviceId, onClick: () => onSecondaryDeviceChange?.(device2.deviceId), closeOnClick: false, children: device2.label || "Speaker" }, device2.deviceId)),
             /* @__PURE__ */ jsxs23(ChalkMenuItem, { disabled: !onTestSpeaker, onClick: onTestSpeaker, closeOnClick: false, children: [
               /* @__PURE__ */ jsx41(VolumeHighIcon, {}),
               "Test speaker"
             ] })
-          ] }) : /* @__PURE__ */ jsxs23(Fragment12, { children: [
+          ] }) : /* @__PURE__ */ jsxs23(Fragment13, { children: [
             /* @__PURE__ */ jsx41(Menu2.Separator, { className: "chalk-shell-menu-separator" }),
             /* @__PURE__ */ jsx41(DeviceSwitch, { label: "Mirror my video", checked: mirrored, onChange: onMirrorChange })
           ] })
@@ -4378,11 +4506,11 @@ function LeaveMenu({ onLeave, onEndForEveryone, renderButton }) {
 }
 
 // src/components/control-bar/DockLayout.tsx
-import { useState as useState20 } from "react";
-import { Fragment as Fragment13, jsx as jsx44, jsxs as jsxs26 } from "react/jsx-runtime";
+import { useState as useState21 } from "react";
+import { Fragment as Fragment14, jsx as jsx44, jsxs as jsxs26 } from "react/jsx-runtime";
 function DockLayout({ layout, onLayoutChange, children }) {
-  const [open, setOpen] = useState20(false);
-  return /* @__PURE__ */ jsxs26(Fragment13, { children: [
+  const [open, setOpen] = useState21(false);
+  return /* @__PURE__ */ jsxs26(Fragment14, { children: [
     /* @__PURE__ */ jsx44(ChalkIconButton, { size: "lg", "aria-label": "More options", "aria-haspopup": "dialog", "aria-expanded": open, onClick: () => setOpen(true), children: /* @__PURE__ */ jsx44("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx44("path", { "data-part": "dock-more-glyph", d: "M5 12h.01M12 12h.01M19 12h.01", strokeWidth: "3" }) }) }),
     /* @__PURE__ */ jsx44(ChalkSheet, { title: "More options", open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs26(
       "div",
@@ -4423,25 +4551,25 @@ function DockLayout({ layout, onLayoutChange, children }) {
 
 // src/components/control-bar/ShareControl.tsx
 import { Menu as Menu4 } from "@base-ui/react/menu";
-import { useState as useState21 } from "react";
-import { Fragment as Fragment14, jsx as jsx45, jsxs as jsxs27 } from "react/jsx-runtime";
+import { useState as useState22 } from "react";
+import { Fragment as Fragment15, jsx as jsx45, jsxs as jsxs27 } from "react/jsx-runtime";
 function SourceIcon({ source }) {
-  return /* @__PURE__ */ jsx45("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: source === "monitor" ? /* @__PURE__ */ jsxs27(Fragment14, { children: [
+  return /* @__PURE__ */ jsx45("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: source === "monitor" ? /* @__PURE__ */ jsxs27(Fragment15, { children: [
     /* @__PURE__ */ jsx45("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2" }),
     /* @__PURE__ */ jsx45("path", { d: "M8 21h8M12 17v4" })
-  ] }) : source === "window" ? /* @__PURE__ */ jsxs27(Fragment14, { children: [
+  ] }) : source === "window" ? /* @__PURE__ */ jsxs27(Fragment15, { children: [
     /* @__PURE__ */ jsx45("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2" }),
     /* @__PURE__ */ jsx45("path", { d: "M3 9h18M6.5 6.5h.01M9 6.5h.01" })
-  ] }) : /* @__PURE__ */ jsxs27(Fragment14, { children: [
+  ] }) : /* @__PURE__ */ jsxs27(Fragment15, { children: [
     /* @__PURE__ */ jsx45("path", { d: "M3 20V7a2 2 0 0 1 2-2h5l2 3h7a2 2 0 0 1 2 2v10z" }),
     /* @__PURE__ */ jsx45("path", { d: "M3 11h18" })
   ] }) });
 }
 function ShareControl({ sharing, onToggle, onStart, disabled = false, startDisabled = false }) {
-  const [surface, setSurface] = useState21("window");
-  const [audio, setAudio] = useState21(true);
-  const [replace, setReplace] = useState21(false);
-  const start = (next) => {
+  const [surface, setSurface] = useState22("window");
+  const [audio, setAudio] = useState22(true);
+  const [replace, setReplace] = useState22(false);
+  const start2 = (next) => {
     if (disabled || startDisabled) return;
     setSurface(next);
     setReplace(false);
@@ -4451,7 +4579,7 @@ function ShareControl({ sharing, onToggle, onStart, disabled = false, startDisab
     /* @__PURE__ */ jsx45(
       ChalkTooltip,
       {
-        trigger: /* @__PURE__ */ jsx45("button", { type: "button", className: "chalk-shell-main", disabled, "aria-label": sharing ? "Stop sharing" : "Share screen", "aria-pressed": sharing, onClick: () => sharing || !onStart ? onToggle?.() : start(surface), children: /* @__PURE__ */ jsx45(ShellIcon, { name: sharing ? "shareOff" : "share" }) }),
+        trigger: /* @__PURE__ */ jsx45("button", { type: "button", className: "chalk-shell-main", disabled, "aria-label": sharing ? "Stop sharing" : "Share screen", "aria-pressed": sharing, onClick: () => sharing || !onStart ? onToggle?.() : start2(surface), children: /* @__PURE__ */ jsx45(ShellIcon, { name: sharing ? "shareOff" : "share" }) }),
         children: sharing ? "Stop sharing" : "Share screen"
       }
     ),
@@ -4461,16 +4589,16 @@ function ShareControl({ sharing, onToggle, onStart, disabled = false, startDisab
         side: "top",
         className: "chalk-device-menu",
         trigger: /* @__PURE__ */ jsx45("button", { type: "button", className: "chalk-shell-caret", disabled: disabled || startDisabled, "aria-label": "Share options", children: /* @__PURE__ */ jsx45(ShellIcon, { name: "down" }) }),
-        children: sharing && !replace ? /* @__PURE__ */ jsxs27(Fragment14, { children: [
+        children: sharing && !replace ? /* @__PURE__ */ jsxs27(Fragment15, { children: [
           /* @__PURE__ */ jsx45(ChalkMenuLabel, { children: "Sharing your screen" }),
           /* @__PURE__ */ jsx45(Menu4.Item, { className: "chalk-menu-item", disabled: disabled || startDisabled, closeOnClick: false, onClick: () => setReplace(true), children: "Share something else" }),
           /* @__PURE__ */ jsx45(ChalkMenuItem, { onClick: onToggle, children: "Stop sharing" })
-        ] }) : /* @__PURE__ */ jsxs27(Fragment14, { children: [
+        ] }) : /* @__PURE__ */ jsxs27(Fragment15, { children: [
           [
             { value: "monitor", label: "Entire screen", description: "Everything on one display" },
             { value: "window", label: "Window", description: "One app, like Slides or Figma" },
             { value: "browser", label: "Browser tab", description: "One tab, and its sound if you like" }
-          ].map((option) => /* @__PURE__ */ jsxs27(Menu4.Item, { className: "chalk-menu-item chalk-shell-source", disabled: disabled || startDisabled, role: "menuitemradio", "aria-label": option.label, "aria-checked": surface === option.value, onClick: () => start(option.value), children: [
+          ].map((option) => /* @__PURE__ */ jsxs27(Menu4.Item, { className: "chalk-menu-item chalk-shell-source", disabled: disabled || startDisabled, role: "menuitemradio", "aria-label": option.label, "aria-checked": surface === option.value, onClick: () => start2(option.value), children: [
             /* @__PURE__ */ jsx45(SourceIcon, { source: option.value }),
             /* @__PURE__ */ jsxs27("span", { className: "chalk-shell-device-label", children: [
               /* @__PURE__ */ jsx45("span", { children: option.label }),
@@ -4478,7 +4606,7 @@ function ShareControl({ sharing, onToggle, onStart, disabled = false, startDisab
             ] }),
             /* @__PURE__ */ jsx45("span", { className: "chalk-menu-check", "aria-hidden": "true", children: surface === option.value ? /* @__PURE__ */ jsx45("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx45("path", { d: "M20 6L9 17l-5-5" }) }) : null })
           ] }, option.value)),
-          surface === "browser" ? /* @__PURE__ */ jsxs27(Fragment14, { children: [
+          surface === "browser" ? /* @__PURE__ */ jsxs27(Fragment15, { children: [
             /* @__PURE__ */ jsx45(Menu4.Separator, { className: "chalk-shell-menu-separator" }),
             /* @__PURE__ */ jsxs27(Menu4.CheckboxItem, { className: "chalk-menu-item", checked: audio, onCheckedChange: setAudio, closeOnClick: false, children: [
               /* @__PURE__ */ jsxs27("span", { className: "chalk-shell-device-label", children: [
@@ -4495,19 +4623,7 @@ function ShareControl({ sharing, onToggle, onStart, disabled = false, startDisab
 }
 
 // src/components/control-bar/control-bar-behavior.ts
-import { useCallback as useCallback5, useEffect as useEffect16, useMemo as useMemo9, useState as useState22 } from "react";
-
-// src/components/control-bar/command-failure.ts
-import { SpaceClientError } from "@q9labsai/chalk-client";
-function commandFailure(cause) {
-  return cause instanceof SpaceClientError ? cause : new SpaceClientError({
-    code: "client.internal_error",
-    recoverable: false,
-    message: cause instanceof Error ? cause.message : "This command could not be completed."
-  });
-}
-
-// src/components/control-bar/control-bar-behavior.ts
+import { useCallback as useCallback5, useEffect as useEffect16, useMemo as useMemo9, useState as useState23 } from "react";
 var DEFAULT_CONTROL_BAR_BUTTONS = ["mic", "video", "screenshare", "record", "whiteboard", "handraise", "leave", "participants", "chat", "reactions"];
 var EMPTY_DETECTED_DEVICES = {
   audioinput: [],
@@ -4517,10 +4633,10 @@ var EMPTY_DETECTED_DEVICES = {
 function mergeDevices(...deviceGroups) {
   const devicesById = /* @__PURE__ */ new Map();
   for (const deviceGroup of deviceGroups) {
-    for (const device of deviceGroup ?? []) {
-      const existing = devicesById.get(device.deviceId);
-      if (!existing || !existing.label && device.label) {
-        devicesById.set(device.deviceId, device);
+    for (const device2 of deviceGroup ?? []) {
+      const existing = devicesById.get(device2.deviceId);
+      if (!existing || !existing.label && device2.label) {
+        devicesById.set(device2.deviceId, device2);
       }
     }
   }
@@ -4544,7 +4660,7 @@ function useControlBarSurfaceBehavior({
   detectDevices = true
 }) {
   const themeVariables = useMemo9(() => getParticipantThemeVariables(participantColorSeed, participantGradientPreference), [participantColorSeed, participantGradientPreference]);
-  const [detectedDevices, setDetectedDevices] = useState22(EMPTY_DETECTED_DEVICES);
+  const [detectedDevices, setDetectedDevices] = useState23(EMPTY_DETECTED_DEVICES);
   const buttonsToRender = buttons ?? DEFAULT_CONTROL_BAR_BUTTONS;
   useEffect16(() => {
     if (!detectDevices || density !== "comfortable" || !navigator.mediaDevices?.enumerateDevices) return;
@@ -4554,9 +4670,9 @@ function useControlBarSurfaceBehavior({
         const devices = await navigator.mediaDevices.enumerateDevices();
         if (!cancelled) {
           setDetectedDevices({
-            audioinput: devices.filter((device) => device.kind === "audioinput"),
-            audiooutput: devices.filter((device) => device.kind === "audiooutput"),
-            videoinput: devices.filter((device) => device.kind === "videoinput")
+            audioinput: devices.filter((device2) => device2.kind === "audioinput"),
+            audiooutput: devices.filter((device2) => device2.kind === "audiooutput"),
+            videoinput: devices.filter((device2) => device2.kind === "videoinput")
           });
         }
       } catch {
@@ -4594,7 +4710,7 @@ function useConnectedControlBarBehavior(props) {
   const canPublishScreen = useCan("publishScreen");
   const canSendReaction = useCan("sendReaction");
   const canRaiseHand = useCan("raiseHand");
-  const canDrawWhiteboard = useCan("drawWhiteboard");
+  const canDrawWhiteboard = useCanDrawWhiteboard();
   const canManageRecording = useCan("manageRecording");
   const live = useConnection().status === "live";
   const microphoneEnabled = media.local.microphone.state === "enabled";
@@ -4603,18 +4719,26 @@ function useConnectedControlBarBehavior(props) {
   const recordingStatus = recording.current?.status;
   const isRecording = recordingStatus === "recording" || recordingStatus === "stopping";
   const isRecordingPending = recordingStatus === "starting" || recordingStatus === "stopping";
-  const [noiseSuppression, setNoiseSuppression] = useState22(true);
-  const [commandError, setCommandError] = useState22(null);
+  const [noiseSuppression, setNoiseSuppression] = useState23(true);
+  const [commandError, setCommandError] = useState23(null);
+  const [commandSource, setCommandSource] = useState23();
+  const [commandAction, setCommandAction] = useState23();
   const run = useCallback5(
-    async (command, source) => {
+    async (command, source, action) => {
       setCommandError(null);
-      props.onCommandError?.(null, source);
+      setCommandSource(void 0);
+      setCommandAction(void 0);
+      props.onCommandError?.(null, source === "speaker" ? void 0 : source, source, action);
       try {
         await command();
       } catch (cause) {
         const failure = commandFailure(cause);
-        if (!props.onCommandError) setCommandError(failure);
-        props.onCommandError?.(failure, source);
+        if (!props.onCommandError) {
+          setCommandError(failure);
+          setCommandSource(source);
+          setCommandAction(action);
+        }
+        props.onCommandError?.(failure, source === "speaker" ? void 0 : source, source, action, command);
       }
     },
     [props.onCommandError]
@@ -4637,9 +4761,9 @@ function useConnectedControlBarBehavior(props) {
     if (button === "record") return canManageRecording;
     return true;
   });
-  const audioInputDevices = media.devices.microphones.map((device) => ({ ...device, kind: "audioinput" }));
-  const audioOutputDevices = media.devices.speakers.map((device) => ({ ...device, kind: "audiooutput" }));
-  const videoInputDevices = media.devices.cameras.map((device) => ({ ...device, kind: "videoinput" }));
+  const audioInputDevices = media.devices.microphones.map((device2) => ({ ...device2, kind: "audioinput" }));
+  const audioOutputDevices = media.devices.speakers.map((device2) => ({ ...device2, kind: "audiooutput" }));
+  const videoInputDevices = media.devices.cameras.map((device2) => ({ ...device2, kind: "videoinput" }));
   const surfaceProps = {
     ...props,
     detectDevices: false,
@@ -4656,9 +4780,13 @@ function useConnectedControlBarBehavior(props) {
       await media.local.microphone.track?.applyConstraints({ noiseSuppression: enabled });
       setNoiseSuppression(enabled);
     }, "microphone") : void 0,
-    onStartScreenShare: (options) => void run(async () => {
-      await client.media.setScreenShareEnabled(true, options);
-    }, "screen"),
+    onStartScreenShare: (options) => void run(
+      async () => {
+        await client.media.setScreenShareEnabled(true, options);
+      },
+      "screen",
+      "start"
+    ),
     shareUrl: props.shareUrl,
     isMuted: !microphoneEnabled,
     microphonePending: media.local.microphone.state === "requesting",
@@ -4680,39 +4808,43 @@ function useConnectedControlBarBehavior(props) {
     selectedAudioInput: media.selection.microphone ?? void 0,
     selectedAudioOutput: media.selection.speaker ?? void 0,
     selectedVideoInput: media.selection.camera ?? void 0,
-    onTestSpeaker: () => void run(async () => {
-      const context = new AudioContext();
-      const oscillator = context.createOscillator();
-      const gain = context.createGain();
-      const output = context.createMediaStreamDestination();
-      const audio = new Audio();
-      try {
-        if (media.selection.speaker && audio.setSinkId) await audio.setSinkId(media.selection.speaker);
-        audio.srcObject = output.stream;
-        oscillator.connect(gain).connect(output);
-        gain.gain.value = 0.15;
-        oscillator.frequency.value = 440;
-        oscillator.start();
-        await audio.play();
-        await new Promise((resolve) => {
-          oscillator.onended = () => resolve();
-          oscillator.stop(context.currentTime + 0.4);
-        });
-      } finally {
-        audio.pause();
-        audio.srcObject = null;
-        oscillator.disconnect();
-        gain.disconnect();
-        output.stream.getTracks().forEach((track) => track.stop());
-        await context.close();
-      }
-    }),
-    onToggleMute: () => void run(() => client.media.setMicrophoneEnabled(!microphoneEnabled), "microphone"),
-    onToggleVideo: () => void run(() => client.media.setCameraEnabled(!cameraEnabled), "camera"),
-    onAudioInputChange: (deviceId) => void run(() => client.media.selectMicrophone(deviceId), "microphone"),
-    onAudioOutputChange: (deviceId) => void run(() => client.media.selectSpeaker(deviceId)),
-    onVideoInputChange: (deviceId) => void run(() => client.media.selectCamera(deviceId), "camera"),
-    onToggleScreenShare: () => void run(() => client.media.setScreenShareEnabled(!screenSharing), "screen"),
+    onTestSpeaker: () => void run(
+      async () => {
+        const context = new AudioContext();
+        const oscillator = context.createOscillator();
+        const gain = context.createGain();
+        const output = context.createMediaStreamDestination();
+        const audio = new Audio();
+        try {
+          if (media.selection.speaker && audio.setSinkId) await audio.setSinkId(media.selection.speaker);
+          audio.srcObject = output.stream;
+          oscillator.connect(gain).connect(output);
+          gain.gain.value = 0.15;
+          oscillator.frequency.value = 440;
+          oscillator.start();
+          await audio.play();
+          await new Promise((resolve) => {
+            oscillator.onended = () => resolve();
+            oscillator.stop(context.currentTime + 0.4);
+          });
+        } finally {
+          audio.pause();
+          audio.srcObject = null;
+          oscillator.disconnect();
+          gain.disconnect();
+          output.stream.getTracks().forEach((track) => track.stop());
+          await context.close();
+        }
+      },
+      "speaker",
+      "test"
+    ),
+    onToggleMute: () => void run(() => client.media.setMicrophoneEnabled(!microphoneEnabled), "microphone", microphoneEnabled ? "stop" : "start"),
+    onToggleVideo: () => void run(() => client.media.setCameraEnabled(!cameraEnabled), "camera", cameraEnabled ? "stop" : "start"),
+    onAudioInputChange: (deviceId) => void run(() => client.media.selectMicrophone(deviceId), "microphone", "select"),
+    onAudioOutputChange: (deviceId) => void run(() => client.media.selectSpeaker(deviceId), "speaker", "select"),
+    onVideoInputChange: (deviceId) => void run(() => client.media.selectCamera(deviceId), "camera", "select"),
+    onToggleScreenShare: () => void run(() => client.media.setScreenShareEnabled(!screenSharing), "screen", screenSharing ? "stop" : "start"),
     onToggleRecording: () => void run(() => recordingStatus === "recording" ? client.recording.stop() : client.recording.start()),
     onToggleChat: props.onToggleChat,
     onToggleParticipants: props.onToggleParticipants,
@@ -4722,7 +4854,7 @@ function useConnectedControlBarBehavior(props) {
     onLeft: leave,
     onEndForEveryone: props.onEndForEveryone
   };
-  return { surfaceProps, commandError };
+  return { surfaceProps, commandError, commandSource, commandAction };
 }
 
 // src/components/control-bar/next-camera.ts
@@ -4732,26 +4864,26 @@ function facing(label) {
   return void 0;
 }
 function nextCamera(devices, selectedId, track) {
-  const settings = track?.getSettings();
-  const currentId = selectedId ?? settings?.deviceId;
-  const index = devices.findIndex((device) => device.deviceId === currentId);
+  const settings2 = track?.getSettings();
+  const currentId = selectedId ?? settings2?.deviceId;
+  const index = devices.findIndex((device2) => device2.deviceId === currentId);
   const current = devices[index];
   const capabilities = track?.getCapabilities?.().facingMode;
-  const currentFacing = (current && facing(current.label)) ?? settings?.facingMode ?? (capabilities?.length === 1 ? capabilities[0] : void 0);
+  const currentFacing = (current && facing(current.label)) ?? settings2?.facingMode ?? (capabilities?.length === 1 ? capabilities[0] : void 0);
   const opposite = currentFacing === "user" ? "environment" : currentFacing === "environment" ? "user" : void 0;
-  return opposite && devices.find((device) => device.deviceId !== currentId && facing(device.label) === opposite) || devices[(index + 1) % devices.length];
+  return opposite && devices.find((device2) => device2.deviceId !== currentId && facing(device2.label) === opposite) || devices[(index + 1) % devices.length];
 }
 
 // src/components/control-bar/ControlBar.tsx
-import { Fragment as Fragment15, jsx as jsx46, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx46, jsxs as jsxs28 } from "react/jsx-runtime";
 function ControlBarPresentation(props) {
   return /* @__PURE__ */ jsx46(ControlBarSurface, { ...props, detectDevices: props.displayOnly ? false : props.detectDevices });
 }
 var ControlBarSurface = React12.memo((props) => {
   const { buttonsToRender, effectiveAudioInputDevices, effectiveAudioOutputDevices, effectiveVideoInputDevices, showLeave } = useControlBarSurfaceBehavior({ ...props, density: props.density ?? "comfortable", detectDevices: props.detectDevices ?? true });
-  const dock = useRef15(null);
-  const [fullscreen, setFullscreen] = useState23(false);
-  const [canCaptureDisplay, setCanCaptureDisplay] = useState23(false);
+  const dock = useRef14(null);
+  const [fullscreen, setFullscreen] = useState24(false);
+  const [canCaptureDisplay, setCanCaptureDisplay] = useState24(false);
   useEffect17(() => setCanCaptureDisplay(typeof navigator.mediaDevices?.getDisplayMedia === "function"), []);
   useEffect17(() => {
     const changed = () => setFullscreen(Boolean(document.fullscreenElement));
@@ -4894,19 +5026,19 @@ var ControlBarSurface = React12.memo((props) => {
 });
 ControlBarSurface.displayName = "ControlBarSurface";
 function ControlBar(props) {
-  const { surfaceProps, commandError } = useConnectedControlBarBehavior(props);
-  return /* @__PURE__ */ jsxs28(Fragment15, { children: [
+  const { surfaceProps, commandError, commandSource, commandAction } = useConnectedControlBarBehavior(props);
+  return /* @__PURE__ */ jsxs28(Fragment16, { children: [
     /* @__PURE__ */ jsx46(ControlBarSurface, { ...surfaceProps }),
-    !props.onCommandError ? /* @__PURE__ */ jsx46(CommandErrorAlert, { message: commandError?.message }) : null
+    !props.onCommandError ? /* @__PURE__ */ jsx46(CommandErrorAlert, { message: commandError ? commandFailureMessage(commandError, commandSource, commandAction) : void 0 }) : null
   ] });
 }
 
 // src/components/participants-panel/ParticipantsPanel.tsx
 import { Popover as Popover3 } from "@base-ui/react/popover";
-import React13, { useMemo as useMemo10, useState as useState25 } from "react";
+import React13, { useMemo as useMemo10, useState as useState26 } from "react";
 
 // src/components/participants-panel/participant-row.tsx
-import { useState as useState24, useRef as useRef16, useEffect as useEffect18 } from "react";
+import { useState as useState25, useRef as useRef15, useEffect as useEffect18 } from "react";
 import { Popover as Popover2 } from "@base-ui/react/popover";
 
 // src/components/participants-panel/participant-options-menu-contract.ts
@@ -4928,7 +5060,7 @@ function runParticipantAction(action, onClose, onCommandError) {
 }
 
 // src/components/participants-panel/participant-options-menu.tsx
-import { Fragment as Fragment16, jsx as jsx47, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx47, jsxs as jsxs29 } from "react/jsx-runtime";
 function ParticipantOptionsMenu({
   participant,
   variant,
@@ -4953,7 +5085,7 @@ function ParticipantOptionsMenu({
   const volumeMuted = volume <= 0;
   const menuItemClassName = cn("flex w-full items-center gap-3 rounded-[8px] px-3 py-2.5 text-left text-sm font-medium text-[var(--chalk-app-text)] transition-colors hover:bg-[var(--chalk-app-control-hover)]");
   const dividerClassName = "my-1.5 h-px bg-[var(--chalk-app-line)]";
-  return /* @__PURE__ */ jsxs29(Fragment16, { children: [
+  return /* @__PURE__ */ jsxs29(Fragment17, { children: [
     hasLocalActions ? /* @__PURE__ */ jsxs29("button", { type: "button", onClick: onEditName, className: menuItemClassName, children: [
       /* @__PURE__ */ jsx47(Edit02Icon, { className: "h-4 w-4" }),
       "Edit Name"
@@ -4978,7 +5110,7 @@ function ParticipantOptionsMenu({
       )
     ] }) : null,
     hasVolumeControl && hasManageActions ? /* @__PURE__ */ jsx47("div", { className: dividerClassName }) : null,
-    hasManageActions ? /* @__PURE__ */ jsxs29(Fragment16, { children: [
+    hasManageActions ? /* @__PURE__ */ jsxs29(Fragment17, { children: [
       !participant.isMuted && onMuteParticipant ? /* @__PURE__ */ jsxs29(
         "button",
         {
@@ -5081,10 +5213,10 @@ function ParticipantRow({
   onMenuToggle,
   onMenuClose
 }) {
-  const [isEditing, setIsEditing] = useState24(false);
-  const [editName, setEditName] = useState24(participant.displayName);
-  const inputRef = useRef16(null);
-  const rootRef = useRef16(null);
+  const [isEditing, setIsEditing] = useState25(false);
+  const [editName, setEditName] = useState25(participant.displayName);
+  const inputRef = useRef15(null);
+  const rootRef = useRef15(null);
   const hasVolumeControl = !!participantVolumes && !!onParticipantVolumeChange;
   const showMenuButton = canManageParticipants || hasVolumeControl || participant.isLocal && !!onUpdateDisplayName;
   useEffect18(() => {
@@ -5182,7 +5314,7 @@ function ParticipantRow({
 }
 
 // src/components/participants-panel/ParticipantsPanel.tsx
-import { Fragment as Fragment17, jsx as jsx49, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx49, jsxs as jsxs31 } from "react/jsx-runtime";
 var ParticipantsPanelSurface = React13.memo(
   ({
     participants,
@@ -5208,10 +5340,10 @@ var ParticipantsPanelSurface = React13.memo(
     participantGradientPreference,
     generatedAvatars = true
   }) => {
-    const [query, setQuery] = useState25("");
-    const [activeMenuId, setActiveMenuId] = useState25(null);
-    const [muting, setMuting] = useState25(false);
-    const [error, setError] = useState25(null);
+    const [query, setQuery] = useState26("");
+    const [activeMenuId, setActiveMenuId] = useState26(null);
+    const [muting, setMuting] = useState26(false);
+    const [error, setError] = useState26(null);
     const filtered = participants.filter((person) => person.displayName.toLocaleLowerCase().includes(query.trim().toLocaleLowerCase()));
     const raised = participants.filter((person) => person.isHandRaised);
     const unmutedCount = participants.filter((person) => !person.isLocal && !person.isMuted).length;
@@ -5257,11 +5389,11 @@ var ParticipantsPanelSurface = React13.memo(
         /* @__PURE__ */ jsx49(Search01Icon, { "aria-hidden": "true" }),
         /* @__PURE__ */ jsx49("input", { "aria-label": "Search people", placeholder: "Search people", value: query, onChange: (event) => setQuery(event.target.value) })
       ] }) : null,
-      canManageAdmission && admissionEnabled && admissionCount > 0 ? /* @__PURE__ */ jsxs31(Fragment17, { children: [
+      canManageAdmission && admissionEnabled && admissionCount > 0 ? /* @__PURE__ */ jsxs31(Fragment18, { children: [
         /* @__PURE__ */ jsx49(AdmissionPanel, { inline: true }),
         /* @__PURE__ */ jsx49("h3", { className: "call-people-section", children: "In the call" })
       ] }) : null,
-      !query && raised.length > 1 ? /* @__PURE__ */ jsxs31(Fragment17, { children: [
+      !query && raised.length > 1 ? /* @__PURE__ */ jsxs31(Fragment18, { children: [
         /* @__PURE__ */ jsx49("h3", { className: "call-people-section", children: "Raised hands" }),
         raised.map((person) => /* @__PURE__ */ jsxs31("div", { className: "call-raised-row", children: [
           person.handOrder !== void 0 ? /* @__PURE__ */ jsx49("span", { className: "call-hand-number", children: person.handOrder }) : null,
@@ -5314,7 +5446,7 @@ var ParticipantsPanel = React13.memo((props) => {
   const canRemoveParticipants = useCan("removeParticipant");
   const canManageAdmission = useCan("manageAdmission");
   const contextVolumeState = useParticipantVolumeContext();
-  const [localVolumes, setLocalVolumes] = useState25(/* @__PURE__ */ new Map());
+  const [localVolumes, setLocalVolumes] = useState26(/* @__PURE__ */ new Map());
   const isControlled = props.participantVolumes !== void 0 && props.onParticipantVolumeChange !== void 0;
   const participantVolumes = isControlled ? props.participantVolumes : contextVolumeState?.volumes ?? localVolumes;
   const onParticipantVolumeChange = isControlled ? props.onParticipantVolumeChange : contextVolumeState?.setVolume ?? ((participantId, volume) => setLocalVolumes((current) => {
@@ -5365,15 +5497,9 @@ var ParticipantsPanel = React13.memo((props) => {
 });
 ParticipantsPanel.displayName = "ParticipantsPanel";
 
-// src/components/toast-stack/ToastStack.tsx
-import { memo } from "react";
-import { jsx as jsx50 } from "react/jsx-runtime";
-var ToastStack = memo(function ToastStack2({ toasts, onDismiss, maxVisible = 3, className }) {
-  return /* @__PURE__ */ jsx50("div", { "data-part": "toast-stack", className: cn("chalk-toasts", className), children: toasts.slice(-maxVisible).map((toast) => /* @__PURE__ */ jsx50(ChalkToast, { ...toast, onDismiss: () => onDismiss(toast.id) }, toast.id)) });
-});
-
 // src/components/chalk/StatusSurface.tsx
-import { Fragment as Fragment18, jsx as jsx51, jsxs as jsxs32 } from "react/jsx-runtime";
+import { formatSyncConnectDiagnostic } from "@q9labsai/chalk-client";
+import { Fragment as Fragment19, jsx as jsx50, jsxs as jsxs32 } from "react/jsx-runtime";
 var DEFAULT_FAILURE_DETAIL = "Something went wrong while joining. Try again.";
 var FAILURE_DETAILS = {
   "access.invalid": "Access to this call was rejected. Refresh the page and try again.",
@@ -5386,7 +5512,7 @@ var FAILURE_DETAILS = {
   "environment.unsupported": "This browser cannot start the call. Use an up-to-date browser over HTTPS.",
   "client.internal_error": DEFAULT_FAILURE_DETAIL
 };
-function StatusSurface({ phase, callName = "the call", reason, errorCode, theme, onRejoin, onHome, onRetry, onReportProblem, rejoinDisabled = false, retryPending = false }) {
+function StatusSurface({ phase, callName = "the call", reason, errorCode, sync, theme, onRejoin, onHome, onRetry, onReportProblem, rejoinDisabled = false, retryPending = false }) {
   const copy = {
     entering: { title: `Joining ${callName}\u2026`, detail: "" },
     left: { title: `You left ${callName}`, detail: "" },
@@ -5407,31 +5533,34 @@ function StatusSurface({ phase, callName = "the call", reason, errorCode, theme,
       style: { ...chalkThemeStyle(theme), fontSize: 14, lineHeight: 1.4 },
       className: "chalk-root relative flex h-full min-h-0 w-full flex-col items-center justify-center gap-3 bg-[var(--chalk-canvas)] p-6 text-center text-[var(--chalk-text)]",
       children: [
-        /* @__PURE__ */ jsx51("h1", { role: phase === "entering" ? "status" : void 0, style: { fontSize: 22, fontWeight: 600, lineHeight: 1.4, fontFamily: "inherit", letterSpacing: "normal", textWrap: "wrap" }, children: copy.title }),
-        reason || copy.detail ? /* @__PURE__ */ jsx51("p", { className: "text-[14px] text-[var(--chalk-muted-text)]", children: reason ?? copy.detail }) : null,
+        /* @__PURE__ */ jsx50("h1", { role: phase === "entering" ? "status" : void 0, style: { fontSize: 22, fontWeight: 600, lineHeight: 1.4, fontFamily: "inherit", letterSpacing: "normal", textWrap: "wrap" }, children: copy.title }),
+        reason || copy.detail ? /* @__PURE__ */ jsx50("p", { className: "text-[14px] text-[var(--chalk-muted-text)]", children: reason ?? copy.detail }) : null,
         phase === "failed" && errorCode ? /* @__PURE__ */ jsxs32("p", { className: "text-[13px] text-[var(--chalk-muted-text)]", children: [
           "Reference:",
           " ",
-          /* @__PURE__ */ jsx51("code", { dir: "ltr", className: "break-all", children: errorCode })
+          /* @__PURE__ */ jsxs32("code", { dir: "ltr", className: "break-all", children: [
+            errorCode,
+            sync ? ` ${formatSyncConnectDiagnostic(sync)}` : ""
+          ] })
         ] }) : null,
         /* @__PURE__ */ jsxs32("div", { "data-part": "status-actions", className: "mt-5 flex gap-7", children: [
-          canRetry && retry ? /* @__PURE__ */ jsx51(StatusAction, { icon: /* @__PURE__ */ jsx51(StatusIcon, { retry: true }), label: phase === "elsewhere" ? "Use here" : phase === "left" ? "Rejoin" : "Try again", onClick: retry, disabled: rejoinDisabled || retryPending }) : null,
-          phase !== "entering" && onHome ? /* @__PURE__ */ jsx51(StatusAction, { icon: /* @__PURE__ */ jsx51(StatusIcon, {}), label: "Home", onClick: onHome }) : null
+          canRetry && retry ? /* @__PURE__ */ jsx50(StatusAction, { icon: /* @__PURE__ */ jsx50(StatusIcon, { retry: true }), label: phase === "elsewhere" ? "Use here" : phase === "left" ? "Rejoin" : "Try again", onClick: retry, disabled: rejoinDisabled || retryPending }) : null,
+          phase !== "entering" && onHome ? /* @__PURE__ */ jsx50(StatusAction, { icon: /* @__PURE__ */ jsx50(StatusIcon, {}), label: "Home", onClick: onHome }) : null
         ] }),
-        onReportProblem && phase !== "entering" ? /* @__PURE__ */ jsx51("button", { type: "button", onClick: onReportProblem, className: "mt-[18px] px-2.5 py-2 text-[13px] text-[var(--chalk-muted-text)] underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-2", children: "Report a problem" }) : null
+        onReportProblem && phase !== "entering" ? /* @__PURE__ */ jsx50("button", { type: "button", onClick: onReportProblem, className: "mt-[18px] px-2.5 py-2 text-[13px] text-[var(--chalk-muted-text)] underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-2", children: "Report a problem" }) : null
       ]
     }
   );
 }
 function StatusIcon({ retry = false }) {
-  return /* @__PURE__ */ jsx51("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: retry ? /* @__PURE__ */ jsxs32(Fragment18, { children: [
-    /* @__PURE__ */ jsx51("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
-    /* @__PURE__ */ jsx51("path", { d: "M3 3v5h5" })
-  ] }) : /* @__PURE__ */ jsx51("path", { d: "M3 10.5L12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z" }) });
+  return /* @__PURE__ */ jsx50("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: retry ? /* @__PURE__ */ jsxs32(Fragment19, { children: [
+    /* @__PURE__ */ jsx50("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+    /* @__PURE__ */ jsx50("path", { d: "M3 3v5h5" })
+  ] }) : /* @__PURE__ */ jsx50("path", { d: "M3 10.5L12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z" }) });
 }
 function StatusAction({ icon, label, onClick, disabled }) {
   return /* @__PURE__ */ jsxs32("button", { type: "button", onClick, disabled, style: { fontSize: 13, fontWeight: 500, lineHeight: 1.4 }, className: "group flex flex-col items-center gap-2 text-[var(--chalk-soft-text)] outline-none disabled:pointer-events-none disabled:opacity-50", children: [
-    /* @__PURE__ */ jsx51(
+    /* @__PURE__ */ jsx50(
       "span",
       {
         "aria-hidden": "true",
@@ -5446,7 +5575,7 @@ function StatusAction({ icon, label, onClick, disabled }) {
 }
 
 // src/components/call-limbo/CallReady.tsx
-import { useEffect as useEffect19, useId, useRef as useRef17, useState as useState26 } from "react";
+import { useEffect as useEffect19, useId, useRef as useRef16, useState as useState27 } from "react";
 
 // src/components/call-limbo/qr-code.ts
 function inviteQR(text) {
@@ -5587,15 +5716,15 @@ function inviteQR(text) {
 }
 
 // src/components/call-limbo/CallReady.tsx
-import { Fragment as Fragment19, jsx as jsx52, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx51, jsxs as jsxs33 } from "react/jsx-runtime";
 function CallReady({ open, onClose, link = typeof location === "undefined" ? "" : location.href }) {
-  const [showQR, setShowQR] = useState26(false);
-  const qrRef = useRef17(null);
-  const cardRef = useRef17(null);
+  const [showQR, setShowQR] = useState27(false);
+  const qrRef = useRef16(null);
+  const cardRef = useRef16(null);
   const phone = useIsMobile();
   const reducedMotion = usePrefersReducedMotion();
-  const [entered, setEntered] = useState26(false);
-  const [present, setPresent] = useState26(open);
+  const [entered, setEntered] = useState27(false);
+  const [present, setPresent] = useState27(open);
   const id = useId();
   const qr = showQR ? inviteQR(link) : null;
   const close = () => {
@@ -5624,31 +5753,31 @@ function CallReady({ open, onClose, link = typeof location === "undefined" ? ""
       clearTimeout(timer);
     };
   }, [open, reducedMotion]);
-  const content = /* @__PURE__ */ jsxs33(Fragment19, { children: [
+  const content = /* @__PURE__ */ jsxs33(Fragment20, { children: [
     /* @__PURE__ */ jsxs33("div", { className: "-mt-1.5 mb-0.5 flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx52("h2", { id, "data-part": "ready-title", tabIndex: -1, style: { fontSize: 15, fontWeight: 600, lineHeight: 1.4, fontFamily: "inherit", letterSpacing: "normal", textWrap: "wrap", outline: "none" }, children: "Your call is ready" }),
-      /* @__PURE__ */ jsx52("button", { type: "button", "data-part": "ready-dismiss", className: "chalk-dismiss max-sm:!h-11 max-sm:!w-11", "aria-label": "Close call link", onClick: close, children: /* @__PURE__ */ jsx52("svg", { width: "20", height: "20", style: { width: 20, height: 20 }, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx52("path", { d: "m6 6 12 12M6 18 18 6" }) }) })
+      /* @__PURE__ */ jsx51("h2", { id, "data-part": "ready-title", tabIndex: -1, style: { fontSize: 15, fontWeight: 600, lineHeight: 1.4, fontFamily: "inherit", letterSpacing: "normal", textWrap: "wrap", outline: "none" }, children: "Your call is ready" }),
+      /* @__PURE__ */ jsx51("button", { type: "button", "data-part": "ready-dismiss", className: "chalk-dismiss max-sm:!h-11 max-sm:!w-11", "aria-label": "Close call link", onClick: close, children: /* @__PURE__ */ jsx51("svg", { width: "20", height: "20", style: { width: 20, height: 20 }, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx51("path", { d: "m6 6 12 12M6 18 18 6" }) }) })
     ] }),
-    /* @__PURE__ */ jsx52("p", { className: "mr-1 text-[13px] text-[var(--chalk-muted-text)]", children: "Share this link with people you want in the call" }),
+    /* @__PURE__ */ jsx51("p", { className: "mr-1 text-[13px] text-[var(--chalk-muted-text)]", children: "Share this link with people you want in the call" }),
     /* @__PURE__ */ jsxs33("div", { "data-part": "ready-link", style: { borderRadius: 999 }, className: "mt-3 flex h-11 items-center justify-between gap-2 bg-[var(--chalk-raised)] pl-3.5 pr-1 font-medium", children: [
-      /* @__PURE__ */ jsx52("span", { className: "min-w-0 truncate", children: link.replace(/^https?:\/\//, "") }),
+      /* @__PURE__ */ jsx51("span", { className: "min-w-0 truncate", children: link.replace(/^https?:\/\//, "") }),
       /* @__PURE__ */ jsxs33("span", { className: "flex gap-0.5", children: [
-        /* @__PURE__ */ jsx52("button", { type: "button", className: "chalk-copy", "aria-label": showQR ? "Hide QR code" : "Show QR code", "aria-expanded": showQR, "aria-controls": `${id}-qr`, onClick: () => setShowQR(!showQR), children: /* @__PURE__ */ jsxs33("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx52("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1.5" }),
-          /* @__PURE__ */ jsx52("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1.5" }),
-          /* @__PURE__ */ jsx52("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1.5" }),
-          /* @__PURE__ */ jsx52("path", { d: "M14 14h3v3M21 14v.01M14 21h3M21 17v4h-1" })
+        /* @__PURE__ */ jsx51("button", { type: "button", className: "chalk-copy", "aria-label": showQR ? "Hide QR code" : "Show QR code", "aria-expanded": showQR, "aria-controls": `${id}-qr`, onClick: () => setShowQR(!showQR), children: /* @__PURE__ */ jsxs33("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx51("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1.5" }),
+          /* @__PURE__ */ jsx51("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1.5" }),
+          /* @__PURE__ */ jsx51("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1.5" }),
+          /* @__PURE__ */ jsx51("path", { d: "M14 14h3v3M21 14v.01M14 21h3M21 17v4h-1" })
         ] }) }),
-        /* @__PURE__ */ jsx52(ChalkCopyButton, { text: link, announcement: "Copied" })
+        /* @__PURE__ */ jsx51(ChalkCopyButton, { text: link, announcement: "Copied" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx52("div", { ref: qrRef, id: `${id}-qr`, hidden: !showQR, children: /* @__PURE__ */ jsxs33("div", { className: "mt-3 flex items-center gap-3.5", children: [
-      qr ? /* @__PURE__ */ jsx52("svg", { role: "img", "aria-label": "Scan to join this call", width: "104", height: "104", viewBox: `-4 -4 ${qr.length + 8} ${qr.length + 8}`, className: "shrink-0 rounded-lg bg-white p-1", shapeRendering: "crispEdges", children: /* @__PURE__ */ jsx52("path", { fill: "#000", d: qr.flatMap((row, y) => row.flatMap((dark, x) => dark ? [`M${x} ${y}h1v1h-1z`] : [])).join("") }) }) : null,
-      /* @__PURE__ */ jsx52("p", { className: "text-[13px] text-[var(--chalk-soft-text)]", children: qr ? "Scan with a phone camera to join this call." : "This link is too long for a QR code. Copy the link to share it." })
+    /* @__PURE__ */ jsx51("div", { ref: qrRef, id: `${id}-qr`, hidden: !showQR, children: /* @__PURE__ */ jsxs33("div", { className: "mt-3 flex items-center gap-3.5", children: [
+      qr ? /* @__PURE__ */ jsx51("svg", { role: "img", "aria-label": "Scan to join this call", width: "104", height: "104", viewBox: `-4 -4 ${qr.length + 8} ${qr.length + 8}`, className: "shrink-0 rounded-lg bg-white p-1", shapeRendering: "crispEdges", children: /* @__PURE__ */ jsx51("path", { fill: "#000", d: qr.flatMap((row, y) => row.flatMap((dark, x) => dark ? [`M${x} ${y}h1v1h-1z`] : [])).join("") }) }) : null,
+      /* @__PURE__ */ jsx51("p", { className: "text-[13px] text-[var(--chalk-soft-text)]", children: qr ? "Scan with a phone camera to join this call." : "This link is too long for a QR code. Copy the link to share it." })
     ] }) })
   ] });
   if (phone)
-    return /* @__PURE__ */ jsx52(
+    return /* @__PURE__ */ jsx51(
       ChalkSheet,
       {
         variant: "ready",
@@ -5657,10 +5786,10 @@ function CallReady({ open, onClose, link = typeof location === "undefined" ? ""
           if (!value) onClose();
         },
         title: "Your call is ready",
-        children: /* @__PURE__ */ jsx52("section", { ref: cardRef, "aria-labelledby": id, children: content })
+        children: /* @__PURE__ */ jsx51("section", { ref: cardRef, "aria-labelledby": id, children: content })
       }
     );
-  return present ? /* @__PURE__ */ jsx52(
+  return present ? /* @__PURE__ */ jsx51(
     "section",
     {
       ref: cardRef,
@@ -5675,8 +5804,228 @@ function CallReady({ open, onClose, link = typeof location === "undefined" ? ""
   ) : null;
 }
 
+// src/components/toast-stack/ToastStack.tsx
+import { memo, useLayoutEffect as useLayoutEffect3, useRef as useRef17, useState as useState29 } from "react";
+import { flushSync as flushSync2 } from "react-dom";
+
+// src/components/toast-stack/useToastCapacity.ts
+import { isValidElement as isValidElement2, useLayoutEffect as useLayoutEffect2, useState as useState28 } from "react";
+import { flushSync } from "react-dom";
+
+// src/components/toast-stack/toast-layout-snapshot.ts
+function captureToastLayout(toast) {
+  const snapshot = document.createElement("div");
+  copyAttributes(toast, snapshot);
+  for (const child of toast.childNodes) snapshot.appendChild(copyLayout(child));
+  return snapshot;
+}
+function copyAttributes(source, target) {
+  for (const { name, value } of source.attributes) {
+    if (!/^(?:on|src|href|xlink:href|id$|name$|action$|formaction$|autoplay$|autofocus$|role$|aria-live$|aria-atomic$|tabindex$|contenteditable$)/i.test(name)) target.setAttribute(name, value);
+  }
+}
+function copyLayout(node) {
+  if (!(node instanceof Element)) return document.createTextNode(node instanceof Text ? node.data : "");
+  const opaque = node.localName.includes("-") || /^(?:img|video|audio|canvas|iframe|object|embed|script|style|link|image|use|animate|animateMotion|animateTransform|set)$/.test(node.localName);
+  if (opaque) {
+    const placeholder = document.createElement("span");
+    const size = node.getBoundingClientRect();
+    placeholder.style.cssText = `display:inline-block;width:${size.width}px;height:${size.height}px;flex-shrink:0`;
+    return placeholder;
+  }
+  const copy = document.createElementNS(node.namespaceURI, node.localName);
+  copyAttributes(node, copy);
+  for (const child of node.childNodes) copy.appendChild(copyLayout(child));
+  return copy;
+}
+function measureToastLayout(stack, snapshot) {
+  const probe = captureToastLayout(snapshot);
+  probe.dataset.part = "toast-measurement";
+  probe.inert = true;
+  probe.setAttribute("aria-hidden", "true");
+  Object.assign(probe.style, { position: "absolute", left: "0", top: "0", width: "max-content", visibility: "hidden", pointerEvents: "none", animation: "none", transition: "none", transform: "none" });
+  stack.appendChild(probe);
+  try {
+    return Math.max(probe.offsetHeight, Math.ceil(probe.getBoundingClientRect().height));
+  } finally {
+    probe.remove();
+  }
+}
+
+// src/components/toast-stack/useToastCapacity.ts
+function useToastCapacity(stack, candidates, enabled, ownedIds) {
+  const [fit, setFit] = useState28(null);
+  let count = candidates.length;
+  if (enabled) {
+    count = 0;
+    let used = 0;
+    if (fit)
+      for (const toast of candidates.slice().reverse()) {
+        const measured = fit.measurements.get(toast.id);
+        const height = measured && sameLayout(measured.toast, toast) ? measured.height : 48;
+        const next = used + (count ? fit.gap : 0) + height;
+        if (fit.width > 0 && next > fit.available) break;
+        used = next;
+        count += 1;
+      }
+  }
+  const selected = candidates.slice(candidates.length - count);
+  const ready = fit !== null && selected.every((toast) => {
+    const measured = fit.measurements.get(toast.id);
+    return measured !== void 0 && sameLayout(measured.toast, toast);
+  });
+  useLayoutEffect2(() => {
+    const node = stack.current;
+    if (!enabled || !node) return;
+    const elements = [...node.children].filter((child) => child instanceof HTMLElement);
+    const measure = () => {
+      const style = getComputedStyle(node);
+      const padding = (parseFloat(style.paddingTop) || 0) + (parseFloat(style.paddingBottom) || 0);
+      const width = node.clientWidth;
+      const available = Math.max(0, node.clientHeight - padding);
+      const gap = parseFloat(style.rowGap) || 0;
+      const mounted = selected.filter((toast) => ownedIds.includes(toast.id));
+      const updates = /* @__PURE__ */ new Map();
+      mounted.forEach((toast, index) => {
+        const element = elements[index];
+        if (!element) return;
+        const height = Math.max(element.offsetHeight, Math.ceil(element.getBoundingClientRect().height));
+        const old = fit?.measurements.get(toast.id);
+        const markup = element.innerHTML;
+        if (!old || old.height !== height || old.width !== width || old.markup !== markup || !sameLayout(old.toast, toast)) {
+          updates.set(toast.id, { toast, height, width, markup, snapshot: captureToastLayout(element) });
+        }
+      });
+      for (const toast of candidates) {
+        const old = fit?.measurements.get(toast.id);
+        if (old && old.width !== width && !mounted.includes(toast) && sameLayout(old.toast, toast)) {
+          updates.set(toast.id, { ...old, width, height: measureToastLayout(node, old.snapshot) });
+        }
+      }
+      setFit((previous) => {
+        const measurements = new Map(previous?.measurements);
+        const present = new Set(candidates.map((toast) => toast.id));
+        for (const id of measurements.keys()) if (!present.has(id)) measurements.delete(id);
+        const changed = measurements.size !== previous?.measurements.size || updates.size > 0;
+        for (const [id, measurement] of updates) measurements.set(id, measurement);
+        return !changed && previous?.width === width && previous.available === available && previous.gap === gap ? previous : { width, available, gap, measurements };
+      });
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    let active = true;
+    const observer = new ResizeObserver(() => {
+      if (active) flushSync(measure);
+    });
+    observer.observe(node);
+    for (const element of elements) observer.observe(element);
+    return () => {
+      active = false;
+      observer.disconnect();
+    };
+  });
+  return { count, ready: !enabled || ready };
+}
+function sameLayout(previous, next) {
+  return previous.id === next.id && noticeIdentity(previous) === noticeIdentity(next) && previous.action?.label === next.action?.label && sameLayoutValue(previous.message, next.message) && sameLayoutValue(previous.icon, next.icon);
+}
+function sameLayoutValue(previous, next, seen = /* @__PURE__ */ new WeakMap()) {
+  if (Object.is(previous, next)) return true;
+  if (typeof previous === "function" && typeof next === "function") return true;
+  if (previous === null || next === null || typeof previous !== "object" || typeof next !== "object") return false;
+  if (isValidElement2(previous) || isValidElement2(next)) return isValidElement2(previous) && isValidElement2(next) && previous.type === next.type && sameLayoutValue(previous.props, next.props, seen);
+  if (Object.getPrototypeOf(previous) !== Object.getPrototypeOf(next)) return false;
+  if (seen.get(previous) === next) return true;
+  seen.set(previous, next);
+  const keys = Object.keys(previous).filter((key) => key !== "ref");
+  return keys.length === Object.keys(next).filter((key) => key !== "ref").length && keys.every((key) => Object.hasOwn(next, key) && sameLayoutValue(Reflect.get(previous, key), Reflect.get(next, key), seen));
+}
+
+// src/components/toast-stack/ToastStack.tsx
+import { Fragment as Fragment21, jsx as jsx52, jsxs as jsxs34 } from "react/jsx-runtime";
+var FOLD_BELOW_PX = 620;
+var ToastStack = memo(function ToastStack2({ toasts, onDismiss, maxVisible = 3, className, onFold }) {
+  const stack = useRef17(null);
+  const short = useShortCall(stack, onFold !== void 0);
+  const candidates = maxVisible > 0 ? toasts.slice(-maxVisible) : [];
+  const [ownedIds, setOwnedIds] = useState29([]);
+  const fold = useRef17(onFold);
+  const capacity = useToastCapacity(stack, candidates, onFold !== void 0 && short === false, ownedIds);
+  const selected = onFold !== void 0 && short !== false ? [] : candidates.slice(candidates.length - capacity.count);
+  const shown = onFold || fold.current ? selected.filter((toast) => ownedIds.includes(toast.id)) : selected;
+  const folded = onFold !== void 0 && short !== null ? toasts.filter((toast) => !selected.includes(toast)) : [];
+  const foldedIds = folded.map((toast) => toast.id);
+  const announced = useRef17(/* @__PURE__ */ new Map());
+  const wasAnnounced = (toast) => announced.current.get(toast.id) === noticeIdentity(toast);
+  const [unheard, setUnheard] = useState29([]);
+  const reported = useRef17([]);
+  const reporting = useRef17(false);
+  useLayoutEffect3(() => {
+    const replacement = fold.current !== onFold;
+    if (replacement) {
+      if (!onFold) fold.current?.([]);
+      fold.current = onFold;
+    }
+    const selectedIds = selected.map((toast) => toast.id);
+    setOwnedIds((previous) => sameIds(previous, selectedIds) ? previous : selectedIds);
+    const unchanged = sameIds(reported.current, foldedIds);
+    if (!unchanged) reported.current = foldedIds;
+    if (!unchanged || replacement && !reporting.current) {
+      reporting.current = true;
+      queueMicrotask(() => {
+        reporting.current = false;
+      });
+      fold.current?.(reported.current);
+    }
+    if (!capacity.ready) return;
+    const present = new Set(toasts.map((toast) => toast.id));
+    for (const id of announced.current.keys()) if (!present.has(id)) announced.current.delete(id);
+    const eligible = onFold ? toasts : shown;
+    const fresh = eligible.filter((toast) => !wasAnnounced(toast)).map((toast) => toast.id);
+    for (const toast of eligible) announced.current.set(toast.id, noticeIdentity(toast));
+    const kept = unheard.filter((id) => eligible.some((toast) => toast.id === id));
+    if (fresh.length) setUnheard(fresh);
+    else if (kept.length < unheard.length) setUnheard(kept);
+  });
+  useLayoutEffect3(
+    () => () => {
+      reported.current = [];
+      fold.current?.([]);
+    },
+    []
+  );
+  const announcing = (onFold ? toasts : shown).filter((toast) => unheard.includes(toast.id));
+  return /* @__PURE__ */ jsxs34(Fragment21, { children: [
+    /* @__PURE__ */ jsx52("div", { ref: stack, "data-part": "toast-stack", className: cn("chalk-toasts", className), children: shown.map((toast) => /* @__PURE__ */ jsx52(ChalkToast, { ...toast, announce: toast.announcementText === void 0 && noticeAnnouncement(toast) === "", onDismiss: () => onDismiss(toast.id) }, toast.id)) }),
+    /* @__PURE__ */ jsxs34("div", { "data-part": "notice-announcer", className: "sr-only", children: [
+      /* @__PURE__ */ jsx52("div", { "aria-live": "polite", children: announcing.filter((toast) => toast.type !== "error").map((toast) => /* @__PURE__ */ jsx52("div", { children: noticeAnnouncement(toast) }, JSON.stringify([toast.id, noticeIdentity(toast)]))) }),
+      /* @__PURE__ */ jsx52("div", { "aria-live": "assertive", children: announcing.filter((toast) => toast.type === "error").map((toast) => /* @__PURE__ */ jsx52("div", { children: noticeAnnouncement(toast) }, JSON.stringify([toast.id, noticeIdentity(toast)]))) })
+    ] })
+  ] });
+});
+function useShortCall(stack, enabled) {
+  const [short, setShort] = useState29(null);
+  useLayoutEffect3(() => {
+    if (!enabled) {
+      setShort(null);
+      return;
+    }
+    const call = stack.current?.closest("[data-part='call-frame']");
+    const read3 = () => setShort(Boolean(call && call.clientHeight > 0 && call.clientHeight < FOLD_BELOW_PX));
+    read3();
+    if (!call || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => flushSync2(read3));
+    observer.observe(call);
+    return () => observer.disconnect();
+  }, [stack, enabled]);
+  return short;
+}
+function sameIds(a, b) {
+  return a.length === b.length && a.every((id, index) => id === b[index]);
+}
+
 // src/internal/call-motion.ts
-import { useEffect as useEffect20, useState as useState27 } from "react";
+import { useEffect as useEffect20, useState as useState30 } from "react";
 var moves = /* @__PURE__ */ new WeakMap();
 function captureFlip(elements) {
   const previous = Array.from(elements, (element) => ({ element, box: element.getBoundingClientRect() }));
@@ -5702,8 +6051,9 @@ function playFlip(previous) {
   }
   return next.map(({ element, next: box }) => ({ element, box }));
 }
+var ACTIVE_LAYERS = '[role="menu"],[role="dialog"],[data-part="toast"],[data-part="notice-button"],[data-chalk-drawer]';
 function useIdleChrome(root, enabled) {
-  const [idle, setIdle] = useState27(false);
+  const [idle, setIdle] = useState30(false);
   const fine = useMediaQuery("(pointer:fine) and (min-width:641px)");
   useEffect20(() => {
     const element = root.current;
@@ -5713,7 +6063,7 @@ function useIdleChrome(root, enabled) {
       setIdle(false);
       clearTimeout(timer);
       timer = setTimeout(() => {
-        const layer = element.querySelector('[role="menu"],[role="dialog"],[data-part="toast"],[data-chalk-drawer]');
+        const layer = element.querySelector(ACTIVE_LAYERS);
         const focused = element.querySelector(".chalk-frame-header :focus-visible,.chalk-frame-dock :focus-visible");
         if (!layer && !focused) setIdle(true);
         else poke();
@@ -5721,8 +6071,7 @@ function useIdleChrome(root, enabled) {
     };
     for (const event of ["pointermove", "pointerdown", "keydown", "focusin"]) element.addEventListener(event, poke);
     const observer = new MutationObserver((records) => {
-      const selector = '[role="menu"],[role="dialog"],[data-part="toast"],[data-chalk-drawer]';
-      if (records.some((record) => [...record.addedNodes, ...record.removedNodes].some((node) => node instanceof Element && (node.matches(selector) || node.querySelector(selector))))) poke();
+      if (records.some((record) => [...record.addedNodes, ...record.removedNodes].some((node) => node instanceof Element && (node.matches(ACTIVE_LAYERS) || node.querySelector(ACTIVE_LAYERS))))) poke();
     });
     observer.observe(element, { childList: true, subtree: true });
     poke();
@@ -5736,7 +6085,7 @@ function useIdleChrome(root, enabled) {
 }
 
 // src/components/space-header/SpaceHeader.tsx
-import React14, { useCallback as useCallback6, useRef as useRef20, useState as useState29 } from "react";
+import React14, { useCallback as useCallback6, useRef as useRef20, useState as useState32 } from "react";
 
 // src/internal/useSoundsSetting.ts
 import { useSyncExternalStore as useSyncExternalStore3 } from "react";
@@ -5788,7 +6137,7 @@ function LayoutMenu({ layout, onLayoutChange }) {
 
 // src/components/space-header/CallDetails.tsx
 import { Dialog as Dialog2 } from "@base-ui/react/dialog";
-import { useEffect as useEffect21, useRef as useRef18, useState as useState28 } from "react";
+import { useEffect as useEffect21, useRef as useRef18, useState as useState31 } from "react";
 
 // src/components/space-header/share-qr.ts
 function shareQr(text) {
@@ -5918,7 +6267,7 @@ function shareQr(text) {
 }
 
 // src/components/space-header/CallDetails.tsx
-import { Fragment as Fragment20, jsx as jsx54, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx54, jsxs as jsxs35 } from "react/jsx-runtime";
 var CALL_SHORTCUTS = [
   ["Mute or unmute", "\u2318 D"],
   ["Turn camera on or off", "\u2318 E"],
@@ -5936,17 +6285,21 @@ function CallDialog({
   onClose,
   onReportProblem,
   diagnostics,
-  returnFocus
+  returnFocus,
+  focusScope,
+  unavailableReason
 }) {
   const container = useRef18(null);
   const reportInput = useRef18(null);
-  const [text, setText] = useState28("");
-  const [includeDiagnostics, setIncludeDiagnostics] = useState28(true);
-  const [status, setStatus] = useState28("idle");
-  const [error, setError] = useState28("");
+  const reportOpener = useRef18(null);
+  const [text, setText] = useState31("");
+  const [includeDiagnostics, setIncludeDiagnostics] = useState31(false);
+  const [status, setStatus] = useState31("idle");
+  const [error, setError] = useState31("");
   useEffect21(() => {
     if (open && kind === "report") {
       setText("");
+      setIncludeDiagnostics(false);
       setError("");
       setStatus("idle");
     }
@@ -5962,68 +6315,107 @@ function CallDialog({
         Dialog2.Root,
         {
           open,
-          onOpenChange: (open2) => {
+          onOpenChange: (open2, event) => {
+            if (!open2 && status === "sending") {
+              event.cancel();
+              return;
+            }
             if (!open2) onClose();
           },
-          children: /* @__PURE__ */ jsxs34(Dialog2.Portal, { container, children: [
+          children: /* @__PURE__ */ jsxs35(Dialog2.Portal, { container, children: [
             /* @__PURE__ */ jsx54(Dialog2.Backdrop, { className: "chalk-shell-modal-backdrop" }),
-            /* @__PURE__ */ jsxs34(Dialog2.Popup, { initialFocus: kind === "report" ? reportInput : void 0, finalFocus: returnFocus, className: "chalk-shell-modal", children: [
-              kind === "report" && status === "sent" ? null : /* @__PURE__ */ jsxs34("div", { className: "chalk-shell-modal-heading", children: [
-                /* @__PURE__ */ jsx54(Dialog2.Title, { children: kind === "shortcuts" ? "Keyboard shortcuts" : "Report a problem" }),
-                /* @__PURE__ */ jsx54(
-                  Dialog2.Close,
-                  {
-                    render: /* @__PURE__ */ jsx54(ChalkIconButton, { "aria-label": "Close", size: "sm", children: /* @__PURE__ */ jsx54("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx54("path", { d: "m6 6 12 12M6 18 18 6" }) }) })
-                  }
-                )
-              ] }),
-              kind === "shortcuts" ? /* @__PURE__ */ jsx54("dl", { className: "chalk-shell-shortcuts", children: CALL_SHORTCUTS.map(([label, keys]) => /* @__PURE__ */ jsxs34("div", { style: { display: "contents" }, children: [
-                /* @__PURE__ */ jsx54("dt", { children: label }),
-                /* @__PURE__ */ jsx54("dd", { children: keys.split(" ").map((key, index) => /* @__PURE__ */ jsx54("kbd", { children: key }, `${key}${index}`)) })
-              ] }, label)) }) : status === "sent" ? /* @__PURE__ */ jsxs34("div", { className: "chalk-shell-report-sent", role: "status", children: [
-                /* @__PURE__ */ jsx54("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx54("path", { d: "m5 12 4 4L19 6" }) }),
-                /* @__PURE__ */ jsx54(Dialog2.Title, { children: "Sent" }),
-                /* @__PURE__ */ jsx54("p", { children: "Thanks. We\u2019ll look into it." }),
-                /* @__PURE__ */ jsx54(ChalkButton, { variant: "solid", onClick: onClose, children: "Done" })
-              ] }) : /* @__PURE__ */ jsxs34(
-                "form",
-                {
-                  className: "chalk-shell-report",
-                  onSubmit: (event) => {
-                    event.preventDefault();
-                    if (!text.trim() || !onReportProblem || status === "sending") return;
-                    setStatus("sending");
-                    setError("");
-                    void Promise.resolve().then(() => onReportProblem({ description: text.trim(), diagnostics: includeDiagnostics ? diagnostics : void 0 })).then(
-                      () => setStatus("sent"),
-                      () => {
-                        setStatus("idle");
-                        setError("Your report could not be sent. Try again.");
+            /* @__PURE__ */ jsxs35(
+              Dialog2.Popup,
+              {
+                initialFocus: kind === "report" ? () => {
+                  const opener = reportInput.current?.ownerDocument.activeElement;
+                  reportOpener.current = opener instanceof HTMLElement && focusScope.current?.contains(opener) ? opener : null;
+                  return reportInput.current;
+                } : void 0,
+                finalFocus: kind === "report" ? () => reportFocusTarget(focusScope.current, reportOpener.current) : returnFocus,
+                className: "chalk-shell-modal",
+                children: [
+                  kind === "report" && status === "sent" ? null : /* @__PURE__ */ jsxs35("div", { className: "chalk-shell-modal-heading", children: [
+                    /* @__PURE__ */ jsx54(Dialog2.Title, { children: kind === "shortcuts" ? "Keyboard shortcuts" : "Report a problem" }),
+                    /* @__PURE__ */ jsx54(
+                      Dialog2.Close,
+                      {
+                        disabled: status === "sending",
+                        render: /* @__PURE__ */ jsx54(ChalkIconButton, { "aria-label": "Close", size: "sm", children: /* @__PURE__ */ jsx54("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx54("path", { d: "m6 6 12 12M6 18 18 6" }) }) })
                       }
-                    );
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx54("label", { htmlFor: "chalk-problem", children: "What went wrong?" }),
-                    /* @__PURE__ */ jsx54("textarea", { ref: reportInput, id: "chalk-problem", rows: 4, required: true, disabled: status === "sending", value: text, onChange: (event) => setText(event.target.value), placeholder: "Tell us what happened\u2026" }),
-                    /* @__PURE__ */ jsxs34("label", { className: "chalk-shell-report-check", children: [
-                      /* @__PURE__ */ jsx54("input", { type: "checkbox", disabled: status === "sending", checked: includeDiagnostics, onChange: (event) => setIncludeDiagnostics(event.target.checked) }),
-                      " Include diagnostics"
-                    ] }),
-                    error ? /* @__PURE__ */ jsx54("p", { role: "alert", children: error }) : null,
-                    /* @__PURE__ */ jsxs34("div", { className: "chalk-shell-report-actions", children: [
-                      /* @__PURE__ */ jsx54(ChalkButton, { onClick: onClose, disabled: status === "sending", children: "Cancel" }),
-                      /* @__PURE__ */ jsx54(ChalkButton, { type: "submit", variant: "solid", disabled: !text.trim() || status === "sending", children: status === "sending" ? "Sending\u2026" : "Send" })
-                    ] })
-                  ]
-                }
-              )
-            ] })
+                    )
+                  ] }),
+                  kind === "shortcuts" ? /* @__PURE__ */ jsx54("dl", { className: "chalk-shell-shortcuts", children: CALL_SHORTCUTS.map(([label, keys]) => /* @__PURE__ */ jsxs35("div", { style: { display: "contents" }, children: [
+                    /* @__PURE__ */ jsx54("dt", { children: label }),
+                    /* @__PURE__ */ jsx54("dd", { children: keys.split(" ").map((key, index) => /* @__PURE__ */ jsx54("kbd", { children: key }, `${key}${index}`)) })
+                  ] }, label)) }) : status === "sent" ? /* @__PURE__ */ jsxs35("div", { className: "chalk-shell-report-sent", role: "status", children: [
+                    /* @__PURE__ */ jsx54("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx54("path", { d: "m5 12 4 4L19 6" }) }),
+                    /* @__PURE__ */ jsx54(Dialog2.Title, { children: "Sent" }),
+                    /* @__PURE__ */ jsx54("p", { children: "Thanks. We\u2019ll look into it." }),
+                    /* @__PURE__ */ jsx54(ChalkButton, { variant: "solid", onClick: onClose, children: "Done" })
+                  ] }) : /* @__PURE__ */ jsxs35(
+                    "form",
+                    {
+                      className: "chalk-shell-report",
+                      onSubmit: (event) => {
+                        event.preventDefault();
+                        if (!text.trim() || !onReportProblem || status === "sending" || unavailableReason) return;
+                        setStatus("sending");
+                        setError("");
+                        void Promise.resolve().then(() => onReportProblem({ description: text.trim(), diagnostics: includeDiagnostics && diagnostics.trim() ? diagnostics : void 0 })).then(
+                          () => setStatus("sent"),
+                          () => {
+                            setStatus("idle");
+                            setError("Your report could not be sent. Try again.");
+                          }
+                        );
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx54("label", { htmlFor: "chalk-problem", children: "What went wrong?" }),
+                        /* @__PURE__ */ jsx54("textarea", { ref: reportInput, id: "chalk-problem", rows: 4, required: true, disabled: status === "sending", value: text, onChange: (event) => setText(Array.from(event.target.value).slice(0, 1e3).join("")), placeholder: "Tell us what happened\u2026" }),
+                        diagnostics.trim() ? /* @__PURE__ */ jsxs35("label", { className: "chalk-shell-report-check", children: [
+                          /* @__PURE__ */ jsx54("input", { type: "checkbox", disabled: status === "sending", checked: includeDiagnostics, onChange: (event) => setIncludeDiagnostics(event.target.checked) }),
+                          " Include diagnostics"
+                        ] }) : null,
+                        error ? /* @__PURE__ */ jsx54("p", { role: "alert", children: error }) : null,
+                        unavailableReason ? /* @__PURE__ */ jsx54("p", { role: "alert", children: unavailableReason }) : null,
+                        /* @__PURE__ */ jsxs35("div", { className: "chalk-shell-report-actions", children: [
+                          /* @__PURE__ */ jsx54(ChalkButton, { onClick: onClose, disabled: status === "sending", children: "Cancel" }),
+                          /* @__PURE__ */ jsx54(ChalkButton, { type: "submit", variant: "solid", disabled: !text.trim() || status === "sending" || Boolean(unavailableReason), children: status === "sending" ? "Sending\u2026" : "Send" })
+                        ] })
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
           ] })
         }
       )
     }
   );
 }
+function reportFocusTarget(scope, opener) {
+  if (usableReportFocusTarget(opener)) return opener;
+  if (!scope?.isConnected) return false;
+  for (const selector of ['button[data-part="call-name"]', '[data-part="status-actions"] button', 'main, [role="main"]']) {
+    for (const target of [scope, ...scope.querySelectorAll(selector)]) {
+      if (!target.matches(selector) || !usableReportFocusTarget(target)) continue;
+      if (target.matches('main, [role="main"]')) target.tabIndex = -1;
+      return target;
+    }
+  }
+  return false;
+}
+function usableReportFocusTarget(target) {
+  if (!target?.isConnected || target.matches(':disabled, [aria-disabled="true"]') || target.closest("[inert]") || target.getClientRects().length === 0) return false;
+  const visibility = getComputedStyle(target).visibility;
+  if (visibility === "hidden" || visibility === "collapse") return false;
+  for (let element = target; element; element = element.parentElement) {
+    if (getComputedStyle(element).opacity === "0") return false;
+  }
+  return true;
+}
 function CallDetails({
   shareUrl,
   spaceName,
@@ -6038,46 +6430,46 @@ function CallDetails({
 }) {
   const link = shareUrl ?? (typeof location === "undefined" ? "" : location.href);
   const qr = shareQr(link);
-  const [details, setDetails] = useState28(false);
-  return /* @__PURE__ */ jsxs34("div", { className: "chalk-details", children: [
-    /* @__PURE__ */ jsxs34("div", { className: "chalk-shell-details-heading", children: [
+  const [details, setDetails] = useState31(false);
+  return /* @__PURE__ */ jsxs35("div", { className: "chalk-details", children: [
+    /* @__PURE__ */ jsxs35("div", { className: "chalk-shell-details-heading", children: [
       /* @__PURE__ */ jsx54("h2", { children: spaceName }),
       /* @__PURE__ */ jsx54(ChalkIconButton, { "aria-label": "Close", size: "sm", onClick: onClose, children: /* @__PURE__ */ jsx54("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx54("path", { d: "m6 6 12 12M6 18 18 6" }) }) })
     ] }),
-    /* @__PURE__ */ jsxs34("section", { className: "chalk-shell-section", children: [
+    /* @__PURE__ */ jsxs35("section", { className: "chalk-shell-section", children: [
       /* @__PURE__ */ jsx54("h3", { className: "chalk-shell-label", children: "Share" }),
-      /* @__PURE__ */ jsxs34("div", { className: "chalk-shell-link", children: [
+      /* @__PURE__ */ jsxs35("div", { className: "chalk-shell-link", children: [
         /* @__PURE__ */ jsx54("span", { dir: "ltr", children: link.replace(/^https?:\/\//, "") }),
         /* @__PURE__ */ jsx54(ChalkCopyButton, { text: link, label: "Copy link" })
       ] }),
-      qr ? /* @__PURE__ */ jsxs34("div", { className: "chalk-shell-qr-row", children: [
-        /* @__PURE__ */ jsxs34("svg", { "data-part": "share-qr", className: "chalk-shell-qr", viewBox: `0 0 ${qr.length + 8} ${qr.length + 8}`, role: "img", "aria-label": "Scan to join this call", shapeRendering: "crispEdges", children: [
+      qr ? /* @__PURE__ */ jsxs35("div", { className: "chalk-shell-qr-row", children: [
+        /* @__PURE__ */ jsxs35("svg", { "data-part": "share-qr", className: "chalk-shell-qr", viewBox: `0 0 ${qr.length + 8} ${qr.length + 8}`, role: "img", "aria-label": "Scan to join this call", shapeRendering: "crispEdges", children: [
           /* @__PURE__ */ jsx54("rect", { width: "100%", height: "100%", fill: "white" }),
           /* @__PURE__ */ jsx54("path", { d: qr.flatMap((row, y) => row.flatMap((dark, x) => dark ? [`M${x + 4},${y + 4}h1v1h-1z`] : [])).join("") })
         ] }),
         /* @__PURE__ */ jsx54("p", { children: "Scan with a phone camera to join this call." })
       ] }) : null
     ] }),
-    diagnostics.length ? /* @__PURE__ */ jsxs34("section", { className: "chalk-shell-section", children: [
-      /* @__PURE__ */ jsxs34("button", { type: "button", className: "chalk-shell-detail-action chalk-shell-connection", "aria-expanded": details, onClick: () => setDetails(!details), children: [
+    diagnostics.length ? /* @__PURE__ */ jsxs35("section", { className: "chalk-shell-section", children: [
+      /* @__PURE__ */ jsxs35("button", { type: "button", className: "chalk-shell-detail-action chalk-shell-connection", "aria-expanded": details, onClick: () => setDetails(!details), children: [
         /* @__PURE__ */ jsx54("span", { className: "chalk-shell-connection-bars", "aria-hidden": "true", children: [6, 9, 12, 15].map((height) => /* @__PURE__ */ jsx54("i", { style: { height } }, height)) }),
-        /* @__PURE__ */ jsxs34("span", { children: [
+        /* @__PURE__ */ jsxs35("span", { children: [
           "Connection: ",
           diagnostics[0]?.value.toLowerCase()
         ] }),
         /* @__PURE__ */ jsx54("span", { className: "chalk-shell-connection-details", children: details ? "Hide details" : "Details" }),
         /* @__PURE__ */ jsx54(ShellIcon, { name: details ? "up2" : "down", size: 18 })
       ] }),
-      details ? /* @__PURE__ */ jsxs34(Fragment20, { children: [
-        /* @__PURE__ */ jsx54("dl", { className: "chalk-shell-diagnostics", children: diagnostics.map(({ label, value }) => /* @__PURE__ */ jsxs34("div", { style: { display: "contents" }, children: [
+      details ? /* @__PURE__ */ jsxs35(Fragment22, { children: [
+        /* @__PURE__ */ jsx54("dl", { className: "chalk-shell-diagnostics", children: diagnostics.map(({ label, value }) => /* @__PURE__ */ jsxs35("div", { style: { display: "contents" }, children: [
           /* @__PURE__ */ jsx54("dt", { children: label }),
           /* @__PURE__ */ jsx54("dd", { children: value })
         ] }, label)) }),
         /* @__PURE__ */ jsx54("div", { className: "chalk-shell-diagnostics-copy", children: /* @__PURE__ */ jsx54(ChalkCopyButton, { text: diagnostics.map(({ label, value }) => `${label}: ${value}`).join("\n"), label: "Copy diagnostics", announcement: "Diagnostics copied", showLabel: true }) })
       ] }) : null
     ] }) : null,
-    /* @__PURE__ */ jsxs34("section", { className: "chalk-shell-section", children: [
-      /* @__PURE__ */ jsxs34("div", { className: "chalk-details-row", children: [
+    /* @__PURE__ */ jsxs35("section", { className: "chalk-shell-section", children: [
+      /* @__PURE__ */ jsxs35("div", { className: "chalk-details-row", children: [
         /* @__PURE__ */ jsx54("span", { children: "Appearance" }),
         /* @__PURE__ */ jsx54(
           ChalkSegmentedControl,
@@ -6093,15 +6485,15 @@ function CallDetails({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs34("button", { type: "button", role: "switch", "aria-label": "Sounds", "aria-checked": sounds, className: "chalk-shell-detail-action", onClick: () => onSoundsChange(!sounds), children: [
+      /* @__PURE__ */ jsxs35("button", { type: "button", role: "switch", "aria-label": "Sounds", "aria-checked": sounds, className: "chalk-shell-detail-action", onClick: () => onSoundsChange(!sounds), children: [
         /* @__PURE__ */ jsx54("span", { children: "Sounds" }),
         /* @__PURE__ */ jsx54("span", { className: "chalk-switch", "aria-checked": sounds, "aria-hidden": "true", children: /* @__PURE__ */ jsx54("span", {}) })
       ] }),
-      /* @__PURE__ */ jsxs34("button", { type: "button", className: "chalk-shell-detail-action", "aria-haspopup": "dialog", onClick: () => onDialog("shortcuts"), children: [
+      /* @__PURE__ */ jsxs35("button", { type: "button", className: "chalk-shell-detail-action", "aria-haspopup": "dialog", onClick: () => onDialog("shortcuts"), children: [
         "Keyboard shortcuts",
         /* @__PURE__ */ jsx54(ShellIcon, { name: "right", size: 18 })
       ] }),
-      onReportProblem ? /* @__PURE__ */ jsxs34("button", { type: "button", className: "chalk-shell-detail-action", "aria-haspopup": "dialog", onClick: () => onDialog("report"), children: [
+      onReportProblem ? /* @__PURE__ */ jsxs35("button", { type: "button", className: "chalk-shell-detail-action", "aria-haspopup": "dialog", onClick: () => onDialog("report"), children: [
         "Report a problem",
         /* @__PURE__ */ jsx54(ShellIcon, { name: "right", size: 18 })
       ] }) : null
@@ -6181,18 +6573,19 @@ function formatDuration(seconds) {
 }
 
 // src/components/space-header/SpaceHeader.tsx
-import { Fragment as Fragment21, jsx as jsx55, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx55, jsxs as jsxs36 } from "react/jsx-runtime";
 var SpaceHeader = React14.memo((props) => {
   const { spaceName, duration = 0, isRecording = false, layout = "focus", onLayoutChange, className, weakConnection } = props;
   const [sounds, setSounds] = useSoundsSetting();
   const triggerRef = useRef20(null);
-  const [open, setOpen] = useState29(false);
-  const [dialog, setDialog] = useState29({ kind: "shortcuts", open: false });
+  const focusScope = useRef20(null);
+  const [open, setOpen] = useState32(false);
+  const [dialog, setDialog] = useState32({ kind: "shortcuts", open: false });
   const showShortcuts = useCallback6(() => setDialog({ kind: "shortcuts", open: true }), []);
   useCallShortcuts(props.shortcuts, showShortcuts);
   const phone = useMediaQuery("(max-width: 640px)");
   const chevron = /* @__PURE__ */ jsx55("svg", { width: phone ? "16" : "14", height: phone ? "16" : "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", "aria-hidden": "true", children: /* @__PURE__ */ jsx55("path", { d: "m6 9 6 6 6-6" }) });
-  const trigger = /* @__PURE__ */ jsxs35("button", { ref: triggerRef, type: "button", "data-part": "call-name", "aria-label": "Call details", className: "chalk-call-name", children: [
+  const trigger = /* @__PURE__ */ jsxs36("button", { ref: triggerRef, type: "button", "data-part": "call-name", "aria-label": "Call details", className: "chalk-call-name", children: [
     /* @__PURE__ */ jsx55("span", { dir: "auto", children: spaceName }),
     /* @__PURE__ */ jsx55("span", { "data-part": "call-timer", className: "chalk-call-timer", children: formatDuration(duration) }),
     chevron
@@ -6201,26 +6594,28 @@ var SpaceHeader = React14.memo((props) => {
     CallDetails,
     {
       ...props,
+      onReportProblem: props.reportUnavailableReason ? void 0 : props.onReportProblem,
       onClose: () => setOpen(false),
       sounds,
       onSoundsChange: setSounds,
       onDialog: (kind) => {
         setOpen(false);
-        setDialog({ kind, open: true });
+        if (kind === "report" && props.onOpenReportProblem) props.onOpenReportProblem();
+        else setDialog({ kind, open: true });
       }
     }
   );
-  return /* @__PURE__ */ jsxs35("header", { "data-part": "header-region", className: cn("chalk-header", className), role: "banner", children: [
+  return /* @__PURE__ */ jsxs36("header", { ref: focusScope, "data-part": "header-region", className: cn("chalk-header", className), role: "banner", children: [
     /* @__PURE__ */ jsx55(ShellStyles, {}),
-    /* @__PURE__ */ jsxs35("div", { className: "chalk-header-title flex min-w-0 items-center gap-3", children: [
-      phone ? /* @__PURE__ */ jsxs35(Fragment21, { children: [
-        /* @__PURE__ */ jsxs35("button", { ref: triggerRef, type: "button", "data-call-link-trigger": true, "data-part": "call-name", className: "chalk-call-name chalk-call-name-phone", "aria-label": "Call details", "aria-haspopup": "dialog", "aria-expanded": open, onClick: () => setOpen(true), children: [
+    /* @__PURE__ */ jsxs36("div", { className: "chalk-header-title flex min-w-0 items-center gap-3", children: [
+      phone ? /* @__PURE__ */ jsxs36(Fragment23, { children: [
+        /* @__PURE__ */ jsxs36("button", { ref: triggerRef, type: "button", "data-call-link-trigger": true, "data-part": "call-name", className: "chalk-call-name chalk-call-name-phone", "aria-label": "Call details", "aria-haspopup": "dialog", "aria-expanded": open, onClick: () => setOpen(true), children: [
           /* @__PURE__ */ jsx55("span", { dir: "auto", children: spaceName }),
           chevron
         ] }),
         /* @__PURE__ */ jsx55("span", { "data-part": "call-timer", className: "chalk-call-timer", children: formatDuration(duration) }),
-        /* @__PURE__ */ jsxs35(ChalkSheet, { variant: "details", open, onOpenChange: setOpen, title: spaceName, accessibleLabel: "Call details", children: [
-          props.onCallLinkToggle ? /* @__PURE__ */ jsxs35(
+        /* @__PURE__ */ jsxs36(ChalkSheet, { variant: "details", open, onOpenChange: setOpen, title: spaceName, accessibleLabel: "Call details", children: [
+          props.onCallLinkToggle ? /* @__PURE__ */ jsxs36(
             "button",
             {
               type: "button",
@@ -6240,46 +6635,59 @@ var SpaceHeader = React14.memo((props) => {
         ] })
       ] }) : /* @__PURE__ */ jsx55(ChalkPopover, { open, onOpenChange: setOpen, tooltip: "Call details", trigger, label: "Call details", className: "chalk-call-details", alignOffset: -2, children: content }),
       weakConnection ? /* @__PURE__ */ jsx55("span", { className: "chalk-shell-quality", role: "img", "aria-label": "Your connection is weak", children: [5, 8, 11, 15].map((height) => /* @__PURE__ */ jsx55("i", { style: { height } }, height)) }) : null,
-      isRecording ? /* @__PURE__ */ jsxs35("span", { className: "chalk-shell-recording", children: [
+      isRecording ? /* @__PURE__ */ jsxs36("span", { className: "chalk-shell-recording", children: [
         /* @__PURE__ */ jsx55("i", {}),
         "Rec"
       ] }) : null
     ] }),
-    /* @__PURE__ */ jsxs35("div", { className: "chalk-header-layout flex items-center gap-2", children: [
-      props.onTogglePeople ? /* @__PURE__ */ jsxs35("button", { type: "button", className: "chalk-shell-people-pill", "aria-label": `People, ${props.people?.length ?? 0}`, onClick: props.onTogglePeople, children: [
+    props.notices,
+    /* @__PURE__ */ jsxs36("div", { className: "chalk-header-layout flex items-center gap-2", children: [
+      props.onTogglePeople ? /* @__PURE__ */ jsxs36("button", { type: "button", className: "chalk-shell-people-pill", "aria-label": `People, ${props.people?.length ?? 0}`, onClick: props.onTogglePeople, children: [
         /* @__PURE__ */ jsx55("span", { className: "chalk-shell-faces", children: props.people?.slice(0, 3).map((person) => /* @__PURE__ */ jsx55(Avatar, { name: person.displayName, size: "xs" }, person.participantId)) }),
         /* @__PURE__ */ jsx55("span", { children: props.people?.length ?? 0 }),
         props.knockCount ? /* @__PURE__ */ jsx55("span", { "aria-label": `${props.knockCount} waiting to join`, children: props.knockCount }) : null
       ] }) : null,
       onLayoutChange ? /* @__PURE__ */ jsx55(LayoutMenu, { layout, onLayoutChange }) : null
     ] }),
-    /* @__PURE__ */ jsx55(CallDialog, { returnFocus: triggerRef, kind: dialog.kind, open: dialog.open, onClose: () => setDialog((current) => ({ ...current, open: false })), onReportProblem: props.onReportProblem, diagnostics: props.diagnostics?.map(({ label, value }) => `${label}: ${value}`).join("\n") ?? "" })
+    /* @__PURE__ */ jsx55(
+      CallDialog,
+      {
+        focusScope,
+        returnFocus: triggerRef,
+        kind: dialog.kind,
+        open: dialog.open,
+        onClose: () => setDialog((current) => ({ ...current, open: false })),
+        onReportProblem: props.onReportProblem,
+        unavailableReason: props.reportUnavailableReason,
+        diagnostics: props.diagnostics?.map(({ label, value }) => `${label}: ${value}`).join("\n") ?? ""
+      }
+    )
   ] });
 });
 SpaceHeader.displayName = "SpaceHeader";
 
 // src/components/composite/ScreenShareView.tsx
-import { useEffect as useEffect23, useMemo as useMemo11, useRef as useRef21, useState as useState30 } from "react";
-import { Fragment as Fragment22, jsx as jsx56, jsxs as jsxs36 } from "react/jsx-runtime";
-function ScreenSharePresentation({ sharedByName, media, mediaVisible, state, isLocal = false, hasAudio = false, capture, primary = true, pinned, hidden, style, onClick, onDoubleClick, onStopSharing, onChangeShare, switcher, className }) {
+import { useEffect as useEffect23, useMemo as useMemo11, useRef as useRef21, useState as useState33 } from "react";
+import { Fragment as Fragment24, jsx as jsx56, jsxs as jsxs37 } from "react/jsx-runtime";
+function ScreenSharePresentation({ sharedByName, media, mediaVisible, state, isLocal = false, hasAudio = false, capture: capture2, primary = true, pinned, hidden, style, onClick, onDoubleClick, onStopSharing, onChangeShare, switcher, className }) {
   const root = useRef21(null);
-  const [fill, setFill] = useState30(false);
-  const [controlsOpen, setControlsOpen] = useState30(false);
-  const [poppedOut, setPoppedOut] = useState30(false);
-  const [zoom, setZoom] = useState30(false);
-  const [pending, setPending] = useState30(false);
-  const [error, setError] = useState30(null);
+  const [fill, setFill] = useState33(false);
+  const [controlsOpen, setControlsOpen] = useState33(false);
+  const [poppedOut, setPoppedOut] = useState33(false);
+  const [zoom, setZoom] = useState33(false);
+  const [pending, setPending] = useState33(false);
+  const [error, setError] = useState33(null);
   const status = state ?? (mediaVisible ? "live" : "connecting");
   const name = isLocal ? "Your screen" : `${sharedByName}'s screen`;
-  const source = capture?.surface === "window" ? "a window" : capture?.surface === "browser" ? "a tab" : capture?.surface === "monitor" ? "your screen" : null;
-  const run = async (command) => {
+  const source = capture2?.surface === "window" ? "a window" : capture2?.surface === "browser" ? "a tab" : capture2?.surface === "monitor" ? "your screen" : null;
+  const run = async (command, source2, action) => {
     if (pending) return;
     setPending(true);
     setError(null);
     try {
       await command();
     } catch (cause) {
-      setError(cause instanceof Error ? cause.message : "The share could not be changed.");
+      setError(source2 ? commandFailureMessage(commandFailure(cause), source2, action) : cause instanceof Error ? cause.message : "The share could not be changed.");
     } finally {
       setPending(false);
     }
@@ -6317,12 +6725,12 @@ function ScreenSharePresentation({ sharedByName, media, mediaVisible, state, isL
       hidden,
       style,
       className: cn("h-full w-full", className),
-      chip: /* @__PURE__ */ jsxs36(Fragment22, { children: [
+      chip: /* @__PURE__ */ jsxs37(Fragment24, { children: [
         /* @__PURE__ */ jsx56(StageIcon, { name: "share", size: 14, className: "shrink-0" }),
         /* @__PURE__ */ jsx56("span", { dir: "auto", className: "min-w-0 truncate [unicode-bidi:plaintext]", children: name }),
         !isLocal && hasAudio ? /* @__PURE__ */ jsx56(StageIcon, { name: "volume", size: 14, "aria-label": "With share audio", className: "shrink-0" }) : null
       ] }),
-      children: /* @__PURE__ */ jsxs36(
+      children: /* @__PURE__ */ jsxs37(
         "div",
         {
           ref: root,
@@ -6339,43 +6747,43 @@ function ScreenSharePresentation({ sharedByName, media, mediaVisible, state, isL
                 children: media
               }
             ) }),
-            poppedOut ? /* @__PURE__ */ jsxs36("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-2.5 p-4 text-center text-[var(--chalk-muted-text)]", children: [
+            poppedOut ? /* @__PURE__ */ jsxs37("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-2.5 p-4 text-center text-[var(--chalk-muted-text)]", children: [
               /* @__PURE__ */ jsx56(StageIcon, { name: "pip", size: 32 }),
-              /* @__PURE__ */ jsxs36("p", { className: "font-medium text-[var(--chalk-text)]", children: [
+              /* @__PURE__ */ jsxs37("p", { className: "font-medium text-[var(--chalk-text)]", children: [
                 name,
                 " is in a picture-in-picture window"
               ] }),
               /* @__PURE__ */ jsx56(ChalkButton, { className: "!h-8 !px-3", onClick: () => void popout(), children: "Bring it back" })
             ] }) : null,
-            status === "connecting" ? /* @__PURE__ */ jsxs36("div", { role: "status", className: "absolute inset-0 flex flex-col items-center justify-center gap-3 bg-[var(--chalk-tile)] text-[var(--chalk-muted-text)]", children: [
+            status === "connecting" ? /* @__PURE__ */ jsxs37("div", { role: "status", className: "absolute inset-0 flex flex-col items-center justify-center gap-3 bg-[var(--chalk-tile)] text-[var(--chalk-muted-text)]", children: [
               /* @__PURE__ */ jsx56("span", { className: "h-[18px] w-[18px] rounded-[50%] border-2 border-[var(--chalk-line-strong)] border-t-[var(--chalk-text)] motion-safe:animate-spin motion-safe:[animation-duration:.9s] motion-reduce:border-t-[var(--chalk-muted-text)]" }),
-              /* @__PURE__ */ jsxs36("p", { className: "font-medium text-[var(--chalk-text)]", children: [
+              /* @__PURE__ */ jsxs37("p", { className: "font-medium text-[var(--chalk-text)]", children: [
                 "Connecting to ",
                 sharedByName,
                 "\u2019s screen\u2026"
               ] })
             ] }) : null,
-            status === "paused" ? /* @__PURE__ */ jsxs36("div", { role: "status", className: "pointer-events-none absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 text-white", children: [
+            status === "paused" ? /* @__PURE__ */ jsxs37("div", { role: "status", className: "pointer-events-none absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 text-white", children: [
               /* @__PURE__ */ jsx56("span", { className: "grid h-12 w-12 place-items-center rounded-[50%] bg-[rgba(12,14,18,.82)]", children: /* @__PURE__ */ jsx56(StageIcon, { name: "pause", size: 24 }) }),
-              /* @__PURE__ */ jsxs36("p", { className: "rounded-[8px] bg-[rgba(12,14,18,.82)] px-3 py-1.5 font-semibold", children: [
+              /* @__PURE__ */ jsxs37("p", { className: "rounded-[8px] bg-[rgba(12,14,18,.82)] px-3 py-1.5 font-semibold", children: [
                 sharedByName,
                 " paused sharing"
               ] })
             ] }) : null,
-            status === "low-quality" ? /* @__PURE__ */ jsxs36("div", { role: "status", "data-part": "share-low-quality", className: "absolute top-2 left-2 z-30 flex h-7 items-center gap-2 rounded-[6px] bg-[rgba(12,14,18,.82)] px-2.5 text-[12px] font-medium text-white", children: [
+            status === "low-quality" ? /* @__PURE__ */ jsxs37("div", { role: "status", "data-part": "share-low-quality", className: "absolute top-2 left-2 z-30 flex h-7 items-center gap-2 rounded-[6px] bg-[rgba(12,14,18,.82)] px-2.5 text-[12px] font-medium text-white", children: [
               /* @__PURE__ */ jsx56(SignalBars, {}),
-              /* @__PURE__ */ jsxs36("span", { children: [
+              /* @__PURE__ */ jsxs37("span", { children: [
                 sharedByName,
                 "\u2019s connection is slow"
               ] })
             ] }) : null,
             primary ? switcher : null,
-            isLocal && primary ? /* @__PURE__ */ jsxs36("div", { "data-part": "share-local-overlay", role: "group", "aria-label": "Your share", className: "absolute top-2.5 right-2.5 left-2.5 z-30 flex items-center gap-2 rounded-[12px] bg-[rgba(12,14,18,.86)] p-2 pl-3.5 text-white max-[640px]:flex-wrap", children: [
-              /* @__PURE__ */ jsxs36("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+            isLocal && primary ? /* @__PURE__ */ jsxs37("div", { "data-part": "share-local-overlay", role: "group", "aria-label": "Your share", className: "absolute top-2.5 right-2.5 left-2.5 z-30 flex items-center gap-2 rounded-[12px] bg-[rgba(12,14,18,.86)] p-2 pl-3.5 text-white max-[640px]:flex-wrap", children: [
+              /* @__PURE__ */ jsxs37("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
                 /* @__PURE__ */ jsx56("b", { className: "truncate font-semibold", children: source ? `You\u2019re sharing ${source}` : "You\u2019re screen sharing" }),
-                capture?.surface === "monitor" || capture?.surface === "browser" ? /* @__PURE__ */ jsxs36("span", { className: "text-[12px] text-[#c9cbd1]", children: [
+                capture2?.surface === "monitor" || capture2?.surface === "browser" ? /* @__PURE__ */ jsxs37("span", { className: "text-[12px] text-[#c9cbd1]", children: [
                   "Seeing a mirror effect? That\u2019s normal when you share ",
-                  capture.surface === "browser" ? "this tab" : "your whole screen",
+                  capture2.surface === "browser" ? "this tab" : "your whole screen",
                   "."
                 ] }) : null
               ] }),
@@ -6387,12 +6795,12 @@ function ScreenSharePresentation({ sharedByName, media, mediaVisible, state, isL
                     { surface: "monitor", label: "Entire screen" },
                     { surface: "window", label: "Window" },
                     { surface: "browser", label: "Browser tab" }
-                  ].map((option) => /* @__PURE__ */ jsx56(ChalkMenuItem, { onClick: () => void run(() => onChangeShare({ surface: option.surface, audio: option.surface === "browser" })), children: option.label }, option.surface))
+                  ].map((option) => /* @__PURE__ */ jsx56(ChalkMenuItem, { onClick: () => void run(() => onChangeShare({ surface: option.surface, audio: option.surface === "browser" }), "screen", "start"), children: option.label }, option.surface))
                 }
               ) : null,
-              onStopSharing ? /* @__PURE__ */ jsx56(ChalkButton, { disabled: pending, tone: "danger", className: "!h-8 !bg-[var(--chalk-danger)] !px-3 !text-white hover:!bg-[var(--chalk-danger-hover)]", onClick: () => void run(onStopSharing), children: "Stop sharing" }) : null
+              onStopSharing ? /* @__PURE__ */ jsx56(ChalkButton, { disabled: pending, tone: "danger", className: "!h-8 !bg-[var(--chalk-danger)] !px-3 !text-white hover:!bg-[var(--chalk-danger-hover)]", onClick: () => void run(onStopSharing, "screen", "stop"), children: "Stop sharing" }) : null
             ] }) : null,
-            primary && !isLocal && status !== "connecting" ? /* @__PURE__ */ jsxs36("div", { role: "toolbar", "aria-label": "Share controls", className: cn("absolute right-2 bottom-2 z-30 flex gap-1.5 opacity-0 transition-opacity duration-150 group-hover/tile:opacity-100 focus-within:opacity-100", controlsOpen && "opacity-100"), children: [
+            primary && !isLocal && status !== "connecting" ? /* @__PURE__ */ jsxs37("div", { role: "toolbar", "aria-label": "Share controls", className: cn("absolute right-2 bottom-2 z-30 flex gap-1.5 opacity-0 transition-opacity duration-150 group-hover/tile:opacity-100 focus-within:opacity-100", controlsOpen && "opacity-100"), children: [
               /* @__PURE__ */ jsx56(ShareControl2, { label: fill ? "Fit the whole screen" : "Fill the tile", pressed: fill, onClick: () => setFill(!fill), children: /* @__PURE__ */ jsx56(StageIcon, { name: fill ? "fit" : "fill", size: 16 }) }),
               /* @__PURE__ */ jsx56(ShareControl2, { label: zoom ? "Zoom out" : "Zoom in", pressed: zoom, onClick: () => setZoom(!zoom), children: /* @__PURE__ */ jsx56(StageIcon, { name: zoom ? "zoom-out" : "zoom-in", size: 16 }) }),
               /* @__PURE__ */ jsx56(ShareControl2, { label: "Pop out", onClick: () => void popout(), children: /* @__PURE__ */ jsx56(StageIcon, { name: "pip", size: 16 }) }),
@@ -6454,16 +6862,17 @@ function ScreenShareView(props) {
 }
 
 // src/components/stage/Stage.tsx
-import { useCallback as useCallback7, useEffect as useEffect24, useMemo as useMemo12, useRef as useRef24, useState as useState32 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect24, useLayoutEffect as useLayoutEffect5, useMemo as useMemo12, useRef as useRef24, useState as useState35 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
 
 // src/components/stage/useStageDimensions.ts
-import { useLayoutEffect as useLayoutEffect2, useRef as useRef22, useState as useState31 } from "react";
-import { flushSync } from "react-dom";
+import { useLayoutEffect as useLayoutEffect4, useRef as useRef22, useState as useState34 } from "react";
+import { flushSync as flushSync3 } from "react-dom";
 function useStageDimensions(fallback3) {
   const ref = useRef22(null);
   const current = useRef22(fallback3);
-  const [dimensions, setDimensions] = useState31(fallback3);
-  useLayoutEffect2(() => {
+  const [dimensions, setDimensions] = useState34(fallback3);
+  useLayoutEffect4(() => {
     const element = ref.current;
     if (!element || typeof ResizeObserver === "undefined") return;
     const style = getComputedStyle(element);
@@ -6481,7 +6890,7 @@ function useStageDimensions(fallback3) {
       if (width <= 0 || height <= 0 || width === current.current.width && height === current.current.height) return;
       const next = { width, height };
       current.current = next;
-      flushSync(() => setDimensions(next));
+      flushSync3(() => setDimensions(next));
     });
     observer.observe(element);
     return () => observer.disconnect();
@@ -6503,7 +6912,7 @@ var StageMotion = class extends Component {
   getSnapshotBeforeUpdate(previous) {
     if (!this.props.animate || !this.animationsSupported() || previous.motionKey === this.props.motionKey) return null;
     const elements = this.elements();
-    return { play: captureFlip(elements), previous: new Set(elements) };
+    return { play: captureFlip(elements.filter((element) => element.dataset.stageItem !== WHITEBOARD_ITEM_ID)), previous: new Set(elements) };
   }
   componentDidUpdate(previous, _state, snapshot) {
     if (!this.animationsSupported()) return;
@@ -6534,7 +6943,7 @@ var StageMotion = class extends Component {
       } else if (entering.has(element)) {
         const transform = getComputedStyle(element).transform;
         const enter = element.animate(
-          [
+          element.dataset.stageItem === WHITEBOARD_ITEM_ID ? [{ opacity: 0 }, { opacity: 1 }] : [
             { opacity: 0, transform: `${transform} scale(.97)` },
             { opacity: 1, transform }
           ],
@@ -6555,7 +6964,7 @@ var StageMotion = class extends Component {
 
 // src/components/stage/StageContentTile.tsx
 import React17, { useRef as useRef23 } from "react";
-import { Fragment as Fragment23, jsx as jsx58, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx58, jsxs as jsxs38 } from "react/jsx-runtime";
 var BOARD_ACCENT = "var(--chalk-app-line-strong, currentColor)";
 function contentTileLabel(item) {
   return item.kind === "whiteboard" ? "Whiteboard tile" : `Screen share tile for ${item.participant.displayName}`;
@@ -6579,7 +6988,7 @@ var StageContentTile = React17.memo(function StageContentTile2({ item, active, .
     }
   );
 });
-var StageContentTileSurface = React17.memo(function StageContentTileSurface2({ item, pinned, onClick, onDoubleClick, className, style, hidden, media, mediaVisible, primary, state, onStopSharing, onChangeShare, capture, switcher }) {
+var StageContentTileSurface = React17.memo(function StageContentTileSurface2({ item, pinned, onClick, onDoubleClick, className, style, hidden, media, mediaVisible, primary, state, onStopSharing, onChangeShare, capture: capture2, switcher }) {
   if (item.kind === "screen-share")
     return /* @__PURE__ */ jsx58(
       ScreenSharePresentation,
@@ -6599,12 +7008,12 @@ var StageContentTileSurface = React17.memo(function StageContentTileSurface2({ i
         hidden,
         onStopSharing,
         onChangeShare,
-        capture,
+        capture: capture2,
         switcher
       }
     );
   const accentColor = BOARD_ACCENT;
-  return /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs38(
     TileShell,
     {
       label: contentTileLabel(item),
@@ -6616,7 +7025,7 @@ var StageContentTileSurface = React17.memo(function StageContentTileSurface2({ i
       style,
       dataTour: "video-grid",
       hidden,
-      chip: primary ? null : /* @__PURE__ */ jsxs37(Fragment23, { children: [
+      chip: primary ? null : /* @__PURE__ */ jsxs38(Fragment25, { children: [
         /* @__PURE__ */ jsx58(StageIcon, { name: "pen", size: 14, className: "shrink-0" }),
         /* @__PURE__ */ jsx58("span", { className: "min-w-0 truncate", children: contentTileName(item) })
       ] }),
@@ -6631,9 +7040,49 @@ StageContentTile.displayName = "StageContentTile";
 StageContentTileSurface.displayName = "StageContentTileSurface";
 
 // src/components/stage/Stage.tsx
-import { jsx as jsx59, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment26, jsx as jsx59, jsxs as jsxs39 } from "react/jsx-runtime";
 var FALLBACK_BOX = { width: 960, height: 540 };
 var TILE_FILL = { width: "100%", height: "100%" };
+function createContentPlacement() {
+  let host = null;
+  let home = null;
+  let overflow = null;
+  const move = () => {
+    const target = overflow ?? home;
+    if (host && target && host.parentNode !== target) target.appendChild(host);
+  };
+  return {
+    attachHost: (element) => {
+      host = element;
+      move();
+    },
+    attachHome: (element) => {
+      home = element;
+      move();
+    },
+    attachOverflow: (element) => {
+      overflow = element;
+      move();
+    }
+  };
+}
+function PersistentStageContent({ placement, children }) {
+  const [host, setHost] = useState35(null);
+  useLayoutEffect5(() => {
+    const element = document.createElement("div");
+    Object.assign(element.style, TILE_FILL);
+    placement.attachHost(element);
+    setHost(element);
+    return () => {
+      placement.attachHost(null);
+      element.remove();
+    };
+  }, [placement]);
+  return /* @__PURE__ */ jsxs39(Fragment26, { children: [
+    /* @__PURE__ */ jsx59("div", { ref: placement.attachHome, style: TILE_FILL }),
+    host && createPortal2(children, host)
+  ] });
+}
 function frameStyle(frame) {
   return { position: "absolute", left: 0, top: 0, transform: `translate(${frame.x}px, ${frame.y}px)`, width: frame.width, height: frame.height, zIndex: frame.role === "primary" ? 1 : 2 };
 }
@@ -6662,14 +7111,15 @@ function Stage({
 }) {
   const prefersReducedMotion = usePrefersReducedMotion();
   const { ref: boxRef, dimensions: box } = useStageDimensions(FALLBACK_BOX);
-  const [overflowOpen, setOverflowOpen] = useState32(false);
-  const [shareAspects, setShareAspects] = useState32(/* @__PURE__ */ new Map());
-  const [uncontrolledPinnedId, setUncontrolledPinnedId] = useState32(null);
+  const [overflowOpen, setOverflowOpen] = useState35(false);
+  const [shareAspects, setShareAspects] = useState35(/* @__PURE__ */ new Map());
+  const [uncontrolledPinnedId, setUncontrolledPinnedId] = useState35(null);
   const activePinnedId = pinnedId === void 0 ? uncontrolledPinnedId : pinnedId;
   const orderRef = useRef24([]);
   const seenAtRef = useRef24(/* @__PURE__ */ new Map());
   const nextSeenRef = useRef24(0);
   const lastSpeakerRef = useRef24(null);
+  const lastRemoteSpeakerRef = useRef24(null);
   const ordered = useMemo12(() => {
     if (!interactive) {
       seenAtRef.current = new Map(items.map((item, index) => [item.id, index]));
@@ -6692,8 +7142,9 @@ function Stage({
   }, [ordered]);
   useEffect24(() => {
     orderRef.current = ordered.map((item) => item.id);
-    const speaking = ordered.find((item) => item.kind === "participant" && (item.participant.isActiveSpeaker || item.participant.isSpeaking));
-    if (speaking) lastSpeakerRef.current = speaking.id;
+    const speaking = speakingParticipantId(ordered);
+    if (speaking) lastSpeakerRef.current = speaking;
+    lastRemoteSpeakerRef.current = floatingSpeakerId(ordered, lastRemoteSpeakerRef.current);
   }, [ordered]);
   const primary = useMemo12(() => layout === "grid" ? null : choosePrimary(ordered, { layout, pinnedId: activePinnedId, lastSpeakerId: interactive ? lastSpeakerRef.current : null, seenAt: seenAtRef.current }), [activePinnedId, interactive, layout, ordered]);
   const geometry = useMemo12(() => {
@@ -6711,21 +7162,39 @@ function Stage({
       );
     }
     const track = primary.kind === "screen-share" ? primary.participant.screenShareTrack : null;
-    const settings = track?.getSettings();
+    const settings2 = track?.getSettings();
     const observedAspect = shareAspects.get(primary.id);
-    const aspect = primary.kind === "whiteboard" ? null : observedAspect ?? (primary.kind === "screen-share" && primary.participant.screenShareAspect ? primary.participant.screenShareAspect : settings?.width && settings.height ? settings.width / settings.height : 16 / 9);
+    const aspect = primary.kind === "whiteboard" ? null : observedAspect ?? (primary.kind === "screen-share" && primary.participant.screenShareAspect ? primary.participant.screenShareAspect : settings2?.width && settings2.height ? settings2.width / settings2.height : 16 / 9);
     const remaining = ordered.filter((item) => item.id !== primary.id);
     const strip = [...remaining.filter(isContentItem), ...remaining.filter((item) => !isContentItem(item))];
+    const speakerId = floatingSpeakerId(remaining, interactive ? lastRemoteSpeakerRef.current : null);
+    const localId = remaining.find((item) => item.kind === "participant" && item.participant.isLocal)?.id ?? null;
     return fitSpotlight(
       box,
       primary.id,
       strip.map((item) => item.id),
-      { ...DEFAULT_SPOTLIGHT_OPTIONS, primaryAspect: aspect, content: primary.kind !== "participant", slimPhoneStrip: primary.kind === "whiteboard", wideIds: primary.kind === "screen-share" ? ordered.filter((item) => item.kind === "whiteboard").map((item) => item.id) : wideIds, maxPerPage }
+      {
+        ...DEFAULT_SPOTLIGHT_OPTIONS,
+        primaryAspect: aspect,
+        content: primary.kind !== "participant",
+        floatingPhonePeople: primary.kind === "whiteboard",
+        speakerId,
+        localId,
+        wideIds: primary.kind === "screen-share" ? ordered.filter((item) => item.kind === "whiteboard").map((item) => item.id) : wideIds,
+        maxPerPage
+      }
     );
-  }, [activePinnedId, box, layout, maxPerPage, minTileWidth, ordered, primary, shareAspects]);
+  }, [activePinnedId, box, interactive, layout, maxPerPage, minTileWidth, ordered, primary, shareAspects]);
   const framesById = useMemo12(() => new Map(geometry.frames.map((frame) => [frame.id, frame])), [geometry.frames]);
+  const foldedContent = ordered.filter((item) => item.kind !== "participant" && !framesById.has(item.id));
+  const renderContent = (item, context, primaryRenderer) => {
+    if (primaryRenderer && renderPrimaryContent) return /* @__PURE__ */ jsx59(StageContentTileSurface, { item, ...context, mediaVisible: true, media: renderPrimaryContent(item) });
+    if (renderContentTile) return renderContentTile(item, context);
+    if (renderPrimaryContent) return /* @__PURE__ */ jsx59(StageContentTileSurface, { item, ...context, mediaVisible: true, media: renderPrimaryContent(item) });
+    return /* @__PURE__ */ jsx59(StageContentTile, { item, ...context });
+  };
   const animate = animateOverride ?? !prefersReducedMotion;
-  const [displayed, setDisplayed] = useState32({
+  const [displayed, setDisplayed] = useState35({
     source: ordered,
     geometry,
     tiles: ordered.map((item) => ({ item, frame: framesById.get(item.id), leaving: false }))
@@ -6735,6 +7204,19 @@ function Stage({
     const tiles = ordered.map((item) => ({ item, frame: framesById.get(item.id), leaving: false }));
     setDisplayed({ source: ordered, geometry, tiles: [...tiles, ...animate ? displayed.tiles.filter((tile) => !present.has(tile.item.id)).map((tile) => ({ ...tile, leaving: true, departedAt: tile.departedAt ?? performance.now() })) : []] });
   }
+  const contentPlacements = useRef24(/* @__PURE__ */ new Map());
+  const contentPlacement = (id) => {
+    let placement = contentPlacements.current.get(id);
+    if (!placement) {
+      placement = createContentPlacement();
+      contentPlacements.current.set(id, placement);
+    }
+    return placement;
+  };
+  useEffect24(() => {
+    const present = new Set(displayed.tiles.map(({ item }) => item.id));
+    for (const id of contentPlacements.current.keys()) if (!present.has(id)) contentPlacements.current.delete(id);
+  }, [displayed.tiles]);
   useEffect24(() => {
     const departing = displayed.tiles.filter((tile) => tile.leaving);
     if (!departing.length) return;
@@ -6791,8 +7273,8 @@ function Stage({
     return /* @__PURE__ */ jsx59("div", { className: cn("flex h-full w-full items-center justify-center px-6 py-10", className), "data-tour": "video-grid", children: emptyState });
   }
   const participantCount = ordered.filter((item) => item.kind === "participant").length;
-  return /* @__PURE__ */ jsxs38("div", { className: cn("relative h-full w-full", className), "data-tour": "video-grid", children: [
-    /* @__PURE__ */ jsx59("div", { ref: boxRef, className: "relative h-full w-full outline-none", role: "group", "aria-label": `Stage with ${participantCount} ${participantCount === 1 ? "participant" : "participants"}`, "aria-disabled": interactive ? void 0 : true, "data-testid": "stage", children: /* @__PURE__ */ jsxs38(StageMotion, { rootRef: tilesRef, motionKey, animate, children: [
+  return /* @__PURE__ */ jsxs39("div", { className: cn("relative h-full w-full", className), "data-tour": "video-grid", children: [
+    /* @__PURE__ */ jsx59("div", { ref: boxRef, className: "relative h-full w-full outline-none", role: "group", "aria-label": `Stage with ${participantCount} ${participantCount === 1 ? "participant" : "participants"}`, "aria-disabled": interactive ? void 0 : true, "data-testid": "stage", children: /* @__PURE__ */ jsxs39(StageMotion, { rootRef: tilesRef, motionKey, animate, children: [
       displayed.tiles.map(({ item, frame, leaving }) => {
         const onPage = Boolean(frame) && !leaving;
         const style = TILE_FILL;
@@ -6821,14 +7303,10 @@ function Stage({
               gradientPreference
             }
           );
-        } else if (frame?.role === "primary" && renderPrimaryContent) {
-          content = /* @__PURE__ */ jsx59(StageContentTileSurface, { item, ...renderContext, mediaVisible: true, media: renderPrimaryContent(item) });
-        } else if (renderContentTile) {
-          content = renderContentTile(item, renderContext);
-        } else if (renderPrimaryContent) {
-          content = /* @__PURE__ */ jsx59(StageContentTileSurface, { item, ...renderContext, mediaVisible: true, media: renderPrimaryContent(item) });
         } else {
-          content = /* @__PURE__ */ jsx59(StageContentTile, { item, ...renderContext });
+          const inOverflow = overflowOpen && foldedContent.some((folded) => folded.id === item.id);
+          const context = inOverflow ? { ...renderContext, active: true, primary: true, hidden: false, onClick: void 0, onDoubleClick: void 0 } : renderContext;
+          content = /* @__PURE__ */ jsx59(PersistentStageContent, { placement: contentPlacement(item.id), children: renderContent(item, context, renderContext.primary) });
         }
         return /* @__PURE__ */ jsx59(
           "div",
@@ -6845,15 +7323,16 @@ function Stage({
           item.id
         );
       }),
-      geometry.frames.filter((frame) => frame.id === MORE_TILE_ID).map((frame) => /* @__PURE__ */ jsxs38(
+      geometry.frames.filter((frame) => frame.id === MORE_TILE_ID).map((frame) => /* @__PURE__ */ jsxs39(
         "button",
         {
           type: "button",
           "data-stage-item": MORE_TILE_ID,
+          "data-stage-role": frame.role,
           style: frameStyle(frame),
-          onClick: onOverflowClick ?? (() => setOverflowOpen(true)),
+          onClick: foldedContent.length ? () => setOverflowOpen(true) : onOverflowClick ?? (() => setOverflowOpen(true)),
           disabled: !interactive,
-          "aria-label": `Show ${geometry.overflowCount} more participants`,
+          "aria-label": `Show ${geometry.overflowCount} more ${foldedContent.length ? "items" : "participants"}`,
           className: "grid place-items-center rounded-[12px] bg-[var(--chalk-raised)] text-[22px] font-semibold text-[var(--chalk-text)] hover:bg-[var(--chalk-hover)] max-[640px]:rounded-[14px]",
           children: [
             "+",
@@ -6863,23 +7342,26 @@ function Stage({
         frame.id
       ))
     ] }) }),
-    /* @__PURE__ */ jsx59(ChalkSheet, { open: overflowOpen, onOpenChange: setOverflowOpen, title: "People", children: ordered.filter((item) => item.kind === "participant").map((item) => /* @__PURE__ */ jsxs38(
-      "button",
-      {
-        type: "button",
-        className: "min-h-11 w-full rounded-xl px-4 text-left hover:bg-[var(--chalk-hover)]",
-        onClick: () => {
-          handlersById.get(item.id)?.onClick();
-          setOverflowOpen(false);
+    /* @__PURE__ */ jsxs39(ChalkSheet, { variant: "stage", open: overflowOpen, onOpenChange: setOverflowOpen, title: foldedContent.length ? "People and shared content" : "People", children: [
+      overflowOpen && foldedContent.map((item) => /* @__PURE__ */ jsx59("div", { ref: contentPlacement(item.id).attachOverflow, className: "relative mb-3 aspect-video max-h-full w-full" }, item.id)),
+      ordered.filter((item) => item.kind === "participant").map((item) => /* @__PURE__ */ jsxs39(
+        "button",
+        {
+          type: "button",
+          className: "min-h-11 w-full rounded-xl px-4 text-left hover:bg-[var(--chalk-hover)]",
+          onClick: () => {
+            handlersById.get(item.id)?.onClick();
+            setOverflowOpen(false);
+          },
+          children: [
+            clickAction === "follow" && !item.participant.isLocal ? `${followingId === item.id ? "Stop following" : "Follow"} ` : "",
+            item.participant.displayName,
+            item.participant.isMuted ? " \xB7 Muted" : ""
+          ]
         },
-        children: [
-          clickAction === "follow" && !item.participant.isLocal ? `${followingId === item.id ? "Stop following" : "Follow"} ` : "",
-          item.participant.displayName,
-          item.participant.isMuted ? " \xB7 Muted" : ""
-        ]
-      },
-      item.id
-    )) })
+        item.id
+      ))
+    ] })
   ] });
 }
 Stage.displayName = "Stage";
@@ -6966,7 +7448,7 @@ WhiteboardView.displayName = "WhiteboardView";
 
 // src/components/call-card/CallCard.tsx
 import { useEffect as useEffect25, useId as useId2, useRef as useRef25 } from "react";
-import { Fragment as Fragment24, jsx as jsx62, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment27, jsx as jsx62, jsxs as jsxs40 } from "react/jsx-runtime";
 function CallCard({ state, onClose, interactive = true, children, panel, onPanelChange, peopleCount, chatEnabled = true, participantsEnabled = true }) {
   const phone = useIsMobile();
   const id = useId2();
@@ -6989,9 +7471,9 @@ function CallCard({ state, onClose, interactive = true, children, panel, onPanel
     openerRef.current = null;
     if (opener?.isConnected) opener.focus({ preventScroll: true });
   }, [interactive, state]);
-  const content = /* @__PURE__ */ jsxs39(Fragment24, { children: [
+  const content = /* @__PURE__ */ jsxs40(Fragment27, { children: [
     /* @__PURE__ */ jsx62(CallCardStyles, {}),
-    onPanelChange ? /* @__PURE__ */ jsxs39(
+    onPanelChange ? /* @__PURE__ */ jsxs40(
       "div",
       {
         className: "call-card-tabs",
@@ -7017,7 +7499,7 @@ function CallCard({ state, onClose, interactive = true, children, panel, onPanel
               "aria-selected": tab === "participants" ? panel !== "chat" : panel === "chat",
               tabIndex: (tab === "participants" ? panel !== "chat" : panel === "chat") ? 0 : -1,
               onClick: () => onPanelChange(tab),
-              children: tab === "participants" ? /* @__PURE__ */ jsxs39(Fragment24, { children: [
+              children: tab === "participants" ? /* @__PURE__ */ jsxs40(Fragment27, { children: [
                 "People",
                 /* @__PURE__ */ jsx62("span", { className: "call-card-count", children: peopleCount })
               ] }) : "Chat"
@@ -7049,29 +7531,29 @@ function CallCard({ state, onClose, interactive = true, children, panel, onPanel
     event.preventDefault();
     onClose?.();
   };
-  return /* @__PURE__ */ jsx62(Fragment24, { children: /* @__PURE__ */ jsx62("div", { ref: drawerRef, "data-part": "panel-card", tabIndex: interactive ? -1 : void 0, "data-state": state, "data-chalk-drawer": true, onKeyDown: interactive ? handleKeyDown : void 0, "aria-disabled": interactive ? void 0 : true, className: "chalk-drawer min-h-0 outline-none focus-visible:outline-none", children: /* @__PURE__ */ jsx62("div", { "data-part": "panel-content", className: cn("chalk-drawer-content flex min-h-0 flex-col overflow-hidden bg-[var(--chalk-app-panel)] text-[var(--chalk-app-text)]"), children: content }) }) });
+  return /* @__PURE__ */ jsx62(Fragment27, { children: /* @__PURE__ */ jsx62("div", { ref: drawerRef, "data-part": "panel-card", tabIndex: interactive ? -1 : void 0, "data-state": state, "data-chalk-drawer": true, onKeyDown: interactive ? handleKeyDown : void 0, "aria-disabled": interactive ? void 0 : true, className: "chalk-drawer min-h-0 outline-none focus-visible:outline-none", children: /* @__PURE__ */ jsx62("div", { "data-part": "panel-content", className: cn("chalk-drawer-content flex min-h-0 flex-col overflow-hidden bg-[var(--chalk-app-panel)] text-[var(--chalk-app-text)]"), children: content }) }) });
 }
 
 // src/components/space-view/SpacePresentation.tsx
 import { useRef as useRef26 } from "react";
-import { jsx as jsx63, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs41 } from "react/jsx-runtime";
 function SpacePresentation({ colorScheme = "dark", stageBackground, header, stage, controls, compactControls, stageOverlay, sidebar, mediaOutput, toasts, overlays, dialogs, renderToken, interactive = true, className }) {
   const root = useRef26(null);
   const idle = useIdleChrome(root, interactive);
-  return /* @__PURE__ */ jsxs40("main", { ref: root, "data-chalk": true, "data-part": "call-frame", "data-idle": idle, "data-chalk-theme": colorScheme, "data-recording-space-render-token": renderToken, inert: interactive ? void 0 : true, className: cn("chalk-root chalk-frame", className), children: [
+  return /* @__PURE__ */ jsxs41("main", { ref: root, "data-chalk": true, "data-part": "call-frame", "data-idle": idle, "data-chalk-theme": colorScheme, "data-recording-space-render-token": renderToken, inert: interactive ? void 0 : true, className: cn("chalk-root chalk-frame", className), children: [
     mediaOutput,
     /* @__PURE__ */ jsx63(SpaceHeader, { ...header, className: cn("chalk-frame-header", header.className) }),
-    /* @__PURE__ */ jsx63("section", { "data-part": "stage-region", "data-stage-background": stageBackground, className: "chalk-frame-stage", "aria-label": "Space stage", children: /* @__PURE__ */ jsxs40("div", { "data-part": "stage-layout", className: "chalk-stage-layout", children: [
+    /* @__PURE__ */ jsx63("section", { "data-part": "stage-region", "data-stage-background": stageBackground, className: "chalk-frame-stage", "aria-label": "Space stage", children: /* @__PURE__ */ jsxs41("div", { "data-part": "stage-layout", className: "chalk-stage-layout", children: [
       stage,
       stageOverlay
     ] }) }),
-    /* @__PURE__ */ jsxs40("div", { "data-part": "dock-region", className: "chalk-frame-dock", children: [
+    /* @__PURE__ */ jsxs41("div", { "data-part": "dock-region", className: "chalk-frame-dock", children: [
       /* @__PURE__ */ jsx63("div", { className: compactControls ? "chalk-frame-regular" : void 0, style: compactControls ? void 0 : { display: "contents" }, children: controls }),
       compactControls ? /* @__PURE__ */ jsx63("div", { className: "chalk-frame-compact", children: compactControls }) : null
     ] }),
     sidebar,
     toasts,
-    /* @__PURE__ */ jsxs40("div", { "data-part": "overlays-region", className: "chalk-frame-overlays", children: [
+    /* @__PURE__ */ jsxs41("div", { "data-part": "overlays-region", className: "chalk-frame-overlays", children: [
       overlays,
       dialogs
     ] })
@@ -7079,9 +7561,9 @@ function SpacePresentation({ colorScheme = "dark", stageBackground, header, stag
 }
 
 // src/components/space-view/SpaceView.tsx
-import { SpaceClientError as SpaceClientError2 } from "@q9labsai/chalk-client";
+import "@q9labsai/chalk-client";
 import { DEFAULT_QUICK_REACTIONS as DEFAULT_QUICK_REACTIONS2 } from "@q9labsai/chalk-ui/reactions";
-import { useCallback as useCallback15, useEffect as useEffect40, useMemo as useMemo18, useRef as useRef34, useState as useState46 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect40, useMemo as useMemo19, useRef as useRef34, useState as useState50 } from "react";
 
 // src/components/space-header/call-diagnostics.ts
 function callDiagnostics(connection, media) {
@@ -7095,19 +7577,19 @@ function callDiagnostics(connection, media) {
     ["Speaker", media.devices.speakers, media.selection.speaker],
     ["Camera", media.devices.cameras, media.selection.camera]
   ]) {
-    const device = devices.find((item) => item.deviceId === selected);
-    if (device?.label) rows.push({ label, value: device.label });
+    const device2 = devices.find((item) => item.deviceId === selected);
+    if (device2?.label) rows.push({ label, value: device2.label });
   }
   if (media.screenShare.capture?.label) rows.push({ label: "Sharing", value: media.screenShare.capture.label });
   return rows;
 }
 
 // src/internal/useEpisodeDuration.ts
-import { useEffect as useEffect26, useState as useState33 } from "react";
+import { useEffect as useEffect26, useState as useState36 } from "react";
 function useEpisodeDuration() {
   const connection = useConnection();
   const episodeStart = connection.episode?.startedAt ? Date.parse(connection.episode.startedAt) : null;
-  const [now, setNow] = useState33(() => Date.now());
+  const [now, setNow] = useState36(() => Date.now());
   useEffect26(() => {
     if (episodeStart === null || Number.isNaN(episodeStart)) return;
     setNow(Date.now());
@@ -7314,19 +7796,19 @@ function useSoundCues(enabled, createPlayer = createSoundPlayer) {
 }
 
 // src/components/composite/ReactionPicker.tsx
-import React21, { useMemo as useMemo14, useState as useState35, useCallback as useCallback10, useEffect as useEffect29, useRef as useRef29 } from "react";
+import React21, { useMemo as useMemo14, useState as useState38, useCallback as useCallback10, useEffect as useEffect29, useRef as useRef29 } from "react";
 import { DEFAULT_QUICK_REACTIONS, EMOJI_CATEGORIES, EMOJI_KEYWORDS } from "@q9labsai/chalk-ui/reactions";
 
 // src/components/composite/ReactionTray.tsx
-import { useCallback as useCallback9, useEffect as useEffect28, useLayoutEffect as useLayoutEffect3, useRef as useRef28, useState as useState34 } from "react";
-import { Fragment as Fragment25, jsx as jsx64, jsxs as jsxs41 } from "react/jsx-runtime";
+import { useCallback as useCallback9, useEffect as useEffect28, useLayoutEffect as useLayoutEffect6, useRef as useRef28, useState as useState37 } from "react";
+import { Fragment as Fragment28, jsx as jsx64, jsxs as jsxs42 } from "react/jsx-runtime";
 function ReactionTray({ isHandRaised, onToggleHandRaise, reactions, onSelect, onClose, position = "top", className }) {
-  const [more, setMore] = useState34(false);
+  const [more, setMore] = useState37(false);
   const returnFocus = useRef28(null);
   const prefersReducedMotion = usePrefersReducedMotion();
   const { trigger } = useHaptics();
   const listRef = useRef28(null);
-  useLayoutEffect3(() => {
+  useLayoutEffect6(() => {
     returnFocus.current = document.activeElement;
     const tray = listRef.current;
     const frame = tray?.closest("[data-part='call-frame']");
@@ -7384,12 +7866,12 @@ function ReactionTray({ isHandRaised, onToggleHandRaise, reactions, onSelect, on
   };
   const buttons = (more ? reactions : reactions.slice(0, 6)).map((emoji) => /* @__PURE__ */ jsx64("button", { type: "button", onClick: () => handleSelect(emoji), className: "chalk-shell-emoji", "aria-label": `React with ${emoji}`, children: /* @__PURE__ */ jsx64("span", { "aria-hidden": "true", children: emoji }) }, emoji));
   const trayClassName = cn("absolute z-50", !prefersReducedMotion && "chalk-shell-reactions-enter", className);
-  return /* @__PURE__ */ jsxs41(Fragment25, { children: [
+  return /* @__PURE__ */ jsxs42(Fragment28, { children: [
     /* @__PURE__ */ jsx64(ShellStyles, {}),
     /* @__PURE__ */ jsx64("div", { className: "fixed inset-0 z-20", onClick: onClose, "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxs41("div", { ref: listRef, className: cn(trayClassName, "chalk-shell-reactions", more && "chalk-shell-reactions-expanded"), role: "toolbar", "aria-label": "Reactions", onKeyDown: handleKeyDown, children: [
-      onToggleHandRaise ? /* @__PURE__ */ jsxs41("button", { type: "button", className: "chalk-shell-raise", "aria-pressed": isHandRaised, onClick: onToggleHandRaise, children: [
-        /* @__PURE__ */ jsxs41("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxs42("div", { ref: listRef, className: cn(trayClassName, "chalk-shell-reactions", more && "chalk-shell-reactions-expanded"), role: "toolbar", "aria-label": "Reactions", onKeyDown: handleKeyDown, children: [
+      onToggleHandRaise ? /* @__PURE__ */ jsxs42("button", { type: "button", className: "chalk-shell-raise", "aria-pressed": isHandRaised, onClick: onToggleHandRaise, children: [
+        /* @__PURE__ */ jsxs42("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: [
           /* @__PURE__ */ jsx64("path", { d: "M18 11V6a2 2 0 0 0-4 0v5M14 10V4a2 2 0 0 0-4 0v6M10 10.5V6a2 2 0 0 0-4 0v8" }),
           /* @__PURE__ */ jsx64("path", { d: "M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.9-6-2.3l-3.6-3.6a2 2 0 0 1 2.8-2.8L7 15" })
         ] }),
@@ -7402,12 +7884,12 @@ function ReactionTray({ isHandRaised, onToggleHandRaise, reactions, onSelect, on
 }
 
 // src/components/composite/ReactionPicker.tsx
-import { Fragment as Fragment26, jsx as jsx65, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment29, jsx as jsx65, jsxs as jsxs43 } from "react/jsx-runtime";
 var ReactionPicker = React21.memo(({ isHandRaised, onToggleHandRaise, isOpen, onClose, onSelect, recentReactions = [], allowedReactions, position = "top", participantColorSeed, participantGradientPreference, className, size = "default" }) => {
   const prefersReducedMotion = usePrefersReducedMotion();
   const { trigger } = useHaptics();
-  const [activeCategory, setActiveCategory] = useState35("smileys");
-  const [searchQuery, setSearchQuery] = useState35("");
+  const [activeCategory, setActiveCategory] = useState38("smileys");
+  const [searchQuery, setSearchQuery] = useState38("");
   const inputRef = useRef29(null);
   const themeVariables = useMemo14(() => getParticipantThemeVariables(participantColorSeed, participantGradientPreference), [participantColorSeed, participantGradientPreference]);
   useEffect29(() => {
@@ -7466,9 +7948,9 @@ var ReactionPicker = React21.memo(({ isHandRaised, onToggleHandRaise, isOpen, on
       }
     );
   }
-  return /* @__PURE__ */ jsxs42(Fragment26, { children: [
+  return /* @__PURE__ */ jsxs43(Fragment29, { children: [
     /* @__PURE__ */ jsx65("div", { className: "fixed inset-0 z-20", onClick: onClose, "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxs42(
+    /* @__PURE__ */ jsxs43(
       "div",
       {
         className: cn(
@@ -7502,7 +7984,7 @@ var ReactionPicker = React21.memo(({ isHandRaised, onToggleHandRaise, isOpen, on
             },
             `quick-${emoji}-${index}`
           )) }) }),
-          !allowedReactions ? /* @__PURE__ */ jsxs42("div", { className: cn("flex items-center gap-2 border-b border-[var(--chalk-line)] bg-[var(--chalk-stage)] focus-within:bg-[var(--chalk-stage)] transition-colors", size === "mini" ? "px-1.5 py-1" : size === "compact" ? "px-2 py-1.5" : "px-3 py-2"), children: [
+          !allowedReactions ? /* @__PURE__ */ jsxs43("div", { className: cn("flex items-center gap-2 border-b border-[var(--chalk-line)] bg-[var(--chalk-stage)] focus-within:bg-[var(--chalk-stage)] transition-colors", size === "mini" ? "px-1.5 py-1" : size === "compact" ? "px-2 py-1.5" : "px-3 py-2"), children: [
             /* @__PURE__ */ jsx65(Search01Icon, { size: 16, className: "text-[var(--chalk-muted-text)] shrink-0" }),
             /* @__PURE__ */ jsx65(
               "input",
@@ -7519,7 +8001,7 @@ var ReactionPicker = React21.memo(({ isHandRaised, onToggleHandRaise, isOpen, on
             ),
             /* @__PURE__ */ jsx65("kbd", { className: "hidden sm:inline-flex items-center gap-1 px-1.5 py-0.5 rounded border border-[var(--chalk-line)] bg-[var(--chalk-canvas)] text-[10px] font-medium text-[var(--chalk-muted-text)] uppercase", children: "Esc" })
           ] }) : null,
-          !allowedReactions ? /* @__PURE__ */ jsxs42("div", { className: cn("flex", size === "mini" ? "h-36" : size === "compact" ? "h-48" : "h-64"), children: [
+          !allowedReactions ? /* @__PURE__ */ jsxs43("div", { className: cn("flex", size === "mini" ? "h-36" : size === "compact" ? "h-48" : "h-64"), children: [
             !isSearching && /* @__PURE__ */ jsx65("div", { className: cn("flex flex-col items-center py-2 gap-1 border-r border-[var(--chalk-line)] bg-[var(--chalk-stage)] overflow-y-auto [&::-webkit-scrollbar]:hidden [scrollbar-width:none]", size === "mini" ? "w-8" : size === "compact" ? "w-10" : "w-12"), children: categories.map(([key, category]) => /* @__PURE__ */ jsx65(
               "button",
               {
@@ -7564,7 +8046,7 @@ var ReactionPicker = React21.memo(({ isHandRaised, onToggleHandRaise, isOpen, on
 ReactionPicker.displayName = "ReactionPicker";
 
 // src/components/offline-actions/OfflineActions.tsx
-import { useEffect as useEffect30, useState as useState36, useSyncExternalStore as useSyncExternalStore4 } from "react";
+import { useEffect as useEffect30, useState as useState39, useSyncExternalStore as useSyncExternalStore4 } from "react";
 import { jsx as jsx66 } from "react/jsx-runtime";
 var RECONNECTING_GRACE_MS = 2e3;
 function offlineNoticeText(pendingCount, online) {
@@ -7572,9 +8054,8 @@ function offlineNoticeText(pendingCount, online) {
   if (pendingCount === 0) return online ? "Reconnecting\u2026" : "You're offline. Reconnecting\u2026";
   return `${state}. ${pendingCount === 1 ? "1 action" : `${pendingCount} actions`} will send when you're back.`;
 }
-function OfflineActions({ reconnecting: requestedReconnecting = false } = {}) {
+function OfflineActions({ reconnecting: requestedReconnecting = false, hasNotice = false } = {}) {
   const client = useSpaceClient();
-  const [dismissedNotice, setDismissedNotice] = useState36(null);
   const connection = useConnection();
   const offline = useOffline();
   const online = useSyncExternalStore4(subscribeToOnline, readOnline, () => true);
@@ -7587,13 +8068,13 @@ function OfflineActions({ reconnecting: requestedReconnecting = false } = {}) {
   const messagesOnly = offline.pending.every((action) => action.kind === "chat_message");
   const pendingDetail = count ? `${count} ${messagesOnly ? count === 1 ? "message" : "messages" : count === 1 ? "action" : "actions"} will send when you\u2019re back` : void 0;
   const notice = reconnecting ? reconnectingNoticeDue ? `${offlineNoticeText(0, online)}${pendingDetail ? ` ${pendingDetail}` : ""}` : null : connection.syncHealth === "degraded" ? "Connection is slow" : null;
-  if (offline.notice && offline.notice !== dismissedNotice) return /* @__PURE__ */ jsx66(ToastStack, { toasts: [{ id: "offline-notice", message: offline.notice }], onDismiss: () => setDismissedNotice(offline.notice ?? null) });
+  if (hasNotice) return null;
   if (notice)
     return /* @__PURE__ */ jsx66("div", { role: "status", "data-part": "connection-notice", style: { pointerEvents: "none" }, className: "absolute inset-x-4 top-16 z-50 mx-auto w-fit max-w-[calc(100%_-_2rem)] rounded-full bg-[var(--chalk-surface)] px-3 py-1 text-center text-sm text-[var(--chalk-text)]", children: notice });
   return null;
 }
 function useTrueFor(value, milliseconds) {
-  const [elapsed, setElapsed] = useState36(false);
+  const [elapsed, setElapsed] = useState39(false);
   useEffect30(() => {
     setElapsed(false);
     if (!value) return;
@@ -7615,12 +8096,12 @@ function readOnline() {
 }
 
 // src/components/reconnecting-overlay/ReconnectingOverlay.tsx
-import { memo as memo3, useEffect as useEffect31, useState as useState37 } from "react";
+import { memo as memo3, useEffect as useEffect31, useState as useState40 } from "react";
 import { jsx as jsx67 } from "react/jsx-runtime";
 var RECONNECTING_NOTICE_MS = 2e3;
 var ReconnectingOverlay = memo3(function ReconnectingOverlay2({ isVisible, status, onRetry, onLeft, message, showNotice }) {
   const reconnecting = isVisible && status === "reconnecting";
-  const [elapsed, setElapsed] = useState37(false);
+  const [elapsed, setElapsed] = useState40(false);
   useEffect31(() => {
     setElapsed(false);
     if (!reconnecting) return;
@@ -7635,55 +8116,14 @@ var ReconnectingOverlay = memo3(function ReconnectingOverlay2({ isVisible, statu
 });
 
 // src/components/toast-stack/useCallToasts.ts
-import { useCallback as useCallback11, useEffect as useEffect32, useRef as useRef30, useState as useState38 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect32, useRef as useRef30, useState as useState41 } from "react";
 
 // src/components/toast-stack/call-events.tsx
-import { Fragment as Fragment27, jsx as jsx68, jsxs as jsxs43 } from "react/jsx-runtime";
-function mediaFailureToast(failure, source) {
+import { Fragment as Fragment30, jsx as jsx68, jsxs as jsxs44 } from "react/jsx-runtime";
+function mediaFailureToast(failure, source, action, onRetry) {
   if (!failure) return null;
-  const device = source ?? "device";
-  const icon = /* @__PURE__ */ jsx68(CallEventIcon, { kind: source ?? "microphone", error: true });
-  if (source === "screen" && failure.code.startsWith("media."))
-    return {
-      icon,
-      type: "error",
-      message: /* @__PURE__ */ jsxs43(Fragment27, { children: [
-        /* @__PURE__ */ jsx68("b", { style: { fontWeight: 600 }, children: "Your screen couldn\u2019t be shared." }),
-        " Allow screen recording for your browser in System Settings, then try again."
-      ] })
-    };
-  if (failure.code === "media.permission_denied")
-    return {
-      icon,
-      type: "error",
-      message: /* @__PURE__ */ jsxs43(Fragment27, { children: [
-        /* @__PURE__ */ jsxs43("b", { style: { fontWeight: 600 }, children: [
-          "Chalk can\u2019t use your ",
-          device,
-          "."
-        ] }),
-        " Click the camera icon in the address bar and allow ",
-        source === "camera" ? "Camera" : source === "microphone" ? "Microphone" : "Camera and Microphone",
-        "."
-      ] })
-    };
-  if (failure.code === "media.device_not_found")
-    return {
-      icon,
-      type: "error",
-      message: /* @__PURE__ */ jsxs43(Fragment27, { children: [
-        /* @__PURE__ */ jsxs43("b", { style: { fontWeight: 600 }, children: [
-          "No ",
-          device,
-          " found."
-        ] }),
-        " Plug one in, or check that your Mac can see it in System Settings."
-      ] })
-    };
-  if (failure.code === "media.device_busy") return { icon, type: "error", message: `Your ${device} is being used by another app. Close it there, then try again.` };
-  if (failure.code === "media.device_constraint_invalid") return { icon, type: "error", message: `Your ${device} doesn\u2019t support these settings. Choose another ${device}, then try again.` };
-  if (failure.code === "media.capture_failed") return { icon, type: "error", message: `Your ${device} couldn\u2019t start. Check that it is connected and available, then try again.` };
-  return { icon, type: "error", message: failure.message };
+  const presentation = commandFailurePresentation(failure, source, action, onRetry !== void 0);
+  return { icon: /* @__PURE__ */ jsx68(CallEventIcon, { kind: source ?? "microphone", error: true }), type: "error", message: presentation.message, action: presentation.retry && onRetry ? { label: "Try again", onClick: onRetry } : void 0 };
 }
 function callEventToasts(previous, next) {
   if (previous.connection.status !== "live" || next.connection.status !== "live") return [];
@@ -7695,16 +8135,16 @@ function callEventToasts(previous, next) {
     if (!old && person.participantId !== next.self.participantId)
       events.push({
         icon: /* @__PURE__ */ jsx68(Avatar, { name: person.displayName, size: "xs", style: { width: 28, height: 28 }, generated: true, animated: false }),
-        message: /* @__PURE__ */ jsxs43(Fragment27, { children: [
+        message: /* @__PURE__ */ jsxs44(Fragment30, { children: [
           /* @__PURE__ */ jsx68("b", { style: { fontWeight: 600 }, dir: "auto", children: person.displayName }),
           " ",
           "joined"
         ] })
       });
-    if (old && !old.handRaised && person.handRaised)
+    if (old && !old.handRaised && person.handRaised && person.participantId !== next.self.participantId)
       events.push({
         icon: /* @__PURE__ */ jsx68(CallEventIcon, { kind: "hand" }),
-        message: /* @__PURE__ */ jsxs43(Fragment27, { children: [
+        message: /* @__PURE__ */ jsxs44(Fragment30, { children: [
           /* @__PURE__ */ jsx68("b", { style: { fontWeight: 600 }, dir: "auto", children: person.displayName }),
           " ",
           "raised a hand"
@@ -7713,7 +8153,7 @@ function callEventToasts(previous, next) {
     if (old?.media.screenShare === "active" && person.media.screenShare === "inactive")
       events.push({
         icon: /* @__PURE__ */ jsx68(CallEventIcon, { kind: "screen" }),
-        message: /* @__PURE__ */ jsxs43(Fragment27, { children: [
+        message: /* @__PURE__ */ jsxs44(Fragment30, { children: [
           /* @__PURE__ */ jsx68("b", { style: { fontWeight: 600 }, dir: "auto", children: person.displayName }),
           " ",
           "stopped sharing"
@@ -7725,7 +8165,7 @@ function callEventToasts(previous, next) {
   if (becameHost)
     events.push({
       icon: /* @__PURE__ */ jsx68(CallEventIcon, { kind: "host" }),
-      message: departedHost ? /* @__PURE__ */ jsxs43(Fragment27, { children: [
+      message: departedHost ? /* @__PURE__ */ jsxs44(Fragment30, { children: [
         /* @__PURE__ */ jsx68("b", { style: { fontWeight: 600 }, dir: "auto", children: departedHost.displayName }),
         " left. You\u2019re now the host."
       ] }) : "You\u2019re now the host."
@@ -7734,7 +8174,7 @@ function callEventToasts(previous, next) {
     if (!after.has(person.participantId) && person.participantId !== next.self.participantId && !(person === departedHost && becameHost))
       events.push({
         icon: /* @__PURE__ */ jsx68(Avatar, { name: person.displayName, size: "xs", style: { width: 28, height: 28 }, generated: true, animated: false }),
-        message: /* @__PURE__ */ jsxs43(Fragment27, { children: [
+        message: /* @__PURE__ */ jsxs44(Fragment30, { children: [
           /* @__PURE__ */ jsx68("b", { style: { fontWeight: 600 }, dir: "auto", children: person.displayName }),
           " ",
           "left"
@@ -7745,7 +8185,7 @@ function callEventToasts(previous, next) {
   if (wasRecording !== isRecording)
     events.push({
       icon: /* @__PURE__ */ jsx68(CallEventIcon, { kind: "recording", error: isRecording }),
-      message: isRecording ? /* @__PURE__ */ jsxs43(Fragment27, { children: [
+      message: isRecording ? /* @__PURE__ */ jsxs44(Fragment30, { children: [
         /* @__PURE__ */ jsx68("b", { style: { fontWeight: 600 }, children: "Recording started." }),
         " Everyone in the call can see it."
       ] }) : "Recording stopped"
@@ -7754,13 +8194,13 @@ function callEventToasts(previous, next) {
     if (previous.media.selection[source] !== next.media.selection[source]) {
       const devices = source === "camera" ? next.media.devices.cameras : next.media.devices.microphones;
       const oldDevices = source === "camera" ? previous.media.devices.cameras : previous.media.devices.microphones;
-      const disconnected = oldDevices.find((device) => device.deviceId === previous.media.selection[source]);
-      if (!disconnected || devices.some((device) => device.deviceId === disconnected.deviceId)) continue;
-      const selected = devices.find((device) => device.deviceId === next.media.selection[source]);
+      const disconnected = oldDevices.find((device2) => device2.deviceId === previous.media.selection[source]);
+      if (!disconnected || devices.some((device2) => device2.deviceId === disconnected.deviceId)) continue;
+      const selected = devices.find((device2) => device2.deviceId === next.media.selection[source]);
       if (selected)
         events.push({
           icon: /* @__PURE__ */ jsx68(CallEventIcon, { kind: source === "microphone" ? "microphone-on" : source }),
-          message: /* @__PURE__ */ jsxs43(Fragment27, { children: [
+          message: /* @__PURE__ */ jsxs44(Fragment30, { children: [
             `${disconnected.label || source} disconnected. Switched to `,
             /* @__PURE__ */ jsx68("b", { style: { fontWeight: 600 }, children: selected.label || source })
           ] })
@@ -7773,7 +8213,7 @@ function callEventToasts(previous, next) {
 // src/components/toast-stack/useCallToasts.ts
 function useCallToasts() {
   const client = useSpaceClient();
-  const [toasts, setToasts] = useState38([]);
+  const [toasts, setToasts] = useState41([]);
   const sequence = useRef30(0);
   useEffect32(() => {
     setToasts([]);
@@ -7797,18 +8237,7 @@ function useCallToasts() {
         const toast = mediaFailureToast(error, failedSource);
         if (toast) {
           const id = `call-event-${++sequence.current}`;
-          const action = failedSource === "screen" && error.recoverable ? {
-            label: "Try again",
-            onClick: () => {
-              void client.media.setScreenShareEnabled(true).then(
-                () => {
-                  setToasts((current) => current.filter((event) => event.id !== id));
-                },
-                () => void 0
-              );
-            }
-          } : void 0;
-          setToasts((current) => [...current, { ...toast, action, failureCode: error.code, id }].slice(-20));
+          setToasts((current) => [...current, { ...toast, failureCode: error.code, id }].slice(-20));
         }
         failedSource = void 0;
       });
@@ -7825,15 +8254,37 @@ function useCallToasts() {
 }
 
 // src/components/call-limbo/useCallLink.ts
-import { useEffect as useEffect33, useState as useState39 } from "react";
+import { useEffect as useEffect33, useState as useState42 } from "react";
 function useCallLink(alone) {
-  const [open, setOpen] = useState39(alone);
+  const [open, setOpen] = useState42(alone);
   useEffect33(() => {
     if (!alone) setOpen(false);
   }, [alone]);
   return { open, toggle: () => setOpen((current) => !current), close: () => setOpen(false) };
 }
 
+// src/components/toast-stack/NoticeButton.tsx
+import { useState as useState43 } from "react";
+import { jsx as jsx69, jsxs as jsxs45 } from "react/jsx-runtime";
+function NoticeButton({ toasts, onDismiss }) {
+  const [open, setOpen] = useState43(false);
+  if (toasts.length === 0) return null;
+  const label = toasts.length === 1 ? "1 notice" : `${toasts.length} notices`;
+  const trigger = /* @__PURE__ */ jsxs45("button", { type: "button", "data-part": "notice-button", className: "chalk-notice-button", "aria-label": `Show ${label}`, children: [
+    /* @__PURE__ */ jsxs45("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx69("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ jsx69("path", { d: "M12 7.5v5.5M12 16.5h.01" })
+    ] }),
+    toasts.length > 1 ? /* @__PURE__ */ jsx69("span", { children: toasts.length }) : null
+  ] });
+  return /* @__PURE__ */ jsx69(ChalkPopover, { open, onOpenChange: setOpen, tooltip: label, trigger, label: "Notices", className: "chalk-notice-list", children: toasts.map((toast) => /* @__PURE__ */ jsxs45("div", { "data-part": "notice", "data-type": toast.type ?? "info", className: "chalk-notice", children: [
+    toast.icon,
+    /* @__PURE__ */ jsx69("span", { children: toast.message }),
+    toast.action ? /* @__PURE__ */ jsx69(ChalkButton, { onClick: toast.action.onClick, children: toast.action.label }) : null,
+    /* @__PURE__ */ jsx69("button", { type: "button", className: "chalk-dismiss", "aria-label": "Dismiss", onClick: () => onDismiss(toast.id), children: /* @__PURE__ */ jsx69("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx69("path", { d: "m6 6 12 12M6 18 18 6" }) }) })
+  ] }, toast.id)) });
+}
+
 // src/components/board/board-toasts.ts
 import { createContext as createContext3, useCallback as useCallback12, useContext as useContext3, useEffect as useEffect34, useMemo as useMemo15 } from "react";
 var BoardToastContext = createContext3(() => void 0);
@@ -7856,13 +8307,16 @@ function useBoardToast(lifetime) {
 }
 
 // src/components/stage/SpaceStage.tsx
-import { useCallback as useCallback14, useEffect as useEffect38, useMemo as useMemo17, useState as useState44 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect38, useMemo as useMemo18, useState as useState48 } from "react";
+
+// src/internal/whiteboard-view-limits.ts
+var WHITEBOARD_VIEW_PEOPLE_MAX = 500;
 
 // src/components/board/board-history.ts
-import { useEffect as useEffect35, useState as useState40 } from "react";
+import { useEffect as useEffect35, useState as useState44 } from "react";
 import { observeEngineHistory } from "@q9labsai/chalk-whiteboard/react";
 function useEngineHistory(root, engine) {
-  const [history, setHistory] = useState40({ canUndo: false, canRedo: false });
+  const [history, setHistory] = useState44({ canUndo: false, canRedo: false });
   useEffect35(() => {
     const canvas = root.current?.querySelector(".excalidraw");
     if (!engine || !canvas) return;
@@ -7872,27 +8326,11 @@ function useEngineHistory(root, engine) {
 }
 
 // src/components/board/board-view-versions.ts
-var ViewVersions = class {
-  #versions = /* @__PURE__ */ new Map();
-  isNew(view) {
-    if (!view.originParticipantId) return true;
-    return view.originSequence > (this.#versions.get(`${view.originParticipantId}:${view.originEpoch ?? ""}`) ?? 0);
-  }
-  remember(view) {
-    if (!view.originParticipantId || !this.isNew(view)) return;
-    const origin = `${view.originParticipantId}:${view.originEpoch ?? ""}`;
-    this.#versions.delete(origin);
-    this.#versions.set(origin, view.originSequence);
-    if (this.#versions.size > 256) {
-      const oldest = this.#versions.keys().next().value;
-      if (oldest !== void 0) this.#versions.delete(oldest);
-    }
-  }
-};
+import { ChalkWhiteboardViewVersions } from "@q9labsai/chalk-client";
 
 // src/components/board/Board.tsx
 import { WhiteboardCanvas as WhiteboardCanvas2 } from "@q9labsai/chalk-whiteboard/react";
-import { useCallback as useCallback13, useEffect as useEffect37, useMemo as useMemo16, useRef as useRef33, useState as useState43 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect37, useMemo as useMemo17, useRef as useRef33, useState as useState47 } from "react";
 
 // src/components/board/board-model.ts
 import { ChalkWhiteboardViewBounds } from "@q9labsai/chalk-client";
@@ -7906,6 +8344,11 @@ var ISLAND_PLACES = [
   { id: "bottom", label: "Bottom" },
   { id: "top", label: "Top" }
 ];
+var DRAW_POLICIES = [
+  { id: "everyone", label: "Everyone" },
+  { id: "hosts", label: "Only hosts" },
+  { id: "picked", label: "Picked people" }
+];
 var PEN_COLORS = [
   { id: "ink", label: "Ink" },
   { id: "red", label: "Red" },
@@ -8131,88 +8574,88 @@ function sceneSignature(engine) {
 }
 
 // src/components/board/BoardCursors.tsx
-import { useEffect as useEffect36, useRef as useRef31, useState as useState41 } from "react";
+import { useEffect as useEffect36, useRef as useRef31, useState as useState45 } from "react";
 
 // src/components/board/BoardIcon.tsx
-import { Fragment as Fragment28, jsx as jsx69, jsxs as jsxs44 } from "react/jsx-runtime";
+import { Fragment as Fragment31, jsx as jsx70, jsxs as jsxs46 } from "react/jsx-runtime";
 var GLYPHS2 = {
-  select: /* @__PURE__ */ jsx69("path", { d: "M5 3l14 7-6.5 2L10 19z" }),
-  hand: /* @__PURE__ */ jsx69("path", { d: "M18 11V6a2 2 0 0 0-4 0M14 10V4a2 2 0 0 0-4 0v2M10 10.5V6a2 2 0 0 0-4 0v8M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.9-6-2.3l-3.6-3.6a2 2 0 0 1 2.8-2.8L7 15" }),
-  pen: /* @__PURE__ */ jsx69("path", { d: "M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z" }),
-  highlighter: /* @__PURE__ */ jsxs44(Fragment28, { children: [
-    /* @__PURE__ */ jsx69("path", { d: "M9 11l-6 6v3h9l3-3" }),
-    /* @__PURE__ */ jsx69("path", { d: "M22 12l-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4" })
+  select: /* @__PURE__ */ jsx70("path", { d: "M5 3l14 7-6.5 2L10 19z" }),
+  hand: /* @__PURE__ */ jsx70("path", { d: "M18 11V6a2 2 0 0 0-4 0M14 10V4a2 2 0 0 0-4 0v2M10 10.5V6a2 2 0 0 0-4 0v8M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.9-6-2.3l-3.6-3.6a2 2 0 0 1 2.8-2.8L7 15" }),
+  pen: /* @__PURE__ */ jsx70("path", { d: "M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z" }),
+  highlighter: /* @__PURE__ */ jsxs46(Fragment31, { children: [
+    /* @__PURE__ */ jsx70("path", { d: "M9 11l-6 6v3h9l3-3" }),
+    /* @__PURE__ */ jsx70("path", { d: "M22 12l-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4" })
   ] }),
-  rectangle: /* @__PURE__ */ jsx69("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
-  ellipse: /* @__PURE__ */ jsx69("ellipse", { cx: "12", cy: "12", rx: "9", ry: "6.5" }),
-  diamond: /* @__PURE__ */ jsx69("path", { d: "M12 3l9 9-9 9-9-9z" }),
-  arrow: /* @__PURE__ */ jsx69("path", { d: "M5 19L19 5M9 5h10v10" }),
-  line: /* @__PURE__ */ jsx69("path", { d: "M4 20L20 4" }),
-  text: /* @__PURE__ */ jsx69("path", { d: "M5 6V4h14v2M12 4v16M9 20h6" }),
-  note: /* @__PURE__ */ jsxs44(Fragment28, { children: [
-    /* @__PURE__ */ jsx69("path", { d: "M5 3h14a2 2 0 0 1 2 2v9l-7 7H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" }),
-    /* @__PURE__ */ jsx69("path", { d: "M14 21v-5a2 2 0 0 1 2-2h5" })
+  rectangle: /* @__PURE__ */ jsx70("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+  ellipse: /* @__PURE__ */ jsx70("ellipse", { cx: "12", cy: "12", rx: "9", ry: "6.5" }),
+  diamond: /* @__PURE__ */ jsx70("path", { d: "M12 3l9 9-9 9-9-9z" }),
+  arrow: /* @__PURE__ */ jsx70("path", { d: "M5 19L19 5M9 5h10v10" }),
+  line: /* @__PURE__ */ jsx70("path", { d: "M4 20L20 4" }),
+  text: /* @__PURE__ */ jsx70("path", { d: "M5 6V4h14v2M12 4v16M9 20h6" }),
+  note: /* @__PURE__ */ jsxs46(Fragment31, { children: [
+    /* @__PURE__ */ jsx70("path", { d: "M5 3h14a2 2 0 0 1 2 2v9l-7 7H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" }),
+    /* @__PURE__ */ jsx70("path", { d: "M14 21v-5a2 2 0 0 1 2-2h5" })
   ] }),
-  eraser: /* @__PURE__ */ jsx69("path", { d: "M7 21h10M5.5 13.5l7-7a2 2 0 0 1 2.8 0l3.2 3.2a2 2 0 0 1 0 2.8L11 19H8l-2.5-2.5a2 2 0 0 1 0-3z" }),
-  laser: /* @__PURE__ */ jsxs44(Fragment28, { children: [
-    /* @__PURE__ */ jsx69("circle", { cx: "12", cy: "12", r: "2.5", fill: "currentColor" }),
-    /* @__PURE__ */ jsx69("path", { d: "M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1" })
+  eraser: /* @__PURE__ */ jsx70("path", { d: "M7 21h10M5.5 13.5l7-7a2 2 0 0 1 2.8 0l3.2 3.2a2 2 0 0 1 0 2.8L11 19H8l-2.5-2.5a2 2 0 0 1 0-3z" }),
+  laser: /* @__PURE__ */ jsxs46(Fragment31, { children: [
+    /* @__PURE__ */ jsx70("circle", { cx: "12", cy: "12", r: "2.5", fill: "currentColor" }),
+    /* @__PURE__ */ jsx70("path", { d: "M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1" })
   ] }),
-  undo: /* @__PURE__ */ jsxs44(Fragment28, { children: [
-    /* @__PURE__ */ jsx69("path", { d: "M9 14L4 9l5-5" }),
-    /* @__PURE__ */ jsx69("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 0 11H11" })
+  undo: /* @__PURE__ */ jsxs46(Fragment31, { children: [
+    /* @__PURE__ */ jsx70("path", { d: "M9 14L4 9l5-5" }),
+    /* @__PURE__ */ jsx70("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 0 11H11" })
   ] }),
-  redo: /* @__PURE__ */ jsxs44(Fragment28, { children: [
-    /* @__PURE__ */ jsx69("path", { d: "M15 14l5-5-5-5" }),
-    /* @__PURE__ */ jsx69("path", { d: "M20 9H9.5a5.5 5.5 0 0 0 0 11H13" })
+  redo: /* @__PURE__ */ jsxs46(Fragment31, { children: [
+    /* @__PURE__ */ jsx70("path", { d: "M15 14l5-5-5-5" }),
+    /* @__PURE__ */ jsx70("path", { d: "M20 9H9.5a5.5 5.5 0 0 0 0 11H13" })
   ] }),
-  minus: /* @__PURE__ */ jsx69("path", { d: "M5 12h14" }),
-  plus: /* @__PURE__ */ jsx69("path", { d: "M12 5v14M5 12h14" }),
-  fit: /* @__PURE__ */ jsx69("path", { d: "M4 9V5a1 1 0 0 1 1-1h4M20 9V5a1 1 0 0 0-1-1h-4M4 15v4a1 1 0 0 0 1 1h4M20 15v4a1 1 0 0 1-1 1h-4" }),
-  download: /* @__PURE__ */ jsx69("path", { d: "M12 3v12M7 10l5 5 5-5M4 21h16" }),
-  copy: /* @__PURE__ */ jsxs44(Fragment28, { children: [
-    /* @__PURE__ */ jsx69("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2" }),
-    /* @__PURE__ */ jsx69("path", { d: "M5 15V5a2 2 0 0 1 2-2h10" })
+  minus: /* @__PURE__ */ jsx70("path", { d: "M5 12h14" }),
+  plus: /* @__PURE__ */ jsx70("path", { d: "M12 5v14M5 12h14" }),
+  fit: /* @__PURE__ */ jsx70("path", { d: "M4 9V5a1 1 0 0 1 1-1h4M20 9V5a1 1 0 0 0-1-1h-4M4 15v4a1 1 0 0 0 1 1h4M20 15v4a1 1 0 0 1-1 1h-4" }),
+  download: /* @__PURE__ */ jsx70("path", { d: "M12 3v12M7 10l5 5 5-5M4 21h16" }),
+  copy: /* @__PURE__ */ jsxs46(Fragment31, { children: [
+    /* @__PURE__ */ jsx70("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2" }),
+    /* @__PURE__ */ jsx70("path", { d: "M5 15V5a2 2 0 0 1 2-2h10" })
   ] }),
-  trash: /* @__PURE__ */ jsx69("path", { d: "M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3" }),
-  close: /* @__PURE__ */ jsx69("path", { d: "M6 6l12 12M18 6L6 18" }),
-  check: /* @__PURE__ */ jsx69("path", { d: "M5 12l5 5 9-10" }),
-  target: /* @__PURE__ */ jsxs44(Fragment28, { children: [
-    /* @__PURE__ */ jsx69("circle", { cx: "12", cy: "12", r: "9" }),
-    /* @__PURE__ */ jsx69("circle", { cx: "12", cy: "12", r: "4" })
+  trash: /* @__PURE__ */ jsx70("path", { d: "M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3" }),
+  close: /* @__PURE__ */ jsx70("path", { d: "M6 6l12 12M18 6L6 18" }),
+  check: /* @__PURE__ */ jsx70("path", { d: "M5 12l5 5 9-10" }),
+  target: /* @__PURE__ */ jsxs46(Fragment31, { children: [
+    /* @__PURE__ */ jsx70("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ jsx70("circle", { cx: "12", cy: "12", r: "4" })
   ] }),
-  eye: /* @__PURE__ */ jsxs44(Fragment28, { children: [
-    /* @__PURE__ */ jsx69("path", { d: "M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z" }),
-    /* @__PURE__ */ jsx69("circle", { cx: "12", cy: "12", r: "3" })
+  eye: /* @__PURE__ */ jsxs46(Fragment31, { children: [
+    /* @__PURE__ */ jsx70("path", { d: "M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z" }),
+    /* @__PURE__ */ jsx70("circle", { cx: "12", cy: "12", r: "3" })
   ] }),
-  wifiOff: /* @__PURE__ */ jsx69("path", { d: "M2 2l20 20M8.5 16.5a5 5 0 0 1 7 0M5 12.9a10 10 0 0 1 5-2.7M10.7 5.1A16 16 0 0 1 22 9M2 8.8a15 15 0 0 1 4.2-2.5M12 20h.01" }),
-  lock: /* @__PURE__ */ jsxs44(Fragment28, { children: [
-    /* @__PURE__ */ jsx69("rect", { x: "5", y: "11", width: "14", height: "9", rx: "2" }),
-    /* @__PURE__ */ jsx69("path", { d: "M8 11V8a4 4 0 0 1 8 0v3" })
+  wifiOff: /* @__PURE__ */ jsx70("path", { d: "M2 2l20 20M8.5 16.5a5 5 0 0 1 7 0M5 12.9a10 10 0 0 1 5-2.7M10.7 5.1A16 16 0 0 1 22 9M2 8.8a15 15 0 0 1 4.2-2.5M12 20h.01" }),
+  lock: /* @__PURE__ */ jsxs46(Fragment31, { children: [
+    /* @__PURE__ */ jsx70("rect", { x: "5", y: "11", width: "14", height: "9", rx: "2" }),
+    /* @__PURE__ */ jsx70("path", { d: "M8 11V8a4 4 0 0 1 8 0v3" })
   ] }),
-  more: /* @__PURE__ */ jsxs44(Fragment28, { children: [
-    /* @__PURE__ */ jsx69("circle", { cx: "5", cy: "12", r: "1.2" }),
-    /* @__PURE__ */ jsx69("circle", { cx: "12", cy: "12", r: "1.2" }),
-    /* @__PURE__ */ jsx69("circle", { cx: "19", cy: "12", r: "1.2" })
+  more: /* @__PURE__ */ jsxs46(Fragment31, { children: [
+    /* @__PURE__ */ jsx70("circle", { cx: "5", cy: "12", r: "1.2" }),
+    /* @__PURE__ */ jsx70("circle", { cx: "12", cy: "12", r: "1.2" }),
+    /* @__PURE__ */ jsx70("circle", { cx: "19", cy: "12", r: "1.2" })
   ] }),
-  chevron: /* @__PURE__ */ jsx69("path", { d: "M6 9l6 6 6-6" })
+  chevron: /* @__PURE__ */ jsx70("path", { d: "M6 9l6 6 6-6" })
 };
 function BoardIcon({ name, size = 20, className }) {
-  return /* @__PURE__ */ jsx69("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": "true", children: GLYPHS2[name] });
+  return /* @__PURE__ */ jsx70("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": "true", children: GLYPHS2[name] });
 }
 function GripIcon({ className }) {
-  return /* @__PURE__ */ jsx69("svg", { width: "10", height: "18", viewBox: "0 0 10 18", fill: "currentColor", className, "aria-hidden": "true", children: [3, 9, 15].flatMap((y) => [/* @__PURE__ */ jsx69("circle", { cx: "2.5", cy: y, r: "1.5" }, `l${y}`), /* @__PURE__ */ jsx69("circle", { cx: "7.5", cy: y, r: "1.5" }, `r${y}`)]) });
+  return /* @__PURE__ */ jsx70("svg", { width: "10", height: "18", viewBox: "0 0 10 18", fill: "currentColor", className, "aria-hidden": "true", children: [3, 9, 15].flatMap((y) => [/* @__PURE__ */ jsx70("circle", { cx: "2.5", cy: y, r: "1.5" }, `l${y}`), /* @__PURE__ */ jsx70("circle", { cx: "7.5", cy: y, r: "1.5" }, `r${y}`)]) });
 }
 function CursorArrow({ color }) {
   const path = "M3.2 2.6V20.2L8 15.7L11.3 22.6L14.6 21L11.4 14.2L17.9 13.6Z";
-  return /* @__PURE__ */ jsxs44("svg", { className: "chalk-board-cursor-arrow", width: "22", height: "26", viewBox: "0 0 22 26", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx69("path", { d: path, fill: "#fff", stroke: "#fff", strokeWidth: "5", strokeLinejoin: "round" }),
-    /* @__PURE__ */ jsx69("path", { d: path, fill: color, stroke: color, strokeWidth: "2.2", strokeLinejoin: "round" })
+  return /* @__PURE__ */ jsxs46("svg", { className: "chalk-board-cursor-arrow", width: "22", height: "26", viewBox: "0 0 22 26", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx70("path", { d: path, fill: "#fff", stroke: "#fff", strokeWidth: "5", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx70("path", { d: path, fill: color, stroke: color, strokeWidth: "2.2", strokeLinejoin: "round" })
   ] });
 }
 
 // src/components/board/BoardCursors.tsx
-import { jsx as jsx70, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs47 } from "react/jsx-runtime";
 var REST_RATE = 16;
 var STALE_MS = 1e4;
 var NAME_HOLD_MS = 700;
@@ -8230,7 +8673,7 @@ function rememberCursor(cursors, cursor) {
 }
 function BoardCursors({ cursorsRef, cameraRef, colorFor, hidden }) {
   const layer = useRef31(null);
-  const [people, setPeople] = useState41([]);
+  const [people, setPeople] = useState45([]);
   const tracked = useRef31(/* @__PURE__ */ new Map());
   const pointer = useRef31(null);
   useEffect36(() => {
@@ -8308,18 +8751,18 @@ function BoardCursors({ cursorsRef, cameraRef, colorFor, hidden }) {
       board.removeEventListener("pointerleave", leave);
     };
   }, []);
-  return /* @__PURE__ */ jsx70("div", { ref: layer, className: "chalk-board-cursors", "aria-hidden": "true", "data-hidden": hidden || void 0, children: people.map((person) => /* @__PURE__ */ jsxs45("div", { className: "chalk-board-cursor", "data-cursor": person.id, children: [
-    /* @__PURE__ */ jsx70(CursorArrow, { color: colorFor(person.id) }),
-    /* @__PURE__ */ jsxs45("span", { className: "chalk-board-cursor-tag", children: [
-      /* @__PURE__ */ jsx70("span", { className: "chalk-board-cursor-name", style: { background: colorFor(person.id) }, children: person.name.split(" ")[0] }),
-      /* @__PURE__ */ jsx70(Avatar, { name: person.name, size: "xs", animated: false, className: "chalk-board-cursor-avatar" })
+  return /* @__PURE__ */ jsx71("div", { ref: layer, className: "chalk-board-cursors", "aria-hidden": "true", "data-hidden": hidden || void 0, children: people.map((person) => /* @__PURE__ */ jsxs47("div", { className: "chalk-board-cursor", "data-cursor": person.id, children: [
+    /* @__PURE__ */ jsx71(CursorArrow, { color: colorFor(person.id) }),
+    /* @__PURE__ */ jsxs47("span", { className: "chalk-board-cursor-tag", children: [
+      /* @__PURE__ */ jsx71("span", { className: "chalk-board-cursor-name", style: { background: colorFor(person.id) }, children: person.name.split(" ")[0] }),
+      /* @__PURE__ */ jsx71(Avatar, { name: person.name, size: "xs", animated: false, className: "chalk-board-cursor-avatar" })
     ] })
   ] }, person.id)) });
 }
 
 // src/components/board/BoardIsland.tsx
-import { useLayoutEffect as useLayoutEffect4, useRef as useRef32, useState as useState42 } from "react";
-import { Fragment as Fragment29, jsx as jsx71, jsxs as jsxs46 } from "react/jsx-runtime";
+import { useLayoutEffect as useLayoutEffect7, useRef as useRef32, useState as useState46 } from "react";
+import { Fragment as Fragment32, jsx as jsx72, jsxs as jsxs48 } from "react/jsx-runtime";
 var TOOLS = [
   [
     { tool: "selection", label: "Select", key: "V", glyph: "select" },
@@ -8341,41 +8784,41 @@ var TOOLS = [
 var LONG_PRESS_MS = 500;
 var DRAG_START_PX = 4;
 function Tip({ label, keyName, children }) {
-  return /* @__PURE__ */ jsxs46(ChalkTooltip, { trigger: children, children: [
+  return /* @__PURE__ */ jsxs48(ChalkTooltip, { trigger: children, children: [
     label,
-    keyName ? /* @__PURE__ */ jsx71("kbd", { className: "chalk-board-kbd", children: keyName }) : null
+    keyName ? /* @__PURE__ */ jsx72("kbd", { className: "chalk-board-kbd", children: keyName }) : null
   ] });
 }
 function ToolButton({ entry, active, onTool }) {
-  return /* @__PURE__ */ jsx71(Tip, { label: entry.label, keyName: entry.key, children: /* @__PURE__ */ jsx71("button", { type: "button", className: "chalk-board-tool", "aria-label": entry.label, "aria-keyshortcuts": entry.key, "aria-pressed": active, onClick: () => onTool(entry.tool), children: /* @__PURE__ */ jsx71(BoardIcon, { name: entry.glyph }) }) });
+  return /* @__PURE__ */ jsx72(Tip, { label: entry.label, keyName: entry.key, children: /* @__PURE__ */ jsx72("button", { type: "button", className: "chalk-board-tool", "aria-label": entry.label, "aria-keyshortcuts": entry.key, "aria-pressed": active, onClick: () => onTool(entry.tool), children: /* @__PURE__ */ jsx72(BoardIcon, { name: entry.glyph }) }) });
 }
 function ShapesButton({ tool, shape, onTool, side }) {
   const active = SHAPES.some((entry) => entry.id === tool);
-  return /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsx72(
     ChalkMenu,
     {
       side,
-      trigger: /* @__PURE__ */ jsxs46("button", { type: "button", className: "chalk-board-tool", "aria-label": "Shapes", "aria-keyshortcuts": "R", "aria-pressed": active, children: [
-        /* @__PURE__ */ jsx71(BoardIcon, { name: shape }),
-        /* @__PURE__ */ jsx71(BoardIcon, { name: "chevron", size: 9, className: "chalk-board-tool-caret" })
+      trigger: /* @__PURE__ */ jsxs48("button", { type: "button", className: "chalk-board-tool", "aria-label": "Shapes", "aria-keyshortcuts": "R", "aria-pressed": active, children: [
+        /* @__PURE__ */ jsx72(BoardIcon, { name: shape }),
+        /* @__PURE__ */ jsx72(BoardIcon, { name: "chevron", size: 9, className: "chalk-board-tool-caret" })
       ] }),
-      children: SHAPES.map((entry) => /* @__PURE__ */ jsxs46(ChalkMenuItem, { checked: tool === entry.id, onClick: () => onTool(entry.id), children: [
-        /* @__PURE__ */ jsx71(BoardIcon, { name: entry.id, size: 18 }),
+      children: SHAPES.map((entry) => /* @__PURE__ */ jsxs48(ChalkMenuItem, { checked: tool === entry.id, onClick: () => onTool(entry.id), children: [
+        /* @__PURE__ */ jsx72(BoardIcon, { name: entry.id, size: 18 }),
         entry.label,
-        /* @__PURE__ */ jsx71("kbd", { className: "chalk-board-menu-kbd", children: entry.key })
+        /* @__PURE__ */ jsx72("kbd", { className: "chalk-board-menu-kbd", children: entry.key })
       ] }, entry.id))
     }
   );
 }
 function ColorPanel({ color, width, surface, theme, onColor, onWidth }) {
-  return /* @__PURE__ */ jsxs46("div", { className: "chalk-board-colors", children: [
-    /* @__PURE__ */ jsx71("div", { role: "radiogroup", "aria-label": "Colour", className: "chalk-board-swatches", children: PEN_COLORS.map((entry) => /* @__PURE__ */ jsx71("button", { type: "button", role: "radio", "aria-checked": color === entry.id, "aria-label": entry.label, className: "chalk-board-swatch", onClick: () => onColor(entry.id), children: /* @__PURE__ */ jsx71("i", { style: { background: penHex(entry.id, surface, theme) } }) }, entry.id)) }),
-    /* @__PURE__ */ jsx71("div", { role: "radiogroup", "aria-label": "Stroke width", className: "chalk-board-swatches", children: PEN_WIDTHS.map((entry) => /* @__PURE__ */ jsx71("button", { type: "button", role: "radio", "aria-checked": width === entry.id, "aria-label": entry.label, className: "chalk-board-width", onClick: () => onWidth(entry.id), children: /* @__PURE__ */ jsx71("i", { style: { height: entry.units } }) }, entry.id)) })
+  return /* @__PURE__ */ jsxs48("div", { className: "chalk-board-colors", children: [
+    /* @__PURE__ */ jsx72("div", { role: "radiogroup", "aria-label": "Colour", className: "chalk-board-swatches", children: PEN_COLORS.map((entry) => /* @__PURE__ */ jsx72("button", { type: "button", role: "radio", "aria-checked": color === entry.id, "aria-label": entry.label, className: "chalk-board-swatch", onClick: () => onColor(entry.id), children: /* @__PURE__ */ jsx72("i", { style: { background: penHex(entry.id, surface, theme) } }) }, entry.id)) }),
+    /* @__PURE__ */ jsx72("div", { role: "radiogroup", "aria-label": "Stroke width", className: "chalk-board-swatches", children: PEN_WIDTHS.map((entry) => /* @__PURE__ */ jsx72("button", { type: "button", role: "radio", "aria-checked": width === entry.id, "aria-label": entry.label, className: "chalk-board-width", onClick: () => onWidth(entry.id), children: /* @__PURE__ */ jsx72("i", { style: { height: entry.units } }) }, entry.id)) })
   ] });
 }
 function ColorButton(props) {
   const swatch = penHex(props.color, props.surface, props.theme);
-  return /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsx72(
     ChalkPopover,
     {
       label: "Colour and width",
@@ -8383,8 +8826,8 @@ function ColorButton(props) {
       open: props.open,
       onOpenChange: props.onOpenChange,
       className: "chalk-board-color-popover",
-      trigger: props.trigger ?? /* @__PURE__ */ jsx71("button", { type: "button", className: "chalk-board-tool", "aria-label": `Colour: ${PEN_COLORS.find((entry) => entry.id === props.color).label}`, children: /* @__PURE__ */ jsx71("span", { className: "chalk-board-tool-swatch", style: { background: swatch } }) }),
-      children: /* @__PURE__ */ jsx71(ColorPanel, { ...props })
+      trigger: props.trigger ?? /* @__PURE__ */ jsx72("button", { type: "button", className: "chalk-board-tool", "aria-label": `Colour: ${PEN_COLORS.find((entry) => entry.id === props.color).label}`, children: /* @__PURE__ */ jsx72("span", { className: "chalk-board-tool-swatch", style: { background: swatch } }) }),
+      children: /* @__PURE__ */ jsx72(ColorPanel, { ...props })
     }
   );
 }
@@ -8401,20 +8844,20 @@ function roveFocus(event, vertical) {
   buttons[next]?.focus();
 }
 function Separator() {
-  return /* @__PURE__ */ jsx71("span", { className: "chalk-board-separator", "aria-hidden": "true" });
+  return /* @__PURE__ */ jsx72("span", { className: "chalk-board-separator", "aria-hidden": "true" });
 }
 function ToolRow({ tool, shape, onTool, place, canUndo, canRedo, onUndo, onRedo, ...colors }) {
-  const groups = TOOLS.map((group, index) => /* @__PURE__ */ jsxs46("span", { className: "chalk-board-group", children: [
-    group.map((entry) => /* @__PURE__ */ jsx71(ToolButton, { entry, active: tool === entry.tool, onTool }, entry.tool)),
-    index === 1 ? /* @__PURE__ */ jsx71(ShapesButton, { tool, shape, onTool, side: place === "top" ? "bottom" : "top" }) : null
+  const groups = TOOLS.map((group, index) => /* @__PURE__ */ jsxs48("span", { className: "chalk-board-group", children: [
+    group.map((entry) => /* @__PURE__ */ jsx72(ToolButton, { entry, active: tool === entry.tool, onTool }, entry.tool)),
+    index === 1 ? /* @__PURE__ */ jsx72(ShapesButton, { tool, shape, onTool, side: place === "top" ? "bottom" : "top" }) : null
   ] }, index));
-  return /* @__PURE__ */ jsxs46(Fragment29, { children: [
-    groups.flatMap((group, index) => [index > 0 ? /* @__PURE__ */ jsx71(Separator, {}, `s${index}`) : null, group]),
-    /* @__PURE__ */ jsx71(Separator, {}),
-    /* @__PURE__ */ jsx71(Tip, { label: "Undo", keyName: "\u2318Z", children: /* @__PURE__ */ jsx71("button", { type: "button", className: "chalk-board-tool", "aria-label": "Undo", disabled: !canUndo, onClick: onUndo, children: /* @__PURE__ */ jsx71(BoardIcon, { name: "undo" }) }) }),
-    /* @__PURE__ */ jsx71(Tip, { label: "Redo", keyName: "\u21E7\u2318Z", children: /* @__PURE__ */ jsx71("button", { type: "button", className: "chalk-board-tool", "aria-label": "Redo", disabled: !canRedo, onClick: onRedo, children: /* @__PURE__ */ jsx71(BoardIcon, { name: "redo" }) }) }),
-    /* @__PURE__ */ jsx71(Separator, {}),
-    /* @__PURE__ */ jsx71(ColorButton, { ...colors })
+  return /* @__PURE__ */ jsxs48(Fragment32, { children: [
+    groups.flatMap((group, index) => [index > 0 ? /* @__PURE__ */ jsx72(Separator, {}, `s${index}`) : null, group]),
+    /* @__PURE__ */ jsx72(Separator, {}),
+    /* @__PURE__ */ jsx72(Tip, { label: "Undo", keyName: "\u2318Z", children: /* @__PURE__ */ jsx72("button", { type: "button", className: "chalk-board-tool", "aria-label": "Undo", disabled: !canUndo, onClick: onUndo, children: /* @__PURE__ */ jsx72(BoardIcon, { name: "undo" }) }) }),
+    /* @__PURE__ */ jsx72(Tip, { label: "Redo", keyName: "\u21E7\u2318Z", children: /* @__PURE__ */ jsx72("button", { type: "button", className: "chalk-board-tool", "aria-label": "Redo", disabled: !canRedo, onClick: onRedo, children: /* @__PURE__ */ jsx72(BoardIcon, { name: "redo" }) }) }),
+    /* @__PURE__ */ jsx72(Separator, {}),
+    /* @__PURE__ */ jsx72(ColorButton, { ...colors })
   ] });
 }
 function nearestPlace(board, x, y) {
@@ -8426,18 +8869,18 @@ function BoardIsland(props) {
   const island = useRef32(null);
   const tabStop = useRef32(null);
   const reduced = usePrefersReducedMotion();
-  const [drag, setDrag] = useState42(null);
+  const [drag, setDrag] = useState46(null);
   const dropRect = useRef32(null);
-  const [expanded, setExpanded] = useState42(false);
-  const [colorsOpen, setColorsOpen] = useState42(false);
+  const [expanded, setExpanded] = useState46(false);
+  const [colorsOpen, setColorsOpen] = useState46(false);
   const press = useRef32({ long: false });
-  useLayoutEffect4(() => {
+  useLayoutEffect7(() => {
     const buttons = [...island.current?.querySelectorAll("button") ?? []];
-    const stop = buttons.find((button) => button === tabStop.current && !button.disabled) ?? buttons.find((button) => !button.disabled);
-    tabStop.current = stop ?? null;
-    for (const button of buttons) button.tabIndex = button === stop ? 0 : -1;
+    const stop2 = buttons.find((button) => button === tabStop.current && !button.disabled) ?? buttons.find((button) => !button.disabled);
+    tabStop.current = stop2 ?? null;
+    for (const button of buttons) button.tabIndex = button === stop2 ? 0 : -1;
   });
-  useLayoutEffect4(() => {
+  useLayoutEffect7(() => {
     const element = island.current;
     const from = dropRect.current;
     dropRect.current = null;
@@ -8454,13 +8897,13 @@ function BoardIsland(props) {
   const startDrag = (event) => {
     const board = island.current?.parentElement;
     if (!board || event.button !== 0) return;
-    const start = { x: event.clientX, y: event.clientY };
+    const start2 = { x: event.clientX, y: event.clientY };
     let moved = false;
     const grip = event.currentTarget;
     grip.setPointerCapture(event.pointerId);
     const move = (next) => {
-      const dx = next.clientX - start.x;
-      const dy = next.clientY - start.y;
+      const dx = next.clientX - start2.x;
+      const dy = next.clientY - start2.y;
       if (!moved && Math.hypot(dx, dy) < DRAG_START_PX) return;
       moved = true;
       setDrag({ x: dx, y: dy, near: nearestPlace(board.getBoundingClientRect(), next.clientX, next.clientY) });
@@ -8493,7 +8936,7 @@ function BoardIsland(props) {
   };
   if (compact && !expanded) {
     const cancelPress = () => clearTimeout(press.current.timer);
-    return /* @__PURE__ */ jsx71("div", { ref: island, className: "chalk-board-island", "data-place": "compact", children: /* @__PURE__ */ jsx71(
+    return /* @__PURE__ */ jsx72("div", { ref: island, className: "chalk-board-island", "data-place": "compact", children: /* @__PURE__ */ jsx72(
       ColorButton,
       {
         ...props,
@@ -8501,7 +8944,7 @@ function BoardIsland(props) {
         onOpenChange: (open) => {
           if (!open) setColorsOpen(false);
         },
-        trigger: /* @__PURE__ */ jsxs46(
+        trigger: /* @__PURE__ */ jsxs48(
           "button",
           {
             type: "button",
@@ -8522,8 +8965,8 @@ function BoardIsland(props) {
               if (!press.current.long) setExpanded(true);
             },
             children: [
-              /* @__PURE__ */ jsx71(BoardIcon, { name: "pen" }),
-              /* @__PURE__ */ jsx71("span", { className: "chalk-board-tool-dot", style: { background: penHex(props.color, props.surface, props.theme) } })
+              /* @__PURE__ */ jsx72(BoardIcon, { name: "pen" }),
+              /* @__PURE__ */ jsx72("span", { className: "chalk-board-tool-dot", style: { background: penHex(props.color, props.surface, props.theme) } })
             ]
           }
         )
@@ -8531,9 +8974,9 @@ function BoardIsland(props) {
     ) });
   }
   const vertical = place === "left" && !compact;
-  return /* @__PURE__ */ jsxs46(Fragment29, { children: [
-    drag ? ISLAND_PLACES.map((entry) => /* @__PURE__ */ jsx71("div", { className: "chalk-board-dropzone", "data-zone": entry.id, "data-near": drag.near === entry.id || void 0, "aria-hidden": "true" }, entry.id)) : null,
-    /* @__PURE__ */ jsxs46(
+  return /* @__PURE__ */ jsxs48(Fragment32, { children: [
+    drag ? ISLAND_PLACES.map((entry) => /* @__PURE__ */ jsx72("div", { className: "chalk-board-dropzone", "data-zone": entry.id, "data-near": drag.near === entry.id || void 0, "aria-hidden": "true" }, entry.id)) : null,
+    /* @__PURE__ */ jsxs48(
       "div",
       {
         ref: island,
@@ -8553,11 +8996,11 @@ function BoardIsland(props) {
           for (const button of event.currentTarget.querySelectorAll("button")) button.tabIndex = button === event.target ? 0 : -1;
         },
         children: [
-          compact ? /* @__PURE__ */ jsxs46(Fragment29, { children: [
-            /* @__PURE__ */ jsx71("button", { type: "button", className: "chalk-board-tool", "aria-label": "Close drawing tools", onClick: () => setExpanded(false), children: /* @__PURE__ */ jsx71(BoardIcon, { name: "close" }) }),
-            /* @__PURE__ */ jsx71(Separator, {})
-          ] }) : /* @__PURE__ */ jsx71(Tip, { label: "Move the tools", children: /* @__PURE__ */ jsx71("button", { type: "button", className: "chalk-board-grip", "aria-label": "Move the tools. Use Alt and the arrow keys to dock them left, bottom or top.", onPointerDown: startDrag, onKeyDown: gripKeys, children: /* @__PURE__ */ jsx71(GripIcon, {}) }) }),
-          /* @__PURE__ */ jsx71(ToolRow, { ...props, place: compact ? "bottom" : place })
+          compact ? /* @__PURE__ */ jsxs48(Fragment32, { children: [
+            /* @__PURE__ */ jsx72("button", { type: "button", className: "chalk-board-tool", "aria-label": "Close drawing tools", onClick: () => setExpanded(false), children: /* @__PURE__ */ jsx72(BoardIcon, { name: "close" }) }),
+            /* @__PURE__ */ jsx72(Separator, {})
+          ] }) : /* @__PURE__ */ jsx72(Tip, { label: "Move the tools", children: /* @__PURE__ */ jsx72("button", { type: "button", className: "chalk-board-grip", "aria-label": "Move the tools. Use Alt and the arrow keys to dock them left, bottom or top.", onPointerDown: startDrag, onKeyDown: gripKeys, children: /* @__PURE__ */ jsx72(GripIcon, {}) }) }),
+          /* @__PURE__ */ jsx72(ToolRow, { ...props, place: compact ? "bottom" : place })
         ]
       }
     )
@@ -8566,54 +9009,76 @@ function BoardIsland(props) {
 
 // src/components/board/BoardMenu.tsx
 import { Menu as Menu5 } from "@base-ui/react/menu";
-import { Fragment as Fragment30, jsx as jsx72, jsxs as jsxs47 } from "react/jsx-runtime";
+import { Fragment as Fragment33, jsx as jsx73, jsxs as jsxs49 } from "react/jsx-runtime";
 function SurfacePreview({ surface }) {
-  return /* @__PURE__ */ jsx72("span", { className: "chalk-board-tile-preview", "data-surface": surface, "aria-hidden": "true", children: surface === "dots" ? null : /* @__PURE__ */ jsx72("svg", { viewBox: "0 0 60 38", width: "100%", height: "100%", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx72("path", { d: "M14 22c5-8 9-8 12 0s8 6 12-2 6-6 8 0" }) }) });
+  return /* @__PURE__ */ jsx73("span", { className: "chalk-board-tile-preview", "data-surface": surface, "aria-hidden": "true", children: surface === "dots" ? null : /* @__PURE__ */ jsx73("svg", { viewBox: "0 0 60 38", width: "100%", height: "100%", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx73("path", { d: "M14 22c5-8 9-8 12 0s8 6 12-2 6-6 8 0" }) }) });
 }
 function IslandPreview({ place }) {
-  return /* @__PURE__ */ jsx72("span", { className: "chalk-board-tile-preview", "data-island": place, "aria-hidden": "true", children: /* @__PURE__ */ jsx72("i", {}) });
+  return /* @__PURE__ */ jsx73("span", { className: "chalk-board-tile-preview", "data-island": place, "aria-hidden": "true", children: /* @__PURE__ */ jsx73("i", {}) });
 }
 function Tiles({ label, value, options, onChange, preview }) {
-  return /* @__PURE__ */ jsxs47(Fragment30, { children: [
-    /* @__PURE__ */ jsx72("div", { className: "chalk-board-menu-sublabel", children: label }),
-    /* @__PURE__ */ jsx72(Menu5.RadioGroup, { value, onValueChange: (next) => onChange(next), className: "chalk-board-tiles", "aria-label": label, children: options.map((option) => /* @__PURE__ */ jsxs47(Menu5.RadioItem, { value: option.id, closeOnClick: false, className: "chalk-board-tile", children: [
+  return /* @__PURE__ */ jsxs49(Fragment33, { children: [
+    /* @__PURE__ */ jsx73("div", { className: "chalk-board-menu-sublabel", children: label }),
+    /* @__PURE__ */ jsx73(Menu5.RadioGroup, { value, onValueChange: (next) => onChange(next), className: "chalk-board-tiles", "aria-label": label, children: options.map((option) => /* @__PURE__ */ jsxs49(Menu5.RadioItem, { value: option.id, closeOnClick: false, className: "chalk-board-tile", children: [
       preview(option.id),
       option.label
     ] }, option.id)) })
   ] });
 }
-function BoardMenu({ surface, onSurface, place, onPlace, onDownload, onCopy, onBring, onClear, onClose }) {
-  return /* @__PURE__ */ jsxs47(
+function Check({ on }) {
+  return /* @__PURE__ */ jsx73("span", { "data-part": "menu-check", className: "chalk-menu-check", "aria-hidden": "true", children: on ? /* @__PURE__ */ jsx73("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx73("path", { d: "M20 6L9 17l-5-5" }) }) : null });
+}
+function PickedPeople({ people, onPick }) {
+  if (people.length === 0) return /* @__PURE__ */ jsx73("p", { className: "chalk-board-picked-note", children: "No one else is here yet. Hosts can always draw." });
+  return /* @__PURE__ */ jsxs49(Fragment33, { children: [
+    /* @__PURE__ */ jsx73("div", { className: "chalk-board-picked", role: "group", "aria-label": "Picked people", children: people.map((person) => /* @__PURE__ */ jsxs49(Menu5.CheckboxItem, { className: "chalk-menu-item", checked: person.picked, onCheckedChange: (picked) => onPick(person.id, picked), closeOnClick: false, children: [
+      /* @__PURE__ */ jsx73(Check, { on: person.picked }),
+      /* @__PURE__ */ jsx73("span", { className: "chalk-board-picked-name", children: person.name })
+    ] }, person.id)) }),
+    people.some((person) => person.picked) ? null : /* @__PURE__ */ jsx73("p", { className: "chalk-board-picked-note", children: "Only hosts can draw until you pick someone." })
+  ] });
+}
+function WhoCanDrawSection({ policy, people, onPolicy, onPick }) {
+  return /* @__PURE__ */ jsxs49(Fragment33, { children: [
+    /* @__PURE__ */ jsx73(Menu5.Separator, { className: "chalk-board-menu-rule" }),
+    /* @__PURE__ */ jsx73(ChalkMenuLabel, { children: "Who can draw" }),
+    DRAW_POLICIES.map((option) => /* @__PURE__ */ jsx73(ChalkMenuItem, { checked: policy === option.id, closeOnClick: false, onClick: () => onPolicy(option.id), children: option.label }, option.id)),
+    policy === "picked" ? /* @__PURE__ */ jsx73(PickedPeople, { people, onPick }) : null
+  ] });
+}
+function BoardMenu({ surface, onSurface, place, onPlace, onDownload, onCopy, whoCanDraw, onBring, onClear, onClose }) {
+  return /* @__PURE__ */ jsxs49(
     ChalkMenu,
     {
       className: "chalk-board-menu",
-      trigger: /* @__PURE__ */ jsx72("button", { type: "button", className: "chalk-board-menu-button", "aria-label": "Board menu", children: /* @__PURE__ */ jsx72(BoardIcon, { name: "more" }) }),
+      trigger: /* @__PURE__ */ jsx73("button", { type: "button", className: "chalk-board-menu-button", "aria-label": "Board menu", children: /* @__PURE__ */ jsx73(BoardIcon, { name: "more" }) }),
       children: [
-        /* @__PURE__ */ jsxs47(ChalkMenuItem, { onClick: onDownload, children: [
-          /* @__PURE__ */ jsx72(BoardIcon, { name: "download", size: 18 }),
+        /* @__PURE__ */ jsxs49(ChalkMenuItem, { onClick: onDownload, children: [
+          /* @__PURE__ */ jsx73(BoardIcon, { name: "download", size: 18 }),
           "Download as PNG"
         ] }),
-        /* @__PURE__ */ jsxs47(ChalkMenuItem, { onClick: onCopy, children: [
-          /* @__PURE__ */ jsx72(BoardIcon, { name: "copy", size: 18 }),
+        /* @__PURE__ */ jsxs49(ChalkMenuItem, { onClick: onCopy, children: [
+          /* @__PURE__ */ jsx73(BoardIcon, { name: "copy", size: 18 }),
           "Copy as image"
         ] }),
-        /* @__PURE__ */ jsx72(Menu5.Separator, { className: "chalk-board-menu-rule" }),
-        /* @__PURE__ */ jsx72(ChalkMenuLabel, { children: "Board appearance" }),
-        /* @__PURE__ */ jsx72(Tiles, { label: "Surface", value: surface, options: SURFACES, onChange: onSurface, preview: (id) => /* @__PURE__ */ jsx72(SurfacePreview, { surface: id }) }),
-        place ? /* @__PURE__ */ jsx72(Tiles, { label: "Tool island", value: place, options: ISLAND_PLACES, onChange: onPlace, preview: (id) => /* @__PURE__ */ jsx72(IslandPreview, { place: id }) }) : null,
-        onBring || onClear ? /* @__PURE__ */ jsx72(Menu5.Separator, { className: "chalk-board-menu-rule" }) : null,
-        onBring ? /* @__PURE__ */ jsxs47(ChalkMenuItem, { onClick: onBring, children: [
-          /* @__PURE__ */ jsx72(BoardIcon, { name: "target", size: 18 }),
+        /* @__PURE__ */ jsx73(Menu5.Separator, { className: "chalk-board-menu-rule" }),
+        /* @__PURE__ */ jsx73(ChalkMenuLabel, { children: "Board appearance" }),
+        /* @__PURE__ */ jsx73(Tiles, { label: "Surface", value: surface, options: SURFACES, onChange: onSurface, preview: (id) => /* @__PURE__ */ jsx73(SurfacePreview, { surface: id }) }),
+        place ? /* @__PURE__ */ jsx73(Tiles, { label: "Tool island", value: place, options: ISLAND_PLACES, onChange: onPlace, preview: (id) => /* @__PURE__ */ jsx73(IslandPreview, { place: id }) }) : null,
+        whoCanDraw ? /* @__PURE__ */ jsx73(WhoCanDrawSection, { ...whoCanDraw }) : null,
+        onBring || onClear ? /* @__PURE__ */ jsx73(Menu5.Separator, { className: "chalk-board-menu-rule" }) : null,
+        onBring ? /* @__PURE__ */ jsxs49(ChalkMenuItem, { onClick: onBring, children: [
+          /* @__PURE__ */ jsx73(BoardIcon, { name: "target", size: 18 }),
           "Bring everyone here"
         ] }) : null,
-        onClear ? /* @__PURE__ */ jsx72(ChalkMenuItem, { onClick: onClear, children: /* @__PURE__ */ jsxs47("span", { className: "chalk-board-danger", children: [
-          /* @__PURE__ */ jsx72(BoardIcon, { name: "trash", size: 18 }),
+        onClear ? /* @__PURE__ */ jsx73(ChalkMenuItem, { onClick: onClear, children: /* @__PURE__ */ jsxs49("span", { className: "chalk-board-danger", children: [
+          /* @__PURE__ */ jsx73(BoardIcon, { name: "trash", size: 18 }),
           "Clear board"
         ] }) }) : null,
-        onClose ? /* @__PURE__ */ jsxs47(Fragment30, { children: [
-          /* @__PURE__ */ jsx72(Menu5.Separator, { className: "chalk-board-menu-rule" }),
-          /* @__PURE__ */ jsxs47(ChalkMenuItem, { onClick: onClose, children: [
-            /* @__PURE__ */ jsx72(BoardIcon, { name: "close", size: 18 }),
+        onClose ? /* @__PURE__ */ jsxs49(Fragment33, { children: [
+          /* @__PURE__ */ jsx73(Menu5.Separator, { className: "chalk-board-menu-rule" }),
+          /* @__PURE__ */ jsxs49(ChalkMenuItem, { onClick: onClose, children: [
+            /* @__PURE__ */ jsx73(BoardIcon, { name: "close", size: 18 }),
             "Close board"
           ] })
         ] }) : null
@@ -8622,10 +9087,43 @@ function BoardMenu({ surface, onSurface, place, onPlace, onDownload, onCopy, onB
   );
 }
 
+// src/components/board/board-draw-policy.ts
+import { useCallback as useCallback13, useMemo as useMemo16 } from "react";
+function useWhoCanDraw(toast) {
+  const client = useSpaceClient();
+  const isHost = useCan("manageWhiteboard");
+  const self = useSelf();
+  const { roster } = useParticipants();
+  const { access } = useWhiteboard();
+  const transport = client.whiteboard.transport();
+  const people = useMemo16(
+    () => roster.filter((person) => person.participantId !== self.participantId && !person.capabilities.includes("manageWhiteboard")).map((person) => ({
+      id: person.participantId,
+      name: person.displayName,
+      picked: access.permissions.some((permission) => permission.participantId === person.participantId && permission.canDraw)
+    })),
+    [roster, self.participantId, access.permissions]
+  );
+  const onPolicy = useCallback13(
+    (policy) => {
+      transport?.setDrawPolicy?.(policy).catch(() => toast({ type: "error", message: "Could not change who can draw. Try again." }));
+    },
+    [transport, toast]
+  );
+  const onPick = useCallback13(
+    (id, picked) => {
+      transport?.setDrawPermission(id, picked).catch(() => toast({ type: "error", message: "Could not change who can draw. Try again." }));
+    },
+    [transport, toast]
+  );
+  if (!isHost || access.policy === null || !transport?.setDrawPolicy) return void 0;
+  return { policy: access.policy, people, onPolicy, onPick };
+}
+
 // src/components/board/BoardStyles.tsx
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { jsx as jsx74 } from "react/jsx-runtime";
 function BoardStyles() {
-  return /* @__PURE__ */ jsx73("style", { href: "chalk-board", precedence: "default", children: BOARD_CSS });
+  return /* @__PURE__ */ jsx74("style", { href: "chalk-board", precedence: "default", children: BOARD_CSS });
 }
 var BOARD_CSS = `.chalk-board {
   --board-shadow: 0 0 0 1px var(--chalk-line-strong), 0 8px 24px rgba(0,0,0,.35);
@@ -8728,6 +9226,9 @@ body:has(.chalk-board) :is(.excalidraw-modal-container, .excalidraw-tooltip) {di
 .chalk-board-tile-preview[data-island="left"] i {left:5px; top:20%; bottom:20%; width:5px;}
 .chalk-board-menu-kbd {margin-left:auto; padding-left:18px; font:600 11px ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--chalk-muted-text);}
 .chalk-board-danger {display:contents; color:var(--chalk-danger-text);}
+.chalk-board-picked {max-height:220px; overflow-y:auto; padding-left:16px;}
+.chalk-board-picked-name {min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
+.chalk-board-picked-note {margin:0; padding:4px 10px 8px 26px; font-size:12px; line-height:1.4; color:var(--chalk-muted-text);}
 
 .chalk-board-zoom {position:absolute; right:12px; bottom:12px; z-index:5; height:40px; display:flex; align-items:center; border-radius:999px; padding:0 4px; transition:translate .2s ease-out;}
 .chalk-board-zoom button {height:32px; min-width:32px; border-radius:999px; display:grid; place-items:center; padding:0 6px !important; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums;}
@@ -8796,7 +9297,7 @@ body:has(.chalk-board) :is(.excalidraw-modal-container, .excalidraw-tooltip) {di
 `;
 
 // src/components/board/Board.tsx
-import { Fragment as Fragment31, jsx as jsx74, jsxs as jsxs48 } from "react/jsx-runtime";
+import { Fragment as Fragment34, jsx as jsx75, jsxs as jsxs50 } from "react/jsx-runtime";
 var SURFACE_KEY = "chalk.board.surface";
 var ISLAND_KEY = "chalk.board.island";
 var COMPACT_BELOW_PX = 1060;
@@ -8814,15 +9315,15 @@ function fitContent(engine, animate) {
 function isTyping(target) {
   return target instanceof HTMLElement && (target.isContentEditable || target.tagName === "TEXTAREA" || target.tagName === "INPUT");
 }
-function useCamera(engine, root, onManualMove, onMoved, onViewportReady) {
+function useCamera(engine, root, onLeadingMove, onMoved, onViewportReady) {
   const cameraRef = useRef33({ scrollX: 0, scrollY: 0, zoom: 1 });
   const viewportRef = useRef33({ width: 1, height: 1 });
   const expected = useRef33(null);
   const glide = useRef33(0);
-  const [zoom, setZoom] = useState43(1);
+  const [zoom, setZoom] = useState47(1);
   const reduced = usePrefersReducedMotion();
-  const manual = useRef33(onManualMove);
-  manual.current = onManualMove;
+  const leading = useRef33(onLeadingMove);
+  leading.current = onLeadingMove;
   const moved = useRef33(onMoved);
   moved.current = onMoved;
   const resized = useRef33(onViewportReady);
@@ -8845,6 +9346,7 @@ function useCamera(engine, root, onManualMove, onMoved, onViewportReady) {
     return engine.api.onScrollChange((scrollX, scrollY, next) => {
       const camera = { scrollX, scrollY, zoom: next.value };
       if (camera.zoom !== clampZoom(camera.zoom)) {
+        leading.current();
         expected.current = { ...camera, zoom: clampZoom(camera.zoom) };
         setCamera(engine, expected.current);
         return;
@@ -8853,7 +9355,7 @@ function useCamera(engine, root, onManualMove, onMoved, onViewportReady) {
       if (expected.current && sameCamera(camera, expected.current)) return;
       expected.current = null;
       cancelAnimationFrame(glide.current);
-      manual.current();
+      leading.current();
       moved.current();
     });
   }, [engine, root]);
@@ -8870,10 +9372,16 @@ function useCamera(engine, root, onManualMove, onMoved, onViewportReady) {
     return () => observer.disconnect();
   }, [root]);
   useEffect37(() => () => cancelAnimationFrame(glide.current), []);
-  const move = useCallback13(
-    (target, animate) => {
+  const move = useCallback14(
+    (target, animate, source) => {
       if (!engine) return;
+      if (source !== "follow") leading.current();
       cancelAnimationFrame(glide.current);
+      if (sameCamera(target, cameraRef.current)) {
+        expected.current = target;
+        moved.current();
+        return;
+      }
       const set = (camera) => {
         expected.current = camera;
         setCamera(engine, camera);
@@ -8886,16 +9394,22 @@ function useCamera(engine, root, onManualMove, onMoved, onViewportReady) {
       const from = cameraRef.current;
       const started = performance.now();
       const step = (now) => {
-        const progress = Math.min(1, (now - started) / GLIDE_MS);
+        const progress = Math.max(0, Math.min(1, (now - started) / GLIDE_MS));
         set(mixCamera(from, target, 1 - (1 - progress) ** 3));
         if (progress < 1) glide.current = requestAnimationFrame(step);
-        else moved.current();
+        else {
+          if (source !== "follow") leading.current();
+          moved.current();
+        }
       };
       glide.current = requestAnimationFrame(step);
     },
     [engine, reduced]
   );
-  return useMemo16(() => ({ cameraRef, viewportRef, zoom, move }), [move, zoom]);
+  const fit = useCallback14(() => {
+    if (engine) fitContent(engine, false);
+  }, [engine]);
+  return useMemo17(() => ({ cameraRef, viewportRef, zoom, move, fit }), [move, zoom, fit]);
 }
 function useBoardKeys(root, handlers) {
   const latest = useRef33(handlers);
@@ -8972,29 +9486,30 @@ function Board({ board, primary, visible, colorScheme, people, following, onFoll
   const boardSession = useWhiteboard().engine;
   const offline = connection.status === "reconnecting";
   const phone = useMediaQuery("(max-width: 640px)");
-  const [engine, setEngine] = useState43(null);
+  const [engine, setEngine] = useState47(null);
   const toast = useBoardToast(engine);
-  const [surface, setSurface] = useState43(() => readStored(SURFACE_KEY, SURFACES, "chalkboard"));
-  const [place, setPlace] = useState43(() => readStored(ISLAND_KEY, ISLAND_PLACES, "bottom"));
-  const [tool, setTool] = useState43("pen");
-  const [shape, setShape] = useState43("rectangle");
-  const [color, setColor] = useState43("ink");
-  const [width, setWidth] = useState43("medium");
-  const [elementCount, setElementCount] = useState43(0);
+  const whoCanDraw = useWhoCanDraw(toast);
+  const [surface, setSurface] = useState47(() => readStored(SURFACE_KEY, SURFACES, "chalkboard"));
+  const [place, setPlace] = useState47(() => readStored(ISLAND_KEY, ISLAND_PLACES, "bottom"));
+  const [tool, setTool] = useState47("pen");
+  const [shape, setShape] = useState47("rectangle");
+  const [color, setColor] = useState47("ink");
+  const [width, setWidth] = useState47("medium");
+  const [elementCount, setElementCount] = useState47(0);
   const empty = elementCount === 0;
-  const [narrow, setNarrow] = useState43(false);
-  const [announcement, setAnnouncement] = useState43("");
+  const [narrow, setNarrow] = useState47(false);
+  const [announcement, setAnnouncement] = useState47("");
   const canDraw = primary && (board.collab?.canDraw ?? board.canDraw ?? true);
   const compact = phone || narrow;
   const history = useEngineHistory(root, engine);
   const touched = useRef33(false);
   const views = useRef33(/* @__PURE__ */ new Map());
   const cursors = useRef33(/* @__PURE__ */ new Map());
-  const pen = useMemo16(() => ({ color, width, surface, theme: colorScheme }), [color, width, surface, colorScheme]);
+  const pen = useMemo17(() => ({ color, width, surface, theme: colorScheme }), [color, width, surface, colorScheme]);
   const followingRef = useRef33(following);
   followingRef.current = following;
-  const nameOf = useCallback13((id) => first(people.find((person) => person.id === id)?.displayName ?? "Someone"), [people]);
-  const colorFor = useCallback13(
+  const nameOf = useCallback14((id) => first(people.find((person) => person.id === id)?.displayName ?? "Someone"), [people]);
+  const colorFor = useCallback14(
     (id) => personColor(
       Math.max(
         0,
@@ -9003,7 +9518,7 @@ function Board({ board, primary, visible, colorScheme, people, following, onFoll
     ),
     [people]
   );
-  const stopFollowing = useCallback13(() => {
+  const stopFollowing = useCallback14(() => {
     const current = followingRef.current;
     if (!current) return;
     followingRef.current = null;
@@ -9013,14 +9528,32 @@ function Board({ board, primary, visible, colorScheme, people, following, onFoll
   const shareView = useRef33(() => false);
   const viewSender = useRef33(sendView);
   viewSender.current = sendView;
+  const selectedFollow = useRef33(following);
   const ownParticipantId = useSelf().participantId;
-  const appliedVersions = useRef33(new ViewVersions());
+  const appliedVersions = useRef33(new ChalkWhiteboardViewVersions());
+  const { roster } = useParticipants();
+  const previousRoster = useRef33(new Set(roster.map((person) => person.participantId)));
+  useEffect37(() => {
+    const next = new Set(roster.map((person) => person.participantId));
+    for (const id of previousRoster.current) {
+      if (next.has(id)) continue;
+      appliedVersions.current.forgetParticipant(id);
+      for (const [publisher, view] of views.current) {
+        if (publisher === id || view.originParticipantId === id) views.current.delete(publisher);
+      }
+      cursors.current.delete(id);
+    }
+    previousRoster.current = next;
+  }, [roster]);
   const viewsAvailable = sendView !== void 0;
   const reapplyView = useRef33(() => void 0);
   const camera = useCamera(
     engine,
     root,
-    stopFollowing,
+    () => {
+      stopFollowing();
+      shareView.current(false, true);
+    },
     () => shareView.current(false),
     () => reapplyView.current()
   );
@@ -9028,21 +9561,35 @@ function Board({ board, primary, visible, colorScheme, people, following, onFoll
     if (!visible || !viewsAvailable || !engine) return;
     let last = 0;
     let pending;
+    let pendingLead = false;
     const send = (bring2) => {
+      const lead = pendingLead || bring2;
+      pendingLead = false;
       const followedView = followingRef.current ? views.current.get(followingRef.current) : void 0;
-      if (followedView && !followedView.originParticipantId && !bring2) return true;
+      const selected = followedView !== void 0 && selectedFollow.current === followingRef.current;
+      if (followedView && !followedView.originParticipantId && !followedView.ownerId && !bring2) return true;
       const view = followedView ?? visibleView(camera.cameraRef.current, camera.viewportRef.current);
       last = performance.now();
-      const rectangle = { x: view.x, y: view.y, width: view.width, height: view.height, bring: bring2 };
-      const outgoing = followedView?.originParticipantId ? { ...rectangle, originParticipantId: followedView.originParticipantId, originSequence: followedView.originSequence, ...followedView.originEpoch ? { originEpoch: followedView.originEpoch } : {} } : rectangle;
+      const rectangle = { x: view.x, y: view.y, width: view.width, height: view.height, bring: bring2, lead: lead || selected };
+      let outgoing = rectangle;
+      if (followedView && !lead) {
+        if (followedView.ownerId) {
+          outgoing = { ...rectangle, originParticipantId: followedView.participantId, originSequence: followedView.ownerSequence };
+        } else if (followedView.originParticipantId && followedView.originSequence !== void 0) {
+          outgoing = { ...rectangle, originParticipantId: followedView.originParticipantId, originSequence: followedView.originSequence, ...followedView.originEpoch ? { originEpoch: followedView.originEpoch } : {} };
+        }
+      }
       try {
-        return viewSender.current?.(outgoing) ?? false;
+        const sent = viewSender.current?.(outgoing) ?? false;
+        if (sent && selected) selectedFollow.current = null;
+        return sent;
       } catch (error) {
         console.warn("Board view dropped.", { operation: "sendView", error });
         return false;
       }
     };
-    shareView.current = (bring2) => {
+    shareView.current = (bring2, lead = false) => {
+      pendingLead ||= lead;
       if (bring2) return send(true);
       clearTimeout(pending);
       pending = setTimeout(() => send(false), Math.max(0, VIEW_SEND_MS - (performance.now() - last)));
@@ -9059,13 +9606,13 @@ function Board({ board, primary, visible, colorScheme, people, following, onFoll
     };
   }, [boardSession.sceneId, boardSession.status, camera.cameraRef, camera.viewportRef, connection.status, engine, visible, viewsAvailable]);
   const { move, viewportRef } = camera;
-  const goTo = useCallback13(
+  const goTo = useCallback14(
     (participantId, animate, selected = false) => {
       const view = views.current.get(participantId);
       if (!view || viewportRef.current.width <= 0 || viewportRef.current.height <= 0) return;
-      if (!selected && !appliedVersions.current.isNew(view)) return;
-      appliedVersions.current.remember(view);
-      move(cameraForView(view, viewportRef.current), animate);
+      if (!selected && !appliedVersions.current.isNew(view, participantId)) return;
+      appliedVersions.current.remember(view, participantId);
+      move(cameraForView(view, viewportRef.current), animate, "follow");
     },
     [move, viewportRef]
   );
@@ -9074,17 +9621,23 @@ function Board({ board, primary, visible, colorScheme, people, following, onFoll
   };
   const subscribe3 = board.collab?.subscribe;
   const latestView = useRef33(() => void 0);
+  useEffect37(
+    () => subscribe3?.((event) => {
+      if (event.type !== "snapshot") return;
+      views.current.clear();
+      appliedVersions.current.clear();
+    }),
+    [subscribe3]
+  );
   latestView.current = (event) => {
     const previous = views.current.get(event.participantId);
-    if (!event.bring) {
-      if (event.originParticipantId === ownParticipantId && ownParticipantId) return;
-      if (!appliedVersions.current.isNew(event)) return;
-      if (event.originParticipantId && previous?.originParticipantId === event.originParticipantId && event.originEpoch === previous.originEpoch && event.originSequence <= previous.originSequence) return;
-    }
+    if (!event.bring && (event.participantId === ownParticipantId || !event.ownerId && event.originParticipantId === ownParticipantId)) return;
+    if (!event.bring && !appliedVersions.current.isNew(event, event.participantId)) return;
+    if (!event.ownerId && !event.bring && event.originParticipantId && previous?.originParticipantId === event.originParticipantId && event.originEpoch === previous.originEpoch && event.originSequence <= previous.originSequence) return;
     const newPeer = !previous;
     views.current.delete(event.participantId);
-    views.current.set(event.participantId, event.bring ? { x: event.x, y: event.y, width: event.width, height: event.height, bring: false } : event);
-    if (views.current.size > 256) {
+    views.current.set(event.participantId, { ...event, bring: false });
+    if (views.current.size > WHITEBOARD_VIEW_PEOPLE_MAX) {
       const oldest = views.current.keys().next().value;
       if (oldest !== void 0) views.current.delete(oldest);
     }
@@ -9092,6 +9645,7 @@ function Board({ board, primary, visible, colorScheme, people, following, onFoll
       shareView.current(false);
     }
     if (event.bring) {
+      appliedVersions.current.remember(event, event.participantId);
       followingRef.current = event.participantId;
       onFollow(event.participantId);
       toast({ message: `${nameOf(event.participantId)} brought everyone to this view` });
@@ -9108,7 +9662,11 @@ function Board({ board, primary, visible, colorScheme, people, following, onFoll
     });
   }, [subscribe3]);
   useEffect37(() => {
-    if (following) goTo(following, true, true);
+    selectedFollow.current = following;
+    if (following) {
+      goTo(following, true, true);
+      shareView.current(false);
+    }
   }, [following, goTo]);
   useEffect37(() => {
     if (engine && canDraw) applyTool(engine, tool, pen);
@@ -9123,7 +9681,7 @@ function Board({ board, primary, visible, colorScheme, people, following, onFoll
     setElementCount(engine.api.getSceneElements().length);
     if (hasContent(engine)) {
       touched.current = true;
-      if (!followingRef.current) fitContent(engine, false);
+      if (!followingRef.current) camera.fit();
     }
     const offDown = engine.api.onPointerDown(() => {
       touched.current = true;
@@ -9133,7 +9691,10 @@ function Board({ board, primary, visible, colorScheme, people, following, onFoll
       setElementCount(count);
       if (!touched.current && count > 0) {
         touched.current = true;
-        if (!followingRef.current) requestAnimationFrame(() => fitContent(engine, false));
+        if (!followingRef.current)
+          requestAnimationFrame(() => {
+            if (!followingRef.current) camera.fit();
+          });
       }
       const editing = appState.editingTextElement !== null;
       if (!wasEditing && editing) beforeEditing = sceneSignature(engine);
@@ -9147,7 +9708,7 @@ function Board({ board, primary, visible, colorScheme, people, following, onFoll
       offDown();
       offChange();
     };
-  }, [engine]);
+  }, [engine, camera.fit]);
   useEffect37(() => {
     const element = root.current;
     if (!element) return;
@@ -9155,19 +9716,19 @@ function Board({ board, primary, visible, colorScheme, people, following, onFoll
     observer.observe(element);
     return () => observer.disconnect();
   }, []);
-  const chooseTool = useCallback13((next) => {
+  const chooseTool = useCallback14((next) => {
     if (next === "rectangle" || next === "ellipse" || next === "diamond" || next === "arrow" || next === "line") setShape(next);
     setTool(next);
   }, []);
-  const undo = useCallback13(() => {
+  const undo = useCallback14(() => {
     const container = root.current?.querySelector(".excalidraw");
     if (container) pressHistory(container, false);
   }, []);
-  const redo = useCallback13(() => {
+  const redo = useCallback14(() => {
     const container = root.current?.querySelector(".excalidraw");
     if (container) pressHistory(container, true);
   }, []);
-  const zoomBy = useCallback13(
+  const zoomBy = useCallback14(
     (factor) => {
       stopFollowing();
       camera.move(zoomAroundCentre(camera.cameraRef.current, camera.viewportRef.current, camera.cameraRef.current.zoom * factor), true);
@@ -9249,34 +9810,34 @@ function Board({ board, primary, visible, colorScheme, people, following, onFoll
   const surfaceVars = { "--board-selection": selectionColor(surface, colorScheme) };
   const followed = following ? nameOf(following) : null;
   const ready = engine !== null;
-  return /* @__PURE__ */ jsxs48("div", { ref: root, className: "chalk-board", "data-surface": surface, "data-theme": colorScheme, "data-ready": ready || void 0, "data-compact": compact || void 0, "data-primary": primary || void 0, "data-elements": elementCount, style: surfaceVars, hidden: !visible, children: [
-    /* @__PURE__ */ jsx74(BoardStyles, {}),
-    /* @__PURE__ */ jsx74(WhiteboardCanvas2, { ...board, headless: true, canDraw, collab: board.collab ? { ...board.collab, canDraw, canManage: isHost } : void 0, inkColor: ink, theme: "light", isVisible: visible, className: "chalk-board-engine", onEngineReady: setEngine }),
-    !ready ? /* @__PURE__ */ jsxs48("div", { className: "chalk-board-loading", role: "status", children: [
-      /* @__PURE__ */ jsx74("span", { className: "chalk-board-spinner", "aria-hidden": "true" }),
+  return /* @__PURE__ */ jsxs50("div", { ref: root, className: "chalk-board", "data-surface": surface, "data-theme": colorScheme, "data-ready": ready || void 0, "data-compact": compact || void 0, "data-primary": primary || void 0, "data-elements": elementCount, style: surfaceVars, hidden: !visible, children: [
+    /* @__PURE__ */ jsx75(BoardStyles, {}),
+    /* @__PURE__ */ jsx75(WhiteboardCanvas2, { ...board, headless: true, canDraw, collab: board.collab ? { ...board.collab, canDraw, canManage: isHost } : void 0, inkColor: ink, theme: "light", isVisible: visible, className: "chalk-board-engine", onEngineReady: setEngine }),
+    !ready ? /* @__PURE__ */ jsxs50("div", { className: "chalk-board-loading", role: "status", children: [
+      /* @__PURE__ */ jsx75("span", { className: "chalk-board-spinner", "aria-hidden": "true" }),
       "Opening board"
     ] }) : null,
-    primary && ready && empty ? /* @__PURE__ */ jsx74(BoardHint, { canDraw }) : null,
-    primary && tool === "note" && canDraw ? /* @__PURE__ */ jsx74("div", { className: "chalk-board-note-layer", "aria-hidden": "true", onPointerDown: placeNoteAt }) : null,
-    primary ? /* @__PURE__ */ jsx74(BoardCursors, { cursorsRef: cursors, cameraRef: camera.cameraRef, colorFor, hidden: offline }) : null,
-    primary && ready ? /* @__PURE__ */ jsxs48(Fragment31, { children: [
-      /* @__PURE__ */ jsxs48("div", { className: "chalk-board-chips", "data-low": !compact && place === "top" && canDraw || void 0, children: [
-        followed ? /* @__PURE__ */ jsxs48("div", { className: "chalk-board-chip", role: "status", children: [
-          /* @__PURE__ */ jsx74(BoardIcon, { name: "eye", size: 16 }),
+    primary && ready && empty ? /* @__PURE__ */ jsx75(BoardHint, { canDraw }) : null,
+    primary && tool === "note" && canDraw ? /* @__PURE__ */ jsx75("div", { className: "chalk-board-note-layer", "aria-hidden": "true", onPointerDown: placeNoteAt }) : null,
+    primary ? /* @__PURE__ */ jsx75(BoardCursors, { cursorsRef: cursors, cameraRef: camera.cameraRef, colorFor, hidden: offline }) : null,
+    primary && ready ? /* @__PURE__ */ jsxs50(Fragment34, { children: [
+      /* @__PURE__ */ jsxs50("div", { className: "chalk-board-chips", "data-low": !compact && place === "top" && canDraw || void 0, children: [
+        followed ? /* @__PURE__ */ jsxs50("div", { className: "chalk-board-chip", role: "status", children: [
+          /* @__PURE__ */ jsx75(BoardIcon, { name: "eye", size: 16 }),
           "Following ",
           followed,
-          /* @__PURE__ */ jsx74("button", { type: "button", className: "chalk-board-chip-button", onClick: stopFollowing, children: "Stop" })
+          /* @__PURE__ */ jsx75("button", { type: "button", className: "chalk-board-chip-button", onClick: stopFollowing, children: "Stop" })
         ] }) : null,
-        offline ? /* @__PURE__ */ jsxs48("div", { className: "chalk-board-chip", "data-quiet": true, role: "status", children: [
-          /* @__PURE__ */ jsx74(BoardIcon, { name: "wifiOff", size: 16 }),
+        offline ? /* @__PURE__ */ jsxs50("div", { className: "chalk-board-chip", "data-quiet": true, role: "status", children: [
+          /* @__PURE__ */ jsx75(BoardIcon, { name: "wifiOff", size: 16 }),
           "Offline. Your drawing will sync."
         ] }) : null
       ] }),
-      !canDraw ? /* @__PURE__ */ jsxs48("div", { className: "chalk-board-view-only", children: [
-        /* @__PURE__ */ jsx74(BoardIcon, { name: "lock", size: 14 }),
+      !canDraw ? /* @__PURE__ */ jsxs50("div", { className: "chalk-board-view-only", children: [
+        /* @__PURE__ */ jsx75(BoardIcon, { name: "lock", size: 14 }),
         "View only"
       ] }) : null,
-      /* @__PURE__ */ jsx74("div", { className: "chalk-board-corner", children: /* @__PURE__ */ jsx74(
+      /* @__PURE__ */ jsx75("div", { className: "chalk-board-corner", children: /* @__PURE__ */ jsx75(
         BoardMenu,
         {
           surface,
@@ -9285,22 +9846,23 @@ function Board({ board, primary, visible, colorScheme, people, following, onFoll
           onPlace: (next) => choosePlace(next, true),
           onDownload: () => void download(),
           onCopy: () => void copy(),
+          whoCanDraw,
           onBring: isHost && sendView ? bring : void 0,
           onClear: isHost ? () => void clear() : void 0,
           onClose
         }
       ) }),
-      /* @__PURE__ */ jsxs48("div", { className: "chalk-board-zoom", role: "group", "aria-label": "Zoom", children: [
-        /* @__PURE__ */ jsx74("button", { type: "button", "aria-label": "Zoom out", onClick: () => zoomBy(1 / ZOOM_STEP), children: /* @__PURE__ */ jsx74(BoardIcon, { name: "minus", size: 16 }) }),
-        /* @__PURE__ */ jsxs48("button", { type: "button", "aria-label": `Zoom ${Math.round(camera.zoom * 100)}%, reset to 100%`, className: "chalk-board-zoom-value", onClick: () => zoomBy(1 / camera.cameraRef.current.zoom), children: [
+      /* @__PURE__ */ jsxs50("div", { className: "chalk-board-zoom", role: "group", "aria-label": "Zoom", children: [
+        /* @__PURE__ */ jsx75("button", { type: "button", "aria-label": "Zoom out", onClick: () => zoomBy(1 / ZOOM_STEP), children: /* @__PURE__ */ jsx75(BoardIcon, { name: "minus", size: 16 }) }),
+        /* @__PURE__ */ jsxs50("button", { type: "button", "aria-label": `Zoom ${Math.round(camera.zoom * 100)}%, reset to 100%`, className: "chalk-board-zoom-value", onClick: () => zoomBy(1 / camera.cameraRef.current.zoom), children: [
           Math.round(camera.zoom * 100),
           "%"
         ] }),
-        /* @__PURE__ */ jsx74("button", { type: "button", "aria-label": "Zoom in", onClick: () => zoomBy(ZOOM_STEP), children: /* @__PURE__ */ jsx74(BoardIcon, { name: "plus", size: 16 }) }),
-        /* @__PURE__ */ jsx74("span", { className: "chalk-board-zoom-rule", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx74("button", { type: "button", "aria-label": "Fit to content", onClick: fit, children: /* @__PURE__ */ jsx74(BoardIcon, { name: "fit", size: 16 }) })
+        /* @__PURE__ */ jsx75("button", { type: "button", "aria-label": "Zoom in", onClick: () => zoomBy(ZOOM_STEP), children: /* @__PURE__ */ jsx75(BoardIcon, { name: "plus", size: 16 }) }),
+        /* @__PURE__ */ jsx75("span", { className: "chalk-board-zoom-rule", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx75("button", { type: "button", "aria-label": "Fit to content", onClick: fit, children: /* @__PURE__ */ jsx75(BoardIcon, { name: "fit", size: 16 }) })
       ] }),
-      canDraw ? /* @__PURE__ */ jsx74(
+      canDraw ? /* @__PURE__ */ jsx75(
         BoardIsland,
         {
           tool,
@@ -9321,26 +9883,26 @@ function Board({ board, primary, visible, colorScheme, people, following, onFoll
           compact
         }
       ) : null,
-      /* @__PURE__ */ jsx74("div", { className: "chalk-board-announcer", "aria-live": "polite", children: announcement })
+      /* @__PURE__ */ jsx75("div", { className: "chalk-board-announcer", "aria-live": "polite", children: announcement })
     ] }) : null
   ] });
 }
 function BoardHint({ canDraw }) {
   if (!canDraw)
-    return /* @__PURE__ */ jsx74("div", { className: "chalk-board-hint", children: /* @__PURE__ */ jsx74("p", { children: "Nothing here yet. When someone draws, it shows up here." }) });
-  return /* @__PURE__ */ jsxs48("div", { className: "chalk-board-hint", children: [
-    /* @__PURE__ */ jsx74("p", { children: "An empty board. Draw, type or add a sticky note." }),
-    /* @__PURE__ */ jsxs48("ul", { children: [
-      /* @__PURE__ */ jsxs48("li", { children: [
-        /* @__PURE__ */ jsx74("kbd", { children: "P" }),
+    return /* @__PURE__ */ jsx75("div", { className: "chalk-board-hint", children: /* @__PURE__ */ jsx75("p", { children: "Nothing here yet. When someone draws, it shows up here." }) });
+  return /* @__PURE__ */ jsxs50("div", { className: "chalk-board-hint", children: [
+    /* @__PURE__ */ jsx75("p", { children: "An empty board. Draw, type or add a sticky note." }),
+    /* @__PURE__ */ jsxs50("ul", { children: [
+      /* @__PURE__ */ jsxs50("li", { children: [
+        /* @__PURE__ */ jsx75("kbd", { children: "P" }),
         " Pen"
       ] }),
-      /* @__PURE__ */ jsxs48("li", { children: [
-        /* @__PURE__ */ jsx74("kbd", { children: "T" }),
+      /* @__PURE__ */ jsxs50("li", { children: [
+        /* @__PURE__ */ jsx75("kbd", { children: "T" }),
         " Text"
       ] }),
-      /* @__PURE__ */ jsxs48("li", { children: [
-        /* @__PURE__ */ jsx74("kbd", { children: "N" }),
+      /* @__PURE__ */ jsxs50("li", { children: [
+        /* @__PURE__ */ jsx75("kbd", { children: "N" }),
         " Sticky note"
       ] })
     ] })
@@ -9348,12 +9910,12 @@ function BoardHint({ canDraw }) {
 }
 
 // src/components/stage/SpaceStage.tsx
-import { jsx as jsx75 } from "react/jsx-runtime";
+import { jsx as jsx76 } from "react/jsx-runtime";
 function SpaceStage({ tiles, layout, onLayoutChange, generatedAvatars = true, whiteboard, onOverflowClick, shareCapture, onStopSharing, onChangeShare, colorScheme = "dark", onCloseBoard, className }) {
-  const items = useMemo17(() => buildStageItems(tiles, whiteboard?.isOpen === true), [tiles, whiteboard?.isOpen]);
-  const [selectedShare, setSelectedShare] = useState44(null);
-  const [pin, setPin] = useState44(null);
-  const [following, setFollowing] = useState44(null);
+  const items = useMemo18(() => buildStageItems(tiles, whiteboard?.isOpen === true), [tiles, whiteboard?.isOpen]);
+  const [selectedShare, setSelectedShare] = useState48(null);
+  const [pin, setPin] = useState48(null);
+  const [following, setFollowing] = useState48(null);
   const boardOpen = whiteboard?.isOpen === true && Boolean(whiteboard.props);
   useEffect38(() => {
     if (!boardOpen) setFollowing(null);
@@ -9367,17 +9929,17 @@ function SpaceStage({ tiles, layout, onLayoutChange, generatedAvatars = true, wh
     if (pin !== activePin) setPin(activePin);
     if (selectedShare !== activeShare) setSelectedShare(activeShare);
   }, [pin, activePin, selectedShare, activeShare]);
-  const follow = useCallback14((id) => {
+  const follow = useCallback15((id) => {
     if (id) {
       setPin(null);
       setSelectedShare(null);
     }
     setFollowing(id);
   }, []);
-  const renderContentTile = useCallback14(
+  const renderContentTile = useCallback15(
     (item, context) => {
       if (item.kind === "screen-share")
-        return /* @__PURE__ */ jsx75(
+        return /* @__PURE__ */ jsx76(
           StageContentTile,
           {
             item,
@@ -9385,7 +9947,7 @@ function SpaceStage({ tiles, layout, onLayoutChange, generatedAvatars = true, wh
             capture: item.participant.isLocal ? shareCapture : void 0,
             onStopSharing: item.participant.isLocal ? onStopSharing : void 0,
             onChangeShare: item.participant.isLocal ? onChangeShare : void 0,
-            switcher: shares.length > 1 ? /* @__PURE__ */ jsx75("div", { role: "group", "aria-label": "Whose screen is big", className: cn("absolute left-2 z-30 flex rounded-[999px] bg-[rgba(12,14,18,.82)] p-[3px]", item.participant.screenShareState === "low-quality" ? "top-11" : "top-2"), children: shares.map((share) => /* @__PURE__ */ jsx75(
+            switcher: shares.length > 1 ? /* @__PURE__ */ jsx76("div", { role: "group", "aria-label": "Whose screen is big", className: cn("absolute left-2 z-30 flex rounded-[999px] bg-[rgba(12,14,18,.82)] p-[3px]", item.participant.screenShareState === "low-quality" ? "top-11" : "top-2"), children: shares.map((share) => /* @__PURE__ */ jsx76(
               "button",
               {
                 type: "button",
@@ -9402,25 +9964,25 @@ function SpaceStage({ tiles, layout, onLayoutChange, generatedAvatars = true, wh
           }
         );
       const boardProps = whiteboard?.props;
-      return /* @__PURE__ */ jsx75(
+      return /* @__PURE__ */ jsx76(
         StageContentTileSurface,
         {
           item,
           ...context,
           mediaVisible: Boolean(boardProps),
-          media: boardProps ? /* @__PURE__ */ jsx75("div", { className: cn("h-full", !context.primary && "pointer-events-none"), inert: !context.primary || void 0, children: /* @__PURE__ */ jsx75(Board, { board: boardProps, primary: context.primary, visible: context.active, colorScheme, people: tiles, following: followed, onFollow: follow, sendView: canFollow ? whiteboard?.sendView : void 0, onClose: onCloseBoard }) }) : null
+          media: boardProps ? /* @__PURE__ */ jsx76("div", { className: cn("h-full", !context.primary && "pointer-events-none"), inert: !context.primary || void 0, children: /* @__PURE__ */ jsx76(Board, { board: boardProps, primary: context.primary, visible: context.active, colorScheme, people: tiles, following: followed, onFollow: follow, sendView: canFollow ? whiteboard?.sendView : void 0, onClose: onCloseBoard }) }) : null
         }
       );
     },
     [follow, whiteboard, shares, shareCapture, onStopSharing, onChangeShare, colorScheme, tiles, followed, canFollow, onCloseBoard]
   );
-  const focusContent = useCallback14(
+  const focusContent = useCallback15(
     (item) => {
       if (item.kind !== "participant") onLayoutChange?.("focus");
     },
     [onLayoutChange]
   );
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx76(
     Stage,
     {
       items,
@@ -9434,7 +9996,7 @@ function SpaceStage({ tiles, layout, onLayoutChange, generatedAvatars = true, wh
       onItemClick: focusContent,
       onOverflowClick: canFollow ? void 0 : onOverflowClick,
       generatedAvatars,
-      emptyState: /* @__PURE__ */ jsx75(QuietSpace, {}),
+      emptyState: /* @__PURE__ */ jsx76(QuietSpace, {}),
       className
     }
   );
@@ -9442,11 +10004,11 @@ function SpaceStage({ tiles, layout, onLayoutChange, generatedAvatars = true, wh
 SpaceStage.displayName = "SpaceStage";
 
 // src/components/space-view/useDrawerPresence.ts
-import { useEffect as useEffect39, useState as useState45 } from "react";
+import { useEffect as useEffect39, useState as useState49 } from "react";
 var DRAWER_EXIT_MS = 200;
 function useDrawerPresence(panel, exitMs) {
-  const [retained, setRetained] = useState45(panel);
-  const [state, setState] = useState45(panel === null ? "closed" : "open");
+  const [retained, setRetained] = useState49(panel);
+  const [state, setState] = useState49(panel === null ? "closed" : "open");
   useEffect39(() => {
     if (panel !== null) {
       setRetained(panel);
@@ -9464,7 +10026,7 @@ function useDrawerPresence(panel, exitMs) {
 }
 
 // src/components/space-view/SpaceView.tsx
-import { Fragment as Fragment32, jsx as jsx76, jsxs as jsxs49 } from "react/jsx-runtime";
+import { Fragment as Fragment35, jsx as jsx77, jsxs as jsxs51 } from "react/jsx-runtime";
 function SpaceView({
   colorScheme = "dark",
   onColorSchemeChange,
@@ -9473,6 +10035,8 @@ function SpaceView({
   callLinkOpen,
   onCallLinkToggle,
   onReportProblem,
+  reportUnavailableReason,
+  onOpenReportProblem,
   inviteLink,
   pickChatFiles,
   stageBackground = true,
@@ -9482,6 +10046,8 @@ function SpaceView({
   features,
   generatedAvatars = true,
   commandError: externalCommandError,
+  commandSource: externalCommandSource,
+  commandAction: externalCommandAction,
   onDismissCommandError,
   onToggleWhiteboard,
   whiteboard,
@@ -9500,29 +10066,36 @@ function SpaceView({
   const callLink = useCallLink(participantsSlice.roster.length <= 1);
   const media = useMedia();
   const connection = useConnection();
+  const offline = useOffline();
+  const [dismissedOfflineNotice, setDismissedOfflineNotice] = useState50(null);
+  const offlineNotice = offline.notice && offline.notice !== dismissedOfflineNotice ? offline.notice : null;
   const recording = useRecording();
   const canPublishScreen = useCan("publishScreen");
   const canSendReaction = useCan("sendReaction");
   const canRaiseHand = useCan("raiseHand");
-  const canDrawWhiteboard = useCan("drawWhiteboard");
+  const canDrawWhiteboard = useCanDrawWhiteboard();
   const canManageAdmission = useCan("manageAdmission");
   const canManageRecording = useCan("manageRecording");
   const episodeDuration = useEpisodeDuration();
-  const [uncontrolledLayout, setUncontrolledLayout] = useState46(controlledLayout ?? "focus");
-  const [activePanel, setActivePanel] = useState46(initialPanel);
-  const [isReactionPickerOpen, setReactionPickerOpen] = useState46(false);
-  const [commandError, setCommandError] = useState46(null);
-  const [commandSource, setCommandSource] = useState46();
-  const onCommandError = (failure, source) => {
+  const [uncontrolledLayout, setUncontrolledLayout] = useState50(controlledLayout ?? "focus");
+  const [activePanel, setActivePanel] = useState50(initialPanel);
+  const [isReactionPickerOpen, setReactionPickerOpen] = useState50(false);
+  const [commandError, setCommandError] = useState50(null);
+  const [commandSource, setCommandSource] = useState50();
+  const [commandAction, setCommandAction] = useState50();
+  const [retryCommand, setRetryCommand] = useState50();
+  const onCommandError = (failure, source, mediaSource, action, command) => {
     if (!failure && commandError && typeof commandError === "object") callToasts.dismissFailure(commandError.code);
     setCommandError(failure);
-    setCommandSource(source);
+    setCommandSource(mediaSource ?? source);
+    setCommandAction(action);
+    setRetryCommand(() => command);
     if (failure && typeof failure !== "string") playSound("error", failure);
   };
   const layout = onLayoutChange ? controlledLayout ?? uncontrolledLayout : uncontrolledLayout;
   const feature = (name) => features?.[name] !== false;
   const localId = self.participantId ?? "local";
-  const tiles = useMemo18(
+  const tiles = useMemo19(
     () => toVideoParticipants(participantsSlice.roster, media.remote, localId, self.displayName ?? "You", media.local).map((tile) => ({
       ...tile,
       screenShareHasAudio: tile.isLocal ? media.screenShare.hasAudio : participantsSlice.roster.find((person) => person.participantId === tile.id)?.media.screenShareHasAudio
@@ -9552,37 +10125,41 @@ function SpaceView({
   const playSound = useSoundCues(feature("sounds") && soundsEnabled);
   const prefersReducedMotion = usePrefersReducedMotion();
   const drawer = useDrawerPresence(activePanel, prefersReducedMotion ? 0 : DRAWER_EXIT_MS);
-  const runCommand = useCallback15(async (command) => {
+  const runCommand = useCallback16(async (command, source, action) => {
     try {
       await command();
       setCommandError(null);
+      setCommandSource(void 0);
+      setCommandAction(void 0);
+      setRetryCommand(void 0);
     } catch (cause) {
       setCommandError(commandFailure(cause));
+      setCommandSource(source);
+      setCommandAction(action);
+      setRetryCommand(() => command);
     }
   }, []);
   const leaveCall = onLeft ? () => void runCommand(async () => onLeft()) : void 0;
   const endCallForEveryone = onEndEpisode ? () => void runCommand(async () => onEndEpisode()) : void 0;
   const displayedCommandError = externalCommandError ?? commandError;
-  const mappedFailure = mediaFailureToast(typeof displayedCommandError === "object" ? displayedCommandError : null, commandSource);
+  const displayedCommandSource = externalCommandError != null ? externalCommandSource : commandSource;
   const retryMedia = async () => {
+    if (!retryCommand) return;
     try {
-      if (commandSource === "screen") await client.media.setScreenShareEnabled(true);
-      else if (commandSource === "camera") await client.media.setCameraEnabled(true);
-      else if (commandSource === "microphone") await client.media.setMicrophoneEnabled(true);
+      await retryCommand();
       onCommandError(null);
     } catch (cause) {
-      if (cause instanceof SpaceClientError2 && cause.code === "connection.invalid_state") return;
-      onCommandError(cause instanceof SpaceClientError2 ? cause : { code: "client.internal_error", recoverable: true, message: "Your device couldn\u2019t start. Try again." }, commandSource);
+      onCommandError(commandFailure(cause), commandSource, commandSource, commandAction, retryCommand);
     }
   };
-  const retryableMedia = commandSource && typeof displayedCommandError === "object" && displayedCommandError?.recoverable && (commandSource === "screen" || displayedCommandError.code === "media.device_busy");
-  const commandToasts = mappedFailure ? [{ id: "space-command-error", ...mappedFailure, action: retryableMedia ? { label: "Try again", onClick: () => void retryMedia() } : void 0 }] : typeof displayedCommandError === "string" ? [{ id: "space-command-error", message: displayedCommandError, type: "error" }] : [];
-  const [boardToasts, setBoardToasts] = useState46([]);
+  const mappedFailure = mediaFailureToast(typeof displayedCommandError === "object" ? displayedCommandError : null, displayedCommandSource, externalCommandError != null ? externalCommandAction : commandAction, externalCommandError == null && retryCommand ? () => void retryMedia() : void 0);
+  const commandToasts = mappedFailure ? [{ id: "space-command-error", ...mappedFailure }] : typeof displayedCommandError === "string" ? [{ id: "space-command-error", message: displayedCommandError, type: "error" }] : [];
+  const [boardToasts, setBoardToasts] = useState50([]);
   const boardToastCount = useRef34(0);
   useEffect40(() => {
     if (!whiteboard?.isOpen) setBoardToasts([]);
   }, [whiteboard?.isOpen]);
-  const showBoardToast = useCallback15((toast) => {
+  const showBoardToast = useCallback16((toast) => {
     if (!toast) {
       setBoardToasts([]);
       return;
@@ -9596,7 +10173,21 @@ function SpaceView({
     setCommandError(null);
     onDismissCommandError?.();
   };
-  return /* @__PURE__ */ jsx76(ParticipantVolumeProvider, { children: /* @__PURE__ */ jsx76(BoardToastContext.Provider, { value: showBoardToast, children: /* @__PURE__ */ jsx76(
+  const toasts = [
+    ...callToasts.toasts.filter((toast) => !(typeof displayedCommandError === "object" && displayedCommandError && toast.failureCode === displayedCommandError.code)),
+    ...whiteboard?.isOpen ? boardToasts : [],
+    ...commandToasts,
+    ...offlineNotice ? [{ id: "offline-notice", message: offlineNotice }] : []
+  ];
+  const dismissToast = (id) => {
+    if (id === "space-command-error") dismissCommandError();
+    else if (id === "offline-notice") setDismissedOfflineNotice(offline.notice ?? null);
+    else if (id.startsWith("board-")) setBoardToasts((current) => current.filter((toast) => toast.id !== id));
+    else callToasts.dismiss(id);
+  };
+  const [foldedNotices, setFoldedNotices] = useState50([]);
+  const folded = toasts.filter((toast) => foldedNotices.includes(toast.id));
+  return /* @__PURE__ */ jsx77(ParticipantVolumeProvider, { children: /* @__PURE__ */ jsx77(BoardToastContext.Provider, { value: showBoardToast, children: /* @__PURE__ */ jsx77(
     SpacePresentation,
     {
       colorScheme,
@@ -9612,11 +10203,13 @@ function SpaceView({
         callLinkOpen: callLinkOpen ?? callLink.open,
         onCallLinkToggle: onCallLinkToggle ?? callLink.toggle,
         onReportProblem,
+        onOpenReportProblem,
+        reportUnavailableReason,
         diagnostics: callDiagnostics(connection, media),
         shortcuts: {
           isMuted: media.local.microphone.state !== "enabled",
-          onToggleMute: connection.status === "live" || media.local.microphone.state === "enabled" ? () => void runCommand(() => client.media.setMicrophoneEnabled(media.local.microphone.state !== "enabled")) : void 0,
-          onToggleVideo: connection.status === "live" || media.local.camera.state === "enabled" ? () => void runCommand(() => client.media.setCameraEnabled(media.local.camera.state !== "enabled")) : void 0,
+          onToggleMute: connection.status === "live" || media.local.microphone.state === "enabled" ? () => void runCommand(() => client.media.setMicrophoneEnabled(media.local.microphone.state !== "enabled"), "microphone", media.local.microphone.state === "enabled" ? "stop" : "start") : void 0,
+          onToggleVideo: connection.status === "live" || media.local.camera.state === "enabled" ? () => void runCommand(() => client.media.setCameraEnabled(media.local.camera.state !== "enabled"), "camera", media.local.camera.state === "enabled" ? "stop" : "start") : void 0,
           onToggleHand: feature("handRaise") && canRaiseHand ? () => void runCommand(() => self.handRaised ? client.participants.lowerHand() : client.participants.raiseHand()) : void 0,
           onToggleChat: feature("chat") ? () => setActivePanel((current) => current === "chat" ? null : "chat") : void 0,
           onTogglePeople: feature("participants") ? () => setActivePanel((current) => current === "participants" ? null : "participants") : void 0,
@@ -9624,15 +10217,16 @@ function SpaceView({
           onClosePanel: () => setActivePanel(null),
           onPushToTalk: (enabled) => {
             if (enabled && connection.status !== "live") return;
-            void runCommand(() => client.media.setMicrophoneEnabled(enabled));
+            void runCommand(() => client.media.setMicrophoneEnabled(enabled), "microphone", enabled ? "start" : "stop");
           }
         },
         duration: episodeDuration,
         isRecording: recording.current?.status === "recording",
         layout,
-        onLayoutChange: updateLayout
+        onLayoutChange: updateLayout,
+        notices: folded.length ? /* @__PURE__ */ jsx77(NoticeButton, { toasts: folded, onDismiss: dismissToast }) : void 0
       },
-      stage: /* @__PURE__ */ jsx76(
+      stage: /* @__PURE__ */ jsx77(
         SpaceStage,
         {
           tiles,
@@ -9653,7 +10247,7 @@ function SpaceView({
           className: "h-full"
         }
       ),
-      controls: /* @__PURE__ */ jsx76(
+      controls: /* @__PURE__ */ jsx77(
         ControlBar,
         {
           density: "comfortable",
@@ -9673,9 +10267,9 @@ function SpaceView({
           onEndForEveryone: endCallForEveryone
         }
       ),
-      stageOverlay: /* @__PURE__ */ jsxs49(Fragment32, { children: [
-        feature("reactions") ? /* @__PURE__ */ jsx76(ReactionsOverlay, {}) : null,
-        feature("reactions") && canSendReaction && connection.status === "live" ? /* @__PURE__ */ jsx76("div", { className: "absolute bottom-24 left-1/2 z-50 -translate-x-1/2", children: /* @__PURE__ */ jsx76(
+      stageOverlay: /* @__PURE__ */ jsxs51(Fragment35, { children: [
+        feature("reactions") ? /* @__PURE__ */ jsx77(ReactionsOverlay, {}) : null,
+        feature("reactions") && canSendReaction && connection.status === "live" ? /* @__PURE__ */ jsx77("div", { className: "absolute bottom-24 left-1/2 z-50 -translate-x-1/2", children: /* @__PURE__ */ jsx77(
           ReactionPicker,
           {
             isHandRaised: self.handRaised,
@@ -9688,28 +10282,18 @@ function SpaceView({
           }
         ) }) : null
       ] }),
-      sidebar: /* @__PURE__ */ jsxs49(CallCard, { state: drawer.state, panel: drawer.panel, onPanelChange: setActivePanel, peopleCount: participantsSlice.roster.length, participantsEnabled: feature("participants"), chatEnabled: feature("chat"), onClose: () => setActivePanel(null), children: [
-        drawer.panel === "chat" && feature("chat") ? /* @__PURE__ */ jsx76(ChatPanel, { variant: "mobile", generatedAvatars, onClose: () => setActivePanel(null), pickChatFiles }) : null,
-        drawer.panel === "participants" && feature("participants") ? /* @__PURE__ */ jsx76(ParticipantsPanel, { variant: "mobile", admissionEnabled: feature("admission"), generatedAvatars, onCommandError, onClose: () => setActivePanel(null) }) : null,
-        drawer.panel === "admission" && feature("admission") ? /* @__PURE__ */ jsx76(AdmissionPanel, { className: "h-full w-full rounded-none shadow-none", onClose: () => setActivePanel(null) }) : null
+      sidebar: /* @__PURE__ */ jsxs51(CallCard, { state: drawer.state, panel: drawer.panel, onPanelChange: setActivePanel, peopleCount: participantsSlice.roster.length, participantsEnabled: feature("participants"), chatEnabled: feature("chat"), onClose: () => setActivePanel(null), children: [
+        drawer.panel === "chat" && feature("chat") ? /* @__PURE__ */ jsx77(ChatPanel, { variant: "mobile", generatedAvatars, onClose: () => setActivePanel(null), pickChatFiles }) : null,
+        drawer.panel === "participants" && feature("participants") ? /* @__PURE__ */ jsx77(ParticipantsPanel, { variant: "mobile", admissionEnabled: feature("admission"), generatedAvatars, onCommandError, onClose: () => setActivePanel(null) }) : null,
+        drawer.panel === "admission" && feature("admission") ? /* @__PURE__ */ jsx77(AdmissionPanel, { className: "h-full w-full rounded-none shadow-none", onClose: () => setActivePanel(null) }) : null
       ] }),
-      toasts: /* @__PURE__ */ jsx76(
-        ToastStack,
-        {
-          toasts: [...callToasts.toasts.filter((toast) => !(typeof displayedCommandError === "object" && displayedCommandError && toast.failureCode === displayedCommandError.code)), ...whiteboard?.isOpen ? boardToasts : [], ...commandToasts],
-          onDismiss: (id) => {
-            if (id === "space-command-error") dismissCommandError();
-            else if (id.startsWith("board-")) setBoardToasts((current) => current.filter((toast) => toast.id !== id));
-            else callToasts.dismiss(id);
-          }
-        }
-      ),
-      mediaOutput: /* @__PURE__ */ jsx76("div", { className: "[&>div]:top-[68px] [&>div>button]:h-11 [&>div>button]:shadow-[0_8px_24px_rgba(0,0,0,.4)]", children: /* @__PURE__ */ jsx76(AudioOutput, { resumeAudioLabel: "Your browser paused the sound. Click to hear the call" }) }),
-      overlays: /* @__PURE__ */ jsxs49(Fragment32, { children: [
-        /* @__PURE__ */ jsx76(CallReady, { open: callLinkOpen ?? callLink.open, onClose: onCallLinkToggle ?? callLink.close, link: effectiveShareUrl }),
+      toasts: /* @__PURE__ */ jsx77(ToastStack, { toasts, onDismiss: dismissToast, onFold: setFoldedNotices }),
+      mediaOutput: /* @__PURE__ */ jsx77("div", { className: "[&>div]:top-[68px] [&>div>button]:h-11 [&>div>button]:shadow-[0_8px_24px_rgba(0,0,0,.4)]", children: /* @__PURE__ */ jsx77(AudioOutput, { resumeAudioLabel: "Your browser paused the sound. Click to hear the call" }) }),
+      overlays: /* @__PURE__ */ jsxs51(Fragment35, { children: [
+        /* @__PURE__ */ jsx77(CallReady, { open: callLinkOpen ?? callLink.open, onClose: onCallLinkToggle ?? callLink.close, link: effectiveShareUrl }),
         overlay,
-        reconnecting && reconnecting.status !== "reconnecting" ? /* @__PURE__ */ jsx76(ReconnectingOverlay, { ...reconnecting }) : null,
-        /* @__PURE__ */ jsx76(OfflineActions, { reconnecting: reconnecting?.status === "reconnecting" && reconnecting.isVisible })
+        reconnecting && reconnecting.status !== "reconnecting" ? /* @__PURE__ */ jsx77(ReconnectingOverlay, { ...reconnecting }) : null,
+        /* @__PURE__ */ jsx77(OfflineActions, { reconnecting: reconnecting?.status === "reconnecting" && reconnecting.isVisible, hasNotice: offlineNotice !== null })
       ] }),
       className
     }
@@ -9729,7 +10313,9 @@ export {
   useRecording,
   useWhiteboard,
   useCan,
+  useCanDrawWhiteboard,
   useScreenShare,
+  commandFailure,
   chalkThemeStyle,
   ChalkButton,
   ChalkIconButton,
@@ -9766,9 +10352,9 @@ export {
   ControlBarPresentation,
   ControlBar,
   ParticipantsPanel,
-  ToastStack,
   StatusSurface,
   CallReady,
+  ToastStack,
   CallCard,
   captureFlip,
   CallDialog,