@q9labsai/chalk-react 5.1.0 → 5.2.0

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

@@ -1,6 +1,5 @@
 // src/components/stage/stage-layout.ts
 var WIDESCREEN = 16 / 9;
-var SLIM_STRIP_PX = 52;
 var MORE_TILE_ID = "stage:more";
 var DEFAULT_GRID_OPTIONS = { gap: 8, minTileWidth: 150, minTileHeight: 96, maxPerPage: Number.POSITIVE_INFINITY, minAspect: 0.8, maxAspect: 2 };
 var DEFAULT_SPOTLIGHT_OPTIONS = { gap: 8, stripRatio: 0.17, minStripHeight: 104, maxStripHeight: 150, stripAspect: WIDESCREEN };
@@ -56,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;
@@ -90,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 {
@@ -110,15 +148,17 @@ function fitSpotlight(box, primaryId, stripIds, options) {
       perPage: 1
     };
   }
+  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 ? SLIM_STRIP_PX : phone ? Math.round(box.height * 0.3) : clamp(box.height * options.stripRatio, options.minStripHeight, options.maxStripHeight);
+  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: slim ? SLIM_STRIP_PX : 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) }))]
@@ -182,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);
@@ -201,5 +247,7 @@ export {
   isContentItem,
   stabilizeOrder,
   choosePrimary,
+  speakingParticipantId,
+  floatingSpeakerId,
   gridOrder
 };

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

@@ -1,3 +1,4 @@
+import type { WhoCanDraw } from "./board-draw-policy";
 import { type BoardSurface, type IslandPlace } from "./board-model";
 export type BoardMenuProps = {
     readonly surface: BoardSurface;
@@ -7,9 +8,11 @@ export type BoardMenuProps = {
     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, onBring, onClear, onClose }: BoardMenuProps): import("react").JSX.Element;
+export declare function BoardMenu({ surface, onSurface, place, onPlace, onDownload, onCopy, whoCanDraw, onBring, onClear, onClose }: BoardMenuProps): 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-model.d.ts

@@ -1,4 +1,4 @@
-import { type ChalkWhiteboardView } from "@q9labsai/chalk-client";
+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";
@@ -15,6 +15,10 @@ 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;

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

@@ -1,7 +1 @@
-import type { ChalkWhiteboardView } from "@q9labsai/chalk-client";
-/** A bounded record of the latest applied version, not a history of received frames. */
-export declare class ViewVersions {
-    #private;
-    isNew(view: ChalkWhiteboardView): boolean;
-    remember(view: ChalkWhiteboardView): void;
-}
+export { ChalkWhiteboardViewVersions as ViewVersions } from "@q9labsai/chalk-client";

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;

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,5 +1,5 @@
 import type React from "react";
