@arbidocs/blocks 0.4.110 → 0.4.111

package/dist/calls/panels.d.ts

@@ -24,6 +24,17 @@ export declare function VoiceMeter({ level, muted, className, }: {
     muted?: boolean;
     className?: string;
 }): ReactElement;
+/**
+ * A person's name as the call shows people: the app's pill (`entity`, which says "(me)" itself),
+ * else initials and the name, with `youLabel` after my own. Every list of people in the call
+ * (participants, lobby, webinar audience, Q&A askers) names them through this one piece.
+ */
+export declare function CallPersonLabel({ name, entity, isLocal, youLabel, }: {
+    name: string;
+    entity?: ReactNode;
+    isLocal?: boolean;
+    youLabel?: string;
+}): ReactElement;
 /**
  * Who is in the call, always on show under the video in the call panel: a live speaker list (the
  * app orders it, talkers first), each row with the person's pill, voice meter, mic and camera

package/dist/calls/webinar/ChatPermissionSetting.d.ts

@@ -0,0 +1,18 @@
+/**
+ * "Who can chat: Panelists only | Everyone" — the moderators' setting, as a group of the call's
+ * More menu (`chatPermissionSection` for `MoreMenu`'s `groups`), so it lives with the other call
+ * settings rather than as a control of its own.
+ */
+import { type ReactElement } from 'react';
+import type { MoreMenuSection } from '../ControlBar';
+import type { MaybePromise, WebinarChatPermission } from './types';
+export interface ChatPermissionSettingProps {
+    value: WebinarChatPermission;
+    onChange(value: WebinarChatPermission): MaybePromise;
+    /** The app's change in flight (the menu may have closed and reopened since). */
+    pending?: boolean;
+}
+/** Menu content: a label and two radio items. Render it inside a `DropdownMenuContent`. */
+export declare function ChatPermissionSetting({ value, onChange, pending, }: ChatPermissionSettingProps): ReactElement;
+/** The setting as a `MoreMenu` group: `groups={[…, chatPermissionSection(props)]}`. */
+export declare function chatPermissionSection(props: ChatPermissionSettingProps): MoreMenuSection;

package/dist/calls/webinar/OnStageCheck.d.ts

@@ -0,0 +1,23 @@
+/**
+ * "You're on stage": a moderator promoted me, so before my microphone and camera go out I check
+ * them — the call's own `PreJoin` (preview, level meter, device pickers) in a dialog (a bottom
+ * sheet on a phone). Only the camera video is mirrored in the self-view; no text ever is.
+ */
+import type { ReactElement } from 'react';
+import { type JoinChoices, type MediaKind } from '../join-choices';
+import type { MaybePromise } from './types';
+export interface OnStageCheckProps {
+    open: boolean;
+    /** Go on stage with these devices. */
+    onJoinStage(choices: JoinChoices): MaybePromise;
+    /** Decline: step back down (also on Escape / close). */
+    onStayInAudience(): MaybePromise;
+    /** Busy from outside (the app's request in flight). */
+    busy?: boolean;
+    /** A failure to show above the buttons. */
+    error?: string | null;
+    /** Mirror my camera preview (default true; only the <video> flips). */
+    mirror?: boolean;
+    describeError?(err: unknown, kind: MediaKind): string;
+}
+export declare function OnStageCheck({ open, onJoinStage, onStayInAudience, busy, error, mirror, describeError, }: OnStageCheckProps): ReactElement;

package/dist/calls/webinar/QAPanel.d.ts

