@veevarts/design-system 2.0.0-alpha.59 → 2.0.0-alpha.60

package/dist/patterns/AssistantActivity/AssistantActivity.d.ts

@@ -0,0 +1,15 @@
+import { JSX } from 'react';
+import { AssistantActivityProps } from './types';
+/**
+ * The steps an assistant took for one turn, one row per finished step: done
+ * or failed, with how long it took. A HeroUI `Accordion` with a single item,
+ * so the group collapses under its title. Animation is off when the person
+ * prefers reduced motion.
+ *
+ * Renders nothing when `items` is empty.
+ */
+export declare function AssistantActivity({ items, title, titleText, isExpanded, defaultExpanded, onExpandedChange, stateLabels, formatDuration, className, 'data-testid': dataTestId, }: AssistantActivityProps): JSX.Element | null;
+export declare namespace AssistantActivity {
+    var displayName: string;
+}
+export default AssistantActivity;

package/dist/patterns/AssistantActivity/formatAssistantDuration.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A short, unit-suffixed duration for activity rows and running clocks:
+ * `320 ms`, `1.2 s`, `12 s`, `2 min 05 s`.
+ *
+ * Unit words are SI symbols (`ms`, `s`) and the SI-accepted `min`, so there is
+ * nothing to translate; pass your own formatter where a locale needs a
+ * different decimal mark. Every step truncates, so a value never shows as the
+ * next unit up before it gets there (999.6 ms is `999 ms`, not `1000 ms`).
+ */
+export declare function formatAssistantDuration(ms: number): string;

package/dist/patterns/AssistantActivity/index.d.ts

@@ -0,0 +1,3 @@
+export { AssistantActivity } from './AssistantActivity';
+export { formatAssistantDuration } from './formatAssistantDuration';
+export type { AssistantActivityItem, AssistantActivityProps, AssistantActivityState } from './types';

package/dist/patterns/AssistantActivity/styles.d.ts

@@ -0,0 +1,31 @@
+import { AssistantActivityState } from './types';
+/**
+ * Every slot class of `AssistantActivity`. Semantic HeroUI colours only, so
+ * the group flips under `.dark` with no dark values of its own.
+ */
+export declare const assistantActivityClass: {
+    readonly base: "w-full px-0";
+    readonly item: "shadow-none";
+    readonly trigger: "gap-2 py-1.5";
+    readonly title: "text-sm font-medium text-default-700";
+    readonly indicator: "text-default-500";
+    readonly content: "pb-2 pt-0";
+    readonly list: "m-0 flex list-none flex-col gap-1.5 p-0";
+    readonly row: "flex min-w-0 items-start gap-2 text-sm";
+    readonly icon: "mt-0.5 flex-none";
+    readonly label: "min-w-0 flex-1 text-foreground [overflow-wrap:anywhere]";
+    /**
+     * HeroUI's flat danger chip is `text-danger-600 dark:text-danger-500`,
+     * which measures 4.25:1 on its own fill in dark. The 700 step clears AA in
+     * both themes (HeroUI's dark scale is reversed, so it is a light tint
+     * there); the `dark:` repeat is what overrides HeroUI's `dark:` class.
+     */
+    readonly failed: "flex-none text-danger-700 dark:text-danger-700";
+    readonly duration: "mt-px flex-none text-xs tabular-nums text-default-500";
+    /** "Done:" before a done row, for screen readers only. */
+    readonly stateLabel: "sr-only";
+};
+export declare const assistantActivityStateIcon: Record<AssistantActivityState, {
+    icon: string;
+    className: string;
+}>;

