@q9labsai/chalk-react 4.1.2 → 4.1.4

package/dist/{chunk-FTWI75A2.js → chunk-DDIM65MJ.js}

@@ -8024,7 +8024,35 @@ ParticipantGrid.displayName = "ParticipantGrid";
 
 // src/components/chalk/Chalk.tsx
 import { createSpaceClient } from "@q9labsai/chalk-client";
-import { useCallback as useCallback21, useEffect as useEffect47, useMemo as useMemo38, useRef as useRef34, useState as useState50 } from "react";
+import { useCallback as useCallback21, useEffect as useEffect48, useMemo as useMemo38, useRef as useRef34, useState as useState51 } from "react";
+
+// src/internal/useWhiteboardSceneSubscription.ts
+import { useEffect as useEffect30, useState as useState35 } from "react";
+var errorMessage = (cause) => cause instanceof Error ? cause : new Error("Whiteboard could not connect.");
+function useWhiteboardSceneSubscription(transport, active) {
+  const [subscription, setSubscription] = useState35({ status: "closed" });
+  useEffect30(() => {
+    if (!active || !transport) {
+      setSubscription({ status: "closed" });
+      return;
+    }
+    let disposed = false;
+    setSubscription({ status: "loading" });
+    void Promise.resolve().then(() => transport.startSceneSubscription()).then(
+      () => {
+        if (!disposed) setSubscription({ status: "ready", transport });
+      },
+      (cause) => {
+        if (!disposed) setSubscription({ status: "failed", error: errorMessage(cause) });
+      }
+    );
+    return () => {
+      disposed = true;
+      transport.stopSceneSubscription();
+    };
+  }, [active, transport]);
+  return subscription;
+}
 
 // src/whiteboard/wire-adapters.ts
 function fromWhiteboardWireElement(element) {
@@ -8121,7 +8149,7 @@ function MediaRequestDialog(props) {
 
 // src/components/composite/SettingsDialog.tsx
 import { Dialog as Dialog2 } from "@base-ui/react/dialog";
-import React47, { useCallback as useCallback12, useEffect as useEffect31, useMemo as useMemo30, useState as useState36 } from "react";
+import React47, { useCallback as useCallback12, useEffect as useEffect32, useMemo as useMemo30, useState as useState37 } from "react";
 
 // src/components/composite/BackgroundEffectsPicker.tsx
 import React45, { useMemo as useMemo28, useRef as useRef19 } from "react";
@@ -8300,7 +8328,7 @@ BackgroundEffectsPicker.displayName = "BackgroundEffectsPicker";
 
 // src/components/composite/ClassicSettingsDialog.tsx
 import { Dialog } from "@base-ui/react/dialog";
-import React46, { useCallback as useCallback11, useEffect as useEffect30, useMemo as useMemo29, useState as useState35 } from "react";
+import React46, { useCallback as useCallback11, useEffect as useEffect31, useMemo as useMemo29, useState as useState36 } from "react";
 import { IconButton as IconButton6, Input as Input2, Toggle as Toggle5 } from "@q9labsai/chalk-ui";
 import { jsx as jsx84, jsxs as jsxs71 } from "react/jsx-runtime";
 var EMPTY_DEVICE_GROUPS = {
@@ -8412,10 +8440,10 @@ var ClassicSettingsDialog = React46.memo(
     const resolvedTexture = settings.appearance.texture ?? "none";
     const resolvedTheme = getThemeMode(resolvedPalette);
     const usesDarkPalette = isDarkMode || isDarkThemePalette(resolvedPalette);
-    const [activeSection, setActiveSection] = useState35(initialSection);
-    const [isNavOpen, setIsNavOpen] = useState35(true);
-    const [searchQuery, setSearchQuery] = useState35("");
-    const [detectedDevices, setDetectedDevices] = useState35(EMPTY_DEVICE_GROUPS);
+    const [activeSection, setActiveSection] = useState36(initialSection);
+    const [isNavOpen, setIsNavOpen] = useState36(true);
+    const [searchQuery, setSearchQuery] = useState36("");
+    const [detectedDevices, setDetectedDevices] = useState36(EMPTY_DEVICE_GROUPS);
     const effectiveParticipantSeed = useMemo29(() => participantColorSeed?.trim() || settings.identity.displayName.trim() || "You", [participantColorSeed, settings.identity.displayName]);
     const autoProfileColors = useMemo29(() => getParticipantColor(effectiveParticipantSeed), [effectiveParticipantSeed]);
     const profileGradient = settings.appearance.profileGradient;
@@ -8452,17 +8480,17 @@ var ClassicSettingsDialog = React46.memo(
         return section.label.toLowerCase().includes(query) || section.description.toLowerCase().includes(query) || section.keywords.some((keyword) => keyword.includes(query));
       });
     }, [searchQuery]);
-    useEffect30(() => {
+    useEffect31(() => {
       if (!filteredSections.some((section) => section.id === activeSection)) {
         setActiveSection(filteredSections[0]?.id ?? "audio");
       }
     }, [activeSection, filteredSections]);
-    useEffect30(() => {
+    useEffect31(() => {
       if (isOpen) {
         setIsNavOpen(true);
       }
     }, [isOpen]);
-    useEffect30(() => {
+    useEffect31(() => {
       if (!isOpen) {
         return;
       }
@@ -9059,10 +9087,10 @@ var ChalkSettingsDialog = React47.memo(
     const resolvedTexture = settings.appearance.texture ?? "none";
     const resolvedTheme = getThemeMode(resolvedPalette);
     const usesDarkPalette = isDarkMode || isDarkThemePalette(resolvedPalette);
-    const [activeSection, setActiveSection] = useState36(initialSection);
-    const [isNavOpen, setIsNavOpen] = useState36(true);
-    const [searchQuery, setSearchQuery] = useState36("");
-    const [detectedDevices, setDetectedDevices] = useState36(EMPTY_DEVICE_GROUPS2);
+    const [activeSection, setActiveSection] = useState37(initialSection);
+    const [isNavOpen, setIsNavOpen] = useState37(true);
+    const [searchQuery, setSearchQuery] = useState37("");
+    const [detectedDevices, setDetectedDevices] = useState37(EMPTY_DEVICE_GROUPS2);
     const effectiveParticipantSeed = useMemo30(() => participantColorSeed?.trim() || settings.identity.displayName.trim() || "You", [participantColorSeed, settings.identity.displayName]);
     const autoProfileColors = useMemo30(() => getParticipantColor(effectiveParticipantSeed), [effectiveParticipantSeed]);
     const profileGradient = settings.appearance.profileGradient;
@@ -9099,17 +9127,17 @@ var ChalkSettingsDialog = React47.memo(
         return section.label.toLowerCase().includes(query) || section.description.toLowerCase().includes(query) || section.keywords.some((keyword) => keyword.includes(query));
       });
     }, [searchQuery]);
-    useEffect31(() => {
+    useEffect32(() => {
       if (!filteredSections.some((section) => section.id === activeSection)) {
         setActiveSection(filteredSections[0]?.id ?? "audio");
       }
     }, [activeSection, filteredSections]);
-    useEffect31(() => {
+    useEffect32(() => {
       if (isOpen) {
         setIsNavOpen(true);
       }
     }, [isOpen]);
-    useEffect31(() => {
+    useEffect32(() => {
       if (!isOpen) {
         return;
       }
@@ -9617,7 +9645,7 @@ var SettingsDialog = React47.memo((props) => {
   const skin = props.settings.appearance.skin ?? inheritedSkin;
   const previousSkin = React47.useRef(skin);
   const switchedSkinWhileOpen = props.isOpen && previousSkin.current !== skin;
-  useEffect31(() => {
+  useEffect32(() => {
     previousSkin.current = skin;
   }, [skin]);
   const rendererProps = switchedSkinWhileOpen ? { ...props, initialSection: "appearance" } : props;
@@ -9626,10 +9654,10 @@ var SettingsDialog = React47.memo((props) => {
 SettingsDialog.displayName = "SettingsDialog";
 
 // src/components/space-view/SpaceView.tsx
-import React66, { useCallback as useCallback20, useEffect as useEffect46, useMemo as useMemo37, useState as useState49 } from "react";
+import React66, { useCallback as useCallback20, useEffect as useEffect47, useMemo as useMemo37, useState as useState50 } from "react";
 
 // src/internal/useSoundCues.ts
-import { useEffect as useEffect32, useRef as useRef20 } from "react";
+import { useEffect as useEffect33, useRef as useRef20 } from "react";
 
 // src/internal/sound-cues.ts
 import { CHALK_SOUND_ASSETS } from "@q9labsai/chalk-ui/assets";
@@ -9661,15 +9689,64 @@ function diffSoundCues(previous, next) {
   }
   return cues;
 }
+var AUTOPLAY_UNLOCK_EVENTS = ["pointerdown", "touchend", "click", "keydown"];
+function isAutoplayBlocked(cause) {
+  return typeof DOMException !== "undefined" && cause instanceof DOMException && cause.name === "NotAllowedError";
+}
+function supportsSinkSelection(element) {
+  return "setSinkId" in element && typeof element.setSinkId === "function";
+}
 function soundSourceFor(cue, canPlay) {
   const asset = CHALK_SOUND_ASSETS[cue];
   return canPlay(asset.opus.mimeType) ? asset.opus.url : asset.mp3.url;
 }
-function createSoundPlayer({ volume = 0.6, onError } = {}) {
+function createSoundPlayer({ volume = 0.6, outputDeviceId, onError, unlockTarget = typeof window === "undefined" ? null : window } = {}) {
   const elements = /* @__PURE__ */ new Map();
   const lastPlayed = /* @__PURE__ */ new Map();
+  const blocked = /* @__PURE__ */ new Set();
+  const playbackInFlight = /* @__PURE__ */ new Set();
   const probe = typeof Audio === "undefined" ? null : new Audio();
   const canPlay = (mimeType) => probe !== null && probe.canPlayType(mimeType) !== "";
+  let listeningForUnlock = false;
+  const removeUnlockListeners = () => {
+    if (!unlockTarget || !listeningForUnlock) return;
+    for (const event of AUTOPLAY_UNLOCK_EVENTS) unlockTarget.removeEventListener(event, retryBlocked, true);
+    listeningForUnlock = false;
+  };
+  const addUnlockListeners = () => {
+    if (!unlockTarget || listeningForUnlock) return;
+    for (const event of AUTOPLAY_UNLOCK_EVENTS) unlockTarget.addEventListener(event, retryBlocked, { capture: true, passive: true });
+    listeningForUnlock = true;
+  };
+  const reportPlaybackFailure = (cue, cause) => {
+    if (isAutoplayBlocked(cause)) {
+      blocked.add(cue);
+      addUnlockListeners();
+    }
+    onError?.(cue, cause);
+  };
+  const playElement = (cue, element) => {
+    if (playbackInFlight.has(cue)) return;
+    playbackInFlight.add(cue);
+    element.currentTime = 0;
+    element.play().then(
+      () => {
+        playbackInFlight.delete(cue);
+        blocked.delete(cue);
+        if (blocked.size === 0) removeUnlockListeners();
+      },
+      (cause) => {
+        playbackInFlight.delete(cue);
+        reportPlaybackFailure(cue, cause);
+      }
+    );
+  };
+  function retryBlocked() {
+    for (const cue of blocked) {
+      const element = elements.get(cue);
+      if (element) playElement(cue, element);
+    }
+  }
   return {
     play: (cue) => {
       if (probe === null) return;
@@ -9681,12 +9758,15 @@ function createSoundPlayer({ volume = 0.6, onError } = {}) {
         element = new Audio(soundSourceFor(cue, canPlay));
         element.preload = "auto";
         element.volume = volume;
+        if (outputDeviceId && supportsSinkSelection(element) && element.sinkId !== outputDeviceId) void element.setSinkId(outputDeviceId).catch(() => void 0);
         elements.set(cue, element);
       }
-      element.currentTime = 0;
-      element.play().catch((cause) => onError?.(cue, cause));
+      playElement(cue, element);
     },
     dispose: () => {
+      removeUnlockListeners();
+      blocked.clear();
+      playbackInFlight.clear();
       for (const element of elements.values()) {
         element.pause();
         element.removeAttribute("src");
@@ -9697,13 +9777,14 @@ function createSoundPlayer({ volume = 0.6, onError } = {}) {
 }
 
 // src/internal/useSoundCues.ts
-function useSoundCues(enabled, createPlayer = () => createSoundPlayer()) {
+function useSoundCues(enabled, createPlayer = createSoundPlayer) {
   const client = useSpaceClient();
+  const outputDeviceId = useMedia().selection.speaker ?? void 0;
   const createPlayerRef = useRef20(createPlayer);
   createPlayerRef.current = createPlayer;
-  useEffect32(() => {
+  useEffect33(() => {
     if (!enabled) return;
-    const player = createPlayerRef.current();
+    const player = createPlayerRef.current({ outputDeviceId });
     let previous = client.getSnapshot();
     const unsubscribe = client.subscribe(() => {
       const next = client.getSnapshot();
@@ -9714,29 +9795,29 @@ function useSoundCues(enabled, createPlayer = () => createSoundPlayer()) {
       unsubscribe();
       player.dispose();
     };
-  }, [client, enabled]);
+  }, [client, enabled, outputDeviceId]);
 }
 
 // src/components/composite/ReactionPicker.tsx
-import React50, { useMemo as useMemo32, useState as useState38, useCallback as useCallback15, useEffect as useEffect35, useRef as useRef23 } from "react";
+import React50, { useMemo as useMemo32, useState as useState39, useCallback as useCallback15, useEffect as useEffect36, useRef as useRef23 } from "react";
 import { DEFAULT_QUICK_REACTIONS as DEFAULT_QUICK_REACTIONS2, EMOJI_CATEGORIES as EMOJI_CATEGORIES2, EMOJI_KEYWORDS as EMOJI_KEYWORDS2 } from "@q9labsai/chalk-ui/reactions";
 
 // src/components/composite/ClassicReactionPicker.tsx
-import React49, { useMemo as useMemo31, useState as useState37, useCallback as useCallback14, useEffect as useEffect34, useRef as useRef22 } from "react";
+import React49, { useMemo as useMemo31, useState as useState38, useCallback as useCallback14, useEffect as useEffect35, useRef as useRef22 } from "react";
 import { DEFAULT_QUICK_REACTIONS, EMOJI_CATEGORIES, EMOJI_KEYWORDS } from "@q9labsai/chalk-ui/reactions";
 
 // src/components/composite/ReactionTray.tsx
-import { useCallback as useCallback13, useEffect as useEffect33, useRef as useRef21 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect34, useRef as useRef21 } from "react";
 import { Fragment as Fragment17, jsx as jsx86, jsxs as jsxs73 } from "react/jsx-runtime";
 function ReactionTray({ reactions, onSelect, onClose, position = "top", className }) {
   const skin = useSkin();
   const prefersReducedMotion = usePrefersReducedMotion2();
   const { trigger } = useHaptics();
   const listRef = useRef21(null);
-  useEffect33(() => {
+  useEffect34(() => {
     listRef.current?.querySelector("button")?.focus();
   }, []);
-  useEffect33(() => {
+  useEffect34(() => {
     const handleKeyDown2 = (event) => {
       if (event.key === "Escape") onClose();
     };
@@ -9787,11 +9868,11 @@ import { Fragment as Fragment18, jsx as jsx87, jsxs as jsxs74 } from "react/jsx-
 var ClassicReactionPicker = React49.memo(({ isOpen, onClose, onSelect, recentReactions = [], allowedReactions, position = "top", participantColorSeed, participantGradientPreference, className, size = "default" }) => {
   const prefersReducedMotion = usePrefersReducedMotion2();
   const { trigger } = useHaptics();
-  const [activeCategory, setActiveCategory] = useState37("smileys");
-  const [searchQuery, setSearchQuery] = useState37("");
+  const [activeCategory, setActiveCategory] = useState38("smileys");
+  const [searchQuery, setSearchQuery] = useState38("");
   const inputRef = useRef22(null);
   const themeVariables = useMemo31(() => getParticipantThemeVariables(participantColorSeed, participantGradientPreference), [participantColorSeed, participantGradientPreference]);
-  useEffect34(() => {
+  useEffect35(() => {
     if (isOpen) {
       setTimeout(() => inputRef.current?.focus(), 50);
       setSearchQuery("");
@@ -9806,7 +9887,7 @@ var ClassicReactionPicker = React49.memo(({ isOpen, onClose, onSelect, recentRea
     },
     [onClose, onSelect, trigger]
   );
-  useEffect34(() => {
+  useEffect35(() => {
     if (!isOpen || typeof window === "undefined") return;
     const handleKeyDown = (e) => {
       if (e.key === "Escape") onClose();
@@ -9947,11 +10028,11 @@ import { Fragment as Fragment19, jsx as jsx88, jsxs as jsxs75 } from "react/jsx-
 var ChalkReactionPicker = React50.memo(({ isOpen, onClose, onSelect, recentReactions = [], allowedReactions, position = "top", participantColorSeed, participantGradientPreference, className, size = "default" }) => {
   const prefersReducedMotion = usePrefersReducedMotion2();
   const { trigger } = useHaptics();
-  const [activeCategory, setActiveCategory] = useState38("smileys");
-  const [searchQuery, setSearchQuery] = useState38("");
+  const [activeCategory, setActiveCategory] = useState39("smileys");
+  const [searchQuery, setSearchQuery] = useState39("");
   const inputRef = useRef23(null);
   const themeVariables = useMemo32(() => getParticipantThemeVariables(participantColorSeed, participantGradientPreference), [participantColorSeed, participantGradientPreference]);
-  useEffect35(() => {
+  useEffect36(() => {
     if (isOpen) {
       setTimeout(() => inputRef.current?.focus(), 50);
       setSearchQuery("");
@@ -9966,7 +10047,7 @@ var ChalkReactionPicker = React50.memo(({ isOpen, onClose, onSelect, recentReact
     },
     [onClose, onSelect, trigger]
   );
-  useEffect35(() => {
+  useEffect36(() => {
     if (!isOpen || typeof window === "undefined") return;
     const handleKeyDown = (e) => {
       if (e.key === "Escape") onClose();
@@ -10092,10 +10173,10 @@ var ReactionPicker = React50.memo((props) => {
 ReactionPicker.displayName = "ReactionPicker";
 
 // src/components/invite-dialog/InviteDialog.tsx
-import React52, { useEffect as useEffect37, useRef as useRef25, useState as useState40 } from "react";
+import React52, { useEffect as useEffect38, useRef as useRef25, useState as useState41 } from "react";
 
 // src/components/invite-dialog/ClassicInviteDialog.tsx
-import React51, { useEffect as useEffect36, useRef as useRef24, useState as useState39 } from "react";
+import React51, { useEffect as useEffect37, useRef as useRef24, useState as useState40 } from "react";
 import { Input as Input3 } from "@q9labsai/chalk-ui";
 import { jsx as jsx89, jsxs as jsxs76 } from "react/jsx-runtime";
 var ClassicInviteDialog = React51.memo(({ isOpen, onClose, inviteLink, spaceId, onCopyLink, onShareEmail, onShareCalendar, className }) => {
@@ -10103,8 +10184,8 @@ var ClassicInviteDialog = React51.memo(({ isOpen, onClose, inviteLink, spaceId,
   const prefersReducedMotion = usePrefersReducedMotion2();
   const modalRef = useRef24(null);
   const copyResetTimeoutRef = useRef24(null);
-  const [isCopyFeedbackVisible, setIsCopyFeedbackVisible] = useState39(false);
-  useEffect36(() => {
+  const [isCopyFeedbackVisible, setIsCopyFeedbackVisible] = useState40(false);
+  useEffect37(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape" && isOpen) {
         onClose();
@@ -10113,7 +10194,7 @@ var ClassicInviteDialog = React51.memo(({ isOpen, onClose, inviteLink, spaceId,
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
   }, [isOpen, onClose]);
-  useEffect36(() => {
+  useEffect37(() => {
     return () => {
       if (copyResetTimeoutRef.current) {
         window.clearTimeout(copyResetTimeoutRef.current);
@@ -10218,8 +10299,8 @@ var ChalkInviteDialog = React52.memo(({ isOpen, onClose, inviteLink, spaceId, on
   const prefersReducedMotion = usePrefersReducedMotion2();
   const modalRef = useRef25(null);
   const copyResetTimeoutRef = useRef25(null);
-  const [isCopyFeedbackVisible, setIsCopyFeedbackVisible] = useState40(false);
-  useEffect37(() => {
+  const [isCopyFeedbackVisible, setIsCopyFeedbackVisible] = useState41(false);
+  useEffect38(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape" && isOpen) {
         onClose();
@@ -10228,7 +10309,7 @@ var ChalkInviteDialog = React52.memo(({ isOpen, onClose, inviteLink, spaceId, on
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
   }, [isOpen, onClose]);
-  useEffect37(() => {
+  useEffect38(() => {
     return () => {
       if (copyResetTimeoutRef.current) {
         window.clearTimeout(copyResetTimeoutRef.current);
@@ -10339,21 +10420,21 @@ var InviteDialog = React52.memo((props) => {
 InviteDialog.displayName = "InviteDialog";
 
 // src/components/leave-dialog/LeaveDialog.tsx
-import React54, { useEffect as useEffect39, useRef as useRef27, useState as useState42 } from "react";
+import React54, { useEffect as useEffect40, useRef as useRef27, useState as useState43 } from "react";
 
 // src/components/leave-dialog/ClassicLeaveDialog.tsx
-import React53, { useEffect as useEffect38, useRef as useRef26, useState as useState41 } from "react";
+import React53, { useEffect as useEffect39, useRef as useRef26, useState as useState42 } from "react";
 import { jsx as jsx91, jsxs as jsxs78 } from "react/jsx-runtime";
 var ClassicLeaveDialog = React53.memo(({ isOpen, onClose, onConfirm, onEndEpisode, palette, texture = "none", className }) => {
   const skin = useSkin();
   const prefersReducedMotion = usePrefersReducedMotion2();
   const portalTheme = resolvePortalThemeFromDocument();
   const modalRef = useRef26(null);
-  const [confirmingEndEpisode, setConfirmingEndEpisode] = useState41(false);
-  useEffect38(() => {
+  const [confirmingEndEpisode, setConfirmingEndEpisode] = useState42(false);
+  useEffect39(() => {
     if (!isOpen) setConfirmingEndEpisode(false);
   }, [isOpen]);
-  useEffect38(() => {
+  useEffect39(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape" && isOpen) {
         onClose();
@@ -10447,11 +10528,11 @@ var ChalkLeaveDialog = React54.memo(({ isOpen, onClose, onConfirm, onEndEpisode,
   const prefersReducedMotion = usePrefersReducedMotion2();
   const portalTheme = resolvePortalThemeFromDocument();
   const modalRef = useRef27(null);
-  const [confirmingEndEpisode, setConfirmingEndEpisode] = useState42(false);
-  useEffect39(() => {
+  const [confirmingEndEpisode, setConfirmingEndEpisode] = useState43(false);
+  useEffect40(() => {
     if (!isOpen) setConfirmingEndEpisode(false);
   }, [isOpen]);
-  useEffect39(() => {
+  useEffect40(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape" && isOpen) {
         onClose();
@@ -10725,10 +10806,10 @@ var SpaceHeader = React59.memo((props) => {
 SpaceHeader.displayName = "SpaceHeader";
 
 // src/components/space-info-dialog/SpaceInfoDialog.tsx
-import React61, { useState as useState44 } from "react";
+import React61, { useState as useState45 } from "react";
 
 // src/components/space-info-dialog/ClassicSpaceInfoDialog.tsx
-import React60, { useState as useState43 } from "react";
+import React60, { useState as useState44 } from "react";
 import { jsx as jsx98, jsxs as jsxs85 } from "react/jsx-runtime";
 var formatDuration4 = (seconds) => {
   const hours = Math.floor(seconds / 3600);
@@ -10739,7 +10820,7 @@ var formatDuration4 = (seconds) => {
 var ClassicSpaceInfoDialog = React60.memo(
   ({ isOpen, onClose, spaceName, spaceId, inviteLink, onCopyLink, isRecording = false, isTranscribing = false, duration = 0, stats = { latency: 28, packetLoss: 0.1, resolution: "1080p \xB7 60fps", region: "Frankfurt, DE" }, className }) => {
     const skin = useSkin();
-    const [copied, setCopied] = useState43(false);
+    const [copied, setCopied] = useState44(false);
     const handleCopy = () => {
       onCopyLink();
       setCopied(true);
@@ -10840,7 +10921,7 @@ var formatDuration5 = (seconds) => {
 };
 var ChalkSpaceInfoDialog = React61.memo(({ isOpen, onClose, spaceName, spaceId, inviteLink, onCopyLink, isRecording = false, isTranscribing = false, duration = 0, stats = { latency: 28, packetLoss: 0.1, resolution: "1080p \xB7 60fps", region: "Frankfurt, DE" }, className }) => {
   const skin = useSkin();
-  const [copied, setCopied] = useState44(false);
+  const [copied, setCopied] = useState45(false);
   const handleCopy = () => {
     onCopyLink();
     setCopied(true);
@@ -10925,10 +11006,10 @@ var SpaceInfoDialog = React61.memo((props) => {
 SpaceInfoDialog.displayName = "SpaceInfoDialog";
 
 // src/components/transcript-panel/TranscriptPanel.tsx
-import React63, { useMemo as useMemo34, useRef as useRef31, useEffect as useEffect41, useState as useState46, useCallback as useCallback17 } from "react";
+import React63, { useMemo as useMemo34, useRef as useRef31, useEffect as useEffect42, useState as useState47, useCallback as useCallback17 } from "react";
 
 // src/components/transcript-panel/ClassicTranscriptPanel.tsx
-import React62, { useMemo as useMemo33, useRef as useRef30, useEffect as useEffect40, useState as useState45, useCallback as useCallback16 } from "react";
+import React62, { useMemo as useMemo33, useRef as useRef30, useEffect as useEffect41, useState as useState46, useCallback as useCallback16 } from "react";
 import { IconButton as IconButton7, Input as Input4 } from "@q9labsai/chalk-ui";
 import { Fragment as Fragment20, jsx as jsx100, jsxs as jsxs87 } from "react/jsx-runtime";
 function groupTranscriptsBySpeaker(transcripts) {
@@ -10961,9 +11042,9 @@ function findSearchMatches(transcripts, query) {
   return matches;
 }
 function ExportDropdown({ onExport, onCopyAll }) {
-  const [isOpen, setIsOpen] = useState45(false);
+  const [isOpen, setIsOpen] = useState46(false);
   const dropdownRef = useRef30(null);
-  useEffect40(() => {
+  useEffect41(() => {
     function handleClickOutside(event) {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -11060,9 +11141,9 @@ var TranscriptPanelSurface = React62.memo(
     className
   }) => {
     const prefersReducedMotion = usePrefersReducedMotion2();
-    const [searchQuery, setSearchQuery] = useState45("");
-    const [currentMatchIndex, setCurrentMatchIndex] = useState45(0);
-    const [autoScroll, setAutoScroll] = useState45(true);
+    const [searchQuery, setSearchQuery] = useState46("");
+    const [currentMatchIndex, setCurrentMatchIndex] = useState46(0);
+    const [autoScroll, setAutoScroll] = useState46(true);
     const containerRef = useRef30(null);
     const endRef = useRef30(null);
     const searchInputRef = useRef30(null);
@@ -11089,18 +11170,18 @@ var TranscriptPanelSurface = React62.memo(
         entries: group.entries.filter((e) => matchedIds.has(e.id))
       })).filter((group) => group.entries.length > 0);
     }, [groupedTranscripts, searchQuery, searchMatches]);
-    useEffect40(() => {
+    useEffect41(() => {
       if (autoScroll && endRef.current && !searchQuery) {
         endRef.current.scrollIntoView({ behavior: prefersReducedMotion ? "auto" : "smooth" });
       }
     }, [transcripts, autoScroll, prefersReducedMotion, searchQuery]);
-    useEffect40(() => {
+    useEffect41(() => {
       if (currentMatch && containerRef.current) {
         const matchElement = containerRef.current.querySelector(`[data-transcript-match="true"]`);
         matchElement?.scrollIntoView({ behavior: "smooth", block: "center" });
       }
     }, [currentMatch, currentMatchIndex]);
-    useEffect40(() => {
+    useEffect41(() => {
       function handleKeyDown(event) {
         if ((event.metaKey || event.ctrlKey) && event.key === "f" && searchable) {
           event.preventDefault();
@@ -11361,9 +11442,9 @@ function findSearchMatches2(transcripts, query) {
   return matches;
 }
 function ExportDropdown2({ onExport, onCopyAll }) {
-  const [isOpen, setIsOpen] = useState46(false);
+  const [isOpen, setIsOpen] = useState47(false);
   const dropdownRef = useRef31(null);
-  useEffect41(() => {
+  useEffect42(() => {
     function handleClickOutside(event) {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -11455,9 +11536,9 @@ var TranscriptPanelSurface2 = React63.memo(
     className
   }) => {
     const prefersReducedMotion = usePrefersReducedMotion2();
-    const [searchQuery, setSearchQuery] = useState46("");
-    const [currentMatchIndex, setCurrentMatchIndex] = useState46(0);
-    const [autoScroll, setAutoScroll] = useState46(true);
+    const [searchQuery, setSearchQuery] = useState47("");
+    const [currentMatchIndex, setCurrentMatchIndex] = useState47(0);
+    const [autoScroll, setAutoScroll] = useState47(true);
     const containerRef = useRef31(null);
     const endRef = useRef31(null);
     const searchInputRef = useRef31(null);
@@ -11484,18 +11565,18 @@ var TranscriptPanelSurface2 = React63.memo(
         entries: group.entries.filter((e) => matchedIds.has(e.id))
       })).filter((group) => group.entries.length > 0);
     }, [groupedTranscripts, searchQuery, searchMatches]);
-    useEffect41(() => {
+    useEffect42(() => {
       if (autoScroll && endRef.current && !searchQuery) {
         endRef.current.scrollIntoView({ behavior: prefersReducedMotion ? "auto" : "smooth" });
       }
     }, [transcripts, autoScroll, prefersReducedMotion, searchQuery]);
-    useEffect41(() => {
+    useEffect42(() => {
       if (currentMatch && containerRef.current) {
         const matchElement = containerRef.current.querySelector(`[data-transcript-match="true"]`);
         matchElement?.scrollIntoView({ behavior: "smooth", block: "center" });
       }
     }, [currentMatch, currentMatchIndex]);
-    useEffect41(() => {
+    useEffect42(() => {
       function handleKeyDown(event) {
         if ((event.metaKey || event.ctrlKey) && event.key === "f" && searchable) {
           event.preventDefault();
@@ -11718,23 +11799,23 @@ var TranscriptPanel = React63.memo((props) => {
 TranscriptPanel.displayName = "TranscriptPanel";
 
 // src/components/space-view/ClassicSpaceView.tsx
-import React65, { useCallback as useCallback19, useEffect as useEffect45, useMemo as useMemo36, useState as useState48 } from "react";
+import React65, { useCallback as useCallback19, useEffect as useEffect46, useMemo as useMemo36, useState as useState49 } from "react";
 
 // src/components/space-view/SpaceDrawer.tsx
-import { useEffect as useEffect42, useRef as useRef32 } from "react";
+import { useEffect as useEffect43, useRef as useRef32 } from "react";
 import { Fragment as Fragment22, jsx as jsx102, jsxs as jsxs89 } from "react/jsx-runtime";
 function SpaceDrawer({ state, onClose, children }) {
   const skin = useSkin();
   const drawerRef = useRef32(null);
   const openerRef = useRef32(null);
-  useEffect42(() => {
+  useEffect43(() => {
     if (state !== "open") return;
     const drawer = drawerRef.current;
     if (!drawer || drawer.contains(document.activeElement)) return;
     openerRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
     drawer.focus({ preventScroll: true });
   }, [state]);
-  useEffect42(() => {
+  useEffect43(() => {
     if (state !== "closing") return;
     const opener = openerRef.current;
     openerRef.current = null;
@@ -11810,12 +11891,12 @@ function SpaceStage({ tiles, layout, whiteboard, className }) {
 SpaceStage.displayName = "SpaceStage";
 
 // src/components/space-view/useDrawerPresence.ts
-import { useEffect as useEffect43, useState as useState47 } from "react";
+import { useEffect as useEffect44, useState as useState48 } from "react";
 var DRAWER_EXIT_MS = 200;
 function useDrawerPresence(panel, exitMs) {
-  const [retained, setRetained] = useState47(panel);
-  const [state, setState] = useState47(panel === null ? "closed" : "open");
-  useEffect43(() => {
+  const [retained, setRetained] = useState48(panel);
+  const [state, setState] = useState48(panel === null ? "closed" : "open");
+  useEffect44(() => {
     if (panel !== null) {
       setRetained(panel);
       setState("open");
@@ -11832,10 +11913,10 @@ function useDrawerPresence(panel, exitMs) {
 }
 
 // src/components/space-view/useContentLayoutSwitch.ts
-import { useEffect as useEffect44, useRef as useRef33 } from "react";
+import { useEffect as useEffect45, useRef as useRef33 } from "react";
 function useContentLayoutSwitch(hasContent, layout, updateLayout) {
   const memoryRef = useRef33({ hasContent: false, layoutBefore: null });
-  useEffect44(() => {
+  useEffect45(() => {
     const memory = memoryRef.current;
     if (hasContent === memory.hasContent) return;
     if (hasContent) {
@@ -11884,17 +11965,17 @@ function ClassicSpaceView({
   const canSendReaction = useCan("sendReaction");
   const canDrawWhiteboard = useCan("drawWhiteboard");
   const canManageAdmission = useCan("manageAdmission");
-  const [uncontrolledLayout, setUncontrolledLayout] = useState48("focus");
-  const [activePanel, setActivePanel] = useState48(initialPanel);
-  const [isReactionPickerOpen, setReactionPickerOpen] = useState48(false);
-  const [isLeaveDialogOpen, setLeaveDialogOpen] = useState48(false);
-  const [commandError, setCommandError] = useState48(null);
+  const [uncontrolledLayout, setUncontrolledLayout] = useState49("focus");
+  const [activePanel, setActivePanel] = useState49(initialPanel);
+  const [isReactionPickerOpen, setReactionPickerOpen] = useState49(false);
+  const [isLeaveDialogOpen, setLeaveDialogOpen] = useState49(false);
+  const [commandError, setCommandError] = useState49(null);
   const layout = controlledLayout ?? uncontrolledLayout;
   const feature = (name) => features?.[name] !== false;
   const localId = self.participantId ?? "local";
   const tiles = useMemo36(() => toVideoParticipants(participantsSlice.roster, media.remote, localId, self.displayName ?? "You", media.local), [localId, media.local, media.remote, participantsSlice.roster, self.displayName]);
-  useEffect45(() => setActivePanel(initialPanel), [initialPanel]);
-  useEffect45(() => {
+  useEffect46(() => setActivePanel(initialPanel), [initialPanel]);
+  useEffect46(() => {
     if (feature("admission") && canManageAdmission && participantsSlice.admissionQueue.length > 0) setActivePanel("admission");
   }, [canManageAdmission, participantsSlice.admissionQueue.length, features?.admission]);
   const buttons = [
@@ -11934,7 +12015,7 @@ function ClassicSpaceView({
       setActivePanel(null);
     }
   }) : settingsDialog;
-  useEffect45(() => {
+  useEffect46(() => {
     if (activePanel !== "settings" || !React65.isValidElement(settingsDialog) || settingsDialog.props.isOpen !== false) return;
     setActivePanel(null);
   }, [activePanel, settingsDialog]);
@@ -12107,17 +12188,17 @@ function ChalkSpaceView({
   const canSendReaction = useCan("sendReaction");
   const canDrawWhiteboard = useCan("drawWhiteboard");
   const canManageAdmission = useCan("manageAdmission");
-  const [uncontrolledLayout, setUncontrolledLayout] = useState49("focus");
-  const [activePanel, setActivePanel] = useState49(initialPanel);
-  const [isReactionPickerOpen, setReactionPickerOpen] = useState49(false);
-  const [isLeaveDialogOpen, setLeaveDialogOpen] = useState49(false);
-  const [commandError, setCommandError] = useState49(null);
+  const [uncontrolledLayout, setUncontrolledLayout] = useState50("focus");
+  const [activePanel, setActivePanel] = useState50(initialPanel);
+  const [isReactionPickerOpen, setReactionPickerOpen] = useState50(false);
+  const [isLeaveDialogOpen, setLeaveDialogOpen] = useState50(false);
+  const [commandError, setCommandError] = useState50(null);
   const layout = controlledLayout ?? uncontrolledLayout;
   const feature = (name) => features?.[name] !== false;
   const localId = self.participantId ?? "local";
   const tiles = useMemo37(() => toVideoParticipants(participantsSlice.roster, media.remote, localId, self.displayName ?? "You", media.local), [localId, media.local, media.remote, participantsSlice.roster, self.displayName]);
-  useEffect46(() => setActivePanel(initialPanel), [initialPanel]);
-  useEffect46(() => {
+  useEffect47(() => setActivePanel(initialPanel), [initialPanel]);
+  useEffect47(() => {
     if (feature("admission") && canManageAdmission && participantsSlice.admissionQueue.length > 0) setActivePanel("admission");
   }, [canManageAdmission, participantsSlice.admissionQueue.length, features?.admission]);
   const buttons = [
@@ -12157,7 +12238,7 @@ function ChalkSpaceView({
       setActivePanel(null);
     }
   }) : settingsDialog;
-  useEffect46(() => {
+  useEffect47(() => {
     if (activePanel !== "settings" || !React66.isValidElement(settingsDialog) || settingsDialog.props.isOpen !== false) return;
     setActivePanel(null);
   }, [activePanel, settingsDialog]);
@@ -12306,7 +12387,7 @@ function Chalk(props) {
     return createSpaceClient({ space: props.space, getAccess: getLatestAccess });
   }, [getLatestAccess, props.space, suppliedClient]);
   const client = suppliedClient ?? ownedClient;
-  useEffect47(() => {
+  useEffect48(() => {
     if (!ownedClient) return;
     return () => {
       void ownedClient.leave().catch(() => void 0).finally(() => ownedClient.dispose());
@@ -12322,7 +12403,7 @@ function SpaceExperience(props) {
   const hasBeenLive = useRef34(connection.status === "live" || connection.status === "reconnecting");
   const autoJoinAttempted = useRef34(false);
   const previousClient = useRef34(client);
-  const [joinError, setJoinError] = useState50(null);
+  const [joinError, setJoinError] = useState51(null);
   const entrance = props.entrance ?? true;
   const spaceName = props.spaceName ?? props.space ?? "Space";
   if (previousClient.current !== client) {
@@ -12348,13 +12429,13 @@ function SpaceExperience(props) {
     autoJoinAttempted.current = true;
     void join(defaultJoinOptions(props));
   }, [join, props]);
-  useEffect47(() => setJoinError(null), [client]);
-  useEffect47(() => {
+  useEffect48(() => setJoinError(null), [client]);
+  useEffect48(() => {
     if (entrance || connection.status !== "idle" || autoJoinAttempted.current) return;
     autoJoinAttempted.current = true;
     void join(defaultJoinOptions(props));
   }, [connection.status, entrance, join, props.defaults?.camera, props.defaults?.microphone, props.displayName]);
-  useEffect47(() => {
+  useEffect48(() => {
     const previous = previousStatus.current;
     if (hasObservedStatus.current) {
       if (connection.status === "live" && previous !== "live" && previous !== "reconnecting") props.onJoined?.();
@@ -12384,19 +12465,19 @@ function SpaceSurface(props) {
   const media = useMedia();
   const canEndEpisode = useCan("endEpisode");
   const canDrawWhiteboard = useCan("drawWhiteboard");
-  const [settingsOpen, setSettingsOpen] = useState50(false);
-  const [settingsInitialSection, setSettingsInitialSection] = useState50();
-  const [infoOpen, setInfoOpen] = useState50(false);
-  const [whiteboardOpen, setWhiteboardOpen] = useState50(false);
-  const [commandError, setCommandError] = useState50(null);
-  const [settings, setSettings] = useState50(() => createSettings(self.displayName ?? "", props.layout ?? "focus", props.theme?.skin ?? "classic", props.theme?.palette ?? (props.resolvedColorScheme === "dark" ? "warm-charcoal" : "light"), props.theme?.texture ?? "none"));
+  const [settingsOpen, setSettingsOpen] = useState51(false);
+  const [settingsInitialSection, setSettingsInitialSection] = useState51();
+  const [infoOpen, setInfoOpen] = useState51(false);
+  const [whiteboardOpen, setWhiteboardOpen] = useState51(false);
+  const [commandError, setCommandError] = useState51(null);
+  const [settings, setSettings] = useState51(() => createSettings(self.displayName ?? "", props.layout ?? "focus", props.theme?.skin ?? "classic", props.theme?.palette ?? (props.resolvedColorScheme === "dark" ? "warm-charcoal" : "light"), props.theme?.texture ?? "none"));
   const resolvedSkin = props.theme?.skin ?? "classic";
   const resolvedPalette = props.theme?.palette ?? (props.resolvedColorScheme === "dark" ? "warm-charcoal" : "light");
   const resolvedTexture = props.theme?.texture ?? "none";
   const appearancePaletteExplicitRef = useRef34(props.theme?.palette !== void 0);
   const settingsRef = useRef34(settings);
   settingsRef.current = settings;
-  useEffect47(() => {
+  useEffect48(() => {
     setSettings((current) => ({
       ...current,
       identity: { displayName: self.displayName ?? current.identity.displayName },
@@ -12405,7 +12486,7 @@ function SpaceSurface(props) {
       video: { ...current.video, selectedInput: media.selection.camera ?? void 0 }
     }));
   }, [media.local.camera.state, media.local.microphone.state, media.selection.camera, media.selection.microphone, media.selection.speaker, self.displayName]);
-  useEffect47(() => {
+  useEffect48(() => {
     if (!props.theme?.skin && !props.theme?.palette && !props.theme?.texture) return;
     setSettings((current) => ({
       ...current,
@@ -12418,7 +12499,7 @@ function SpaceSurface(props) {
       }
     }));
   }, [props.theme?.palette, props.theme?.skin, props.theme?.texture]);
-  useEffect47(() => {
+  useEffect48(() => {
     if (props.theme?.palette || appearancePaletteExplicitRef.current) return;
     const palette = props.resolvedColorScheme === "dark" ? "warm-charcoal" : "light";
     setSettings((current) => current.appearance.palette === palette ? current : { ...current, appearance: { ...current.appearance, palette, theme: palette === "light" ? "light" : "dark" } });
@@ -12432,20 +12513,27 @@ function SpaceSurface(props) {
     }
   }, []);
   const whiteboardTransport = client.whiteboard.transport();
-  const whiteboard = props.features?.whiteboard !== false && whiteboardOpen && canDrawWhiteboard && whiteboardTransport ? {
+  const whiteboardEnabled = props.features?.whiteboard !== false && whiteboardOpen && canDrawWhiteboard;
+  const whiteboardSubscription = useWhiteboardSceneSubscription(whiteboardTransport, whiteboardEnabled);
+  useEffect48(() => {
+    if (whiteboardSubscription.status === "failed") setCommandError(whiteboardSubscription.error.message);
+    else if (whiteboardSubscription.status === "loading" || whiteboardSubscription.status === "ready") setCommandError(null);
+  }, [whiteboardSubscription]);
+  const whiteboard = whiteboardEnabled && whiteboardSubscription.status === "ready" ? {
     isOpen: true,
     props: {
       canDraw: canDrawWhiteboard,
       collab: {
         canDraw: canDrawWhiteboard,
-        subscribe: (listener) => whiteboardTransport.subscribe((event) => listener(toWhiteboardCollaborationEvent(event))),
-        submitUpdate: async (input) => whiteboardTransport.submitUpdate({ sceneId: input.sceneId, syncAll: input.syncAll, elements: input.elements.map(fromWhiteboardWireElement) }),
-        sendCursor: (input) => whiteboardTransport.sendCursor(input),
-        requestSnapshot: () => whiteboardTransport.requestSnapshot(),
-        clear: () => whiteboardTransport.clear(),
-        initiateUpload: (input) => whiteboardTransport.files.initiateUpload(input),
-        finalizeUpload: (uploadId) => whiteboardTransport.files.finalizeUpload(uploadId),
-        presignDownload: (fileId) => whiteboardTransport.files.getDownloadUrl(fileId)
+        subscribe: (listener) => whiteboardSubscription.transport.subscribe((event) => listener(toWhiteboardCollaborationEvent(event))),
+        submitUpdate: async (input) => whiteboardSubscription.transport.submitUpdate({ sceneId: input.sceneId, syncAll: input.syncAll, elements: input.elements.map(fromWhiteboardWireElement) }),
+        sendCursor: (input) => whiteboardSubscription.transport.sendCursor(input),
+        requestSnapshot: () => whiteboardSubscription.transport.requestSnapshot(),
+        onSubmissionError: (cause) => setCommandError(cause instanceof Error ? cause.message : "Whiteboard could not sync."),
+        clear: () => whiteboardSubscription.transport.clear(),
+        initiateUpload: (input) => whiteboardSubscription.transport.files.initiateUpload(input),
+        finalizeUpload: (uploadId) => whiteboardSubscription.transport.files.finalizeUpload(uploadId),
+        presignDownload: (fileId) => whiteboardSubscription.transport.files.getDownloadUrl(fileId)
       }
     }
   } : void 0;
@@ -12541,8 +12629,8 @@ function defaultJoinOptions(props) {
   return { ...displayName ? { displayName } : {}, microphone: props.defaults?.microphone ?? true, camera: props.defaults?.camera ?? true };
 }
 function useResolvedColorScheme(requested = "light") {
-  const [resolved, setResolved] = useState50(() => requested === "system" ? readSystemColorScheme() : requested);
-  useEffect47(() => {
+  const [resolved, setResolved] = useState51(() => requested === "system" ? readSystemColorScheme() : requested);
+  useEffect48(() => {
     if (requested !== "system") return void setResolved(requested);
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return void setResolved("light");
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
@@ -12557,12 +12645,12 @@ function readSystemColorScheme() {
   return typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
 function useClientEvents(client, callbacks) {
-  useEffect47(() => client.on("participantJoined", (event) => callbacks.onParticipantJoined?.(event)), [callbacks.onParticipantJoined, client]);
-  useEffect47(() => client.on("participantLeft", (event) => callbacks.onParticipantLeft?.(event)), [callbacks.onParticipantLeft, client]);
-  useEffect47(() => client.on("episodeEnded", (event) => callbacks.onEpisodeEnded?.(event)), [callbacks.onEpisodeEnded, client]);
-  useEffect47(() => client.on("screenShareStarted", (event) => callbacks.onScreenShareStarted?.(event)), [callbacks.onScreenShareStarted, client]);
-  useEffect47(() => client.on("screenShareStopped", (event) => callbacks.onScreenShareStopped?.(event)), [callbacks.onScreenShareStopped, client]);
-  useEffect47(() => client.on("error", (event) => callbacks.onError?.(event)), [callbacks.onError, client]);
+  useEffect48(() => client.on("participantJoined", (event) => callbacks.onParticipantJoined?.(event)), [callbacks.onParticipantJoined, client]);
+  useEffect48(() => client.on("participantLeft", (event) => callbacks.onParticipantLeft?.(event)), [callbacks.onParticipantLeft, client]);
+  useEffect48(() => client.on("episodeEnded", (event) => callbacks.onEpisodeEnded?.(event)), [callbacks.onEpisodeEnded, client]);
+  useEffect48(() => client.on("screenShareStarted", (event) => callbacks.onScreenShareStarted?.(event)), [callbacks.onScreenShareStarted, client]);
+  useEffect48(() => client.on("screenShareStopped", (event) => callbacks.onScreenShareStopped?.(event)), [callbacks.onScreenShareStopped, client]);
+  useEffect48(() => client.on("error", (event) => callbacks.onError?.(event)), [callbacks.onError, client]);
 }
 function createSettings(displayName, layout, skin, palette, texture) {
   return {

package/dist/components/chalk/Chalk.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chalk.d.ts","sourceRoot":"","sources":["../../../src/components/chalk/Chalk.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Chalk.d.ts","sourceRoot":"","sources":["../../../src/components/chalk/Chalk.tsx"],"names":[],"mappings":"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"}

package/dist/components/index.js

@@ -35,7 +35,7 @@ import {
   SettingsPanel,
   Stage,
   buildStageItems
-} from "../chunk-FTWI75A2.js";
+} from "../chunk-DDIM65MJ.js";
 import "../chunk-ZEZLA34O.js";
 export {
   AdmissionPanel,

package/dist/index.js

@@ -35,7 +35,7 @@ import {
   useSelf,
   useSpaceClient,
   useWhiteboard
-} from "./chunk-FTWI75A2.js";
+} from "./chunk-DDIM65MJ.js";
 import "./chunk-ZEZLA34O.js";
 export {
   COSMIC_CHALK_THEME,

package/dist/internal/sound-cues.d.ts

@@ -15,14 +15,18 @@ export interface SoundPlayer {
     readonly play: (cue: SoundCue) => void;
     readonly dispose: () => void;
 }
+type SoundUnlockTarget = Pick<EventTarget, "addEventListener" | "removeEventListener">;
 /** Picks the Opus file when the browser can decode it, otherwise the MP3. */
 export declare function soundSourceFor(cue: SoundCue, canPlay: (mimeType: string) => boolean): string;
 /**
  * Lazily creates one `HTMLAudioElement` per cue and replays it from the start. Playback failures
  * (autoplay policy before the first gesture, network) are reported through `onError` and never thrown.
  */
-export declare function createSoundPlayer({ volume, onError }?: {
+export declare function createSoundPlayer({ volume, outputDeviceId, onError, unlockTarget }?: {
     volume?: number;
+    outputDeviceId?: string;
     onError?: (cue: SoundCue, cause: unknown) => void;
+    unlockTarget?: SoundUnlockTarget | null;
 }): SoundPlayer;
+export {};
 //# sourceMappingURL=sound-cues.d.ts.map

package/dist/internal/sound-cues.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sound-cues.d.ts","sourceRoot":"","sources":["../../src/internal/sound-cues.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAEvD,qFAAqF;AACrF,eAAO,MAAM,mBAAmB,iEAAgG,CAAC;AAEjI,8GAA8G;AAC9G,eAAO,MAAM,eAAe,MAAM,CAAC;AAMnC;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,aAAa,EAAE,IAAI,EAAE,aAAa,GAAG,SAAS,QAAQ,EAAE,CA2B/F;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,IAAI,EAAE,CAAC,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,6EAA6E;AAC7E,wBAAgB,cAAc,CAAC,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,GAAG,MAAM,CAG5F;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,MAAY,EAAE,OAAO,EAAE,GAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;CAAO,GAAG,WAAW,CA8BrJ"}
+{"version":3,"file":"sound-cues.d.ts","sourceRoot":"","sources":["../../src/internal/sound-cues.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAEvD,qFAAqF;AACrF,eAAO,MAAM,mBAAmB,iEAAgG,CAAC;AAEjI,8GAA8G;AAC9G,eAAO,MAAM,eAAe,MAAM,CAAC;AAMnC;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,aAAa,EAAE,IAAI,EAAE,aAAa,GAAG,SAAS,QAAQ,EAAE,CA2B/F;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,IAAI,EAAE,CAAC,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;CAC9B;AASD,KAAK,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,kBAAkB,GAAG,qBAAqB,CAAC,CAAC;AAUvF,6EAA6E;AAC7E,wBAAgB,cAAc,CAAC,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,GAAG,MAAM,CAG5F;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,MAAY,EAAE,cAAc,EAAE,OAAO,EAAE,YAA4D,EAAE,GAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,cAAc,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAAC,YAAY,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAA;CAAO,GAAG,WAAW,CAgFrS"}

package/dist/internal/useSoundCues.d.ts

@@ -1,7 +1,9 @@
 import { type SoundPlayer } from "./sound-cues";
 /**
  * Plays the join / leave / message / hand-raise / reaction cues for snapshot changes on the
- * current client while `enabled`. Autoplay refusals before the first user gesture are ignored.
+ * current client while `enabled`. Autoplay refusals are retried after the next user gesture.
  */
-export declare function useSoundCues(enabled: boolean, createPlayer?: () => SoundPlayer): void;
+export declare function useSoundCues(enabled: boolean, createPlayer?: (options: {
+    readonly outputDeviceId?: string;
+}) => SoundPlayer): void;
 //# sourceMappingURL=useSoundCues.d.ts.map

package/dist/internal/useSoundCues.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSoundCues.d.ts","sourceRoot":"","sources":["../../src/internal/useSoundCues.ts"],"names":[],"mappings":"AAGA,OAAO,EAAoC,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAElF;;;GAGG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,YAAY,GAAE,MAAM,WAAuC,GAAG,IAAI,CAmBhH"}
+{"version":3,"file":"useSoundCues.d.ts","sourceRoot":"","sources":["../../src/internal/useSoundCues.ts"],"names":[],"mappings":"AAGA,OAAO,EAAoC,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAElF;;;GAGG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,YAAY,GAAE,CAAC,OAAO,EAAE;IAAE,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,CAAA;CAAE,KAAK,WAA+B,GAAG,IAAI,CAoBrJ"}

package/dist/internal/useWhiteboardSceneSubscription.d.ts

@@ -0,0 +1,13 @@
+import type { ChalkWhiteboardV1Transport } from "@q9labsai/chalk-client";
+type WhiteboardSceneSubscription = {
+    readonly status: "closed" | "loading";
+} | {
+    readonly status: "ready";
+    readonly transport: ChalkWhiteboardV1Transport;
+} | {
+    readonly status: "failed";
+    readonly error: Error;
+};
+export declare function useWhiteboardSceneSubscription(transport: ChalkWhiteboardV1Transport | null, active: boolean): WhiteboardSceneSubscription;
+export {};
+//# sourceMappingURL=useWhiteboardSceneSubscription.d.ts.map

package/dist/internal/useWhiteboardSceneSubscription.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWhiteboardSceneSubscription.d.ts","sourceRoot":"","sources":["../../src/internal/useWhiteboardSceneSubscription.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AAGzE,KAAK,2BAA2B,GAAG;IAAE,QAAQ,CAAC,MAAM,EAAE,QAAQ,GAAG,SAAS,CAAA;CAAE,GAAG;IAAE,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,SAAS,EAAE,0BAA0B,CAAA;CAAE,GAAG;IAAE,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC;IAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAA;CAAE,CAAC;AAInN,wBAAgB,8BAA8B,CAAC,SAAS,EAAE,0BAA0B,GAAG,IAAI,EAAE,MAAM,EAAE,OAAO,GAAG,2BAA2B,CA6BzI"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q9labsai/chalk-react",
-  "version": "4.1.2",
+  "version": "4.1.4",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -61,10 +61,10 @@
     "@base-ui/react": "^1.7.0",
     "@hugeicons/core-free-icons": "^4.2.3",
     "@hugeicons/react": "^1.1.9",
-    "@q9labsai/chalk-client": "^4.1.2",
-    "@q9labsai/chalk-ui": "^4.1.2",
-    "@q9labsai/chalk-whiteboard": "^4.1.2",
-    "@q9labsai/facehash": "^4.1.2",
+    "@q9labsai/chalk-client": "^4.1.4",
+    "@q9labsai/chalk-ui": "^4.1.4",
+    "@q9labsai/chalk-whiteboard": "^4.1.4",
+    "@q9labsai/facehash": "^4.1.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "sonner": "^2.0.8",