-import type { ErrorCode } from "@q9labsai/chalk-client";
+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 {
@@ -7,6 +7,7 @@ export interface StatusSurfaceProps {
     readonly callName?: string;
     readonly reason?: string;
     readonly errorCode?: ErrorCode;
+    readonly sync?: ClientFailure["sync"];
     readonly theme?: ChalkTheme;
     readonly onRejoin?: () => void;
     readonly onHome?: () => void;
@@ -16,4 +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, errorCode, theme, onRejoin, onHome, onRetry, onReportProblem, rejoinDisabled, retryPending }: StatusSurfaceProps): React.JSX.Element;
+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/ChalkSheet.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from "react";
 export interface ChalkSheetProps {
-    readonly variant?: "default" | "details" | "panel" | "ready";
+    readonly variant?: "default" | "details" | "panel" | "ready" | "stage";
     readonly open: boolean;
     readonly onOpenChange: (open: boolean) => void;
     readonly title: string;

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

@@ -1,6 +1,10 @@
 import { type ReactNode } from "react";
 export interface ChalkToastProps {
     readonly message: ReactNode;
+    /** Stable semantic identity for rich message content. Change it when the message changes. */
+    readonly announcementKey?: string;
+    /** Plain speech text for custom message components. Literal text and markup are read without mounting them. */
+    readonly announcementText?: string;
     readonly icon?: ReactNode;
     readonly type?: "info" | "success" | "warning" | "error";
     readonly duration?: number;
@@ -8,6 +12,8 @@ export interface ChalkToastProps {
         readonly label: string;
         readonly onClick: () => void;
     };
+    /** Enables live announcements. Pass false for an already-announced notice; a replacement message can enable the same mounted toast later. */
+    readonly announce?: boolean;
     readonly onDismiss: () => void;
 }
-export declare function ChalkToast({ message, type, duration, action, icon, onDismiss }: ChalkToastProps): import("react").JSX.Element;
+export declare function ChalkToast({ message, announcementKey, announcementText, type, duration, action, icon, announce, onDismiss }: ChalkToastProps): import("react").JSX.Element;

package/dist/components/control-bar/command-failure.d.ts

@@ -1,2 +1,106 @@
-import { type ClientFailure } from "@q9labsai/chalk-client";
+import { type ClientFailure, type MediaSource } from "@q9labsai/chalk-client";
+export type MediaCommandSource = MediaSource | "speaker";
+export type MediaCommandAction = "start" | "stop" | "select" | "test" | "request";
+type Operation = MediaCommandAction | "change";
+type Context = {
+    readonly source?: MediaCommandSource;
+    readonly recoverable: boolean;
+};
+type Copy = (context: Context) => string;
+type Rule = {
+    readonly copy: Readonly<Record<Operation, Copy>>;
+    readonly retry: boolean;
+};
 export declare function commandFailure(cause: unknown): ClientFailure;
+/** Every client code has a media-context policy. Non-media commands are preserved at the boundary below. */
+export declare const MEDIA_FAILURE_POLICY: {
+    "access.invalid": Rule;
+    "access.unavailable": Rule;
+    "chat.cursor_reset_required": Rule;
+    "chat.payload_invalid": Rule;
+    "client.internal_error": Rule;
+    "collaboration.unavailable": Rule;
+    "command.rate_limited": Rule;
+    "command.rejected": Rule;
+    "connection.invalid_state": {
+        copy: {
+            test: (context: Context) => string;
+            request: (context: Context) => string;
+            start: (context: Context) => string;
+            stop: (context: Context) => string;
+            select: (context: Context) => string;
+            change: (context: Context) => string;
+        };
+        retry: true;
+    };
+    "connection.join_cleanup_unconfirmed": Rule;
+    "connection.leave_unconfirmed": Rule;
+    "connection.media_recovery_exhausted": Rule;
+    "connection.media_start_failed": Rule;
+    "connection.state_digest_recovery_failed": Rule;
+    "connection.sync_recovery_exhausted": Rule;
+    "connection.sync_start_failed": Rule;
+    "connection.sync_hello_timeout": Rule;
+    "environment.unsupported": {
+        copy: {
+            stop: (context: Context) => string;
+            start: () => string;
+            request: () => string;
+            select: (context: Context) => "Media capture is unavailable in this environment. Use a supported browser over HTTPS or the native app." | "This browser can’t change your speaker. Use your system sound settings to choose an output device.";
+            test: () => string;
+            change: (context: Context) => "Media capture is unavailable in this environment. Use a supported browser over HTTPS or the native app." | "This browser can’t change your speaker. Use your system sound settings to choose an output device.";
+        };
+        retry: false;
+    };
+    "episode.ended": {
+        copy: {
+            start: () => string;
+            stop: () => string;
+            select: () => string;
+            test: () => string;
+            request: () => string;
+            change: () => string;
+        };
+        retry: false;
+    };
+    "media.permission_denied": Rule;
+    "media.device_not_found": Rule;
+    "media.device_busy": {
+        copy: Readonly<Record<Operation, Copy>>;
+        retry: true;
+    };
+    "media.device_constraint_invalid": Rule;
+    "media.capture_failed": {
+        copy: {
+            stop: (context: Context) => string;
+            select: (context: Context) => string;
+            test: (context: Context) => string;
+            start: Copy;
+            request: Copy;
+            change: (context: Context) => string;
+        };
+        retry: true;
+    };
+    "media.request_invalid": {
+        copy: {
+            test: () => string;
+            request: () => string;
+            select: (context: Context) => string;
+            start: () => string;
+            stop: () => string;
+            change: () => string;
+        };
+        retry: false;
+    };
+    "media.timeout": Rule;
+    "offline.discarded": Rule;
+    "participant.invalid": Rule;
+    "reaction.invalid": Rule;
+    "whiteboard.unavailable": Rule;
+};
+export declare function commandFailurePresentation(failure: ClientFailure, source?: MediaCommandSource, operation?: Operation, hasExactRetry?: boolean): {
+    readonly message: string;
+    readonly retry: boolean;
+};
+export declare function commandFailureMessage(failure: ClientFailure, source?: MediaCommandSource, operation?: MediaCommandAction): string;
+export {};

package/dist/components/control-bar/control-bar-behavior.d.ts

@@ -1,4 +1,5 @@
 import type React from "react";
+import { type MediaCommandSource, type MediaCommandAction } from "./command-failure";
 import type { CameraPreview, ClientFailure, MediaSource, ScreenShareOptions } from "@q9labsai/chalk-client";
 import { type ParticipantGradientPreference } from "../../utils/colorGenerator";
 export interface MediaDevice {
@@ -93,7 +94,8 @@ export interface ControlBarProps {
     /** Set for hosts: the leave button opens a menu with Leave call and End call for everyone. */
     readonly onEndForEveryone?: () => void;
     readonly onLeft?: () => void;
-    readonly onCommandError?: (failure: ClientFailure | null, source?: MediaSource) => void;
+    /** The second argument retains the published MediaSource contract; the third also identifies speaker commands. */
+    readonly onCommandError?: (failure: ClientFailure | null, source?: MediaSource, commandSource?: MediaCommandSource, action?: MediaCommandAction, retryCommand?: () => Promise<unknown>) => void;
     readonly participantColorSeed?: string;
     readonly participantGradientPreference?: ParticipantGradientPreference;
     readonly className?: string;
@@ -124,6 +126,8 @@ export declare function useControlBarSurfaceBehavior({ density, buttons, audioIn
 interface ConnectedControlBarBehavior {
     readonly surfaceProps: ControlBarSurfaceProps;
     readonly commandError: ClientFailure | null;
+    readonly commandSource?: MediaCommandSource;
+    readonly commandAction?: MediaCommandAction;
 }
 export declare function useConnectedControlBarBehavior(props: ControlBarProps): ConnectedControlBarBehavior;
 export {};

package/dist/components/index.js

@@ -5,7 +5,7 @@ import {
   RecordingHistoryPanel,
   RecordingSpaceView,
   RecordingWhiteboardView
-} from "../chunk-QDEKMRH2.js";
+} from "../chunk-CYC2G42K.js";
 import {
   loadRecordingWhiteboardFiles,
   parseRecordingWhiteboardStateV1,
@@ -45,10 +45,10 @@ import {
   ReactionsOverlay,
   ScreenShareView,
   Stage
-} from "../chunk-XOHNIYSR.js";
+} from "../chunk-G62BKRNX.js";
 import {
   buildStageItems
-} from "../chunk-ZFWIMKUC.js";
+} from "../chunk-HWQLW4JR.js";
 import "../chunk-4U7QZC72.js";
 export {
   AdmissionPanel,

package/dist/components/offline-actions/OfflineActions.d.ts

@@ -3,6 +3,7 @@ import React from "react";
 export declare const RECONNECTING_GRACE_MS = 2000;
 export declare function offlineNoticeText(pendingCount: number, online: boolean): string;
 /** Keep queued actions automatic while preserving the reconnecting notice. */
-export declare function OfflineActions({ reconnecting: requestedReconnecting }?: {
+export declare function OfflineActions({ reconnecting: requestedReconnecting, hasNotice }?: {
     readonly reconnecting?: boolean;
+    readonly hasNotice?: boolean;
 }): React.JSX.Element | null;

package/dist/components/space-header/CallDetails.d.ts

@@ -1,13 +1,15 @@
 import { type RefObject } from "react";
 import type { SpaceHeaderProps } from "./space-header-contract";
 export declare const CALL_SHORTCUTS: readonly [readonly ["Mute or unmute", "⌘ D"], readonly ["Turn camera on or off", "⌘ E"], readonly ["Raise or lower hand", "⌃ ⌘ H"], readonly ["Open or close chat", "⌃ ⌘ C"], readonly ["Open or close people", "⌃ ⌘ P"], readonly ["Switch layout", "⌃ ⌘ L"], readonly ["Talk while muted", "Hold Space"], readonly ["Show shortcuts", "?"], readonly ["Close a menu or panel", "Esc"]];
-export declare function CallDialog({ kind, open, onClose, onReportProblem, diagnostics, returnFocus, }: {
+export declare function CallDialog({ kind, open, onClose, onReportProblem, diagnostics, returnFocus, focusScope, unavailableReason, }: {
     readonly kind: "shortcuts" | "report";
     readonly open: boolean;
     readonly onClose: () => void;
     readonly onReportProblem?: SpaceHeaderProps["onReportProblem"];
     readonly diagnostics: string;
-    readonly returnFocus: RefObject<HTMLButtonElement | null>;
+    readonly returnFocus?: RefObject<HTMLButtonElement | null>;
+    readonly focusScope: RefObject<HTMLElement | null>;
+    readonly unavailableReason?: string;
 }): import("react").JSX.Element;
 export declare function CallDetails({ shareUrl, spaceName, onClose, diagnostics, colorScheme, onColorSchemeChange, sounds, onSoundsChange, onDialog, onReportProblem, }: Pick<SpaceHeaderProps, "spaceName" | "shareUrl" | "diagnostics" | "colorScheme" | "onColorSchemeChange" | "onReportProblem"> & {
     readonly onClose: () => void;

package/dist/components/space-header/space-header-contract.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 export interface SpaceHeaderProps {
     spaceName: string;
     people?: readonly {
@@ -18,6 +19,8 @@ export interface SpaceHeaderProps {
         readonly description: string;
         readonly diagnostics?: string;
     }) => void | Promise<void>;
+    reportUnavailableReason?: string;
+    onOpenReportProblem?: () => void;
     shortcuts?: {
         readonly isMuted?: boolean;
         readonly onToggleMute?: () => void;
@@ -36,6 +39,8 @@ export interface SpaceHeaderProps {
     isTranscribing?: boolean;
     layout?: "grid" | "focus";
     onLayoutChange?: (layout: "grid" | "focus") => void;
+    /** A control for notices that have no room on the stage, placed at the header's end, before the people button. */
+    notices?: ReactNode;
     className?: string;
 }
 export declare function formatDuration(seconds: number): string;

package/dist/components/space-view/SpaceView.d.ts

@@ -1,4 +1,5 @@
-import { type ChalkWhiteboardView } from "@q9labsai/chalk-client";
+import { type MediaCommandSource, type MediaCommandAction } from "../control-bar/command-failure";
+import { type ChalkWhiteboardView, type ClientFailure } from "@q9labsai/chalk-client";
 import React from "react";
 import type { ChatUploadFile } from "@q9labsai/chalk-client";
 import { type ReconnectingOverlayProps } from "../reconnecting-overlay/ReconnectingOverlay";
@@ -30,6 +31,8 @@ export interface SpaceViewProps {
     readonly callLinkOpen?: boolean;
     readonly onCallLinkToggle?: () => void;
     readonly onReportProblem?: import("../space-header/SpaceHeader").SpaceHeaderProps["onReportProblem"];
+    readonly reportUnavailableReason?: string;
+    readonly onOpenReportProblem?: () => void;
     readonly inviteLink?: string;
     readonly pickChatFiles?: () => Promise<readonly ChatUploadFile[]>;
     readonly stageBackground?: boolean;
@@ -39,7 +42,9 @@ export interface SpaceViewProps {
     readonly initialPanel?: SpacePanel | null;
     readonly features?: SpaceViewFeatures;
     readonly generatedAvatars?: boolean;
-    readonly commandError?: string;
+    readonly commandError?: string | ClientFailure;
+    readonly commandSource?: MediaCommandSource;
+    readonly commandAction?: MediaCommandAction;
     readonly onDismissCommandError?: () => void;
     readonly onToggleWhiteboard?: () => void;
     readonly whiteboard?: SpaceViewWhiteboard;
@@ -51,4 +56,4 @@ export interface SpaceViewProps {
     readonly onEndEpisode?: () => void | Promise<void>;
     readonly className?: string;
 }
-export declare function SpaceView({ colorScheme, onColorSchemeChange, spaceName, shareUrl, callLinkOpen, onCallLinkToggle, onReportProblem, inviteLink, pickChatFiles, stageBackground, layout: controlledLayout, onLayoutChange, initialPanel, features, generatedAvatars, commandError: externalCommandError, onDismissCommandError, onToggleWhiteboard, whiteboard, reconnecting, overlay, onLeft, onEndEpisode, className, }: SpaceViewProps): React.JSX.Element;
+export declare function SpaceView({ colorScheme, onColorSchemeChange, spaceName, shareUrl, callLinkOpen, onCallLinkToggle, onReportProblem, reportUnavailableReason, onOpenReportProblem, inviteLink, pickChatFiles, stageBackground, layout: controlledLayout, onLayoutChange, initialPanel, features, generatedAvatars, commandError: externalCommandError, commandSource: externalCommandSource, commandAction: externalCommandAction, onDismissCommandError, onToggleWhiteboard, whiteboard, reconnecting, overlay, onLeft, onEndEpisode, className, }: SpaceViewProps): React.JSX.Element;

package/dist/components/stage/Stage.d.ts

@@ -24,7 +24,7 @@ export interface StageProps {
     readonly followingId?: string | null;
     readonly onFollowChange?: (id: string) => void;
     readonly clickAction?: "pin" | "follow";
-    /** Upper bound of visible tiles; the rest fold into a +N People tile. */
+    /** Upper bound of grid tiles, or secondary tiles in spotlight; overflow includes shared content. */
     readonly maxPerPage?: number;
     /** Tiles narrower than this fold the rest into overflow. */
     readonly minTileWidth?: number;

package/dist/components/stage/stage-items.d.ts

@@ -28,5 +28,9 @@ export interface PrimaryContext {
 }
 /** A pin wins; otherwise the first live share, board, then active speaker leads Spotlight. */
 export declare function choosePrimary(items: readonly StageItem[], context: PrimaryContext): StageItem | null;
+/** Who is speaking now: the active speaker before anyone else speaking. */
+export declare function speakingParticipantId(items: readonly StageItem[], accept?: (participant: Participant) => boolean): string | undefined;
+/** The remote person whose face leads the floating column: whoever is speaking now, else the last remote speaker. */
+export declare function floatingSpeakerId(items: readonly StageItem[], lastRemoteSpeakerId: string | null): string | null;
 /** Grid order: pinned item first, everything else in stable order. */
 export declare function gridOrder(items: readonly StageItem[], pinnedId: string | null): StageItem[];

package/dist/components/stage/stage-layout.d.ts

@@ -3,7 +3,7 @@ export interface StageBox {
     readonly width: number;
     readonly height: number;
 }
-export type StageRole = "primary" | "strip" | "grid";
+export type StageRole = "primary" | "strip" | "grid" | "float";
 export interface StageFrame {
     readonly id: string;
     readonly role: StageRole;
@@ -37,8 +37,12 @@ export interface SpotlightFitOptions {
     readonly content?: boolean;
     readonly wideIds?: readonly string[];
     readonly maxPerPage?: number;
-    /** On a phone the board keeps the people to one slim row, so the drawing gets the screen. */
+    /** @deprecated Prefer floatingPhonePeople for boards. Preserves the 52px phone strip. */
     readonly slimPhoneStrip?: boolean;
+    /** On a phone the board keeps the whole stage, and people float in a short column at its right edge. */
+    readonly floatingPhonePeople?: boolean;
+    readonly speakerId?: string | null;
+    readonly localId?: string | null;
 }
 export declare const WIDESCREEN: number;
 export declare const MORE_TILE_ID = "stage:more";

package/dist/components/toast-stack/CallEventIcon.d.ts

@@ -1,4 +1,4 @@
 export declare function CallEventIcon({ kind, error }: {
-    readonly kind: "microphone" | "microphone-on" | "camera" | "screen" | "recording" | "hand" | "host";
+    readonly kind: "speaker" | "microphone" | "microphone-on" | "camera" | "screen" | "recording" | "hand" | "host";
     readonly error?: boolean;
 }): import("react").JSX.Element;

package/dist/components/toast-stack/NoticeButton.d.ts

@@ -0,0 +1,7 @@
+import type { Toast } from "./ToastStack";
+export interface NoticeButtonProps {
+    readonly toasts: readonly Toast[];
+    readonly onDismiss: (id: string) => void;
+}
+/** The header's way into notices that have no room on the stage, such as on a short screen with the board's tools open. */
+export declare function NoticeButton({ toasts, onDismiss }: NoticeButtonProps): import("react").JSX.Element | null;

package/dist/components/toast-stack/ToastStack.d.ts

@@ -1,5 +1,5 @@
 import { type ChalkToastProps } from "../chalk-ui/ChalkToast";
-export interface Toast extends Omit<ChalkToastProps, "onDismiss"> {
+export interface Toast extends Omit<ChalkToastProps, "onDismiss" | "announce"> {
     readonly id: string;
 }
 export interface ToastStackProps {
@@ -7,5 +7,16 @@ export interface ToastStackProps {
     readonly onDismiss: (id: string) => void;
     readonly maxVisible?: number;
     readonly className?: string;
+    /**
+     * Called with the ids of the notices the stage has no room for, so the host can offer them elsewhere, such as from the header.
+     * With it, a call shorter than `FOLD_BELOW_PX` folds every notice. Taller calls fold notices past `maxVisible` or outside the available band, announcing each folded message once.
+     */
+    readonly onFold?: (folded: readonly string[]) => void;
 }
-export declare const ToastStack: import("react").MemoExoticComponent<({ toasts, onDismiss, maxVisible, className }: ToastStackProps) => import("react").JSX.Element>;
+/**
+ * Calls shorter than this fold every notice. It is the height the mockup's three-notice stack needs at its tallest, on a phone with
+ * the board open: 108px for the header and the board's menu, an 8px gap, three camera errors wrapped to three lines (79px each, with
+ * 8px gaps), and the 242px the open drawing tools lift notices by, 611px in all.
+ */
+export declare const FOLD_BELOW_PX = 620;
+export declare const ToastStack: import("react").MemoExoticComponent<({ toasts, onDismiss, maxVisible, className, onFold }: ToastStackProps) => import("react").JSX.Element>;

package/dist/components/toast-stack/call-events.d.ts

@@ -1,5 +1,6 @@
+import { type MediaCommandSource, type MediaCommandAction } from "../control-bar/command-failure";
 import type { ClientFailure, SpaceSnapshot } from "@q9labsai/chalk-client";
 import type { Toast } from "./ToastStack";
-export declare function mediaFailureToast(failure: ClientFailure | null, source?: "microphone" | "camera" | "screen"): Omit<Toast, "id"> | null;
+export declare function mediaFailureToast(failure: ClientFailure | null, source?: MediaCommandSource, action?: MediaCommandAction, onRetry?: () => void): Omit<Toast, "id"> | null;
 /** Snapshot changes, not initial history, are events for the person already in the call. */
 export declare function callEventToasts(previous: SpaceSnapshot, next: SpaceSnapshot): Omit<Toast, "id">[];

package/dist/components/toast-stack/notice-announcement.d.ts

@@ -0,0 +1,4 @@
+import type { ChalkToastProps } from "../chalk-ui/ChalkToast";
+export declare function noticeAnnouncement(toast: Pick<ChalkToastProps, "message" | "announcementText">): string;
+/** Semantic speech/lifetime revision, independent of JSX and layout chrome. */
+export declare function noticeIdentity(toast: Pick<ChalkToastProps, "message" | "announcementText" | "announcementKey" | "type">): string;

package/dist/components/toast-stack/toast-layout-snapshot.d.ts

@@ -0,0 +1,4 @@
+/** A layout-only DOM snapshot: never instantiate React callers, custom elements, or media resources. */
+export declare function captureToastLayout(toast: HTMLElement): HTMLDivElement;
+/** Reflow cached markup at the current band's width without mounting the folded caller tree. */
+export declare function measureToastLayout(stack: HTMLElement, snapshot: HTMLDivElement): number;

package/dist/components/toast-stack/useToastCapacity.d.ts

@@ -0,0 +1,7 @@
+import { type RefObject } from "react";
+import type { Toast } from "./ToastStack";
+/** Remember measured sizes when notices fold: resizing must not remount them to measure again. */
+export declare function useToastCapacity(stack: RefObject<HTMLDivElement | null>, candidates: readonly Toast[], enabled: boolean, ownedIds: readonly string[]): {
+    readonly count: number;
+    readonly ready: boolean;
+};

package/dist/headless.js

@@ -13,7 +13,7 @@ import {
   fitSpotlight,
   gridOrder,
   screenShareItemId
-} from "./chunk-ZFWIMKUC.js";
+} from "./chunk-HWQLW4JR.js";
 export {
   DEFAULT_GRID_OPTIONS,
   DEFAULT_SPOTLIGHT_OPTIONS,