@arbidocs/blocks 0.4.109 → 0.4.110

package/dist/calendar/types.d.ts

@@ -172,6 +172,7 @@ export interface CalendarLabels {
     confirmed: string;
     cancelled: string;
     join: string;
+    openMeetingChat: string;
     accept: string;
     decline: string;
     maybe: string;
@@ -471,6 +472,8 @@ export interface EventDetailsProps {
     /** "Propose new time" for an invitation (shown next to the RSVP buttons). */
     onProposeTime?: () => void;
     onJoin?: () => void;
+    /** An ARBI call's meeting chat (shown next to Join). */
+    onOpenMeetingChat?: () => void;
     onClose?: () => void;
     /** Render the Join button as enabled (the host decides the join window). */
     canJoin?: boolean;

package/dist/calls/CallSidePanel.d.ts

@@ -0,0 +1,17 @@
+/**
+ * A side panel inside the call (chat, participants): the same header as the app's docked panels
+ * (FloatingPanel: title in the brand colour, hairline below, a ghost close button), on the normal
+ * background, beside the tiles rather than over them.
+ */
+import type { ReactElement, ReactNode } from 'react';
+export declare function CallSidePanel({ title, icon, actions, onClose, closeLabel, closeTestId, children, className, ...rest }: {
+    title: string;
+    icon?: ReactNode;
+    /** Extra header actions, left of the close button. */
+    actions?: ReactNode;
+    onClose(): void;
+    closeLabel: string;
+    closeTestId?: string;
+    children: ReactNode;
+    className?: string;
+} & React.HTMLAttributes<HTMLElement>): ReactElement;

package/dist/calls/CallStage.d.ts

@@ -0,0 +1,57 @@
+/**
+ * The call panel, docked beside the call's conversation like the document viewer: the app's
+ * header (`TabHeader`: one tab with the call's title; status chips, the view switch and
+ * "Minimise" on the right), a "Speaking: …" line, the stage (tiles, or a side panel over them)
+ * and the control bar. Normal app surfaces in both themes; only the tiles are dark.
+ */
+import type { ReactElement, ReactNode } from 'react';
+export type CallView = 'speaker' | 'gallery';
+export declare function CallHeader({ title, icon, status, view, onViewChange, onMinimise, minimiseLabel, }: {
+    title: string;
+    icon?: ReactNode;
+    /** The status chips; given `compact` on a narrow header. */
+    status?: ReactNode | ((compact: boolean) => ReactNode);
+    /** Speaker (the talker large) or gallery (everyone equal): one switch. */
+    view?: CallView;
+    onViewChange?(view: CallView): void;
+    onMinimise?(): void;
+    minimiseLabel?: string;
+}): ReactElement;
+/**
+ * "Speaking: Ada, Bo" — who is talking right now, in words (the tile rings say it in colour and
+ * motion). Polite live region, so a screen reader hears changes without being flooded.
+ */
+export declare function SpeakingNow({ names, idleText, className, }: {
+    /** Who is talking (person pills, or plain names). */
+    names: ReactNode[];
+    idleText?: string;
+    className?: string;
+}): ReactElement;
+/**
+ * A short-lived line under the header ("Transcription on — started by Ada"): the notice gets its
+ * own line, so it never takes the title's room; the header keeps only the short chip.
+ */
+export declare function CallNotice({ children }: {
+    children: ReactNode;
+}): ReactElement;
+/**
+ * The panel frame: header, a slim line under it ("Speaking: …", notices), the video stage, the
+ * participant list under the video, and the control bar. `stageHeight` sizes the video to its
+ * tiles (they keep 16:9 at the top) so the rest of the panel goes to the list rather than to blank
+ * space; without it, or with a `compact` list, the stage takes the room.
+ */
+export declare function CallStageFrame({ header, subheader, stage, stageRef, stageOverlay, people, stageHeight, controls, className, }: {
+    header: ReactNode;
+    /** A slim line under the header ("Speaking: …"). */
+    subheader?: ReactNode;
+    stage: ReactNode;
+    stageRef?: React.Ref<HTMLDivElement>;
+    /** Floating over the tiles' top-left corner (lobby requests, connection state). */
+    stageOverlay?: ReactNode;
+    /** The participant list, under the video. */
+    people?: ReactNode;
+    /** The video's natural height for a stage `width` wide and at most `maxHeight` tall. */
+    stageHeight?(width: number, maxHeight: number): number;
+    controls: ReactNode;
+    className?: string;
+}): ReactElement;

package/dist/calls/ControlBar.d.ts

@@ -0,0 +1,91 @@
+/**
+ * The call's control bar: one row, three columns. Left, the elapsed time (and any warning);
+ * centre, the controls in groups; right, Leave. Controls are `CallControlButton`s; Record carries
+ * its label, so its state is never a guess.
+ * Press-shortcuts: a control marked `data-call-shortcut="m"` is clicked by the M key while
+ * `shortcuts` is on and nobody is typing.
+ */
+import { type ReactElement, type ReactNode } from 'react';
+export declare function CallControlBar({ left, right, children, shortcuts, className, }: {
+    left?: ReactNode;
+    right?: ReactNode;
+    /** The centre controls (use `ControlGroup` / `ControlDivider`). */
+    children: ReactNode;
+    /** Single-key shortcuts on (the call is on screen). */
+    shortcuts?: boolean;
+    className?: string;
+}): ReactElement;
+export declare function ControlGroup({ children }: {
+    children: ReactNode;
+}): ReactElement;
+export declare function ControlDivider(): ReactElement;
+/** `m:ss` since `since`, ticking every second. */
+export declare function ElapsedTime({ since, title }: {
+    since: number;
+    title?: string;
+}): ReactElement;
+export interface MediaDevice {
+    deviceId: string;
+    label: string;
+}
+/** Microphone or camera: one toggle with an attached caret that opens the device list. */
+export declare function MediaControl({ kind, enabled, pending, onToggle, devices, activeDeviceId, onSelectDevice, shortcut, testId, options, }: {
+    kind: 'microphone' | 'camera';
+    enabled: boolean;
+    pending?: boolean;
+    onToggle(): void;
+    devices: MediaDevice[];
+    activeDeviceId?: string;
+    onSelectDevice(deviceId: string): void;
+    shortcut?: string;
+    testId: string;
+    /** On/off settings under the device list (e.g. "Mirror my video"). */
+    options?: {
+        label: string;
+        checked: boolean;
+        onChange(checked: boolean): void;
+        testId?: string;
+    }[];
+}): ReactElement;
+export interface RecordMode<M extends string = string> {
+    mode: M;
+    label: string;
+    description: string;
+    testId?: string;
+}
+/**
+ * The host's record button: off, it opens the mode choice; on, it stops (red). A plain menu
+ * rather than a portal so the choice stays next to its button.
+ */
+export declare function RecordControl<M extends string>({ on, busy, modes, note, onStart, onStop, }: {
+    on: boolean;
+    busy?: boolean;
+    modes: RecordMode<M>[];
+    /** One line above the modes (how recording works). */
+    note?: string;
+    onStart(mode: M): void;
+    onStop(): void;
+}): ReactElement;
+/** Leave: the one filled red control, at the right end. */
+export declare function LeaveButton({ onLeave, compact, label, title, }: {
+    onLeave(): void;
+    compact?: boolean;
+    label?: string;
+    title?: string;
+}): ReactElement;
+export interface MoreMenuItem {
+    key: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    onSelect(): void;
+    disabled?: boolean;
+    /** Right-aligned extra (a count). */
+    trailing?: ReactNode;
+    testId?: string;
+}
+/** "More": a details header, then groups of items separated by hairlines. */
+export declare function MoreMenu({ details, groups, label, }: {
+    details?: ReactNode;
+    groups: MoreMenuItem[][];
+    label?: string;
+}): ReactElement;

package/dist/calls/ControlButton.d.ts

@@ -0,0 +1,44 @@
+/**
+ * The one button style of the call controls: an ARBI `Button` (36 px, 44 px on touch) with a
+ * tooltip naming the action and its shortcut. Three tones:
+ *   neutral — a plain control (share, chat, more);
+ *   active  — a control whose thing is on or open (captions on, chat open);
+ *   off     — a device the user turned off (mic / camera), red-tinted, not a giant block.
+ * The status chips of the header (`CallStatusChip`) live here too, so all call chrome shares
+ * one source of sizes and colours.
+ */
+import { type ReactElement, type ReactNode } from 'react';
+import { type ButtonProps } from '@arbidocs/react/ui';
+export type ControlTone = 'neutral' | 'active' | 'off' | 'danger';
+export interface CallControlButtonProps extends Omit<ButtonProps, 'variant'> {
+    /** What the button does now ("Turn off microphone"). Also its accessible name. */
+    label: string;
+    /** Shown in the tooltip after the label, e.g. "M". */
+    shortcut?: string;
+    tone?: ControlTone;
+    /** Tooltip side (default above: the bar sits at the bottom). */
+    side?: 'top' | 'bottom';
+    /** False for a menu trigger: the open menu says it all, and a tip would sit on top of it. */
+    tooltip?: boolean;
+}
+export declare const CallControlButton: import("react").ForwardRefExoticComponent<CallControlButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+/** A count on a control's corner: unread messages (red, top) or how many people (quiet, bottom). */
+export declare function ControlBadge({ count, tone, testId, }: {
+    count: number;
+    tone?: 'alert' | 'quiet';
+    testId?: string;
+}): ReactElement;
+/** A small quiet status chip for the call header (recording, transcription, encryption). */
+export declare function CallStatusChip({ tone, icon, label, compact, pulse, title, children, className, testId, ...rest }: {
+    tone: 'red' | 'green' | 'yellow' | 'neutral';
+    icon?: ReactNode;
+    /** Visible text (hidden when compact; the accessible text stays). */
+    label: ReactNode;
+    compact?: boolean;
+    /** A pulsing dot in front (live capture). */
+    pulse?: boolean;
+    title?: string;
+    children?: ReactNode;
+    className?: string;
+    testId?: string;
+} & Omit<React.HTMLAttributes<HTMLSpanElement>, 'title'>): ReactElement;

package/dist/calls/PreJoin.d.ts

@@ -0,0 +1,31 @@
+/**
+ * PreJoin — device check before entering a call: camera preview, microphone level meter, camera /
+ * microphone pickers and on/off toggles. Used when starting a call, joining a scheduled call or a
+ * call link. (Answering a ring skips it and joins straight away, microphone on.)
+ *
+ * Plain getUserMedia — no media library — so it is cheap to show. The preview tracks are stopped on
+ * join / unmount; the call opens its own with the chosen devices. Wide: preview left, choices
+ * right; narrow: stacked.
+ */
+import { type ReactElement, type ReactNode } from 'react';
+import { type JoinChoices, type MediaKind } from './join-choices';
+export interface PreJoinProps {
+    /** The call's name, shown above the choices. */
+    title?: string | null;
+    /** Heading of the choices (default "Ready to join?"). */
+    heading?: string;
+    /** Extra fields above the join button (optional). */
+    children?: ReactNode;
+    joinLabel?: string;
+    busy?: boolean;
+    /** Shown under the controls (e.g. a join error). */
+    error?: string | null;
+    onJoin(choices: JoinChoices): void;
+    onCancel?(): void;
+    /** Mirror the camera preview (a selfie view, the default; only the <video> flips). */
+    mirror?: boolean;
+    /** Turns a device error into a sentence (defaults to {@link describeMediaError}). */
+    describeError?(err: unknown, kind: MediaKind): string;
+    className?: string;
+}
+export declare function PreJoin({ title, heading, children, joinLabel, busy, error, onJoin, onCancel, describeError, mirror, className, }: PreJoinProps): ReactElement;

package/dist/calls/cards.d.ts

@@ -0,0 +1,54 @@
+/**
+ * The call's small cards: the minimised call (picture-in-picture, so the user keeps working),
+ * the incoming-call card, and the waiting / connecting states. Same surfaces as the app's popovers.
+ */
+import { type ReactElement, type ReactNode } from 'react';
+/**
+ * The minimised call: the current speaker (their tile, with its voice ring), "Speaking: …", the
+ * status chips, and my microphone and camera, back to the call, leave.
+ */
+export declare function MinimisedCall({ title, video, status, speaking, micEnabled, onToggleMic, cameraEnabled, onToggleCamera, onRestore, onLeave, restoreLabel, shortcuts, className, }: {
+    title: string;
+    /** M / V work on the card too. */
+    shortcuts?: boolean;
+    /** The current speaker's tile; omitted (before the call connects), a phone placeholder. */
+    video?: ReactNode;
+    status?: ReactNode;
+    /** "Speaking: …" (a `SpeakingNow`), shown instead of the title while someone talks. */
+    speaking?: ReactNode;
+    /** Omit (with the toggle) before the call connects. */
+    micEnabled?: boolean;
+    onToggleMic?(): void;
+    cameraEnabled?: boolean;
+    onToggleCamera?(): void;
+    onRestore(): void;
+    onLeave(): void;
+    restoreLabel?: string;
+    className?: string;
+}): ReactElement;
+/** A ring: who calls, in what context, accept / decline, and the ringtone switch. */
+export declare function IncomingCallCard({ callerName, caller, context, busy, muted, onMutedChange, onAccept, onDecline, className, }: {
+    callerName: string;
+    /** The caller as the app shows people (a pill); else `callerName`. */
+    caller?: ReactNode;
+    /** "is calling you", "invites you to a group call", … */
+    context: string;
+    busy?: boolean;
+    muted: boolean;
+    onMutedChange(muted: boolean): void;
+    onAccept(): void;
+    onDecline(): void;
+    className?: string;
+}): ReactElement;
+/** A centred state on the stage (waiting in the lobby, connecting). */
+export declare function CallStateMessage({ title, description, spinner, action, testId, }: {
+    title: string;
+    description?: string;
+    spinner?: boolean;
+    action?: ReactNode;
+    testId?: string;
+}): ReactElement;
+/** Covers the tiles while (re)connecting. */
+export declare function ConnectionOverlay({ label }: {
+    label: string;
+}): ReactElement;

package/dist/calls/hooks.d.ts

@@ -0,0 +1,20 @@
+/** Small hooks of the call blocks. */
+import { type RefObject } from 'react';
+/** Size of an element, kept current with a ResizeObserver. */
+export declare function useElementSize<T extends HTMLElement>(): [
+    (el: T | null) => void,
+    {
+        width: number;
+        height: number;
+    }
+];
+/**
+ * A notice that is spelled out on mount (when `announce`) and folds after `ms`; `onFolded` runs
+ * once it folds, so the app can avoid spelling it out again on the next mount.
+ */
+export declare function useBriefNotice(announce?: boolean, onFolded?: () => void, ms?: number): boolean;
+/**
+ * Single-key shortcuts inside `ref`: a control marked `data-call-shortcut="m"` is clicked by the M
+ * key while `enabled` and nobody is typing (or holding a modifier).
+ */
+export declare function useShortcutKeys(ref: RefObject<HTMLElement | null>, enabled: boolean): void;