@q9labsai/chalk-whiteboard 5.2.0 → 5.2.2

package/dist/embedded/controller.d.ts

@@ -1,3 +1,5 @@
+import type { WhiteboardView } from "../collab/view.js";
+import type { ChalkEmbeddedBoardContext, ChalkEmbeddedBoardNotice } from "./protocol.js";
 import type { WhiteboardCommit, WhiteboardJsonValue } from "../collab/wire.js";
 import { type ChalkEmbeddedWhiteboardTheme, type ChalkEmbeddedWhiteboardViewport } from "./protocol.js";
 export type ChalkEmbeddedWhiteboardTransportElement = {
@@ -33,23 +35,12 @@ export type ChalkEmbeddedWhiteboardTransportEvent = {
     readonly type: "reset_required";
     readonly sceneId: string;
     readonly reason: "scene_changed" | "cursor_expired" | "gap";
-} | ({
+} | (WhiteboardView & {
     readonly type: "view";
     readonly participantId: string;
     readonly displayName: string;
-    readonly x: number;
-    readonly y: number;
-    readonly width: number;
-    readonly height: number;
-    readonly bring: boolean;
     readonly occurredAt: string;
-} & ({
-    readonly originParticipantId: string;
-    readonly originSequence: number;
-} | {
-    readonly originParticipantId?: never;
-    readonly originSequence?: never;
-}));
+});
 export interface ChalkEmbeddedWhiteboardFileTransport {
     readonly getDownloadUrl: (fileId: string) => Promise<{
         readonly downloadUrl: string;
@@ -70,6 +61,9 @@ export interface ChalkEmbeddedWhiteboardTransport {
     }) => void;
     readonly requestSnapshot: () => Promise<void>;
     readonly clear: () => Promise<WhiteboardCommit>;
+    readonly sendView?: (view: WhiteboardView) => boolean;
+    readonly setDrawPolicy?: (policy: "everyone" | "hosts" | "picked") => Promise<void>;
+    readonly setDrawPermission?: (participantId: string, canDraw: boolean) => Promise<void>;
     readonly files: ChalkEmbeddedWhiteboardFileTransport;
 }
 export interface ChalkEmbeddedWhiteboardRendererPort {
@@ -107,7 +101,13 @@ export interface ChalkEmbeddedWhiteboardControllerOptions {
         readonly format: "png" | "svg";
         readonly mimeType: string;
         readonly dataURL: string;
-    }) => void;
+        readonly action?: "download" | "copy";
+    }) => void | Promise<void>;
+    readonly manageSceneSubscription?: boolean;
+    readonly board?: ChalkEmbeddedBoardContext;
+    readonly onNotice?: (notice: ChalkEmbeddedBoardNotice | null) => void;
+    readonly onFollow?: (participantId: string | null) => void;
+    readonly onCloseBoard?: () => void;
     readonly onCloseReady?: (reason: string) => void;
 }
 export declare class ChalkWhiteboardController {
@@ -120,6 +120,8 @@ export declare class ChalkWhiteboardController {
         readonly canDraw: boolean;
         readonly canClear: boolean;
     }): void;
+    performNoticeAction(id: string): void;
+    setBoard(board: ChalkEmbeddedBoardContext): void;
     setViewport(viewport: ChalkEmbeddedWhiteboardViewport): void;
     requestUserExport(requestId: string, format: "png" | "svg"): void;
     prepareClose(reason: string): void;

package/dist/embedded/index.d.ts

@@ -2,4 +2,4 @@ export { ChalkWhiteboardController } from "./controller.js";
 export type { ChalkEmbeddedWhiteboardControllerOptions, ChalkEmbeddedWhiteboardFileTransport, ChalkEmbeddedWhiteboardRendererPort, ChalkEmbeddedWhiteboardTransport, ChalkEmbeddedWhiteboardTransportEvent } from "./controller.js";
 export { chalkEmbeddedWhiteboardManifest } from "./manifest.js";
 export { CHALK_EMBEDDED_WHITEBOARD_BRIDGE_VERSION, CHALK_EMBEDDED_WHITEBOARD_EXCALIDRAW_VERSION, CHALK_EMBEDDED_WHITEBOARD_MAX_MESSAGE_BYTES, CHALK_EMBEDDED_WHITEBOARD_RENDERER_BUILD_ID, decodeEmbeddedWhiteboardHostMessage, decodeEmbeddedWhiteboardRendererMessage, encodeEmbeddedWhiteboardMessage, } from "./protocol.js";
