@q9labsai/chalk-react 5.0.1 → 5.2.0

package/dist/{chunk-WRAEH24P.js → chunk-HWQLW4JR.js}

@@ -55,11 +55,13 @@ function fitGrid(box, ids, options, wideIds = []) {
   let plan = null;
   let overflowCount = 0;
   const weight = (id) => wideIds.includes(id) ? 2 : 1;
-  for (let count = Math.min(ids.length, Math.max(1, options.maxPerPage)); count >= 1; count -= 1) {
+  const lastContent = ids.reduce((last, id, index2) => wideIds.includes(id) ? index2 : last, -1);
+  const fewest = Math.min(ids.length, Math.max(wideIds.includes(ids[0] ?? "") ? 2 : 1, lastContent + 2));
+  for (let count = Math.min(ids.length, Math.floor(options.maxPerPage)); count >= 1; count -= 1) {
     overflowCount = count < ids.length ? ids.length - count + 1 : 0;
     keys = overflowCount ? [...ids.slice(0, count - 1), MORE_TILE_ID] : ids;
     plan = rowPlan(box, keys.map(weight), options);
-    if (plan && (plan.minWidth >= options.minTileWidth && plan.height >= options.minTileHeight || count <= (wideIds.includes(ids[0] ?? "") ? 2 : 1))) break;
+    if (plan && (plan.minWidth >= options.minTileWidth && plan.height >= options.minTileHeight || count <= fewest)) break;
   }
   if (!plan) return EMPTY_GEOMETRY;
   let height = plan.height;
@@ -89,15 +91,52 @@ function contain(box, aspect) {
   const width = Math.min(box.width, box.height * aspect);
   return { width, height: width / aspect };
 }
+var FLOAT_SPEAKER = { width: 120, height: 68 };
+var FLOAT_PERSON = { width: 76, height: 44 };
+var FLOAT_MAX_PEOPLE = 3;
+var FLOAT_TOP = 56;
+var FLOAT_BOTTOM = 8 + 64 + 60;
+function floatPeople(box, primaryId, stripIds, options) {
+  const content = stripIds.filter((id) => options.wideIds?.includes(id));
+  const people = stripIds.filter((id) => !content.includes(id));
+  const speaker = options.speakerId && options.speakerId !== options.localId && people.includes(options.speakerId) ? options.speakerId : null;
+  const local = options.localId && people.includes(options.localId) ? options.localId : null;
+  const others = people.filter((id) => id !== speaker && id !== local);
+  const ordered = [...speaker ? [speaker] : [], ...others, ...local ? [local] : []];
+  const fold = (max2) => {
+    if (content.length + ordered.length <= max2) return [...content, ...ordered];
+    const shares = content.slice(0, max2 - 1);
+    const slots = max2 - 1 - shares.length;
+    const faces = ordered.length <= slots ? ordered : slots > 0 ? [...ordered.slice(0, slots - 1), ...ordered.slice(-1)] : [];
+    return [...shares, ...faces, MORE_TILE_ID];
+  };
+  const sizeOf = (id) => id === speaker || content.includes(id) ? FLOAT_SPEAKER : FLOAT_PERSON;
+  const bottomOf = (ids) => ids.reduce((y2, id) => y2 + sizeOf(id).height + options.gap, FLOAT_TOP) - options.gap;
+  let max = Math.max(1, Math.min(content.length + FLOAT_MAX_PEOPLE, options.maxPerPage ?? Infinity));
+  const minimum = Number.isFinite(options.maxPerPage) ? 1 : content.length + 1;
+  while (max > minimum && bottomOf(fold(max)) > box.height - FLOAT_BOTTOM) max -= 1;
+  const column = fold(max);
+  if (bottomOf(column) > box.height - FLOAT_BOTTOM) return null;
+  let y = FLOAT_TOP;
+  const floats = column.map((id) => {
+    const size = sizeOf(id);
+    const frame = { id, role: "float", page: 0, x: box.width - 12 - size.width, y, ...size };
+    y += size.height + options.gap;
+    return frame;
+  });
+  const shown = floats.filter((frame) => frame.id !== MORE_TILE_ID).length;
+  return { frames: [{ id: primaryId, role: "primary", page: 0, x: 0, y: 0, ...box }, ...floats], pageCount: 1, perPage: floats.length, overflowCount: stripIds.length - shown };
+}
 function fitSpotlight(box, primaryId, stripIds, options) {
   const phone = box.width <= 640;
+  const maxPerPage = Math.floor(options.maxPerPage ?? Infinity);
   const aspect = options.primaryAspect === void 0 ? WIDESCREEN : options.primaryAspect;
-  if (!stripIds.length) {
+  if (!stripIds.length || maxPerPage <= 0) {
     const aspect2 = clamp(box.width / box.height, 4 / 3, WIDESCREEN);
     const fitted = contain(box, aspect2);
     const width = options.content || phone ? box.width : Math.min(box.width * 0.56, fitted.width);
     const height = options.content || phone ? box.height : width / aspect2;
-    return { frames: [{ id: primaryId, role: "primary", page: 0, x: (box.width - width) / 2, y: (box.height - height) / 2, width, height }], pageCount: 1, perPage: 0 };
+    return { frames: [{ id: primaryId, role: "primary", page: 0, x: (box.width - width) / 2, y: (box.height - height) / 2, width, height }], pageCount: 1, perPage: 0, overflowCount: stripIds.length };
   }
   if (phone && stripIds.length === 1 && !options.content) {
     return {
@@ -109,14 +148,17 @@ function fitSpotlight(box, primaryId, stripIds, options) {
       perPage: 1
     };
   }
-  const strip = phone ? Math.round(box.height * 0.3) : clamp(box.height * options.stripRatio, options.minStripHeight, options.maxStripHeight);
+  const floating = phone && options.floatingPhonePeople ? floatPeople(box, primaryId, stripIds, { ...options, maxPerPage }) : null;
+  if (floating) return floating;
+  const slim = phone && options.slimPhoneStrip === true;
+  const strip = slim ? 52 : phone ? Math.round(box.height * 0.3) : clamp(box.height * options.stripRatio, options.minStripHeight, options.maxStripHeight);
   const column = phone && options.content ? 120 : clamp(box.width * 0.15, 180, 260);
   const belowMain = options.content ? contain({ width: box.width, height: box.height - strip - options.gap }, aspect) : { width: box.width, height: box.height - strip - options.gap };
   const besideMain = options.content ? contain({ width: box.width - column - options.gap, height: box.height }, aspect) : { width: box.width - column - options.gap, height: box.height };
   const beside = options.content ? besideMain.width * besideMain.height > belowMain.width * belowMain.height * 1.005 : !phone && Math.abs(Math.log(besideMain.width / besideMain.height / WIDESCREEN)) < Math.abs(Math.log(belowMain.width / belowMain.height / WIDESCREEN));
   const main = { width: beside ? besideMain.width : box.width, height: beside ? box.height : belowMain.height };
   const remaining = { width: beside ? box.width - main.width - options.gap : box.width, height: beside ? box.height : box.height - main.height - options.gap };
-  const people = fitGrid(remaining, stripIds, { ...DEFAULT_GRID_OPTIONS, minTileWidth: phone ? 88 : 150, minTileHeight: phone ? 72 : 96, maxPerPage: options.maxPerPage ?? DEFAULT_GRID_OPTIONS.maxPerPage }, options.wideIds);
+  const people = fitGrid(remaining, stripIds, { ...DEFAULT_GRID_OPTIONS, minTileWidth: phone ? 88 : 150, minTileHeight: slim ? 52 : phone ? 72 : 96, maxPerPage }, options.wideIds);
   return {
     ...people,
     frames: [{ id: primaryId, role: "primary", page: 0, x: 0, y: 0, ...main }, ...people.frames.map((frame) => ({ ...frame, role: "strip", x: frame.x + (beside ? main.width + options.gap : 0), y: frame.y + (beside ? 0 : main.height + options.gap) }))]
@@ -180,6 +222,12 @@ function choosePrimary(items, context) {
   if (content) return content;
   return participantWhere(items, (participant) => participant.isActiveSpeaker === true) ?? participantWhere(items, (participant) => participant.isSpeaking === true) ?? (context.lastSpeakerId ? items.find((item) => item.kind === "participant" && item.id === context.lastSpeakerId) : void 0) ?? participantWhere(items, (participant) => !participant.isLocal) ?? participantWhere(items, () => true) ?? items[0] ?? null;
 }
+function speakingParticipantId(items, accept = () => true) {
+  return (participantWhere(items, (participant) => accept(participant) && participant.isActiveSpeaker === true) ?? participantWhere(items, (participant) => accept(participant) && participant.isSpeaking === true))?.id;
+}
+function floatingSpeakerId(items, lastRemoteSpeakerId) {
+  return speakingParticipantId(items, (participant) => !participant.isLocal) ?? lastRemoteSpeakerId;
+}
 function gridOrder(items, pinnedId) {
   if (!pinnedId) return [...items];
   const pinned = items.find((item) => item.id === pinnedId);
@@ -199,5 +247,7 @@ export {
   isContentItem,
   stabilizeOrder,
   choosePrimary,
+  speakingParticipantId,
+  floatingSpeakerId,
   gridOrder
 };

package/dist/components/admission-panel/AdmissionPanel.d.ts

@@ -16,4 +16,3 @@ export declare function AdmissionPanel(props: AdmissionPanelProps): React.JSX.El
 export declare namespace AdmissionPanel {
     var displayName: string;
 }
-//# sourceMappingURL=AdmissionPanel.d.ts.map

package/dist/components/atomic/AudioIndicator.d.ts

@@ -8,4 +8,3 @@ interface AudioIndicatorProps {
 }
 export declare const AudioIndicator: React.MemoExoticComponent<({ level, muted, size, variant, className }: AudioIndicatorProps) => React.JSX.Element>;
 export {};
-//# sourceMappingURL=AudioIndicator.d.ts.map

package/dist/components/atomic/Avatar.d.ts

@@ -15,4 +15,3 @@ export interface AvatarProps {
     seed?: number | string;
 }
 export declare const Avatar: React.MemoExoticComponent<({ name, src, size, status, className, style, gradientPreference, generated, animated }: AvatarProps) => React.JSX.Element>;
-//# sourceMappingURL=Avatar.d.ts.map

package/dist/components/atomic/HandRaiseIndicator.d.ts

@@ -8,4 +8,3 @@ interface HandRaiseIndicatorProps {
 }
 export declare const HandRaiseIndicator: React.MemoExoticComponent<({ raised, animated, position, size, className }: HandRaiseIndicatorProps) => React.JSX.Element | null>;
 export {};
-//# sourceMappingURL=HandRaiseIndicator.d.ts.map

package/dist/components/atomic/NameTag.d.ts

@@ -6,4 +6,3 @@ export interface NameTagProps {
     className?: string;
 }
 export declare const NameTag: React.MemoExoticComponent<({ name, isLocal, size, className }: NameTagProps) => React.JSX.Element>;
-//# sourceMappingURL=NameTag.d.ts.map

package/dist/components/atomic/ReactionBubble.d.ts

@@ -11,4 +11,3 @@ export interface ReactionBubbleProps {
     className?: string;
 }
 export declare const ReactionBubble: React.MemoExoticComponent<({ emoji, participantName, onComplete, duration: baseDuration, animated, className }: ReactionBubbleProps) => React.JSX.Element | null>;
-//# sourceMappingURL=ReactionBubble.d.ts.map

package/dist/components/atomic/StatusBadge.d.ts

@@ -6,4 +6,3 @@ export interface StatusBadgeProps {
     className?: string;
 }
 export declare const StatusBadge: React.MemoExoticComponent<({ status, pulse, size, className }: StatusBadgeProps) => React.JSX.Element>;
-//# sourceMappingURL=StatusBadge.d.ts.map

package/dist/components/atomic/VolumeSlider.d.ts

@@ -10,4 +10,3 @@ export interface VolumeSliderProps {
     className?: string;
 }
 export declare const VolumeSlider: React.NamedExoticComponent<VolumeSliderProps>;
-//# sourceMappingURL=VolumeSlider.d.ts.map

package/dist/components/atomic/Waveform.d.ts

@@ -7,4 +7,3 @@ export interface WaveformProps {
     className?: string;
 }
 export declare const Waveform: React.MemoExoticComponent<({ levels, color, animated, barCount, className }: WaveformProps) => React.JSX.Element>;
-//# sourceMappingURL=Waveform.d.ts.map

package/dist/components/atomic/index.d.ts

@@ -9,4 +9,3 @@ export * from "./ReactionBubble";
 export * from "./StatusBadge";
 export * from "./VolumeSlider";
 export * from "./Waveform";
-//# sourceMappingURL=index.d.ts.map

package/dist/components/audio-output/AudioOutput.d.ts

@@ -28,4 +28,3 @@ export declare function AudioOutput({ participants, volume, audioOutputDeviceId,
 export declare namespace AudioOutput {
     var displayName: string;
 }
-//# sourceMappingURL=AudioOutput.d.ts.map

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

@@ -0,0 +1,22 @@
+import type { ChalkWhiteboardView } from "@q9labsai/chalk-client";
+import type { Participant } from "../participant-grid/ParticipantGrid";
+import type { WhiteboardViewProps } from "../whiteboard-view/WhiteboardView";
+import { type CallTheme } from "./board-model";
+export type BoardProps = {
+    readonly board: WhiteboardViewProps;
+    /** False for the Grid tile: the live drawing with no controls. */
+    readonly primary: boolean;
+    readonly visible: boolean;
+    readonly colorScheme: CallTheme;
+    readonly people: readonly Participant[];
+    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;
+    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 }: BoardProps): import("react").JSX.Element;

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

@@ -0,0 +1,21 @@
+import { type MutableRefObject } from "react";
+import { type Camera } from "./board-model";
+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 }: {
+    readonly cursorsRef: MutableRefObject<Map<string, RemoteCursor>>;
+    readonly cameraRef: MutableRefObject<Camera>;
+    readonly colorFor: (participantId: string) => string;
+    readonly hidden: boolean;
+}): import("react").JSX.Element;

package/dist/components/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/components/board/BoardIsland.d.ts

@@ -0,0 +1,21 @@
+import { type BoardSurface, type BoardTool, type CallTheme, type IslandPlace, type PenColor, type PenWidth, type ShapeTool } from "./board-model";
+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;
+};
+/** 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/components/board/BoardMenu.d.ts

@@ -0,0 +1,18 @@
+import type { WhoCanDraw } from "./board-draw-policy";
+import { type BoardSurface, type IslandPlace } from "./board-model";
+export type BoardMenuProps = {
+    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 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 }: BoardMenuProps): import("react").JSX.Element;

package/dist/components/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/components/board/board-draw-policy.d.ts

@@ -0,0 +1,15 @@
+import type { ChalkWhiteboardDrawPolicy } from "@q9labsai/chalk-client";
+import type { BoardToast } from "./board-toasts";
+export type WhoCanDraw = {
+    readonly policy: ChalkWhiteboardDrawPolicy;
+    /** Everyone in the call who is not a host, because hosts can always draw under hosts only and picked people. */
+    readonly people: readonly {
+        readonly id: string;
+        readonly name: string;
+        readonly picked: boolean;
+    }[];
+    readonly onPolicy: (policy: ChalkWhiteboardDrawPolicy) => void;
+    readonly onPick: (id: string, picked: boolean) => void;
+};
+/** The host's call-wide drawing control. Undefined for people who aren't hosts and on Sync servers without draw_policy_v1. */
+export declare function useWhoCanDraw(toast: (toast: BoardToast) => void): WhoCanDraw | undefined;

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

@@ -0,0 +1,31 @@
+import type { WhiteboardEngineHandle } from "@q9labsai/chalk-whiteboard/react";
+import { type BoardSurface, type BoardTool, type CallTheme, type Camera, type PenColor, type PenWidth } from "./board-model";
+/** 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 hasContent(engine: WhiteboardEngineHandle): boolean;
+export declare function boardImage(engine: WhiteboardEngineHandle, background: string): Promise<Blob>;
+export declare function sceneSignature(engine: WhiteboardEngineHandle): number;
+export {};

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

@@ -0,0 +1,7 @@
+import { type MutableRefObject } from "react";
+import { type WhiteboardEngineHandle } from "@q9labsai/chalk-whiteboard/react";
+/** 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/components/board/board-model.d.ts

@@ -0,0 +1,90 @@
+import { type ChalkWhiteboardDrawPolicy, type ChalkWhiteboardView } from "@q9labsai/chalk-client";
+/** 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: ChalkWhiteboardDrawPolicy;
+    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): Omit<ChalkWhiteboardView, "bring">;
+/** The camera that fits someone else's view into this viewport, centred. */
+export declare function cameraForView(view: Omit<ChalkWhiteboardView, "bring">, viewport: Viewport): 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/components/board/board-toasts.d.ts

@@ -0,0 +1,6 @@
+import type { Toast } from "../toast-stack/ToastStack";
+export type BoardToast = Omit<Toast, "id">;
+/** 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/components/board/board-view-versions.d.ts

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

package/dist/components/call-card/CallCard.d.ts

@@ -16,4 +16,3 @@ export interface CallCardProps {
  * where it came from. Panels keep their own landmarks, so the drawer itself carries no role.
  */
 export declare function CallCard({ state, onClose, interactive, children, panel, onPanelChange, peopleCount, chatEnabled, participantsEnabled }: CallCardProps): import("react").JSX.Element | null;
-//# sourceMappingURL=CallCard.d.ts.map

package/dist/components/call-card/CallCardStyles.d.ts

@@ -1,2 +1 @@
 export declare function CallCardStyles(): import("react").JSX.Element;
-//# sourceMappingURL=CallCardStyles.d.ts.map

package/dist/components/call-limbo/CallLimbo.d.ts

@@ -18,7 +18,8 @@ export interface CallLimboProps {
     readonly initiallyCovered?: boolean;
     readonly theme?: ChalkTheme;
     readonly blocking?: boolean;
+    /** Extra classes for the message card, such as a fixed width around a form. */
+    readonly className?: string;
 }
 /** One surface for joining, admission and connection recovery. Never renders participant data. */
-export declare function CallLimbo({ spaceName, message, detail, action, children, overlay, active, initiallyCovered, theme, recorded, blocking }: CallLimboProps): React.JSX.Element;
-//# sourceMappingURL=CallLimbo.d.ts.map
+export declare function CallLimbo({ spaceName, message, detail, action, children, overlay, active, initiallyCovered, theme, recorded, blocking, className }: CallLimboProps): React.JSX.Element;

package/dist/components/call-limbo/CallReady.d.ts

@@ -4,4 +4,3 @@ export interface CallReadyProps {
     readonly link?: string;
 }
 export declare function CallReady({ open, onClose, link }: CallReadyProps): import("react").JSX.Element | null;
-//# sourceMappingURL=CallReady.d.ts.map

package/dist/components/call-limbo/qr-code.d.ts

@@ -2,4 +2,3 @@
  * Block parameters follow ISO/IEC 18004 (also documented by Project Nayuki's QR generator).
  */
 export declare function inviteQR(text: string): readonly (readonly boolean[])[] | null;
-//# sourceMappingURL=qr-code.d.ts.map

package/dist/components/call-limbo/useCallLink.d.ts

@@ -3,4 +3,3 @@ export declare function useCallLink(alone: boolean): {
     toggle: () => void;
     close: () => void;
 };
-//# sourceMappingURL=useCallLink.d.ts.map

package/dist/components/chalk/Chalk.d.ts

@@ -43,6 +43,10 @@ export type ChalkProps = SpaceIntegration & SpaceEventCallbacks & {
     readonly theme?: ChalkTheme;
     readonly shareUrl?: string;
     readonly onReportProblem?: import("../space-header/SpaceHeader").SpaceHeaderProps["onReportProblem"];
+    /** Opens an app-owned dialog that can outlive this call view. */
+    readonly onOpenReportProblem?: () => void;
+    /** Hides new report actions and disables Send without discarding an open report. */
+    readonly reportUnavailableReason?: string;
     readonly onColorSchemeChange?: (colorScheme: ChalkColorScheme) => void;
     readonly pickChatFiles?: () => Promise<readonly ChatUploadFile[]>;
     readonly spaceName?: string;
@@ -59,4 +63,3 @@ export type ChalkProps = SpaceIntegration & SpaceEventCallbacks & {
 };
 export declare function Chalk(props: ChalkProps): React.JSX.Element;
 export {};
-//# sourceMappingURL=Chalk.d.ts.map

package/dist/components/chalk/ReportProblemDialog.d.ts

@@ -0,0 +1,12 @@
+import type { RefObject } from "react";
+import type { ChalkProps } from "./Chalk";
+/** The call report form for app-owned terminal screens outside Chalk. */
+export declare function ReportProblemDialog({ open, onClose, onReportProblem, colorScheme, focusScope, diagnostics, unavailableReason, }: {
+    readonly diagnostics?: string;
+    readonly unavailableReason?: string;
+    readonly open: boolean;
+    readonly onClose: () => void;
+    readonly onReportProblem: NonNullable<ChalkProps["onReportProblem"]>;
+    readonly colorScheme: "light" | "dark";
+    readonly focusScope: RefObject<HTMLElement | null>;
+}): import("react").JSX.Element;

package/dist/components/chalk/StatusSurface.d.ts

@@ -1,10 +1,13 @@
 import type React from "react";
+import { type ClientFailure, type ErrorCode } from "@q9labsai/chalk-client";
 import { type ChalkTheme } from "../../theme";
 export type StatusSurfacePhase = "entering" | "left" | "episode-ended" | "failed" | "removed" | "full" | "elsewhere";
 export interface StatusSurfaceProps {
     readonly phase: StatusSurfacePhase;
     readonly callName?: string;
     readonly reason?: string;
+    readonly errorCode?: ErrorCode;
+    readonly sync?: ClientFailure["sync"];
     readonly theme?: ChalkTheme;
     readonly onRejoin?: () => void;
     readonly onHome?: () => void;
@@ -14,5 +17,4 @@ export interface StatusSurfaceProps {
     readonly retryPending?: boolean;
 }
 /** All terminal call states share the same quiet page and host-owned navigation. */
-export declare function StatusSurface({ phase, callName, reason, theme, onRejoin, onHome, onRetry, onReportProblem, rejoinDisabled, retryPending }: StatusSurfaceProps): React.JSX.Element;
-//# sourceMappingURL=StatusSurface.d.ts.map
+export declare function StatusSurface({ phase, callName, reason, errorCode, sync, theme, onRejoin, onHome, onRetry, onReportProblem, rejoinDisabled, retryPending }: StatusSurfaceProps): React.JSX.Element;

package/dist/components/chalk-ui/ChalkAlert.d.ts

@@ -4,4 +4,3 @@ export interface ChalkAlertProps extends HTMLAttributes<HTMLDivElement> {
     readonly tone?: ChalkTone;
 }
 export declare const ChalkAlert: import("react").ForwardRefExoticComponent<ChalkAlertProps & import("react").RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=ChalkAlert.d.ts.map

package/dist/components/chalk-ui/ChalkBackdrop.d.ts

@@ -4,4 +4,3 @@ export interface ChalkBackdropProps extends HTMLAttributes<HTMLDivElement> {
     readonly tone?: ChalkTone;
 }
 export declare const ChalkBackdrop: import("react").ForwardRefExoticComponent<ChalkBackdropProps & import("react").RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=ChalkBackdrop.d.ts.map

package/dist/components/chalk-ui/ChalkBadge.d.ts

@@ -8,4 +8,3 @@ export interface ChalkBadgeProps extends HTMLAttributes<HTMLSpanElement> {
     readonly showZero?: boolean;
 }
 export declare const ChalkBadge: import("react").ForwardRefExoticComponent<ChalkBadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
-//# sourceMappingURL=ChalkBadge.d.ts.map

package/dist/components/chalk-ui/ChalkButton.d.ts

@@ -6,4 +6,3 @@ export interface ChalkButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonEl
     readonly loading?: boolean;
 }
 export declare const ChalkButton: import("react").ForwardRefExoticComponent<ChalkButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
-//# sourceMappingURL=ChalkButton.d.ts.map

package/dist/components/chalk-ui/ChalkCopyButton.d.ts

@@ -4,4 +4,3 @@ export declare function ChalkCopyButton({ text, label, announcement, showLabel }
     readonly announcement?: string;
     readonly showLabel?: boolean;
 }): import("react").JSX.Element;
-//# sourceMappingURL=ChalkCopyButton.d.ts.map

package/dist/components/chalk-ui/ChalkDialogPanel.d.ts

@@ -4,4 +4,3 @@ export interface ChalkDialogPanelProps extends HTMLAttributes<HTMLDivElement> {
     readonly tone?: ChalkTone;
 }
 export declare const ChalkDialogPanel: import("react").ForwardRefExoticComponent<ChalkDialogPanelProps & import("react").RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=ChalkDialogPanel.d.ts.map

package/dist/components/chalk-ui/ChalkDivider.d.ts

@@ -4,4 +4,3 @@ export interface ChalkDividerProps extends HTMLAttributes<HTMLHRElement> {
     readonly tone?: ChalkTone;
 }
 export declare const ChalkDivider: import("react").ForwardRefExoticComponent<ChalkDividerProps & import("react").RefAttributes<HTMLHRElement>>;
-//# sourceMappingURL=ChalkDivider.d.ts.map

package/dist/components/chalk-ui/ChalkEmptyState.d.ts

@@ -6,4 +6,3 @@ export interface ChalkEmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement
     readonly tone?: ChalkTone;
 }
 export declare const ChalkEmptyState: import("react").ForwardRefExoticComponent<ChalkEmptyStateProps & import("react").RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=ChalkEmptyState.d.ts.map