@@ -0,0 +1,56 @@
+/**
+ * The webinar's Q&A, the body of a `CallSidePanel` (the attendee viewer's side, the team's Q&A tab):
+ * Open / Answered (and, for the team, Dismissed) questions, most upvoted first; an upvote toggle on
+ * each (never on my own); status chips ("Answering live", "Answered") and a text answer under the
+ * question. The team answers live, answers in text (an inline composer), marks answered,
+ * dismisses or reopens. The ask box sits at the bottom, like a chat composer.
+ *
+ * Askers are named through the app's pill (`asker`); another attendee's question is "Attendee"
+ * (the server hides who asked it), so attendees never learn who else attends.
+ */
+import { type ReactElement } from 'react';
+import type { MaybePromise, QuestionStatus, WebinarQuestion } from './types';
+export type QAFilter = 'open' | 'answered' | 'dismissed';
+export interface QAPanelProps {
+    questions: WebinarQuestion[];
+    /** A team member (host, co-host, panelist): moderates, and sees dismissed questions. */
+    team?: boolean;
+    /** The ask box's limit (default 500 characters). */
+    maxLength?: number;
+    /** Hide the ask box (e.g. before the webinar is live). */
+    canAsk?: boolean;
+    /** Resolve to clear the box; reject to keep the text (the app reports the error). */
+    onAsk(body: string): MaybePromise;
+    /** `up` = add my vote, else take it back. */
+    onVote(question: WebinarQuestion, up: boolean): MaybePromise;
+    /** Team: Answer live (`answering`), Mark answered, Dismiss, Reopen (`open`). */
+    onStatusChange?(question: WebinarQuestion, status: QuestionStatus): MaybePromise;
+    /** Team: a text answer (the server marks the question answered). */
+    onAnswer?(question: WebinarQuestion, answer: string): MaybePromise;
+    /** Delete one of my own questions while it is still open. */
+    onDelete?(question: WebinarQuestion): MaybePromise;
+    /** The filter to start on (default Open). */
+    defaultFilter?: QAFilter;
+    /** "Now" for the asked times (tests); live by default. */
+    now?: Date;
+    className?: string;
+}
+/** Questions of a filter, in reading order: live first, then most upvoted, then oldest. */
+export declare function sortQuestions(questions: WebinarQuestion[], filter: QAFilter): WebinarQuestion[];
+/**
+ * A text box with a counter and a send button; Enter sends, Shift+Enter breaks the line. The ask
+ * box and the text answer here, and the webinar's live chat in the same side panel.
+ */
+export declare function PanelComposer({ placeholder, ariaLabel, sendLabel, maxLength, busy, onSend, onCancel, autoFocus, testId, }: {
+    placeholder: string;
+    ariaLabel: string;
+    sendLabel: string;
+    maxLength: number;
+    busy: boolean;
+    /** Resolves to whether it went (then the box clears). */
+    onSend(text: string): Promise<boolean>;
+    onCancel?(): void;
+    autoFocus?: boolean;
+    testId: string;
+}): ReactElement;
+export declare function QAPanel({ questions, team, maxLength, canAsk, onAsk, onVote, onStatusChange, onAnswer, onDelete, defaultFilter, now: fixedNow, className, }: QAPanelProps): ReactElement;

package/dist/calls/webinar/RaiseHandButton.d.ts

@@ -0,0 +1,14 @@
+/** Raise / lower my hand: one control-bar button, on (solid) while the hand is up. */
+import type { ReactElement } from 'react';
+import type { MaybePromise } from './types';
+export interface RaiseHandButtonProps {
+    raised: boolean;
+    /** Asked with the new state (`true` = raise). */
+    onToggle(raised: boolean): MaybePromise;
+    /** Busy from outside (the app's own request in flight). */
+    pending?: boolean;
+    /** Press-shortcut inside a `CallControlBar` (default H). */
+    shortcut?: string;
+    className?: string;
+}
+export declare function RaiseHandButton({ raised, onToggle, pending, shortcut, className, }: RaiseHandButtonProps): ReactElement;

package/dist/calls/webinar/WebinarAudiencePanel.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The moderators' audience view, the body of a `CallSidePanel` (its Audience tab): the raised
+ * hands, oldest first, each with Promote; then everyone in the room with their stage state, Promote
+ * or Move to audience. Only moderators get this; an attendee's UI never lists attendees.
+ */
+import { type ReactElement } from 'react';
+import type { MaybePromise, WebinarAttendee, WebinarHand } from './types';
+export interface WebinarAudiencePanelProps {
+    /** Raised hands (any order: shown oldest first). */
+    hands: WebinarHand[];
+    /** Everyone in the room, team included (the app's order). */
+    attendees: WebinarAttendee[];
+    /** Bring someone on stage. */
+    onPromote(id: string): MaybePromise;
+    /** Send someone on stage back to the audience (never offered for the host). */
+    onDemote(id: string): MaybePromise;
+    /** A search field appears above the attendees when there are more than this many (default 8). */
+    searchThreshold?: number;
+    /** "Now" for the raised times (tests); live by default. */
+    now?: Date;
+    className?: string;
+}
+export declare function WebinarAudiencePanel({ hands, attendees, onPromote, onDemote, searchThreshold, now: fixedNow, className, }: WebinarAudiencePanelProps): ReactElement;

package/dist/calls/webinar/WebinarViewer.d.ts