package/dist/patterns/AssistantActivity/types.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+/**
+ * How a step ended. There is no running state on purpose: a step is listed
+ * once it has finished, and the panel's own "working" notice carries the wait.
+ */
+export type AssistantActivityState = 'done' | 'failed';
+export interface AssistantActivityItem {
+    /** Stable key; also the row's `data-testid` suffix. */
+    id: string;
+    /** What the step did, in plain words ("Searched emails · last 60 days"). */
+    label: ReactNode;
+    /** How the step ended. */
+    state: AssistantActivityState;
+    /** How long it took. Omitted, no duration is shown. */
+    durationMs?: number;
+}
+export interface AssistantActivityProps {
+    /** The finished steps, in the order to show. Empty, nothing renders. */
+    items: AssistantActivityItem[];
+    /** The group's heading and toggle text, e.g. "Read 4 sources". */
+    title: ReactNode;
+    /**
+     * Plain-text `title`, for type-to-select and assistive tech. Needed when
+     * `title` is not a string (React Aria warns otherwise); a string `title` is
+     * used as is.
+     */
+    titleText?: string;
+    /** Controlled open state. */
+    isExpanded?: boolean;
+    /** Uncontrolled initial state. Defaults to open. */
+    defaultExpanded?: boolean;
+    /** Called when the group opens or closes. */
+    onExpandedChange?: (isExpanded: boolean) => void;
+    /** Words for each state. `done` is read by screen readers only; `failed` is shown. Default "Done" / "Failed". */
+    stateLabels?: Partial<Record<AssistantActivityState, string>>;
+    /** Formats `durationMs`. Defaults to `formatAssistantDuration`. */
+    formatDuration?: (ms: number) => string;
+    /** Classes on the accordion. */
+    className?: string;
+    /** Test id of the root; its parts add suffixes (see Test ids in the docs). Defaults to `assistant-activity`. */
+    'data-testid'?: string;
+}

package/dist/patterns/AssistantComposer/AssistantComposer.d.ts

@@ -0,0 +1,15 @@
+import { JSX } from 'react';
+import { AssistantComposerProps } from './types';
+/**
+ * Where a person types to an assistant: an autosizing field, a Send button
+ * that turns into Stop while a turn runs, and optional suggestion pills that
+ * fill the field without sending.
+ *
+ * Enter sends; Shift+Enter adds a line. Enter that confirms an IME
+ * composition (Japanese, Chinese, Korean input) is left to the IME.
+ */
+export declare function AssistantComposer({ value, onValueChange, onSubmit, onStop, isRunning, isStopDisabled, isDisabled, label, placeholder, description, sendLabel, stopLabel, suggestions, suggestionsLabel, onSuggestionSelect, maxLength, minRows, maxRows, className, 'data-testid': dataTestId, }: AssistantComposerProps): JSX.Element;
+export declare namespace AssistantComposer {
+    var displayName: string;
+}
+export default AssistantComposer;

package/dist/patterns/AssistantComposer/index.d.ts

@@ -0,0 +1,2 @@
+export { AssistantComposer } from './AssistantComposer';
+export type { AssistantComposerProps, AssistantComposerSuggestion } from './types';

package/dist/patterns/AssistantComposer/styles.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Every slot class of `AssistantComposer`. HeroUI semantic colours plus
+ * `ai-focus` for the field's focus border, so it works under `.dark`.
+ */
+export declare const assistantComposerClass: {
+    readonly base: "flex w-full min-w-0 flex-col gap-2";
+    readonly suggestions: "flex flex-wrap gap-2";
+    /**
+     * Pill tones are set here rather than taken from HeroUI's flat variant,
+     * whose text tone differs between HeroUI versions and read dim on a dark
+     * card in an app on HeroUI 2.7. Measured in both themes in the stories.
+     */
+    readonly suggestion: "h-auto min-h-8 max-w-full whitespace-normal bg-default-100 py-1.5 text-left text-foreground data-[hover=true]:bg-default-200";
+    readonly row: "flex min-w-0 items-end gap-2";
+    readonly field: "min-w-0 flex-1";
+    /**
+     * The focus border is `ai-focus` with the pointer over the field too:
+     * HeroUI's bordered variant has its own focused-and-hovered rule
+     * (`border-default-foreground`, black in light and white in dark), more
+     * specific than the focus one, so it is replaced here by name.
+     */
+    readonly inputWrapper: "border-default-200 bg-content1 data-[hover=true]:border-default-300 group-data-[focus=true]:border-ai-focus group-data-[focus=true]:data-[hover=true]:border-ai-focus";
+    readonly input: "text-sm text-foreground placeholder:text-default-500";
+    /**
+     * The hint sits under the whole row, not inside the field's column: inside
+     * it, a long hint pushed the bottom-aligned button down beside the hint.
+     * Our own element, so its tone is ours too: `default-500` clears 4.5:1 in
+     * both themes (HeroUI's description slot is `foreground-400`, 2.56:1).
+     */
+    readonly helper: "m-0 flex w-full justify-between gap-2 text-xs text-default-500";
+    readonly count: "ms-auto flex-none tabular-nums";
+    readonly button: "flex-none";
+};

