@q9labsai/chalk-react 5.2.3 → 5.2.5

package/README.md

@@ -139,4 +139,4 @@ Each message's `reactions` contains `{ emoji, count, participantIds }`; IDs iden
 
 Message reactions are stored separately from recording facts and are not rendered or added to recording timelines yet. Recording validators accept all 24 call-reaction emoji.
 
-`useChat()` returns the same state and `react(input)` action. Each hook message always has a reactions array; each group adds `isMine` for the current participant. Public types are `MessageReaction`, `ReactChatMessage`, and `UseChatResult`. No reaction UI is added by this change.
+`useChat()` returns the same state and `react(input)` action. Each hook message always has a reactions array; each group adds `isMine` for the current participant. Public types are `MessageReaction`, `ReactChatMessage`, and `UseChatResult`.

package/dist/{chunk-IZ44PX4W.js → chunk-6AUMKXPU.js}

@@ -36,7 +36,7 @@ import {
   useRecording,
   useSpaceClient,
   useWhiteboard
-} from "./chunk-34SIWIY5.js";
+} from "./chunk-WRKIKIXF.js";
 import {
   WHITEBOARD_ITEM_ID,
   screenShareItemId
@@ -326,7 +326,21 @@ function SpaceExperience(props) {
   if (connection.status === "failed" && connection.lastError?.code === "episode.ended")
     return /* @__PURE__ */ jsx(StatusSurface, { phase: "episode-ended", callName, episodeEndReason: connection.episodeEndReason, endAction: props.timeLimit?.endAction, theme: statusTheme, onHome: props.onHome, onReportProblem: props.onOpenReport });
   if (connection.status === "failed") {
-    return /* @__PURE__ */ jsx(StatusSurface, { phase: "failed", callName, errorCode: connection.lastError?.code, sync: connection.lastError?.sync, theme: statusTheme, onHome: props.onHome, onReportProblem: props.onOpenReport, onRetry: retryAutomaticJoin, retryPending });
+    return /* @__PURE__ */ jsx(
+      StatusSurface,
+      {
+        phase: "failed",
+        callName,
+        errorCode: connection.lastError?.code,
+        reason: connection.lastError?.code === "access.invalid" ? connection.lastError.message : void 0,
+        sync: connection.lastError?.sync,
+        theme: statusTheme,
+        onHome: props.onHome,
+        onReportProblem: props.onOpenReport,
+        onRetry: retryAutomaticJoin,
+        retryPending
+      }
+    );
   }
   if (connection.status === "leaving" || connection.status === "left")
     return /* @__PURE__ */ jsx(

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

@@ -4323,7 +4323,8 @@ function DevicePopover({
   className,
   disabled,
   toggleDisabled,
-  busy
+  busy,
+  onCancelPending
 }) {
   const [open, setOpen] = useState18(false);
   const mic = type === "mic";
@@ -4333,8 +4334,20 @@ function DevicePopover({
     /* @__PURE__ */ jsx38(
       ChalkTooltip,
       {
-        trigger: /* @__PURE__ */ jsx38("button", { type: "button", className: "chalk-shell-main", "aria-label": busy ? `Updating ${mic ? "microphone" : "camera"}` : label, "aria-pressed": isActive, disabled: disabled || toggleDisabled || busy, onClick: onToggle, children: /* @__PURE__ */ jsx38(ShellIcon, { name: mic ? isActive ? "mic" : "micOff" : isActive ? "cam" : "camOff" }) }),
-        children: label
+        trigger: /* @__PURE__ */ jsx38(
+          "button",
+          {
+            type: "button",
+            className: "chalk-shell-main",
+            "aria-label": busy ? `${onCancelPending ? "Cancel connecting" : "Updating"} ${mic ? "microphone" : "camera"}` : label,
+            "aria-pressed": isActive,
+            "aria-busy": busy,
+            disabled: disabled || toggleDisabled && !(busy && onCancelPending) || busy && !onCancelPending,
+            onClick: busy && onCancelPending ? onCancelPending : onToggle,
+            children: busy ? /* @__PURE__ */ jsx38("span", { "aria-hidden": "true", children: "\u2026" }) : /* @__PURE__ */ jsx38(ShellIcon, { name: mic ? isActive ? "mic" : "micOff" : isActive ? "cam" : "camOff" })
+          }
+        ),
+        children: warning ? `${mic ? "Microphone" : "Camera"} didn\u2019t reach the call. Try turning it on again.` : busy ? `Connecting ${mic ? "microphone" : "camera"}\u2026` : label
       }
     ),
     /* @__PURE__ */ jsxs20(
@@ -4367,7 +4380,18 @@ function DevicePopover({
         ]
       }
     ),
-    warning ? /* @__PURE__ */ jsx38("span", { className: "chalk-shell-warning", role: "img", "aria-label": `${mic ? "Microphone" : "Camera"} blocked or unavailable`, children: "!" }) : null,
+    warning ? /* @__PURE__ */ jsxs20("span", { className: "chalk-shell-warning", role: "status", "aria-label": `${mic ? "Microphone" : "Camera"} didn\u2019t reach the call. Try turning it on again.`, children: [
+      /* @__PURE__ */ jsx38("span", { "aria-hidden": "true", children: "!" }),
+      /* @__PURE__ */ jsxs20("span", { className: "sr-only", children: [
+        mic ? "Microphone" : "Camera",
+        " didn\u2019t reach the call. Try turning it on again."
+      ] })
+    ] }) : null,
+    busy ? /* @__PURE__ */ jsxs20("span", { className: "sr-only", role: "status", children: [
+      "Connecting ",
+      mic ? "microphone" : "camera",
+      "\u2026"
+    ] }) : null,
     mic && speakingWhileMuted ? /* @__PURE__ */ jsx38("span", { className: "chalk-shell-muted-hint", role: "status", children: "You\u2019re muted" }) : null
   ] });
 }
@@ -4509,6 +4533,14 @@ 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 useState21 } from "react";
+
+// src/components/control-bar/media-toggle.ts
+function mediaToggleTarget(state, live) {
+  if (state === "enabled" || state === "requesting") return false;
+  return live ? true : void 0;
+}
+
+// src/components/control-bar/control-bar-behavior.ts
 var DEFAULT_CONTROL_BAR_BUTTONS = ["mic", "video", "screenshare", "record", "whiteboard", "handraise", "leave", "participants", "chat", "reactions"];
 var EMPTY_DETECTED_DEVICES = {
   audioinput: [],
@@ -4600,6 +4632,8 @@ function useConnectedControlBarBehavior(props) {
   const live = useConnection().status === "live";
   const microphoneEnabled = media.local.microphone.state === "enabled";
   const cameraEnabled = media.local.camera.state === "enabled";
+  const microphoneTarget = mediaToggleTarget(media.local.microphone.state, live);
+  const cameraTarget = mediaToggleTarget(media.local.camera.state, live);
   const screenSharing = media.local.screen.state === "enabled" || media.local.screen.state === "requesting";
   const recordingStatus = recording.current?.status;
   const isRecording = recordingStatus === "recording" || recordingStatus === "stopping";
@@ -4649,6 +4683,8 @@ function useConnectedControlBarBehavior(props) {
   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 toggleMicrophone = microphoneTarget === void 0 ? void 0 : () => void run(() => client.media.setMicrophoneEnabled(microphoneTarget), "microphone", microphoneTarget ? "start" : "stop");
+  const toggleCamera = cameraTarget === void 0 ? void 0 : () => void run(() => client.media.setCameraEnabled(cameraTarget), "camera", cameraTarget ? "start" : "stop");
   const surfaceProps = {
     ...props,
     detectDevices: false,
@@ -4675,9 +4711,11 @@ function useConnectedControlBarBehavior(props) {
     shareUrl: props.shareUrl,
     isMuted: !microphoneEnabled,
     microphonePending: media.local.microphone.state === "requesting",
+    onCancelMicrophonePending: toggleMicrophone,
     mediaEnableDisabled: !live,
     reactionsDisabled: !live,
     cameraPending: media.local.camera.state === "requesting",
+    onCancelCameraPending: toggleCamera,
     isVideoEnabled: cameraEnabled,
     isScreenSharing: screenSharing,
     isRecording,
@@ -4724,8 +4762,8 @@ function useConnectedControlBarBehavior(props) {
       "speaker",
       "test"
     ),
-    onToggleMute: () => void run(() => client.media.setMicrophoneEnabled(!microphoneEnabled), "microphone", microphoneEnabled ? "stop" : "start"),
-    onToggleVideo: () => void run(() => client.media.setCameraEnabled(!cameraEnabled), "camera", cameraEnabled ? "stop" : "start"),
+    onToggleMute: toggleMicrophone,
+    onToggleVideo: toggleCamera,
     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"),
@@ -4739,7 +4777,12 @@ function useConnectedControlBarBehavior(props) {
     onLeft: leave,
     onEndForEveryone: props.onEndForEveryone
   };
-  return { surfaceProps, commandError, commandSource, commandAction };
+  return { surfaceProps, commandError, commandSource, commandAction, mediaNotice: failedMediaNotice(media.local) };
+}
+function failedMediaNotice(media) {
+  if (media.microphone.state === "failed") return "Microphone didn\u2019t reach the call. Turn it on to try again.";
+  if (media.camera.state === "failed") return "Camera didn\u2019t reach the call. Turn it on to try again.";
+  return void 0;
 }
 
 // src/components/control-bar/next-camera.ts
@@ -4804,6 +4847,7 @@ var ControlBarSurface = React12.memo((props) => {
         type: "mic",
         isActive: !props.isMuted,
         busy: props.microphonePending,
+        onCancelPending: props.onCancelMicrophonePending,
         toggleDisabled: props.mediaEnableDisabled && props.isMuted,
         onToggle: props.onToggleMute ?? (() => {
         }),
@@ -4828,6 +4872,7 @@ var ControlBarSurface = React12.memo((props) => {
         type: "video",
         isActive: props.isVideoEnabled ?? true,
         busy: props.cameraPending,
+        onCancelPending: props.onCancelCameraPending,
         toggleDisabled: props.mediaEnableDisabled && !props.isVideoEnabled,
         onToggle: props.onToggleVideo ?? (() => {
         }),
@@ -4911,10 +4956,10 @@ var ControlBarSurface = React12.memo((props) => {
 });
 ControlBarSurface.displayName = "ControlBarSurface";
 function ControlBar(props) {
-  const { surfaceProps, commandError, commandSource, commandAction } = useConnectedControlBarBehavior(props);
+  const { surfaceProps, commandError, commandSource, commandAction, mediaNotice } = useConnectedControlBarBehavior(props);
   return /* @__PURE__ */ jsxs25(Fragment15, { children: [
     /* @__PURE__ */ jsx43(ControlBarSurface, { ...surfaceProps }),
-    !props.onCommandError ? /* @__PURE__ */ jsx43(CommandErrorAlert, { message: commandError ? commandFailureMessage(commandError, commandSource, commandAction) : void 0 }) : null
+    /* @__PURE__ */ jsx43(CommandErrorAlert, { message: mediaNotice ?? (!props.onCommandError && commandError ? commandFailureMessage(commandError, commandSource, commandAction) : void 0) })
   ] });
 }
 
@@ -8595,6 +8640,8 @@ function SpaceView({
     else callToasts.dismiss(id);
   };
   const [foldedNotices, setFoldedNotices] = useState44([]);
+  const microphoneTarget = mediaToggleTarget(media.local.microphone.state, connection.status === "live");
+  const cameraTarget = mediaToggleTarget(media.local.camera.state, connection.status === "live");
   const folded = toasts.filter((toast) => foldedNotices.includes(toast.id));
   return /* @__PURE__ */ jsx69(ParticipantVolumeProvider, { children: /* @__PURE__ */ jsx69(BoardToastContext2.Provider, { value: showBoardToast, children: /* @__PURE__ */ jsx69(
     SpacePresentation,
@@ -8617,8 +8664,8 @@ function SpaceView({
         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"), "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,
+          onToggleMute: microphoneTarget === void 0 ? void 0 : () => void runCommand(() => client.media.setMicrophoneEnabled(microphoneTarget), "microphone", microphoneTarget ? "start" : "stop"),
+          onToggleVideo: cameraTarget === void 0 ? void 0 : () => void runCommand(() => client.media.setCameraEnabled(cameraTarget), "camera", cameraTarget ? "start" : "stop"),
           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,

package/dist/components/control-bar/control-bar-behavior.d.ts

@@ -34,9 +34,11 @@ export interface ControlBarSurfaceProps {
     knockCount?: number;
     isMuted?: boolean;
     microphonePending?: boolean;
+    onCancelMicrophonePending?: () => void;
     mediaEnableDisabled?: boolean;
     reactionsDisabled?: boolean;
     cameraPending?: boolean;
+    onCancelCameraPending?: () => void;
     isVideoEnabled?: boolean;
     isScreenSharing?: boolean;
     isRecording?: boolean;
@@ -126,6 +128,7 @@ export declare function useControlBarSurfaceBehavior({ density, buttons, audioIn
 interface ConnectedControlBarBehavior {
     readonly surfaceProps: ControlBarSurfaceProps;
     readonly commandError: ClientFailure | null;
+    readonly mediaNotice?: string;
     readonly commandSource?: MediaCommandSource;
     readonly commandAction?: MediaCommandAction;
 }

package/dist/components/control-bar/media-toggle.d.ts

@@ -0,0 +1,2 @@
+import type { LocalMedia } from "@q9labsai/chalk-client";
+export declare function mediaToggleTarget(state: LocalMedia["state"], live: boolean): boolean | undefined;

package/dist/components/device-popover/DevicePopover.d.ts

@@ -25,8 +25,9 @@ export interface DevicePopoverProps {
     disabled?: boolean;
     toggleDisabled?: boolean;
     busy?: boolean;
+    onCancelPending?: () => void;
     haptic?: HapticInput | false;
     size?: "sm" | "md" | "lg";
     appearance?: "default" | "floating";
 }
-export declare function DevicePopover({ type, isActive, onToggle, devices, selectedDeviceId, onDeviceChange, secondaryDevices, selectedSecondaryDeviceId, onSecondaryDeviceChange, track, captureCameraPreview, warning, speakingWhileMuted, noiseSuppression, onNoiseSuppressionChange, mirrored, onMirrorChange, onTestSpeaker, orientation, className, disabled, toggleDisabled, busy, }: DevicePopoverProps): import("react").JSX.Element;
+export declare function DevicePopover({ type, isActive, onToggle, devices, selectedDeviceId, onDeviceChange, secondaryDevices, selectedSecondaryDeviceId, onSecondaryDeviceChange, track, captureCameraPreview, warning, speakingWhileMuted, noiseSuppression, onNoiseSuppressionChange, mirrored, onMirrorChange, onTestSpeaker, orientation, className, disabled, toggleDisabled, busy, onCancelPending, }: DevicePopoverProps): import("react").JSX.Element;

package/dist/components/index.js

@@ -5,7 +5,7 @@ import {
   RecordingHistoryPanel,
   RecordingSpaceView,
   RecordingWhiteboardView
-} from "../chunk-IZ44PX4W.js";
+} from "../chunk-6AUMKXPU.js";
 import {
   loadRecordingWhiteboardFiles,
   parseRecordingWhiteboardStateV1,
@@ -47,7 +47,7 @@ import {
   ReactionsOverlay,
   ScreenShareView,
   Stage
-} from "../chunk-34SIWIY5.js";
+} from "../chunk-WRKIKIXF.js";
 import {
   buildStageItems
 } from "../chunk-HWQLW4JR.js";

package/dist/index.js

@@ -5,7 +5,7 @@ import {
   RecordingHistoryPanel,
   RecordingSpaceView,
   RecordingWhiteboardView
-} from "./chunk-IZ44PX4W.js";
+} from "./chunk-6AUMKXPU.js";
 import {
   loadRecordingWhiteboardFiles,
   parseRecordingWhiteboardStateV1,
@@ -59,7 +59,7 @@ import {
   useSelf,
   useSpaceClient,
   useWhiteboard
-} from "./chunk-34SIWIY5.js";
+} from "./chunk-WRKIKIXF.js";
 import "./chunk-HWQLW4JR.js";
 import "./chunk-4U7QZC72.js";
 

package/dist/test-support/index.js

@@ -6,7 +6,7 @@ import {
   SpaceView,
   ToastStack,
   WhiteboardView
-} from "../chunk-34SIWIY5.js";
+} from "../chunk-WRKIKIXF.js";
 import "../chunk-HWQLW4JR.js";
 import "../chunk-4U7QZC72.js";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q9labsai/chalk-react",
-  "version": "5.2.3",
+  "version": "5.2.5",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -75,10 +75,10 @@
     "@base-ui/react": "^1.7.0",
     "@hugeicons/core-free-icons": "^4.2.3",
     "@hugeicons/react": "^1.1.9",
-    "@q9labsai/chalk-client": "^5.2.3",
-    "@q9labsai/chalk-ui": "^5.2.3",
-    "@q9labsai/chalk-whiteboard": "^5.2.3",
-    "@q9labsai/facehash": "^5.2.3",
+    "@q9labsai/chalk-client": "^5.2.5",
+    "@q9labsai/chalk-ui": "^5.2.5",
+    "@q9labsai/chalk-whiteboard": "^5.2.5",
+    "@q9labsai/facehash": "^5.2.5",
     "@q9labsai/recording-presentation": "^0.1.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -99,7 +99,7 @@
   },
   "peerDependenciesMeta": {},
   "scripts": {
-    "test": "pnpm exec vitest run",
+    "test": "node ../../../scripts/test/run.mjs pnpm exec vitest run",
     "build": "rm -rf ./dist && NODE_ENV=production tsup ./src/index.ts ./src/components/index.ts ./src/components/ui/index.ts ./src/utils/index.ts ./src/headless.ts ./src/test-support/index.ts --format esm --out-dir ./dist --platform browser --external react --external react-dom --external @base-ui/react --external @hugeicons/core-free-icons --external @hugeicons/react --external @q9labsai/chalk-client --external @q9labsai/recording-presentation --external @q9labsai/chalk-ui --external @q9labsai/chalk-ui/reactions --external @q9labsai/chalk-ui/assets --external @q9labsai/chalk-whiteboard --external @q9labsai/facehash --external @q9labsai/facehash/react --external class-variance-authority --external clsx --external tailwind-merge && pnpm run build:fix-use-client && pnpm run build:types",
     "build:fix-use-client": "node -e \"const fs=require('fs');const files=['./dist/index.js','./dist/components/index.js','./dist/components/ui/index.js','./dist/utils/index.js','./dist/test-support/index.js'];for(const f of files){if(!fs.existsSync(f))continue;let c=fs.readFileSync(f,'utf8');c=c.replace(/['\\\"]use client['\\\"];?\\n?/g,'');c='\\\"use client\\\";\\n'+c;fs.writeFileSync(f,c);}\"",
     "build:types": "rm -f tsconfig.tsbuildinfo && tsc --build tsconfig.json",