@@ -0,0 +1,39 @@
+/**
+ * The attendee's clean viewer: the stage (the app's `CallGrid` / `CallFocus` of the panelists),
+ * the live captions under it, a side slot (Q&A in a `CallSidePanel`) docked on a wide screen and
+ * over the stage on a narrow one, and a bottom bar with Raise hand, the side toggle and Leave.
+ * Audio-first, and no list of other attendees anywhere. (The team keeps the normal call UI.)
+ */
+import type { ReactElement, ReactNode, Ref } from 'react';
+import { type RaiseHandButtonProps } from './RaiseHandButton';
+export interface WebinarViewerProps {
+    /** The header (a `CallHeader` with the title and the live chip). */
+    header?: ReactNode;
+    /** The stage: the visible panelists' tiles. */
+    stage: ReactNode;
+    stageRef?: Ref<HTMLDivElement>;
+    /** Floating over the stage (connection state). */
+    stageOverlay?: ReactNode;
+    /** Under the stage: a `CaptionsStrip` (or the live transcript). */
+    captions?: ReactNode;
+    /** The side (a `CallSidePanel` with the `QAPanel`); omit while closed. */
+    side?: ReactNode;
+    /** The side's toggle in the bar (Q&A); omit for none. */
+    sideToggle?: {
+        open: boolean;
+        onToggle(): void;
+        label: string;
+        count?: number;
+    };
+    /** My raised hand. */
+    hand: RaiseHandButtonProps;
+    onLeave(): void;
+    /** The bar's left end (e.g. "Enable audio"). */
+    left?: ReactNode;
+    /** More centre controls after Raise hand (e.g. a captions switch). */
+    controls?: ReactNode;
+    /** Single-key shortcuts on (the viewer is on screen). */
+    shortcuts?: boolean;
+    className?: string;
+}
+export declare function WebinarViewer({ header, stage, stageRef, stageOverlay, captions, side, sideToggle, hand, onLeave, left, controls, shortcuts, className, }: WebinarViewerProps): ReactElement;

package/dist/calls/webinar/WebinarWaiting.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The attendee's holding screen: "Starting soon" before the host goes live (the app keeps polling
+ * and joins on its own), and "This webinar has ended" after. A `CallStateMessage`, so it reads like
+ * every other state of the call stage.
+ */
+import type { ReactElement, ReactNode } from 'react';
+export interface WebinarWaitingProps {
+    variant: 'waiting' | 'ended';
+    /** The webinar's name. */
+    title?: string | null;
+    /** When it is scheduled, already formatted by the app ("Today, 15:00"). */
+    when?: string | null;
+    /** The host as the app shows people (a pill): "Hosted by …". */
+    host?: ReactNode;
+    /** A way out (back to the app); omitted, no button. */
+    onLeave?(): void;
+    leaveLabel?: string;
+}
+export declare function WebinarWaiting({ variant, title, when, host, onLeave, leaveLabel, }: WebinarWaitingProps): ReactElement;

package/dist/calls/webinar/hooks.d.ts

@@ -0,0 +1,13 @@
+/** Small hooks of the webinar blocks. */
+import type { MaybePromise } from './types';
+/**
+ * Pending state for handlers that may return a promise: `run(key, fn)` marks `key` busy until the
+ * promise settles and resolves to whether it succeeded (a rejection is the app's to report; the
+ * block only stops spinning).
+ */
+export declare function usePending(): {
+    isPending(key: string): boolean;
+    run(key: string, fn: () => MaybePromise): Promise<boolean>;
+};
+/** The current time, refreshed every `ms` (relative times like "2 minutes ago"). */
+export declare function useNow(ms?: number, fixed?: Date): Date;

package/dist/calls/webinar/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Webinar blocks: a webinar is an ordinary call with roles, a stage of panelists, backstage → live,
+ * raised hands and Q&A. Presentational like the rest of `@arbidocs/blocks/calls`; names are the
+ * app's person pills (`entity` / `asker` / `host`).
+ */
+export type { MaybePromise, WebinarRole, WebinarChatPermission, QuestionStatus, WebinarHand, WebinarAttendee, WebinarQuestion, } from './types';
+export { WebinarWaiting, type WebinarWaitingProps } from './WebinarWaiting';
+export { BackstageBanner, WebinarLiveChip, WebinarLiveControl, WebinarEndConfirm, type WebinarLiveControlProps, } from './live';
+export { RaiseHandButton, type RaiseHandButtonProps } from './RaiseHandButton';
+export { WebinarAudiencePanel, type WebinarAudiencePanelProps } from './WebinarAudiencePanel';
+export { QAPanel, PanelComposer, sortQuestions, type QAPanelProps, type QAFilter } from './QAPanel';
+export { ChatPermissionSetting, chatPermissionSection, type ChatPermissionSettingProps, } from './ChatPermissionSetting';
+export { OnStageCheck, type OnStageCheckProps } from './OnStageCheck';
+export { WebinarViewer, type WebinarViewerProps } from './WebinarViewer';