package/dist/patterns/AssistantComposer/types.d.ts

@@ -0,0 +1,62 @@
+import { ReactNode } from 'react';
+/** A ready-made question shown as a pill above the field. */
+export interface AssistantComposerSuggestion {
+    /** Stable key; also the pill's `data-testid` suffix. */
+    key: string;
+    /** What the pill says. */
+    label: string;
+    /** What it puts in the field. Defaults to `label`. Cut to `maxLength` when the composer has one. */
+    prompt?: string;
+}
+export interface AssistantComposerProps {
+    /** The field's text. Controlled: pair it with `onValueChange`. */
+    value: string;
+    /** Called with the new text on every change, and when a suggestion fills the field. */
+    onValueChange: (value: string) => void;
+    /**
+     * Enter or the send button, while not running or disabled, with the text
+     * trimmed. It does not fire when the trimmed text is empty or the value is
+     * longer than `maxLength`.
+     */
+    onSubmit: (value: string) => void;
+    /** Shown as a Stop button in place of Send while `isRunning`. Omitted, Send is just disabled. */
+    onStop?: () => void;
+    /** A turn is running: Enter does nothing and Send becomes Stop. The field stays editable. */
+    isRunning?: boolean;
+    /**
+     * Keeps Stop in place but disabled, e.g. while a stop the person asked for
+     * is being carried out. A disabled Stop fires no `onStop`.
+     */
+    isStopDisabled?: boolean;
+    /** Disables the field, the pills and Send together. */
+    isDisabled?: boolean;
+    /** The field's accessible name. Required, and distinct from `placeholder`. */
+    label: string;
+    /** Example text inside the empty field, e.g. "Ask about this account". Not a substitute for `label`. */
+    placeholder?: string;
+    /** A hint under the field, e.g. how Enter and Shift+Enter behave. */
+    description?: ReactNode;
+    /** Name of the send button. Defaults to "Send". */
+    sendLabel?: string;
+    /** Name of the stop button. Defaults to "Stop". */
+    stopLabel?: string;
+    /** Pills that fill the field when picked. They never send. */
+    suggestions?: AssistantComposerSuggestion[];
+    /** Name of the suggestions group. Defaults to "Suggestions". */
+    suggestionsLabel?: string;
+    /** Called after a pill has filled the field. */
+    onSuggestionSelect?: (suggestion: AssistantComposerSuggestion) => void;
+    /**
+     * Caps the field and shows a `n/max` count under it. A longer suggestion is
+     * cut to it, and Send stays disabled while a controlled `value` is over it.
+     */
+    maxLength?: number;
+    /** Autosize lower bound, in rows. Defaults to 2. */
+    minRows?: number;
+    /** Autosize upper bound, in rows; past it the field scrolls. Defaults to 8. */
+    maxRows?: number;
+    /** Classes on the root `<form>`. */
+    className?: string;
+    /** Test id of the root; its parts add suffixes (see Test ids in the docs). Defaults to `assistant-composer`. */
+    'data-testid'?: string;
+}

package/dist/patterns/AssistantMessage/AssistantMessage.d.ts

