@q9labsai/chalk-whiteboard 5.2.0 → 5.2.2

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

@@ -0,0 +1,7 @@
+import { type MutableRefObject } from "react";
+import type { WhiteboardEngineHandle } from "../WhiteboardCanvas.js";
+/** Reads the engine's stacks; never counts host mutations. */
+export declare function useEngineHistory(root: MutableRefObject<HTMLElement | null>, engine: WhiteboardEngineHandle | null): {
+    canUndo: boolean;
+    canRedo: boolean;
+};

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

@@ -0,0 +1,91 @@
+import type { WhiteboardView as ChalkWhiteboardView, WhiteboardViewBounds } from "../../collab/view.js";
+import type { WhoCanDraw } from "./board-draw-policy.js";
+/** design.md, "The board": every colour, size and key the board's own controls use. */
+export type BoardSurface = "chalkboard" | "paper" | "dots";
+export type IslandPlace = "bottom" | "top" | "left";
+export type CallTheme = "light" | "dark";
+export type PenColor = "ink" | "red" | "orange" | "green" | "blue" | "violet";
+export type PenWidth = "thin" | "medium" | "thick";
+export type ShapeTool = "rectangle" | "ellipse" | "diamond" | "arrow" | "line";
+export type BoardTool = "selection" | "hand" | "pen" | "highlighter" | ShapeTool | "text" | "note" | "eraser" | "laser";
+export declare const SURFACES: readonly {
+    readonly id: BoardSurface;
+    readonly label: string;
+}[];
+export declare const ISLAND_PLACES: readonly {
+    readonly id: IslandPlace;
+    readonly label: string;
+}[];
+export declare const DRAW_POLICIES: readonly {
+    readonly id: WhoCanDraw["policy"];
+    readonly label: string;
+}[];
+export declare const PEN_COLORS: readonly {
+    readonly id: PenColor;
+    readonly label: string;
+}[];
+export declare const NOTE_FILL: Record<PenColor, string>;
+/** Note text is a hair off Ink's canonical colour, so it never turns light with the surface. */
+export declare const NOTE_TEXT = "#1b1c1e";
+export declare const NOTE_SIZE: {
+    readonly width: 170;
+    readonly height: 150;
+};
+/** A 4px corner, as in the mockup; the engine's default rounding is 32px. */
+export declare const NOTE_ROUNDNESS: {
+    readonly type: 3;
+    readonly value: 4;
+};
+export declare const PEN_WIDTHS: readonly {
+    readonly id: PenWidth;
+    readonly label: string;
+    readonly units: number;
+}[];
+export declare const SHAPES: readonly {
+    readonly id: ShapeTool;
+    readonly label: string;
+    readonly key: string;
+}[];
+export declare const TOOL_KEYS: Readonly<Record<string, BoardTool>>;
+export declare function personColor(index: number): string;
+export declare function isDarkSurface(surface: BoardSurface, theme: CallTheme): boolean;
+/** The surface's own ink, which is what Ink looks like on it. */
+export declare function surfaceInk(surface: BoardSurface, theme: CallTheme): string;
+/** The fill behind the drawing, also used as the background of an exported image. */
+export declare function surfaceFill(surface: BoardSurface, theme: CallTheme): string;
+export declare function selectionColor(surface: BoardSurface, theme: CallTheme): string;
+export declare function penHex(color: PenColor, surface: BoardSurface, theme: CallTheme): string;
+/** The highlighter has no Ink: it draws orange instead, four times as wide at 40% opacity. */
+export declare function highlighterStyle(color: PenColor, width: PenWidth): {
+    readonly strokeColor: string;
+    readonly strokeWidth: number;
+    readonly opacity: number;
+};
+export declare function engineStrokeWidth(px: number, freehand: boolean): number;
+export declare function widthUnits(width: PenWidth): number;
+export declare const MIN_ZOOM = 0.1;
+export declare const MAX_ZOOM = 4;
+export declare function clampZoom(zoom: number): number;
+export type Camera = {
+    readonly scrollX: number;
+    readonly scrollY: number;
+    readonly zoom: number;
+};
+export type Viewport = {
+    readonly width: number;
+    readonly height: number;
+};
+/** The part of the board this camera shows, in board coordinates. */
+export declare function visibleView(camera: Camera, viewport: Viewport, bounds: WhiteboardViewBounds): Omit<ChalkWhiteboardView, "bring">;
+/** Pan to someone else's view without changing the local zoom. */
+export declare function cameraForView(view: Omit<ChalkWhiteboardView, "bring">, viewport: Viewport, zoom: number): Camera;
+/** The camera after zooming to `zoom` around the viewport's centre. */
+export declare function zoomAroundCentre(camera: Camera, viewport: Viewport, zoom: number): Camera;
+export declare function sameCamera(left: Camera, right: Camera): boolean;
+export declare function mixCamera(from: Camera, to: Camera, progress: number): Camera;
+/** A critically damped spring step, exact for any frame time. Returns the new offset from the target and the new velocity. */
+export declare function springStep(offset: number, velocity: number, rate: number, seconds: number): readonly [number, number];
+export declare function readStored<T extends string>(key: string, allowed: readonly {
+    readonly id: T;
+}[], fallback: T): T;
+export declare function writeStored(key: string, value: string): void;

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

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+export type BoardToast = {
+    readonly message: ReactNode;
+    readonly icon?: ReactNode;
+    readonly type?: "info" | "success" | "warning" | "error";
+    readonly duration?: number;
+    readonly action?: {
+        readonly label: string;
+        readonly onClick: () => void;
+    };
+};
+/** Null drops the board lifetime’s toasts, including their action callbacks.
+ * Board events join the call's own toast stack, so they look, sit and time out like every other toast. */
+export declare const BoardToastContext: import("react").Context<(toast: BoardToast | null) => void>;
+export declare function useBoardToast(lifetime: object | null): (toast: BoardToast) => void;

