@q9labsai/chalk-whiteboard 5.2.0 → 5.2.1

package/dist/react/index.js

@@ -1,3 +1,7 @@
+import {
+  getWhiteboardAssets,
+  resolveExcalidrawAssetPath
+} from "../chunk-BN4VA2BS.js";
 import {
   CANONICAL_INK
 } from "../chunk-IVFWOYSW.js";
@@ -172,11 +176,14 @@ async function waitForMathJaxRuntime() {
   throw new Error("Math renderer failed to initialize");
 }
 function configureMathJax(target, existing) {
+  const configuredPath = getWhiteboardAssets()?.mathJaxBasePath;
+  const basePath = configuredPath ? new URL(configuredPath, document.baseURI).href.replace(/\/$/, "") : void 0;
   target.MathJax = {
     ...existing ?? {},
-    options: { ...existing?.options, enableMenu: false },
-    startup: { ...existing?.startup, typeset: false },
-    svg: { fontCache: "none", ...existing?.svg }
+    ...basePath ? { loader: { paths: { mathjax: basePath, fonts: `${basePath}/fonts` }, ...existing?.loader } } : {},
+    svg: { ...basePath ? { dynamicPrefix: `${basePath}/fonts/mathjax-newcm-font/svg/dynamic` } : {}, fontCache: "none", ...existing?.svg },
+    options: { ...basePath ? { worker: { path: `${basePath}/sre`, maps: `${basePath}/sre/mathmaps` } } : {}, ...existing?.options, enableMenu: false },
+    startup: { ...existing?.startup, typeset: false }
   };
 }
 function loadMathJaxScript() {
@@ -188,7 +195,8 @@ function loadMathJaxScript() {
       return;
     }
     const script = document.createElement("script");
-    script.src = DEFAULT_MATHJAX_SCRIPT_URL;
+    const basePath = getWhiteboardAssets()?.mathJaxBasePath;
+    script.src = basePath ? `${basePath.replace(/\/$/, "")}/tex-svg.js` : DEFAULT_MATHJAX_SCRIPT_URL;
     script.async = true;
     script.dataset.chalkMathjax = "true";
     script.onload = () => resolve();
@@ -288,7 +296,7 @@ function useWhiteboardCanvasConfiguration(props) {
     canDraw,
     headless: props.headless === true,
     classNames,
-    excalidrawCssPath: valueOr(props.excalidrawCssPath, DEFAULT_EXCALIDRAW_CSS),
+    excalidrawCssPath: valueOr(props.excalidrawCssPath, getWhiteboardAssets()?.excalidrawCssPath ?? DEFAULT_EXCALIDRAW_CSS),
     icons: valueOr(props.icons, {}),
     isCollaborating: Boolean(props.collab),
     isVisible: valueOr(props.isVisible, true),
@@ -300,7 +308,7 @@ function valueOr(value, fallback) {
   return value === void 0 ? fallback : value;
 }
 var STYLESHEET_ID = "chalk-excalidraw-styles";
-function preloadWhiteboardStylesheet(href = DEFAULT_EXCALIDRAW_CSS) {
+function preloadWhiteboardStylesheet(href = getWhiteboardAssets()?.excalidrawCssPath ?? DEFAULT_EXCALIDRAW_CSS) {
   if (typeof document !== "undefined") boardStylesheet(href);
 }
 function boardStylesheet(href) {
@@ -325,7 +333,7 @@ function useExternalStylesheet(href) {
     const element = boardStylesheet(href);
     const fail = () => setError(`Failed to load ${href}`);
     const ownLink = isManagedStylesheet(element);
-    if (!ownLink || element.dataset.state === "loaded") {
+    if (!ownLink || element.sheet || element.dataset.state === "loaded") {
       setLoaded(true);
       return;
     }
@@ -343,10 +351,11 @@ function useExternalStylesheet(href) {
   }, [href]);
   return { error, loaded };
 }
-function useExcalidrawModule(onLoadError, setLoadError) {
+function useExcalidrawModule(cssPath, onLoadError, setLoadError) {
   const [excalidraw, setExcalidraw] = useState2(null);
   useEffect(() => {
     let mounted = true;
+    window.EXCALIDRAW_ASSET_PATH = resolveExcalidrawAssetPath(cssPath);
     import("@excalidraw/excalidraw").then((module) => {
       if (mounted) setExcalidraw(module);
     }).catch((reason) => {
@@ -357,7 +366,7 @@ function useExcalidrawModule(onLoadError, setLoadError) {
     return () => {
       mounted = false;
     };
-  }, [onLoadError, setLoadError]);
+  }, [cssPath, onLoadError, setLoadError]);
   return excalidraw;
 }
 var TRANSPARENT = "transparent";
@@ -390,14 +399,15 @@ var UI_OPTIONS = {
 function useWhiteboardCollaboration(options) {
   const apiRef = useRef(null);
   const refs = useCollaborationRefs(options.collab, options.canDraw, options.inkColor);
+  const [committedApi, setCommittedApi] = useState2(null);
   const [engineReady, setEngineReady] = useState2(false);
   const initializeEngine = useCollaborationEngineLoader(refs, apiRef, options.headless, options.onLoadError, options.setLoadError, setEngineReady);
-  const handleApiReady = useExcalidrawApiReady(apiRef, initializeEngine, options.onExcalidrawApiReady);
+  const handleApiReady = useExcalidrawApiReady(apiRef, setCommittedApi, options.onExcalidrawApiReady);
   const handlers = useExcalidrawSceneHandlers(apiRef, refs.engineRef, options.onSelectedLatexChange);
   useCollaborationPermissions(refs.engineRef, options.canDraw, options.collab?.canManage);
   useCollaborationInk(refs.engineRef, options.inkColor);
   useCollaborationDisposal(refs.engineRef, refs.isMountedRef);
-  useCollaborationInitialization(options.collab, apiRef, refs.engineRef, initializeEngine);
+  useCollaborationInitialization(options.collab, committedApi, refs.engineRef, initializeEngine);
   return { ready: !options.collab || engineReady, apiRef, engineRef: refs.engineRef, handleApiReady, ...handlers };
 }
 function useCollaborationRefs(collab, canDraw, inkColor) {
@@ -446,18 +456,18 @@ function useCollaborationEngineLoader(refs, apiRef, headless, onLoadError, setLo
     });
   }, [apiRef, headless, onLoadError, refs, setLoadError, setEngineReady]);
 }
-function useExcalidrawApiReady(apiRef, initializeEngine, onExcalidrawApiReady) {
+function useExcalidrawApiReady(apiRef, setCommittedApi, onExcalidrawApiReady) {
   const didReportApiRef = useRef(false);
   return useCallback(
     (api) => {
       apiRef.current = api;
-      initializeEngine();
+      setCommittedApi(api);
       if (!didReportApiRef.current) {
         didReportApiRef.current = true;
         onExcalidrawApiReady?.(api);
       }
     },
-    [apiRef, initializeEngine, onExcalidrawApiReady]
+    [apiRef, setCommittedApi, onExcalidrawApiReady]
   );
 }
 function useExcalidrawSceneHandlers(apiRef, engineRef, onSelectedLatexChange) {
@@ -509,15 +519,15 @@ function useCollaborationDisposal(engineRef, isMountedRef) {
     };
   }, [engineRef, isMountedRef]);
 }
-function useCollaborationInitialization(collab, apiRef, engineRef, initializeEngine) {
+function useCollaborationInitialization(collab, committedApi, engineRef, initializeEngine) {
   useEffect(() => {
     if (!collab) {
       engineRef.current?.dispose();
       engineRef.current = null;
       return;
     }
-    if (apiRef.current) initializeEngine();
-  }, [apiRef, collab, engineRef, initializeEngine]);
+    if (committedApi) initializeEngine();
+  }, [committedApi, collab, engineRef, initializeEngine]);
 }
 function useWhiteboardMath({ apiRef, canDraw, excalidraw, isCollaborating, selectedLatex, setSelectedLatex, syncScene }) {
   const [isMathOpen, setIsMathOpen] = useState2(false);
@@ -549,7 +559,7 @@ function useWhiteboardCanvasState(props) {
   const configuration = useWhiteboardCanvasConfiguration(props);
   const [loadError, setLoadError] = useState2(null);
   const [selectedLatex, setSelectedLatex] = useState2(null);
-  const excalidraw = useExcalidrawModule(props.onLoadError, setLoadError);
+  const excalidraw = useExcalidrawModule(configuration.excalidrawCssPath, props.onLoadError, setLoadError);
   const stylesheet = useExternalStylesheet(configuration.excalidrawCssPath);
   const collaboration = useWhiteboardCollaboration({
     canDraw: configuration.canDraw,
@@ -732,10 +742,1793 @@ function observeEngineHistory(api, canvas, onChange) {
     dispose();
   };
 }
+
+// src/react/board/board-history.ts
+import { useEffect as useEffect2, useState as useState3 } from "react";
+function useEngineHistory(root, engine) {
+  const [history, setHistory] = useState3({ canUndo: false, canRedo: false });
+  useEffect2(() => {
+    const canvas = root.current?.querySelector(".excalidraw");
+    if (!engine || !canvas) return;
+    return observeEngineHistory(engine.api, canvas, setHistory);
+  }, [engine, root]);
+  return history;
+}
+
+// src/react/board/board-view-versions.ts
+import { ChalkWhiteboardViewVersions } from "@q9labsai/chalk-client";
+
+// src/react/board/Board.tsx
+import { useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo3, useRef as useRef6, useState as useState8 } from "react";
+
+// src/react/board/useMediaQuery.ts
+import { useEffect as useEffect3, useState as useState4 } from "react";
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState4(() => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query).matches : false);
+  useEffect3(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const mediaQuery = window.matchMedia(query);
+    const handleChange = () => setMatches(mediaQuery.matches);
+    handleChange();
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [query]);
+  return matches;
+}
+function usePrefersReducedMotion() {
+  return useMediaQuery("(prefers-reduced-motion: reduce)");
+}
+
+// src/react/board/board-model.ts
+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 DRAW_POLICIES = [
+  { id: "everyone", label: "Everyone" },
+  { id: "hosts", label: "Only hosts" },
+  { id: "picked", label: "Picked people" }
+];
+var PEN_COLORS = [
+  { id: "ink", label: "Ink" },
+  { id: "red", label: "Red" },
+  { 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, bounds) {
+  const { maxCoordinate, maxExtent } = bounds;
+  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, zoom) {
+  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, fallback) {
+  try {
+    const value = globalThis.localStorage?.getItem(key);
+    return allowed.find((entry) => entry.id === value)?.id ?? fallback;
+  } catch {
+    return fallback;
+  }
+}
+function writeStored(key, value) {
+  try {
+    globalThis.localStorage?.setItem(key, value);
+  } catch {
+  }
+}
+
+// src/react/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 } } });
+}
+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/react/board/BoardCursors.tsx
+import { useEffect as useEffect4, useRef as useRef2, useState as useState5 } from "react";
+
+// src/react/board/BoardIcon.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var GLYPHS = {
+  select: /* @__PURE__ */ jsx3("path", { d: "M5 3l14 7-6.5 2L10 19z" }),
+  hand: /* @__PURE__ */ jsx3("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__ */ jsx3("path", { d: "M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z" }),
+  highlighter: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3("path", { d: "M9 11l-6 6v3h9l3-3" }),
+    /* @__PURE__ */ jsx3("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__ */ jsx3("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+  ellipse: /* @__PURE__ */ jsx3("ellipse", { cx: "12", cy: "12", rx: "9", ry: "6.5" }),
+  diamond: /* @__PURE__ */ jsx3("path", { d: "M12 3l9 9-9 9-9-9z" }),
+  arrow: /* @__PURE__ */ jsx3("path", { d: "M5 19L19 5M9 5h10v10" }),
+  line: /* @__PURE__ */ jsx3("path", { d: "M4 20L20 4" }),
+  text: /* @__PURE__ */ jsx3("path", { d: "M5 6V4h14v2M12 4v16M9 20h6" }),
+  note: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3("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__ */ jsx3("path", { d: "M14 21v-5a2 2 0 0 1 2-2h5" })
+  ] }),
+  eraser: /* @__PURE__ */ jsx3("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__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "2.5", fill: "currentColor" }),
+    /* @__PURE__ */ jsx3("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__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3("path", { d: "M9 14L4 9l5-5" }),
+    /* @__PURE__ */ jsx3("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 0 11H11" })
+  ] }),
+  redo: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3("path", { d: "M15 14l5-5-5-5" }),
+    /* @__PURE__ */ jsx3("path", { d: "M20 9H9.5a5.5 5.5 0 0 0 0 11H13" })
+  ] }),
+  minus: /* @__PURE__ */ jsx3("path", { d: "M5 12h14" }),
+  plus: /* @__PURE__ */ jsx3("path", { d: "M12 5v14M5 12h14" }),
+  fit: /* @__PURE__ */ jsx3("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__ */ jsx3("path", { d: "M12 3v12M7 10l5 5 5-5M4 21h16" }),
+  copy: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2" }),
+    /* @__PURE__ */ jsx3("path", { d: "M5 15V5a2 2 0 0 1 2-2h10" })
+  ] }),
+  trash: /* @__PURE__ */ jsx3("path", { d: "M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3" }),
+  close: /* @__PURE__ */ jsx3("path", { d: "M6 6l12 12M18 6L6 18" }),
+  check: /* @__PURE__ */ jsx3("path", { d: "M5 12l5 5 9-10" }),
+  target: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "4" })
+  ] }),
+  eye: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3("path", { d: "M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z" }),
+    /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "3" })
+  ] }),
+  wifiOff: /* @__PURE__ */ jsx3("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__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3("rect", { x: "5", y: "11", width: "14", height: "9", rx: "2" }),
+    /* @__PURE__ */ jsx3("path", { d: "M8 11V8a4 4 0 0 1 8 0v3" })
+  ] }),
+  more: /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3("circle", { cx: "5", cy: "12", r: "1.2" }),
+    /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "1.2" }),
+    /* @__PURE__ */ jsx3("circle", { cx: "19", cy: "12", r: "1.2" })
+  ] }),
+  chevron: /* @__PURE__ */ jsx3("path", { d: "M6 9l6 6 6-6" })
+};
+function BoardIcon({ name, size = 20, className }) {
+  return /* @__PURE__ */ jsx3("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: GLYPHS[name] });
+}
+function GripIcon({ className }) {
+  return /* @__PURE__ */ jsx3("svg", { width: "10", height: "18", viewBox: "0 0 10 18", fill: "currentColor", className, "aria-hidden": "true", children: [3, 9, 15].flatMap((y) => [/* @__PURE__ */ jsx3("circle", { cx: "2.5", cy: y, r: "1.5" }, `l${y}`), /* @__PURE__ */ jsx3("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__ */ jsxs3("svg", { className: "chalk-board-cursor-arrow", width: "22", height: "26", viewBox: "0 0 22 26", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx3("path", { d: path, fill: "#fff", stroke: "#fff", strokeWidth: "5", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx3("path", { d: path, fill: color, stroke: color, strokeWidth: "2.2", strokeLinejoin: "round" })
+  ] });
+}
+
+// src/react/board/BoardCursors.tsx
+import { jsx as jsx4, jsxs as jsxs4 } 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,
+  renderAvatar
+}) {
+  const layer = useRef2(null);
+  const [people, setPeople] = useState5([]);
+  const tracked = useRef2(/* @__PURE__ */ new Map());
+  const pointer = useRef2(null);
+  useEffect4(() => {
+    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]);
+  useEffect4(() => {
+    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__ */ jsx4("div", { ref: layer, className: "chalk-board-cursors", "aria-hidden": "true", "data-hidden": hidden || void 0, children: people.map((person) => /* @__PURE__ */ jsxs4("div", { className: "chalk-board-cursor", "data-cursor": person.id, children: [
+    /* @__PURE__ */ jsx4(CursorArrow, { color: colorFor(person.id) }),
+    /* @__PURE__ */ jsxs4("span", { className: "chalk-board-cursor-tag", children: [
+      /* @__PURE__ */ jsx4("span", { className: "chalk-board-cursor-name", style: { background: colorFor(person.id) }, children: person.name.split(" ")[0] }),
+      renderAvatar?.(person.name)
+    ] })
+  ] }, person.id)) });
+}
+
+// src/react/board/BoardIsland.tsx
+import { useLayoutEffect, useRef as useRef5, useState as useState7 } from "react";
+
+// src/react/board/controls/ChalkMenu.tsx
+import { Menu } from "@base-ui/react/menu";
+import { useRef as useRef3 } from "react";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function ChalkMenu({ trigger, children, side = "bottom", className, onOpenChange }) {
+  const container = useRef3(null);
+  return /* @__PURE__ */ jsx5(
+    "span",
+    {
+      ref: (element) => {
+        container.current = element?.closest("[data-chalk]") ?? element;
+      },
+      style: { display: "contents" },
+      children: /* @__PURE__ */ jsxs5(Menu.Root, { onOpenChange, children: [
+        /* @__PURE__ */ jsx5(Menu.Trigger, { render: trigger }),
+        /* @__PURE__ */ jsx5(Menu.Portal, { container, children: /* @__PURE__ */ jsx5(Menu.Positioner, { side, align: side === "top" ? "center" : "end", sideOffset: side === "top" ? 10 : 6, collisionPadding: 8, className: "chalk-menu-positioner", children: /* @__PURE__ */ jsx5(Menu.Popup, { "data-part": "menu", className: ["chalk-menu", className].filter(Boolean).join(" "), style: { maxHeight: "var(--available-height)", maxWidth: "var(--available-width)", overflowY: "auto", overscrollBehavior: "contain" }, children }) }) })
+      ] })
+    }
+  );
+}
+function ChalkMenuItem({ children, checked, disabled, onClick, closeOnClick }) {
+  const content = /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    checked !== void 0 ? /* @__PURE__ */ jsx5("span", { "data-part": "menu-check", className: "chalk-menu-check", "aria-hidden": "true", children: checked ? /* @__PURE__ */ jsx5("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx5("path", { d: "M20 6L9 17l-5-5" }) }) : null }) : null,
+    children
+  ] });
+  if (checked !== void 0)
+    return /* @__PURE__ */ jsx5(Menu.Item, { "data-part": "menu-item", className: "chalk-menu-item", role: "menuitemradio", "aria-checked": checked, disabled, onClick, closeOnClick, children: content });
+  return /* @__PURE__ */ jsx5(Menu.Item, { "data-part": "menu-item", className: "chalk-menu-item", disabled, onClick, closeOnClick, children: content });
+}
+function ChalkMenuLabel({ children }) {
+  return /* @__PURE__ */ jsx5("div", { "data-part": "menu-label", className: "chalk-menu-label", children });
+}
+
+// src/react/board/controls/ChalkPopover.tsx
+import { Popover } from "@base-ui/react/popover";
+import { useState as useState6 } from "react";
+
+// src/react/board/controls/ChalkTooltip.tsx
+import { Tooltip } from "@base-ui/react/tooltip";
+import { useRef as useRef4 } from "react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function ChalkTooltip({ trigger, children }) {
+  const container = useRef4(null);
+  const fine = useMediaQuery("(pointer:fine)");
+  if (!fine) return trigger;
+  return /* @__PURE__ */ jsx6(
+    "span",
+    {
+      ref: (element) => {
+        container.current = element?.closest("[data-chalk]") ?? element;
+      },
+      style: { display: "contents" },
+      children: /* @__PURE__ */ jsx6(Tooltip.Provider, { delay: 400, children: /* @__PURE__ */ jsxs6(Tooltip.Root, { children: [
+        /* @__PURE__ */ jsx6(Tooltip.Trigger, { render: trigger }),
+        /* @__PURE__ */ jsx6(Tooltip.Portal, { container, children: /* @__PURE__ */ jsx6(Tooltip.Positioner, { side: "top", sideOffset: 8, collisionPadding: 8, style: { zIndex: 95 }, children: /* @__PURE__ */ jsx6(Tooltip.Popup, { "data-part": "tooltip", className: "chalk-tooltip", children }) }) })
+      ] }) })
+    }
+  );
+}
+
+// src/react/board/controls/ChalkPopover.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function ChalkPopover({
+  trigger,
+  children,
+  label,
+  className,
+  alignOffset = 0,
+  tooltip,
+  open,
+  onOpenChange
+}) {
+  const [holder, setHolder] = useState6(null);
+  const root = holder?.closest("[data-chalk]") ?? null;
+  return /* @__PURE__ */ jsx7("span", { ref: setHolder, style: { display: "contents" }, children: /* @__PURE__ */ jsxs7(Popover.Root, { open, onOpenChange, children: [
+    tooltip ? /* @__PURE__ */ jsx7(ChalkTooltip, { trigger: /* @__PURE__ */ jsx7(Popover.Trigger, { render: trigger }), children: tooltip }) : /* @__PURE__ */ jsx7(Popover.Trigger, { render: trigger }),
+    /* @__PURE__ */ jsx7(Popover.Portal, { container: root ?? holder, children: /* @__PURE__ */ jsx7(Popover.Positioner, { side: "bottom", align: "start", alignOffset, sideOffset: 8, collisionPadding: 8, collisionBoundary: root ?? void 0, className: "chalk-popover-positioner", children: /* @__PURE__ */ jsx7(Popover.Popup, { "aria-label": label, "data-part": "popover", className: ["chalk-menu chalk-popover", className].filter(Boolean).join(" "), style: { maxHeight: "var(--available-height)", maxWidth: "var(--available-width)", overflowY: "auto", overscrollBehavior: "contain" }, children }) }) })
+  ] }) });
+}
+
+// src/react/board/BoardIsland.tsx
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs8 } 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__ */ jsxs8(ChalkTooltip, { trigger: children, children: [
+    label,
+    keyName ? /* @__PURE__ */ jsx8("kbd", { className: "chalk-board-kbd", children: keyName }) : null
+  ] });
+}
+function ToolButton({ entry, active, onTool }) {
+  return /* @__PURE__ */ jsx8(Tip, { label: entry.label, keyName: entry.key, children: /* @__PURE__ */ jsx8("button", { type: "button", className: "chalk-board-tool", "aria-label": entry.label, "aria-keyshortcuts": entry.key, "aria-pressed": active, onClick: () => onTool(entry.tool), children: /* @__PURE__ */ jsx8(BoardIcon, { name: entry.glyph }) }) });
+}
+function ShapesButton({ tool, shape, onTool, side }) {
+  const active = SHAPES.some((entry) => entry.id === tool);
+  return /* @__PURE__ */ jsx8(
+    ChalkMenu,
+    {
+      side,
+      trigger: /* @__PURE__ */ jsxs8("button", { type: "button", className: "chalk-board-tool", "aria-label": "Shapes", "aria-keyshortcuts": "R", "aria-pressed": active, children: [
+        /* @__PURE__ */ jsx8(BoardIcon, { name: shape }),
+        /* @__PURE__ */ jsx8(BoardIcon, { name: "chevron", size: 9, className: "chalk-board-tool-caret" })
+      ] }),
+      children: SHAPES.map((entry) => /* @__PURE__ */ jsxs8(ChalkMenuItem, { checked: tool === entry.id, onClick: () => onTool(entry.id), children: [
+        /* @__PURE__ */ jsx8(BoardIcon, { name: entry.id, size: 18 }),
+        entry.label,
+        /* @__PURE__ */ jsx8("kbd", { className: "chalk-board-menu-kbd", children: entry.key })
+      ] }, entry.id))
+    }
+  );
+}
+function ColorPanel({ color, width, surface, theme, onColor, onWidth }) {
+  return /* @__PURE__ */ jsxs8("div", { className: "chalk-board-colors", children: [
+    /* @__PURE__ */ jsx8("div", { role: "radiogroup", "aria-label": "Colour", className: "chalk-board-swatches", children: PEN_COLORS.map((entry) => /* @__PURE__ */ jsx8("button", { type: "button", role: "radio", "aria-checked": color === entry.id, "aria-label": entry.label, className: "chalk-board-swatch", onClick: () => onColor(entry.id), children: /* @__PURE__ */ jsx8("i", { style: { background: penHex(entry.id, surface, theme) } }) }, entry.id)) }),
+    /* @__PURE__ */ jsx8("div", { role: "radiogroup", "aria-label": "Stroke width", className: "chalk-board-swatches", children: PEN_WIDTHS.map((entry) => /* @__PURE__ */ jsx8("button", { type: "button", role: "radio", "aria-checked": width === entry.id, "aria-label": entry.label, className: "chalk-board-width", onClick: () => onWidth(entry.id), children: /* @__PURE__ */ jsx8("i", { style: { height: entry.units } }) }, entry.id)) })
+  ] });
+}
+function ColorButton(props) {
+  const swatch = penHex(props.color, props.surface, props.theme);
+  return /* @__PURE__ */ jsx8(
+    ChalkPopover,
+    {
+      label: "Colour and width",
+      tooltip: "Colour and width",
+      open: props.open,
+      onOpenChange: props.onOpenChange,
+      className: "chalk-board-color-popover",
+      trigger: props.trigger ?? /* @__PURE__ */ jsx8("button", { type: "button", className: "chalk-board-tool", "aria-label": `Colour: ${PEN_COLORS.find((entry) => entry.id === props.color).label}`, children: /* @__PURE__ */ jsx8("span", { className: "chalk-board-tool-swatch", style: { background: swatch } }) }),
+      children: /* @__PURE__ */ jsx8(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__ */ jsx8("span", { className: "chalk-board-separator", "aria-hidden": "true" });
+}
+function ToolRow({ tool, shape, onTool, place, canUndo, canRedo, onUndo, onRedo, primaryToolsFirst, ...colors }) {
+  const primaryTools = ["pen", "text", "note", "eraser"];
+  const entries = TOOLS.flat();
+  const shapes = /* @__PURE__ */ jsx8(ShapesButton, { tool, shape, onTool, side: place === "top" ? "bottom" : "top" });
+  const button = (entry) => /* @__PURE__ */ jsx8(ToolButton, { entry, active: tool === entry.tool, onTool }, entry.tool);
+  const groups = TOOLS.map((group, index) => /* @__PURE__ */ jsxs8("span", { className: "chalk-board-group", children: [
+    group.map((entry) => /* @__PURE__ */ jsx8(ToolButton, { entry, active: tool === entry.tool, onTool }, entry.tool)),
+    index === 1 ? shapes : null
+  ] }, index));
+  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    primaryToolsFirst ? entries.filter((entry) => primaryTools.includes(entry.tool)).map((entry) => /* @__PURE__ */ jsxs8("span", { className: "chalk-board-group", children: [
+      button(entry),
+      entry.tool === "pen" ? shapes : null
+    ] }, entry.tool)) : groups.flatMap((group, index) => [index > 0 ? /* @__PURE__ */ jsx8(Separator, {}, `s${index}`) : null, group]),
+    /* @__PURE__ */ jsx8(Separator, {}),
+    primaryToolsFirst ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
+      /* @__PURE__ */ jsx8(ColorButton, { ...colors }),
+      /* @__PURE__ */ jsx8(Separator, {})
+    ] }) : null,
+    /* @__PURE__ */ jsx8(Tip, { label: "Undo", keyName: "\u2318Z", children: /* @__PURE__ */ jsx8("button", { type: "button", className: "chalk-board-tool", "aria-label": "Undo", disabled: !canUndo, onClick: onUndo, children: /* @__PURE__ */ jsx8(BoardIcon, { name: "undo" }) }) }),
+    /* @__PURE__ */ jsx8(Tip, { label: "Redo", keyName: "\u21E7\u2318Z", children: /* @__PURE__ */ jsx8("button", { type: "button", className: "chalk-board-tool", "aria-label": "Redo", disabled: !canRedo, onClick: onRedo, children: /* @__PURE__ */ jsx8(BoardIcon, { name: "redo" }) }) }),
+    primaryToolsFirst ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
+      /* @__PURE__ */ jsx8(Separator, {}),
+      entries.filter((entry) => !primaryTools.includes(entry.tool)).map(button)
+    ] }) : /* @__PURE__ */ jsxs8(Fragment3, { children: [
+      /* @__PURE__ */ jsx8(Separator, {}),
+      /* @__PURE__ */ jsx8(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 = useRef5(null);
+  const tabStop = useRef5(null);
+  const reduced = usePrefersReducedMotion();
+  const [drag, setDrag] = useState7(null);
+  const dropRect = useRef5(null);
+  const [expanded, setExpanded] = useState7(false);
+  const [colorsOpen, setColorsOpen] = useState7(false);
+  const press = useRef5({ long: false });
+  useLayoutEffect(() => {
+    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;
+  });
+  useLayoutEffect(() => {
+    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__ */ jsx8("div", { ref: island, className: "chalk-board-island", "data-place": "compact", children: /* @__PURE__ */ jsx8(
+      ColorButton,
+      {
+        ...props,
+        open: colorsOpen,
+        onOpenChange: (open) => {
+          if (!open) setColorsOpen(false);
+        },
+        trigger: /* @__PURE__ */ jsxs8(
+          "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__ */ jsx8(BoardIcon, { name: "pen" }),
+              /* @__PURE__ */ jsx8("span", { className: "chalk-board-tool-dot", style: { background: penHex(props.color, props.surface, props.theme) } })
+            ]
+          }
+        )
+      }
+    ) });
+  }
+  const vertical = place === "left" && !compact;
+  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    drag ? ISLAND_PLACES.map((entry) => /* @__PURE__ */ jsx8("div", { className: "chalk-board-dropzone", "data-zone": entry.id, "data-near": drag.near === entry.id || void 0, "aria-hidden": "true" }, entry.id)) : null,
+    /* @__PURE__ */ jsxs8(
+      "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__ */ jsxs8(Fragment3, { children: [
+            /* @__PURE__ */ jsx8("button", { type: "button", className: "chalk-board-tool", "aria-label": "Close drawing tools", onClick: () => setExpanded(false), children: /* @__PURE__ */ jsx8(BoardIcon, { name: "close" }) }),
+            /* @__PURE__ */ jsx8(Separator, {})
+          ] }) : !props.primaryToolsFirst ? /* @__PURE__ */ jsx8(Tip, { label: "Move the tools", children: /* @__PURE__ */ jsx8("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__ */ jsx8(GripIcon, {}) }) }) : null,
+          /* @__PURE__ */ jsx8(ToolRow, { ...props, place: compact ? "bottom" : place })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/react/board/BoardMenu.tsx
+import { Menu as Menu2 } from "@base-ui/react/menu";
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var MOBILE_ISLAND_PLACES = [...ISLAND_PLACES].reverse();
+function SurfacePreview({ surface }) {
+  return /* @__PURE__ */ jsx9("span", { className: "chalk-board-tile-preview", "data-surface": surface, "aria-hidden": "true", children: surface === "dots" ? null : /* @__PURE__ */ jsx9("svg", { viewBox: "0 0 60 38", width: "100%", height: "100%", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx9("path", { d: "M14 22c5-8 9-8 12 0s8 6 12-2 6-6 8 0" }) }) });
+}
+function IslandPreview({ place }) {
+  return /* @__PURE__ */ jsx9("span", { className: "chalk-board-tile-preview", "data-island": place, "aria-hidden": "true", children: /* @__PURE__ */ jsx9("i", {}) });
+}
+function Tiles({
+  label,
+  value,
+  options,
+  onChange,
+  preview,
+  list
+}) {
+  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    /* @__PURE__ */ jsx9("div", { className: "chalk-board-menu-sublabel", children: label }),
+    /* @__PURE__ */ jsx9(Menu2.RadioGroup, { value, onValueChange: (next) => onChange(next), className: list ? "chalk-board-options" : "chalk-board-tiles", "aria-label": label, children: options.map((option) => /* @__PURE__ */ jsxs9(Menu2.RadioItem, { value: option.id, closeOnClick: false, className: "chalk-board-tile", children: [
+      preview(option.id),
+      /* @__PURE__ */ jsx9("span", { children: option.label }),
+      list ? /* @__PURE__ */ jsx9("span", { className: "chalk-board-option-check", "aria-hidden": "true", children: value === option.id ? "\u2713" : null }) : null
+    ] }, option.id)) })
+  ] });
+}
+function Check({ on }) {
+  return /* @__PURE__ */ jsx9("span", { "data-part": "menu-check", className: "chalk-menu-check", "aria-hidden": "true", children: on ? /* @__PURE__ */ jsx9("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx9("path", { d: "M20 6L9 17l-5-5" }) }) : null });
+}
+function PickedPeople({ people, onPick }) {
+  if (people.length === 0) return /* @__PURE__ */ jsx9("p", { className: "chalk-board-picked-note", children: "No one else is here yet. Hosts can always draw." });
+  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    /* @__PURE__ */ jsx9("div", { className: "chalk-board-picked", role: "group", "aria-label": "Picked people", children: people.map((person) => /* @__PURE__ */ jsxs9(Menu2.CheckboxItem, { className: "chalk-menu-item", checked: person.picked, onCheckedChange: (picked) => onPick(person.id, picked), closeOnClick: false, children: [
+      /* @__PURE__ */ jsx9(Check, { on: person.picked }),
+      /* @__PURE__ */ jsx9("span", { className: "chalk-board-picked-name", children: person.name })
+    ] }, person.id)) }),
+    people.some((person) => person.picked) ? null : /* @__PURE__ */ jsx9("p", { className: "chalk-board-picked-note", children: "Only hosts can draw until you pick someone." })
+  ] });
+}
+function WhoCanDrawSection({ policy, people, onPolicy, onPick }) {
+  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    /* @__PURE__ */ jsx9(Menu2.Separator, { className: "chalk-board-menu-rule" }),
+    /* @__PURE__ */ jsx9(ChalkMenuLabel, { children: "Who can draw" }),
+    DRAW_POLICIES.map((option) => /* @__PURE__ */ jsx9(ChalkMenuItem, { checked: policy === option.id, closeOnClick: false, onClick: () => onPolicy(option.id), children: option.label }, option.id)),
+    policy === "picked" ? /* @__PURE__ */ jsx9(PickedPeople, { people, onPick }) : null
+  ] });
+}
+function BoardMenu({ surface, onSurface, place, onPlace, onDownload, onCopy, whoCanDraw, onBring, onClear, onClose, downloadLabel = "Download as PNG", presentation = "web" }) {
+  const list = presentation === "mobile";
+  const appearance = /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    !list ? /* @__PURE__ */ jsx9(ChalkMenuLabel, { children: "Board appearance" }) : null,
+    /* @__PURE__ */ jsx9(Tiles, { list, label: list ? "Surface, just for you" : "Surface", value: surface, options: SURFACES, onChange: onSurface, preview: (id) => /* @__PURE__ */ jsx9(SurfacePreview, { surface: id }) }),
+    place && list ? /* @__PURE__ */ jsx9(Menu2.Separator, { className: "chalk-board-menu-rule" }) : null,
+    place ? /* @__PURE__ */ jsx9(Tiles, { list, label: "Tool island", value: place, options: list ? MOBILE_ISLAND_PLACES : ISLAND_PLACES, onChange: onPlace, preview: (id) => list ? null : /* @__PURE__ */ jsx9(IslandPreview, { place: id }) }) : null
+  ] });
+  return /* @__PURE__ */ jsxs9(
+    ChalkMenu,
+    {
+      className: list ? "chalk-board-menu chalk-board-menu-mobile" : "chalk-board-menu",
+      trigger: /* @__PURE__ */ jsx9("button", { type: "button", className: "chalk-board-menu-button", "aria-label": "Board menu", children: /* @__PURE__ */ jsx9(BoardIcon, { name: "more" }) }),
+      children: [
+        list ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
+          appearance,
+          /* @__PURE__ */ jsx9(Menu2.Separator, { className: "chalk-board-menu-rule" })
+        ] }) : null,
+        /* @__PURE__ */ jsxs9(ChalkMenuItem, { onClick: onDownload, children: [
+          /* @__PURE__ */ jsx9(BoardIcon, { name: "download", size: 18 }),
+          downloadLabel
+        ] }),
+        /* @__PURE__ */ jsxs9(ChalkMenuItem, { onClick: onCopy, children: [
+          /* @__PURE__ */ jsx9(BoardIcon, { name: "copy", size: 18 }),
+          "Copy as image"
+        ] }),
+        !list || onBring || onClear ? /* @__PURE__ */ jsx9(Menu2.Separator, { className: "chalk-board-menu-rule" }) : null,
+        !list ? appearance : null,
+        whoCanDraw ? /* @__PURE__ */ jsx9(WhoCanDrawSection, { ...whoCanDraw }) : null,
+        !list && (onBring || onClear) ? /* @__PURE__ */ jsx9(Menu2.Separator, { className: "chalk-board-menu-rule" }) : null,
+        onBring ? /* @__PURE__ */ jsxs9(ChalkMenuItem, { onClick: onBring, children: [
+          /* @__PURE__ */ jsx9(BoardIcon, { name: "target", size: 18 }),
+          "Bring everyone here"
+        ] }) : null,
+        onClear ? /* @__PURE__ */ jsx9(ChalkMenuItem, { onClick: onClear, children: /* @__PURE__ */ jsxs9("span", { className: "chalk-board-danger", children: [
+          /* @__PURE__ */ jsx9(BoardIcon, { name: "trash", size: 18 }),
+          "Clear board"
+        ] }) }) : null,
+        onClose ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
+          /* @__PURE__ */ jsx9(Menu2.Separator, { className: "chalk-board-menu-rule" }),
+          /* @__PURE__ */ jsxs9(ChalkMenuItem, { onClick: onClose, children: [
+            /* @__PURE__ */ jsx9(BoardIcon, { name: "close", size: 18 }),
+            "Close board"
+          ] })
+        ] }) : null
+      ]
+    }
+  );
+}
+
+// src/collab/view-limits.ts
+var WHITEBOARD_VIEW_PEOPLE_MAX = 500;
+
+// src/react/board/BoardStyles.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function BoardStyles() {
+  return /* @__PURE__ */ jsx10("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 .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-menu.chalk-board-menu-mobile {width:264px;}
+.chalk-board-menu-mobile .chalk-menu-item {min-height:44px;}
+.chalk-board-options {display:grid;}
+.chalk-board-options .chalk-board-tile {display:flex; align-items:center; gap:10px; min-height:44px; padding:8px 10px; border:0; font-size:14px; font-weight:500; text-align:left;}
+.chalk-board-options .chalk-board-tile-preview {width:22px; height:22px; flex:none;}
+.chalk-board-options .chalk-board-tile-preview svg {display:none;}
+.chalk-board-options .chalk-board-tile[data-checked] {border:0;}
+.chalk-board-option-check {margin-left:auto;}
+.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-picked {max-height:220px; overflow-y:auto; padding-left:16px;}
+.chalk-board-picked-name {min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
+.chalk-board-picked-note {margin:0; padding:4px 10px 8px 26px; font-size:12px; line-height:1.4; color:var(--chalk-muted-text);}
+
+.chalk-board-zoom {position:absolute; right:12px; bottom:12px; z-index:5; height:40px; display:flex; align-items:center; border-radius:999px; padding:0 4px; transition:translate .2s ease-out;}
+.chalk-board-zoom button {height:32px; min-width:32px; border-radius:999px; display:grid; place-items:center; padding:0 6px !important; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums;}
+.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[data-presentation="mobile"] .chalk-board-island {padding:4px; border-radius:28px;}
+.chalk-board[data-presentation="mobile"]:has(.chalk-board-island[data-place="expanded"]) .chalk-board-zoom {translate:0 -64px;}
+.chalk-board[data-presentation="mobile"][data-call-controls] :is(.chalk-board-island[data-place="bottom"], .chalk-board-island[data-place="compact"], .chalk-board-island[data-place="expanded"], .chalk-board-zoom) {bottom:76px;}
+.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;}
+.chalk-board[data-presentation="mobile"] .chalk-board-tool {width:44px; height:44px;}
+.chalk-board[data-presentation="mobile"] .chalk-board-zoom {height:52px;}
+.chalk-board[data-presentation="mobile"] .chalk-board-zoom button {height:44px; min-width:44px;}
+.chalk-board[data-presentation="mobile"] .chalk-board-menu-button {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), (pointer: coarse) {
+  .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/react/board/board-toasts.ts
+import { createContext, useCallback as useCallback2, useContext, useEffect as useEffect5, useMemo as useMemo2 } from "react";
+var BoardToastContext = createContext(() => void 0);
+function useBoardToast(lifetime) {
+  const publish = useContext(BoardToastContext);
+  const scope = useMemo2(() => ({ active: true }), [lifetime]);
+  useEffect5(() => {
+    scope.active = true;
+    return () => {
+      scope.active = false;
+      publish(null);
+    };
+  }, [publish, scope]);
+  return useCallback2(
+    (toast) => {
+      if (scope.active) publish(toast);
+    },
+    [publish, scope]
+  );
+}
+
+// src/react/board/Board.tsx
+import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs10 } 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, onLeadingMove, onMoved, onViewportReady) {
+  const cameraRef = useRef6({ scrollX: 0, scrollY: 0, zoom: 1 });
+  const viewportRef = useRef6({ width: 1, height: 1 });
+  const expected = useRef6(null);
+  const glide = useRef6(0);
+  const [zoom, setZoom] = useState8(1);
+  const reduced = usePrefersReducedMotion();
+  const leading = useRef6(onLeadingMove);
+  leading.current = onLeadingMove;
+  const moved = useRef6(onMoved);
+  moved.current = onMoved;
+  const resized = useRef6(onViewportReady);
+  resized.current = onViewportReady;
+  useEffect6(() => {
+    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)) {
+        leading.current();
+        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);
+      leading.current();
+      moved.current();
+    });
+  }, [engine, root]);
+  useEffect6(() => {
+    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]);
+  useEffect6(() => () => cancelAnimationFrame(glide.current), []);
+  const move = useCallback3(
+    (target, animate, source) => {
+      if (!engine) return;
+      if (source !== "follow") leading.current();
+      cancelAnimationFrame(glide.current);
+      if (sameCamera(target, cameraRef.current)) {
+        expected.current = target;
+        moved.current();
+        return;
+      }
+      const set = (camera) => {
+        expected.current = camera;
+        setCamera(engine, camera);
+      };
+      if (!animate || reduced) {
+        set(target);
+        moved.current();
+        return;
+      }
+      const from = cameraRef.current;
+      const started = performance.now();
+      const step = (now) => {
+        const progress = Math.max(0, Math.min(1, (now - started) / GLIDE_MS));
+        set(mixCamera(from, target, 1 - (1 - progress) ** 3));
+        if (progress < 1) glide.current = requestAnimationFrame(step);
+        else {
+          if (source !== "follow") leading.current();
+          moved.current();
+        }
+      };
+      glide.current = requestAnimationFrame(step);
+    },
+    [engine, reduced]
+  );
+  const fit = useCallback3(() => {
+    if (engine) fitContent(engine, false);
+  }, [engine]);
+  return useMemo3(() => ({ cameraRef, viewportRef, zoom, move, fit }), [move, zoom, fit]);
+}
+function useBoardKeys(root, handlers) {
+  const latest = useRef6(handlers);
+  latest.current = handlers;
+  useEffect6(() => {
+    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 = useRef6(toast);
+  latest.current = toast;
+  useEffect6(() => {
+    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,
+  isHost,
+  connectionStatus,
+  sceneId,
+  sceneStatus,
+  ownParticipantId,
+  participantIds,
+  whoCanDraw,
+  viewBounds,
+  renderCursorAvatar,
+  onExport,
+  phone: phoneOverride,
+  downloadLabel,
+  presentation = "web",
+  landscapeControlsVisible = false
+}) {
+  const root = useRef6(null);
+  const offline = connectionStatus === "reconnecting";
+  const smallViewport = useMediaQuery("(max-width: 640px)");
+  const phone = phoneOverride ?? smallViewport;
+  const [engine, setEngine] = useState8(null);
+  const toast = useBoardToast(engine);
+  const [surface, setSurface] = useState8(() => readStored(SURFACE_KEY, SURFACES, "chalkboard"));
+  const [place, setPlace] = useState8(() => readStored(ISLAND_KEY, ISLAND_PLACES, "bottom"));
+  const [tool, setTool] = useState8("pen");
+  const [shape, setShape] = useState8("rectangle");
+  const [color, setColor] = useState8("ink");
+  const [width, setWidth] = useState8("medium");
+  const [elementCount, setElementCount] = useState8(0);
+  const empty = elementCount === 0;
+  const [narrow, setNarrow] = useState8(false);
+  const [announcement, setAnnouncement] = useState8("");
+  const canDraw = primary && (board.collab?.canDraw ?? board.canDraw ?? true);
+  const compact = phone || narrow;
+  const history = useEngineHistory(root, engine);
+  const views = useRef6(/* @__PURE__ */ new Map());
+  const cursors = useRef6(/* @__PURE__ */ new Map());
+  const pen = useMemo3(() => ({ color, width, surface, theme: colorScheme }), [color, width, surface, colorScheme]);
+  const followingRef = useRef6(following);
+  followingRef.current = following;
+  const nameOf = useCallback3((id) => first(people.find((person) => person.id === id)?.displayName ?? "Someone"), [people]);
+  const colorFor = useCallback3(
+    (id) => personColor(
+      Math.max(
+        0,
+        people.findIndex((person) => person.id === id)
+      )
+    ),
+    [people]
+  );
+  const stopFollowing = useCallback3(() => {
+    const current = followingRef.current;
+    if (!current) return;
+    followingRef.current = null;
+    onFollow(null);
+    toast({ message: `Stopped following ${nameOf(current)}` });
+  }, [nameOf, onFollow, toast]);
+  const shareView = useRef6(async () => false);
+  const viewSender = useRef6(sendView);
+  viewSender.current = sendView;
+  const selectedFollow = useRef6(following);
+  const appliedVersions = useRef6(new ChalkWhiteboardViewVersions());
+  const previousRoster = useRef6(new Set(participantIds ?? people.map((person) => person.id)));
+  useEffect6(() => {
+    const next = new Set(participantIds ?? people.map((person) => person.id));
+    for (const id of previousRoster.current) {
+      if (next.has(id)) continue;
+      appliedVersions.current.forgetParticipant(id);
+      for (const [publisher, view] of views.current) {
+        if (publisher === id || view.originParticipantId === id) views.current.delete(publisher);
+      }
+      cursors.current.delete(id);
+    }
+    previousRoster.current = next;
+  }, [participantIds, people]);
+  const viewsAvailable = sendView !== void 0;
+  const reapplyView = useRef6(() => void 0);
+  const camera = useCamera(
+    engine,
+    root,
+    () => {
+      stopFollowing();
+      shareView.current(false, true);
+    },
+    () => shareView.current(false),
+    () => reapplyView.current()
+  );
+  useEffect6(() => {
+    if (!visible || !viewsAvailable || !engine) return;
+    let last = 0;
+    let pending;
+    let pendingLead = false;
+    const send = async (bring2) => {
+      const lead = pendingLead || bring2;
+      pendingLead = false;
+      const followedView = followingRef.current ? views.current.get(followingRef.current) : void 0;
+      const selected = followedView !== void 0 && selectedFollow.current === followingRef.current;
+      if (followedView && !followedView.originParticipantId && !followedView.ownerId && !bring2) return true;
+      const view = followedView ?? visibleView(camera.cameraRef.current, camera.viewportRef.current, viewBounds);
+      last = performance.now();
+      const rectangle = { x: view.x, y: view.y, width: view.width, height: view.height, bring: bring2, lead: lead || selected };
+      let outgoing = rectangle;
+      if (followedView && !lead) {
+        if (followedView.ownerId) {
+          outgoing = { ...rectangle, originParticipantId: followedView.participantId, originSequence: followedView.ownerSequence };
+        } else if (followedView.originParticipantId && followedView.originSequence !== void 0) {
+          outgoing = { ...rectangle, originParticipantId: followedView.originParticipantId, originSequence: followedView.originSequence, ...followedView.originEpoch ? { originEpoch: followedView.originEpoch } : {} };
+        }
+      }
+      try {
+        const sent = await viewSender.current?.(outgoing) ?? false;
+        if (sent && selected) selectedFollow.current = null;
+        return sent;
+      } catch (error) {
+        console.warn("Board view dropped.", { operation: "sendView", error });
+        return false;
+      }
+    };
+    shareView.current = (bring2, lead = false) => {
+      pendingLead ||= lead;
+      if (bring2) return send(true);
+      clearTimeout(pending);
+      pending = setTimeout(() => send(false), Math.max(0, VIEW_SEND_MS - (performance.now() - last)));
+      return Promise.resolve(true);
+    };
+    const heartbeat = setInterval(() => {
+      if (!followingRef.current) send(false);
+    }, VIEW_HEARTBEAT_MS);
+    send(false);
+    return () => {
+      clearInterval(heartbeat);
+      clearTimeout(pending);
+      shareView.current = async () => false;
+    };
+  }, [sceneId, sceneStatus, camera.cameraRef, camera.viewportRef, connectionStatus, engine, visible, viewsAvailable, viewBounds]);
+  const { move, viewportRef } = camera;
+  const goTo = useCallback3(
+    (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, participantId)) return;
+      appliedVersions.current.remember(view, participantId);
+      const cursor = cursors.current.get(participantId);
+      const focus = cursor && Date.now() - Date.parse(cursor.occurredAt) <= 1e4 && cursor.x >= view.x && cursor.x <= view.x + view.width && cursor.y >= view.y && cursor.y <= view.y + view.height ? { x: cursor.x, y: cursor.y, width: 0, height: 0 } : view;
+      move(cameraForView(focus, viewportRef.current, camera.cameraRef.current.zoom), animate, "follow");
+    },
+    [move, viewportRef, camera.cameraRef]
+  );
+  reapplyView.current = () => {
+    if (followingRef.current) goTo(followingRef.current, false, true);
+  };
+  const subscribe = board.collab?.subscribe;
+  const latestView = useRef6(() => void 0);
+  useEffect6(
+    () => subscribe?.((event) => {
+      if (event.type !== "snapshot") return;
+      views.current.clear();
+      appliedVersions.current.clear();
+    }),
+    [subscribe]
+  );
+  latestView.current = (event) => {
+    const previous = views.current.get(event.participantId);
+    if (!event.bring && (event.participantId === ownParticipantId || !event.ownerId && event.originParticipantId === ownParticipantId)) return;
+    if (!event.bring && !appliedVersions.current.isNew(event, event.participantId)) return;
+    if (!event.ownerId && !event.bring && event.originParticipantId && previous?.originParticipantId === event.originParticipantId && event.originEpoch === previous.originEpoch && event.originSequence <= previous.originSequence) return;
+    const newPeer = !previous;
+    views.current.delete(event.participantId);
+    views.current.set(event.participantId, { ...event, bring: false });
+    if (views.current.size > WHITEBOARD_VIEW_PEOPLE_MAX) {
+      const oldest = views.current.keys().next().value;
+      if (oldest !== void 0) views.current.delete(oldest);
+    }
+    if (newPeer) {
+      shareView.current(false);
+    }
+    if (event.bring) {
+      appliedVersions.current.remember(event, event.participantId);
+      followingRef.current = event.participantId;
+      onFollow(event.participantId);
+      toast({ message: `${nameOf(event.participantId)} brought everyone to this view` });
+      goTo(event.participantId, true, true);
+      return;
+    }
+    if (followingRef.current === event.participantId) goTo(event.participantId, true);
+  };
+  useEffect6(() => {
+    if (!subscribe) return;
+    return subscribe((event) => {
+      if (event.type === "cursor") {
+        rememberCursor(cursors.current, event);
+        if (followingRef.current === event.participantId && Date.now() - Date.parse(event.occurredAt) <= 1e4) {
+          camera.move(cameraForView({ x: event.x, y: event.y, width: 0, height: 0 }, camera.viewportRef.current, camera.cameraRef.current.zoom), false, "follow");
+        }
+      } else if (event.type === "view") latestView.current(event);
+    });
+  }, [subscribe, camera.move, camera.viewportRef, camera.cameraRef]);
+  useEffect6(() => {
+    selectedFollow.current = following;
+    if (following) {
+      goTo(following, true, true);
+      shareView.current(false);
+    }
+  }, [following, goTo]);
+  useEffect6(() => {
+    if (engine && canDraw) applyTool(engine, tool, pen);
+  }, [canDraw, engine, pen, tool]);
+  useEffect6(() => {
+    if (engine) void document.fonts.load(`${NOTE_FONT_PX}px Nunito`);
+  }, [engine]);
+  useEffect6(() => {
+    if (!engine) return;
+    let beforeEditing = sceneSignature(engine);
+    let wasEditing = false;
+    setElementCount(engine.api.getSceneElements().length);
+    const offChange = engine.api.onChange((elements, appState) => {
+      const count = elements.filter((element) => !element.isDeleted).length;
+      setElementCount(count);
+      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 () => {
+      offChange();
+    };
+  }, [engine]);
+  useEffect6(() => {
+    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 = useCallback3((next) => {
+    if (next === "rectangle" || next === "ellipse" || next === "diamond" || next === "arrow" || next === "line") setShape(next);
+    setTool(next);
+  }, []);
+  const undo = useCallback3(() => {
+    const container = root.current?.querySelector(".excalidraw");
+    if (container) pressHistory(container, false);
+  }, []);
+  const redo = useCallback3(() => {
+    const container = root.current?.querySelector(".excalidraw");
+    if (container) pressHistory(container, true);
+  }, []);
+  const zoomBy = useCallback3(
+    (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 image = await boardImage(engine, surfaceFill(surface, colorScheme));
+      if (onExport) {
+        await onExport(image, "download");
+        return;
+      }
+      const url = URL.createObjectURL(image);
+      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));
+      if (onExport) await onExport(image, "copy");
+      else await navigator.clipboard.write([new ClipboardItem({ "image/png": image })]);
+      toast({ message: "Copied the board as an image" });
+    } catch {
+      toast({ type: "error", message: "Copy failed. Try saving the image instead." });
+    }
+  };
+  const bring = async () => {
+    if (followingRef.current) {
+      followingRef.current = null;
+      onFollow(null);
+    }
+    if (await 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;
+    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__ */ jsxs10(
+    "div",
+    {
+      ref: root,
+      className: "chalk-board",
+      "data-presentation": presentation,
+      "data-call-controls": landscapeControlsVisible || void 0,
+      "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__ */ jsx11(BoardStyles, {}),
+        /* @__PURE__ */ jsx11(WhiteboardCanvas, { ...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__ */ jsxs10("div", { className: "chalk-board-loading", role: "status", children: [
+          /* @__PURE__ */ jsx11("span", { className: "chalk-board-spinner", "aria-hidden": "true" }),
+          "Opening board"
+        ] }) : null,
+        primary && ready && empty ? /* @__PURE__ */ jsx11(BoardHint, { canDraw, mobile: presentation === "mobile" }) : null,
+        primary && tool === "note" && canDraw ? /* @__PURE__ */ jsx11("div", { className: "chalk-board-note-layer", "aria-hidden": "true", onPointerDown: placeNoteAt }) : null,
+        primary ? /* @__PURE__ */ jsx11(BoardCursors, { cursorsRef: cursors, cameraRef: camera.cameraRef, colorFor, hidden: offline, renderAvatar: renderCursorAvatar }) : null,
+        primary && ready ? /* @__PURE__ */ jsxs10(Fragment5, { children: [
+          /* @__PURE__ */ jsxs10("div", { className: "chalk-board-chips", "data-low": !compact && place === "top" && canDraw || void 0, children: [
+            followed ? /* @__PURE__ */ jsxs10("div", { className: "chalk-board-chip", role: "status", children: [
+              /* @__PURE__ */ jsx11(BoardIcon, { name: "eye", size: 16 }),
+              "Following ",
+              followed,
+              /* @__PURE__ */ jsx11("button", { type: "button", className: "chalk-board-chip-button", onClick: stopFollowing, children: "Stop" })
+            ] }) : null,
+            offline ? /* @__PURE__ */ jsxs10("div", { className: "chalk-board-chip", "data-quiet": true, role: "status", children: [
+              /* @__PURE__ */ jsx11(BoardIcon, { name: "wifiOff", size: 16 }),
+              "Offline. Your drawing will sync."
+            ] }) : null
+          ] }),
+          !canDraw ? /* @__PURE__ */ jsxs10("div", { className: "chalk-board-view-only", children: [
+            /* @__PURE__ */ jsx11(BoardIcon, { name: "lock", size: 14 }),
+            "View only"
+          ] }) : null,
+          /* @__PURE__ */ jsx11("div", { className: "chalk-board-corner", children: /* @__PURE__ */ jsx11(
+            BoardMenu,
+            {
+              presentation,
+              surface,
+              onSurface: chooseSurface,
+              place: !compact && canDraw ? place : void 0,
+              onPlace: (next) => choosePlace(next, true),
+              downloadLabel,
+              onDownload: () => void download(),
+              onCopy: () => void copy(),
+              whoCanDraw,
+              onBring: isHost && sendView ? bring : void 0,
+              onClear: isHost ? () => void clear() : void 0,
+              onClose
+            }
+          ) }),
+          /* @__PURE__ */ jsxs10("div", { className: "chalk-board-zoom", role: "group", "aria-label": "Zoom", children: [
+            /* @__PURE__ */ jsx11("button", { type: "button", "aria-label": "Zoom out", onClick: () => zoomBy(1 / ZOOM_STEP), children: /* @__PURE__ */ jsx11(BoardIcon, { name: "minus", size: 16 }) }),
+            /* @__PURE__ */ jsxs10("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__ */ jsx11("button", { type: "button", "aria-label": "Zoom in", onClick: () => zoomBy(ZOOM_STEP), children: /* @__PURE__ */ jsx11(BoardIcon, { name: "plus", size: 16 }) }),
+            presentation === "web" ? /* @__PURE__ */ jsxs10(Fragment5, { children: [
+              /* @__PURE__ */ jsx11("span", { className: "chalk-board-zoom-rule", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx11("button", { type: "button", "aria-label": "Fit to content", onClick: fit, children: /* @__PURE__ */ jsx11(BoardIcon, { name: "fit", size: 16 }) })
+            ] }) : null
+          ] }),
+          canDraw ? /* @__PURE__ */ jsx11(
+            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,
+              primaryToolsFirst: presentation === "mobile"
+            }
+          ) : null,
+          /* @__PURE__ */ jsx11("div", { className: "chalk-board-announcer", "aria-live": "polite", children: announcement })
+        ] }) : null
+      ]
+    }
+  );
+}
+function BoardHint({ canDraw, mobile }) {
+  if (!canDraw)
+    return /* @__PURE__ */ jsx11("div", { className: "chalk-board-hint", children: /* @__PURE__ */ jsx11("p", { children: "Nothing here yet. When someone draws, it shows up here." }) });
+  return /* @__PURE__ */ jsxs10("div", { className: "chalk-board-hint", children: [
+    /* @__PURE__ */ jsx11("p", { children: "An empty board. Draw, type or add a sticky note." }),
+    mobile ? /* @__PURE__ */ jsx11("p", { children: "Draw with one finger. Use two fingers to move or zoom." }) : /* @__PURE__ */ jsxs10("ul", { children: [
+      /* @__PURE__ */ jsxs10("li", { children: [
+        /* @__PURE__ */ jsx11("kbd", { children: "P" }),
+        " Pen"
+      ] }),
+      /* @__PURE__ */ jsxs10("li", { children: [
+        /* @__PURE__ */ jsx11("kbd", { children: "T" }),
+        " Text"
+      ] }),
+      /* @__PURE__ */ jsxs10("li", { children: [
+        /* @__PURE__ */ jsx11("kbd", { children: "N" }),
+        " Sticky note"
+      ] })
+    ] })
+  ] });
+}
 export {
+  Board,
+  BoardToastContext,
   CANONICAL_INK,
   CHALK_MATH_CUSTOM_DATA_KEY,
   CHALK_MATH_RENDERER,
+  ChalkMenu,
+  ChalkMenuItem,
+  ChalkMenuLabel,
+  Menu as ChalkMenuPrimitive,
+  ChalkPopover,
+  Popover as ChalkPopoverPrimitive,
+  ChalkTooltip,
   WhiteboardCanvas,
   appendOrReplaceMathElement,
   createMathFileId,