@@ -0,0 +1,17 @@
+import { JSX } from 'react';
+import { AssistantMessageProps } from './types';
+/**
+ * One turn of a conversation with an assistant: the person's on the right in
+ * a neutral bubble, the assistant's on the left at full width under a small
+ * mark, with no bubble of its own. Content, copy and controls all come in as props; the pattern renders
+ * whatever `children` it is given (plain text or a rendered answer).
+ *
+ * Each turn is an `<article>` named by its author, so a screen reader can move
+ * turn by turn. It announces nothing on its own: run-state announcements
+ * belong to `AssistantNotice`.
+ */
+export declare function AssistantMessage({ author, authorLabel, children, status, statusLabel, meta, actions, icon, className, classNames, 'data-testid': dataTestId, }: AssistantMessageProps): JSX.Element;
+export declare namespace AssistantMessage {
+    var displayName: string;
+}
+export default AssistantMessage;

package/dist/patterns/AssistantMessage/index.d.ts

@@ -0,0 +1,2 @@
+export { AssistantMessage } from './AssistantMessage';
+export type { AssistantMessageAuthor, AssistantMessageBaseProps, AssistantMessageClassNames, AssistantMessageProps, AssistantMessageStatus, AssistantMessageStatusLabel, AssistantMessageStatusProps, } from './types';

package/dist/patterns/AssistantMessage/styles.d.ts

@@ -0,0 +1,45 @@
+import { AssistantMessageStatus } from './types';
+/**
+ * Every slot class of `AssistantMessage`.
+ *
+ * Colours are HeroUI semantic tokens (they flip under `.dark`) plus the `ai-*`
+ * palette (which flips with them). No `bg-white`: the assistant pieces carry
+ * their own dark values because the DS has no dark theme.
+ *
+ * The assistant's turn paints nothing: it is full width with no bubble, so it
+ * shows whatever surface the app puts it on (a card, an inset box, a
+ * translucent dark panel). Painting `ai-assistant-bubble` edge to edge with no
+ * padding made a bare block on any surface but HeroUI `content1`.
+ *
+ * Secondary text is `default-500` on a plain card and `default-600` inside a
+ * fill: default-500 measures 4.40:1 on the light user bubble, under AA. See
+ * `src/tokens/__test__/assistant-surface.test.ts`.
+ */
+export declare const assistantMessageClass: {
+    readonly base: "flex w-full min-w-0 flex-col gap-1.5";
+    readonly baseUser: "items-end";
+    readonly baseAssistant: "items-start";
+    readonly header: "flex min-w-0 max-w-full flex-wrap items-center gap-x-2 gap-y-0.5";
+    readonly mark: "inline-flex size-6 flex-none items-center justify-center rounded-full bg-ai-fill text-ai-accent";
+    readonly author: "min-w-0 text-sm font-semibold text-ai-accent [overflow-wrap:anywhere]";
+    readonly meta: "min-w-0 text-xs tabular-nums text-default-500 [overflow-wrap:anywhere]";
+    readonly body: "min-w-0 text-sm leading-relaxed text-foreground [overflow-wrap:anywhere]";
+    readonly bodyUser: "max-w-[85%] rounded-2xl rounded-br-md bg-ai-user-bubble px-4 py-2.5";
+    readonly bodyAssistant: "w-full";
+    /** A plain string keeps the line breaks the person typed. */
+    readonly plain: "whitespace-pre-wrap";
+    readonly status: "m-0 flex min-w-0 items-center gap-1.5 text-xs font-medium [overflow-wrap:anywhere]";
+    /**
+     * The status mark's own 14px box. Without words it is all a sighted reader
+     * sees, so it keeps its place before Iconify has loaded the icon.
+     */
+    readonly statusIcon: "inline-flex size-3.5 flex-none";
+    readonly actions: "flex flex-wrap items-center gap-1";
+    /** The person's name, for screen readers only. */
+    readonly userLabel: "sr-only";
+    /** The default status word when `statusLabel` is empty, for screen readers only: the icon shows it. */
+    readonly statusFallback: "sr-only";
+};
+export declare const assistantMessageStatusClass: Record<Exclude<AssistantMessageStatus, 'complete'>, string>;
+export declare const ASSISTANT_MESSAGE_STATUS_ICON: Record<Exclude<AssistantMessageStatus, 'complete'>, string>;
+export declare const ASSISTANT_MESSAGE_DEFAULT_ICON = "solar:stars-minimalistic-linear";