package/dist/react/board/board-view-versions.d.ts

@@ -0,0 +1 @@
+export { ChalkWhiteboardViewVersions as ViewVersions } from "@q9labsai/chalk-client";

package/dist/react/board/controls/ChalkMenu.d.ts

@@ -0,0 +1,22 @@
+import { Menu } from "@base-ui/react/menu";
+export { Menu as ChalkMenuPrimitive };
+import { type ReactElement, type ReactNode } from "react";
+export interface ChalkMenuProps {
+    readonly trigger: ReactElement;
+    readonly onOpenChange?: (open: boolean) => void;
+    readonly children: ReactNode;
+    readonly side?: "top" | "bottom";
+    readonly className?: string;
+}
+export declare function ChalkMenu({ trigger, children, side, className, onOpenChange }: ChalkMenuProps): import("react").JSX.Element;
+export interface ChalkMenuItemProps {
+    readonly children: ReactNode;
+    readonly checked?: boolean;
+    readonly disabled?: boolean;
+    readonly onClick?: () => void;
+    readonly closeOnClick?: boolean;
+}
+export declare function ChalkMenuItem({ children, checked, disabled, onClick, closeOnClick }: ChalkMenuItemProps): import("react").JSX.Element;
+export declare function ChalkMenuLabel({ children }: {
+    readonly children: ReactNode;
+}): import("react").JSX.Element;

package/dist/react/board/controls/ChalkPopover.d.ts

@@ -0,0 +1,13 @@
+import { Popover } from "@base-ui/react/popover";
+export { Popover as ChalkPopoverPrimitive };
+import { type ReactElement, type ReactNode } from "react";
+export declare function ChalkPopover({ trigger, children, label, className, alignOffset, tooltip, open, onOpenChange, }: {
+    readonly open?: boolean;
+    readonly onOpenChange?: (open: boolean) => void;
+    readonly trigger: ReactElement;
+    readonly children: ReactNode;
+    readonly label: string;
+    readonly className?: string;
+    readonly tooltip?: string;
+    readonly alignOffset?: number;
+}): import("react").JSX.Element;

package/dist/react/board/controls/ChalkTooltip.d.ts

@@ -0,0 +1,5 @@
+import { type ReactElement, type ReactNode } from "react";
+export declare function ChalkTooltip({ trigger, children }: {
+    readonly trigger: ReactElement;
+    readonly children: ReactNode;
+}): import("react").JSX.Element;

package/dist/react/board/controls/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ChalkMenu.js";
+export * from "./ChalkPopover.js";
+export * from "./ChalkTooltip.js";

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

@@ -0,0 +1,6 @@
+export declare function useMediaQuery(query: string): boolean;
+export declare function useIsMobile(): boolean;
+export declare function useIsTablet(): boolean;
+export declare function useIsDesktop(): boolean;
+export declare function usePrefersReducedMotion(): boolean;
+export declare function usePrefersDarkMode(): boolean;

package/dist/react/index.d.ts

@@ -7,3 +7,6 @@ export type { RenderedMathSvg } from "./mathjax-renderer.js";
 export type { AppState, BinaryFileData, BinaryFiles, Collaborator, CollaboratorPointer, ExcalidrawElement, ExcalidrawImperativeAPI, OrderedExcalidrawElement } from "../collab/index.js";
 export { CANONICAL_INK } from "../collab/ink.js";
 export { observeEngineHistory, type EngineHistoryState } from "./engine-history.js";
+export { Board, type BoardProps } from "./board/Board.js";
+export { BoardToastContext, type BoardToast } from "./board/board-toasts.js";
+export * from "./board/controls/index.js";