package/dist/calls/webinar/live.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Backstage → live → ended, for the team. While backstage, `BackstageBanner` (under the header)
+ * says so and carries Go live for the moderators; once live, the header shows `WebinarLiveChip` and
+ * the control bar `WebinarLiveControl` (End webinar, confirmed). Each action appears once: Go live
+ * only in the banner, End only in the bar.
+ */
+import { type ReactElement } from 'react';
+import type { MaybePromise } from './types';
+/** "Live" in the header while the stage is open to the audience. */
+export declare function WebinarLiveChip({ compact, className, }: {
+    compact?: boolean;
+    className?: string;
+}): ReactElement;
+export interface WebinarLiveControlProps {
+    /** The stage is open to the audience. */
+    live: boolean;
+    /** Moderators only: opens the stage (shown while backstage). */
+    onGoLive?(): MaybePromise;
+    /** Moderators only: ends the webinar for everyone, after a confirmation (shown while live). */
+    onEnd?(): MaybePromise;
+    /** Icon only (a narrow bar). */
+    compact?: boolean;
+    className?: string;
+}
+/** Go live (backstage) or End webinar (live); nothing for someone who may do neither. */
+export declare function WebinarLiveControl({ live, onGoLive, onEnd, compact, className, }: WebinarLiveControlProps): ReactElement | null;
+/**
+ * "End the webinar?" — the one confirmation before ending it for everyone, wherever End is offered
+ * (`WebinarLiveControl`, or the Leave button's menu in the app's call bar).
+ */
+export declare function WebinarEndConfirm({ open, onOpenChange, onEnd, }: {
+    open: boolean;
+    onOpenChange(open: boolean): void;
+    onEnd(): MaybePromise;
+}): ReactElement;
+/**
+ * Under the header while backstage: the team knows the audience cannot see or hear them yet.
+ * Moderators get Go live here (`onGoLive`); other panelists read that the host will start it.
+ */
+export declare function BackstageBanner({ onGoLive, className, }: {
+    onGoLive?(): MaybePromise;
+    className?: string;
+}): ReactElement;

package/dist/calls/webinar/types.d.ts

@@ -0,0 +1,49 @@
+/** The shapes the webinar blocks render. The app maps its API (`/v1/calls/{call}/webinar…`) onto them. */
+import type { ReactNode } from 'react';
+/** A handler the block may await: while its promise is pending the control shows it is busy. */
+export type MaybePromise = void | Promise<unknown>;
+export type WebinarRole = 'host' | 'cohost' | 'panelist' | 'attendee';
+/** Who may send chat messages: the team only, or the audience too. */
+export type WebinarChatPermission = 'panelists' | 'everyone';
+export type QuestionStatus = 'open' | 'answering' | 'answered' | 'dismissed';
+/** A raised hand in the moderators' queue. */
+export interface WebinarHand {
+    id: string;
+    name: string;
+    /** ISO time the hand went up. */
+    raisedAt: string;
+    /** The person as the app shows people (a pill); else initials and `name`. */
+    entity?: ReactNode;
+}
+/** Someone in the room, as the moderators see the audience. */
+export interface WebinarAttendee {
+    id: string;
+    name: string;
+    role: WebinarRole;
+    /** On stage (visible, may publish). */
+    onStage: boolean;
+    handRaised: boolean;
+    /** The person as the app shows people (a pill); else initials and `name`. */
+    entity?: ReactNode;
+}
+/** A question of the webinar's Q&A (body and answer already decrypted by the app). */
+export interface WebinarQuestion {
+    id: string;
+    body: string;
+    status: QuestionStatus;
+    /** A text answer, shown under the question. */
+    answer?: string | null;
+    /** Who wrote the text answer (the app's pill). */
+    answeredBy?: ReactNode;
+    voteCount: number;
+    /** I have upvoted it. */
+    voted: boolean;
+    /** I asked it (I cannot upvote it; I may delete it while it is open). */
+    mine: boolean;
+    /** ISO time it was asked. */
+    createdAt: string;
+    /** The asker's name; `null` when hidden from me (another attendee's question): "Attendee". */
+    askerName: string | null;
+    /** The asker as the app shows people (a pill; it says "(me)" on mine). */
+    asker?: ReactNode;
+}