package/dist/patterns/AssistantMessage/types.d.ts

@@ -0,0 +1,84 @@
+import { ReactNode } from 'react';
+/** Who wrote the turn. */
+export type AssistantMessageAuthor = 'user' | 'assistant';
+/**
+ * How the turn ended. `stopped` means the person stopped it; `error` means
+ * it failed. Either way the content that arrived is still shown.
+ */
+export type AssistantMessageStatus = 'complete' | 'stopped' | 'error';
+/** Extra classes per slot, merged after the pattern's own. */
+export interface AssistantMessageClassNames {
+    /** The `<article>`. */
+    base?: string;
+    /** The row with the mark, the name and `meta`. */
+    header?: string;
+    /** The content. Add padding and `bg-ai-assistant-bubble` here to draw the assistant's turn as a bubble. */
+    body?: string;
+    /** The status line of a stopped or failed turn. */
+    status?: string;
+    /** The secondary line. */
+    meta?: string;
+    /** The controls under the turn. */
+    actions?: string;
+}
+/** A label that says something: text or an element, never empty or absent. */
+export type AssistantMessageStatusLabel = Exclude<ReactNode, null | undefined | boolean>;
+/**
+ * A stopped or failed turn must say so in words: without a label it would
+ * read as a finished answer, to sighted people and screen readers alike. The
+ * union makes the label required whenever `status` is not `complete`, and
+ * still accepts a `status` computed at runtime as long as a label comes with it.
+ *
+ * The type is not the only guard: an empty string, an `undefined` from an
+ * unchecked lookup, or a wrapper that loses the union all reach the component
+ * without words, so it still draws the status icon with a default word for
+ * screen readers ("Stopped" / "Failed").
+ *
+ * A wrapper keeps the requirement by omitting from the base props, not from
+ * the union: `Omit<AssistantMessageBaseProps, 'author'> & AssistantMessageStatusProps`.
+ */
+export type AssistantMessageStatusProps = {
+    /** Defaults to `complete`. */
+    status?: 'complete';
+    /** Ignored on a complete turn. */
+    statusLabel?: ReactNode;
+} | {
+    /** The person stopped the turn, or it failed. The content that arrived is still shown. */
+    status: 'stopped' | 'error';
+    /** Shown under the content, e.g. "Stopped by you". Required: it is the only text that says so. */
+    statusLabel: AssistantMessageStatusLabel;
+};
+export interface AssistantMessageBaseProps {
+    /**
+     * Who wrote the turn. Named `author`, not `role`, because `role` on a DS
+     * pattern means the ARIA role (`FeedbackState`).
+     */
+    author: AssistantMessageAuthor;
+    /**
+     * The turn's accessible name, e.g. "You" or "Assistant". Shown next to the
+     * assistant mark; on the person's own turn it is read by screen readers
+     * only.
+     */
+    authorLabel: string;
+    /**
+     * The turn's content. A plain string keeps its line breaks. Empty (a turn
+     * that failed before any text arrived), no body is drawn.
+     */
+    children?: ReactNode;
+    /** Small secondary line: a time, a duration. */
+    meta?: ReactNode;
+    /** Controls under the turn (copy, retry). Rendered as given. */
+    actions?: ReactNode;
+    /**
+     * Iconify name of the assistant mark, or `false` for none. Defaults to a
+     * sparkle. Ignored on the person's own turn.
+     */
+    icon?: string | false;
+    /** Classes on the root `<article>`. */
+    className?: string;
+    /** Classes per slot. */
+    classNames?: AssistantMessageClassNames;
+    /** Test id of the root; its parts add suffixes (see Test ids in the docs). Defaults to `assistant-message`. */
+    'data-testid'?: string;
+}
+export type AssistantMessageProps = AssistantMessageBaseProps & AssistantMessageStatusProps;

