@arbidocs/blocks 0.4.109 → 0.4.111

package/dist/calls/layout.d.ts

@@ -0,0 +1,106 @@
+/**
+ * Pure layout helpers for the call stage: the adaptive tile grid, the per-speaker caption accent,
+ * the picture-in-picture corner and the elapsed-time label. No React, no LiveKit: unit-tested on
+ * their own.
+ */
+/** Tiles are 16:9, like the cameras they show. */
+export declare const TILE_ASPECT: number;
+/** How long a status notice ("Recording — started by X") stays spelled out before it folds. */
+export declare const NOTICE_MS = 6000;
+/** How long a caption stays on screen. */
+export declare const CAPTION_TTL_MS = 8000;
+/** Caption lines shown at once (two lines, the newest at the bottom). */
+export declare const CAPTION_LINES = 2;
+/** Tiles shown in the grid before the rest fold into a "+N" tile. */
+export declare const MAX_GRID_TILES = 9;
+export interface GridLayout {
+    cols: number;
+    rows: number;
+    /** Tiles per row, top to bottom (a short last row is centred: 3 → [2, 1]). */
+    rowCounts: number[];
+    tileWidth: number;
+    tileHeight: number;
+    /** The cell a tile fills when the grid fills the whole stage (the layout's rows × columns). */
+    cellWidth: number;
+    cellHeight: number;
+}
+/**
+ * The grid that gives `count` tiles of a fixed aspect the largest size inside `width × height`
+ * with `gap` between them, preferring a row-first layout when it is nearly as large.
+ */
+export declare function gridLayout(count: number, width: number, height: number, gap?: number, aspect?: number): GridLayout;
+/** Spread `count` tiles over rows of at most `cols`, the fuller rows first: 5 in 3 → [3, 2]. */
+export declare function rowCounts(count: number, cols: number): number[];
+/** What the grid shows: up to {@link MAX_GRID_TILES}; past that, one slot becomes "+N more". */
+export declare function gridSlots<T>(items: T[], max?: number): {
+    shown: T[];
+    hidden: number;
+};
+/**
+ * Speaker accents for captions: semantic text tokens that meet AA contrast on the muted surface
+ * in both themes. The same identity always gets the same colour.
+ */
+export declare const SPEAKER_ACCENTS: readonly ["text-blue-text-strong", "text-purple-text-strong", "text-green-text-strong", "text-yellow-text-strong", "text-red-text-strong"];
+export declare function speakerAccent(identity: string): (typeof SPEAKER_ACCENTS)[number];
+/** The same speaker's colour as a border (the live transcript line). */
+export declare const SPEAKER_BORDERS: readonly ["border-blue-text-strong", "border-purple-text-strong", "border-green-text-strong", "border-yellow-text-strong", "border-red-text-strong"];
+export declare function speakerBorder(identity: string): (typeof SPEAKER_BORDERS)[number];
+/** The speaker's colour as an inset ring (the line being spoken). */
+export declare const SPEAKER_RINGS: readonly ["ring-blue-text-strong/40", "ring-purple-text-strong/40", "ring-green-text-strong/40", "ring-yellow-text-strong/40", "ring-red-text-strong/40"];
+export declare function speakerRing(identity: string): (typeof SPEAKER_RINGS)[number];
+/** The speaker's colour as a fill (the "is speaking" dots). */
+export declare const SPEAKER_DOTS: readonly ["bg-blue-text-strong", "bg-purple-text-strong", "bg-green-text-strong", "bg-yellow-text-strong", "bg-red-text-strong"];
+export declare function speakerDot(identity: string): (typeof SPEAKER_DOTS)[number];
+export type PipCorner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/** The viewport corner nearest to a point (where a dragged picture-in-picture card settles). */
+export declare function nearestCorner(x: number, y: number, width: number, height: number): PipCorner;
+/** `m:ss`, or `h:mm:ss` past an hour. */
+export declare function formatElapsed(ms: number): string;
+/** Up to two initials for a camera-off tile: "Alice Morgan" → "AM", "usr-1a2b" → "U". */
+export declare function initialsOf(name: string): string;
+/** Who has the spotlight (speaker view), and who is waiting to take it. */
+export interface SpotlightState {
+    id: string | null;
+    /** A louder voice that must stay dominant for `holdMs` before it takes over. */
+    candidate: string | null;
+    since: number;
+}
+export declare const INITIAL_SPOTLIGHT: SpotlightState;
+/** A voice at or above this level (0..1) counts as speaking. */
+export declare const SPEAKING_LEVEL = 0.08;
+/**
+ * The speaker view's spotlight, with hysteresis: a new voice takes the spotlight only after it has
+ * dominated (`margin` × louder than the current one, above `threshold`) for `holdMs`, so a cough
+ * does not flick the view; while several talk at once and nobody dominates, it stays put. With
+ * nobody in the spotlight yet, the first voice takes it at once. `exclude` (my own identity) never
+ * takes the spotlight: nobody needs to watch themselves large (Meet / Zoom behaviour).
+ */
+export declare function nextSpotlight(state: SpotlightState, levels: Record<string, number>, now: number, { threshold, holdMs, margin, exclude }?: {
+    threshold?: number | undefined;
+    holdMs?: number | undefined;
+    margin?: number | undefined;
+    exclude?: readonly string[] | undefined;
+}): SpotlightState;
+/**
+ * Who fills the speaker view's large slot: the spotlight if it is someone else in the call, else
+ * the first other person, else me (alone in the call). Never me while anyone else is there.
+ */
+export declare function pickSpotlight(people: readonly {
+    id: string;
+    local: boolean;
+}[], spotlightId: string | null): string | undefined;
+/**
+ * The speaker view's large tile: the biggest 16:9 box that fits, leaving room for the filmstrip
+ * (below it on a narrow stage — a row of three 16:9 thumbnails per line — or a 15rem column beside
+ * it). It never takes a portrait shape: spare height stays blank under the filmstrip.
+ */
+export declare function spotlightBox(width: number, height: number, others: number, narrow: boolean, gap?: number, aspect?: number): {
+    width: number;
+    height: number;
+};
+/**
+ * How tall the call stage's tiles are, for a stage `width` wide and at most `maxHeight` tall:
+ * speaker view (`focus`: the large 16:9 tile, plus the filmstrip under it on a narrow stage) or
+ * gallery (`grid`). The panel gives the rest of its height to the participant list.
+ */
+export declare function stageContentHeight(view: 'focus' | 'grid', width: number, maxHeight: number, count: number, gap?: number, aspect?: number): number;

