@q9labsai/chalk-whiteboard 4.1.16 → 5.0.0

package/dist/embedded/controller.d.ts

@@ -35,18 +35,6 @@ export type ChalkEmbeddedWhiteboardTransportEvent = {
     readonly reason: "scene_changed" | "cursor_expired" | "gap";
 };
 export interface ChalkEmbeddedWhiteboardFileTransport {
-    readonly initiateUpload: (input: {
-        readonly fileId: string;
-        readonly mimeType: string;
-        readonly byteLength: number;
-        readonly sha256: string;
-    }) => Promise<{
-        readonly uploadId: string;
-        readonly method: "PUT";
-        readonly uploadUrl: string;
-        readonly headers: Readonly<Record<string, string>>;
-    }>;
-    readonly finalizeUpload: (uploadId: string) => Promise<void>;
     readonly getDownloadUrl: (fileId: string) => Promise<{
         readonly downloadUrl: string;
     }>;

package/dist/embedded/index.js

@@ -1,7 +1,3 @@
-// src/embedded/controller.ts
-import { sha256 } from "@noble/hashes/sha2.js";
-import { bytesToHex } from "@noble/hashes/utils.js";
-
 // src/embedded/protocol.ts
 var CHALK_EMBEDDED_WHITEBOARD_BRIDGE_VERSION = 1;
 var CHALK_EMBEDDED_WHITEBOARD_EXCALIDRAW_VERSION = "0.18.1";
@@ -337,32 +333,7 @@ var ChalkWhiteboardController = class {
   async #writeFile(message) {
     const payload = requireFileWrite(message.payload);
     await this.#operation(payload.requestId, async () => {
-      if (!this.#effectiveCanDraw()) throw new Error("whiteboard file upload is not permitted");
-      const abortController = this.#beginFileTransfer(payload.requestId);
-      try {
-        const blob = await this.#dataURLBlob(payload.dataURL);
-        if (blob.size !== payload.byteLength) throw new Error("whiteboard file byte length does not match");
-        const validated = await validateFileBlob(blob, payload.mimeType);
-        if (bytesToHex(sha256(validated.bytes)) !== payload.sha256.toLowerCase()) {
-          throw new Error("whiteboard file digest does not match");
-        }
-        const upload = await this.options.transport.files.initiateUpload({
-          fileId: payload.fileId,
-          mimeType: validated.mimeType,
-          byteLength: payload.byteLength,
-          sha256: payload.sha256
-        });
-        const response = await this.#fetch(upload.uploadUrl, {
-          method: upload.method,
-          headers: upload.headers,
-          body: blob,
-          signal: abortController.signal
-        });
-        if (!response.ok) throw new Error(`whiteboard file upload failed with HTTP ${response.status}`);
-        await this.options.transport.files.finalizeUpload(upload.uploadId);
-      } finally {
-        this.#finishFileTransfer(payload.requestId, abortController);
-      }
+      throw new Error("Board uploads are unavailable.");
     });
   }
   async #readFile(message) {
@@ -516,28 +487,6 @@ var ChalkWhiteboardController = class {
     const message = safeErrorMessage(cause);
     this.options.onError?.({ code: "invalid_renderer_message", message, recoverable: false });
   }