package/dist/patterns/AssistantNotice/AssistantNotice.d.ts

@@ -0,0 +1,18 @@
+import { JSX } from 'react';
+import { AssistantNoticeProps } from './types';
+/**
+ * The run state of an assistant panel: working, nothing yet, failed, a limit,
+ * offline, no access, or a plain note. A HeroUI `Alert` underneath, with one
+ * kind per state and every word supplied by the caller.
+ *
+ * Announcements follow `FeedbackState`: `error` is `role="alert"`
+ * (assertive), every other kind `role="status"` (polite). The live region
+ * wraps the title and description only; the clock, the action and the
+ * details stay outside it, so a ticking clock or revealing details is not
+ * announced.
+ */
+export declare function AssistantNotice({ kind, title, description, elapsed, action, details, detailsLabel, icon, role, ariaLive, className, classNames, 'data-testid': dataTestId, }: AssistantNoticeProps): JSX.Element;
+export declare namespace AssistantNotice {
+    var displayName: string;
+}
+export default AssistantNotice;

package/dist/patterns/AssistantNotice/index.d.ts

@@ -0,0 +1,2 @@
+export { AssistantNotice } from './AssistantNotice';
+export type { AssistantNoticeClassNames, AssistantNoticeKind, AssistantNoticeProps } from './types';

package/dist/patterns/AssistantNotice/styles.d.ts

@@ -0,0 +1,49 @@
+import { AssistantNoticeKind } from './types';
+type AlertColor = 'default' | 'danger' | 'warning';
+interface KindStyle {
+    /** HeroUI `Alert` colour: its flat fill for the kind. */
+    color: AlertColor;
+    /** Extra base classes. `dark:` repeats are needed to beat Alert's own `dark:bg-*`. */
+    base: string;
+    title: string;
+    description: string;
+    icon: string;
+}
+export declare const assistantNoticeKindStyle: Record<AssistantNoticeKind, KindStyle>;
+export declare const assistantNoticeClass: {
+    /** Alert centres a body with no title prop; the copy here is children, so pin it to the top-left. */
+    readonly base: "items-start gap-x-3 px-4 py-3";
+    readonly mainWrapper: "ms-0 min-h-0 min-w-0 items-start justify-start gap-0.5";
+    readonly icon: "mt-0.5 inline-flex size-5 flex-none items-center justify-center";
+    /**
+     * The live region: title and description only. The clock, the action and
+     * the details sit outside it, so a ticking clock or opening "Details" on
+     * an error does not re-announce anything.
+     */
+    readonly live: "col-span-full row-start-1 grid min-w-0 grid-cols-subgrid gap-y-0.5";
+    /**
+     * Title, description and clock. The live region spans every column as a
+     * subgrid (title in the first, description across all), and the clock
+     * sits outside it, so a ticking clock never changes the region. Without a
+     * clock there is one column, and the title has the full width.
+     */
+    readonly text: "grid w-full min-w-0 grid-cols-1 items-baseline gap-x-2";
+    /**
+     * With a clock, two columns: the title, then the clock on the title's
+     * baseline, in the second column of the first row. Both the region and the
+     * clock have an explicit row, or auto-placement would move the region below
+     * the clock. A title too long for its line wraps beside the clock.
+     */
+    readonly textWithClock: "grid-cols-[auto_1fr]";
+    readonly title: "col-start-1 m-0 min-w-0 justify-self-start text-sm font-medium [overflow-wrap:anywhere]";
+    readonly elapsed: "col-start-2 row-start-1 justify-self-start whitespace-nowrap text-sm tabular-nums";
+    readonly description: "col-span-full m-0 min-w-0 text-sm [overflow-wrap:anywhere]";
+    readonly action: "mt-2 flex flex-wrap items-center gap-2";
+    readonly detailsToggle: "-ms-1.5 h-7 min-w-0 gap-1 px-1.5 text-xs font-medium text-current";
+    readonly detailsWrapper: "w-full min-w-0";
+    readonly detailsChevron: "transition-transform motion-reduce:transition-none [html[data-pos-reduce-motion=true]_&]:transition-none";
+    readonly detailsChevronOpen: "rotate-180";
+    readonly details: "mt-1 max-h-48 overflow-auto whitespace-pre-wrap rounded-md bg-content1 p-2 font-mono text-xs text-foreground [overflow-wrap:anywhere]";
+};
+export declare const ASSISTANT_NOTICE_DEFAULT_ROLE: Record<AssistantNoticeKind, 'alert' | 'status'>;
+export {};

