@q9labsai/chalk-react 5.0.0 → 5.1.0

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

@@ -10,7 +10,7 @@ import {
   gridOrder,
   isContentItem,
   stabilizeOrder
-} from "./chunk-WRAEH24P.js";
+} from "./chunk-ZFWIMKUC.js";
 import {
   ArrowLeft01Icon,
   ArrowRight01Icon,
@@ -278,7 +278,7 @@ ChalkBackdrop.displayName = "ChalkBackdrop";
 import { Menu } from "@base-ui/react/menu";
 import { useRef } from "react";
 import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs2 } from "react/jsx-runtime";
-function ChalkMenu({ trigger, children, side = "bottom", className }) {
+function ChalkMenu({ trigger, children, side = "bottom", className, onOpenChange }) {
   const container = useRef(null);
   return /* @__PURE__ */ jsx12(
     "span",
@@ -287,7 +287,7 @@ function ChalkMenu({ trigger, children, side = "bottom", className }) {
         container.current = element?.closest("[data-chalk]") ?? element;
       },
       style: { display: "contents" },
-      children: /* @__PURE__ */ jsxs2(Menu.Root, { children: [
+      children: /* @__PURE__ */ jsxs2(Menu.Root, { onOpenChange, children: [
         /* @__PURE__ */ jsx12(Menu.Trigger, { render: trigger }),
         /* @__PURE__ */ jsx12(Menu.Portal, { container, children: /* @__PURE__ */ jsx12(Menu.Positioner, { side, align: side === "top" ? "center" : "end", sideOffset: side === "top" ? 10 : 6, collisionPadding: 8, className: "chalk-menu-positioner", children: /* @__PURE__ */ jsx12(Menu.Popup, { "data-part": "menu", className: cn("chalk-menu", className), children }) }) })
       ] })
@@ -644,7 +644,7 @@ function CallEventIcon({ kind, error = false }) {
 
 // src/components/call-limbo/CallLimbo.tsx
 import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
-function CallLimbo({ spaceName = "Call", message, detail, action, children, overlay = false, active = true, initiallyCovered = false, theme, recorded = false, blocking = true }) {
+function CallLimbo({ spaceName = "Call", message, detail, action, children, overlay = false, active = true, initiallyCovered = false, theme, recorded = false, blocking = true, className }) {
   const layerRef = useRef6(null);
   const reducedMotion = usePrefersReducedMotion();
   const [covered, setCovered] = useState6(active || initiallyCovered);
@@ -698,7 +698,7 @@ function CallLimbo({ spaceName = "Call", message, detail, action, children, over
         opacity: covered ? 1 : 0,
         transition: reducedMotion ? "none" : "opacity 220ms cubic-bezier(.2,.8,.2,1)"
       },
-      children: /* @__PURE__ */ jsxs10("div", { "data-part": active ? "limbo-message" : void 0, style: { borderRadius: 16 }, className: "flex max-w-full flex-col items-center gap-2 rounded-2xl border border-[var(--chalk-line)] bg-[var(--chalk-surface)] px-7 py-[22px] text-center", children: [
+      children: /* @__PURE__ */ jsxs10("div", { "data-part": active ? "limbo-message" : void 0, style: { borderRadius: 16 }, className: cn("flex max-w-full flex-col items-center gap-2 rounded-2xl border border-[var(--chalk-line)] bg-[var(--chalk-surface)] px-7 py-[22px] text-center", className), children: [
         message ? /* @__PURE__ */ jsxs10("p", { role: active ? "status" : void 0, className: "flex items-center gap-2.5 text-[17px] font-semibold", children: [
           message.endsWith("\u2026") ? /* @__PURE__ */ jsx23("span", { "aria-hidden": "true", className: "h-[18px] w-[18px] animate-spin rounded-full border-2 border-[var(--chalk-line-strong)] border-t-[var(--chalk-text)] motion-reduce:animate-none" }) : null,
           message
@@ -1311,7 +1311,7 @@ Avatar.displayName = "Avatar";
 // src/components/participant-tile/TileShell.tsx
 import "react";
 import { jsx as jsx29, jsxs as jsxs14 } from "react/jsx-runtime";
-function TileShell({ label, accentColor, pinned = false, speaking = false, audioLevel = 0.5, lift = true, onClick, onDoubleClick, className, style, dataTour, hidden = false, chip, corner, children }) {
+function TileShell({ label, accentColor, pinned = false, ring = false, speaking = false, audioLevel = 0.5, lift = true, onClick, onDoubleClick, className, style, dataTour, hidden = false, chip, corner, children }) {
   const vars = { ...style, containerType: "size", "--chalk-participant-color": accentColor, "--chalk-voice-level": audioLevel };
   return /* @__PURE__ */ jsxs14(
     "div",
@@ -1351,6 +1351,7 @@ function TileShell({ label, accentColor, pinned = false, speaking = false, audio
             style: { opacity: speaking ? 0.3 + 0.7 * audioLevel : 0, boxShadow: "inset 0 0 0 3px rgba(255,255,255,.9), inset 0 0 0 4px rgba(0,0,0,.35)" }
           }
         ),
+        ring ? /* @__PURE__ */ jsx29("div", { "aria-hidden": "true", "data-part": "follow-ring", className: "pointer-events-none absolute inset-0 z-30 rounded-[inherit] shadow-[inset_0_0_0_2px_var(--chalk-text)]" }) : null,
         corner,
         chip ? /* @__PURE__ */ jsx29("div", { "data-part": "tile-tag", className: "pointer-events-none absolute bottom-2 left-2 z-30 flex h-6 max-w-[calc(100%_-_16px)] items-center gap-[5px] rounded-[6px] bg-[rgba(12,14,18,.75)] px-2 text-[12px] leading-[1.4] font-medium text-white", children: chip }) : null
       ]
@@ -1425,6 +1426,8 @@ var ParticipantTileSurface = React5.memo(function ParticipantTileSurface2({
   onClick,
   onDoubleClick,
   pinned,
+  clickAction = "pin",
+  following = false,
   primary,
   className,
   style,
@@ -1451,17 +1454,20 @@ var ParticipantTileSurface = React5.memo(function ParticipantTileSurface2({
   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 first2 = participant.displayName.split(" ")[0] ?? participant.displayName;
+  const actionLabel = clickAction === "follow" ? `${following ? "Stop following" : "Follow"} ${first2}` : `${pinned ? "Unpin" : "Pin"} ${participant.displayName}`;
   const hasPoorConnection = participant.connectionQuality !== void 0 && participant.connectionQuality > 0 && participant.connectionQuality <= 2;
   return /* @__PURE__ */ jsxs15(
     TileShell,
     {
-      label: `Video tile for ${participant.displayName}`,
+      label: clickAction === "follow" ? actionLabel : `Video tile for ${participant.displayName}`,
       accentColor: colors.primary,
-      pinned,
+      pinned: clickAction === "follow" ? following : pinned,
+      ring: following,
       lift: !primary,
       speaking: mediaVisible && participant.isSpeaking && !participant.isMuted,
       audioLevel: participant.audioLevel,
-      onClick: onClick && phone ? openOptions : onClick,
+      onClick: onClick && phone && clickAction === "pin" ? openOptions : onClick,
       onDoubleClick,
       className: cn(aspectRatioClasses[aspectRatio], className),
       style,
@@ -1473,11 +1479,7 @@ var ParticipantTileSurface = React5.memo(function ParticipantTileSurface2({
           ChalkMenu,
           {
             trigger: /* @__PURE__ */ jsx30("button", { type: "button", "aria-label": `More options for ${participant.displayName}`, className: "grid h-8 w-8 place-items-center rounded-full bg-[rgba(12,14,18,.75)] text-white outline-none hover:bg-[rgba(40,42,48,.95)] focus-visible:ring-2 focus-visible:ring-[var(--chalk-focus)]", children: /* @__PURE__ */ jsx30(StageIcon, { name: "more", size: 18 }) }),
-            children: /* @__PURE__ */ jsxs15(ChalkMenuItem, { onClick, children: [
-              pinned ? "Unpin" : "Pin",
-              " ",
-              participant.displayName
-            ] })
+            children: /* @__PURE__ */ jsx30(ChalkMenuItem, { onClick, children: actionLabel })
           }
         ) }) : null
       ] }),
@@ -1487,6 +1489,7 @@ var ParticipantTileSurface = React5.memo(function ParticipantTileSurface2({
           participant.displayName,
           participant.isLocal && participant.displayName !== "You" && /* @__PURE__ */ jsx30("span", { className: "text-white", children: " (You)" })
         ] }),
+        following ? /* @__PURE__ */ jsx30("span", { className: "shrink-0 font-semibold opacity-80", children: "following" }) : null,
         showStatus && participant.isMuted && /* @__PURE__ */ jsx30(StageIcon, { name: "mute", size: 14, className: "shrink-0 text-[#ff6b6b]", "aria-label": "Muted" }),
         showStatus && participant.isHandRaised && /* @__PURE__ */ jsxs15("span", { className: "flex shrink-0 items-center text-[#e2bd3a]", role: "img", "aria-label": `Hand raised${participant.handRaiseOrder ? `, number ${participant.handRaiseOrder}` : ""}`, children: [
           /* @__PURE__ */ jsx30(StageIcon, { name: "hand", size: 14 }),
@@ -1513,7 +1516,7 @@ var ParticipantTileSurface = React5.memo(function ParticipantTileSurface2({
             colors: recipe.facehashColors
           }
         ) : /* @__PURE__ */ jsx30(Avatar, { name: participant.displayName, src: participant.avatarUrl, size: "xl", generated: false, style: { width: "100%", height: "100%" } }) }) }),
-        phone && onClick ? /* @__PURE__ */ jsxs15(
+        phone && onClick && clickAction === "pin" ? /* @__PURE__ */ jsxs15(
           ChalkSheet,
           {
             open: optionsOpen,
@@ -3147,11 +3150,9 @@ var ChatPanelSurface = React10.memo(
     const [pickingFiles, setPickingFiles] = useState17(false);
     const [composerError, setComposerError] = useState17(null);
     const scrollRef = useRef12(null);
-    const endRef = useRef12(null);
     const textareaRef = useRef12(null);
     const fileInputRef = useRef12(null);
     const isAtBottomRef = useRef12(true);
-    const mountedRef = useRef12(false);
     const lastMarkedSequenceRef = useRef12(localReadThroughSequence);
     const restoreScrollRef = useRef12(null);
     const grouped = useMemo8(() => groupChatMessages(messages), [messages]);
@@ -3169,10 +3170,8 @@ var ChatPanelSurface = React10.memo(
         return;
       }
       if (!isAtBottomRef.current) return;
-      scroller.scrollTop = scroller.scrollHeight;
-      endRef.current?.scrollIntoView?.({ behavior: autoScrollBehavior ?? (mountedRef.current ? "smooth" : "auto"), block: "end" });
+      scroller.scrollTo({ top: scroller.scrollHeight, behavior: autoScrollBehavior ?? "auto" });
       if (latestSequence) markChatSequenceRead(latestSequence, lastMarkedSequenceRef, onMarkRead);
-      mountedRef.current = true;
     }, [autoScrollBehavior, latestSequence, messages.length, onMarkRead, pendingMessages.length]);
     useEffect13(() => {
       if (!localReadThroughSequence) return;
@@ -3387,8 +3386,7 @@ var ChatPanelSurface = React10.memo(
             /* @__PURE__ */ jsx36("span", { children: pending.error?.message || "Not sent" }),
             onRetryMessage ? /* @__PURE__ */ jsx36("button", { type: "button", className: "font-medium text-[var(--chalk-app-control-active-line)] hover:underline", onClick: () => void onRetryMessage(pending.clientMessageId), children: "Retry" }) : null
           ] }) : null
-        ] }, pending.clientMessageId)),
-        /* @__PURE__ */ jsx36("div", { ref: endRef })
+        ] }, pending.clientMessageId))
       ] }),
       (error || composerError) && /* @__PURE__ */ jsx36("p", { role: "alert", className: "mx-4 mb-2 rounded-lg bg-[var(--chalk-app-danger)]/10 px-3 py-2 text-sm text-[var(--chalk-app-danger)]", children: composerError || error }),
       stagedFiles.length > 0 ? /* @__PURE__ */ jsx36("div", { className: "flex flex-wrap gap-2 border-t border-[var(--chalk-app-line)] px-4 pt-3", "aria-label": "Attachments", children: stagedFiles.map((file, index) => /* @__PURE__ */ jsxs20("div", { className: "call-staged-file", children: [
@@ -4241,19 +4239,44 @@ function InputLevel({ track }) {
   }, [track]);
   return /* @__PURE__ */ jsx41("span", { className: "chalk-shell-level", role: "meter", "aria-label": "Input level", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": level, children: /* @__PURE__ */ jsx41("i", { style: { transform: `scaleX(${level / 100})` } }) });
 }
-function CameraPreview({ track, mirrored }) {
+function CameraPreview({ track, mirrored, open, selectedDeviceId, captureCameraPreview }) {
   const video = useRef14(null);
+  const [unavailable, setUnavailable] = useState19(false);
+  const trackEnabled = track?.enabled;
   useEffect15(() => {
     const element = video.current;
-    if (!element || !track) return;
-    element.srcObject = new MediaStream([track]);
+    if (!element || !open) return;
+    let cancelled = false;
+    let preview;
+    setUnavailable(false);
+    if (captureCameraPreview) {
+      void captureCameraPreview().then(
+        (captured) => {
+          if (cancelled) {
+            captured.release();
+            return;
+          }
+          preview = captured;
+          element.srcObject = new MediaStream([captured.track]);
+        },
+        () => {
+          if (!cancelled) setUnavailable(true);
+        }
+      );
+    } else if (track?.enabled && track.readyState === "live") {
+      element.srcObject = new MediaStream([track]);
+    } else {
+      setUnavailable(true);
+    }
     return () => {
+      cancelled = true;
       element.srcObject = null;
+      preview?.release();
     };
-  }, [track]);
+  }, [track, trackEnabled, open, selectedDeviceId, captureCameraPreview]);
   return /* @__PURE__ */ jsxs23("div", { className: "chalk-shell-preview", children: [
     /* @__PURE__ */ jsx41("video", { ref: video, autoPlay: true, muted: true, playsInline: true, style: { transform: mirrored ? "scaleX(-1)" : void 0 } }),
-    /* @__PURE__ */ jsx41("small", { children: track ? "Only you see this preview" : "Camera is off" })
+    /* @__PURE__ */ jsx41("small", { children: unavailable ? "Camera preview unavailable. Check camera access." : "Only you see this preview" })
   ] });
 }
 function DeviceSwitch({ label, checked, onChange }) {
@@ -4273,6 +4296,7 @@ function DevicePopover({
   selectedSecondaryDeviceId,
   onSecondaryDeviceChange,
   track,
+  captureCameraPreview,
   warning,
   speakingWhileMuted,
   noiseSuppression = true,
@@ -4283,8 +4307,10 @@ function DevicePopover({
   orientation = "up",
   className,
   disabled,
+  toggleDisabled,
   busy
 }) {
+  const [open, setOpen] = useState19(false);
   const mic = type === "mic";
   const label = mic ? isActive ? "Mute microphone" : "Unmute microphone" : isActive ? "Turn off camera" : "Turn on camera";
   return /* @__PURE__ */ jsxs23("div", { "data-part": `${type}-split`, className: cn("chalk-shell-split", className), "data-off": !isActive, children: [
@@ -4292,7 +4318,7 @@ function DevicePopover({
     /* @__PURE__ */ jsx41(
       ChalkTooltip,
       {
-        trigger: /* @__PURE__ */ jsx41("button", { type: "button", className: "chalk-shell-main", "aria-label": busy ? `Updating ${mic ? "microphone" : "camera"}` : label, "aria-pressed": isActive, disabled: disabled || busy, onClick: onToggle, children: /* @__PURE__ */ jsx41(ShellIcon, { name: mic ? isActive ? "mic" : "micOff" : isActive ? "cam" : "camOff" }) }),
+        trigger: /* @__PURE__ */ jsx41("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__ */ jsx41(ShellIcon, { name: mic ? isActive ? "mic" : "micOff" : isActive ? "cam" : "camOff" }) }),
         children: label
       }
     ),
@@ -4301,9 +4327,10 @@ function DevicePopover({
       {
         side: orientation === "up" ? "top" : "bottom",
         className: "chalk-device-menu",
+        onOpenChange: setOpen,
         trigger: /* @__PURE__ */ jsx41("button", { type: "button", className: "chalk-shell-caret", "aria-label": `Select ${mic ? "microphone" : "camera"}`, disabled, children: /* @__PURE__ */ jsx41(ShellIcon, { name: "down" }) }),
         children: [
-          !mic ? /* @__PURE__ */ jsx41(CameraPreview, { track, mirrored }) : null,
+          !mic ? /* @__PURE__ */ jsx41(CameraPreview, { track, mirrored, open, selectedDeviceId, captureCameraPreview }) : null,
           /* @__PURE__ */ jsx41(ChalkMenuLabel, { children: mic ? "Microphone" : "Camera" }),
           devices.length ? devices.map((device) => /* @__PURE__ */ jsx41(ChalkMenuItem, { checked: selectedDeviceId === device.deviceId, onClick: () => onDeviceChange(device.deviceId), closeOnClick: false, children: /* @__PURE__ */ jsxs23("span", { className: "chalk-shell-device-label", children: [
             device.label || (mic ? "Microphone" : "Camera"),
@@ -4410,11 +4437,12 @@ function SourceIcon({ source }) {
     /* @__PURE__ */ jsx45("path", { d: "M3 11h18" })
   ] }) });
 }
-function ShareControl({ sharing, onToggle, onStart }) {
+function ShareControl({ sharing, onToggle, onStart, disabled = false, startDisabled = false }) {
   const [surface, setSurface] = useState21("window");
   const [audio, setAudio] = useState21(true);
   const [replace, setReplace] = useState21(false);
   const start = (next) => {
+    if (disabled || startDisabled) return;
     setSurface(next);
     setReplace(false);
     onStart?.({ surface: next, audio: next === "browser" && audio });
@@ -4423,7 +4451,7 @@ function ShareControl({ sharing, onToggle, onStart }) {
     /* @__PURE__ */ jsx45(
       ChalkTooltip,
       {
-        trigger: /* @__PURE__ */ jsx45("button", { type: "button", className: "chalk-shell-main", "aria-label": sharing ? "Stop sharing" : "Share screen", "aria-pressed": sharing, onClick: () => sharing || !onStart ? onToggle?.() : start(surface), children: /* @__PURE__ */ jsx45(ShellIcon, { name: sharing ? "shareOff" : "share" }) }),
+        trigger: /* @__PURE__ */ jsx45("button", { type: "button", className: "chalk-shell-main", disabled, "aria-label": sharing ? "Stop sharing" : "Share screen", "aria-pressed": sharing, onClick: () => sharing || !onStart ? onToggle?.() : start(surface), children: /* @__PURE__ */ jsx45(ShellIcon, { name: sharing ? "shareOff" : "share" }) }),
         children: sharing ? "Stop sharing" : "Share screen"
       }
     ),
@@ -4432,17 +4460,17 @@ function ShareControl({ sharing, onToggle, onStart }) {
       {
         side: "top",
         className: "chalk-device-menu",
-        trigger: /* @__PURE__ */ jsx45("button", { type: "button", className: "chalk-shell-caret", "aria-label": "Share options", children: /* @__PURE__ */ jsx45(ShellIcon, { name: "down" }) }),
+        trigger: /* @__PURE__ */ jsx45("button", { type: "button", className: "chalk-shell-caret", disabled: disabled || startDisabled, "aria-label": "Share options", children: /* @__PURE__ */ jsx45(ShellIcon, { name: "down" }) }),
         children: sharing && !replace ? /* @__PURE__ */ jsxs27(Fragment14, { children: [
           /* @__PURE__ */ jsx45(ChalkMenuLabel, { children: "Sharing your screen" }),
-          /* @__PURE__ */ jsx45(Menu4.Item, { className: "chalk-menu-item", closeOnClick: false, onClick: () => setReplace(true), children: "Share something else" }),
+          /* @__PURE__ */ jsx45(Menu4.Item, { className: "chalk-menu-item", disabled: disabled || startDisabled, closeOnClick: false, onClick: () => setReplace(true), children: "Share something else" }),
           /* @__PURE__ */ jsx45(ChalkMenuItem, { onClick: onToggle, children: "Stop sharing" })
         ] }) : /* @__PURE__ */ jsxs27(Fragment14, { children: [
           [
             { value: "monitor", label: "Entire screen", description: "Everything on one display" },
             { value: "window", label: "Window", description: "One app, like Slides or Figma" },
             { value: "browser", label: "Browser tab", description: "One tab, and its sound if you like" }
-          ].map((option) => /* @__PURE__ */ jsxs27(Menu4.Item, { className: "chalk-menu-item chalk-shell-source", role: "menuitemradio", "aria-label": option.label, "aria-checked": surface === option.value, onClick: () => start(option.value), children: [
+          ].map((option) => /* @__PURE__ */ jsxs27(Menu4.Item, { className: "chalk-menu-item chalk-shell-source", disabled: disabled || startDisabled, role: "menuitemradio", "aria-label": option.label, "aria-checked": surface === option.value, onClick: () => start(option.value), children: [
             /* @__PURE__ */ jsx45(SourceIcon, { source: option.value }),
             /* @__PURE__ */ jsxs27("span", { className: "chalk-shell-device-label", children: [
               /* @__PURE__ */ jsx45("span", { children: option.label }),
@@ -4568,6 +4596,7 @@ function useConnectedControlBarBehavior(props) {
   const canRaiseHand = useCan("raiseHand");
   const canDrawWhiteboard = useCan("drawWhiteboard");
   const canManageRecording = useCan("manageRecording");
+  const live = useConnection().status === "live";
   const microphoneEnabled = media.local.microphone.state === "enabled";
   const cameraEnabled = media.local.camera.state === "enabled";
   const screenSharing = media.local.screen.state === "enabled" || media.local.screen.state === "requesting";
@@ -4617,6 +4646,7 @@ function useConnectedControlBarBehavior(props) {
     buttons,
     microphoneTrack: media.local.microphone.track,
     cameraTrack: media.local.camera.track,
+    captureCameraPreview: client.media.captureCameraPreview,
     mirrored: props.mirrored ?? mirrored,
     onMirrorChange: props.onMirrorChange ?? (props.mirrored === void 0 ? setMirrored2 : void 0),
     microphoneWarning: media.local.microphone.state === "failed" || media.local.microphone.state === "unavailable",
@@ -4632,6 +4662,8 @@ function useConnectedControlBarBehavior(props) {
     shareUrl: props.shareUrl,
     isMuted: !microphoneEnabled,
     microphonePending: media.local.microphone.state === "requesting",
+    mediaEnableDisabled: !live,
+    reactionsDisabled: !live,
     cameraPending: media.local.camera.state === "requesting",
     isVideoEnabled: cameraEnabled,
     isScreenSharing: screenSharing,
@@ -4727,10 +4759,10 @@ var ControlBarSurface = React12.memo((props) => {
     return () => document.removeEventListener("fullscreenchange", changed);
   }, []);
   const has = (button) => buttonsToRender.includes(button);
-  const iconButton = (label, icon, onClick, active, badge = 0, hand = false) => /* @__PURE__ */ jsx46(
+  const iconButton = (label, icon, onClick, active, badge = 0, hand = false, disabled = false) => /* @__PURE__ */ jsx46(
     ChalkTooltip,
     {
-      trigger: /* @__PURE__ */ jsxs28(ChalkIconButton, { size: "lg", "aria-label": label, "aria-pressed": active, onClick, children: [
+      trigger: /* @__PURE__ */ jsxs28(ChalkIconButton, { size: "lg", "aria-label": label, "aria-pressed": active, onClick, disabled, children: [
         icon,
         badge > 0 ? /* @__PURE__ */ jsx46("span", { className: "chalk-shell-dot", "aria-label": `${badge} unread` }) : null,
         hand ? /* @__PURE__ */ jsx46("span", { className: "chalk-shell-dot", "aria-label": "Hand raised" }) : null
@@ -4746,7 +4778,7 @@ var ControlBarSurface = React12.memo((props) => {
   const chat = has("chat") && (props.onToggleChat || props.displayOnly) ? iconButton("Chat", /* @__PURE__ */ jsx46(ShellIcon, { name: "chat" }), props.onToggleChat, props.isChatOpen, props.isChatOpen ? 0 : props.unreadChatCount) : null;
   const copyLink = () => void navigator.clipboard.writeText(props.shareUrl ?? location.href).catch(() => props.onCopyError?.());
   const linkLabel = props.onCallLinkToggle ? props.callLinkOpen ? "Hide call link" : "Show call link" : "Copy call link";
-  const reactions = has("reactions") && (props.onOpenReactions || props.displayOnly) ? iconButton("Reactions", /* @__PURE__ */ jsx46(ShellIcon, { name: "smile" }), props.onOpenReactions, void 0, 0, props.isHandRaised) : null;
+  const reactions = has("reactions") && (props.onOpenReactions || props.displayOnly) ? iconButton("Reactions", /* @__PURE__ */ jsx46(ShellIcon, { name: "smile" }), props.onOpenReactions, void 0, 0, props.isHandRaised, props.reactionsDisabled) : null;
   return /* @__PURE__ */ jsxs28("div", { ref: dock, "data-part": "dock", className: cn("chalk-shell-dock", props.className), role: "toolbar", "aria-label": "Space controls", children: [
     /* @__PURE__ */ jsx46(ShellStyles, {}),
     has("mic") ? /* @__PURE__ */ jsx46(
@@ -4755,6 +4787,7 @@ var ControlBarSurface = React12.memo((props) => {
         type: "mic",
         isActive: !props.isMuted,
         busy: props.microphonePending,
+        toggleDisabled: props.mediaEnableDisabled && props.isMuted,
         onToggle: props.onToggleMute ?? (() => {
         }),
         devices: effectiveAudioInputDevices,
@@ -4778,6 +4811,7 @@ var ControlBarSurface = React12.memo((props) => {
         type: "video",
         isActive: props.isVideoEnabled ?? true,
         busy: props.cameraPending,
+        toggleDisabled: props.mediaEnableDisabled && !props.isVideoEnabled,
         onToggle: props.onToggleVideo ?? (() => {
         }),
         devices: effectiveVideoInputDevices,
@@ -4785,15 +4819,16 @@ var ControlBarSurface = React12.memo((props) => {
         onDeviceChange: props.onVideoInputChange ?? (() => {
         }),
         track: props.cameraTrack,
+        captureCameraPreview: props.captureCameraPreview,
         warning: props.cameraWarning,
         mirrored: props.mirrored,
         onMirrorChange: props.onMirrorChange
       }
     ) : null,
     /* @__PURE__ */ jsx46("span", { className: "chalk-shell-gap chalk-shell-desktop" }),
-    has("screenshare") ? /* @__PURE__ */ jsx46(ShareControl, { sharing: props.isScreenSharing ?? false, onToggle: props.onToggleScreenShare, onStart: props.onStartScreenShare }) : null,
+    has("screenshare") ? /* @__PURE__ */ jsx46(ShareControl, { disabled: props.mediaEnableDisabled && !props.isScreenSharing, startDisabled: props.mediaEnableDisabled, sharing: props.isScreenSharing ?? false, onToggle: props.onToggleScreenShare, onStart: props.onStartScreenShare }) : null,
     reactions,
-    !reactions && has("handraise") ? iconButton(props.isHandRaised ? "Lower hand" : "Raise hand", /* @__PURE__ */ jsx46(HandIcon, {}), props.onToggleHandRaise, props.isHandRaised) : null,
+    (!reactions || props.reactionsDisabled) && has("handraise") ? iconButton(props.isHandRaised ? "Lower hand" : "Raise hand", /* @__PURE__ */ jsx46(HandIcon, {}), props.onToggleHandRaise, props.isHandRaised) : null,
     has("whiteboard") && (props.onToggleWhiteboard || props.displayOnly) ? /* @__PURE__ */ jsx46("span", { className: "chalk-shell-desktop", children: iconButton("Board", /* @__PURE__ */ jsx46(ShellIcon, { name: "pen" }), props.onToggleWhiteboard, props.isWhiteboardOpen) }) : null,
     has("record") && (props.onToggleRecording || props.displayOnly) ? /* @__PURE__ */ jsx46("span", { className: "chalk-shell-desktop", children: iconButton(props.isRecording ? "Stop recording" : "Record", /* @__PURE__ */ jsx46(ShellIcon, { name: "rec" }), props.isRecordingPending ? void 0 : props.onToggleRecording, props.isRecording) }) : null,
     /* @__PURE__ */ jsx46("span", { className: "chalk-shell-desktop", children: iconButton(fullscreen ? "Exit fullscreen" : "Fullscreen", /* @__PURE__ */ jsx46(ShellIcon, { name: fullscreen ? "min" : "max" }), toggleFullscreen, fullscreen) }),
@@ -4820,7 +4855,7 @@ var ControlBarSurface = React12.memo((props) => {
           ]
         }
       ) : null,
-      has("screenshare") && canCaptureDisplay ? /* @__PURE__ */ jsxs28("button", { type: "button", className: "chalk-sheet-row", onClick: props.onToggleScreenShare, children: [
+      has("screenshare") && canCaptureDisplay ? /* @__PURE__ */ jsxs28("button", { type: "button", className: "chalk-sheet-row", disabled: props.mediaEnableDisabled && !props.isScreenSharing, onClick: props.onToggleScreenShare, children: [
         /* @__PURE__ */ jsx46(ShellIcon, { name: "share" }),
         /* @__PURE__ */ jsx46("span", { children: props.isScreenSharing ? "Stop sharing" : "Share screen" })
       ] }) : null,
@@ -5339,12 +5374,24 @@ var ToastStack = memo(function ToastStack2({ toasts, onDismiss, maxVisible = 3,
 
 // src/components/chalk/StatusSurface.tsx
 import { Fragment as Fragment18, jsx as jsx51, jsxs as jsxs32 } from "react/jsx-runtime";
-function StatusSurface({ phase, callName = "the call", reason, theme, onRejoin, onHome, onRetry, onReportProblem, rejoinDisabled = false, retryPending = false }) {
+var DEFAULT_FAILURE_DETAIL = "Something went wrong while joining. Try again.";
+var FAILURE_DETAILS = {
+  "access.invalid": "Access to this call was rejected. Refresh the page and try again.",
+  "access.unavailable": "Couldn\u2019t get access to the call. Try again.",
+  "connection.sync_start_failed": "Couldn\u2019t reach the call service. Try again.",
+  "connection.sync_hello_timeout": "The call service did not respond in time. Try again.",
+  "connection.sync_recovery_exhausted": "The call connection could not recover. Try again.",
+  "connection.media_start_failed": "Audio and video could not connect. Try again.",
+  "connection.media_recovery_exhausted": "Audio and video could not reconnect. Try again.",
+  "environment.unsupported": "This browser cannot start the call. Use an up-to-date browser over HTTPS.",
+  "client.internal_error": DEFAULT_FAILURE_DETAIL
+};
+function StatusSurface({ phase, callName = "the call", reason, errorCode, theme, onRejoin, onHome, onRetry, onReportProblem, rejoinDisabled = false, retryPending = false }) {
   const copy = {
     entering: { title: `Joining ${callName}\u2026`, detail: "" },
     left: { title: `You left ${callName}`, detail: "" },
     "episode-ended": { title: "The call ended", detail: "" },
-    failed: { title: `Couldn\u2019t connect to ${callName}`, detail: "Check your internet connection, then try again." },
+    failed: { title: `Couldn\u2019t connect to ${callName}`, detail: (errorCode && FAILURE_DETAILS[errorCode]) ?? DEFAULT_FAILURE_DETAIL },
     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?` }
@@ -5362,6 +5409,11 @@ function StatusSurface({ phase, callName = "the call", reason, theme, onRejoin,
       children: [
         /* @__PURE__ */ jsx51("h1", { role: phase === "entering" ? "status" : void 0, style: { fontSize: 22, fontWeight: 600, lineHeight: 1.4, fontFamily: "inherit", letterSpacing: "normal", textWrap: "wrap" }, children: copy.title }),
         reason || copy.detail ? /* @__PURE__ */ jsx51("p", { className: "text-[14px] text-[var(--chalk-muted-text)]", children: reason ?? copy.detail }) : null,
+        phase === "failed" && errorCode ? /* @__PURE__ */ jsxs32("p", { className: "text-[13px] text-[var(--chalk-muted-text)]", children: [
+          "Reference:",
+          " ",
+          /* @__PURE__ */ jsx51("code", { dir: "ltr", className: "break-all", children: errorCode })
+        ] }) : null,
         /* @__PURE__ */ jsxs32("div", { "data-part": "status-actions", className: "mt-5 flex gap-7", children: [
           canRetry && retry ? /* @__PURE__ */ jsx51(StatusAction, { icon: /* @__PURE__ */ jsx51(StatusIcon, { retry: true }), label: phase === "elsewhere" ? "Use here" : phase === "left" ? "Rejoin" : "Try again", onClick: retry, disabled: rejoinDisabled || retryPending }) : null,
           phase !== "entering" && onHome ? /* @__PURE__ */ jsx51(StatusAction, { icon: /* @__PURE__ */ jsx51(StatusIcon, {}), label: "Home", onClick: onHome }) : null
@@ -5880,6 +5932,7 @@ var CALL_SHORTCUTS = [
 ];
 function CallDialog({
   kind,
+  open,
   onClose,
   onReportProblem,
   diagnostics,
@@ -5892,12 +5945,12 @@ function CallDialog({
   const [status, setStatus] = useState28("idle");
   const [error, setError] = useState28("");
   useEffect21(() => {
-    if (kind === "report") {
+    if (open && kind === "report") {
       setText("");
       setError("");
       setStatus("idle");
     }
-  }, [kind]);
+  }, [kind, open]);
   return /* @__PURE__ */ jsx54(
     "span",
     {
@@ -5908,9 +5961,9 @@ function CallDialog({
       children: /* @__PURE__ */ jsx54(
         Dialog2.Root,
         {
-          open: kind !== null,
-          onOpenChange: (open) => {
-            if (!open) onClose();
+          open,
+          onOpenChange: (open2) => {
+            if (!open2) onClose();
           },
           children: /* @__PURE__ */ jsxs34(Dialog2.Portal, { container, children: [
             /* @__PURE__ */ jsx54(Dialog2.Backdrop, { className: "chalk-shell-modal-backdrop" }),
@@ -6134,8 +6187,8 @@ var SpaceHeader = React14.memo((props) => {
   const [sounds, setSounds] = useSoundsSetting();
   const triggerRef = useRef20(null);
   const [open, setOpen] = useState29(false);
-  const [dialog, setDialog] = useState29(null);
-  const showShortcuts = useCallback6(() => setDialog("shortcuts"), []);
+  const [dialog, setDialog] = useState29({ kind: "shortcuts", open: false });
+  const showShortcuts = useCallback6(() => setDialog({ kind: "shortcuts", open: true }), []);
   useCallShortcuts(props.shortcuts, showShortcuts);
   const phone = useMediaQuery("(max-width: 640px)");
   const chevron = /* @__PURE__ */ jsx55("svg", { width: phone ? "16" : "14", height: phone ? "16" : "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", "aria-hidden": "true", children: /* @__PURE__ */ jsx55("path", { d: "m6 9 6 6 6-6" }) });
@@ -6153,7 +6206,7 @@ var SpaceHeader = React14.memo((props) => {
       onSoundsChange: setSounds,
       onDialog: (kind) => {
         setOpen(false);
-        setDialog(kind);
+        setDialog({ kind, open: true });
       }
     }
   );
@@ -6200,7 +6253,7 @@ var SpaceHeader = React14.memo((props) => {
       ] }) : null,
       onLayoutChange ? /* @__PURE__ */ jsx55(LayoutMenu, { layout, onLayoutChange }) : null
     ] }),
-    /* @__PURE__ */ jsx55(CallDialog, { returnFocus: triggerRef, kind: dialog, onClose: () => setDialog(null), onReportProblem: props.onReportProblem, diagnostics: (props.diagnostics ?? []).map(({ label, value }) => `${label}: ${value}`).join("\n") })
+    /* @__PURE__ */ jsx55(CallDialog, { returnFocus: triggerRef, kind: dialog.kind, open: dialog.open, onClose: () => setDialog((current) => ({ ...current, open: false })), onReportProblem: props.onReportProblem, diagnostics: props.diagnostics?.map(({ label, value }) => `${label}: ${value}`).join("\n") ?? "" })
   ] });
 });
 SpaceHeader.displayName = "SpaceHeader";
@@ -6218,7 +6271,7 @@ function ScreenSharePresentation({ sharedByName, media, mediaVisible, state, isL
   const [error, setError] = useState30(null);
   const status = state ?? (mediaVisible ? "live" : "connecting");
   const name = isLocal ? "Your screen" : `${sharedByName}'s screen`;
-  const source = capture?.surface === "monitor" ? "your screen" : capture?.surface === "browser" ? "a tab" : "a window";
+  const source = capture?.surface === "window" ? "a window" : capture?.surface === "browser" ? "a tab" : capture?.surface === "monitor" ? "your screen" : null;
   const run = async (command) => {
     if (pending) return;
     setPending(true);
@@ -6319,10 +6372,7 @@ function ScreenSharePresentation({ sharedByName, media, mediaVisible, state, isL
             primary ? switcher : null,
             isLocal && primary ? /* @__PURE__ */ jsxs36("div", { "data-part": "share-local-overlay", role: "group", "aria-label": "Your share", className: "absolute top-2.5 right-2.5 left-2.5 z-30 flex items-center gap-2 rounded-[12px] bg-[rgba(12,14,18,.86)] p-2 pl-3.5 text-white max-[640px]:flex-wrap", children: [
               /* @__PURE__ */ jsxs36("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
-                /* @__PURE__ */ jsxs36("b", { className: "truncate font-semibold", children: [
-                  "You\u2019re sharing ",
-                  source
-                ] }),
+                /* @__PURE__ */ jsx56("b", { className: "truncate font-semibold", children: source ? `You\u2019re sharing ${source}` : "You\u2019re screen sharing" }),
                 capture?.surface === "monitor" || capture?.surface === "browser" ? /* @__PURE__ */ jsxs36("span", { className: "text-[12px] text-[#c9cbd1]", children: [
                   "Seeing a mirror effect? That\u2019s normal when you share ",
                   capture.surface === "browser" ? "this tab" : "your whole screen",
@@ -6375,6 +6425,7 @@ function ScreenShareViewSurface({ screenShareTrack, ...props }) {
 }
 function ScreenShareView(props) {
   const client = useSpaceClient();
+  const connection = useConnection();
   const self = useSelf();
   const participantsSlice = useParticipants();
   const media = useMedia();
@@ -6392,8 +6443,12 @@ function ScreenShareView(props) {
       isLocal: active.isLocal,
       hasAudio: active.isLocal ? media.screenShare.hasAudio : participantsSlice.roster.find((person) => person.participantId === active.id)?.media.screenShareHasAudio,
       capture: active.isLocal ? media.screenShare.capture : void 0,
-      onStopSharing: active.isLocal ? () => client.media.setScreenShareEnabled(false) : void 0,
-      onChangeShare: active.isLocal ? (options) => client.media.setScreenShareEnabled(true, options) : void 0
+      onStopSharing: active.isLocal ? async () => {
+        await client.media.setScreenShareEnabled(false);
+      } : void 0,
+      onChangeShare: active.isLocal && connection.status === "live" ? async (options) => {
+        await client.media.setScreenShareEnabled(true, options);
+      } : void 0
     }
   );
 }
@@ -6586,6 +6641,9 @@ function Stage({
   items,
   layout,
   pinnedId,
+  followingId = null,
+  onFollowChange,
+  clickAction = "pin",
   onPinnedChange,
   onOverflowClick,
   onItemClick,
@@ -6662,7 +6720,7 @@ function Stage({
       box,
       primary.id,
       strip.map((item) => item.id),
-      { ...DEFAULT_SPOTLIGHT_OPTIONS, primaryAspect: aspect, content: primary.kind !== "participant", wideIds: primary.kind === "screen-share" ? ordered.filter((item) => item.kind === "whiteboard").map((item) => item.id) : wideIds, maxPerPage }
+      { ...DEFAULT_SPOTLIGHT_OPTIONS, primaryAspect: aspect, content: primary.kind !== "participant", slimPhoneStrip: primary.kind === "whiteboard", wideIds: primary.kind === "screen-share" ? ordered.filter((item) => item.kind === "whiteboard").map((item) => item.id) : wideIds, maxPerPage }
     );
   }, [activePinnedId, box, layout, maxPerPage, minTileWidth, ordered, primary, shareAspects]);
   const framesById = useMemo12(() => new Map(geometry.frames.map((frame) => [frame.id, frame])), [geometry.frames]);
@@ -6720,14 +6778,15 @@ function Stage({
     for (const item of ordered) {
       map.set(item.id, {
         onClick: () => {
-          togglePin(item);
+          if (clickAction === "follow" && item.kind === "participant" && !item.participant.isLocal) onFollowChange?.(item.id);
+          else togglePin(item);
           onItemClick?.(item);
         },
         onDoubleClick: onItemDoubleClick ? () => onItemDoubleClick(item) : void 0
       });
     }
     return map;
-  }, [interactive, onItemDoubleClick, onItemClick, ordered, togglePin]);
+  }, [clickAction, interactive, onFollowChange, onItemDoubleClick, onItemClick, ordered, togglePin]);
   if (ordered.length === 0) {
     return /* @__PURE__ */ jsx59("div", { className: cn("flex h-full w-full items-center justify-center px-6 py-10", className), "data-tour": "video-grid", children: emptyState });
   }
@@ -6752,6 +6811,8 @@ function Stage({
               aspectRatio: "fill",
               primary: frame?.role === "primary",
               pinned,
+              clickAction: item.participant.isLocal ? "pin" : clickAction,
+              following: followingId === item.id,
               onClick: click,
               onDoubleClick: doubleClick,
               style,
@@ -6812,6 +6873,7 @@ function Stage({
           setOverflowOpen(false);
         },
         children: [
+          clickAction === "follow" && !item.participant.isLocal ? `${followingId === item.id ? "Stop following" : "Follow"} ` : "",
           item.participant.displayName,
           item.participant.isMuted ? " \xB7 Muted" : ""
         ]
@@ -7019,7 +7081,7 @@ function SpacePresentation({ colorScheme = "dark", stageBackground, header, stag
 // src/components/space-view/SpaceView.tsx
 import { SpaceClientError as SpaceClientError2 } from "@q9labsai/chalk-client";
 import { DEFAULT_QUICK_REACTIONS as DEFAULT_QUICK_REACTIONS2 } from "@q9labsai/chalk-ui/reactions";
-import { useCallback as useCallback13, useEffect as useEffect35, useMemo as useMemo16, useState as useState42 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect40, useMemo as useMemo18, useRef as useRef34, useState as useState46 } from "react";
 
 // src/components/space-header/call-diagnostics.ts
 function callDiagnostics(connection, media) {
@@ -7267,6 +7329,8 @@ function ReactionTray({ isHandRaised, onToggleHandRaise, reactions, onSelect, on
   useLayoutEffect3(() => {
     returnFocus.current = document.activeElement;
     const tray = listRef.current;
+    const frame = tray?.closest("[data-part='call-frame']");
+    const notices = frame?.querySelector("[data-part='toast-stack']");
     const anchor = tray?.closest("[data-part='call-frame']")?.querySelector("[data-part='dock'] button[aria-label='Reactions']") ?? returnFocus.current;
     const place = () => {
       if (!tray || !(anchor instanceof HTMLElement) || !(tray.offsetParent instanceof HTMLElement)) return;
@@ -7275,7 +7339,12 @@ function ReactionTray({ isHandRaised, onToggleHandRaise, reactions, onSelect, on
       const width = tray.offsetWidth;
       const height = tray.offsetHeight;
       tray.style.left = `${Math.max(8, Math.min(window.innerWidth - width - 8, trigger2.x + trigger2.width / 2 - width / 2)) - parent.x}px`;
-      tray.style.top = `${Math.max(8, Math.min(window.innerHeight - height - 8, position === "top" ? trigger2.y - height - 10 : trigger2.bottom + 10)) - parent.y}px`;
+      const top = Math.max(8, Math.min(window.innerHeight - height - 8, position === "top" ? trigger2.y - height - 10 : trigger2.bottom + 10));
+      tray.style.top = `${top - parent.y}px`;
+      if (notices?.offsetParent instanceof HTMLElement) {
+        const baseline = notices.offsetParent.getBoundingClientRect().bottom - Number.parseFloat(getComputedStyle(notices).bottom);
+        frame?.style.setProperty("--chalk-reaction-toast-lift", `${Math.max(0, baseline - top + 12)}px`);
+      }
     };
     place();
     const resize = new ResizeObserver(place);
@@ -7285,6 +7354,7 @@ function ReactionTray({ isHandRaised, onToggleHandRaise, reactions, onSelect, on
     return () => {
       window.removeEventListener("resize", place);
       resize.disconnect();
+      frame?.style.removeProperty("--chalk-reaction-toast-lift");
       if (returnFocus.current instanceof HTMLElement && returnFocus.current.isConnected) returnFocus.current.focus();
     };
   }, [position]);
@@ -7516,8 +7586,10 @@ function OfflineActions({ reconnecting: requestedReconnecting = false } = {}) {
   const count = offline.pending.length;
   const messagesOnly = offline.pending.every((action) => action.kind === "chat_message");
   const pendingDetail = count ? `${count} ${messagesOnly ? count === 1 ? "message" : "messages" : count === 1 ? "action" : "actions"} will send when you\u2019re back` : void 0;
-  if (reconnecting || !offline.decisionNeeded && !offline.notice) return /* @__PURE__ */ jsx66(CallLimbo, { overlay: true, blocking: false, active: reconnectingNoticeDue, message: offlineNoticeText(0, online), detail: pendingDetail });
+  const notice = reconnecting ? reconnectingNoticeDue ? `${offlineNoticeText(0, online)}${pendingDetail ? ` ${pendingDetail}` : ""}` : null : connection.syncHealth === "degraded" ? "Connection is slow" : null;
   if (offline.notice && offline.notice !== dismissedNotice) return /* @__PURE__ */ jsx66(ToastStack, { toasts: [{ id: "offline-notice", message: offline.notice }], onDismiss: () => setDismissedNotice(offline.notice ?? null) });
+  if (notice)
+    return /* @__PURE__ */ jsx66("div", { role: "status", "data-part": "connection-notice", style: { pointerEvents: "none" }, className: "absolute inset-x-4 top-16 z-50 mx-auto w-fit max-w-[calc(100%_-_2rem)] rounded-full bg-[var(--chalk-surface)] px-3 py-1 text-center text-sm text-[var(--chalk-text)]", children: notice });
   return null;
 }
 function useTrueFor(value, milliseconds) {
@@ -7729,7 +7801,9 @@ function useCallToasts() {
             label: "Try again",
             onClick: () => {
               void client.media.setScreenShareEnabled(true).then(
-                () => setToasts((current) => current.filter((event) => event.id !== id)),
+                () => {
+                  setToasts((current) => current.filter((event) => event.id !== id));
+                },
                 () => void 0
               );
             }
@@ -7760,19 +7834,1550 @@ function useCallLink(alone) {
   return { open, toggle: () => setOpen((current) => !current), close: () => setOpen(false) };
 }
 
+// src/components/board/board-toasts.ts
+import { createContext as createContext3, useCallback as useCallback12, useContext as useContext3, useEffect as useEffect34, useMemo as useMemo15 } from "react";
+var BoardToastContext = createContext3(() => void 0);
+function useBoardToast(lifetime) {
+  const publish = useContext3(BoardToastContext);
+  const scope = useMemo15(() => ({ active: true }), [lifetime]);
+  useEffect34(() => {
+    scope.active = true;
+    return () => {
+      scope.active = false;
+      publish(null);
+    };
+  }, [publish, scope]);
+  return useCallback12(
+    (toast) => {
+      if (scope.active) publish(toast);
+    },
+    [publish, scope]
+  );
+}
+
+// src/components/stage/SpaceStage.tsx
+import { useCallback as useCallback14, useEffect as useEffect38, useMemo as useMemo17, useState as useState44 } from "react";
+
+// src/components/board/board-history.ts
+import { useEffect as useEffect35, useState as useState40 } from "react";
+import { observeEngineHistory } from "@q9labsai/chalk-whiteboard/react";
+function useEngineHistory(root, engine) {
+  const [history, setHistory] = useState40({ canUndo: false, canRedo: false });
+  useEffect35(() => {
+    const canvas = root.current?.querySelector(".excalidraw");
+    if (!engine || !canvas) return;
+    return observeEngineHistory(engine.api, canvas, setHistory);
+  }, [engine, root]);
+  return history;
+}
+
+// src/components/board/board-view-versions.ts
+var ViewVersions = class {
+  #versions = /* @__PURE__ */ new Map();
+  isNew(view) {
+    if (!view.originParticipantId) return true;
+    return view.originSequence > (this.#versions.get(`${view.originParticipantId}:${view.originEpoch ?? ""}`) ?? 0);
+  }
+  remember(view) {
+    if (!view.originParticipantId || !this.isNew(view)) return;
+    const origin = `${view.originParticipantId}:${view.originEpoch ?? ""}`;
+    this.#versions.delete(origin);
+    this.#versions.set(origin, view.originSequence);
+    if (this.#versions.size > 256) {
+      const oldest = this.#versions.keys().next().value;
+      if (oldest !== void 0) this.#versions.delete(oldest);
+    }
+  }
+};
+
+// src/components/board/Board.tsx
+import { WhiteboardCanvas as WhiteboardCanvas2 } from "@q9labsai/chalk-whiteboard/react";
+import { useCallback as useCallback13, useEffect as useEffect37, useMemo as useMemo16, useRef as useRef33, useState as useState43 } from "react";
+
+// src/components/board/board-model.ts
+import { ChalkWhiteboardViewBounds } from "@q9labsai/chalk-client";
+var SURFACES = [
+  { id: "chalkboard", label: "Chalkboard" },
+  { id: "paper", label: "Paper" },
+  { id: "dots", label: "Dot grid" }
+];
+var ISLAND_PLACES = [
+  { id: "left", label: "Left" },
+  { id: "bottom", label: "Bottom" },
+  { id: "top", label: "Top" }
+];
+var PEN_COLORS = [
+  { id: "ink", label: "Ink" },
+  { id: "red", label: "Red" },
+  { id: "orange", label: "Orange" },
+  { id: "green", label: "Green" },
+  { id: "blue", label: "Blue" },
+  { id: "violet", label: "Violet" }
+];
+var PEN_HEX = { red: "#e23240", orange: "#c15a10", green: "#288a51", blue: "#1f7ad6", violet: "#935ae2" };
+var NOTE_FILL = { ink: "#f6e27a", red: "#f2a3a8", orange: "#f4be8c", green: "#a8dbb8", blue: "#a9cdf2", violet: "#cdb8f2" };
+var NOTE_TEXT = "#1b1c1e";
+var NOTE_SIZE = { width: 170, height: 150 };
+var NOTE_ROUNDNESS = { type: 3, value: 4 };
+var PEN_WIDTHS = [
+  { id: "thin", label: "Thin", units: 2.5 },
+  { id: "medium", label: "Medium", units: 4.5 },
+  { id: "thick", label: "Thick", units: 8 }
+];
+var SHAPES = [
+  { id: "rectangle", label: "Rectangle", key: "R" },
+  { id: "ellipse", label: "Ellipse", key: "O" },
+  { id: "diamond", label: "Diamond", key: "D" },
+  { id: "arrow", label: "Arrow", key: "A" },
+  { id: "line", label: "Line", key: "L" }
+];
+var TOOL_KEYS = { v: "selection", h: "hand", p: "pen", u: "highlighter", r: "rectangle", o: "ellipse", d: "diamond", a: "arrow", l: "line", t: "text", n: "note", e: "eraser", k: "laser" };
+var PERSON_COLORS = ["#1d70c5", "#8753d0", "#d02e3b", "#257f4b", "#b2530f", "#1b7979", "#c0307a", "#62751d", "#3b6fd4", "#a14fb5", "#b5512c", "#297f65"];
+function personColor(index) {
+  return PERSON_COLORS[(index % PERSON_COLORS.length + PERSON_COLORS.length) % PERSON_COLORS.length];
+}
+var DARK_SURFACES = /* @__PURE__ */ new Set(["chalkboard", "dots-dark"]);
+function surfaceKey(surface, theme) {
+  return surface === "dots" ? `dots-${theme}` : surface;
+}
+function isDarkSurface(surface, theme) {
+  return DARK_SURFACES.has(surfaceKey(surface, theme));
+}
+function surfaceInk(surface, theme) {
+  if (surface === "chalkboard") return "#f1f0ea";
+  if (surface === "paper") return "#1b1c1f";
+  return theme === "dark" ? "#ececee" : "#18181b";
+}
+function surfaceFill(surface, theme) {
+  if (surface === "chalkboard") return "#1c2622";
+  if (surface === "paper") return theme === "dark" ? "#eae6db" : "#f5f2ea";
+  return theme === "dark" ? "#151619" : "#ffffff";
+}
+function selectionColor(surface, theme) {
+  return isDarkSurface(surface, theme) ? "#7db8ff" : "#1f6fd0";
+}
+function penHex(color, surface, theme) {
+  return color === "ink" ? surfaceInk(surface, theme) : PEN_HEX[color];
+}
+function highlighterStyle(color, width) {
+  return { strokeColor: PEN_HEX[color === "ink" ? "orange" : color], strokeWidth: widthUnits(width) * 4, opacity: 40 };
+}
+var FREEHAND_SCALE = 4.25;
+function engineStrokeWidth(px, freehand) {
+  return freehand ? px / FREEHAND_SCALE : px;
+}
+function widthUnits(width) {
+  return PEN_WIDTHS.find((entry) => entry.id === width).units;
+}
+var MIN_ZOOM = 0.1;
+var MAX_ZOOM = 4;
+function clampZoom(zoom) {
+  return Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, zoom));
+}
+function visibleView(camera, viewport) {
+  const { maxCoordinate, maxExtent } = ChalkWhiteboardViewBounds;
+  return {
+    x: Math.max(-maxCoordinate, Math.min(maxCoordinate, -camera.scrollX)),
+    y: Math.max(-maxCoordinate, Math.min(maxCoordinate, -camera.scrollY)),
+    width: Math.min(maxExtent, viewport.width / camera.zoom),
+    height: Math.min(maxExtent, viewport.height / camera.zoom)
+  };
+}
+function cameraForView(view, viewport) {
+  const zoom = clampZoom(Math.min(viewport.width / view.width, viewport.height / view.height));
+  return { zoom, scrollX: viewport.width / (2 * zoom) - (view.x + view.width / 2), scrollY: viewport.height / (2 * zoom) - (view.y + view.height / 2) };
+}
+function zoomAroundCentre(camera, viewport, zoom) {
+  const next = clampZoom(zoom);
+  const centreX = viewport.width / 2 / camera.zoom - camera.scrollX;
+  const centreY = viewport.height / 2 / camera.zoom - camera.scrollY;
+  return { zoom: next, scrollX: viewport.width / 2 / next - centreX, scrollY: viewport.height / 2 / next - centreY };
+}
+function sameCamera(left, right) {
+  return Math.abs(left.zoom - right.zoom) < 1e-4 && Math.abs(left.scrollX - right.scrollX) < 0.5 && Math.abs(left.scrollY - right.scrollY) < 0.5;
+}
+function mixCamera(from, to, progress) {
+  const zoom = Math.exp(Math.log(from.zoom) + (Math.log(to.zoom) - Math.log(from.zoom)) * progress);
+  return { zoom, scrollX: from.scrollX + (to.scrollX - from.scrollX) * progress, scrollY: from.scrollY + (to.scrollY - from.scrollY) * progress };
+}
+function springStep(offset, velocity, rate, seconds) {
+  const decay = Math.exp(-rate * seconds);
+  const drift = (velocity + rate * offset) * seconds;
+  return [(offset + drift) * decay, (velocity - rate * drift) * decay];
+}
+function readStored(key, allowed, fallback3) {
+  try {
+    const value = globalThis.localStorage?.getItem(key);
+    return allowed.find((entry) => entry.id === value)?.id ?? fallback3;
+  } catch {
+    return fallback3;
+  }
+}
+function writeStored(key, value) {
+  try {
+    globalThis.localStorage?.setItem(key, value);
+  } catch {
+  }
+}
+
+// src/components/board/board-engine.ts
+var TEXT_FONT = 6;
+var NOTE_FONT_SIZE = 18;
+var BOUND_TEXT_PADDING = 5;
+function engineTool(tool) {
+  if (tool === "pen" || tool === "highlighter") return { type: "freedraw", locked: true };
+  if (tool === "note" || tool === "selection") return { type: "selection" };
+  return { type: tool, locked: true };
+}
+function penStyle(tool, pen) {
+  if (tool === "highlighter") return highlighterStyle(pen.color, pen.width);
+  return { strokeColor: penHex(pen.color, pen.surface, pen.theme), strokeWidth: widthUnits(pen.width), opacity: 100 };
+}
+function applyTool(engine, tool, pen) {
+  const style = penStyle(tool, pen);
+  engine.api.updateScene({
+    appState: {
+      currentItemStrokeColor: style.strokeColor,
+      currentItemStrokeWidth: engineStrokeWidth(style.strokeWidth, tool === "pen" || tool === "highlighter"),
+      currentItemOpacity: style.opacity,
+      currentItemRoughness: 0,
+      currentItemFontFamily: TEXT_FONT,
+      currentItemBackgroundColor: "transparent"
+    }
+  });
+  engine.api.setActiveTool(engineTool(tool));
+}
+function selectionStyle(element, pen, changes) {
+  if (element.type === "rectangle" && element.customData?.chalkNote) {
+    if (!changes.color) return {};
+    return { strokeColor: NOTE_FILL[changes.color], backgroundColor: NOTE_FILL[changes.color] };
+  }
+  const style = penStyle(element.type === "freedraw" && element.opacity === 40 ? "highlighter" : "pen", pen);
+  return {
+    ...changes.color ? { strokeColor: style.strokeColor } : {},
+    ...changes.width ? { strokeWidth: engineStrokeWidth(style.strokeWidth, element.type === "freedraw") } : {}
+  };
+}
+function styleChanged(element, updates) {
+  return updates.strokeColor !== void 0 && updates.strokeColor !== element.strokeColor || updates.strokeWidth !== void 0 && updates.strokeWidth !== element.strokeWidth || updates.backgroundColor !== void 0 && updates.backgroundColor !== element.backgroundColor;
+}
+function restyleSelection(engine, pen, changes) {
+  const { api, excalidraw } = engine;
+  const selected = api.getAppState().selectedElementIds;
+  let changed = false;
+  const elements = api.getSceneElementsIncludingDeleted().map((element) => {
+    if (!selected[element.id] || element.isDeleted) return element;
+    const updates = selectionStyle(element, pen, changes);
+    if (!styleChanged(element, updates)) return element;
+    changed = true;
+    return excalidraw.newElementWith(element, updates);
+  });
+  if (changed) api.updateScene({ elements, captureUpdate: excalidraw.CaptureUpdateAction.IMMEDIATELY });
+  return changed;
+}
+function placeNote(engine, container, point, color) {
+  const { api, excalidraw } = engine;
+  const fill = NOTE_FILL[color];
+  const [note] = excalidraw.convertToExcalidrawElements([
+    { type: "rectangle", x: point.x - NOTE_SIZE.width / 2, y: point.y - NOTE_SIZE.height / 2, width: NOTE_SIZE.width, height: NOTE_SIZE.height, backgroundColor: fill, strokeColor: fill, fillStyle: "solid", strokeWidth: 1, roughness: 0, roundness: NOTE_ROUNDNESS, customData: { chalkNote: true } }
+  ]);
+  if (!note) return;
+  api.updateScene({
+    elements: [...api.getSceneElementsIncludingDeleted(), note],
+    appState: { selectedElementIds: { [note.id]: true }, currentItemStrokeColor: NOTE_TEXT, currentItemFontSize: NOTE_FONT_SIZE, currentItemTextAlign: "left", currentItemFontFamily: TEXT_FONT },
+    captureUpdate: excalidraw.CaptureUpdateAction.IMMEDIATELY
+  });
+  api.setActiveTool({ type: "selection" });
+  requestAnimationFrame(() => container.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", code: "Enter", bubbles: true })));
+}
+function settleNoteText(engine) {
+  const { api, excalidraw } = engine;
+  const elements = api.getSceneElementsIncludingDeleted();
+  const notes = new Map(elements.filter((element) => element.type === "rectangle" && element.customData?.chalkNote).map((element) => [element.id, element]));
+  let changed = false;
+  const next = elements.map((element) => {
+    if (element.type !== "text" || !element.containerId || element.isDeleted) return element;
+    const note = notes.get(element.containerId);
+    if (!note) return element;
+    const x = note.x + BOUND_TEXT_PADDING;
+    const y = note.y + BOUND_TEXT_PADDING;
+    if (element.verticalAlign === "top" && element.textAlign === "left" && element.strokeColor === NOTE_TEXT && element.x === x && element.y === y) return element;
+    changed = true;
+    return excalidraw.newElementWith(element, { verticalAlign: "top", textAlign: "left", strokeColor: NOTE_TEXT, x, y });
+  });
+  if (changed) api.updateScene({ elements: next, captureUpdate: excalidraw.CaptureUpdateAction.NEVER });
+}
+var isApple = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+function pressHistory(container, redo) {
+  const apple = isApple();
+  container.dispatchEvent(new KeyboardEvent("keydown", { key: redo ? "Z" : "z", code: "KeyZ", shiftKey: redo, metaKey: apple, ctrlKey: !apple, bubbles: true }));
+}
+function readCamera(engine) {
+  const state = engine.api.getAppState();
+  return { scrollX: state.scrollX, scrollY: state.scrollY, zoom: state.zoom.value };
+}
+function setCamera(engine, camera) {
+  engine.api.updateScene({ appState: { scrollX: camera.scrollX, scrollY: camera.scrollY, zoom: { value: camera.zoom } } });
+}
+function hasContent(engine) {
+  return engine.api.getSceneElements().length > 0;
+}
+async function boardImage(engine, background) {
+  const { api, excalidraw } = engine;
+  return excalidraw.exportToBlob({ elements: api.getSceneElements(), files: api.getFiles(), appState: { exportBackground: true, viewBackgroundColor: background }, mimeType: "image/png", exportPadding: 24 });
+}
+function sceneSignature(engine) {
+  return engine.excalidraw.getSceneVersion(engine.api.getSceneElementsIncludingDeleted());
+}
+
+// src/components/board/BoardCursors.tsx
+import { useEffect as useEffect36, useRef as useRef31, useState as useState41 } from "react";
+
+// src/components/board/BoardIcon.tsx
+import { Fragment as Fragment28, jsx as jsx69, jsxs as jsxs44 } from "react/jsx-runtime";
+var GLYPHS2 = {
+  select: /* @__PURE__ */ jsx69("path", { d: "M5 3l14 7-6.5 2L10 19z" }),
+  hand: /* @__PURE__ */ jsx69("path", { d: "M18 11V6a2 2 0 0 0-4 0M14 10V4a2 2 0 0 0-4 0v2M10 10.5V6a2 2 0 0 0-4 0v8M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.9-6-2.3l-3.6-3.6a2 2 0 0 1 2.8-2.8L7 15" }),
+  pen: /* @__PURE__ */ jsx69("path", { d: "M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z" }),
+  highlighter: /* @__PURE__ */ jsxs44(Fragment28, { children: [
+    /* @__PURE__ */ jsx69("path", { d: "M9 11l-6 6v3h9l3-3" }),
+    /* @__PURE__ */ jsx69("path", { d: "M22 12l-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4" })
+  ] }),
+  rectangle: /* @__PURE__ */ jsx69("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+  ellipse: /* @__PURE__ */ jsx69("ellipse", { cx: "12", cy: "12", rx: "9", ry: "6.5" }),
+  diamond: /* @__PURE__ */ jsx69("path", { d: "M12 3l9 9-9 9-9-9z" }),
+  arrow: /* @__PURE__ */ jsx69("path", { d: "M5 19L19 5M9 5h10v10" }),
+  line: /* @__PURE__ */ jsx69("path", { d: "M4 20L20 4" }),
+  text: /* @__PURE__ */ jsx69("path", { d: "M5 6V4h14v2M12 4v16M9 20h6" }),
+  note: /* @__PURE__ */ jsxs44(Fragment28, { children: [
+    /* @__PURE__ */ jsx69("path", { d: "M5 3h14a2 2 0 0 1 2 2v9l-7 7H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" }),
+    /* @__PURE__ */ jsx69("path", { d: "M14 21v-5a2 2 0 0 1 2-2h5" })
+  ] }),
+  eraser: /* @__PURE__ */ jsx69("path", { d: "M7 21h10M5.5 13.5l7-7a2 2 0 0 1 2.8 0l3.2 3.2a2 2 0 0 1 0 2.8L11 19H8l-2.5-2.5a2 2 0 0 1 0-3z" }),
+  laser: /* @__PURE__ */ jsxs44(Fragment28, { children: [
+    /* @__PURE__ */ jsx69("circle", { cx: "12", cy: "12", r: "2.5", fill: "currentColor" }),
+    /* @__PURE__ */ jsx69("path", { d: "M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1" })
+  ] }),
+  undo: /* @__PURE__ */ jsxs44(Fragment28, { children: [
+    /* @__PURE__ */ jsx69("path", { d: "M9 14L4 9l5-5" }),
+    /* @__PURE__ */ jsx69("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 0 11H11" })
+  ] }),
+  redo: /* @__PURE__ */ jsxs44(Fragment28, { children: [
+    /* @__PURE__ */ jsx69("path", { d: "M15 14l5-5-5-5" }),
+    /* @__PURE__ */ jsx69("path", { d: "M20 9H9.5a5.5 5.5 0 0 0 0 11H13" })
+  ] }),
+  minus: /* @__PURE__ */ jsx69("path", { d: "M5 12h14" }),
+  plus: /* @__PURE__ */ jsx69("path", { d: "M12 5v14M5 12h14" }),
+  fit: /* @__PURE__ */ jsx69("path", { d: "M4 9V5a1 1 0 0 1 1-1h4M20 9V5a1 1 0 0 0-1-1h-4M4 15v4a1 1 0 0 0 1 1h4M20 15v4a1 1 0 0 1-1 1h-4" }),
+  download: /* @__PURE__ */ jsx69("path", { d: "M12 3v12M7 10l5 5 5-5M4 21h16" }),
+  copy: /* @__PURE__ */ jsxs44(Fragment28, { children: [
+    /* @__PURE__ */ jsx69("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2" }),
+    /* @__PURE__ */ jsx69("path", { d: "M5 15V5a2 2 0 0 1 2-2h10" })
+  ] }),
+  trash: /* @__PURE__ */ jsx69("path", { d: "M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3" }),
+  close: /* @__PURE__ */ jsx69("path", { d: "M6 6l12 12M18 6L6 18" }),
+  check: /* @__PURE__ */ jsx69("path", { d: "M5 12l5 5 9-10" }),
+  target: /* @__PURE__ */ jsxs44(Fragment28, { children: [
+    /* @__PURE__ */ jsx69("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ jsx69("circle", { cx: "12", cy: "12", r: "4" })
+  ] }),
+  eye: /* @__PURE__ */ jsxs44(Fragment28, { children: [
+    /* @__PURE__ */ jsx69("path", { d: "M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z" }),
+    /* @__PURE__ */ jsx69("circle", { cx: "12", cy: "12", r: "3" })
+  ] }),
+  wifiOff: /* @__PURE__ */ jsx69("path", { d: "M2 2l20 20M8.5 16.5a5 5 0 0 1 7 0M5 12.9a10 10 0 0 1 5-2.7M10.7 5.1A16 16 0 0 1 22 9M2 8.8a15 15 0 0 1 4.2-2.5M12 20h.01" }),
+  lock: /* @__PURE__ */ jsxs44(Fragment28, { children: [
+    /* @__PURE__ */ jsx69("rect", { x: "5", y: "11", width: "14", height: "9", rx: "2" }),
+    /* @__PURE__ */ jsx69("path", { d: "M8 11V8a4 4 0 0 1 8 0v3" })
+  ] }),
+  more: /* @__PURE__ */ jsxs44(Fragment28, { children: [
+    /* @__PURE__ */ jsx69("circle", { cx: "5", cy: "12", r: "1.2" }),
+    /* @__PURE__ */ jsx69("circle", { cx: "12", cy: "12", r: "1.2" }),
+    /* @__PURE__ */ jsx69("circle", { cx: "19", cy: "12", r: "1.2" })
+  ] }),
+  chevron: /* @__PURE__ */ jsx69("path", { d: "M6 9l6 6 6-6" })
+};
+function BoardIcon({ name, size = 20, className }) {
+  return /* @__PURE__ */ jsx69("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": "true", children: GLYPHS2[name] });
+}
+function GripIcon({ className }) {
+  return /* @__PURE__ */ jsx69("svg", { width: "10", height: "18", viewBox: "0 0 10 18", fill: "currentColor", className, "aria-hidden": "true", children: [3, 9, 15].flatMap((y) => [/* @__PURE__ */ jsx69("circle", { cx: "2.5", cy: y, r: "1.5" }, `l${y}`), /* @__PURE__ */ jsx69("circle", { cx: "7.5", cy: y, r: "1.5" }, `r${y}`)]) });
+}
+function CursorArrow({ color }) {
+  const path = "M3.2 2.6V20.2L8 15.7L11.3 22.6L14.6 21L11.4 14.2L17.9 13.6Z";
+  return /* @__PURE__ */ jsxs44("svg", { className: "chalk-board-cursor-arrow", width: "22", height: "26", viewBox: "0 0 22 26", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx69("path", { d: path, fill: "#fff", stroke: "#fff", strokeWidth: "5", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx69("path", { d: path, fill: color, stroke: color, strokeWidth: "2.2", strokeLinejoin: "round" })
+  ] });
+}
+
+// src/components/board/BoardCursors.tsx
+import { jsx as jsx70, jsxs as jsxs45 } from "react/jsx-runtime";
+var REST_RATE = 16;
+var STALE_MS = 1e4;
+var NAME_HOLD_MS = 700;
+var MOVING_PX_PER_SECOND = 25;
+var HOVER_PX = 26;
+function rememberCursor(cursors, cursor) {
+  const now = Date.now();
+  for (const [id, previous] of cursors) if (now - Date.parse(previous.occurredAt) > STALE_MS) cursors.delete(id);
+  cursors.delete(cursor.participantId);
+  if (now - Date.parse(cursor.occurredAt) <= STALE_MS) cursors.set(cursor.participantId, cursor);
+  if (cursors.size > 256) {
+    const oldest = cursors.keys().next().value;
+    if (oldest !== void 0) cursors.delete(oldest);
+  }
+}
+function BoardCursors({ cursorsRef, cameraRef, colorFor, hidden }) {
+  const layer = useRef31(null);
+  const [people, setPeople] = useState41([]);
+  const tracked = useRef31(/* @__PURE__ */ new Map());
+  const pointer = useRef31(null);
+  useEffect36(() => {
+    let frame = 0;
+    let last = performance.now();
+    const step = (now) => {
+      const seconds = Math.min(0.1, (now - last) / 1e3);
+      last = now;
+      const camera = cameraRef.current;
+      const roster = cursorsRef.current;
+      let rosterChanged = false;
+      for (const [id, cursor] of roster) {
+        if (Date.now() - Date.parse(cursor.occurredAt) > STALE_MS) {
+          roster.delete(id);
+          continue;
+        }
+        let state = tracked.current.get(id);
+        if (!state) {
+          state = { name: cursor.displayName, x: cursor.x, y: cursor.y, vx: 0, vy: 0, tx: cursor.x, ty: cursor.y, movingUntil: 0, lastX: cursor.x, lastY: cursor.y };
+          tracked.current.set(id, state);
+          rosterChanged = true;
+        }
+        if (state.name !== cursor.displayName) {
+          state.name = cursor.displayName;
+          rosterChanged = true;
+        }
+        if (cursor.x !== state.tx || cursor.y !== state.ty) {
+          state.tx = cursor.x;
+          state.ty = cursor.y;
+        }
+      }
+      for (const [id, state] of tracked.current) {
+        if (!roster.has(id)) {
+          tracked.current.delete(id);
+          roster.delete(id);
+          rosterChanged = true;
+          continue;
+        }
+        const [dx, vx] = springStep(state.x - state.tx, state.vx, REST_RATE, seconds);
+        const [dy, vy] = springStep(state.y - state.ty, state.vy, REST_RATE, seconds);
+        state.x = state.tx + dx;
+        state.y = state.ty + dy;
+        state.vx = vx;
+        state.vy = vy;
+        const screenX = (state.x + camera.scrollX) * camera.zoom;
+        const screenY = (state.y + camera.scrollY) * camera.zoom;
+        const speed = Math.hypot(screenX - state.lastX, screenY - state.lastY) / Math.max(seconds, 1e-3);
+        state.lastX = screenX;
+        state.lastY = screenY;
+        if (speed > MOVING_PX_PER_SECOND) state.movingUntil = now + NAME_HOLD_MS;
+        const element = layer.current?.querySelector(`[data-cursor="${CSS.escape(id)}"]`);
+        if (!element) continue;
+        element.style.transform = `translate3d(${screenX}px, ${screenY}px, 0)`;
+        const near = pointer.current !== null && Math.hypot(pointer.current.x - screenX, pointer.current.y - screenY) < HOVER_PX;
+        element.dataset.named = String(near || now < state.movingUntil);
+      }
+      if (rosterChanged) setPeople([...roster.values()].filter((cursor) => tracked.current.has(cursor.participantId)).map((cursor) => ({ id: cursor.participantId, name: cursor.displayName })));
+      frame = requestAnimationFrame(step);
+    };
+    frame = requestAnimationFrame(step);
+    return () => cancelAnimationFrame(frame);
+  }, [cameraRef, cursorsRef]);
+  useEffect36(() => {
+    const board = layer.current?.parentElement;
+    if (!board) return;
+    const move = (event) => {
+      const rect = board.getBoundingClientRect();
+      pointer.current = { x: event.clientX - rect.left, y: event.clientY - rect.top };
+    };
+    const leave = () => pointer.current = null;
+    board.addEventListener("pointermove", move);
+    board.addEventListener("pointerleave", leave);
+    return () => {
+      board.removeEventListener("pointermove", move);
+      board.removeEventListener("pointerleave", leave);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx70("div", { ref: layer, className: "chalk-board-cursors", "aria-hidden": "true", "data-hidden": hidden || void 0, children: people.map((person) => /* @__PURE__ */ jsxs45("div", { className: "chalk-board-cursor", "data-cursor": person.id, children: [
+    /* @__PURE__ */ jsx70(CursorArrow, { color: colorFor(person.id) }),
+    /* @__PURE__ */ jsxs45("span", { className: "chalk-board-cursor-tag", children: [
+      /* @__PURE__ */ jsx70("span", { className: "chalk-board-cursor-name", style: { background: colorFor(person.id) }, children: person.name.split(" ")[0] }),
+      /* @__PURE__ */ jsx70(Avatar, { name: person.name, size: "xs", animated: false, className: "chalk-board-cursor-avatar" })
+    ] })
+  ] }, person.id)) });
+}
+
+// src/components/board/BoardIsland.tsx
+import { useLayoutEffect as useLayoutEffect4, useRef as useRef32, useState as useState42 } from "react";
+import { Fragment as Fragment29, jsx as jsx71, jsxs as jsxs46 } from "react/jsx-runtime";
+var TOOLS = [
+  [
+    { tool: "selection", label: "Select", key: "V", glyph: "select" },
+    { tool: "hand", label: "Hand", key: "H", glyph: "hand" }
+  ],
+  [
+    { tool: "pen", label: "Pen", key: "P", glyph: "pen" },
+    { tool: "highlighter", label: "Highlighter", key: "U", glyph: "highlighter" }
+  ],
+  [
+    { tool: "text", label: "Text", key: "T", glyph: "text" },
+    { tool: "note", label: "Sticky note", key: "N", glyph: "note" }
+  ],
+  [
+    { tool: "eraser", label: "Eraser", key: "E", glyph: "eraser" },
+    { tool: "laser", label: "Laser pointer", key: "K", glyph: "laser" }
+  ]
+];
+var LONG_PRESS_MS = 500;
+var DRAG_START_PX = 4;
+function Tip({ label, keyName, children }) {
+  return /* @__PURE__ */ jsxs46(ChalkTooltip, { trigger: children, children: [
+    label,
+    keyName ? /* @__PURE__ */ jsx71("kbd", { className: "chalk-board-kbd", children: keyName }) : null
+  ] });
+}
+function ToolButton({ entry, active, onTool }) {
+  return /* @__PURE__ */ jsx71(Tip, { label: entry.label, keyName: entry.key, children: /* @__PURE__ */ jsx71("button", { type: "button", className: "chalk-board-tool", "aria-label": entry.label, "aria-keyshortcuts": entry.key, "aria-pressed": active, onClick: () => onTool(entry.tool), children: /* @__PURE__ */ jsx71(BoardIcon, { name: entry.glyph }) }) });
+}
+function ShapesButton({ tool, shape, onTool, side }) {
+  const active = SHAPES.some((entry) => entry.id === tool);
+  return /* @__PURE__ */ jsx71(
+    ChalkMenu,
+    {
+      side,
+      trigger: /* @__PURE__ */ jsxs46("button", { type: "button", className: "chalk-board-tool", "aria-label": "Shapes", "aria-keyshortcuts": "R", "aria-pressed": active, children: [
+        /* @__PURE__ */ jsx71(BoardIcon, { name: shape }),
+        /* @__PURE__ */ jsx71(BoardIcon, { name: "chevron", size: 9, className: "chalk-board-tool-caret" })
+      ] }),
+      children: SHAPES.map((entry) => /* @__PURE__ */ jsxs46(ChalkMenuItem, { checked: tool === entry.id, onClick: () => onTool(entry.id), children: [
+        /* @__PURE__ */ jsx71(BoardIcon, { name: entry.id, size: 18 }),
+        entry.label,
+        /* @__PURE__ */ jsx71("kbd", { className: "chalk-board-menu-kbd", children: entry.key })
+      ] }, entry.id))
+    }
+  );
+}
+function ColorPanel({ color, width, surface, theme, onColor, onWidth }) {
+  return /* @__PURE__ */ jsxs46("div", { className: "chalk-board-colors", children: [
+    /* @__PURE__ */ jsx71("div", { role: "radiogroup", "aria-label": "Colour", className: "chalk-board-swatches", children: PEN_COLORS.map((entry) => /* @__PURE__ */ jsx71("button", { type: "button", role: "radio", "aria-checked": color === entry.id, "aria-label": entry.label, className: "chalk-board-swatch", onClick: () => onColor(entry.id), children: /* @__PURE__ */ jsx71("i", { style: { background: penHex(entry.id, surface, theme) } }) }, entry.id)) }),
+    /* @__PURE__ */ jsx71("div", { role: "radiogroup", "aria-label": "Stroke width", className: "chalk-board-swatches", children: PEN_WIDTHS.map((entry) => /* @__PURE__ */ jsx71("button", { type: "button", role: "radio", "aria-checked": width === entry.id, "aria-label": entry.label, className: "chalk-board-width", onClick: () => onWidth(entry.id), children: /* @__PURE__ */ jsx71("i", { style: { height: entry.units } }) }, entry.id)) })
+  ] });
+}
+function ColorButton(props) {
+  const swatch = penHex(props.color, props.surface, props.theme);
+  return /* @__PURE__ */ jsx71(
+    ChalkPopover,
+    {
+      label: "Colour and width",
+      tooltip: "Colour and width",
+      open: props.open,
+      onOpenChange: props.onOpenChange,
+      className: "chalk-board-color-popover",
+      trigger: props.trigger ?? /* @__PURE__ */ jsx71("button", { type: "button", className: "chalk-board-tool", "aria-label": `Colour: ${PEN_COLORS.find((entry) => entry.id === props.color).label}`, children: /* @__PURE__ */ jsx71("span", { className: "chalk-board-tool-swatch", style: { background: swatch } }) }),
+      children: /* @__PURE__ */ jsx71(ColorPanel, { ...props })
+    }
+  );
+}
+function roveFocus(event, vertical) {
+  const back = vertical ? "ArrowUp" : "ArrowLeft";
+  const forward = vertical ? "ArrowDown" : "ArrowRight";
+  if (event.key !== back && event.key !== forward && event.key !== "Home" && event.key !== "End") return;
+  const buttons = [...event.currentTarget.querySelectorAll("button:not(:disabled)")];
+  const index = buttons.findIndex((button) => button === document.activeElement);
+  if (index < 0) return;
+  event.preventDefault();
+  event.stopPropagation();
+  const next = event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : (index + (event.key === forward ? 1 : -1) + buttons.length) % buttons.length;
+  buttons[next]?.focus();
+}
+function Separator() {
+  return /* @__PURE__ */ jsx71("span", { className: "chalk-board-separator", "aria-hidden": "true" });
+}
+function ToolRow({ tool, shape, onTool, place, canUndo, canRedo, onUndo, onRedo, ...colors }) {
+  const groups = TOOLS.map((group, index) => /* @__PURE__ */ jsxs46("span", { className: "chalk-board-group", children: [
+    group.map((entry) => /* @__PURE__ */ jsx71(ToolButton, { entry, active: tool === entry.tool, onTool }, entry.tool)),
+    index === 1 ? /* @__PURE__ */ jsx71(ShapesButton, { tool, shape, onTool, side: place === "top" ? "bottom" : "top" }) : null
+  ] }, index));
+  return /* @__PURE__ */ jsxs46(Fragment29, { children: [
+    groups.flatMap((group, index) => [index > 0 ? /* @__PURE__ */ jsx71(Separator, {}, `s${index}`) : null, group]),
+    /* @__PURE__ */ jsx71(Separator, {}),
+    /* @__PURE__ */ jsx71(Tip, { label: "Undo", keyName: "\u2318Z", children: /* @__PURE__ */ jsx71("button", { type: "button", className: "chalk-board-tool", "aria-label": "Undo", disabled: !canUndo, onClick: onUndo, children: /* @__PURE__ */ jsx71(BoardIcon, { name: "undo" }) }) }),
+    /* @__PURE__ */ jsx71(Tip, { label: "Redo", keyName: "\u21E7\u2318Z", children: /* @__PURE__ */ jsx71("button", { type: "button", className: "chalk-board-tool", "aria-label": "Redo", disabled: !canRedo, onClick: onRedo, children: /* @__PURE__ */ jsx71(BoardIcon, { name: "redo" }) }) }),
+    /* @__PURE__ */ jsx71(Separator, {}),
+    /* @__PURE__ */ jsx71(ColorButton, { ...colors })
+  ] });
+}
+function nearestPlace(board, x, y) {
+  const distances = { left: x - board.left, bottom: board.bottom - y, top: y - board.top };
+  return ISLAND_PLACES.map((entry) => entry.id).reduce((best, place) => distances[place] < distances[best] ? place : best);
+}
+function BoardIsland(props) {
+  const { place, onPlace, compact } = props;
+  const island = useRef32(null);
+  const tabStop = useRef32(null);
+  const reduced = usePrefersReducedMotion();
+  const [drag, setDrag] = useState42(null);
+  const dropRect = useRef32(null);
+  const [expanded, setExpanded] = useState42(false);
+  const [colorsOpen, setColorsOpen] = useState42(false);
+  const press = useRef32({ long: false });
+  useLayoutEffect4(() => {
+    const buttons = [...island.current?.querySelectorAll("button") ?? []];
+    const stop = buttons.find((button) => button === tabStop.current && !button.disabled) ?? buttons.find((button) => !button.disabled);
+    tabStop.current = stop ?? null;
+    for (const button of buttons) button.tabIndex = button === stop ? 0 : -1;
+  });
+  useLayoutEffect4(() => {
+    const element = island.current;
+    const from = dropRect.current;
+    dropRect.current = null;
+    if (!element || !from || reduced) return;
+    const to = element.getBoundingClientRect();
+    element.animate(
+      [
+        { transform: `translate(${from.left - to.left}px, ${from.top - to.top}px)`, opacity: 0.85 },
+        { transform: "none", opacity: 1 }
+      ],
+      { duration: 300, easing: "cubic-bezier(0.16, 1, 0.3, 1)" }
+    );
+  }, [place, reduced]);
+  const startDrag = (event) => {
+    const board = island.current?.parentElement;
+    if (!board || event.button !== 0) return;
+    const start = { x: event.clientX, y: event.clientY };
+    let moved = false;
+    const grip = event.currentTarget;
+    grip.setPointerCapture(event.pointerId);
+    const move = (next) => {
+      const dx = next.clientX - start.x;
+      const dy = next.clientY - start.y;
+      if (!moved && Math.hypot(dx, dy) < DRAG_START_PX) return;
+      moved = true;
+      setDrag({ x: dx, y: dy, near: nearestPlace(board.getBoundingClientRect(), next.clientX, next.clientY) });
+    };
+    const end = (next) => {
+      grip.removeEventListener("pointermove", move);
+      grip.removeEventListener("pointerup", end);
+      grip.removeEventListener("pointercancel", end);
+      if (moved && next.type === "pointerup") {
+        dropRect.current = island.current?.getBoundingClientRect() ?? null;
+        onPlace(nearestPlace(board.getBoundingClientRect(), next.clientX, next.clientY), true);
+      }
+      setDrag(null);
+    };
+    grip.addEventListener("pointermove", move);
+    grip.addEventListener("pointerup", end);
+    grip.addEventListener("pointercancel", end);
+  };
+  const gripKeys = (event) => {
+    if (!event.altKey) return;
+    const target = { ArrowLeft: "left", ArrowDown: "bottom", ArrowUp: "top" };
+    const next = target[event.key];
+    if (!next) return;
+    event.preventDefault();
+    event.stopPropagation();
+    if (next !== place) {
+      dropRect.current = island.current?.getBoundingClientRect() ?? null;
+      onPlace(next, true);
+    }
+  };
+  if (compact && !expanded) {
+    const cancelPress = () => clearTimeout(press.current.timer);
+    return /* @__PURE__ */ jsx71("div", { ref: island, className: "chalk-board-island", "data-place": "compact", children: /* @__PURE__ */ jsx71(
+      ColorButton,
+      {
+        ...props,
+        open: colorsOpen,
+        onOpenChange: (open) => {
+          if (!open) setColorsOpen(false);
+        },
+        trigger: /* @__PURE__ */ jsxs46(
+          "button",
+          {
+            type: "button",
+            className: "chalk-board-tool",
+            "aria-label": "Drawing tools",
+            "aria-expanded": false,
+            onPointerDown: () => {
+              press.current.long = false;
+              press.current.timer = setTimeout(() => {
+                press.current.long = true;
+                setColorsOpen(true);
+              }, LONG_PRESS_MS);
+            },
+            onPointerUp: cancelPress,
+            onPointerLeave: cancelPress,
+            onContextMenu: (event) => event.preventDefault(),
+            onClick: () => {
+              if (!press.current.long) setExpanded(true);
+            },
+            children: [
+              /* @__PURE__ */ jsx71(BoardIcon, { name: "pen" }),
+              /* @__PURE__ */ jsx71("span", { className: "chalk-board-tool-dot", style: { background: penHex(props.color, props.surface, props.theme) } })
+            ]
+          }
+        )
+      }
+    ) });
+  }
+  const vertical = place === "left" && !compact;
+  return /* @__PURE__ */ jsxs46(Fragment29, { children: [
+    drag ? ISLAND_PLACES.map((entry) => /* @__PURE__ */ jsx71("div", { className: "chalk-board-dropzone", "data-zone": entry.id, "data-near": drag.near === entry.id || void 0, "aria-hidden": "true" }, entry.id)) : null,
+    /* @__PURE__ */ jsxs46(
+      "div",
+      {
+        ref: island,
+        role: "toolbar",
+        "aria-label": "Drawing tools",
+        "aria-orientation": vertical ? "vertical" : "horizontal",
+        className: "chalk-board-island",
+        "data-place": compact ? "expanded" : place,
+        "data-dragging": drag ? true : void 0,
+        style: drag ? { transform: `translate(${drag.x}px, ${drag.y}px)` } : void 0,
+        onKeyDownCapture: (event) => {
+          if (!event.altKey) roveFocus(event, vertical);
+        },
+        onFocusCapture: (event) => {
+          if (!(event.target instanceof HTMLButtonElement) || !event.currentTarget.contains(event.target)) return;
+          tabStop.current = event.target;
+          for (const button of event.currentTarget.querySelectorAll("button")) button.tabIndex = button === event.target ? 0 : -1;
+        },
+        children: [
+          compact ? /* @__PURE__ */ jsxs46(Fragment29, { children: [
+            /* @__PURE__ */ jsx71("button", { type: "button", className: "chalk-board-tool", "aria-label": "Close drawing tools", onClick: () => setExpanded(false), children: /* @__PURE__ */ jsx71(BoardIcon, { name: "close" }) }),
+            /* @__PURE__ */ jsx71(Separator, {})
+          ] }) : /* @__PURE__ */ jsx71(Tip, { label: "Move the tools", children: /* @__PURE__ */ jsx71("button", { type: "button", className: "chalk-board-grip", "aria-label": "Move the tools. Use Alt and the arrow keys to dock them left, bottom or top.", onPointerDown: startDrag, onKeyDown: gripKeys, children: /* @__PURE__ */ jsx71(GripIcon, {}) }) }),
+          /* @__PURE__ */ jsx71(ToolRow, { ...props, place: compact ? "bottom" : place })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/board/BoardMenu.tsx
+import { Menu as Menu5 } from "@base-ui/react/menu";
+import { Fragment as Fragment30, jsx as jsx72, jsxs as jsxs47 } from "react/jsx-runtime";
+function SurfacePreview({ surface }) {
+  return /* @__PURE__ */ jsx72("span", { className: "chalk-board-tile-preview", "data-surface": surface, "aria-hidden": "true", children: surface === "dots" ? null : /* @__PURE__ */ jsx72("svg", { viewBox: "0 0 60 38", width: "100%", height: "100%", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx72("path", { d: "M14 22c5-8 9-8 12 0s8 6 12-2 6-6 8 0" }) }) });
+}
+function IslandPreview({ place }) {
+  return /* @__PURE__ */ jsx72("span", { className: "chalk-board-tile-preview", "data-island": place, "aria-hidden": "true", children: /* @__PURE__ */ jsx72("i", {}) });
+}
+function Tiles({ label, value, options, onChange, preview }) {
+  return /* @__PURE__ */ jsxs47(Fragment30, { children: [
+    /* @__PURE__ */ jsx72("div", { className: "chalk-board-menu-sublabel", children: label }),
+    /* @__PURE__ */ jsx72(Menu5.RadioGroup, { value, onValueChange: (next) => onChange(next), className: "chalk-board-tiles", "aria-label": label, children: options.map((option) => /* @__PURE__ */ jsxs47(Menu5.RadioItem, { value: option.id, closeOnClick: false, className: "chalk-board-tile", children: [
+      preview(option.id),
+      option.label
+    ] }, option.id)) })
+  ] });
+}
+function BoardMenu({ surface, onSurface, place, onPlace, onDownload, onCopy, onBring, onClear, onClose }) {
+  return /* @__PURE__ */ jsxs47(
+    ChalkMenu,
+    {
+      className: "chalk-board-menu",
+      trigger: /* @__PURE__ */ jsx72("button", { type: "button", className: "chalk-board-menu-button", "aria-label": "Board menu", children: /* @__PURE__ */ jsx72(BoardIcon, { name: "more" }) }),
+      children: [
+        /* @__PURE__ */ jsxs47(ChalkMenuItem, { onClick: onDownload, children: [
+          /* @__PURE__ */ jsx72(BoardIcon, { name: "download", size: 18 }),
+          "Download as PNG"
+        ] }),
+        /* @__PURE__ */ jsxs47(ChalkMenuItem, { onClick: onCopy, children: [
+          /* @__PURE__ */ jsx72(BoardIcon, { name: "copy", size: 18 }),
+          "Copy as image"
+        ] }),
+        /* @__PURE__ */ jsx72(Menu5.Separator, { className: "chalk-board-menu-rule" }),
+        /* @__PURE__ */ jsx72(ChalkMenuLabel, { children: "Board appearance" }),
+        /* @__PURE__ */ jsx72(Tiles, { label: "Surface", value: surface, options: SURFACES, onChange: onSurface, preview: (id) => /* @__PURE__ */ jsx72(SurfacePreview, { surface: id }) }),
+        place ? /* @__PURE__ */ jsx72(Tiles, { label: "Tool island", value: place, options: ISLAND_PLACES, onChange: onPlace, preview: (id) => /* @__PURE__ */ jsx72(IslandPreview, { place: id }) }) : null,
+        onBring || onClear ? /* @__PURE__ */ jsx72(Menu5.Separator, { className: "chalk-board-menu-rule" }) : null,
+        onBring ? /* @__PURE__ */ jsxs47(ChalkMenuItem, { onClick: onBring, children: [
+          /* @__PURE__ */ jsx72(BoardIcon, { name: "target", size: 18 }),
+          "Bring everyone here"
+        ] }) : null,
+        onClear ? /* @__PURE__ */ jsx72(ChalkMenuItem, { onClick: onClear, children: /* @__PURE__ */ jsxs47("span", { className: "chalk-board-danger", children: [
+          /* @__PURE__ */ jsx72(BoardIcon, { name: "trash", size: 18 }),
+          "Clear board"
+        ] }) }) : null,
+        onClose ? /* @__PURE__ */ jsxs47(Fragment30, { children: [
+          /* @__PURE__ */ jsx72(Menu5.Separator, { className: "chalk-board-menu-rule" }),
+          /* @__PURE__ */ jsxs47(ChalkMenuItem, { onClick: onClose, children: [
+            /* @__PURE__ */ jsx72(BoardIcon, { name: "close", size: 18 }),
+            "Close board"
+          ] })
+        ] }) : null
+      ]
+    }
+  );
+}
+
+// src/components/board/BoardStyles.tsx
+import { jsx as jsx73 } from "react/jsx-runtime";
+function BoardStyles() {
+  return /* @__PURE__ */ jsx73("style", { href: "chalk-board", precedence: "default", children: BOARD_CSS });
+}
+var BOARD_CSS = `.chalk-board {
+  --board-shadow: 0 0 0 1px var(--chalk-line-strong), 0 8px 24px rgba(0,0,0,.35);
+  --board-dot-gap: 24px;
+  --board-dot-x: 0px;
+  --board-dot-y: 0px;
+  position: relative;
+  height: 100%;
+  overflow: clip;
+  border-radius: inherit;
+  background-color: var(--board-fill);
+  color: var(--board-ink);
+  font-family: var(--chalk-font-family, Figtree, system-ui, sans-serif);
+  isolation: isolate;
+}
+.chalk-board[hidden] {display:none;}
+.chalk-board[data-theme="light"] {--board-shadow: 0 0 0 1px var(--chalk-line-strong), 0 8px 24px rgba(0,0,0,.12);}
+.chalk-board[data-surface="chalkboard"] {
+  --board-fill: #1c2622;
+  --board-ink: #f1f0ea;
+  --board-muted: #aeb9b4;
+  background-image: radial-gradient(120% 90% at 50% 35%, rgba(255,255,255,.05), transparent 70%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
+}
+.chalk-board[data-surface="paper"] {--board-fill: #eae6db; --board-ink: #1b1c1f; --board-muted: #5d5a52;}
+.chalk-board[data-surface="paper"][data-theme="light"] {--board-fill: #f5f2ea;}
+.chalk-board[data-surface="dots"] {
+  --board-fill: var(--chalk-surface);
+  --board-ink: var(--chalk-text);
+  --board-muted: var(--chalk-muted-text);
+  --board-dot: rgba(255,255,255,.11);
+  background-image: radial-gradient(var(--board-dot) 1.3px, transparent 1.7px);
+  background-size: var(--board-dot-gap) var(--board-dot-gap);
+  background-position: var(--board-dot-x) var(--board-dot-y);
+}
+.chalk-board[data-surface="dots"][data-theme="light"] {--board-dot: rgba(0,0,0,.16);}
+
+/* Excalidraw draws; none of its own interface shows. */
+.chalk-board-engine {position:absolute; inset:0; transition:opacity .2s ease-out;}
+.chalk-board:not([data-ready]) .chalk-board-engine:not(:has([role="alert"])) {opacity:0; pointer-events:none;}
+.chalk-board-engine > [role="alert"] {background:var(--board-fill); color:var(--board-ink);}
+.chalk-board:has(.chalk-board-engine > [role="alert"]) .chalk-board-loading {display:none;}
+.chalk-board .excalidraw {--color-selection: var(--board-selection); background: transparent;}
+.chalk-board .excalidraw :is(.layer-ui__wrapper, .context-menu, .HintViewer, .Modal, .welcome-screen-center, .library-menu, .sidebar, .App-toolbar, .App-bottom-bar, .FixedSideContainer, .popover, .scroll-back-to-content, .excalidraw-tooltip, .ToolIcon__hidden, .App-menu, .layer-ui__wrapper__footer) {display:none !important;}
+body:has(.chalk-board) :is(.excalidraw-modal-container, .excalidraw-tooltip) {display:none !important;}
+.chalk-board .excalidraw-wysiwyg {font-family: Nunito, var(--chalk-font-family, system-ui), sans-serif;}
+
+.chalk-board-loading {position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:12px; color:var(--board-muted); font-size:14px;}
+.chalk-board-spinner {width:22px; height:22px; border-radius:50%; border:2px solid var(--board-muted); border-top-color:transparent; animation:chalk-board-spin .8s linear infinite; opacity:.8;}
+@keyframes chalk-board-spin {to {transform:rotate(360deg);}}
+
+.chalk-board-hint {position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:14px; color:var(--board-muted); text-align:center; pointer-events:none; z-index:1;}
+.chalk-board-hint p {margin:0; font-size:15px; max-width:280px; line-height:1.4; text-wrap:balance;}
+.chalk-board-hint ul {list-style:none; margin:0; padding:0; display:flex; gap:18px; flex-wrap:wrap; justify-content:center; font-size:13px;}
+.chalk-board-hint li {display:flex; align-items:center; gap:6px;}
+.chalk-board-hint kbd {font:600 11px ui-monospace, SFMono-Regular, Menlo, monospace; padding:2px 6px; border-radius:5px; border:1px solid var(--board-muted); color:var(--board-muted);}
+
+.chalk-board-note-layer {position:absolute; inset:0; z-index:2; cursor:crosshair; touch-action:none;}
+
+.chalk-board-cursors {position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden;}
+.chalk-board-cursors[data-hidden] {display:none;}
+.chalk-board-cursor {position:absolute; left:0; top:0; will-change:transform;}
+.chalk-board-cursor-arrow {position:absolute; left:-3px; top:-3px; width:22px; height:26px; max-width:none; display:block; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));}
+.chalk-board-cursor-tag {position:absolute; left:12px; top:18px; display:flex; align-items:center; height:28px;}
+.chalk-board-cursor-avatar {position:relative; z-index:1; box-shadow:0 0 0 2px rgba(255,255,255,.92); border-radius:50%;}
+.chalk-board-cursor-name {position:absolute; left:14px; top:0; height:28px; display:flex; align-items:center; padding:0 11px 0 18px; border-radius:14px; white-space:nowrap; color:#fff; font:600 13px/1 var(--chalk-font-family, Figtree, system-ui, sans-serif); box-shadow:0 0 0 1.5px rgba(255,255,255,.92), 0 3px 10px rgba(0,0,0,.28); opacity:0; transform:translateX(-10px); transition:opacity .3s ease-out, transform .3s ease-out;}
+.chalk-board-cursor[data-named="true"] .chalk-board-cursor-name {opacity:1; transform:none;}
+
+.chalk-board :focus-visible {outline:2px solid var(--chalk-focus); outline-offset:2px;}
+.chalk-board button {font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer;}
+
+.chalk-board-island, .chalk-board-zoom, .chalk-board-menu-button, .chalk-board-chip, .chalk-board-view-only {background:var(--chalk-surface); color:var(--chalk-text); box-shadow:var(--board-shadow);}
+.chalk-board-chips {position:absolute; left:0; right:0; top:12px; z-index:5; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none;}
+.chalk-board-chips[data-low] {top:76px;}
+.chalk-board-chip {display:flex; align-items:center; gap:8px; height:36px; padding:0 6px 0 14px; border-radius:999px; font-size:13px; font-weight:600; pointer-events:auto;}
+.chalk-board-chip[data-quiet] {padding:0 14px; font-weight:500;}
+.chalk-board-chip svg {color:var(--chalk-muted-text);}
+.chalk-board-chip-button {height:28px !important; padding:0 12px !important; border-radius:999px; background:var(--chalk-hover) !important; font-weight:600; font-size:13px;}
+.chalk-board-view-only {position:absolute; left:12px; top:12px; z-index:5; height:30px; padding:0 12px; border-radius:999px; color:var(--chalk-soft-text); font-size:12px; font-weight:600; display:flex; align-items:center; gap:6px; box-shadow:0 0 0 1px var(--chalk-line-strong);}
+
+.chalk-board-corner {position:absolute; right:12px; top:12px; z-index:5;}
+.chalk-board-menu-button {width:40px; height:40px; border-radius:50%; display:grid; place-items:center; transition:transform .15s ease-out;}
+.chalk-board-menu-button:hover {background:var(--chalk-raised);}
+.chalk-board-menu-button:active {transform:scale(.94);}
+.chalk-board-menu-button[aria-expanded="true"], .chalk-board-menu-button[data-popup-open] {background:var(--chalk-text); color:var(--chalk-canvas);}
+.chalk-menu.chalk-board-menu {width:304px;}
+.chalk-board-menu-rule {border:0; border-top:1px solid var(--chalk-line); margin:4px 0;}
+.chalk-board-menu-sublabel {padding:6px 10px 4px; font-size:12px; font-weight:600; color:var(--chalk-muted-text);}
+.chalk-board-tiles {display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; padding:2px 4px 8px;}
+.chalk-board-tile {display:grid; gap:6px; justify-items:center; align-content:start; min-height:44px; padding:6px 4px 8px; border-radius:10px; border:2px solid transparent; font-size:12px; font-weight:600; color:var(--chalk-text); text-align:center; cursor:pointer; outline:none;}
+.chalk-board-tile[data-highlighted], .chalk-board-tile:hover {background:var(--chalk-hover);}
+.chalk-board-tile[data-checked] {border-color:var(--chalk-text);}
+.chalk-board-tile-preview {display:block; position:relative; width:100%; height:38px; border-radius:6px; overflow:hidden; box-shadow:0 0 0 1px var(--chalk-line-strong);}
+.chalk-board-tile-preview[data-surface="chalkboard"] {background:#1c2622; color:#f1f0ea;}
+.chalk-board-tile-preview[data-surface="paper"] {background:#f5f2ea; color:#1b1c1f;}
+.chalk-board-tile-preview[data-surface="dots"] {background:var(--chalk-surface) radial-gradient(var(--chalk-muted-text) 1px, transparent 1.5px) 0 0/8px 8px;}
+.chalk-board-tile-preview[data-island] {background:var(--chalk-raised);}
+.chalk-board-tile-preview[data-island] i {position:absolute; background:var(--chalk-text); border-radius:3px;}
+.chalk-board-tile-preview[data-island="bottom"] i {left:30%; right:30%; bottom:5px; height:5px;}
+.chalk-board-tile-preview[data-island="top"] i {left:30%; right:30%; top:5px; height:5px;}
+.chalk-board-tile-preview[data-island="left"] i {left:5px; top:20%; bottom:20%; width:5px;}
+.chalk-board-menu-kbd {margin-left:auto; padding-left:18px; font:600 11px ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--chalk-muted-text);}
+.chalk-board-danger {display:contents; color:var(--chalk-danger-text);}
+
+.chalk-board-zoom {position:absolute; right:12px; bottom:12px; z-index:5; height:40px; display:flex; align-items:center; border-radius:999px; padding:0 4px; transition:translate .2s ease-out;}
+.chalk-board-zoom button {height:32px; min-width:32px; border-radius:999px; display:grid; place-items:center; padding:0 6px !important; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums;}
+.chalk-board-zoom button:hover {background:var(--chalk-hover);}
+.chalk-board-zoom-value {min-width:52px !important;}
+.chalk-board-zoom-rule {width:1px; height:18px; background:var(--chalk-line-strong); margin:0 2px;}
+
+.chalk-board-island {position:absolute; z-index:5; display:flex; align-items:center; gap:2px; padding:6px; border-radius:26px; max-width:calc(100% - 24px);}
+.chalk-board-island[data-place="bottom"] {left:50%; bottom:12px; translate:-50% 0;}
+.chalk-board-island[data-place="top"] {left:50%; top:12px; translate:-50% 0;}
+.chalk-board-island[data-place="left"] {left:12px; top:50%; translate:0 -50%; flex-direction:column; max-height:calc(100% - 24px); overflow-y:auto; scrollbar-width:none;}
+.chalk-board-island[data-place="compact"] {left:12px; bottom:12px; padding:4px;}
+.chalk-board-island[data-place="expanded"] {left:12px; right:12px; bottom:12px; padding:4px; border-radius:28px; overflow-x:auto; scrollbar-width:none;}
+.chalk-board-island[data-dragging] {z-index:6; cursor:grabbing; box-shadow:0 0 0 1px var(--chalk-line-strong), 0 14px 36px rgba(0,0,0,.45);}
+.chalk-board:has(.chalk-board-island[data-place="expanded"]) .chalk-board-zoom {translate:0 -60px;}
+.chalk-board-group {display:contents;}
+.chalk-board-separator {flex:none; width:1px; height:24px; margin:0 4px; background:var(--chalk-line-strong);}
+.chalk-board-island[data-place="left"] .chalk-board-separator {width:24px; height:1px; margin:4px 0;}
+.chalk-board-tool {width:40px; height:40px; flex:none; border-radius:50%; display:grid !important; place-items:center; position:relative; transition:transform .15s ease-out;}
+.chalk-board-tool:hover {background:var(--chalk-hover);}
+.chalk-board-tool:active {transform:scale(.92);}
+.chalk-board-tool[aria-pressed="true"] {background:var(--chalk-text); color:var(--chalk-canvas);}
+.chalk-board-tool[aria-pressed="true"]:hover {background:var(--chalk-text-strong);}
+.chalk-board-tool:disabled {opacity:.35; cursor:default; transform:none; background:none;}
+.chalk-board[data-compact] .chalk-board-tool {width:44px; height:44px;}
+@media (pointer:coarse) {.chalk-board-tool {width:44px; height:44px;}}
+.chalk-board-tool-caret {position:absolute; right:3px; bottom:3px;}
+.chalk-board-tool-swatch {width:22px; height:22px; border-radius:50%; box-shadow:0 0 0 2px var(--chalk-surface), 0 0 0 3.5px var(--chalk-muted-text);}
+.chalk-board-tool-dot {position:absolute; right:5px; bottom:5px; width:11px; height:11px; border-radius:50%; box-shadow:0 0 0 2px var(--chalk-surface);}
+.chalk-board-grip {width:22px; height:40px; flex:none; display:grid !important; place-items:center; border-radius:12px; color:var(--chalk-muted-text) !important; cursor:grab !important; touch-action:none;}
+.chalk-board-grip:hover {background:var(--chalk-hover); color:var(--chalk-text) !important;}
+.chalk-board-island[data-place="left"] .chalk-board-grip {width:40px; height:22px;}
+.chalk-board-island[data-place="left"] .chalk-board-grip svg {transform:rotate(90deg);}
+@media (pointer:coarse) {.chalk-board-grip {width:26px; height:44px;} .chalk-board-island[data-place="left"] .chalk-board-grip {width:44px; height:26px;}}
+.chalk-board-kbd {font:600 11px ui-monospace, monospace; margin-left:6px; padding:1px 5px; border-radius:4px; background:rgba(127,127,127,.28);}
+
+.chalk-board-dropzone {position:absolute; z-index:4; border:2px dashed var(--board-selection); border-radius:28px; background:rgba(125,184,255,.08); opacity:.45; pointer-events:none; transition:opacity .15s ease-out;}
+.chalk-board-dropzone[data-near] {opacity:1;}
+.chalk-board-dropzone[data-zone="left"] {left:6px; top:12px; bottom:12px; width:70px;}
+.chalk-board-dropzone[data-zone="bottom"] {left:12px; right:12px; bottom:6px; height:70px;}
+.chalk-board-dropzone[data-zone="top"] {left:12px; right:12px; top:6px; height:70px;}
+
+.chalk-board-colors {display:grid; gap:10px; padding:4px;}
+.chalk-board-swatches {display:flex; gap:2px;}
+.chalk-board-swatch, .chalk-board-width {width:40px; height:40px; border-radius:50%; display:grid; place-items:center; flex:none; color:var(--chalk-text); background:none; border:0; cursor:pointer;}
+@media (pointer:coarse) {.chalk-board-swatch, .chalk-board-width {width:44px; height:44px;}}
+.chalk-board-swatch:hover, .chalk-board-width:hover {background:var(--chalk-hover);}
+.chalk-board-swatch i {width:24px; height:24px; border-radius:50%; box-shadow:0 0 0 1px var(--chalk-muted-text); display:grid; place-items:center;}
+.chalk-board-swatch[aria-checked="true"] i {box-shadow:0 0 0 2px var(--chalk-popover), 0 0 0 4px var(--chalk-text);}
+.chalk-board-width i {display:block; width:22px; border-radius:99px; background:var(--chalk-text);}
+.chalk-board-width[aria-checked="true"] {background:var(--chalk-text);}
+.chalk-board-width[aria-checked="true"] i {background:var(--chalk-canvas);}
+
+.chalk-board-announcer {position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
+
+@media (max-width: 640px) {
+  .chalk-board-zoom {height:52px;}
+  .chalk-board-zoom button {height:44px; min-width:44px;}
+  .chalk-board-menu-button {width:44px; height:44px;}
+}
+@media (prefers-reduced-motion: reduce) {
+  .chalk-board-spinner {animation:none;}
+  .chalk-board-engine, .chalk-board-cursor-name, .chalk-board-zoom {transition:none;}
+  .chalk-board-cursor-name {transform:none !important;}
+}
+`;
+
+// src/components/board/Board.tsx
+import { Fragment as Fragment31, jsx as jsx74, jsxs as jsxs48 } from "react/jsx-runtime";
+var SURFACE_KEY = "chalk.board.surface";
+var ISLAND_KEY = "chalk.board.island";
+var COMPACT_BELOW_PX = 1060;
+var VIEW_SEND_MS = 150;
+var VIEW_HEARTBEAT_MS = 2e3;
+var GLIDE_MS = 300;
+var ZOOM_STEP = 1.25;
+var NOTE_FONT_PX = 18;
+var EDITING_KEYS = /* @__PURE__ */ new Set(["delete", "backspace", "arrowup", "arrowdown", "arrowleft", "arrowright", "escape", " ", "enter", "shift", "alt", "control", "meta", "tab"]);
+var MODIFIED_ENGINE_KEYS = /* @__PURE__ */ new Set(["c", "v", "x", "a", "d", "=", "+", "-", "0"]);
+var first = (name) => name.split(" ")[0] ?? name;
+function fitContent(engine, animate) {
+  engine.api.scrollToContent(void 0, { fitToViewport: true, viewportZoomFactor: 0.85, maxZoom: 1, animate });
+}
+function isTyping(target) {
+  return target instanceof HTMLElement && (target.isContentEditable || target.tagName === "TEXTAREA" || target.tagName === "INPUT");
+}
+function useCamera(engine, root, onManualMove, onMoved, onViewportReady) {
+  const cameraRef = useRef33({ scrollX: 0, scrollY: 0, zoom: 1 });
+  const viewportRef = useRef33({ width: 1, height: 1 });
+  const expected = useRef33(null);
+  const glide = useRef33(0);
+  const [zoom, setZoom] = useState43(1);
+  const reduced = usePrefersReducedMotion();
+  const manual = useRef33(onManualMove);
+  manual.current = onManualMove;
+  const moved = useRef33(onMoved);
+  moved.current = onMoved;
+  const resized = useRef33(onViewportReady);
+  resized.current = onViewportReady;
+  useEffect37(() => {
+    if (!engine) return;
+    const paint = (camera) => {
+      cameraRef.current = camera;
+      const element = root.current;
+      if (element) {
+        let gap = 24 * camera.zoom;
+        while (gap < 14) gap *= 2;
+        element.style.setProperty("--board-dot-gap", `${gap}px`);
+        element.style.setProperty("--board-dot-x", `${camera.scrollX * camera.zoom % gap}px`);
+        element.style.setProperty("--board-dot-y", `${camera.scrollY * camera.zoom % gap}px`);
+      }
+      setZoom(camera.zoom);
+    };
+    paint(readCamera(engine));
+    return engine.api.onScrollChange((scrollX, scrollY, next) => {
+      const camera = { scrollX, scrollY, zoom: next.value };
+      if (camera.zoom !== clampZoom(camera.zoom)) {
+        expected.current = { ...camera, zoom: clampZoom(camera.zoom) };
+        setCamera(engine, expected.current);
+        return;
+      }
+      paint(camera);
+      if (expected.current && sameCamera(camera, expected.current)) return;
+      expected.current = null;
+      cancelAnimationFrame(glide.current);
+      manual.current();
+      moved.current();
+    });
+  }, [engine, root]);
+  useEffect37(() => {
+    const element = root.current;
+    if (!element) return;
+    viewportRef.current = { width: element.clientWidth || 1, height: element.clientHeight || 1 };
+    const observer = new ResizeObserver(([entry]) => {
+      if (!entry) return;
+      viewportRef.current = { width: entry.contentRect.width, height: entry.contentRect.height };
+      if (entry.contentRect.width > 0 && entry.contentRect.height > 0) resized.current();
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [root]);
+  useEffect37(() => () => cancelAnimationFrame(glide.current), []);
+  const move = useCallback13(
+    (target, animate) => {
+      if (!engine) return;
+      cancelAnimationFrame(glide.current);
+      const set = (camera) => {
+        expected.current = camera;
+        setCamera(engine, camera);
+      };
+      if (!animate || reduced) {
+        set(target);
+        moved.current();
+        return;
+      }
+      const from = cameraRef.current;
+      const started = performance.now();
+      const step = (now) => {
+        const progress = Math.min(1, (now - started) / GLIDE_MS);
+        set(mixCamera(from, target, 1 - (1 - progress) ** 3));
+        if (progress < 1) glide.current = requestAnimationFrame(step);
+        else moved.current();
+      };
+      glide.current = requestAnimationFrame(step);
+    },
+    [engine, reduced]
+  );
+  return useMemo16(() => ({ cameraRef, viewportRef, zoom, move }), [move, zoom]);
+}
+function useBoardKeys(root, handlers) {
+  const latest = useRef33(handlers);
+  latest.current = handlers;
+  useEffect37(() => {
+    const element = root.current;
+    if (!element) return;
+    const keydown = (event) => {
+      if (isTyping(event.target)) return;
+      const key = event.key.toLowerCase();
+      if (event.altKey && key.startsWith("arrow") && event.target instanceof Element && event.target.closest(".chalk-board-grip")) return;
+      const modified = event.metaKey || event.ctrlKey;
+      const { onTool, onZoom, canDraw } = latest.current;
+      if (modified && !event.altKey && key === "z") return;
+      if (modified && !event.altKey && key === "y") return;
+      if (modified && !event.altKey && !event.shiftKey && MODIFIED_ENGINE_KEYS.has(key)) return;
+      if (!modified && !event.altKey) {
+        const tool = TOOL_KEYS[key];
+        if (tool && canDraw) {
+          event.preventDefault();
+          event.stopPropagation();
+          onTool(tool);
+          return;
+        }
+        if (key === "+" || key === "=" || key === "-") {
+          event.preventDefault();
+          event.stopPropagation();
+          onZoom(key === "-" ? 1 / ZOOM_STEP : ZOOM_STEP);
+          return;
+        }
+        if (key === "escape" && canDraw) onTool("selection");
+        if (EDITING_KEYS.has(key)) return;
+      }
+      event.stopPropagation();
+    };
+    const blockMenu = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    element.addEventListener("keydown", keydown, true);
+    element.addEventListener("contextmenu", blockMenu, true);
+    return () => {
+      element.removeEventListener("keydown", keydown, true);
+      element.removeEventListener("contextmenu", blockMenu, true);
+    };
+  }, [root]);
+}
+function useImageRefusal(root, toast) {
+  const latest = useRef33(toast);
+  latest.current = toast;
+  useEffect37(() => {
+    const element = root.current;
+    if (!element) return;
+    const refuse = (files, event) => {
+      if (!files || ![...files].some((file) => file.type.startsWith("image/"))) return;
+      event.preventDefault();
+      event.stopPropagation();
+      latest.current({ type: "error", message: "The board can't take images yet.", duration: 5e3 });
+    };
+    const paste = (event) => refuse(event.clipboardData?.files, event);
+    const drop = (event) => refuse(event.dataTransfer?.files, event);
+    element.addEventListener("paste", paste, true);
+    element.addEventListener("drop", drop, true);
+    return () => {
+      element.removeEventListener("paste", paste, true);
+      element.removeEventListener("drop", drop, true);
+    };
+  }, [root]);
+}
+function Board({ board, primary, visible, colorScheme, people, following, onFollow, sendView, onClose }) {
+  const root = useRef33(null);
+  const isHost = useCan("manageWhiteboard");
+  const connection = useConnection();
+  const boardSession = useWhiteboard().engine;
+  const offline = connection.status === "reconnecting";
+  const phone = useMediaQuery("(max-width: 640px)");
+  const [engine, setEngine] = useState43(null);
+  const toast = useBoardToast(engine);
+  const [surface, setSurface] = useState43(() => readStored(SURFACE_KEY, SURFACES, "chalkboard"));
+  const [place, setPlace] = useState43(() => readStored(ISLAND_KEY, ISLAND_PLACES, "bottom"));
+  const [tool, setTool] = useState43("pen");
+  const [shape, setShape] = useState43("rectangle");
+  const [color, setColor] = useState43("ink");
+  const [width, setWidth] = useState43("medium");
+  const [elementCount, setElementCount] = useState43(0);
+  const empty = elementCount === 0;
+  const [narrow, setNarrow] = useState43(false);
+  const [announcement, setAnnouncement] = useState43("");
+  const canDraw = primary && (board.collab?.canDraw ?? board.canDraw ?? true);
+  const compact = phone || narrow;
+  const history = useEngineHistory(root, engine);
+  const touched = useRef33(false);
+  const views = useRef33(/* @__PURE__ */ new Map());
+  const cursors = useRef33(/* @__PURE__ */ new Map());
+  const pen = useMemo16(() => ({ color, width, surface, theme: colorScheme }), [color, width, surface, colorScheme]);
+  const followingRef = useRef33(following);
+  followingRef.current = following;
+  const nameOf = useCallback13((id) => first(people.find((person) => person.id === id)?.displayName ?? "Someone"), [people]);
+  const colorFor = useCallback13(
+    (id) => personColor(
+      Math.max(
+        0,
+        people.findIndex((person) => person.id === id)
+      )
+    ),
+    [people]
+  );
+  const stopFollowing = useCallback13(() => {
+    const current = followingRef.current;
+    if (!current) return;
+    followingRef.current = null;
+    onFollow(null);
+    toast({ message: `Stopped following ${nameOf(current)}` });
+  }, [nameOf, onFollow, toast]);
+  const shareView = useRef33(() => false);
+  const viewSender = useRef33(sendView);
+  viewSender.current = sendView;
+  const ownParticipantId = useSelf().participantId;
+  const appliedVersions = useRef33(new ViewVersions());
+  const viewsAvailable = sendView !== void 0;
+  const reapplyView = useRef33(() => void 0);
+  const camera = useCamera(
+    engine,
+    root,
+    stopFollowing,
+    () => shareView.current(false),
+    () => reapplyView.current()
+  );
+  useEffect37(() => {
+    if (!visible || !viewsAvailable || !engine) return;
+    let last = 0;
+    let pending;
+    const send = (bring2) => {
+      const followedView = followingRef.current ? views.current.get(followingRef.current) : void 0;
+      if (followedView && !followedView.originParticipantId && !bring2) return true;
+      const view = followedView ?? visibleView(camera.cameraRef.current, camera.viewportRef.current);
+      last = performance.now();
+      const rectangle = { x: view.x, y: view.y, width: view.width, height: view.height, bring: bring2 };
+      const outgoing = followedView?.originParticipantId ? { ...rectangle, originParticipantId: followedView.originParticipantId, originSequence: followedView.originSequence, ...followedView.originEpoch ? { originEpoch: followedView.originEpoch } : {} } : rectangle;
+      try {
+        return viewSender.current?.(outgoing) ?? false;
+      } catch (error) {
+        console.warn("Board view dropped.", { operation: "sendView", error });
+        return false;
+      }
+    };
+    shareView.current = (bring2) => {
+      if (bring2) return send(true);
+      clearTimeout(pending);
+      pending = setTimeout(() => send(false), Math.max(0, VIEW_SEND_MS - (performance.now() - last)));
+      return true;
+    };
+    const heartbeat = setInterval(() => {
+      if (!followingRef.current) send(false);
+    }, VIEW_HEARTBEAT_MS);
+    send(false);
+    return () => {
+      clearInterval(heartbeat);
+      clearTimeout(pending);
+      shareView.current = () => false;
+    };
+  }, [boardSession.sceneId, boardSession.status, camera.cameraRef, camera.viewportRef, connection.status, engine, visible, viewsAvailable]);
+  const { move, viewportRef } = camera;
+  const goTo = useCallback13(
+    (participantId, animate, selected = false) => {
+      const view = views.current.get(participantId);
+      if (!view || viewportRef.current.width <= 0 || viewportRef.current.height <= 0) return;
+      if (!selected && !appliedVersions.current.isNew(view)) return;
+      appliedVersions.current.remember(view);
+      move(cameraForView(view, viewportRef.current), animate);
+    },
+    [move, viewportRef]
+  );
+  reapplyView.current = () => {
+    if (followingRef.current) goTo(followingRef.current, false, true);
+  };
+  const subscribe3 = board.collab?.subscribe;
+  const latestView = useRef33(() => void 0);
+  latestView.current = (event) => {
+    const previous = views.current.get(event.participantId);
+    if (!event.bring) {
+      if (event.originParticipantId === ownParticipantId && ownParticipantId) return;
+      if (!appliedVersions.current.isNew(event)) return;
+      if (event.originParticipantId && previous?.originParticipantId === event.originParticipantId && event.originEpoch === previous.originEpoch && event.originSequence <= previous.originSequence) return;
+    }
+    const newPeer = !previous;
+    views.current.delete(event.participantId);
+    views.current.set(event.participantId, event.bring ? { x: event.x, y: event.y, width: event.width, height: event.height, bring: false } : event);
+    if (views.current.size > 256) {
+      const oldest = views.current.keys().next().value;
+      if (oldest !== void 0) views.current.delete(oldest);
+    }
+    if (newPeer) {
+      shareView.current(false);
+    }
+    if (event.bring) {
+      followingRef.current = event.participantId;
+      onFollow(event.participantId);
+      toast({ message: `${nameOf(event.participantId)} brought everyone to this view` });
+      goTo(event.participantId, true, true);
+      return;
+    }
+    if (followingRef.current === event.participantId) goTo(event.participantId, true);
+  };
+  useEffect37(() => {
+    if (!subscribe3) return;
+    return subscribe3((event) => {
+      if (event.type === "cursor") rememberCursor(cursors.current, event);
+      else if (event.type === "view") latestView.current(event);
+    });
+  }, [subscribe3]);
+  useEffect37(() => {
+    if (following) goTo(following, true, true);
+  }, [following, goTo]);
+  useEffect37(() => {
+    if (engine && canDraw) applyTool(engine, tool, pen);
+  }, [canDraw, engine, pen, tool]);
+  useEffect37(() => {
+    if (engine) void document.fonts.load(`${NOTE_FONT_PX}px Nunito`);
+  }, [engine]);
+  useEffect37(() => {
+    if (!engine) return;
+    let beforeEditing = sceneSignature(engine);
+    let wasEditing = false;
+    setElementCount(engine.api.getSceneElements().length);
+    if (hasContent(engine)) {
+      touched.current = true;
+      if (!followingRef.current) fitContent(engine, false);
+    }
+    const offDown = engine.api.onPointerDown(() => {
+      touched.current = true;
+    });
+    const offChange = engine.api.onChange((elements, appState) => {
+      const count = elements.filter((element) => !element.isDeleted).length;
+      setElementCount(count);
+      if (!touched.current && count > 0) {
+        touched.current = true;
+        if (!followingRef.current) requestAnimationFrame(() => fitContent(engine, false));
+      }
+      const editing = appState.editingTextElement !== null;
+      if (!wasEditing && editing) beforeEditing = sceneSignature(engine);
+      const finishedEditing = wasEditing && !editing;
+      wasEditing = editing;
+      if (finishedEditing && sceneSignature(engine) !== beforeEditing) {
+        settleNoteText(engine);
+      }
+    });
+    return () => {
+      offDown();
+      offChange();
+    };
+  }, [engine]);
+  useEffect37(() => {
+    const element = root.current;
+    if (!element) return;
+    const observer = new ResizeObserver(([entry]) => setNarrow((entry?.contentRect.width ?? COMPACT_BELOW_PX) < COMPACT_BELOW_PX));
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  const chooseTool = useCallback13((next) => {
+    if (next === "rectangle" || next === "ellipse" || next === "diamond" || next === "arrow" || next === "line") setShape(next);
+    setTool(next);
+  }, []);
+  const undo = useCallback13(() => {
+    const container = root.current?.querySelector(".excalidraw");
+    if (container) pressHistory(container, false);
+  }, []);
+  const redo = useCallback13(() => {
+    const container = root.current?.querySelector(".excalidraw");
+    if (container) pressHistory(container, true);
+  }, []);
+  const zoomBy = useCallback13(
+    (factor) => {
+      stopFollowing();
+      camera.move(zoomAroundCentre(camera.cameraRef.current, camera.viewportRef.current, camera.cameraRef.current.zoom * factor), true);
+    },
+    [camera, stopFollowing]
+  );
+  useBoardKeys(root, { onTool: chooseTool, onZoom: zoomBy, canDraw });
+  useImageRefusal(root, toast);
+  const restyle = (next) => {
+    if (next.color) setColor(next.color);
+    if (next.width) setWidth(next.width);
+    if (engine) restyleSelection(engine, { ...pen, ...next }, next);
+  };
+  const choosePlace = (next, announce) => {
+    setPlace(next);
+    writeStored(ISLAND_KEY, next);
+    if (announce) setAnnouncement(`Tool island moved to ${next}`);
+  };
+  const chooseSurface = (next) => {
+    setSurface(next);
+    writeStored(SURFACE_KEY, next);
+  };
+  const fit = () => {
+    stopFollowing();
+    if (engine) fitContent(engine, true);
+  };
+  const download = async () => {
+    if (!engine) return;
+    try {
+      const url = URL.createObjectURL(await boardImage(engine, surfaceFill(surface, colorScheme)));
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = "chalk-board.png";
+      link.click();
+      setTimeout(() => URL.revokeObjectURL(url), 1e3);
+      toast({ message: "Saved chalk-board.png" });
+    } catch {
+      toast({ type: "error", message: "Could not save the image. Try again." });
+    }
+  };
+  const copy = async () => {
+    if (!engine) return;
+    try {
+      const image = await boardImage(engine, surfaceFill(surface, colorScheme));
+      await navigator.clipboard.write([new ClipboardItem({ "image/png": image })]);
+      toast({ message: "Copied the board as an image" });
+    } catch {
+      toast({ type: "error", message: "The browser blocked copying. Use Download as PNG instead." });
+    }
+  };
+  const bring = () => {
+    if (followingRef.current) {
+      followingRef.current = null;
+      onFollow(null);
+    }
+    if (shareView.current(true)) toast({ message: "Sharing your view with everyone" });
+    else toast({ type: "error", message: "Could not share your view. Try again." });
+  };
+  const clear = async () => {
+    if (!engine) return;
+    try {
+      const restore = await engine.clearWithUndo();
+      toast({ message: "Board cleared", ...canDraw ? { action: { label: "Undo", onClick: () => void restore() } } : {} });
+    } catch {
+      toast({ type: "error", message: "Could not clear the board. Try again." });
+    }
+  };
+  const placeNoteAt = (event) => {
+    if (event.button !== 0) return;
+    const container = root.current?.querySelector(".excalidraw");
+    if (!engine || !container || !root.current) return;
+    const rect = root.current.getBoundingClientRect();
+    const { scrollX, scrollY, zoom } = camera.cameraRef.current;
+    touched.current = true;
+    placeNote(engine, container, { x: (event.clientX - rect.left) / zoom - scrollX, y: (event.clientY - rect.top) / zoom - scrollY }, color);
+    setTool("selection");
+  };
+  const ink = surfaceInk(surface, colorScheme);
+  const surfaceVars = { "--board-selection": selectionColor(surface, colorScheme) };
+  const followed = following ? nameOf(following) : null;
+  const ready = engine !== null;
+  return /* @__PURE__ */ jsxs48("div", { ref: root, className: "chalk-board", "data-surface": surface, "data-theme": colorScheme, "data-ready": ready || void 0, "data-compact": compact || void 0, "data-primary": primary || void 0, "data-elements": elementCount, style: surfaceVars, hidden: !visible, children: [
+    /* @__PURE__ */ jsx74(BoardStyles, {}),
+    /* @__PURE__ */ jsx74(WhiteboardCanvas2, { ...board, headless: true, canDraw, collab: board.collab ? { ...board.collab, canDraw, canManage: isHost } : void 0, inkColor: ink, theme: "light", isVisible: visible, className: "chalk-board-engine", onEngineReady: setEngine }),
+    !ready ? /* @__PURE__ */ jsxs48("div", { className: "chalk-board-loading", role: "status", children: [
+      /* @__PURE__ */ jsx74("span", { className: "chalk-board-spinner", "aria-hidden": "true" }),
+      "Opening board"
+    ] }) : null,
+    primary && ready && empty ? /* @__PURE__ */ jsx74(BoardHint, { canDraw }) : null,
+    primary && tool === "note" && canDraw ? /* @__PURE__ */ jsx74("div", { className: "chalk-board-note-layer", "aria-hidden": "true", onPointerDown: placeNoteAt }) : null,
+    primary ? /* @__PURE__ */ jsx74(BoardCursors, { cursorsRef: cursors, cameraRef: camera.cameraRef, colorFor, hidden: offline }) : null,
+    primary && ready ? /* @__PURE__ */ jsxs48(Fragment31, { children: [
+      /* @__PURE__ */ jsxs48("div", { className: "chalk-board-chips", "data-low": !compact && place === "top" && canDraw || void 0, children: [
+        followed ? /* @__PURE__ */ jsxs48("div", { className: "chalk-board-chip", role: "status", children: [
+          /* @__PURE__ */ jsx74(BoardIcon, { name: "eye", size: 16 }),
+          "Following ",
+          followed,
+          /* @__PURE__ */ jsx74("button", { type: "button", className: "chalk-board-chip-button", onClick: stopFollowing, children: "Stop" })
+        ] }) : null,
+        offline ? /* @__PURE__ */ jsxs48("div", { className: "chalk-board-chip", "data-quiet": true, role: "status", children: [
+          /* @__PURE__ */ jsx74(BoardIcon, { name: "wifiOff", size: 16 }),
+          "Offline. Your drawing will sync."
+        ] }) : null
+      ] }),
+      !canDraw ? /* @__PURE__ */ jsxs48("div", { className: "chalk-board-view-only", children: [
+        /* @__PURE__ */ jsx74(BoardIcon, { name: "lock", size: 14 }),
+        "View only"
+      ] }) : null,
+      /* @__PURE__ */ jsx74("div", { className: "chalk-board-corner", children: /* @__PURE__ */ jsx74(
+        BoardMenu,
+        {
+          surface,
+          onSurface: chooseSurface,
+          place: !compact && canDraw ? place : void 0,
+          onPlace: (next) => choosePlace(next, true),
+          onDownload: () => void download(),
+          onCopy: () => void copy(),
+          onBring: isHost && sendView ? bring : void 0,
+          onClear: isHost ? () => void clear() : void 0,
+          onClose
+        }
+      ) }),
+      /* @__PURE__ */ jsxs48("div", { className: "chalk-board-zoom", role: "group", "aria-label": "Zoom", children: [
+        /* @__PURE__ */ jsx74("button", { type: "button", "aria-label": "Zoom out", onClick: () => zoomBy(1 / ZOOM_STEP), children: /* @__PURE__ */ jsx74(BoardIcon, { name: "minus", size: 16 }) }),
+        /* @__PURE__ */ jsxs48("button", { type: "button", "aria-label": `Zoom ${Math.round(camera.zoom * 100)}%, reset to 100%`, className: "chalk-board-zoom-value", onClick: () => zoomBy(1 / camera.cameraRef.current.zoom), children: [
+          Math.round(camera.zoom * 100),
+          "%"
+        ] }),
+        /* @__PURE__ */ jsx74("button", { type: "button", "aria-label": "Zoom in", onClick: () => zoomBy(ZOOM_STEP), children: /* @__PURE__ */ jsx74(BoardIcon, { name: "plus", size: 16 }) }),
+        /* @__PURE__ */ jsx74("span", { className: "chalk-board-zoom-rule", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx74("button", { type: "button", "aria-label": "Fit to content", onClick: fit, children: /* @__PURE__ */ jsx74(BoardIcon, { name: "fit", size: 16 }) })
+      ] }),
+      canDraw ? /* @__PURE__ */ jsx74(
+        BoardIsland,
+        {
+          tool,
+          shape,
+          onTool: chooseTool,
+          color,
+          width,
+          onColor: (next) => restyle({ color: next }),
+          onWidth: (next) => restyle({ width: next }),
+          surface,
+          theme: colorScheme,
+          canUndo: history.canUndo,
+          canRedo: history.canRedo,
+          onUndo: undo,
+          onRedo: redo,
+          place,
+          onPlace: choosePlace,
+          compact
+        }
+      ) : null,
+      /* @__PURE__ */ jsx74("div", { className: "chalk-board-announcer", "aria-live": "polite", children: announcement })
+    ] }) : null
+  ] });
+}
+function BoardHint({ canDraw }) {
+  if (!canDraw)
+    return /* @__PURE__ */ jsx74("div", { className: "chalk-board-hint", children: /* @__PURE__ */ jsx74("p", { children: "Nothing here yet. When someone draws, it shows up here." }) });
+  return /* @__PURE__ */ jsxs48("div", { className: "chalk-board-hint", children: [
+    /* @__PURE__ */ jsx74("p", { children: "An empty board. Draw, type or add a sticky note." }),
+    /* @__PURE__ */ jsxs48("ul", { children: [
+      /* @__PURE__ */ jsxs48("li", { children: [
+        /* @__PURE__ */ jsx74("kbd", { children: "P" }),
+        " Pen"
+      ] }),
+      /* @__PURE__ */ jsxs48("li", { children: [
+        /* @__PURE__ */ jsx74("kbd", { children: "T" }),
+        " Text"
+      ] }),
+      /* @__PURE__ */ jsxs48("li", { children: [
+        /* @__PURE__ */ jsx74("kbd", { children: "N" }),
+        " Sticky note"
+      ] })
+    ] })
+  ] });
+}
+
 // src/components/stage/SpaceStage.tsx
-import { useCallback as useCallback12, useMemo as useMemo15, useState as useState40 } from "react";
-import { jsx as jsx69 } from "react/jsx-runtime";
-function SpaceStage({ tiles, layout, onLayoutChange, generatedAvatars = true, whiteboard, onOverflowClick, shareCapture, onStopSharing, onChangeShare, className }) {
-  const items = useMemo15(() => buildStageItems(tiles, whiteboard?.isOpen === true), [tiles, whiteboard?.isOpen]);
-  const [selectedShare, setSelectedShare] = useState40(null);
-  const [pin, setPin] = useState40(null);
+import { jsx as jsx75 } from "react/jsx-runtime";
+function SpaceStage({ tiles, layout, onLayoutChange, generatedAvatars = true, whiteboard, onOverflowClick, shareCapture, onStopSharing, onChangeShare, colorScheme = "dark", onCloseBoard, className }) {
+  const items = useMemo17(() => buildStageItems(tiles, whiteboard?.isOpen === true), [tiles, whiteboard?.isOpen]);
+  const [selectedShare, setSelectedShare] = useState44(null);
+  const [pin, setPin] = useState44(null);
+  const [following, setFollowing] = useState44(null);
+  const boardOpen = whiteboard?.isOpen === true && Boolean(whiteboard.props);
+  useEffect38(() => {
+    if (!boardOpen) setFollowing(null);
+  }, [boardOpen]);
+  const canFollow = boardOpen && Boolean(whiteboard?.sendView);
+  const followed = canFollow && tiles.some((tile) => tile.id === following) ? following : 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;
-  const renderContentTile = useCallback12(
+  useEffect38(() => {
+    if (pin !== activePin) setPin(activePin);
+    if (selectedShare !== activeShare) setSelectedShare(activeShare);
+  }, [pin, activePin, selectedShare, activeShare]);
+  const follow = useCallback14((id) => {
+    if (id) {
+      setPin(null);
+      setSelectedShare(null);
+    }
+    setFollowing(id);
+  }, []);
+  const renderContentTile = useCallback14(
     (item, context) => {
       if (item.kind === "screen-share")
-        return /* @__PURE__ */ jsx69(
+        return /* @__PURE__ */ jsx75(
           StageContentTile,
           {
             item,
@@ -7780,7 +9385,7 @@ function SpaceStage({ tiles, layout, onLayoutChange, generatedAvatars = true, wh
             capture: item.participant.isLocal ? shareCapture : void 0,
             onStopSharing: item.participant.isLocal ? onStopSharing : void 0,
             onChangeShare: item.participant.isLocal ? onChangeShare : void 0,
-            switcher: shares.length > 1 ? /* @__PURE__ */ jsx69("div", { role: "group", "aria-label": "Whose screen is big", className: cn("absolute left-2 z-30 flex rounded-[999px] bg-[rgba(12,14,18,.82)] p-[3px]", item.participant.screenShareState === "low-quality" ? "top-11" : "top-2"), children: shares.map((share) => /* @__PURE__ */ jsx69(
+            switcher: shares.length > 1 ? /* @__PURE__ */ jsx75("div", { role: "group", "aria-label": "Whose screen is big", className: cn("absolute left-2 z-30 flex rounded-[999px] bg-[rgba(12,14,18,.82)] p-[3px]", item.participant.screenShareState === "low-quality" ? "top-11" : "top-2"), children: shares.map((share) => /* @__PURE__ */ jsx75(
               "button",
               {
                 type: "button",
@@ -7797,44 +9402,52 @@ function SpaceStage({ tiles, layout, onLayoutChange, generatedAvatars = true, wh
           }
         );
       const boardProps = whiteboard?.props;
-      return /* @__PURE__ */ jsx69(
+      return /* @__PURE__ */ jsx75(
         StageContentTileSurface,
         {
           item,
           ...context,
           mediaVisible: Boolean(boardProps),
-          media: boardProps ? /* @__PURE__ */ jsx69("div", { className: cn("h-full", !context.primary && "pointer-events-none"), inert: !context.primary || void 0, children: /* @__PURE__ */ jsx69(
-            WhiteboardView,
-            {
-              ...boardProps,
-              canDraw: context.primary ? boardProps.canDraw : false,
-              collab: boardProps.collab ? { ...boardProps.collab, canDraw: context.primary && boardProps.collab.canDraw } : void 0,
-              isVisible: context.active,
-              className: cn("h-full !min-h-0", boardProps.className)
-            }
-          ) }) : null
+          media: boardProps ? /* @__PURE__ */ jsx75("div", { className: cn("h-full", !context.primary && "pointer-events-none"), inert: !context.primary || void 0, children: /* @__PURE__ */ jsx75(Board, { board: boardProps, primary: context.primary, visible: context.active, colorScheme, people: tiles, following: followed, onFollow: follow, sendView: canFollow ? whiteboard?.sendView : void 0, onClose: onCloseBoard }) }) : null
         }
       );
     },
-    [whiteboard, shares, shareCapture, onStopSharing, onChangeShare]
+    [follow, whiteboard, shares, shareCapture, onStopSharing, onChangeShare, colorScheme, tiles, followed, canFollow, onCloseBoard]
   );
-  const focusContent = useCallback12(
+  const focusContent = useCallback14(
     (item) => {
       if (item.kind !== "participant") onLayoutChange?.("focus");
     },
     [onLayoutChange]
   );
-  return /* @__PURE__ */ jsx69(Stage, { items, layout, pinnedId: pin ?? activeShare, onPinnedChange: setPin, renderContentTile, onItemClick: focusContent, onOverflowClick, generatedAvatars, emptyState: /* @__PURE__ */ jsx69(QuietSpace, {}), className });
+  return /* @__PURE__ */ jsx75(
+    Stage,
+    {
+      items,
+      layout,
+      pinnedId: activePin ?? activeShare ?? (followed ? "whiteboard" : null),
+      onPinnedChange: setPin,
+      onFollowChange: (id) => follow(followed === id ? null : id),
+      followingId: followed,
+      clickAction: canFollow ? "follow" : "pin",
+      renderContentTile,
+      onItemClick: focusContent,
+      onOverflowClick: canFollow ? void 0 : onOverflowClick,
+      generatedAvatars,
+      emptyState: /* @__PURE__ */ jsx75(QuietSpace, {}),
+      className
+    }
+  );
 }
 SpaceStage.displayName = "SpaceStage";
 
 // src/components/space-view/useDrawerPresence.ts
-import { useEffect as useEffect34, useState as useState41 } from "react";
+import { useEffect as useEffect39, useState as useState45 } from "react";
 var DRAWER_EXIT_MS = 200;
 function useDrawerPresence(panel, exitMs) {
-  const [retained, setRetained] = useState41(panel);
-  const [state, setState] = useState41(panel === null ? "closed" : "open");
-  useEffect34(() => {
+  const [retained, setRetained] = useState45(panel);
+  const [state, setState] = useState45(panel === null ? "closed" : "open");
+  useEffect39(() => {
     if (panel !== null) {
       setRetained(panel);
       setState("open");
@@ -7851,7 +9464,7 @@ function useDrawerPresence(panel, exitMs) {
 }
 
 // src/components/space-view/SpaceView.tsx
-import { Fragment as Fragment28, jsx as jsx70, jsxs as jsxs44 } from "react/jsx-runtime";
+import { Fragment as Fragment32, jsx as jsx76, jsxs as jsxs49 } from "react/jsx-runtime";
 function SpaceView({
   colorScheme = "dark",
   onColorSchemeChange,
@@ -7895,11 +9508,11 @@ function SpaceView({
   const canManageAdmission = useCan("manageAdmission");
   const canManageRecording = useCan("manageRecording");
   const episodeDuration = useEpisodeDuration();
-  const [uncontrolledLayout, setUncontrolledLayout] = useState42(controlledLayout ?? "focus");
-  const [activePanel, setActivePanel] = useState42(initialPanel);
-  const [isReactionPickerOpen, setReactionPickerOpen] = useState42(false);
-  const [commandError, setCommandError] = useState42(null);
-  const [commandSource, setCommandSource] = useState42();
+  const [uncontrolledLayout, setUncontrolledLayout] = useState46(controlledLayout ?? "focus");
+  const [activePanel, setActivePanel] = useState46(initialPanel);
+  const [isReactionPickerOpen, setReactionPickerOpen] = useState46(false);
+  const [commandError, setCommandError] = useState46(null);
+  const [commandSource, setCommandSource] = useState46();
   const onCommandError = (failure, source) => {
     if (!failure && commandError && typeof commandError === "object") callToasts.dismissFailure(commandError.code);
     setCommandError(failure);
@@ -7909,15 +9522,15 @@ function SpaceView({
   const layout = onLayoutChange ? controlledLayout ?? uncontrolledLayout : uncontrolledLayout;
   const feature = (name) => features?.[name] !== false;
   const localId = self.participantId ?? "local";
-  const tiles = useMemo16(
+  const tiles = useMemo18(
     () => toVideoParticipants(participantsSlice.roster, media.remote, localId, self.displayName ?? "You", media.local).map((tile) => ({
       ...tile,
       screenShareHasAudio: tile.isLocal ? media.screenShare.hasAudio : participantsSlice.roster.find((person) => person.participantId === tile.id)?.media.screenShareHasAudio
     })),
     [localId, media.local, media.remote, media.screenShare.hasAudio, participantsSlice.roster, self.displayName]
   );
-  useEffect35(() => setActivePanel(initialPanel), [initialPanel]);
-  useEffect35(() => {
+  useEffect40(() => setActivePanel(initialPanel), [initialPanel]);
+  useEffect40(() => {
     if (feature("admission") && feature("participants") && canManageAdmission && participantsSlice.admissionQueue.length > 0) setActivePanel("participants");
   }, [canManageAdmission, participantsSlice.admissionQueue.length, features?.admission, features?.participants]);
   const buttons = [
@@ -7939,7 +9552,7 @@ function SpaceView({
   const playSound = useSoundCues(feature("sounds") && soundsEnabled);
   const prefersReducedMotion = usePrefersReducedMotion();
   const drawer = useDrawerPresence(activePanel, prefersReducedMotion ? 0 : DRAWER_EXIT_MS);
-  const runCommand = useCallback13(async (command) => {
+  const runCommand = useCallback15(async (command) => {
     try {
       await command();
       setCommandError(null);
@@ -7958,17 +9571,32 @@ function SpaceView({
       else if (commandSource === "microphone") await client.media.setMicrophoneEnabled(true);
       onCommandError(null);
     } catch (cause) {
+      if (cause instanceof SpaceClientError2 && cause.code === "connection.invalid_state") return;
       onCommandError(cause instanceof SpaceClientError2 ? cause : { code: "client.internal_error", recoverable: true, message: "Your device couldn\u2019t start. Try again." }, commandSource);
     }
   };
   const retryableMedia = commandSource && typeof displayedCommandError === "object" && displayedCommandError?.recoverable && (commandSource === "screen" || displayedCommandError.code === "media.device_busy");
   const commandToasts = mappedFailure ? [{ id: "space-command-error", ...mappedFailure, action: retryableMedia ? { label: "Try again", onClick: () => void retryMedia() } : void 0 }] : typeof displayedCommandError === "string" ? [{ id: "space-command-error", message: displayedCommandError, type: "error" }] : [];
+  const [boardToasts, setBoardToasts] = useState46([]);
+  const boardToastCount = useRef34(0);
+  useEffect40(() => {
+    if (!whiteboard?.isOpen) setBoardToasts([]);
+  }, [whiteboard?.isOpen]);
+  const showBoardToast = useCallback15((toast) => {
+    if (!toast) {
+      setBoardToasts([]);
+      return;
+    }
+    boardToastCount.current += 1;
+    const id = `board-${boardToastCount.current}`;
+    setBoardToasts((current) => [...current.slice(-2), { ...toast, id }]);
+  }, []);
   const dismissCommandError = () => {
     if (commandError && typeof commandError === "object") callToasts.dismissFailure(commandError.code);
     setCommandError(null);
     onDismissCommandError?.();
   };
-  return /* @__PURE__ */ jsx70(ParticipantVolumeProvider, { children: /* @__PURE__ */ jsx70(
+  return /* @__PURE__ */ jsx76(ParticipantVolumeProvider, { children: /* @__PURE__ */ jsx76(BoardToastContext.Provider, { value: showBoardToast, children: /* @__PURE__ */ jsx76(
     SpacePresentation,
     {
       colorScheme,
@@ -7987,21 +9615,24 @@ function SpaceView({
         diagnostics: callDiagnostics(connection, media),
         shortcuts: {
           isMuted: media.local.microphone.state !== "enabled",
-          onToggleMute: () => void runCommand(() => client.media.setMicrophoneEnabled(media.local.microphone.state !== "enabled")),
-          onToggleVideo: () => void runCommand(() => client.media.setCameraEnabled(media.local.camera.state !== "enabled")),
+          onToggleMute: connection.status === "live" || media.local.microphone.state === "enabled" ? () => void runCommand(() => client.media.setMicrophoneEnabled(media.local.microphone.state !== "enabled")) : void 0,
+          onToggleVideo: connection.status === "live" || media.local.camera.state === "enabled" ? () => void runCommand(() => client.media.setCameraEnabled(media.local.camera.state !== "enabled")) : void 0,
           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"),
           onClosePanel: () => setActivePanel(null),
-          onPushToTalk: (enabled) => void runCommand(() => client.media.setMicrophoneEnabled(enabled))
+          onPushToTalk: (enabled) => {
+            if (enabled && connection.status !== "live") return;
+            void runCommand(() => client.media.setMicrophoneEnabled(enabled));
+          }
         },
         duration: episodeDuration,
         isRecording: recording.current?.status === "recording",
         layout,
         onLayoutChange: updateLayout
       },
-      stage: /* @__PURE__ */ jsx70(
+      stage: /* @__PURE__ */ jsx76(
         SpaceStage,
         {
           tiles,
@@ -8009,16 +9640,20 @@ function SpaceView({
           onLayoutChange: updateLayout,
           generatedAvatars,
           whiteboard,
+          onCloseBoard: whiteboard?.isOpen ? onToggleWhiteboard : void 0,
+          colorScheme,
           onOverflowClick: feature("participants") ? () => setActivePanel("participants") : void 0,
           shareCapture: media.screenShare.capture,
-          onStopSharing: () => client.media.setScreenShareEnabled(false),
-          onChangeShare: async (options) => {
-            await client.media.setScreenShareEnabled(true, options);
+          onStopSharing: async () => {
+            await client.media.setScreenShareEnabled(false);
           },
+          onChangeShare: connection.status === "live" ? async (options) => {
+            await client.media.setScreenShareEnabled(true, options);
+          } : void 0,
           className: "h-full"
         }
       ),
-      controls: /* @__PURE__ */ jsx70(
+      controls: /* @__PURE__ */ jsx76(
         ControlBar,
         {
           density: "comfortable",
@@ -8038,9 +9673,9 @@ function SpaceView({
           onEndForEveryone: endCallForEveryone
         }
       ),
-      stageOverlay: /* @__PURE__ */ jsxs44(Fragment28, { children: [
-        feature("reactions") ? /* @__PURE__ */ jsx70(ReactionsOverlay, {}) : null,
-        feature("reactions") && canSendReaction ? /* @__PURE__ */ jsx70("div", { className: "absolute bottom-24 left-1/2 z-50 -translate-x-1/2", children: /* @__PURE__ */ jsx70(
+      stageOverlay: /* @__PURE__ */ jsxs49(Fragment32, { children: [
+        feature("reactions") ? /* @__PURE__ */ jsx76(ReactionsOverlay, {}) : null,
+        feature("reactions") && canSendReaction && connection.status === "live" ? /* @__PURE__ */ jsx76("div", { className: "absolute bottom-24 left-1/2 z-50 -translate-x-1/2", children: /* @__PURE__ */ jsx76(
           ReactionPicker,
           {
             isHandRaised: self.handRaised,
@@ -8053,28 +9688,32 @@ function SpaceView({
           }
         ) }) : null
       ] }),
-      sidebar: /* @__PURE__ */ jsxs44(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__ */ jsx70(ChatPanel, { variant: "mobile", generatedAvatars, onClose: () => setActivePanel(null), pickChatFiles }) : null,
-        drawer.panel === "participants" && feature("participants") ? /* @__PURE__ */ jsx70(ParticipantsPanel, { variant: "mobile", admissionEnabled: feature("admission"), generatedAvatars, onCommandError, onClose: () => setActivePanel(null) }) : null,
-        drawer.panel === "admission" && feature("admission") ? /* @__PURE__ */ jsx70(AdmissionPanel, { className: "h-full w-full rounded-none shadow-none", onClose: () => setActivePanel(null) }) : null
+      sidebar: /* @__PURE__ */ jsxs49(CallCard, { state: drawer.state, panel: drawer.panel, onPanelChange: setActivePanel, peopleCount: participantsSlice.roster.length, participantsEnabled: feature("participants"), chatEnabled: feature("chat"), onClose: () => setActivePanel(null), children: [
+        drawer.panel === "chat" && feature("chat") ? /* @__PURE__ */ jsx76(ChatPanel, { variant: "mobile", generatedAvatars, onClose: () => setActivePanel(null), pickChatFiles }) : null,
+        drawer.panel === "participants" && feature("participants") ? /* @__PURE__ */ jsx76(ParticipantsPanel, { variant: "mobile", admissionEnabled: feature("admission"), generatedAvatars, onCommandError, onClose: () => setActivePanel(null) }) : null,
+        drawer.panel === "admission" && feature("admission") ? /* @__PURE__ */ jsx76(AdmissionPanel, { className: "h-full w-full rounded-none shadow-none", onClose: () => setActivePanel(null) }) : null
       ] }),
-      toasts: /* @__PURE__ */ jsx70(
+      toasts: /* @__PURE__ */ jsx76(
         ToastStack,
         {
-          toasts: [...callToasts.toasts.filter((toast) => !(typeof displayedCommandError === "object" && displayedCommandError && toast.failureCode === displayedCommandError.code)), ...commandToasts],
-          onDismiss: (id) => id === "space-command-error" ? dismissCommandError() : callToasts.dismiss(id)
+          toasts: [...callToasts.toasts.filter((toast) => !(typeof displayedCommandError === "object" && displayedCommandError && toast.failureCode === displayedCommandError.code)), ...whiteboard?.isOpen ? boardToasts : [], ...commandToasts],
+          onDismiss: (id) => {
+            if (id === "space-command-error") dismissCommandError();
+            else if (id.startsWith("board-")) setBoardToasts((current) => current.filter((toast) => toast.id !== id));
+            else callToasts.dismiss(id);
+          }
         }
       ),
-      mediaOutput: /* @__PURE__ */ jsx70("div", { className: "[&>div]:top-[68px] [&>div>button]:h-11 [&>div>button]:shadow-[0_8px_24px_rgba(0,0,0,.4)]", children: /* @__PURE__ */ jsx70(AudioOutput, { resumeAudioLabel: "Your browser paused the sound. Click to hear the call" }) }),
-      overlays: /* @__PURE__ */ jsxs44(Fragment28, { children: [
-        /* @__PURE__ */ jsx70(CallReady, { open: callLinkOpen ?? callLink.open, onClose: onCallLinkToggle ?? callLink.close, link: effectiveShareUrl }),
+      mediaOutput: /* @__PURE__ */ jsx76("div", { className: "[&>div]:top-[68px] [&>div>button]:h-11 [&>div>button]:shadow-[0_8px_24px_rgba(0,0,0,.4)]", children: /* @__PURE__ */ jsx76(AudioOutput, { resumeAudioLabel: "Your browser paused the sound. Click to hear the call" }) }),
+      overlays: /* @__PURE__ */ jsxs49(Fragment32, { children: [
+        /* @__PURE__ */ jsx76(CallReady, { open: callLinkOpen ?? callLink.open, onClose: onCallLinkToggle ?? callLink.close, link: effectiveShareUrl }),
         overlay,
-        reconnecting && reconnecting.status !== "reconnecting" ? /* @__PURE__ */ jsx70(ReconnectingOverlay, { ...reconnecting }) : null,
-        /* @__PURE__ */ jsx70(OfflineActions, { reconnecting: reconnecting?.status === "reconnecting" && reconnecting.isVisible })
+        reconnecting && reconnecting.status !== "reconnecting" ? /* @__PURE__ */ jsx76(ReconnectingOverlay, { ...reconnecting }) : null,
+        /* @__PURE__ */ jsx76(OfflineActions, { reconnecting: reconnecting?.status === "reconnecting" && reconnecting.isVisible })
       ] }),
       className
     }
-  ) });
+  ) }) });
 }
 
 export {
@@ -8141,6 +9780,6 @@ export {
   Stage,
   ParticipantGrid,
   QuietSpace,
-  WhiteboardView,
-  SpaceView
+  SpaceView,
+  WhiteboardView
 };