-export type { ChalkEmbeddedWhiteboardBridgeEnvelope, ChalkEmbeddedWhiteboardHostEnvelope, ChalkEmbeddedWhiteboardHostMessage, ChalkEmbeddedWhiteboardMessageContext, ChalkEmbeddedWhiteboardOperationResult, ChalkEmbeddedWhiteboardRendererEnvelope, ChalkEmbeddedWhiteboardRendererMessage, ChalkEmbeddedWhiteboardTheme, ChalkEmbeddedWhiteboardViewport, } from "./protocol.js";
+export type { ChalkEmbeddedBoardContext, ChalkEmbeddedBoardNotice, ChalkEmbeddedWhiteboardBridgeEnvelope, ChalkEmbeddedWhiteboardHostEnvelope, ChalkEmbeddedWhiteboardHostMessage, ChalkEmbeddedWhiteboardMessageContext, ChalkEmbeddedWhiteboardOperationResult, ChalkEmbeddedWhiteboardRendererEnvelope, ChalkEmbeddedWhiteboardRendererMessage, ChalkEmbeddedWhiteboardTheme, ChalkEmbeddedWhiteboardViewport, } from "./protocol.js";

package/dist/embedded/index.js

@@ -31,8 +31,42 @@ function decodeEmbeddedWhiteboardHostMessage(value, expectedGeneration) {
 function decodeEmbeddedWhiteboardRendererMessage(value, expectedGeneration) {
   return decodeEnvelope(value, expectedGeneration, rendererMessageTypes);
 }
-var hostMessageTypes = /* @__PURE__ */ new Set(["initialize", "apply_snapshot", "apply_update", "apply_cursor", "reset_required", "set_capabilities", "set_viewport", "operation_result", "provide_file_bytes", "request_user_export", "prepare_close"]);
-var rendererMessageTypes = /* @__PURE__ */ new Set(["ready", "local_update", "cursor", "camera", "request_snapshot", "clear", "file_read", "file_write", "user_export", "metric", "error", "close_ready"]);
+var hostMessageTypes = /* @__PURE__ */ new Set([
+  "notice_action",
+  "set_board",
+  "apply_view",
+  "initialize",
+  "apply_snapshot",
+  "apply_update",
+  "apply_cursor",
+  "reset_required",
+  "set_capabilities",
+  "set_viewport",
+  "operation_result",
+  "provide_file_bytes",
+  "request_user_export",
+  "prepare_close"
+]);
+var rendererMessageTypes = /* @__PURE__ */ new Set([
+  "set_draw_policy",
+  "set_draw_permission",
+  "notice",
+  "view",
+  "follow",
+  "close_board",
+  "ready",
+  "local_update",
+  "cursor",
+  "camera",
+  "request_snapshot",
+  "clear",
+  "file_read",
+  "file_write",
+  "user_export",
+  "metric",
+  "error",
+  "close_ready"
+]);
 function decodeEnvelope(value, expectedGeneration, allowedTypes) {
   if (encodedBytes(value) > CHALK_EMBEDDED_WHITEBOARD_MAX_MESSAGE_BYTES) throw new Error("embedded whiteboard message exceeds the bridge limit");
   let parsed;
@@ -166,6 +200,7 @@ var ChalkWhiteboardController = class {
   #nextMessageId;
   #canDraw;
   #canClear;
+  #board;
   #viewport = null;
   #rendererGeneration = null;
   #sceneId = null;
@@ -200,7 +235,7 @@ var ChalkWhiteboardController = class {
     this.#documentCompatible = true;
     this.#rendererMessageIds.clear();
     this.#abortFileTransfers();
-    if (this.#transportStarted) this.options.transport.stopSceneSubscription();
+    if (this.#transportStarted && this.options.manageSceneSubscription !== false) this.options.transport.stopSceneSubscription();
     this.#transportStarted = false;
   }
   setCapabilities(value) {
@@ -208,6 +243,13 @@ var ChalkWhiteboardController = class {
     this.#canClear = value.canClear;
     this.#sendEffectiveCapabilities();
   }
+  performNoticeAction(id) {
+    this.#send({ type: "notice_action", payload: { id } });
+  }
+  setBoard(board) {
+    this.#board = board;
+    this.#send({ type: "set_board", payload: board });
+  }
   setViewport(viewport) {
     this.#viewport = viewport;
     this.#send({ type: "set_viewport", payload: viewport });
@@ -233,6 +275,60 @@ var ChalkWhiteboardController = class {
       case "ready":
         await this.#ready(message);
         return;
+      case "view": {
+        const payload = message.payload;
+        const requestId = requireString(payload.requestId, "request ID");
+        await this.#operation(requestId, async () => {
+          const board = this.#board ?? this.options.board;
+          if (!board?.viewsAvailable || !isWhiteboardView(payload, board.viewBounds)) throw new Error("whiteboard view is invalid");
+          if (payload.bring && !this.#effectiveCanClear()) throw new Error("whiteboard presentation is not permitted");
+          const { requestId: _requestId, ...view } = payload;
+          if (!this.options.transport.sendView?.(view)) throw new Error("whiteboard view could not be sent");
+        });
+        return;
+      }
+      case "notice": {
+        if (message.payload === null) {
+          this.options.onNotice?.(null);
+          return;
+        }
+        const notice = requireRecord(message.payload, ["id", "message", "kind"], ["actionLabel"]);
+        if (notice.kind !== "info" && notice.kind !== "error") throw new Error("Board notice kind is invalid");
+        this.options.onNotice?.({ id: requireString(notice.id, "notice ID"), message: requireString(notice.message, "notice message", 1024), kind: notice.kind, ...typeof notice.actionLabel === "string" ? { actionLabel: requireString(notice.actionLabel, "notice action", 64) } : {} });
+        return;
+      }
+      case "follow": {
+        const payload = message.payload;
+        if (typeof payload !== "object" || payload === null || !("participantId" in payload) || payload.participantId !== null && typeof payload.participantId !== "string") throw new Error("whiteboard follow target is invalid");
+        this.options.onFollow?.(payload.participantId);
+        return;
+      }
+      case "set_draw_policy": {
+        const payload = requireRecord(message.payload, ["requestId", "policy"]);
+        const requestId = requireString(payload.requestId, "request ID");
+        const policy = payload.policy;
+        if (policy !== "everyone" && policy !== "hosts" && policy !== "picked") throw new Error("whiteboard draw policy is invalid");
+        await this.#operation(requestId, async () => {
+          if (!this.#canClear || !this.options.transport.setDrawPolicy) throw new Error("whiteboard policy changes are unavailable");
+          await this.options.transport.setDrawPolicy(policy);
+        });
+        return;
+      }
+      case "set_draw_permission": {
+        const payload = requireRecord(message.payload, ["requestId", "participantId", "canDraw"]);
+        const requestId = requireString(payload.requestId, "request ID");
+        const participantId = requireString(payload.participantId, "participant ID");
+        const canDraw = payload.canDraw;
+        if (typeof canDraw !== "boolean") throw new Error("whiteboard draw permission is invalid");
+        await this.#operation(requestId, async () => {
+          if (!this.#canClear || !this.options.transport.setDrawPermission) throw new Error("whiteboard permission changes are unavailable");
+          await this.options.transport.setDrawPermission(participantId, canDraw);
+        });
+        return;
+      }
+      case "close_board":
+        this.options.onCloseBoard?.();
+        return;
       case "local_update":
         await this.#localUpdate(message);
         return;
@@ -273,9 +369,14 @@ var ChalkWhiteboardController = class {
       case "error":
         this.options.onError?.(requireRendererError(message.payload));
         return;
-      case "user_export":
-        this.options.onUserExport?.(requireUserExport(message.payload));
+      case "user_export": {
+        const payload = requireUserExport(message.payload);
+        await this.#operation(payload.requestId, async () => {
+          if (!this.options.onUserExport) throw new Error("Board export is unavailable");
+          await this.options.onUserExport(payload);
+        });
         return;
+      }
       case "close_ready":
         this.options.onCloseReady?.(requireCloseReady(message.payload).reason);
     }
@@ -295,11 +396,12 @@ var ChalkWhiteboardController = class {
         canDraw: this.#effectiveCanDraw(),
         canClear: this.#effectiveCanClear(),
         theme: this.options.theme ?? "light",
+        ...this.#board ?? this.options.board ? { board: this.#board ?? this.options.board } : {},
         ...this.options.localParticipantColor ? { localParticipantColor: this.options.localParticipantColor } : {}
       }
     });
     if (this.#viewport) this.#send({ type: "set_viewport", payload: this.#viewport });
-    if (!this.#transportStarted) {
+    if (!this.#transportStarted && this.options.manageSceneSubscription !== false) {
       await this.options.transport.startSceneSubscription();
       this.#transportStarted = true;
     } else {
@@ -415,8 +517,15 @@ var ChalkWhiteboardController = class {
       case "cursor":
         this.#send({ type: "apply_cursor", payload: event });
         return;
-      case "view":
+      case "view": {
+        if (event.bring) {
+          const board = this.#board ?? this.options.board;
+          if (board) this.#board = { ...board, following: event.participantId };
+          this.options.onFollow?.(event.participantId);
+        }
+        this.#send({ type: "apply_view", payload: event });
         return;
+      }
       case "reset_required":
         this.#sceneGeneration = null;
         this.#send({ type: "reset_required", payload: event });
@@ -604,11 +713,12 @@ function requireRendererError(value) {
   };
 }
 function requireUserExport(value) {
-  const record = requireRecord(value, ["requestId", "format", "mimeType", "dataURL"]);
+  const record = requireRecord(value, ["requestId", "format", "mimeType", "dataURL"], ["action"]);
   if (record.format !== "png" && record.format !== "svg") throw new Error("embedded whiteboard export is invalid");
   return {
     requestId: requireString(record.requestId, "request ID"),
     format: record.format,
+    ...record.action === "copy" || record.action === "download" ? { action: record.action } : {},
     mimeType: normalizeMimeType(requireString(record.mimeType, "MIME type")),
     dataURL: requireString(record.dataURL, "export data", CHALK_EMBEDDED_WHITEBOARD_MAX_MESSAGE_BYTES - 1024)
   };
@@ -838,6 +948,15 @@ function recordMessageId(messageIds, messageId) {
   }
   return true;
 }
+function isWhiteboardView(value, bounds) {
+  if (typeof value !== "object" || value === null || !("x" in value) || !("y" in value) || !("width" in value) || !("height" in value) || !("bring" in value)) return false;
+  if (typeof value.x !== "number" || !Number.isFinite(value.x) || Math.abs(value.x) > bounds.maxCoordinate || typeof value.y !== "number" || !Number.isFinite(value.y) || Math.abs(value.y) > bounds.maxCoordinate) return false;
+  if (typeof value.width !== "number" || !Number.isFinite(value.width) || value.width <= 0 || value.width > bounds.maxExtent || typeof value.height !== "number" || !Number.isFinite(value.height) || value.height <= 0 || value.height > bounds.maxExtent || typeof value.bring !== "boolean")
+    return false;
+  if ("lead" in value && typeof value.lead !== "boolean") return false;
+  if (!("originParticipantId" in value) || value.originParticipantId === void 0) return !("originSequence" in value) && !("originEpoch" in value);
+  return typeof value.originParticipantId === "string" && value.originParticipantId.length > 0 && value.originParticipantId.length <= 256 && "originSequence" in value && typeof value.originSequence === "number" && Number.isSafeInteger(value.originSequence) && value.originSequence > 0 && (!("originEpoch" in value) || typeof value.originEpoch === "string" && value.originEpoch.length > 0 && value.originEpoch.length <= 128);
+}
 export {
   CHALK_EMBEDDED_WHITEBOARD_BRIDGE_VERSION,
   CHALK_EMBEDDED_WHITEBOARD_EXCALIDRAW_VERSION,

package/dist/embedded/protocol.d.ts

@@ -1,3 +1,5 @@
+import type { WhoCanDraw } from "../react/board/board-draw-policy.js";
+import type { WhiteboardView, WhiteboardViewBounds } from "../collab/view.js";
 import type { WhiteboardCommit, WhiteboardWireElement } from "../collab/wire.js";
 export declare const CHALK_EMBEDDED_WHITEBOARD_BRIDGE_VERSION: 1;
 export declare const CHALK_EMBEDDED_WHITEBOARD_EXCALIDRAW_VERSION: "0.18.1";
@@ -22,6 +24,44 @@ export type ChalkEmbeddedWhiteboardOperationResult = {
         readonly recoverable: boolean;
     };
 };
+export type ChalkEmbeddedBoardNotice = {
+    readonly id: string;
+    readonly message: string;
+    readonly kind: "info" | "error";
+    readonly actionLabel?: string;
+};
+export type ChalkEmbeddedBoardContext = {
+    readonly primary: boolean;
+    readonly phone: boolean;
+    readonly landscapeControlsVisible?: boolean;
+    readonly following: string | null;
+    readonly ownParticipantId: string | null;
+    readonly people: readonly {
+        readonly id: string;
+        readonly displayName: string;
+    }[];
+    readonly viewBounds: WhiteboardViewBounds;
+    readonly sceneId: string | null;
+    readonly sceneStatus: string;
+    readonly connectionStatus: string;
+    readonly viewsAvailable: boolean;
+    readonly whoCanDraw?: Pick<WhoCanDraw, "policy" | "people">;
+    readonly colors: {
+        readonly canvas: string;
+        readonly surface: string;
+        readonly raised: string;
+        readonly popover: string;
+        readonly hover: string;
+        readonly line: string;
+        readonly lineStrong: string;
+        readonly text: string;
+        readonly textStrong: string;
+        readonly textMuted: string;
+        readonly textSoft: string;
+        readonly dangerText: string;
+        readonly focus: string;
+    };
+};
 export type ChalkEmbeddedWhiteboardHostMessage = {
     readonly type: "initialize";
     readonly payload: {
@@ -29,6 +69,7 @@ export type ChalkEmbeddedWhiteboardHostMessage = {
         readonly canClear: boolean;
         readonly theme: ChalkEmbeddedWhiteboardTheme;
         readonly localParticipantColor?: string;
+        readonly board?: ChalkEmbeddedBoardContext;
     };
 } | {
     readonly type: "apply_snapshot";
@@ -70,6 +111,21 @@ export type ChalkEmbeddedWhiteboardHostMessage = {
         readonly canDraw: boolean;
         readonly canClear: boolean;
     };
+} | {
+    readonly type: "notice_action";
+    readonly payload: {
+        readonly id: string;
+    };
+} | {
+    readonly type: "set_board";
+    readonly payload: ChalkEmbeddedBoardContext;
+} | {
+    readonly type: "apply_view";
+    readonly payload: WhiteboardView & {
+        readonly participantId: string;
+        readonly displayName: string;
+        readonly occurredAt: string;
+    };
 } | {
     readonly type: "set_viewport";
     readonly payload: ChalkEmbeddedWhiteboardViewport;
@@ -117,6 +173,35 @@ export type ChalkEmbeddedWhiteboardRendererMessage = {
         readonly x: number;
         readonly y: number;
     };
+} | {
+    readonly type: "view";
+    readonly payload: WhiteboardView & {
+        readonly requestId: string;
+    };
+} | {
+    readonly type: "notice";
+    readonly payload: ChalkEmbeddedBoardNotice | null;
+} | {
+    readonly type: "follow";
+    readonly payload: {
+        readonly participantId: string | null;
+    };
+} | {
+    readonly type: "set_draw_policy";
+    readonly payload: {
+        readonly requestId: string;
+        readonly policy: WhoCanDraw["policy"];
+    };
+} | {
+    readonly type: "set_draw_permission";
+    readonly payload: {
+        readonly requestId: string;
+        readonly participantId: string;
+        readonly canDraw: boolean;
+    };
+} | {
+    readonly type: "close_board";
+    readonly payload: {};
 } | {
     readonly type: "camera";
     readonly payload: {
@@ -157,6 +242,7 @@ export type ChalkEmbeddedWhiteboardRendererMessage = {
         readonly format: "png" | "svg";
         readonly mimeType: string;
         readonly dataURL: string;
+        readonly action?: "download" | "copy";
     };
 } | {
     readonly type: "metric";

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,3 +1,4 @@
+import type { WhiteboardView } from "../collab/view.js";
 import type { WhiteboardCommit } from "../collab/wire.js";
 import { type ChalkEmbeddedWhiteboardHostEnvelope, type ChalkEmbeddedWhiteboardRendererMessage } from "./protocol.js";
 declare global {
@@ -20,7 +21,16 @@ export declare class ChalkEmbeddedWhiteboardRendererBridge {
         readonly syncAll: boolean;
         readonly elements: readonly import("../collab/wire").WhiteboardWireElement[];
     }): Promise<WhiteboardCommit>;
+    sendView(view: WhiteboardView): Promise<boolean>;
+    exportImage(payload: {
+        readonly format: "png";
+        readonly mimeType: "image/png";
+        readonly dataURL: string;
+        readonly action: "download" | "copy";
+    }): Promise<void>;
     requestSnapshot(): Promise<void>;
+    setDrawPolicy(policy: import("../react/board/board-draw-policy").WhoCanDraw["policy"]): Promise<void>;
+    setDrawPermission(participantId: string, canDraw: boolean): Promise<void>;
     clear(): Promise<WhiteboardCommit>;
     downloadFile(fileId: string): Promise<{
         readonly mimeType: string;

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

@@ -0,0 +1,2 @@
+import "./renderer-assets.js";
+import "./renderer.js";

package/dist/embedded/renderer.d.ts

@@ -1,10 +1,5 @@
 import type { WhiteboardCollaborationEvent } from "../collab/engine.js";
 import { ChalkEmbeddedWhiteboardRendererBridge } from "./renderer-bridge.js";
-declare global {
-    interface Window {
-        EXCALIDRAW_ASSET_PATH?: string;
-    }
-}
 export declare function createCollaborationBridge(rendererBridge: ChalkEmbeddedWhiteboardRendererBridge): {
     submitUpdate: (payload: Parameters<ChalkEmbeddedWhiteboardRendererBridge["submitUpdate"]>[0]) => Promise<import("..").WhiteboardCommit>;
     sendCursor: ({ x, y }: {

package/dist/react/board/Board.d.ts

@@ -0,0 +1,41 @@
+import type { WhiteboardView as ChalkWhiteboardView } from "../../collab/view.js";
+import type { WhiteboardCanvasProps } from "../WhiteboardCanvas.js";
+import type { WhiteboardViewBounds } from "../../collab/view.js";
+import type { ReactNode } from "react";
+import { type CallTheme } from "./board-model.js";
+import type { WhoCanDraw } from "./board-draw-policy.js";
+export type BoardProps = {
+    readonly board: Omit<WhiteboardCanvasProps, "classNames" | "icons">;
+    readonly isHost: boolean;
+    readonly connectionStatus: string;
+    readonly sceneId: string | null;
+    readonly sceneStatus: string;
+    readonly ownParticipantId: string | null;
+    readonly viewBounds: WhiteboardViewBounds;
+    readonly participantIds?: readonly string[];
+    readonly whoCanDraw?: WhoCanDraw;
+    readonly renderCursorAvatar?: (name: string) => ReactNode;
+    readonly onExport?: (image: Blob, action: "download" | "copy") => Promise<void>;
+    /** False for the Grid tile: the live drawing with no controls. */
+    readonly primary: boolean;
+    readonly visible: boolean;
+    readonly phone?: boolean;
+    readonly landscapeControlsVisible?: boolean;
+    readonly presentation?: "web" | "mobile";
+    readonly colorScheme: CallTheme;
+    readonly people: readonly {
+        readonly id: string;
+        readonly displayName: string;
+    }[];
+    readonly following: string | null;
+    readonly onFollow: (participantId: string | null) => void;
+    /** Absent, or answering false, when the board service does not share views. */
+    readonly sendView?: (view: ChalkWhiteboardView) => boolean | Promise<boolean>;
+    readonly downloadLabel?: string;
+    readonly onClose?: () => void;
+};
+/**
+ * Chalk's board: Excalidraw draws, and every control around it is the call's own. Each person picks their own
+ * surface and island place; the drawing, the cursors and the views are shared.
+ */
+export declare 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, landscapeControlsVisible, }: BoardProps): import("react").JSX.Element;

package/dist/react/board/BoardCursors.d.ts

@@ -0,0 +1,23 @@
+import { type MutableRefObject } from "react";
+import type { ReactNode } from "react";
+import { type Camera } from "./board-model.js";
+export type RemoteCursor = {
+    readonly participantId: string;
+    readonly displayName: string;
+    readonly x: number;
+    readonly y: number;
+    readonly occurredAt: string;
+};
+/** Pruning belongs to receipt too: grid boards do not mount the cursor layer. */
+export declare function rememberCursor(cursors: Map<string, RemoteCursor>, cursor: RemoteCursor): void;
+/**
+ * Remote people's cursors over the board: a rounded arrow, the Facehash and the name, in the person's colour.
+ * Updates arrive about 15 times a second and unevenly, so each shown cursor is a spring chasing the newest one.
+ */
+export declare function BoardCursors({ cursorsRef, cameraRef, colorFor, hidden, renderAvatar, }: {
+    readonly cursorsRef: MutableRefObject<Map<string, RemoteCursor>>;
+    readonly cameraRef: MutableRefObject<Camera>;
+    readonly colorFor: (participantId: string) => string;
+    readonly hidden: boolean;
+    readonly renderAvatar?: (name: string) => ReactNode;
+}): import("react").JSX.Element;

package/dist/react/board/BoardIcon.d.ts

@@ -0,0 +1,46 @@
+declare const GLYPHS: {
+    readonly select: import("react").JSX.Element;
+    readonly hand: import("react").JSX.Element;
+    readonly pen: import("react").JSX.Element;
+    readonly highlighter: import("react").JSX.Element;
+    readonly rectangle: import("react").JSX.Element;
+    readonly ellipse: import("react").JSX.Element;
+    readonly diamond: import("react").JSX.Element;
+    readonly arrow: import("react").JSX.Element;
+    readonly line: import("react").JSX.Element;
+    readonly text: import("react").JSX.Element;
+    readonly note: import("react").JSX.Element;
+    readonly eraser: import("react").JSX.Element;
+    readonly laser: import("react").JSX.Element;
+    readonly undo: import("react").JSX.Element;
+    readonly redo: import("react").JSX.Element;
+    readonly minus: import("react").JSX.Element;
+    readonly plus: import("react").JSX.Element;
+    readonly fit: import("react").JSX.Element;
+    readonly download: import("react").JSX.Element;
+    readonly copy: import("react").JSX.Element;
+    readonly trash: import("react").JSX.Element;
+    readonly close: import("react").JSX.Element;
+    readonly check: import("react").JSX.Element;
+    readonly target: import("react").JSX.Element;
+    readonly eye: import("react").JSX.Element;
+    readonly wifiOff: import("react").JSX.Element;
+    readonly lock: import("react").JSX.Element;
+    readonly more: import("react").JSX.Element;
+    readonly chevron: import("react").JSX.Element;
+};
+export type BoardGlyph = keyof typeof GLYPHS;
+export declare function BoardIcon({ name, size, className }: {
+    readonly name: BoardGlyph;
+    readonly size?: number;
+    readonly className?: string;
+}): import("react").JSX.Element;
+/** Six dots in two columns: the island's drag handle. */
+export declare function GripIcon({ className }: {
+    readonly className?: string;
+}): import("react").JSX.Element;
+/** The remote cursor: a rounded arrow with a white outline, filled in the person's colour. */
+export declare function CursorArrow({ color }: {
+    readonly color: string;
+}): import("react").JSX.Element;
+export {};

package/dist/react/board/BoardIsland.d.ts

@@ -0,0 +1,22 @@
+import { type BoardSurface, type BoardTool, type CallTheme, type IslandPlace, type PenColor, type PenWidth, type ShapeTool } from "./board-model.js";
+export type IslandProps = {
+    readonly tool: BoardTool;
+    readonly shape: ShapeTool;
+    readonly onTool: (tool: BoardTool) => void;
+    readonly color: PenColor;
+    readonly width: PenWidth;
+    readonly onColor: (color: PenColor) => void;
+    readonly onWidth: (width: PenWidth) => void;
+    readonly surface: BoardSurface;
+    readonly theme: CallTheme;
+    readonly canUndo: boolean;
+    readonly canRedo: boolean;
+    readonly onUndo: () => void;
+    readonly onRedo: () => void;
+    readonly place: IslandPlace;
+    readonly onPlace: (place: IslandPlace, announce: boolean) => void;
+    readonly compact: boolean;
+    readonly primaryToolsFirst?: boolean;
+};
+/** The tool island: a pill of tools that docks at the bottom, the top or the left, or one pen button when compact. */
+export declare function BoardIsland(props: IslandProps): import("react").JSX.Element;

package/dist/react/board/BoardMenu.d.ts

@@ -0,0 +1,20 @@
+import type { WhoCanDraw } from "./board-draw-policy.js";
+import { type BoardSurface, type IslandPlace } from "./board-model.js";
+export type BoardMenuProps = {
+    readonly presentation?: "web" | "mobile";
+    readonly surface: BoardSurface;
+    readonly onSurface: (surface: BoardSurface) => void;
+    /** Offered outside a phone, to people who can draw. */
+    readonly place?: IslandPlace;
+    readonly onPlace: (place: IslandPlace) => void;
+    readonly downloadLabel?: string;
+    readonly onDownload: () => void;
+    readonly onCopy: () => void;
+    /** Offered to hosts. */
+    readonly whoCanDraw?: WhoCanDraw;
+    readonly onBring?: () => void;
+    readonly onClear?: () => void;
+    readonly onClose?: () => void;
+};
+/** The board's own menu: export, the person's own appearance, and the host's board actions. */
+export declare function BoardMenu({ surface, onSurface, place, onPlace, onDownload, onCopy, whoCanDraw, onBring, onClear, onClose, downloadLabel, presentation }: BoardMenuProps): import("react").JSX.Element;

package/dist/react/board/BoardStyles.d.ts

@@ -0,0 +1,2 @@
+/** The board's look: the mockup's surfaces, island, zoom, chips and cursors, on the call's own tokens. */
+export declare function BoardStyles(): import("react").JSX.Element;

package/dist/react/board/board-draw-policy.d.ts

@@ -0,0 +1,10 @@
+export type WhoCanDraw = {
+    readonly policy: "everyone" | "hosts" | "picked";
+    readonly people: readonly {
+        readonly id: string;
+        readonly name: string;
+        readonly picked: boolean;
+    }[];
+    readonly onPolicy: (policy: WhoCanDraw["policy"]) => void;
+    readonly onPick: (id: string, picked: boolean) => void;
+};

package/dist/react/board/board-engine.d.ts

@@ -0,0 +1,30 @@
+import type { WhiteboardEngineHandle } from "../WhiteboardCanvas.js";
+import { type BoardSurface, type BoardTool, type CallTheme, type Camera, type PenColor, type PenWidth } from "./board-model.js";
+/** The pen the person has chosen, and the surface it is drawn on. */
+export type PenChoice = {
+    readonly color: PenColor;
+    readonly width: PenWidth;
+    readonly surface: BoardSurface;
+    readonly theme: CallTheme;
+};
+export declare function applyTool(engine: WhiteboardEngineHandle, tool: BoardTool, pen: PenChoice): void;
+type PenChanges = {
+    readonly color?: PenColor;
+    readonly width?: PenWidth;
+};
+/** A colour or width change applies to what is selected, as well as to the next stroke. */
+export declare function restyleSelection(engine: WhiteboardEngineHandle, pen: PenChoice, changes: PenChanges): boolean;
+/** Places a plain sticky note centred on the board point and opens its text at once. */
+export declare function placeNote(engine: WhiteboardEngineHandle, container: HTMLElement, point: {
+    readonly x: number;
+    readonly y: number;
+}, color: PenColor): void;
+/** Text written in a note sits at its top left, like the mockup's notes. */
+export declare function settleNoteText(engine: WhiteboardEngineHandle): void;
+/** Undo and redo have no engine call, so the board presses the engine's own keys. */
+export declare function pressHistory(container: HTMLElement, redo: boolean): void;
+export declare function readCamera(engine: WhiteboardEngineHandle): Camera;
+export declare function setCamera(engine: WhiteboardEngineHandle, camera: Camera): void;
+export declare function boardImage(engine: WhiteboardEngineHandle, background: string): Promise<Blob>;
+export declare function sceneSignature(engine: WhiteboardEngineHandle): number;
+export {};