package/dist/calls/panels.d.ts

@@ -0,0 +1,66 @@
+/**
+ * The call panel's participant list and the lobby requests. Presentational: the app supplies the people
+ * and the actions. (Chat happens in the call's conversation, beside the panel.)
+ */
+import { type ReactElement, type ReactNode } from 'react';
+export interface CallPerson {
+    id: string;
+    name: string;
+    isLocal: boolean;
+    micMuted?: boolean;
+    /** Publishing an unmuted camera (the host may turn it off). */
+    cameraOn?: boolean;
+    /** Talking now, and how loud (0..1): the live speaker list. */
+    speaking?: boolean;
+    level?: number;
+    /** Extra state after the name (e.g. "Presenting"). */
+    note?: ReactNode;
+    /** The person as the app shows people (a pill); else initials and `name`. */
+    entity?: ReactNode;
+}
+/** A small live voice meter: five bars lit by level; "muted" when the mic is off. */
+export declare function VoiceMeter({ level, muted, className, }: {
+    level: number;
+    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
+ * state, and — for the host — mute / ask to mute / remove in its "…". Scrolls when long. In a
+ * short panel (`compact`) it folds to one strip — who is talking, and "Show all (N)".
+ */
+export declare function CallParticipants({ people, canRemove, removingId, onRemove, onAskToMute, onMute, compact, className, }: {
+    people: CallPerson[];
+    canRemove: boolean;
+    removingId?: string | null;
+    onRemove(person: CallPerson): void;
+    /** Shown for others whose mic is on (the host). */
+    onAskToMute?(person: CallPerson): void;
+    /** The host's force-mute of a mic (`audio`, shown while it is on) or a camera (`video`, while on). */
+    onMute?(person: CallPerson, track: 'audio' | 'video'): void;
+    compact?: boolean;
+    className?: string;
+}): ReactElement;
+export interface LobbyRequest {
+    id: string;
+    name: string;
+    /** The person as the app shows people (a pill); else `name`. */
+    entity?: ReactNode;
+}
+/** People asking to join, as cards over the stage's top-left corner. */
+export declare function LobbyRequests({ requests, onDecide, }: {
+    requests: LobbyRequest[];
+    onDecide(id: string, admit: boolean): void;
+}): ReactElement | null;

package/dist/calls/status.d.ts

@@ -0,0 +1,69 @@
+/**
+ * The call's status, each shown once in the header (or on the minimised card): recording,
+ * transcription and encryption chips, and the live captions strip below the tiles.
+ *
+ * Recording and transcription chips first spell out who started them ("Recording (Audio) —
+ * started by Ada"), then fold to a short label after {@link NOTICE_MS}; the full sentence stays
+ * available to screen readers and as the tooltip.
+ */
+import { type ReactElement, type ReactNode } from 'react';
+/** "Recording" with a pulsing dot. */
+export declare function RecordingStatusChip({ sentence, short, compact, announce, onAnnounced, className, ...rest }: {
+    /** Spell the sentence out first (false once it has been, e.g. after a re-mount). */
+    announce?: boolean;
+    onAnnounced?(): void;
+    /** e.g. "Recording (Audio + video) — started by you". */
+    sentence: string;
+    short?: string;
+    /** Dot only once folded (a narrow header, the minimised card). */
+    compact?: boolean;
+    className?: string;
+} & Omit<React.HTMLAttributes<HTMLSpanElement>, 'title'>): ReactElement;
+/** "Transcribing", with my own "stop sending my voice" switch in it. */
+export declare function TranscriptionStatusChip({ sentence, announce, onAnnounced, short, detail, muted, onMutedChange, muteLabel, unmuteLabel, compact, className, ...rest }: {
+    /** e.g. "Transcription on — started by Ada". */
+    sentence: string;
+    announce?: boolean;
+    onAnnounced?(): void;
+    short?: string;
+    /** Tooltip after the sentence (what transcription does). */
+    detail?: string;
+    muted: boolean;
+    onMutedChange(muted: boolean): void;
+    muteLabel: string;
+    unmuteLabel: string;
+    compact?: boolean;
+    className?: string;
+} & Omit<React.HTMLAttributes<HTMLSpanElement>, 'title'>): ReactElement;
+/** Whether the media is end-to-end encrypted. */
+export declare function EncryptionStatusChip({ state, compact, labels, }: {
+    state: 'on' | 'pending' | 'off';
+    compact?: boolean;
+    labels?: {
+        on: string;
+        pending: string;
+        off: string;
+        onTitle: string;
+        offTitle: string;
+    };
+}): ReactElement;
+/** One caption: a speaker's latest segment. */
+export interface CaptionEntry {
+    id: string;
+    speakerId: string;
+    name: string;
+    text: string;
+    /** Local receipt time, ms (drives the fade). */
+    receivedAt: number;
+}
+/**
+ * Live captions in a strip below the tiles (never over a face): at most two lines, the newest at
+ * the bottom, each speaker's name in their own accent. With `reserve` the strip keeps its height
+ * while empty, so the tiles do not jump each time someone starts or stops talking.
+ */
+export declare function CaptionsStrip({ captions, reserve, waitingText, className, }: {
+    captions: CaptionEntry[];
+    reserve?: boolean;
+    waitingText?: ReactNode;
+    className?: string;
+}): ReactElement | null;

package/dist/calls/tiles.d.ts

@@ -0,0 +1,59 @@
+/**
+ * The call stage's tiles: one participant tile (with a voice-level ring, so it is plain who is
+ * talking), the gallery grid (fills the stage: 1, 2 side by side, 2 + 1, 2 × 2, 3 + 2, …), and the
+ * spotlight layout — the speaker (or a shared screen) large, everyone else in a filmstrip.
+ *
+ * Media-library free: the app hands each tile its `<video>` (or nothing, for initials) and its
+ * state. Extra props (data attributes the app's recorder reads, say) land on the tile's root.
+ * Styles: `@arbidocs/blocks/calls.css`.
+ */
+import { type HTMLAttributes, type ReactElement, type ReactNode } from 'react';
+export interface CallTileProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /**
+     * The name, once, at the bottom left: a node (the app's person pill, say), or a string shown in
+     * a small dark chip.
+     */
+    name: ReactNode;
+    /** Shown large while there is no video (camera off). */
+    initials: string;
+    /** The `<video>` element; omit while the camera is off. */
+    video?: ReactNode;
+    source?: 'camera' | 'screen';
+    /** My own tile: the name says "(me)". */
+    local?: boolean;
+    /** Mirror the video (my own camera, as a selfie). Only the <video> flips; labels never do. */
+    mirror?: boolean;
+    /** Talking now: a ring (thicker with `level`) and a sound icon by the name — never colour alone. */
+    speaking?: boolean;
+    /** Voice level 0..1, updated fast (~60 ms): drives the ring's size. */
+    level?: number;
+    micMuted?: boolean;
+    poorConnection?: boolean;
+    /** Small tiles (filmstrip, picture-in-picture) use a smaller avatar. */
+    size?: 'normal' | 'small';
+    /** Text after my own name when `name` is a string (a pill says "(me)" itself). */
+    youLabel?: string;
+}
+/** One participant (or screen-share) tile. */
+export declare const CallTile: import("react").ForwardRefExoticComponent<CallTileProps & import("react").RefAttributes<HTMLDivElement>>;
+/** The adaptive grid. Tiles keep 16:9 and the largest size the stage allows. */
+export declare function CallGrid<T>({ items, getKey, renderTile, moreLabel, className, }: {
+    items: T[];
+    getKey(item: T): string;
+    /** The tile for one item; it fills a box the grid sizes. */
+    renderTile(item: T): ReactElement;
+    moreLabel?(hidden: number): string;
+    className?: string;
+}): ReactElement;
+/**
+ * Spotlight: one tile large (the speaker, or a shared screen), everyone else in a filmstrip
+ * beside it — below it on a narrow stage such as the docked call panel.
+ */
+export declare function CallFocus<T>({ focus, others, getKey, renderTile, className, testId, }: {
+    focus: T;
+    others: T[];
+    getKey(item: T): string;
+    renderTile(item: T, size: 'normal' | 'small'): ReactElement;
+    className?: string;
+    testId?: string;
+}): ReactElement;

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;
+}