@q9labsai/chalk-react 5.2.2 → 5.2.3

package/dist/{chunk-YLP43HHE.js → chunk-34SIWIY5.js}

@@ -866,7 +866,7 @@ 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 useState13 } from "react";
 import { IconButton, Spinner } from "@q9labsai/chalk-ui";
 
 // src/components/audio-output/AudioOutput.tsx
@@ -1226,7 +1226,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 useRef6, useState as useState12 } from "react";
+import React5, { useMemo as useMemo6, useRef as useRef6 } from "react";
 
 // src/internal/useMirrorSetting.ts
 import { useSyncExternalStore as useSyncExternalStore2 } from "react";
@@ -1478,7 +1478,7 @@ var ParticipantTileSurface = React5.memo(function ParticipantTileSurface2({
   onClick,
   onDoubleClick,
   pinned,
-  clickAction = "pin",
+  onFollow,
   following = false,
   primary,
   className,
@@ -1492,34 +1492,24 @@ var ParticipantTileSurface = React5.memo(function ParticipantTileSurface2({
 }) {
   const prefersReducedMotion = usePrefersReducedMotion();
   const phone = useMediaQuery("(max-width:640px)");
-  const [optionsOpen, setOptionsOpen] = useState12(false);
-  const returnFocus = useRef6(null);
-  const openOptions = () => {
-    returnFocus.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-    setOptionsOpen(true);
-  };
-  const closeOptions = () => {
-    setOptionsOpen(false);
-    queueMicrotask(() => returnFocus.current?.focus());
-  };
   const [localMirrored] = useMirrorSetting();
   const mirrored = mirror ?? (participant.isLocal === true && localMirrored);
   const colors = useMemo6(() => getParticipantColor(participant.displayName || participant.id, gradientPreference), [gradientPreference, participant.displayName, participant.id]);
   const recipe = useMemo6(() => getParticipantAvatarRecipe(participant.displayName || participant.id, gradientPreference), [participant.displayName, participant.id, gradientPreference]);
-  const first = participant.displayName.split(" ")[0] ?? participant.displayName;
-  const actionLabel = clickAction === "follow" ? `${following ? "Stop following" : "Follow"} ${first}` : `${pinned ? "Unpin" : "Pin"} ${participant.displayName}`;
+  const actionLabel = `${pinned ? "Unpin" : "Pin"} ${participant.displayName}`;
+  const followLabel = following ? "Stop following" : "Follow";
   const hasPoorConnection = participant.connectionQuality !== void 0 && participant.connectionQuality > 0 && participant.connectionQuality <= 2;
   return /* @__PURE__ */ jsxs12(
     TileShell,
     {
-      label: clickAction === "follow" ? actionLabel : `Video tile for ${participant.displayName}`,
+      label: `Video tile for ${participant.displayName}`,
       accentColor: colors.primary,
-      pinned: clickAction === "follow" ? following : pinned,
+      pinned,
       ring: following,
       lift: !primary,
       speaking: mediaVisible && participant.isSpeaking && !participant.isMuted,
       audioLevel: participant.audioLevel,
-      onClick: onClick && phone && clickAction === "pin" ? openOptions : onClick,
+      onClick,
       onDoubleClick,
       className: cn(aspectRatioClasses[aspectRatio], className),
       style,
@@ -1527,11 +1517,14 @@ var ParticipantTileSurface = React5.memo(function ParticipantTileSurface2({
       hidden,
       corner: /* @__PURE__ */ jsxs12(Fragment6, { children: [
         showStatus && hasPoorConnection ? /* @__PURE__ */ jsx27("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__ */ jsx27(SignalBars, {}) }) : null,
-        onClick && !phone ? /* @__PURE__ */ jsx27("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__ */ jsx27(
+        onClick || onFollow ? /* @__PURE__ */ jsx27("span", { "data-part": "tile-menu", className: "absolute top-2 right-2 z-30 transition-opacity duration-150 min-[641px]:opacity-0 group-hover/tile:opacity-100 focus-within:opacity-100", children: /* @__PURE__ */ jsxs12(
           ChalkMenu,
           {
             trigger: /* @__PURE__ */ jsx27("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__ */ jsx27(StageIcon, { name: "more", size: 18 }) }),
-            children: /* @__PURE__ */ jsx27(ChalkMenuItem, { onClick, children: actionLabel })
+            children: [
+              onClick ? /* @__PURE__ */ jsx27(ChalkMenuItem, { onClick, children: actionLabel }) : null,
+              onFollow ? /* @__PURE__ */ jsx27(ChalkMenuItem, { onClick: onFollow, children: followLabel }) : null
+            ]
           }
         ) }) : null
       ] }),
@@ -1571,38 +1564,6 @@ var ParticipantTileSurface = React5.memo(function ParticipantTileSurface2({
             colors: recipe.facehashColors
           }
         ) : /* @__PURE__ */ jsx27(Avatar, { name: participant.displayName, src: participant.avatarUrl, size: "xl", generated: false, style: { width: "100%", height: "100%" } }) }) }),
-        phone && onClick && clickAction === "pin" ? /* @__PURE__ */ jsxs12(
-          ChalkSheet,
-          {
-            open: optionsOpen,
-            onOpenChange: (open) => {
-              if (open) openOptions();
-              else closeOptions();
-            },
-            title: `Options for ${participant.displayName}`,
-            children: [
-              /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-3 px-2 pt-1 pb-3.5 text-base font-semibold", children: [
-                /* @__PURE__ */ jsx27(Avatar, { name: participant.displayName, size: "sm" }),
-                participant.displayName
-              ] }),
-              /* @__PURE__ */ jsxs12(
-                "button",
-                {
-                  type: "button",
-                  className: "flex min-h-[52px] w-full items-center gap-3.5 rounded-[16px] bg-[var(--chalk-raised)] px-4 text-left text-base leading-[1.4] hover:bg-[var(--chalk-hover)] active:bg-[var(--chalk-pressed)]",
-                  onClick: () => {
-                    onClick();
-                    closeOptions();
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx27(StageIcon, { name: "pin", size: 20, className: "text-[var(--chalk-soft-text)]" }),
-                    /* @__PURE__ */ jsx27("span", { children: pinned ? "Unpin" : "Pin" })
-                  ]
-                }
-              )
-            ]
-          }
-        ) : null,
         children
       ]
     }
@@ -1615,7 +1576,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 useState12, useMemo as useMemo7 } from "react";
 import { CELEBRATION_EMOJIS } from "@q9labsai/chalk-ui/reactions";
 import { jsx as jsx28, jsxs as jsxs13 } from "react/jsx-runtime";
 var BASE_PARTICLE_COLORS = ["#14b8a6", "#f59e0b", "#ec4899", "#8b5cf6", "#06b6d4", "#22c55e"];
@@ -1659,7 +1620,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] = useState12(true);
   const prefersReducedMotion = usePrefersReducedMotion();
   const participantColors = useMemo7(() => getParticipantColor(participantName || "unknown"), [participantName]);
   const isCelebration = CELEBRATION_EMOJIS.includes(emoji);
@@ -1747,13 +1708,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] = useState13(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] = useState13(false);
+  const [error, setError] = useState13(null);
   const perform = async (action) => {
     if (busy) return;
     setBusy(true);
@@ -1826,7 +1787,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 useRef9, useState as useState17 } from "react";
+import React10, { useEffect as useEffect13, useLayoutEffect, useMemo as useMemo8, useRef as useRef9, useState as useState16 } from "react";
 import { Button } from "@q9labsai/chalk-ui";
 
 // src/components/call-card/CallCardStyles.tsx
@@ -2689,14 +2650,14 @@ function CallCardStyles() {
 
 // src/components/composite/MessageBubble.tsx
 import { CHALK_REACTIONS } from "@q9labsai/chalk-client";
-import React9, { useEffect as useEffect12, useRef as useRef8, useState as useState16 } from "react";
+import React9, { useEffect as useEffect12, useRef as useRef8, useState as useState15 } from "react";
 
 // src/components/composite/use-chat-attachment-previews.ts
-import { useCallback as useCallback4, useEffect as useEffect11, useRef as useRef7, useState as useState15 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect11, useRef as useRef7, useState as useState14 } 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 [resolvedUrls, setResolvedUrls] = useState14(() => /* @__PURE__ */ new Map());
+  const [failedAttachmentIds, setFailedAttachmentIds] = useState14(() => /* @__PURE__ */ new Set());
+  const [retryGeneration, setRetryGeneration] = useState14(0);
   const resolvingAttachmentIds = useRef7(/* @__PURE__ */ new Set());
   const resolvedUrlsRef = useRef7(resolvedUrls);
   const failedAttachmentIdsRef = useRef7(failedAttachmentIds);
@@ -2779,9 +2740,9 @@ 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 [reactionError, setReactionError] = useState15(null);
+    const [reacting, setReacting] = useState15(false);
+    const [reactionBarOpen, setReactionBarOpen] = useState15(false);
     const messageRef = useRef8(null);
     const press = useRef8(null);
     const cancelPress = () => {
@@ -2798,9 +2759,9 @@ 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 [photo, setPhoto] = useState15(null);
+    const [downloading, setDownloading] = useState15(false);
+    const [downloadError, setDownloadError] = useState15(null);
     const downloadController = useRef8(null);
     useEffect12(() => () => downloadController.current?.abort(), []);
     const downloadPhoto = async () => {
@@ -2832,7 +2793,7 @@ var MessageBubble = React9.memo(
         downloadController.current = null;
       }
     };
-    const [photoClosing, setPhotoClosing] = useState16(false);
+    const [photoClosing, setPhotoClosing] = useState15(false);
     const closeTimer = useRef8(null);
     useEffect12(
       () => () => {
@@ -3188,12 +3149,12 @@ var ChatPanelSurface = React10.memo(
     autoScrollBehavior,
     className
   }) => {
-    const [draft, setDraft] = useState17("");
-    const [stagedFiles, setStagedFiles] = useState17([]);
+    const [draft, setDraft] = useState16("");
+    const [stagedFiles, setStagedFiles] = useState16([]);
     const uploads = useRef9(/* @__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 [failedUploads, setFailedUploads] = useState16(/* @__PURE__ */ new Set());
+    const [uploading, setUploading] = useState16(/* @__PURE__ */ new Set());
+    const [previews, setPreviews] = useState16(/* @__PURE__ */ new Map());
     useEffect13(() => {
       const urls = new Map(stagedFiles.flatMap((file) => file instanceof File && file.type.startsWith("image/") ? [[file, URL.createObjectURL(file)]] : []));
       setPreviews(urls);
@@ -3201,9 +3162,9 @@ 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 [sending, setSending] = useState16(false);
+    const [pickingFiles, setPickingFiles] = useState16(false);
+    const [composerError, setComposerError] = useState16(null);
     const scrollRef = useRef9(null);
     const textareaRef = useRef9(null);
     const fileInputRef = useRef9(null);
@@ -3519,7 +3480,7 @@ var ChatPanel = React10.memo((props) => {
 ChatPanel.displayName = "ChatPanel";
 
 // src/components/composite/ReactionsOverlay.tsx
-import { useEffect as useEffect14, useRef as useRef10, useState as useState18 } from "react";
+import { useEffect as useEffect14, useRef as useRef10, useState as useState17 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/composite/reaction-float.ts
@@ -3563,7 +3524,7 @@ function ReactionsOverlaySurface({ reactions, maxVisible = 6, className }) {
   return /* @__PURE__ */ jsx34("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__ */ jsx34(TileReaction, { reaction, root }, reaction.eventId)) });
 }
 function TileReaction({ reaction, root }) {
-  const [host, setHost] = useState18(null);
+  const [host, setHost] = useState17(null);
   const emoji = useRef10(null);
   const reduced = usePrefersReducedMotion();
   useEffect14(() => {
@@ -3609,10 +3570,10 @@ function CommandErrorAlert({ message }) {
 }
 
 // src/components/control-bar/ControlBar.tsx
-import React12, { useEffect as useEffect17, useRef as useRef12, useState as useState23 } from "react";
+import React12, { useEffect as useEffect17, useRef as useRef12, useState as useState22 } from "react";
 
 // src/components/device-popover/DevicePopover.tsx
-import { useEffect as useEffect15, useRef as useRef11, useState as useState19 } from "react";
+import { useEffect as useEffect15, useRef as useRef11, useState as useState18 } from "react";
 
 // src/components/control-bar/ShellIcon.tsx
 import { Fragment as Fragment11, jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
@@ -4271,7 +4232,7 @@ var CALL_SHELL_CSS = `.chalk-shell-dock {
 // src/components/device-popover/DevicePopover.tsx
 import { Fragment as Fragment12, jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
 function InputLevel({ track }) {
-  const [level, setLevel] = useState19(0);
+  const [level, setLevel] = useState18(0);
   useEffect15(() => {
     if (!track || track.readyState !== "live") return;
     const context = new AudioContext();
@@ -4295,7 +4256,7 @@ function InputLevel({ track }) {
 }
 function CameraPreview({ track, mirrored, open, selectedDeviceId, captureCameraPreview }) {
   const video = useRef11(null);
-  const [unavailable2, setUnavailable] = useState19(false);
+  const [unavailable2, setUnavailable] = useState18(false);
   const trackEnabled = track?.enabled;
   useEffect15(() => {
     const element = video.current;
@@ -4364,7 +4325,7 @@ function DevicePopover({
   toggleDisabled,
   busy
 }) {
-  const [open, setOpen] = useState19(false);
+  const [open, setOpen] = useState18(false);
   const mic = type === "mic";
   const label = mic ? isActive ? "Mute microphone" : "Unmute microphone" : isActive ? "Turn off camera" : "Turn on camera";
   return /* @__PURE__ */ jsxs20("div", { "data-part": `${type}-split`, className: cn("chalk-shell-split", className), "data-off": !isActive, children: [
@@ -4431,10 +4392,10 @@ function LeaveMenu({ onLeave, onEndForEveryone, renderButton }) {
 }
 
 // src/components/control-bar/DockLayout.tsx
-import { useState as useState20 } from "react";
+import { useState as useState19 } from "react";
 import { Fragment as Fragment13, jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
 function DockLayout({ layout, onLayoutChange, children }) {
-  const [open, setOpen] = useState20(false);
+  const [open, setOpen] = useState19(false);
   return /* @__PURE__ */ jsxs23(Fragment13, { children: [
     /* @__PURE__ */ jsx41(ChalkIconButton, { size: "lg", "aria-label": "More options", "aria-haspopup": "dialog", "aria-expanded": open, onClick: () => setOpen(true), children: /* @__PURE__ */ jsx41("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__ */ jsx41("path", { "data-part": "dock-more-glyph", d: "M5 12h.01M12 12h.01M19 12h.01", strokeWidth: "3" }) }) }),
     /* @__PURE__ */ jsx41(ChalkSheet, { title: "More options", open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs23(
@@ -4475,7 +4436,7 @@ function DockLayout({ layout, onLayoutChange, children }) {
 }
 
 // src/components/control-bar/ShareControl.tsx
-import { useState as useState21 } from "react";
+import { useState as useState20 } from "react";
 import { Fragment as Fragment14, jsx as jsx42, jsxs as jsxs24 } from "react/jsx-runtime";
 function SourceIcon({ source }) {
   return /* @__PURE__ */ jsx42("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__ */ jsxs24(Fragment14, { children: [
@@ -4490,9 +4451,9 @@ function SourceIcon({ source }) {
   ] }) });
 }
 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 [surface, setSurface] = useState20("window");
+  const [audio, setAudio] = useState20(true);
+  const [replace, setReplace] = useState20(false);
   const start2 = (next) => {
     if (disabled || startDisabled) return;
     setSurface(next);
@@ -4547,7 +4508,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";
+import { useCallback as useCallback5, useEffect as useEffect16, useMemo as useMemo9, useState as useState21 } from "react";
 var DEFAULT_CONTROL_BAR_BUTTONS = ["mic", "video", "screenshare", "record", "whiteboard", "handraise", "leave", "participants", "chat", "reactions"];
 var EMPTY_DETECTED_DEVICES = {
   audioinput: [],
@@ -4584,7 +4545,7 @@ function useControlBarSurfaceBehavior({
   detectDevices = true
 }) {
   const themeVariables = useMemo9(() => getParticipantThemeVariables(participantColorSeed, participantGradientPreference), [participantColorSeed, participantGradientPreference]);
-  const [detectedDevices, setDetectedDevices] = useState22(EMPTY_DETECTED_DEVICES);
+  const [detectedDevices, setDetectedDevices] = useState21(EMPTY_DETECTED_DEVICES);
   const buttonsToRender = buttons ?? DEFAULT_CONTROL_BAR_BUTTONS;
   useEffect16(() => {
     if (!detectDevices || density !== "comfortable" || !navigator.mediaDevices?.enumerateDevices) return;
@@ -4643,10 +4604,10 @@ 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 [commandSource, setCommandSource] = useState22();
-  const [commandAction, setCommandAction] = useState22();
+  const [noiseSuppression, setNoiseSuppression] = useState21(true);
+  const [commandError, setCommandError] = useState21(null);
+  const [commandSource, setCommandSource] = useState21();
+  const [commandAction, setCommandAction] = useState21();
   const run = useCallback5(
     async (command, source, action) => {
       setCommandError(null);
@@ -4806,8 +4767,8 @@ function ControlBarPresentation(props) {
 var ControlBarSurface = React12.memo((props) => {
   const { buttonsToRender, effectiveAudioInputDevices, effectiveAudioOutputDevices, effectiveVideoInputDevices, showLeave } = useControlBarSurfaceBehavior({ ...props, density: props.density ?? "comfortable", detectDevices: props.detectDevices ?? true });
   const dock = useRef12(null);
-  const [fullscreen, setFullscreen] = useState23(false);
-  const [canCaptureDisplay, setCanCaptureDisplay] = useState23(false);
+  const [fullscreen, setFullscreen] = useState22(false);
+  const [canCaptureDisplay, setCanCaptureDisplay] = useState22(false);
   useEffect17(() => setCanCaptureDisplay(typeof navigator.mediaDevices?.getDisplayMedia === "function"), []);
   useEffect17(() => {
     const changed = () => setFullscreen(Boolean(document.fullscreenElement));
@@ -4958,10 +4919,10 @@ function ControlBar(props) {
 }
 
 // src/components/participants-panel/ParticipantsPanel.tsx
-import React13, { useMemo as useMemo10, useState as useState25 } from "react";
+import React13, { useMemo as useMemo10, useState as useState24 } from "react";
 
 // src/components/participants-panel/participant-row.tsx
-import { useState as useState24, useRef as useRef13, useEffect as useEffect18 } from "react";
+import { useState as useState23, useRef as useRef13, useEffect as useEffect18 } from "react";
 
 // src/components/participants-panel/participant-options-menu-contract.ts
 function runParticipantAction(action, onClose, onCommandError) {
@@ -5129,14 +5090,15 @@ function ParticipantRow({
   onCommandError,
   participantVolumes,
   onParticipantVolumeChange,
+  onParticipantClick,
   participantGradientPreference,
   generatedAvatars = true,
   menuOpen,
   onMenuToggle,
   onMenuClose
 }) {
-  const [isEditing, setIsEditing] = useState24(false);
-  const [editName, setEditName] = useState24(participant.displayName);
+  const [isEditing, setIsEditing] = useState23(false);
+  const [editName, setEditName] = useState23(participant.displayName);
   const inputRef = useRef13(null);
   const rootRef = useRef13(null);
   const hasVolumeControl = !!participantVolumes && !!onParticipantVolumeChange;
@@ -5161,78 +5123,100 @@ function ParticipantRow({
     }
   };
   const optionsButtonClassName = variant === "mobile" ? "text-[var(--chalk-app-text-muted)] hover:text-[var(--chalk-app-text)]" : variant === "sidebar" ? "opacity-70 text-[var(--chalk-app-text-muted)] hover:text-[var(--chalk-app-text)] hover:opacity-100" : "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100";
-  return /* @__PURE__ */ jsxs27("div", { ref: rootRef, className: "call-person-row group", children: [
-    /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2.5 min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx45("div", { className: "relative", children: /* @__PURE__ */ jsx45(Avatar, { name: participant.displayName, src: participant.avatarUrl, size: "sm", generated: generatedAvatars, className: "!h-8 !w-8", gradientPreference: participantGradientPreference }) }),
-      /* @__PURE__ */ jsxs27("div", { className: "flex flex-col min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-1.5 w-full", children: [
-          isEditing ? /* @__PURE__ */ jsx45("div", { className: "flex items-center gap-1 flex-1", children: /* @__PURE__ */ jsx45(
-            "input",
-            {
-              ref: inputRef,
-              type: "text",
-              "aria-label": "Your name",
-              value: editName,
-              onChange: (e) => setEditName(e.target.value),
-              onKeyDown: handleKeyDown,
-              onBlur: handleSave,
-              className: "w-full min-w-0 rounded border border-[var(--chalk-app-control-active-line)]/30 bg-[var(--chalk-app-input)] px-1.5 py-0.5 text-sm font-normal text-[var(--chalk-app-text)] outline-none focus:border-[var(--chalk-app-control-active-line)]"
-            }
-          ) }) : /* @__PURE__ */ jsx45("span", { className: "min-w-0 truncate text-sm font-medium text-[var(--chalk-app-text)]", onClick: () => participant.isLocal && onUpdateDisplayName && setIsEditing(true), title: participant.isLocal && onUpdateDisplayName ? "Click to edit" : void 0, children: /* @__PURE__ */ jsx45("bdi", { children: participant.displayName }) }),
-          participant.isHost && !isEditing ? /* @__PURE__ */ jsx45("span", { className: "shrink-0 text-xs text-[var(--chalk-app-text-muted)]", children: "Host" }) : null,
-          participant.isLocal && !isEditing && /* @__PURE__ */ jsxs27("span", { className: "flex shrink-0 items-center gap-1 text-xs text-[var(--chalk-app-text-muted)]", children: [
-            "(You)",
-            onUpdateDisplayName && /* @__PURE__ */ jsx45("button", { type: "button", onClick: () => setIsEditing(true), "aria-label": "Edit your name", className: "call-edit-name", children: /* @__PURE__ */ jsx45(Edit02Icon, { className: "w-3 h-3" }) })
+  return /* @__PURE__ */ jsxs27(
+    "div",
+    {
+      ref: rootRef,
+      className: "call-person-row group",
+      onClick: (event) => {
+        if (event.target instanceof Element && event.currentTarget.contains(event.target) && !event.target.closest("button, input, [role=menu]")) onParticipantClick?.(participant.id);
+      },
+      children: [
+        /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2.5 min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx45("div", { className: "relative", children: /* @__PURE__ */ jsx45(Avatar, { name: participant.displayName, src: participant.avatarUrl, size: "sm", generated: generatedAvatars, className: "!h-8 !w-8", gradientPreference: participantGradientPreference }) }),
+          /* @__PURE__ */ jsxs27("div", { className: "flex flex-col min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-1.5 w-full", children: [
+              isEditing ? /* @__PURE__ */ jsx45("div", { className: "flex items-center gap-1 flex-1", children: /* @__PURE__ */ jsx45(
+                "input",
+                {
+                  ref: inputRef,
+                  type: "text",
+                  "aria-label": "Your name",
+                  value: editName,
+                  onChange: (e) => setEditName(e.target.value),
+                  onKeyDown: handleKeyDown,
+                  onBlur: handleSave,
+                  className: "w-full min-w-0 rounded border border-[var(--chalk-app-control-active-line)]/30 bg-[var(--chalk-app-input)] px-1.5 py-0.5 text-sm font-normal text-[var(--chalk-app-text)] outline-none focus:border-[var(--chalk-app-control-active-line)]"
+                }
+              ) }) : /* @__PURE__ */ jsx45(
+                "button",
+                {
+                  type: "button",
+                  className: "min-w-0 truncate text-left text-sm font-medium text-[var(--chalk-app-text)]",
+                  onClick: () => {
+                    if (onParticipantClick) onParticipantClick(participant.id);
+                    else if (participant.isLocal && onUpdateDisplayName) setIsEditing(true);
+                  },
+                  "aria-label": onParticipantClick ? `Show ${participant.displayName} on main screen` : participant.displayName,
+                  children: /* @__PURE__ */ jsx45("bdi", { children: participant.displayName })
+                }
+              ),
+              participant.isHost && !isEditing ? /* @__PURE__ */ jsx45("span", { className: "shrink-0 text-xs text-[var(--chalk-app-text-muted)]", children: "Host" }) : null,
+              participant.isLocal && !isEditing && /* @__PURE__ */ jsxs27("span", { className: "flex shrink-0 items-center gap-1 text-xs text-[var(--chalk-app-text-muted)]", children: [
+                "(You)",
+                onUpdateDisplayName && /* @__PURE__ */ jsx45("button", { type: "button", onClick: () => setIsEditing(true), "aria-label": "Edit your name", className: "call-edit-name", children: /* @__PURE__ */ jsx45(Edit02Icon, { className: "w-3 h-3" }) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx45("div", { className: "flex items-center gap-1.5" })
           ] })
         ] }),
-        /* @__PURE__ */ jsx45("div", { className: "flex items-center gap-1.5" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-1 shrink-0", children: [
-      participant.isMuted ? /* @__PURE__ */ jsx45(MicrophoneOff01Icon, { className: "h-4 w-4 text-[var(--chalk-danger-text)]", "aria-label": "Microphone off", role: "img" }) : null,
-      participant.isHandRaised ? /* @__PURE__ */ jsxs27("span", { className: "call-hand", role: "img", "aria-label": `Hand raised${participant.handOrder ? `, number ${participant.handOrder}` : ""}`, children: [
-        "\u270B",
-        participant.handOrder
-      ] }) : null,
-      !participant.isVideoEnabled ? /* @__PURE__ */ jsx45(VideoOffIcon, { className: "h-4 w-4 text-[var(--chalk-app-text-muted)]", "aria-label": "Camera off", role: "img" }) : null,
-      showMenuButton && !isEditing && /* @__PURE__ */ jsxs27(
-        ChalkPopoverPrimitive.Root,
-        {
-          open: menuOpen,
-          onOpenChange: (open) => {
-            if (open) onMenuToggle();
-            else onMenuClose();
-          },
-          children: [
-            /* @__PURE__ */ jsx45(ChalkPopoverPrimitive.Trigger, { className: cn("call-person-options", optionsButtonClassName), "aria-label": `Options for ${participant.displayName}`, children: /* @__PURE__ */ jsx45("svg", { className: "size-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx45("path", { d: "M5 12h.01M12 12h.01M19 12h.01" }) }) }),
-            /* @__PURE__ */ jsx45(ChalkPopoverPrimitive.Portal, { container: rootRef.current?.closest("[data-chalk]") ?? void 0, children: /* @__PURE__ */ jsx45(ChalkPopoverPrimitive.Positioner, { side: "bottom", align: "end", sideOffset: 6, collisionPadding: 8, className: "chalk-popover-positioner", children: /* @__PURE__ */ jsx45(ChalkPopoverPrimitive.Popup, { "aria-label": `Options for ${participant.displayName}`, className: "chalk-menu w-60", children: /* @__PURE__ */ jsx45(
-              ParticipantOptionsMenu,
-              {
-                participant,
-                variant,
-                canManageParticipants,
-                onClose: onMenuClose,
-                onAssignRole,
-                onStopParticipantScreenShare,
-                onMuteParticipant,
-                onRequestUnmute,
-                onStopParticipantCamera,
-                onRequestStartCamera,
-                onRemoveParticipant,
-                onEditName: participant.isLocal ? () => {
-                  setIsEditing(true);
-                  onMenuClose();
-                } : void 0,
-                participantVolumes,
-                onParticipantVolumeChange,
-                onCommandError
-              }
-            ) }) }) })
-          ]
-        }
-      )
-    ] })
-  ] });
+        /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-1 shrink-0", children: [
+          participant.isMuted ? /* @__PURE__ */ jsx45(MicrophoneOff01Icon, { className: "h-4 w-4 text-[var(--chalk-danger-text)]", "aria-label": "Microphone off", role: "img" }) : null,
+          participant.isHandRaised ? /* @__PURE__ */ jsxs27("span", { className: "call-hand", role: "img", "aria-label": `Hand raised${participant.handOrder ? `, number ${participant.handOrder}` : ""}`, children: [
+            "\u270B",
+            participant.handOrder
+          ] }) : null,
+          !participant.isVideoEnabled ? /* @__PURE__ */ jsx45(VideoOffIcon, { className: "h-4 w-4 text-[var(--chalk-app-text-muted)]", "aria-label": "Camera off", role: "img" }) : null,
+          showMenuButton && !isEditing && /* @__PURE__ */ jsxs27(
+            ChalkPopoverPrimitive.Root,
+            {
+              open: menuOpen,
+              onOpenChange: (open) => {
+                if (open) onMenuToggle();
+                else onMenuClose();
+              },
+              children: [
+                /* @__PURE__ */ jsx45(ChalkPopoverPrimitive.Trigger, { className: cn("call-person-options", optionsButtonClassName), "aria-label": `Options for ${participant.displayName}`, children: /* @__PURE__ */ jsx45("svg", { className: "size-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx45("path", { d: "M5 12h.01M12 12h.01M19 12h.01" }) }) }),
+                /* @__PURE__ */ jsx45(ChalkPopoverPrimitive.Portal, { container: rootRef.current?.closest("[data-chalk]") ?? void 0, children: /* @__PURE__ */ jsx45(ChalkPopoverPrimitive.Positioner, { side: "bottom", align: "end", sideOffset: 6, collisionPadding: 8, className: "chalk-popover-positioner", children: /* @__PURE__ */ jsx45(ChalkPopoverPrimitive.Popup, { "aria-label": `Options for ${participant.displayName}`, className: "chalk-menu w-60", children: /* @__PURE__ */ jsx45(
+                  ParticipantOptionsMenu,
+                  {
+                    participant,
+                    variant,
+                    canManageParticipants,
+                    onClose: onMenuClose,
+                    onAssignRole,
+                    onStopParticipantScreenShare,
+                    onMuteParticipant,
+                    onRequestUnmute,
+                    onStopParticipantCamera,
+                    onRequestStartCamera,
+                    onRemoveParticipant,
+                    onEditName: participant.isLocal ? () => {
+                      setIsEditing(true);
+                      onMenuClose();
+                    } : void 0,
+                    participantVolumes,
+                    onParticipantVolumeChange,
+                    onCommandError
+                  }
+                ) }) }) })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
 
 // src/components/participants-panel/ParticipantsPanel.tsx
@@ -5259,13 +5243,14 @@ var ParticipantsPanelSurface = React13.memo(
     onCommandError,
     participantVolumes,
     onParticipantVolumeChange,
+    onParticipantClick,
     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] = useState24("");
+    const [activeMenuId, setActiveMenuId] = useState24(null);
+    const [muting, setMuting] = useState24(false);
+    const [error, setError] = useState24(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;
@@ -5328,6 +5313,7 @@ var ParticipantsPanelSurface = React13.memo(
         ParticipantRow,
         {
           participant,
+          onParticipantClick,
           variant,
           canManageParticipants,
           onAssignRole,
@@ -5368,7 +5354,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] = useState24(/* @__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) => {
@@ -5423,11 +5409,12 @@ ParticipantsPanel.displayName = "ParticipantsPanel";
 import { formatSyncConnectDiagnostic, getConnectionFailureDetail } from "@q9labsai/chalk-client";
 import { Fragment as Fragment18, jsx as jsx47, jsxs as jsxs29 } from "react/jsx-runtime";
 function StatusSurface({ phase, callName = "the call", reason, episodeEndReason, endAction, errorCode, sync, theme, onRejoin, onHome, onRetry, onReportProblem, rejoinDisabled = false, retryPending = false }) {
+  const connectionLost = phase === "failed" && errorCode === "connection.sync_recovery_exhausted";
   const copy = {
     entering: { title: `Joining ${callName}\u2026`, detail: "" },
     left: { title: `You left ${callName}`, detail: "" },
     "episode-ended": episodeEndReason === "maximum_duration" ? { title: "The call reached its time limit", detail: "This call has ended for everyone." } : { title: "The call ended", detail: "" },
-    failed: { title: `Couldn\u2019t connect to ${callName}`, detail: getConnectionFailureDetail({ code: errorCode, sync }) },
+    failed: { title: connectionLost ? "Connection lost" : `Couldn\u2019t connect to ${callName}`, detail: getConnectionFailureDetail({ code: errorCode, sync }) },
     removed: { title: `You were removed from ${callName}`, detail: "The host removed you from this call." },
     full: { title: "This call is full", detail: `${callName} has reached 100 people. Ask the host to make room, then try again.` },
     elsewhere: { title: "You joined from another tab", detail: `${callName} is open in another tab or window. Use it here instead?` }
@@ -5455,7 +5442,7 @@ function StatusSurface({ phase, callName = "the call", reason, episodeEndReason,
         ] }) : null,
         /* @__PURE__ */ jsxs29("div", { "data-part": "status-actions", className: "mt-5 flex gap-7", children: [
           phase === "episode-ended" && episodeEndReason === "maximum_duration" && endAction ? /* @__PURE__ */ jsx47(StatusAction, { icon: /* @__PURE__ */ jsx47(StatusIcon, { retry: true }), label: endAction.label, onClick: endAction.onClick }) : null,
-          canRetry && retry ? /* @__PURE__ */ jsx47(StatusAction, { icon: /* @__PURE__ */ jsx47(StatusIcon, { retry: true }), label: phase === "elsewhere" ? "Use here" : phase === "left" ? "Rejoin" : "Try again", onClick: retry, disabled: rejoinDisabled || retryPending }) : null,
+          canRetry && retry ? /* @__PURE__ */ jsx47(StatusAction, { icon: /* @__PURE__ */ jsx47(StatusIcon, { retry: true }), label: phase === "elsewhere" ? "Use here" : phase === "left" || connectionLost ? "Rejoin" : "Try again", onClick: retry, disabled: rejoinDisabled || retryPending }) : null,
           phase !== "entering" && onHome ? /* @__PURE__ */ jsx47(StatusAction, { icon: /* @__PURE__ */ jsx47(StatusIcon, {}), label: "Home", onClick: onHome }) : null
         ] }),
         onReportProblem && phase !== "entering" ? /* @__PURE__ */ jsx47("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
@@ -5486,7 +5473,7 @@ function StatusAction({ icon, label, onClick, disabled }) {
 }
 
 // src/components/call-limbo/CallReady.tsx
-import { useEffect as useEffect19, useId, useRef as useRef14, useState as useState26 } from "react";
+import { useEffect as useEffect19, useId, useRef as useRef14, useState as useState25 } from "react";
 
 // src/components/call-limbo/qr-code.ts
 function inviteQR(text) {
@@ -5629,13 +5616,13 @@ function inviteQR(text) {
 // src/components/call-limbo/CallReady.tsx
 import { Fragment as Fragment19, jsx as jsx48, jsxs as jsxs30 } from "react/jsx-runtime";
 function CallReady({ open, onClose, link = typeof location === "undefined" ? "" : location.href }) {
-  const [showQR, setShowQR] = useState26(false);
+  const [showQR, setShowQR] = useState25(false);
   const qrRef = useRef14(null);
   const cardRef = useRef14(null);
   const phone = useIsMobile();
   const reducedMotion = usePrefersReducedMotion();
-  const [entered, setEntered] = useState26(false);
-  const [present, setPresent] = useState26(open);
+  const [entered, setEntered] = useState25(false);
+  const [present, setPresent] = useState25(open);
   const id = useId();
   const qr = showQR ? inviteQR(link) : null;
   const close = () => {
@@ -5716,11 +5703,11 @@ function CallReady({ open, onClose, link = typeof location === "undefined" ? ""
 }
 
 // src/components/toast-stack/ToastStack.tsx
-import { memo, useLayoutEffect as useLayoutEffect3, useRef as useRef15, useState as useState28 } from "react";
+import { memo, useLayoutEffect as useLayoutEffect3, useRef as useRef15, useState as useState27 } from "react";
 import { flushSync as flushSync2 } from "react-dom";
 
 // src/components/toast-stack/useToastCapacity.ts
-import { isValidElement as isValidElement2, useLayoutEffect as useLayoutEffect2, useState as useState27 } from "react";
+import { isValidElement as isValidElement2, useLayoutEffect as useLayoutEffect2, useState as useState26 } from "react";
 import { flushSync } from "react-dom";
 
 // src/components/toast-stack/toast-layout-snapshot.ts
@@ -5765,7 +5752,7 @@ function measureToastLayout(stack, snapshot) {
 
 // src/components/toast-stack/useToastCapacity.ts
 function useToastCapacity(stack, candidates, enabled, ownedIds) {
-  const [fit, setFit] = useState27(null);
+  const [fit, setFit] = useState26(null);
   let count = candidates.length;
   if (enabled) {
     count = 0;
@@ -5859,7 +5846,7 @@ var ToastStack = memo(function ToastStack2({ toasts, onDismiss, maxVisible = 3,
   const stack = useRef15(null);
   const short = useShortCall(stack, onFold !== void 0);
   const candidates = maxVisible > 0 ? toasts.slice(-maxVisible) : [];
-  const [ownedIds, setOwnedIds] = useState28([]);
+  const [ownedIds, setOwnedIds] = useState27([]);
   const fold = useRef15(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);
@@ -5868,7 +5855,7 @@ var ToastStack = memo(function ToastStack2({ toasts, onDismiss, maxVisible = 3,
   const foldedIds = folded.map((toast) => toast.id);
   const announced = useRef15(/* @__PURE__ */ new Map());
   const wasAnnounced = (toast) => announced.current.get(toast.id) === noticeIdentity(toast);
-  const [unheard, setUnheard] = useState28([]);
+  const [unheard, setUnheard] = useState27([]);
   const reported = useRef15([]);
   const reporting = useRef15(false);
   useLayoutEffect3(() => {
@@ -5915,7 +5902,7 @@ var ToastStack = memo(function ToastStack2({ toasts, onDismiss, maxVisible = 3,
   ] });
 });
 function useShortCall(stack, enabled) {
-  const [short, setShort] = useState28(null);
+  const [short, setShort] = useState27(null);
   useLayoutEffect3(() => {
     if (!enabled) {
       setShort(null);
@@ -5936,7 +5923,7 @@ function sameIds(a, b) {
 }
 
 // src/internal/call-motion.ts
-import { useEffect as useEffect20, useState as useState29 } from "react";
+import { useEffect as useEffect20, useState as useState28 } from "react";
 var moves = /* @__PURE__ */ new WeakMap();
 function captureFlip(elements) {
   const previous = Array.from(elements, (element) => ({ element, box: element.getBoundingClientRect() }));
@@ -5964,7 +5951,7 @@ function playFlip(previous) {
 }
 var ACTIVE_LAYERS = '[role="menu"],[role="dialog"],[data-part="toast"],[data-part="notice-button"],[data-chalk-drawer]';
 function useIdleChrome(root, enabled) {
-  const [idle, setIdle] = useState29(false);
+  const [idle, setIdle] = useState28(false);
   const fine = useMediaQuery("(pointer:fine) and (min-width:641px)");
   useEffect20(() => {
     const element = root.current;
@@ -5996,7 +5983,7 @@ function useIdleChrome(root, enabled) {
 }
 
 // src/components/space-header/SpaceHeader.tsx
-import React14, { useCallback as useCallback6, useRef as useRef18, useState as useState31 } from "react";
+import React14, { useCallback as useCallback6, useRef as useRef18, useState as useState30 } from "react";
 
 // src/internal/useSoundsSetting.ts
 import { useSyncExternalStore as useSyncExternalStore3 } from "react";
@@ -6048,7 +6035,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 useRef16, useState as useState30 } from "react";
+import { useEffect as useEffect21, useRef as useRef16, useState as useState29 } from "react";
 
 // src/components/space-header/share-qr.ts
 function shareQr(text) {
@@ -6203,10 +6190,10 @@ function CallDialog({
   const container = useRef16(null);
   const reportInput = useRef16(null);
   const reportOpener = useRef16(null);
-  const [text, setText] = useState30("");
-  const [includeDiagnostics, setIncludeDiagnostics] = useState30(false);
-  const [status, setStatus] = useState30("idle");
-  const [error, setError] = useState30("");
+  const [text, setText] = useState29("");
+  const [includeDiagnostics, setIncludeDiagnostics] = useState29(false);
+  const [status, setStatus] = useState29("idle");
+  const [error, setError] = useState29("");
   useEffect21(() => {
     if (open && kind === "report") {
       setText("");
@@ -6341,7 +6328,7 @@ function CallDetails({
 }) {
   const link = shareUrl ?? (typeof location === "undefined" ? "" : location.href);
   const qr = shareQr(link);
-  const [details, setDetails] = useState30(false);
+  const [details, setDetails] = useState29(false);
   return /* @__PURE__ */ jsxs32("div", { className: "chalk-details", children: [
     /* @__PURE__ */ jsxs32("div", { className: "chalk-shell-details-heading", children: [
       /* @__PURE__ */ jsx51("h2", { children: spaceName }),
@@ -6493,8 +6480,8 @@ var SpaceHeader = React14.memo((props) => {
   const [sounds, setSounds] = useSoundsSetting();
   const triggerRef = useRef18(null);
   const focusScope = useRef18(null);
-  const [open, setOpen] = useState31(false);
-  const [dialog, setDialog] = useState31({ kind: "shortcuts", open: false });
+  const [open, setOpen] = useState30(false);
+  const [dialog, setDialog] = useState30({ kind: "shortcuts", open: false });
   const showShortcuts = useCallback6(() => setDialog({ kind: "shortcuts", open: true }), []);
   useCallShortcuts(props.shortcuts, showShortcuts);
   const phone = useMediaQuery("(max-width: 640px)");
@@ -6581,16 +6568,16 @@ var SpaceHeader = React14.memo((props) => {
 SpaceHeader.displayName = "SpaceHeader";
 
 // src/components/composite/ScreenShareView.tsx
-import { useEffect as useEffect23, useMemo as useMemo11, useRef as useRef19, useState as useState32 } from "react";
+import { useEffect as useEffect23, useMemo as useMemo11, useRef as useRef19, useState as useState31 } from "react";
 import { Fragment as Fragment23, jsx as jsx53, jsxs as jsxs34 } 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 = useRef19(null);
-  const [fill, setFill] = useState32(false);
-  const [controlsOpen, setControlsOpen] = useState32(false);
-  const [poppedOut, setPoppedOut] = useState32(false);
-  const [zoom, setZoom] = useState32(false);
-  const [pending, setPending] = useState32(false);
-  const [error, setError] = useState32(null);
+  const [fill, setFill] = useState31(false);
+  const [controlsOpen, setControlsOpen] = useState31(false);
+  const [poppedOut, setPoppedOut] = useState31(false);
+  const [zoom, setZoom] = useState31(false);
+  const [pending, setPending] = useState31(false);
+  const [error, setError] = useState31(null);
   const status = state ?? (mediaVisible ? "live" : "connecting");
   const name = isLocal ? "Your screen" : `${sharedByName}'s screen`;
   const source = capture2?.surface === "window" ? "a window" : capture2?.surface === "browser" ? "a tab" : capture2?.surface === "monitor" ? "your screen" : null;
@@ -6776,16 +6763,16 @@ function ScreenShareView(props) {
 }
 
 // src/components/stage/Stage.tsx
-import { useCallback as useCallback7, useEffect as useEffect24, useLayoutEffect as useLayoutEffect5, useMemo as useMemo12, useRef as useRef22, useState as useState34 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect24, useLayoutEffect as useLayoutEffect5, useMemo as useMemo12, useRef as useRef22, useState as useState33 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/components/stage/useStageDimensions.ts
-import { useLayoutEffect as useLayoutEffect4, useRef as useRef20, useState as useState33 } from "react";
+import { useLayoutEffect as useLayoutEffect4, useRef as useRef20, useState as useState32 } from "react";
 import { flushSync as flushSync3 } from "react-dom";
 function useStageDimensions(fallback3) {
   const ref = useRef20(null);
   const current = useRef20(fallback3);
-  const [dimensions, setDimensions] = useState33(fallback3);
+  const [dimensions, setDimensions] = useState32(fallback3);
   useLayoutEffect4(() => {
     const element = ref.current;
     if (!element || typeof ResizeObserver === "undefined") return;
@@ -6981,7 +6968,7 @@ function createContentPlacement() {
   };
 }
 function PersistentStageContent({ placement, children }) {
-  const [host, setHost] = useState34(null);
+  const [host, setHost] = useState33(null);
   useLayoutEffect5(() => {
     const element = document.createElement("div");
     Object.assign(element.style, TILE_FILL);
@@ -7006,7 +6993,6 @@ function Stage({
   pinnedId,
   followingId = null,
   onFollowChange,
-  clickAction = "pin",
   onPinnedChange,
   onOverflowClick,
   onItemClick,
@@ -7025,9 +7011,9 @@ function Stage({
 }) {
   const prefersReducedMotion = usePrefersReducedMotion();
   const { ref: boxRef, dimensions: box } = useStageDimensions(FALLBACK_BOX);
-  const [overflowOpen, setOverflowOpen] = useState34(false);
-  const [shareAspects, setShareAspects] = useState34(/* @__PURE__ */ new Map());
-  const [uncontrolledPinnedId, setUncontrolledPinnedId] = useState34(null);
+  const [overflowOpen, setOverflowOpen] = useState33(false);
+  const [shareAspects, setShareAspects] = useState33(/* @__PURE__ */ new Map());
+  const [uncontrolledPinnedId, setUncontrolledPinnedId] = useState33(null);
   const activePinnedId = pinnedId === void 0 ? uncontrolledPinnedId : pinnedId;
   const orderRef = useRef22([]);
   const seenAtRef = useRef22(/* @__PURE__ */ new Map());
@@ -7108,7 +7094,7 @@ function Stage({
     return /* @__PURE__ */ jsx56(StageContentTile, { item, ...context });
   };
   const animate = animateOverride ?? !prefersReducedMotion;
-  const [displayed, setDisplayed] = useState34({
+  const [displayed, setDisplayed] = useState33({
     source: ordered,
     geometry,
     tiles: ordered.map((item) => ({ item, frame: framesById.get(item.id), leaving: false }))
@@ -7174,15 +7160,14 @@ function Stage({
     for (const item of ordered) {
       map.set(item.id, {
         onClick: () => {
-          if (clickAction === "follow" && item.kind === "participant" && !item.participant.isLocal) onFollowChange?.(item.id);
-          else togglePin(item);
+          togglePin(item);
           onItemClick?.(item);
         },
         onDoubleClick: onItemDoubleClick ? () => onItemDoubleClick(item) : void 0
       });
     }
     return map;
-  }, [clickAction, interactive, onFollowChange, onItemDoubleClick, onItemClick, ordered, togglePin]);
+  }, [interactive, onItemDoubleClick, onItemClick, ordered, togglePin]);
   if (ordered.length === 0) {
     return /* @__PURE__ */ jsx56("div", { className: cn("flex h-full w-full items-center justify-center px-6 py-10", className), "data-tour": "video-grid", children: emptyState });
   }
@@ -7207,7 +7192,7 @@ function Stage({
               aspectRatio: "fill",
               primary: frame?.role === "primary",
               pinned,
-              clickAction: item.participant.isLocal ? "pin" : clickAction,
+              onFollow: onFollowChange && !item.participant.isLocal ? () => onFollowChange(item.id) : void 0,
               following: followingId === item.id,
               onClick: click,
               onDoubleClick: doubleClick,
@@ -7268,7 +7253,6 @@ function Stage({
             setOverflowOpen(false);
           },
           children: [
-            clickAction === "follow" && !item.participant.isLocal ? `${followingId === item.id ? "Stop following" : "Follow"} ` : "",
             item.participant.displayName,
             item.participant.isMuted ? " \xB7 Muted" : ""
           ]
@@ -7477,7 +7461,7 @@ function SpacePresentation({ colorScheme = "dark", stageBackground, header, stag
 // src/components/space-view/SpaceView.tsx
 import "@q9labsai/chalk-client";
 import { DEFAULT_QUICK_REACTIONS as DEFAULT_QUICK_REACTIONS2 } from "@q9labsai/chalk-ui/reactions";
-import { useCallback as useCallback14, useEffect as useEffect36, useMemo as useMemo18, useRef as useRef29, useState as useState45 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect36, useMemo as useMemo18, useRef as useRef29, useState as useState44 } from "react";
 
 // src/components/space-header/call-diagnostics.ts
 function callDiagnostics(connection, media) {
@@ -7508,11 +7492,11 @@ function callCountdown(deadline, now, previousSeconds) {
 }
 
 // src/internal/useEpisodeDuration.ts
-import { useEffect as useEffect26, useState as useState35 } from "react";
+import { useEffect as useEffect26, useState as useState34 } from "react";
 function useEpisodeDuration() {
   const connection = useConnection();
   const episodeStart = connection.episode?.startedAt ? Date.parse(connection.episode.startedAt) : null;
-  const [now, setNow] = useState35(() => Date.now());
+  const [now, setNow] = useState34(() => Date.now());
   useEffect26(() => {
     if (episodeStart === null || Number.isNaN(episodeStart)) return;
     setNow(Date.now());
@@ -7568,16 +7552,17 @@ function createSoundPlayer({ outputDeviceId } = {}) {
     const created = !context;
     try {
       context ??= new AudioContext();
+      if (created && outputDeviceId && "setSinkId" in context && typeof context.setSinkId === "function") void Promise.resolve(context.setSinkId(outputDeviceId)).catch(() => void 0);
+      if (context.state === "suspended") void context.resume().catch(() => void 0);
     } catch {
       return;
     }
-    if (created && outputDeviceId && "setSinkId" in context && typeof context.setSinkId === "function") void Promise.resolve(context.setSinkId(outputDeviceId)).catch(() => void 0);
-    if (context.state === "suspended") void context.resume().catch(() => void 0);
   };
   if (typeof window !== "undefined") {
     window.addEventListener("click", unlock, { capture: true });
     window.addEventListener("keydown", unlock, { capture: true });
   }
+  unlock();
   const tone = (frequency, offset, duration, volume = 0.07, type = "sine", to) => {
     if (!context || context.state !== "running") return;
     const oscillator = context.createOscillator(), gain = context.createGain(), time = context.currentTime + offset;
@@ -7616,44 +7601,47 @@ function createSoundPlayer({ outputDeviceId } = {}) {
   return {
     play(cue) {
       if (disposed || !context || context.state !== "running") return;
-      switch (cue) {
-        case "join":
-          tone(659, 0, 0.2);
-          tone(988, 0.1, 0.28, 0.06);
-          break;
-        case "leave":
-          tone(784, 0, 0.2);
-          tone(523, 0.1, 0.3, 0.06);
-          break;
-        case "knock":
-          thud(0);
-          thud(0.17);
-          break;
-        case "message":
-          tone(1175, 0, 0.16, 0.05, "triangle");
-          break;
-        case "hand-raise":
-          tone(1319, 0, 0.32, 0.045);
-          tone(1760, 0.07, 0.4, 0.035);
-          break;
-        case "mute":
-          tone(560, 0, 0.07, 0.06, "triangle", 380);
-          break;
-        case "unmute":
-          tone(420, 0, 0.07, 0.06, "triangle", 640);
-          break;
-        case "recording":
-          tone(587, 0, 0.14);
-          tone(587, 0.18, 0.14);
-          tone(880, 0.36, 0.32, 0.06);
-          break;
-        case "error":
-          tone(392, 0, 0.16, 0.05, "triangle");
-          tone(311, 0.13, 0.24, 0.05, "triangle");
-          break;
-        case "reaction":
-          tone(880, 0, 0.12, 0.035, "triangle");
-          break;
+      try {
+        switch (cue) {
+          case "join":
+            tone(659, 0, 0.16, 0.04);
+            tone(988, 0.08, 0.22, 0.03);
+            break;
+          case "leave":
+            tone(784, 0, 0.2);
+            tone(523, 0.1, 0.3, 0.06);
+            break;
+          case "knock":
+            thud(0);
+            thud(0.17);
+            break;
+          case "message":
+            tone(1175, 0, 0.16, 0.05, "triangle");
+            break;
+          case "hand-raise":
+            tone(1319, 0, 0.32, 0.045);
+            tone(1760, 0.07, 0.4, 0.035);
+            break;
+          case "mute":
+            tone(560, 0, 0.07, 0.06, "triangle", 380);
+            break;
+          case "unmute":
+            tone(420, 0, 0.07, 0.06, "triangle", 640);
+            break;
+          case "recording":
+            tone(587, 0, 0.14);
+            tone(587, 0.18, 0.14);
+            tone(880, 0.36, 0.32, 0.06);
+            break;
+          case "error":
+            tone(392, 0, 0.16, 0.05, "triangle");
+            tone(311, 0.13, 0.24, 0.05, "triangle");
+            break;
+          case "reaction":
+            tone(880, 0, 0.12, 0.035, "triangle");
+            break;
+        }
+      } catch {
       }
     },
     dispose() {
@@ -7662,7 +7650,7 @@ function createSoundPlayer({ outputDeviceId } = {}) {
         window.removeEventListener("click", unlock, true);
         window.removeEventListener("keydown", unlock, true);
       }
-      if (context) void context.close();
+      if (context) void Promise.resolve(context.close()).catch(() => void 0);
     }
   };
 }
@@ -7693,9 +7681,21 @@ function useSoundCues(enabled, createPlayer = createSoundPlayer) {
     const player = createPlayerRef.current({ outputDeviceId });
     playerRef.current = player;
     let previous = client.getSnapshot();
+    const seenParticipants = new Set(previous.participants.roster.map((participant) => participant.participantId));
+    let lastJoinAt = -Infinity;
     const unsubscribe = client.subscribe(() => {
       const next = client.getSnapshot();
-      if (enabledRef.current) for (const cue of diffSoundCues(previous, next)) player.play(cue);
+      const hasNewParticipant = next.participants.roster.some((participant) => participant.participantId !== next.self.participantId && !seenParticipants.has(participant.participantId));
+      if (enabledRef.current)
+        for (const cue of diffSoundCues(previous, next)) {
+          if (cue === "join") {
+            const now = performance.now();
+            if (!hasNewParticipant || now - lastJoinAt < 3e3) continue;
+            lastJoinAt = now;
+          }
+          player.play(cue);
+        }
+      for (const participant of next.participants.roster) seenParticipants.add(participant.participantId);
       previous = next;
     });
     const offError = client.on("error", ({ error }) => playFailure(error));
@@ -7719,14 +7719,14 @@ function useSoundCues(enabled, createPlayer = createSoundPlayer) {
 }
 
 // src/components/composite/ReactionPicker.tsx
-import React21, { useMemo as useMemo14, useState as useState37, useCallback as useCallback10, useEffect as useEffect29, useRef as useRef27 } from "react";
+import React21, { useMemo as useMemo14, useState as useState36, useCallback as useCallback10, useEffect as useEffect29, useRef as useRef27 } 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 useLayoutEffect6, useRef as useRef26, useState as useState36 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect28, useLayoutEffect as useLayoutEffect6, useRef as useRef26, useState as useState35 } from "react";
 import { Fragment as Fragment27, jsx as jsx61, jsxs as jsxs39 } from "react/jsx-runtime";
 function ReactionTray({ isHandRaised, onToggleHandRaise, reactions, onSelect, onClose, position = "top", className }) {
-  const [more, setMore] = useState36(false);
+  const [more, setMore] = useState35(false);
   const returnFocus = useRef26(null);
   const prefersReducedMotion = usePrefersReducedMotion();
   const { trigger } = useHaptics();
@@ -7811,8 +7811,8 @@ import { Fragment as Fragment28, jsx as jsx62, jsxs as jsxs40 } from "react/jsx-
 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] = useState37("smileys");
-  const [searchQuery, setSearchQuery] = useState37("");
+  const [activeCategory, setActiveCategory] = useState36("smileys");
+  const [searchQuery, setSearchQuery] = useState36("");
   const inputRef = useRef27(null);
   const themeVariables = useMemo14(() => getParticipantThemeVariables(participantColorSeed, participantGradientPreference), [participantColorSeed, participantGradientPreference]);
   useEffect29(() => {
@@ -7969,7 +7969,7 @@ var ReactionPicker = React21.memo(({ isHandRaised, onToggleHandRaise, isOpen, on
 ReactionPicker.displayName = "ReactionPicker";
 
 // src/components/offline-actions/OfflineActions.tsx
-import { useEffect as useEffect30, useState as useState38, useSyncExternalStore as useSyncExternalStore4 } from "react";
+import { useEffect as useEffect30, useState as useState37, useSyncExternalStore as useSyncExternalStore4 } from "react";
 import { jsx as jsx63 } from "react/jsx-runtime";
 var RECONNECTING_GRACE_MS = 2e3;
 function offlineNoticeText(pendingCount, online) {
@@ -7997,7 +7997,7 @@ function OfflineActions({ reconnecting: requestedReconnecting = false, hasNotice
   return null;
 }
 function useTrueFor(value, milliseconds) {
-  const [elapsed, setElapsed] = useState38(false);
+  const [elapsed, setElapsed] = useState37(false);
   useEffect30(() => {
     setElapsed(false);
     if (!value) return;
@@ -8019,12 +8019,12 @@ function readOnline() {
 }
 
 // src/components/reconnecting-overlay/ReconnectingOverlay.tsx
-import { memo as memo3, useEffect as useEffect31, useState as useState39 } from "react";
+import { memo as memo3, useEffect as useEffect31, useState as useState38 } from "react";
 import { jsx as jsx64 } 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] = useState39(false);
+  const [elapsed, setElapsed] = useState38(false);
   useEffect31(() => {
     setElapsed(false);
     if (!reconnecting) return;
@@ -8039,7 +8039,7 @@ var ReconnectingOverlay = memo3(function ReconnectingOverlay2({ isVisible, statu
 });
 
 // src/components/toast-stack/useCallToasts.ts
-import { useCallback as useCallback11, useEffect as useEffect32, useRef as useRef28, useState as useState40 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect32, useRef as useRef28, useState as useState39 } from "react";
 
 // src/components/toast-stack/call-events.tsx
 import { Fragment as Fragment29, jsx as jsx65, jsxs as jsxs41 } from "react/jsx-runtime";
@@ -8136,7 +8136,7 @@ function callEventToasts(previous, next) {
 // src/components/toast-stack/useCallToasts.ts
 function useCallToasts() {
   const client = useSpaceClient();
-  const [toasts, setToasts] = useState40([]);
+  const [toasts, setToasts] = useState39([]);
   const sequence = useRef28(0);
   useEffect32(() => {
     setToasts([]);
@@ -8177,9 +8177,9 @@ function useCallToasts() {
 }
 
 // src/components/call-limbo/useCallLink.ts
-import { useEffect as useEffect33, useState as useState41 } from "react";
+import { useEffect as useEffect33, useState as useState40 } from "react";
 function useCallLink(alone) {
-  const [open, setOpen] = useState41(alone);
+  const [open, setOpen] = useState40(alone);
   useEffect33(() => {
     if (!alone) setOpen(false);
   }, [alone]);
@@ -8187,10 +8187,10 @@ function useCallLink(alone) {
 }
 
 // src/components/toast-stack/NoticeButton.tsx
-import { useState as useState42 } from "react";
+import { useState as useState41 } from "react";
 import { jsx as jsx66, jsxs as jsxs42 } from "react/jsx-runtime";
 function NoticeButton({ toasts, onDismiss }) {
-  const [open, setOpen] = useState42(false);
+  const [open, setOpen] = useState41(false);
   if (toasts.length === 0) return null;
   const label = toasts.length === 1 ? "1 notice" : `${toasts.length} notices`;
   const trigger = /* @__PURE__ */ jsxs42("button", { type: "button", "data-part": "notice-button", className: "chalk-notice-button", "aria-label": `Show ${label}`, children: [
@@ -8212,7 +8212,7 @@ function NoticeButton({ toasts, onDismiss }) {
 import { BoardToastContext as BoardToastContext2 } from "@q9labsai/chalk-whiteboard/react";
 
 // src/components/stage/SpaceStage.tsx
-import { useCallback as useCallback13, useEffect as useEffect34, useMemo as useMemo17, useState as useState43 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect34, useMemo as useMemo17, useState as useState42 } from "react";
 
 // src/components/board/Board.tsx
 import { useContext as useContext3, useMemo as useMemo16 } from "react";
@@ -8282,31 +8282,43 @@ function Board(props) {
 
 // src/components/stage/SpaceStage.tsx
 import { jsx as jsx68 } from "react/jsx-runtime";
-function SpaceStage({ tiles, layout, onLayoutChange, generatedAvatars = true, whiteboard, onOverflowClick, shareCapture, onStopSharing, onChangeShare, colorScheme = "dark", onCloseBoard, className }) {
+function SpaceStage({ pinnedId, onPinnedChange, 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] = useState43(null);
-  const [pin, setPin] = useState43(null);
-  const [following, setFollowing] = useState43(null);
+  const [selectedShare, setSelectedShare] = useState42(null);
+  const [localPin, setLocalPin] = useState42(null);
+  const pin = pinnedId === void 0 ? localPin : pinnedId;
+  const setPin = useCallback13(
+    (id) => {
+      setLocalPin(id);
+      onPinnedChange?.(id);
+    },
+    [onPinnedChange]
+  );
+  const [following, setFollowing] = useState42(void 0);
   const boardOpen = whiteboard?.isOpen === true && Boolean(whiteboard.props);
   useEffect34(() => {
-    if (!boardOpen) setFollowing(null);
+    if (!boardOpen) setFollowing(void 0);
   }, [boardOpen]);
   const canFollow = boardOpen && Boolean(whiteboard?.sendView);
-  const followed = canFollow && tiles.some((tile) => tile.id === following) ? following : null;
+  const target = following === void 0 ? whiteboard?.presenterId : following;
+  const followed = canFollow && tiles.some((tile) => tile.id === target && !tile.isLocal) ? target ?? null : null;
   const activePin = items.some((item) => item.id === pin) ? pin : null;
   const shares = items.filter((item) => item.kind === "screen-share");
   const activeShare = selectedShare && shares.some((item) => item.id === selectedShare) ? selectedShare : null;
   useEffect34(() => {
     if (pin !== activePin) setPin(activePin);
     if (selectedShare !== activeShare) setSelectedShare(activeShare);
-  }, [pin, activePin, selectedShare, activeShare]);
-  const follow = useCallback13((id) => {
-    if (id) {
-      setPin(null);
-      setSelectedShare(null);
-    }
-    setFollowing(id);
-  }, []);
+  }, [pin, activePin, selectedShare, activeShare, setPin]);
+  const follow = useCallback13(
+    (id) => {
+      if (id) {
+        setPin(null);
+        setSelectedShare(null);
+      }
+      setFollowing(id);
+    },
+    [setPin]
+  );
   const renderContentTile = useCallback13(
     (item, context) => {
       if (item.kind === "screen-share")
@@ -8357,15 +8369,14 @@ function SpaceStage({ tiles, layout, onLayoutChange, generatedAvatars = true, wh
     Stage,
     {
       items,
-      layout,
+      layout: activePin ? "focus" : layout,
       pinnedId: activePin ?? activeShare ?? (followed ? "whiteboard" : null),
       onPinnedChange: setPin,
-      onFollowChange: (id) => follow(followed === id ? null : id),
+      onFollowChange: canFollow ? (id) => follow(followed === id ? null : id) : void 0,
       followingId: followed,
-      clickAction: canFollow ? "follow" : "pin",
       renderContentTile,
       onItemClick: focusContent,
-      onOverflowClick: canFollow ? void 0 : onOverflowClick,
+      onOverflowClick,
       generatedAvatars,
       emptyState: /* @__PURE__ */ jsx68(QuietSpace, {}),
       className
@@ -8375,11 +8386,11 @@ function SpaceStage({ tiles, layout, onLayoutChange, generatedAvatars = true, wh
 SpaceStage.displayName = "SpaceStage";
 
 // src/components/space-view/useDrawerPresence.ts
-import { useEffect as useEffect35, useState as useState44 } from "react";
+import { useEffect as useEffect35, useState as useState43 } from "react";
 var DRAWER_EXIT_MS = 200;
 function useDrawerPresence(panel, exitMs) {
-  const [retained, setRetained] = useState44(panel);
-  const [state, setState] = useState44(panel === null ? "closed" : "open");
+  const [retained, setRetained] = useState43(panel);
+  const [state, setState] = useState43(panel === null ? "closed" : "open");
   useEffect35(() => {
     if (panel !== null) {
       setRetained(panel);
@@ -8429,6 +8440,7 @@ function SpaceView({
   onEndEpisode,
   className
 }) {
+  const phone = useIsMobile();
   const effectiveShareUrl = inviteLink ?? shareUrl;
   const callToasts = useCallToasts();
   const [soundsEnabled] = useSoundsSetting();
@@ -8439,7 +8451,7 @@ function SpaceView({
   const media = useMedia();
   const connection = useConnection();
   const offline = useOffline();
-  const [dismissedOfflineNotice, setDismissedOfflineNotice] = useState45(null);
+  const [dismissedOfflineNotice, setDismissedOfflineNotice] = useState44(null);
   const offlineNotice = offline.notice && offline.notice !== dismissedOfflineNotice ? offline.notice : null;
   const recording = useRecording();
   const canPublishScreen = useCan("publishScreen");
@@ -8450,9 +8462,9 @@ function SpaceView({
   const canManageRecording = useCan("manageRecording");
   const episodeDuration = useEpisodeDuration();
   const deadline = connection.episode?.deadline;
-  const [now, setNow] = useState45(Date.now);
+  const [now, setNow] = useState44(Date.now);
   const previousCountdown = useRef29(null);
-  const [limitWarning, setLimitWarning] = useState45(null);
+  const [limitWarning, setLimitWarning] = useState44(null);
   const countdown = callCountdown(deadline, now);
   useEffect36(() => {
     if (!deadline) return;
@@ -8468,13 +8480,14 @@ function SpaceView({
     if (previous?.deadline !== deadline) setLimitWarning(null);
     if (next.warning !== null) setLimitWarning({ id: `time-limit-${deadline}-${next.warning}`, minutes: next.warning });
   }, [deadline, now]);
-  const [uncontrolledLayout, setUncontrolledLayout] = useState45(controlledLayout ?? "focus");
-  const [activePanel, setActivePanel] = useState45(initialPanel);
-  const [isReactionPickerOpen, setReactionPickerOpen] = useState45(false);
-  const [commandError, setCommandError] = useState45(null);
-  const [commandSource, setCommandSource] = useState45();
-  const [commandAction, setCommandAction] = useState45();
-  const [retryCommand, setRetryCommand] = useState45();
+  const [uncontrolledLayout, setUncontrolledLayout] = useState44(controlledLayout ?? "focus");
+  const [pinnedId, setPinnedId] = useState44(null);
+  const [activePanel, setActivePanel] = useState44(initialPanel);
+  const [isReactionPickerOpen, setReactionPickerOpen] = useState44(false);
+  const [commandError, setCommandError] = useState44(null);
+  const [commandSource, setCommandSource] = useState44();
+  const [commandAction, setCommandAction] = useState44();
+  const [retryCommand, setRetryCommand] = useState44();
   const onCommandError = (failure, source, mediaSource, action, command) => {
     if (!failure && commandError && typeof commandError === "object") callToasts.dismissFailure(commandError.code);
     setCommandError(failure);
@@ -8509,7 +8522,9 @@ function SpaceView({
     ...feature("whiteboard") && canDrawWhiteboard ? ["whiteboard"] : [],
     "leave"
   ];
+  const headerLayout = pinnedId ? "focus" : layout;
   const updateLayout = (nextLayout) => {
+    if (nextLayout === "grid") setPinnedId(null);
     setUncontrolledLayout(nextLayout);
     onLayoutChange?.(nextLayout);
   };
@@ -8545,7 +8560,7 @@ function SpaceView({
   };
   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] = useState45([]);
+  const [boardToasts, setBoardToasts] = useState44([]);
   const boardToastCount = useRef29(0);
   useEffect36(() => {
     if (!whiteboard?.isOpen) setBoardToasts([]);
@@ -8579,7 +8594,7 @@ function SpaceView({
     else if (id.startsWith("board-")) setBoardToasts((current) => current.filter((toast) => toast.id !== id));
     else callToasts.dismiss(id);
   };
-  const [foldedNotices, setFoldedNotices] = useState45([]);
+  const [foldedNotices, setFoldedNotices] = useState44([]);
   const folded = toasts.filter((toast) => foldedNotices.includes(toast.id));
   return /* @__PURE__ */ jsx69(ParticipantVolumeProvider, { children: /* @__PURE__ */ jsx69(BoardToastContext2.Provider, { value: showBoardToast, children: /* @__PURE__ */ jsx69(
     SpacePresentation,
@@ -8607,7 +8622,7 @@ function SpaceView({
           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,
-          onToggleLayout: () => updateLayout(layout === "grid" ? "focus" : "grid"),
+          onToggleLayout: () => updateLayout(headerLayout === "grid" ? "focus" : "grid"),
           onClosePanel: () => setActivePanel(null),
           onPushToTalk: (enabled) => {
             if (enabled && connection.status !== "live") return;
@@ -8617,13 +8632,15 @@ function SpaceView({
         duration: episodeDuration,
         timeLeft: countdown.seconds,
         isRecording: recording.current?.status === "recording",
-        layout,
+        layout: headerLayout,
         onLayoutChange: updateLayout,
         notices: folded.length ? /* @__PURE__ */ jsx69(NoticeButton, { toasts: folded, onDismiss: dismissToast }) : void 0
       },
       stage: /* @__PURE__ */ jsx69(
         SpaceStage,
         {
+          pinnedId,
+          onPinnedChange: setPinnedId,
           tiles,
           layout,
           onLayoutChange: updateLayout,
@@ -8679,7 +8696,20 @@ function SpaceView({
       ] }),
       sidebar: /* @__PURE__ */ jsxs43(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__ */ jsx69(ChatPanel, { variant: "mobile", generatedAvatars, onClose: () => setActivePanel(null), pickChatFiles }) : null,
-        drawer.panel === "participants" && feature("participants") ? /* @__PURE__ */ jsx69(ParticipantsPanel, { variant: "mobile", admissionEnabled: feature("admission"), generatedAvatars, onCommandError, onClose: () => setActivePanel(null) }) : null,
+        drawer.panel === "participants" && feature("participants") ? /* @__PURE__ */ jsx69(
+          ParticipantsPanel,
+          {
+            onParticipantClick: (id) => {
+              setPinnedId((current) => current === id ? null : id);
+              if (phone) setActivePanel(null);
+            },
+            variant: "mobile",
+            admissionEnabled: feature("admission"),
+            generatedAvatars,
+            onCommandError,
+            onClose: () => setActivePanel(null)
+          }
+        ) : null,
         drawer.panel === "admission" && feature("admission") ? /* @__PURE__ */ jsx69(AdmissionPanel, { className: "h-full w-full rounded-none shadow-none", onClose: () => setActivePanel(null) }) : null
       ] }),
       toasts: /* @__PURE__ */ jsx69(ToastStack, { toasts, onDismiss: dismissToast, onFold: setFoldedNotices }),