-  async #dataURLBlob(dataURL) {
-    if (!dataURL.startsWith("data:") || dataURL.length > Math.ceil(MAX_FILE_BYTES * 4 / 3) + 1024) {
-      throw new Error("whiteboard file data is invalid");
-    }
-    const separator = dataURL.indexOf(",");
-    if (separator < 0) throw new Error("whiteboard file data is invalid");
-    const metadata = dataURL.slice(5, separator).split(";");
-    const mimeType = normalizeMimeType(metadata[0] ?? "");
-    if (metadata.length !== 2 || metadata[1]?.toLowerCase() !== "base64") {
-      throw new Error("whiteboard file data must use base64 encoding");
-    }
-    let decoded;
-    try {
-      decoded = atob(dataURL.slice(separator + 1));
-    } catch {
-      throw new Error("whiteboard file data is not valid base64");
-    }
-    const bytes = Uint8Array.from(decoded, (character) => character.charCodeAt(0));
-    const blob = new Blob([bytes], { type: mimeType });
-    if (blob.size > MAX_FILE_BYTES) throw new Error("whiteboard file exceeds the renderer transfer limit");
-    return blob;
-  }
   #beginFileTransfer(requestId) {
     if (this.#fileTransfers.has(requestId)) throw new Error("whiteboard file request is already active");
     const abortController = new AbortController();
@@ -614,8 +563,8 @@ function requireRequest(value) {
 function requireFileWrite(value) {
   const record = requireRecord(value, ["requestId", "fileId", "mimeType", "byteLength", "sha256", "dataURL"]);
   const byteLength = record.byteLength;
-  const sha2562 = requireString(record.sha256, "file digest");
-  if (!Number.isSafeInteger(byteLength) || Number(byteLength) <= 0 || Number(byteLength) > MAX_FILE_BYTES || !/^[\da-f]{64}$/iu.test(sha2562)) {
+  const sha256 = requireString(record.sha256, "file digest");
+  if (!Number.isSafeInteger(byteLength) || Number(byteLength) <= 0 || Number(byteLength) > MAX_FILE_BYTES || !/^[\da-f]{64}$/iu.test(sha256)) {
     throw new Error("embedded whiteboard file metadata is invalid");
   }
   return {
@@ -623,7 +572,7 @@ function requireFileWrite(value) {
     fileId: requireString(record.fileId, "file ID"),
     mimeType: normalizeMimeType(requireString(record.mimeType, "MIME type")),
     byteLength: Number(byteLength),
-    sha256: sha2562.toLowerCase(),
+    sha256: sha256.toLowerCase(),
     dataURL: requireString(record.dataURL, "file data", Math.ceil(MAX_FILE_BYTES * 4 / 3) + 1024)
   };
 }

package/dist/embedded/renderer-bridge.d.ts

@@ -22,13 +22,6 @@ export declare class ChalkEmbeddedWhiteboardRendererBridge {
     }): Promise<WhiteboardCommit>;
     requestSnapshot(): Promise<void>;
     clear(): Promise<WhiteboardCommit>;
-    uploadFile(input: {
-        readonly fileId: string;
-        readonly mimeType: string;
-        readonly byteLength: number;
-        readonly sha256: string;
-        readonly dataURL: string;
-    }): Promise<void>;
     downloadFile(fileId: string): Promise<{
         readonly mimeType: string;
         readonly dataURL: string;

package/dist/embedded/renderer.d.ts

@@ -14,7 +14,6 @@ export declare function createCollaborationBridge(rendererBridge: ChalkEmbeddedW
     requestSnapshot: () => Promise<void>;
     clear: () => Promise<import("..").WhiteboardCommit>;
     fileTransfer: {
-        upload: (input: Parameters<ChalkEmbeddedWhiteboardRendererBridge["uploadFile"]>[0]) => Promise<void>;
         download: (fileId: string) => Promise<{
             readonly mimeType: string;
             readonly dataURL: string;

package/dist/{engine-5XZHDUXG.js → engine-BIJ57YN3.js}

@@ -1,6 +1,6 @@
 import {
   ExcalidrawCollabEngine
-} from "./chunk-F4B4ANIZ.js";
+} from "./chunk-6ZV7GBAC.js";
 export {
   ExcalidrawCollabEngine
 };

package/dist/index.js

@@ -1,11 +1,11 @@
 import {
   mergeWhiteboardElements
-} from "./chunk-4XG2ABSP.js";
+} from "./chunk-W4FLPXAX.js";
 import {
   fromWireElement,
   isWireElement,
   toWireElement
-} from "./chunk-F4B4ANIZ.js";
+} from "./chunk-6ZV7GBAC.js";
 export {
   fromWireElement,
   isWireElement,

package/dist/react/WhiteboardCanvas.d.ts

@@ -42,6 +42,8 @@ export interface WhiteboardCanvasProps {
     onExcalidrawApiReady?: (api: ExcalidrawImperativeAPI) => void;
     onLoadError?: (error: Error) => void;
 }
+/** Starts loading the board's stylesheet before anyone opens the board, so the board opens without waiting for it. */
+export declare function preloadWhiteboardStylesheet(href?: string): void;
 declare function WhiteboardCanvasBase(props: WhiteboardCanvasProps): React.JSX.Element;
 export declare const WhiteboardCanvas: import("react").MemoExoticComponent<typeof WhiteboardCanvasBase>;
 export {};

package/dist/react/index.d.ts

@@ -1,4 +1,4 @@
-export { WhiteboardCanvas } from "./WhiteboardCanvas.js";
+export { WhiteboardCanvas, preloadWhiteboardStylesheet } from "./WhiteboardCanvas.js";
 export type { WhiteboardCanvasClassNames, WhiteboardCanvasIcons, WhiteboardCanvasProps, WhiteboardCollaborationOptions } from "./WhiteboardCanvas.js";
 export { appendOrReplaceMathElement, CHALK_MATH_CUSTOM_DATA_KEY, CHALK_MATH_RENDERER, createMathFileId, createMathImageAsset, getChalkMathData, getInsertionPoint, getSelectedMathElement, isChalkMathElement, svgToDataUrl } from "./math-elements.js";
 export type { ChalkMathCustomData, MathImageAsset } from "./math-elements.js";

package/dist/react/index.js

@@ -294,28 +294,48 @@ function useWhiteboardCanvasConfiguration(props) {
 function valueOr(value, fallback) {
   return value === void 0 ? fallback : value;
 }
-function useExternalStylesheet(id, href) {
+var STYLESHEET_ID = "chalk-excalidraw-styles";
+function preloadWhiteboardStylesheet(href = DEFAULT_EXCALIDRAW_CSS) {
+  if (typeof document !== "undefined") boardStylesheet(href);
+}
+function boardStylesheet(href) {
+  const existing = document.getElementById(STYLESHEET_ID) ?? document.querySelector('link[href*="excalidraw"], style[data-href*="excalidraw"]');
+  if (existing) return existing;
+  const link = document.createElement("link");
+  link.id = STYLESHEET_ID;
+  link.rel = "stylesheet";
+  link.href = href;
+  link.addEventListener("load", () => link.dataset.state = "loaded");
+  link.addEventListener("error", () => link.dataset.state = "failed");
+  document.head.appendChild(link);
+  return link;
+}
+function isManagedStylesheet(element) {
+  return element instanceof HTMLLinkElement && element.id === STYLESHEET_ID;
+}
+function useExternalStylesheet(href) {
   const [loaded, setLoaded] = useState2(false);
   const [error, setError] = useState2(null);
   useEffect(() => {
-    if (typeof document === "undefined") return;
-    const existing = document.getElementById(id);
-    if (existing || document.querySelector('link[href*="excalidraw"], style[data-href*="excalidraw"]')) {
+    const element = boardStylesheet(href);
+    const fail = () => setError(`Failed to load ${href}`);
+    const ownLink = isManagedStylesheet(element);
+    if (!ownLink || element.dataset.state === "loaded") {
       setLoaded(true);
       return;
     }
-    const link = document.createElement("link");
-    link.id = id;
-    link.rel = "stylesheet";
-    link.href = href;
-    link.onload = () => setLoaded(true);
-    link.onerror = () => setError(`Failed to load ${href}`);
-    document.head.appendChild(link);
+    if (element.dataset.state === "failed") {
+      fail();
+      return;
+    }
+    const load = () => setLoaded(true);
+    element.addEventListener("load", load);
+    element.addEventListener("error", fail);
     return () => {
-      link.onload = null;
-      link.onerror = null;
+      element.removeEventListener("load", load);
+      element.removeEventListener("error", fail);
     };
-  }, [href, id]);
+  }, [href]);
   return { error, loaded };
 }
 function useExcalidrawModule(onLoadError, setLoadError) {
@@ -347,7 +367,7 @@ function useWhiteboardInitialData(theme, localParticipantColor) {
     [localParticipantColor, theme]
   );
 }
-function useWhiteboardUiOptions(canDraw) {
+function useWhiteboardUiOptions() {
   return useMemo(
     () => ({
       canvasActions: {
@@ -359,16 +379,16 @@ function useWhiteboardUiOptions(canDraw) {
         saveToActiveFile: false,
         toggleTheme: false
       },
-      tools: { image: canDraw },
+      tools: { image: false },
       welcomeScreen: false
     }),
-    [canDraw]
+    []
   );
 }
 function useWhiteboardCollaboration(options) {
   const apiRef = useRef(null);
   const refs = useCollaborationRefs(options.collab, options.canDraw);
-  const initializeEngine = useCollaborationEngineLoader(refs, options.onLoadError, options.setLoadError);
+  const initializeEngine = useCollaborationEngineLoader(refs, apiRef, options.onLoadError, options.setLoadError);
   const handleApiReady = useExcalidrawApiReady(apiRef, initializeEngine, options.onExcalidrawApiReady);
   const handlers = useExcalidrawSceneHandlers(apiRef, refs.engineRef, options.onSelectedLatexChange);
   useCollaborationCanDraw(refs.engineRef, options.canDraw);
@@ -386,46 +406,42 @@ function useCollaborationRefs(collab, canDraw) {
   collabOptionsRef.current = collab;
   return useMemo(() => ({ canDrawRef, collabOptionsRef, enginePromiseRef, engineRef, isMountedRef }), [canDrawRef, collabOptionsRef, enginePromiseRef, engineRef, isMountedRef]);
 }
-function useCollaborationEngineLoader(refs, onLoadError, setLoadError) {
-  return useCallback(
-    (api) => {
-      if (!refs.collabOptionsRef.current || refs.engineRef.current || refs.enginePromiseRef.current) return;
-      refs.enginePromiseRef.current = import("../engine-5XZHDUXG.js").then(({ ExcalidrawCollabEngine }) => {
-        const collab = refs.collabOptionsRef.current;
-        if (!refs.isMountedRef.current || !collab || refs.engineRef.current) return;
-        refs.engineRef.current = new ExcalidrawCollabEngine({
-          excalidrawAPI: api,
-          canDraw: refs.canDrawRef.current,
-          submitUpdate: collab.submitUpdate,
-          sendCursor: collab.sendCursor,
-          requestSnapshot: collab.requestSnapshot,
-          clear: collab.clear,
-          fileTransfer: collab.fileTransfer,
-          initiateUpload: collab.initiateUpload,
-          finalizeUpload: collab.finalizeUpload,
-          presignDownload: collab.presignDownload,
-          subscribe: collab.subscribe,
-          onFileSyncStateChange: collab.onFileSyncStateChange,
-          onSubmissionError: collab.onSubmissionError
-        });
-      }).catch((reason) => {
-        if (!refs.isMountedRef.current) return;
-        const error = reason instanceof Error ? reason : new Error("Failed to load whiteboard collaboration");
-        setLoadError(error.message);
-        onLoadError?.(error);
-      }).finally(() => {
-        refs.enginePromiseRef.current = null;
+function useCollaborationEngineLoader(refs, apiRef, onLoadError, setLoadError) {
+  return useCallback(() => {
+    if (!refs.collabOptionsRef.current || refs.engineRef.current || refs.enginePromiseRef.current) return;
+    refs.enginePromiseRef.current = import("../engine-BIJ57YN3.js").then(({ ExcalidrawCollabEngine }) => {
+      const api = apiRef.current;
+      const collab = refs.collabOptionsRef.current;
+      if (!refs.isMountedRef.current || !api || !collab) return;
+      refs.engineRef.current = new ExcalidrawCollabEngine({
+        excalidrawAPI: api,
+        canDraw: refs.canDrawRef.current,
+        submitUpdate: collab.submitUpdate,
+        sendCursor: collab.sendCursor,
+        requestSnapshot: collab.requestSnapshot,
+        clear: collab.clear,
+        fileTransfer: collab.fileTransfer,
+        presignDownload: collab.presignDownload,
+        subscribe: collab.subscribe,
+        onFileSyncStateChange: collab.onFileSyncStateChange,
+        onSubmissionError: collab.onSubmissionError
       });
-    },
-    [onLoadError, refs, setLoadError]
-  );
+    }).catch((reason) => {
+      if (!refs.isMountedRef.current) return;
+      const error = reason instanceof Error ? reason : new Error("Failed to load whiteboard collaboration");
+      setLoadError(error.message);
+      onLoadError?.(error);
+    }).finally(() => {
+      refs.enginePromiseRef.current = null;
+    });
+  }, [apiRef, onLoadError, refs, setLoadError]);
 }
 function useExcalidrawApiReady(apiRef, initializeEngine, onExcalidrawApiReady) {
   const didReportApiRef = useRef(false);
   return useCallback(
     (api) => {
       apiRef.current = api;
-      initializeEngine(api);
+      initializeEngine();
       if (!didReportApiRef.current) {
         didReportApiRef.current = true;
         onExcalidrawApiReady?.(api);
@@ -484,7 +500,7 @@ function useCollaborationInitialization(collab, apiRef, engineRef, initializeEng
       engineRef.current = null;
       return;
     }
-    if (apiRef.current) initializeEngine(apiRef.current);
+    if (apiRef.current) initializeEngine();
   }, [apiRef, collab, engineRef, initializeEngine]);
 }
 function useWhiteboardMath({ apiRef, canDraw, excalidraw, isCollaborating, selectedLatex, setSelectedLatex, syncScene }) {
@@ -511,14 +527,14 @@ function useWhiteboardMath({ apiRef, canDraw, excalidraw, isCollaborating, selec
     },
     [apiRef, closeMath, excalidraw, isCollaborating, setSelectedLatex, syncScene]
   );
-  return { closeMath, handleSubmitMath, isMathOpen, openMath, selectedLatex };
+  return { closeMath, handleSubmitMath, initialLatex: selectedLatex ?? DEFAULT_LATEX, isMathOpen, openMath, selectedLatex };
 }
 function useWhiteboardCanvasState(props) {
   const configuration = useWhiteboardCanvasConfiguration(props);
   const [loadError, setLoadError] = useState2(null);
   const [selectedLatex, setSelectedLatex] = useState2(null);
   const excalidraw = useExcalidrawModule(props.onLoadError, setLoadError);
-  const stylesheet = useExternalStylesheet("chalk-excalidraw-styles", configuration.excalidrawCssPath);
+  const stylesheet = useExternalStylesheet(configuration.excalidrawCssPath);
   const collaboration = useWhiteboardCollaboration({
     canDraw: configuration.canDraw,
     collab: props.collab,
@@ -537,7 +553,7 @@ function useWhiteboardCanvasState(props) {
     syncScene: collaboration.syncScene
   });
   const initialData = useWhiteboardInitialData(configuration.theme, props.localParticipantColor);
-  const uiOptions = useWhiteboardUiOptions(configuration.canDraw);
+  const uiOptions = useWhiteboardUiOptions();
   const resolvedLoadError = loadError ?? stylesheet.error;
   return {
     collaboration,
@@ -553,7 +569,7 @@ function useWhiteboardCanvasState(props) {
 function WhiteboardCanvasView({ state }) {
   const { collaboration, configuration, excalidraw, initialData, isReady, math, resolvedLoadError, uiOptions } = state;
   return /* @__PURE__ */ jsxs2("div", { className: configuration.rootClassName, hidden: !configuration.isVisible, children: [
-    /* @__PURE__ */ jsx2(WhiteboardMathToolbar, { canDraw: configuration.canDraw, classNames: configuration.classNames, isReady, onOpenMath: math.openMath, selectedLatex: math.selectedLatex }),
+    /* @__PURE__ */ jsx2(WhiteboardMathToolbar, { canDraw: configuration.canDraw && !configuration.isCollaborating, classNames: configuration.classNames, isReady, onOpenMath: math.openMath, selectedLatex: math.selectedLatex }),
     /* @__PURE__ */ jsx2(WhiteboardCanvasStatus, { classNames: configuration.classNames, error: resolvedLoadError, icons: configuration.icons, isReady }),
     excalidraw && /* @__PURE__ */ jsx2(
       WhiteboardScene,
@@ -569,12 +585,13 @@ function WhiteboardCanvasView({ state }) {
         uiOptions
       }
     ),
-    math.isMathOpen && /* @__PURE__ */ jsx2(MathEditor, { initialLatex: math.selectedLatex ?? DEFAULT_LATEX, isEditing: Boolean(math.selectedLatex), classNames: configuration.classNames, icons: configuration.icons, onClose: math.closeMath, onSubmit: math.handleSubmitMath })
+    math.isMathOpen && /* @__PURE__ */ jsx2(MathEditor, { initialLatex: math.initialLatex, isEditing: Boolean(math.selectedLatex), classNames: configuration.classNames, icons: configuration.icons, onClose: math.closeMath, onSubmit: math.handleSubmitMath })
   ] });
 }
 function WhiteboardMathToolbar({ canDraw, classNames, isReady, onOpenMath, selectedLatex }) {
-  if (!isReady) return null;
-  return /* @__PURE__ */ jsx2("div", { className: classNames.toolbar, style: { position: "absolute", top: 12, left: 12, zIndex: 20, display: "flex" }, children: /* @__PURE__ */ jsx2("button", { type: "button", onClick: onOpenMath, disabled: !canDraw, className: classNames.toolbarButton, "aria-label": selectedLatex ? "Edit math equation" : "Insert math equation", title: selectedLatex ? "Edit equation" : "Math", children: "\u2211" }) });
+  if (!isReady || !canDraw) return null;
+  const label = selectedLatex ? "Edit math equation" : "Insert math equation";
+  return /* @__PURE__ */ jsx2("div", { className: classNames.toolbar, style: { position: "absolute", top: 12, left: 12, zIndex: 20, display: "flex" }, children: /* @__PURE__ */ jsx2("button", { type: "button", onClick: onOpenMath, disabled: !canDraw, className: classNames.toolbarButton, "aria-label": label, title: label, children: "\u2211" }) });
 }
 function WhiteboardCanvasStatus({ classNames, error, icons, isReady }) {
   if (error) return /* @__PURE__ */ jsx2(WhiteboardLoadError, { className: classNames.error, error });
@@ -620,6 +637,7 @@ export {
   getRenderedSvgSize,
   getSelectedMathElement,
   isChalkMathElement,
+  preloadWhiteboardStylesheet,
   renderLatexToSvg,
   svgToDataUrl
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q9labsai/chalk-whiteboard",
-  "version": "4.1.16",
+  "version": "5.0.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -63,7 +63,6 @@
   },
   "dependencies": {
     "@excalidraw/excalidraw": "0.18.1",
-    "@noble/hashes": "2.3.0",
     "mathjax": "4.1.3"
   },
   "devDependencies": {
@@ -89,7 +88,7 @@
     "dev": "tsup ./src/index.ts ./src/react/index.ts ./src/collab/index.ts ./src/embedded/index.ts --format esm --out-dir ./dist --platform browser --splitting --external react --external react-dom --external @excalidraw/excalidraw --watch",
     "test": "pnpm exec vitest run && pnpm run test:declarations",
     "test:declarations": "node --test scripts/rewrite-declaration-specifiers-proof.mjs",
-    "check-types": "tsc --noEmit",
+    "check-types": "tsc-rs --noEmit",
     "lint": "pnpm exec oxfmt --check . && tsc --noEmit",
     "clean": "rm -rf dist"
   }