package/dist/patterns/AssistantNotice/types.d.ts

@@ -0,0 +1,58 @@
+import { ReactNode } from 'react';
+/**
+ * The run states an assistant panel shows. The caller maps its own errors to
+ * these; the pattern knows nothing about where they came from.
+ *
+ * - `thinking`: a turn is running. Pair it with `elapsed`.
+ * - `empty`: nothing asked yet.
+ * - `error`: the turn failed.
+ * - `caution`: a limit was reached (rate, daily, per-turn); no retry now.
+ * - `offline`: the service or the connection is down.
+ * - `blocked`: the person cannot use the assistant (no access, not set up).
+ * - `info`: anything else worth saying.
+ */
+export type AssistantNoticeKind = 'thinking' | 'empty' | 'error' | 'caution' | 'offline' | 'blocked' | 'info';
+/** Extra classes per slot, merged after the pattern's own. */
+export interface AssistantNoticeClassNames {
+    /** The notice. */
+    base?: string;
+    /** The title. */
+    title?: string;
+    /** The description. */
+    description?: string;
+    /** The wrapper of `action`. */
+    action?: string;
+    /** The revealed details. */
+    details?: string;
+}
+export interface AssistantNoticeProps {
+    /** The run state. It picks the icon, the tone and the default announcement. */
+    kind: AssistantNoticeKind;
+    /** What is happening, in a few words, e.g. "Working…". Announced once. */
+    title: ReactNode;
+    /** More detail under the title, e.g. when they can ask again. */
+    description?: ReactNode;
+    /**
+     * A running clock next to the title ("12 s"). Hidden from screen readers so
+     * a ticking value is not announced every second; they hear the title once.
+     */
+    elapsed?: ReactNode;
+    /** A control under the text (Retry, Sign in). Rendered as given. */
+    action?: ReactNode;
+    /** Technical detail, revealed by a "Details" toggle. */
+    details?: ReactNode;
+    /** Name of the details toggle. Defaults to "Details". */
+    detailsLabel?: string;
+    /** Iconify name to replace the kind's icon, or `false` for none. */
+    icon?: string | false;
+    /** Defaults to `alert` for `error`, `status` otherwise. */
+    role?: 'alert' | 'status';
+    /** Defaults to `assertive` for `error`, `polite` otherwise. */
+    ariaLive?: 'polite' | 'assertive' | 'off';
+    /** Classes on the notice. */
+    className?: string;
+    /** Classes per slot. */
+    classNames?: AssistantNoticeClassNames;
+    /** Test id of the root; its parts add suffixes (see Test ids in the docs). Defaults to `assistant-notice`. */
+    'data-testid'?: string;
+}

package/dist/patterns/ScrollToLatest/ScrollToLatest.d.ts

