@arbidocs/blocks 0.4.108 → 0.4.110

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/chat/Message.d.ts

@@ -30,14 +30,27 @@ export interface MessageRootProps extends HTMLAttributes<HTMLDivElement> {
 }
 /** One message row: centred column, role + id as data attributes for scroll/deep-link lookups. */
 export declare function MessageRoot({ role, messageId, tone, testId, className, children, ...rest }: MessageRootProps): import("react").JSX.Element;
+/**
+ * Who wrote the run of messages below (someone else's, left-aligned): the app's person pill,
+ * shown each time the author changes.
+ */
+export declare function MessageAuthor({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
 export interface MessageContentProps extends HTMLAttributes<HTMLDivElement> {
     role: MessageRole;
     messageId: string;
+    /**
+     * Which side a person's message sits on: `end` (right) for my own, `start` (left) for other
+     * people's. Defaults to `end` for the user role; the assistant is full width either way.
+     */
+    align?: 'start' | 'end';
     /** Overrides the default test id. A `data-testid` in the rest props still wins over both. */
     testId?: string;
 }
 /** Column that holds the bubble and (for the user) the footer under it, right-aligned. */
-export declare function MessageContent({ role, messageId, testId, className, children, ...rest }: MessageContentProps): import("react").JSX.Element;
+export declare function MessageContent({ role, messageId, align, testId, className, children, ...rest }: MessageContentProps): import("react").JSX.Element;
 export interface MessageBubbleProps extends HTMLAttributes<HTMLDivElement> {
     role: MessageRole;
     messageId: string;
@@ -148,12 +161,14 @@ export interface MessageFooterProps {
     labels?: Partial<MessageLabels>;
     /** Test id of the steps toggle. */
     stepsToggleTestId?: string;
+    /** A person's message: `end` (mine, right) or `start` (someone else's, left). */
+    align?: 'start' | 'end';
 }
 /**
  * Footer row of a settled message. The whole row anchors the steps popover so the trace is as
  * wide as the card.
  */
-export declare function MessageFooter({ role, leading, actions, revealActionsOnHover, steps, className, labels, stepsToggleTestId, }: MessageFooterProps): import("react").JSX.Element;
+export declare function MessageFooter({ role, leading, actions, revealActionsOnHover, steps, className, labels, stepsToggleTestId, align, }: MessageFooterProps): import("react").JSX.Element;
 export interface MessageActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Success tint (copied, saved). */
     isDone?: boolean;

package/dist/chat/TranscriptLine.d.ts

@@ -0,0 +1,50 @@
+/**
+ * A call's transcript in its conversation: attributed lines in a lighter style than chat bubbles
+ * (no bubble, muted text), consecutive lines of one speaker grouped under one name, and the line
+ * being spoken right now highlighted in the speaker's colour — with a "speaking" tag, so colour is
+ * never the only sign. Plus the small "All · Chat · Transcript" filter the conversation shows.
+ */
+import type { ReactElement, ReactNode } from 'react';
+export interface TranscriptLineProps {
+    speakerId: string;
+    /** Shown on the first line of a run ("Me" for my own lines); also the screen-reader name. */
+    speakerName: string;
+    /** The speaker as the app shows people (a pill); else `speakerName` in the speaker's colour. */
+    speaker?: ReactNode;
+    /** Formatted time of the line (the first of a run shows it). */
+    time?: string;
+    text: string;
+    /** A further line of the same speaker's run: no name, no icon. */
+    continued?: boolean;
+    /** This speaker is talking now and this is their latest line. */
+    live?: boolean;
+    liveLabel?: string;
+    className?: string;
+}
+export declare function TranscriptLine({ speakerId, speakerName, speaker, time, text, continued, live, liveLabel, className, }: TranscriptLineProps): ReactElement;
+export interface ConversationFilterOption<V extends string> {
+    value: V;
+    label: string;
+    count?: number;
+    testId?: string;
+}
+/** A small segmented filter ("All · Chat · Transcript"), sticky at the top of a message list. */
+export declare function ConversationFilter<V extends string>({ value, options, onChange, label, className, }: {
+    value: V;
+    options: ConversationFilterOption<V>[];
+    onChange(value: V): void;
+    label?: string;
+    className?: string;
+}): ReactElement;
+/**
+ * Someone is talking and their line has not arrived yet: "<speaker> is speaking…" in the
+ * transcript style, with quiet animated dots. Never stored; the real line replaces it.
+ */
+export declare function ProvisionalTranscriptLine({ speakerId, speakerName, speaker, label, className, }: {
+    speakerId: string;
+    speakerName: string;
+    /** The speaker as the app shows people (a pill); else `speakerName`. */
+    speaker?: ReactNode;
+    label?: string;
+    className?: string;
+}): ReactElement;