@@ -0,0 +1,18 @@
+import { JSX } from 'react';
+import { ScrollToLatestProps } from './types';
+/**
+ * A scroll box that stays on its newest content, like a chat transcript. It
+ * follows the bottom until the person scrolls up, then offers a "Jump to
+ * newest" button; reaching the bottom again, by scrolling or the button,
+ * resumes following. Built on HeroUI's `ScrollShadow`.
+ *
+ * Only scrolling UP stops the following, so the box's own scrolling (and the
+ * browser clamping after content shrinks) never does. Being at the bottom
+ * resumes it, however the box got there: a scroll, or content that now fits
+ * without the box moving (which fires no scroll event).
+ */
+export declare function ScrollToLatest({ children, label, followKey, jumpLabel, onFollowChange, threshold, className, classNames, 'data-testid': dataTestId, }: ScrollToLatestProps): JSX.Element;
+export declare namespace ScrollToLatest {
+    var displayName: string;
+}
+export default ScrollToLatest;

package/dist/patterns/ScrollToLatest/index.d.ts

@@ -0,0 +1,2 @@
+export { ScrollToLatest } from './ScrollToLatest';
+export type { ScrollToLatestClassNames, ScrollToLatestProps } from './types';

package/dist/patterns/ScrollToLatest/styles.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Every slot class of `ScrollToLatest`. The box takes its height from its
+ * parent (`h-full` / `flex-1`), so give the parent one.
+ */
+export declare const scrollToLatestClass: {
+    readonly base: "relative flex min-h-0 w-full flex-col";
+    readonly scroller: "min-h-0 flex-1 overflow-y-auto overscroll-contain rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ai-focus";
+    readonly content: "min-w-0";
+    readonly jumpBar: "pointer-events-none absolute inset-x-0 bottom-3 flex justify-center";
+    readonly jump: "pointer-events-auto border border-divider bg-content1 text-foreground shadow-medium";
+};

package/dist/patterns/ScrollToLatest/types.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+/** Extra classes per slot, merged after the pattern's own. */
+export interface ScrollToLatestClassNames {
+    /** The root. */
+    base?: string;
+    /** The scrolling region (HeroUI `ScrollShadow`). */
+    scroller?: string;
+    /** The wrapper around `children` that the box watches for growth. */
+    content?: string;
+    /** The "Jump to newest" button. */
+    jump?: string;
+}
+export interface ScrollToLatestProps {
+    /** The transcript, usually one `AssistantMessage` per turn. */
+    children: ReactNode;
+    /** Accessible name of the scrolling region, e.g. "Conversation". */
+    label: string;
+    /**
+     * Change it when new content arrives (a message count, the last id). While
+     * the person is following the bottom, the box scrolls to it. Growth inside
+     * the content (a group expanding) is followed without it.
+     */
+    followKey?: unknown;
+    /** Text of the button that returns to the bottom. Defaults to "Jump to newest". */
+    jumpLabel?: string;
+    /** Called when the person stops or starts following the bottom. */
+    onFollowChange?: (isFollowing: boolean) => void;
+    /** How close to the bottom, in px, still counts as "at the bottom". Defaults to 32. */
+    threshold?: number;
+    /** Classes on the root. Give it a height here or on its parent. */
+    className?: string;
+    /** Classes per slot. */
+    classNames?: ScrollToLatestClassNames;
+    /** Test id of the root; its parts add suffixes (see Test ids in the docs). Defaults to `scroll-to-latest`. */
+    'data-testid'?: string;
+}

package/dist/test/backdrop.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The opaque colour actually painted behind `element`: its own background and
+ * every ancestor's, composited from the nearest opaque one down, over white.
+ *
+ * Contrast has to be measured against this, not against the element's own
+ * `backgroundColor`: HeroUI's flat fills are translucent in dark mode
+ * (`dark:bg-danger-50/50`), so the computed value alone reads as a colour
+ * nobody sees.
+ */
+export declare function backdropColor(element: Element): string;
+/** `#1d4ed8` → `rgb(29, 78, 216)`, the form `getComputedStyle` reports. */
+export declare function rgbOf(hex: string): string;