@openwarelabs/ui 0.3.1 → 0.5.0

package/README.md

@@ -50,19 +50,20 @@ import { Button, Field, Input, Toaster, toast } from "@openwarelabs/ui";
 
 ## Components
 
-71 components, each with a page in the docs.
+93 components, each with a page in the docs.
 
 | Group | Components |
 | --- | --- |
-| Typography | `Text` (each style on the Typography page as a variant: hero to caption, code and kbd; tones, `truncate`, `as`), `Link`, `Kbd`, `Code`, `CodeBlock`, `Snippet` |
-| Actions | `Button` (primary, secondary, ghost, danger; sm, md, lg; `loading`; `shape="pill"`), `buttonClassName()` for links, `ButtonGroup`, `CloseButton`, `CopyButton`, `ToggleButton`, `SegmentedControl` |
-| Inputs | `Field`, `Fieldset`, `Input` (start and end content), `Textarea` (`autoGrow`), `NumberField`, `SearchField`, `InputOTP`, `ColorField` |
-| Choices | `Checkbox`, `CheckboxGroup`, `RadioGroup` (plain or cards), `Switch`, `Select`, `Combobox`, `Slider` (one value or a range), `ChoiceCard` |
-| Pickers | `Calendar`, `DatePicker`, `ColorPicker`, `FileDropZone` |
-| Feedback | `Alert`, `Badge`, `ProgressBar`, `ProgressCircle`, `Spinner`, `Skeleton`, `SkeletonRows`, `Toaster` + `toast()` (sonner: stacked, swipeable, with actions and promises), `Tooltip` |
+| Typography | `Text` (each style on the Typography page as a variant: hero to caption, code and kbd; tones, `truncate`, `as`), `Link`, `Kbd`, `Code`, `CodeBlock`, `Snippet`, `Prose` (styles rendered Markdown or HTML, at chat or article size) |
+| Actions | `Button` (primary, secondary, ghost, danger; sm, md, lg; `loading`; `shape="pill"`), `buttonClassName()` for links, `ButtonGroup`, `CloseButton`, `CopyButton`, `ToggleButton`, `SegmentedControl`, `ToggleButtonGroup` (one or several on), `Toolbar` + `ToolbarSeparator` (arrow keys across its controls) |
+| Inputs | `Form` (the browser's checks, your own and the server's errors, under each field; `useFormStatus`), `Field`, `Fieldset`, `Input` (start and end content), `Textarea` (`autoGrow`), `NumberField`, `SearchField`, `InputOTP`, `ColorField`, `DateField` and `TimeField` (typed in segments, in the locale's order) |
+| Choices | `Checkbox`, `CheckboxGroup`, `RadioGroup` (plain or cards), `Switch`, `Select`, `Combobox`, `Slider` (one value or a range), `ChoiceCard`, `ListBox` (one or many, on the page) |
+| Pickers | `Calendar`, `DatePicker`, `RangeCalendar`, `DateRangePicker` (with presets), `ColorPicker`, `ColorArea`, `ColorSlider`, `ColorSwatchPicker`, `FileDropZone` |
+| Feedback | `Alert`, `Badge`, `ProgressBar`, `ProgressCircle`, `Meter` (an amount in a range, toned by thresholds), `Spinner`, `Skeleton`, `SkeletonRows`, `Toaster` + `toast()` (sonner: stacked, swipeable, with actions and promises), `Tooltip` |
 | Overlays | `Dialog`, `ConfirmDialog`, `Drawer`, `Popover`, `Menu` + `MenuItem`, `CommandPalette` |
 | Navigation | `Tabs`, `Accordion`, `Disclosure`, `Breadcrumbs`, `Pagination`, `Steps`, `NavList` + `NavItem` |
 | Data display | `Table` (sorting, selection), `Stat`, `FileTree`, `EmptyState`, `Tag`, `ColorSwatch`, `Avatar`, `AvatarGroup`, `User` |
+| AI | `PromptInput` (attachments, stop while streaming) + `PromptSuggestion`, `ChatConversation` (follows the newest message, jump to latest), `ChatMessage` + `ChatMessageActions`, `ChatLoader`, `ChatTool` (a tool call with its status, input, output and approval), `ChainOfThought`, `ChatSource` + `ChatSources`, `TextShimmer` |
 | Layout | `Card`, `SettingsRow`, `Stack`, `Separator`, `ScrollShadow`, `VisuallyHidden` |
 | Marketing | `SiteHeader`, `SectionHeading`, `Chip`, `DotGrid` |
 

package/dist/components/Calendar/Calendar.d.cts

@@ -1,3 +1,4 @@
+import { type KeyboardEvent, type Ref } from "react";
 import { type ISODate } from "./dates.cjs";
 export interface CalendarProps {
     /** The chosen date as "YYYY-MM-DD", or "" for none. */
@@ -29,3 +30,60 @@ export interface CalendarHandle {
  * (with Shift, by year), Home and End to the week's ends. Today is marked with a brass dot.
  */
 export declare const Calendar: import("react").ForwardRefExoticComponent<CalendarProps & import("react").RefAttributes<CalendarHandle>>;
+/** Whether the month before `first` has a day on or after `min`. */
+export declare function canShowBefore(first: ISODate, min: ISODate | undefined): boolean;
+/** Whether the month after `last` (the first of the last month shown) has a day on or before `max`. */
+export declare function canShowAfter(last: ISODate, max: ISODate | undefined): boolean;
+/** Where a key moves the focus from `date`: a day, a week, the week's ends, a month (with Shift, a year). */
+export declare function dateForKey(event: KeyboardEvent<HTMLElement>, date: ISODate, weekStartsOn: 0 | 1): ISODate | undefined;
+/** Which way the month changed since the last render, so the new one slides in from that side. */
+export declare function useSlide(month: number): "next" | "previous" | undefined;
+interface MonthNavButton {
+    disabled: boolean;
+    onClick(): void;
+}
+export interface MonthHeaderProps {
+    /** The first day of the month shown. */
+    month: ISODate;
+    locale?: string;
+    slide?: "next" | "previous";
+    /** The previous-month button, or null for an empty space of the same size. */
+    previous: MonthNavButton | null;
+    /** The next-month button, or null for an empty space of the same size. */
+    next: MonthNavButton | null;
+}
+/** The month's name between the previous- and next-month buttons. */
+export declare function MonthHeader({ month, locale, slide, previous, next }: MonthHeaderProps): import("react").JSX.Element;
+export interface MonthGridProps {
+    /** The first day of the month shown. */
+    month: ISODate;
+    /** The day that takes Tab focus (roving tabindex). */
+    focused: ISODate;
+    today: ISODate;
+    locale?: string;
+    weekStartsOn: 0 | 1;
+    slide?: "next" | "previous";
+    /** Leaves the days of the months either side empty, for months shown side by side. */
+    hideOutsideDays?: boolean;
+    isDisabled(date: ISODate): boolean;
+    /** aria-selected on the day's cell. */
+    isSelected(date: ISODate): boolean;
+    /** Fills the day with the primary colour. */
+    isFilled(date: ISODate): boolean;
+    /** Extra classes for a day's cell; `column` is 0 to 6 across the week. */
+    cellClassName?(date: ISODate, column: number): string | undefined;
+    /** Extra classes for a day's button. */
+    dayClassName?(date: ISODate): string | undefined;
+    /** Extra attributes for a day's button. */
+    dayProps?(date: ISODate): {
+        "aria-describedby"?: string;
+    };
+    onChoose(date: ISODate): void;
+    onDayKeyDown(event: KeyboardEvent<HTMLButtonElement>, date: ISODate): void;
+    onDayFocus(date: ISODate): void;
+    onDayPointerEnter?(date: ISODate): void;
+    gridRef?: Ref<HTMLTableElement>;
+}
+/** One month as a grid of day buttons: six weeks, weekday names above, each day read out in full. */
+export declare function MonthGrid({ month, focused, today, locale, weekStartsOn, slide, hideOutsideDays, isDisabled, isSelected, isFilled, cellClassName, dayClassName, dayProps, onChoose, onDayKeyDown, onDayFocus, onDayPointerEnter, gridRef, }: MonthGridProps): import("react").JSX.Element;
+export {};

package/dist/components/Calendar/Calendar.d.ts

@@ -1,3 +1,4 @@
+import { type KeyboardEvent, type Ref } from "react";
 import { type ISODate } from "./dates.js";
 export interface CalendarProps {
     /** The chosen date as "YYYY-MM-DD", or "" for none. */
@@ -29,3 +30,60 @@ export interface CalendarHandle {
  * (with Shift, by year), Home and End to the week's ends. Today is marked with a brass dot.
  */
 export declare const Calendar: import("react").ForwardRefExoticComponent<CalendarProps & import("react").RefAttributes<CalendarHandle>>;
+/** Whether the month before `first` has a day on or after `min`. */
+export declare function canShowBefore(first: ISODate, min: ISODate | undefined): boolean;
+/** Whether the month after `last` (the first of the last month shown) has a day on or before `max`. */
+export declare function canShowAfter(last: ISODate, max: ISODate | undefined): boolean;
+/** Where a key moves the focus from `date`: a day, a week, the week's ends, a month (with Shift, a year). */
+export declare function dateForKey(event: KeyboardEvent<HTMLElement>, date: ISODate, weekStartsOn: 0 | 1): ISODate | undefined;
+/** Which way the month changed since the last render, so the new one slides in from that side. */
+export declare function useSlide(month: number): "next" | "previous" | undefined;
+interface MonthNavButton {
+    disabled: boolean;
+    onClick(): void;
+}
+export interface MonthHeaderProps {
+    /** The first day of the month shown. */
+    month: ISODate;
+    locale?: string;
+    slide?: "next" | "previous";
+    /** The previous-month button, or null for an empty space of the same size. */
+    previous: MonthNavButton | null;
+    /** The next-month button, or null for an empty space of the same size. */
+    next: MonthNavButton | null;
+}
+/** The month's name between the previous- and next-month buttons. */
+export declare function MonthHeader({ month, locale, slide, previous, next }: MonthHeaderProps): import("react").JSX.Element;
+export interface MonthGridProps {
+    /** The first day of the month shown. */
+    month: ISODate;
+    /** The day that takes Tab focus (roving tabindex). */
+    focused: ISODate;
+    today: ISODate;
+    locale?: string;
+    weekStartsOn: 0 | 1;
+    slide?: "next" | "previous";
+    /** Leaves the days of the months either side empty, for months shown side by side. */
+    hideOutsideDays?: boolean;
+    isDisabled(date: ISODate): boolean;
+    /** aria-selected on the day's cell. */
+    isSelected(date: ISODate): boolean;
+    /** Fills the day with the primary colour. */
+    isFilled(date: ISODate): boolean;
+    /** Extra classes for a day's cell; `column` is 0 to 6 across the week. */
+    cellClassName?(date: ISODate, column: number): string | undefined;
+    /** Extra classes for a day's button. */
+    dayClassName?(date: ISODate): string | undefined;
+    /** Extra attributes for a day's button. */
+    dayProps?(date: ISODate): {
+        "aria-describedby"?: string;
+    };
+    onChoose(date: ISODate): void;
+    onDayKeyDown(event: KeyboardEvent<HTMLButtonElement>, date: ISODate): void;
+    onDayFocus(date: ISODate): void;
+    onDayPointerEnter?(date: ISODate): void;
+    gridRef?: Ref<HTMLTableElement>;
+}
+/** One month as a grid of day buttons: six weeks, weekday names above, each day read out in full. */
+export declare function MonthGrid({ month, focused, today, locale, weekStartsOn, slide, hideOutsideDays, isDisabled, isSelected, isFilled, cellClassName, dayClassName, dayProps, onChoose, onDayKeyDown, onDayFocus, onDayPointerEnter, gridRef, }: MonthGridProps): import("react").JSX.Element;
+export {};

package/dist/components/Calendar/DateRangePicker.d.cts

@@ -0,0 +1,39 @@
+import { type DateRange, type RangeCalendarProps } from "./RangeCalendar.cjs";
+/** A named range to pick in one go, such as "Last 7 days". */
+export interface DateRangePreset {
+    /** What the list shows, in sentence case. */
+    label: string;
+    range: DateRange;
+}
+export interface DateRangePickerProps extends Omit<RangeCalendarProps, "autoFocus" | "className" | "visibleMonths"> {
+    /** Ranges to pick in one go, listed beside the calendar: "Last 7 days", "This month". */
+    presets?: DateRangePreset[];
+    /** How many months the calendar shows side by side. Phones always get one.
+     * @default 2 */
+    visibleMonths?: 1 | 2;
+    /** Shown when no range is chosen.
+     * @default "Pick dates" */
+    placeholder?: string;
+    /** How each date is written in the field; dates the two ends share are written once, as in "3 – 9 Oct 2026".
+     * @default { dateStyle: "medium" } */
+    formatOptions?: Intl.DateTimeFormatOptions;
+    /** md is 40px tall, sm 32px.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** @default false */
+    isInvalid?: boolean;
+    /** @default false */
+    disabled?: boolean;
+    /** For the field's button, so a label can point at it. */
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    /** Classes for the field, e.g. a width. */
+    className?: string;
+}
+/**
+ * A field that opens a two-month RangeCalendar, with optional presets beside it. Picking the second day, or a preset,
+ * closes it; Escape closes it without changing anything. Once there's a range, a clear button empties it.
+ */
+export declare const DateRangePicker: import("react").ForwardRefExoticComponent<DateRangePickerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Calendar/DateRangePicker.d.ts

@@ -0,0 +1,39 @@
+import { type DateRange, type RangeCalendarProps } from "./RangeCalendar.js";
+/** A named range to pick in one go, such as "Last 7 days". */
+export interface DateRangePreset {
+    /** What the list shows, in sentence case. */
+    label: string;
+    range: DateRange;
+}
+export interface DateRangePickerProps extends Omit<RangeCalendarProps, "autoFocus" | "className" | "visibleMonths"> {
+    /** Ranges to pick in one go, listed beside the calendar: "Last 7 days", "This month". */
+    presets?: DateRangePreset[];
+    /** How many months the calendar shows side by side. Phones always get one.
+     * @default 2 */
+    visibleMonths?: 1 | 2;
+    /** Shown when no range is chosen.
+     * @default "Pick dates" */
+    placeholder?: string;
+    /** How each date is written in the field; dates the two ends share are written once, as in "3 – 9 Oct 2026".
+     * @default { dateStyle: "medium" } */
+    formatOptions?: Intl.DateTimeFormatOptions;
+    /** md is 40px tall, sm 32px.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** @default false */
+    isInvalid?: boolean;
+    /** @default false */
+    disabled?: boolean;
+    /** For the field's button, so a label can point at it. */
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    /** Classes for the field, e.g. a width. */
+    className?: string;
+}
+/**
+ * A field that opens a two-month RangeCalendar, with optional presets beside it. Picking the second day, or a preset,
+ * closes it; Escape closes it without changing anything. Once there's a range, a clear button empties it.
+ */
+export declare const DateRangePicker: import("react").ForwardRefExoticComponent<DateRangePickerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Calendar/RangeCalendar.d.cts

@@ -0,0 +1,38 @@
+import { type CalendarHandle } from "./Calendar.cjs";
+import { type ISODate } from "./dates.cjs";
+/** A range of days, both ends included, as "YYYY-MM-DD". */
+export interface DateRange {
+    start: ISODate;
+    end: ISODate;
+}
+export interface RangeCalendarProps {
+    /** The chosen range, or null for none. */
+    value?: DateRange | null;
+    /** @default null */
+    defaultValue?: DateRange | null;
+    /** Called once both ends are picked, with the earlier day as the start. */
+    onChange?(range: DateRange | null): void;
+    /** The earliest day either end can be, "YYYY-MM-DD". */
+    min?: ISODate;
+    /** The latest day either end can be. */
+    max?: ISODate;
+    /** Return true for days that can't be an end of the range, such as weekends. A range can still run across them. */
+    isDateDisabled?(date: ISODate): boolean;
+    /** Month and day names follow this locale, e.g. "en-IE", "de-CH". Defaults to the browser's. */
+    locale?: string;
+    /** 1 starts weeks on Monday, 0 on Sunday.
+     * @default 1 */
+    weekStartsOn?: 0 | 1;
+    /** How many months show side by side. Two stack when there isn't room for both.
+     * @default 1 */
+    visibleMonths?: 1 | 2;
+    /** Focus the range's start (or today) on mount, for use in a popover.
+     * @default false */
+    autoFocus?: boolean;
+    className?: string;
+}
+/**
+ * Month grids for picking a range of days. The first pick sets the start and the range follows the pointer or the
+ * focus until the second pick sets the end; Escape drops a half-picked range. The keys move as in Calendar.
+ */
+export declare const RangeCalendar: import("react").ForwardRefExoticComponent<RangeCalendarProps & import("react").RefAttributes<CalendarHandle>>;

package/dist/components/Calendar/RangeCalendar.d.ts

@@ -0,0 +1,38 @@
+import { type CalendarHandle } from "./Calendar.js";
+import { type ISODate } from "./dates.js";
+/** A range of days, both ends included, as "YYYY-MM-DD". */
+export interface DateRange {
+    start: ISODate;
+    end: ISODate;
+}
+export interface RangeCalendarProps {
+    /** The chosen range, or null for none. */
+    value?: DateRange | null;
+    /** @default null */
+    defaultValue?: DateRange | null;
+    /** Called once both ends are picked, with the earlier day as the start. */
+    onChange?(range: DateRange | null): void;
+    /** The earliest day either end can be, "YYYY-MM-DD". */
+    min?: ISODate;
+    /** The latest day either end can be. */
+    max?: ISODate;
+    /** Return true for days that can't be an end of the range, such as weekends. A range can still run across them. */
+    isDateDisabled?(date: ISODate): boolean;
+    /** Month and day names follow this locale, e.g. "en-IE", "de-CH". Defaults to the browser's. */
+    locale?: string;
+    /** 1 starts weeks on Monday, 0 on Sunday.
+     * @default 1 */
+    weekStartsOn?: 0 | 1;
+    /** How many months show side by side. Two stack when there isn't room for both.
+     * @default 1 */
+    visibleMonths?: 1 | 2;
+    /** Focus the range's start (or today) on mount, for use in a popover.
+     * @default false */
+    autoFocus?: boolean;
+    className?: string;
+}
+/**
+ * Month grids for picking a range of days. The first pick sets the start and the range follows the pointer or the
+ * focus until the second pick sets the end; Escape drops a half-picked range. The keys move as in Calendar.
+ */
+export declare const RangeCalendar: import("react").ForwardRefExoticComponent<RangeCalendarProps & import("react").RefAttributes<CalendarHandle>>;

package/dist/components/Calendar/dates.d.cts

@@ -13,3 +13,16 @@ export declare function addMonths(iso: ISODate, months: number): ISODate;
 export declare function weekday(iso: ISODate): number;
 export declare function toDate(iso: ISODate): Date;
 export declare function formatDate(iso: ISODate, locale: string | undefined, options: Intl.DateTimeFormatOptions): string;
+/**
+ * Two dates as one range in the locale, sharing what they have in common: "3 – 9 Oct 2026", "28 Sept – 4 Oct 2026".
+ * The same day twice is written once.
+ */
+export declare function formatDateRange(start: ISODate, end: ISODate, locale: string | undefined, options: Intl.DateTimeFormatOptions): string;
+/** Keeps a date between min and max, when they're given. */
+export declare function clampDate(date: ISODate, min: ISODate | undefined, max: ISODate | undefined): ISODate;
+/** The first day of the month a date falls in. */
+export declare function startOfMonth(iso: ISODate): ISODate;
+/** Months counted from year 0, so two months can be compared and subtracted. */
+export declare function monthIndex(iso: ISODate): number;
+/** The six weeks a month grid shows for the month starting on `first`, each starting on `weekStartsOn`. */
+export declare function monthWeeks(first: ISODate, weekStartsOn: 0 | 1): ISODate[][];

package/dist/components/Calendar/dates.d.ts

@@ -13,3 +13,16 @@ export declare function addMonths(iso: ISODate, months: number): ISODate;
 export declare function weekday(iso: ISODate): number;
 export declare function toDate(iso: ISODate): Date;
 export declare function formatDate(iso: ISODate, locale: string | undefined, options: Intl.DateTimeFormatOptions): string;
+/**
+ * Two dates as one range in the locale, sharing what they have in common: "3 – 9 Oct 2026", "28 Sept – 4 Oct 2026".
+ * The same day twice is written once.
+ */
+export declare function formatDateRange(start: ISODate, end: ISODate, locale: string | undefined, options: Intl.DateTimeFormatOptions): string;
+/** Keeps a date between min and max, when they're given. */
+export declare function clampDate(date: ISODate, min: ISODate | undefined, max: ISODate | undefined): ISODate;
+/** The first day of the month a date falls in. */
+export declare function startOfMonth(iso: ISODate): ISODate;
+/** Months counted from year 0, so two months can be compared and subtracted. */
+export declare function monthIndex(iso: ISODate): number;
+/** The six weeks a month grid shows for the month starting on `first`, each starting on `weekStartsOn`. */
+export declare function monthWeeks(first: ISODate, weekStartsOn: 0 | 1): ISODate[][];

package/dist/components/ChainOfThought/ChainOfThought.d.cts

@@ -0,0 +1,44 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/** Where the reasoning, or one step of it, has got to. */
+export type ChainOfThoughtStatus = "pending" | "running" | "success" | "error";
+export interface ChainOfThoughtStep {
+    /** A stable key for the step, so it keeps its place as steps are added. */
+    id: string;
+    /** The step in words: "Find where invoice dates are formatted". */
+    title: ReactNode;
+    /** Where the step has got to: a hollow ring, a spinner, a check or a cross. */
+    status: ChainOfThoughtStatus;
+    /** More about the step under its title: what it found, a file path, a short list. */
+    detail?: ReactNode;
+    /** A 12px icon in place of the check or the hollow ring, e.g. a search icon. Running and failed steps keep their own mark. */
+    icon?: ReactNode;
+}
+export interface ChainOfThoughtProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** The plan, in order, each with its status. */
+    steps?: ChainOfThoughtStep[];
+    /** "running" shows "Thinking…" with a shimmer and keeps it open; anything else is finished.
+     * @default "success" */
+    status?: ChainOfThoughtStatus;
+    /** How long it thought, in milliseconds: "Thought for 12 s". */
+    duration?: number;
+    /** The header's words. Defaults to "Thinking…" while running and "Thought for 12 s" once done. */
+    label?: ReactNode;
+    /** The reasoning itself, as text, shown above the steps. It can grow while it streams in. */
+    children?: ReactNode;
+    /** Whether the reasoning shows. Leave out to let it follow `status`. */
+    expanded?: boolean;
+    /** Whether it starts open. Defaults to open while running and closed once done. */
+    defaultExpanded?: boolean;
+    /** Called with the new state when it opens or closes, by the person or by a change of status. */
+    onExpandedChange?(expanded: boolean): void;
+    /** Folds the reasoning away when `status` turns from "running" to done, unless the person has opened or closed it.
+     * @default true */
+    collapseWhenDone?: boolean;
+    /** The locale for the duration's digits, e.g. "de-CH". Defaults to the browser's. */
+    locale?: string;
+}
+/**
+ * An agent's reasoning and plan: a "Thinking…" header that opens to the reasoning and a list of steps on a thin line,
+ * each with its status. It stays open while the agent works and folds to "Thought for 12 s" when it's done.
+ */
+export declare const ChainOfThought: import("react").ForwardRefExoticComponent<ChainOfThoughtProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ChainOfThought/ChainOfThought.d.ts

@@ -0,0 +1,44 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/** Where the reasoning, or one step of it, has got to. */
+export type ChainOfThoughtStatus = "pending" | "running" | "success" | "error";
+export interface ChainOfThoughtStep {
+    /** A stable key for the step, so it keeps its place as steps are added. */
+    id: string;
+    /** The step in words: "Find where invoice dates are formatted". */
+    title: ReactNode;
+    /** Where the step has got to: a hollow ring, a spinner, a check or a cross. */
+    status: ChainOfThoughtStatus;
+    /** More about the step under its title: what it found, a file path, a short list. */
+    detail?: ReactNode;
+    /** A 12px icon in place of the check or the hollow ring, e.g. a search icon. Running and failed steps keep their own mark. */
+    icon?: ReactNode;
+}
+export interface ChainOfThoughtProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** The plan, in order, each with its status. */
+    steps?: ChainOfThoughtStep[];
+    /** "running" shows "Thinking…" with a shimmer and keeps it open; anything else is finished.
+     * @default "success" */
+    status?: ChainOfThoughtStatus;
+    /** How long it thought, in milliseconds: "Thought for 12 s". */
+    duration?: number;
+    /** The header's words. Defaults to "Thinking…" while running and "Thought for 12 s" once done. */
+    label?: ReactNode;
+    /** The reasoning itself, as text, shown above the steps. It can grow while it streams in. */
+    children?: ReactNode;
+    /** Whether the reasoning shows. Leave out to let it follow `status`. */
+    expanded?: boolean;
+    /** Whether it starts open. Defaults to open while running and closed once done. */
+    defaultExpanded?: boolean;
+    /** Called with the new state when it opens or closes, by the person or by a change of status. */
+    onExpandedChange?(expanded: boolean): void;
+    /** Folds the reasoning away when `status` turns from "running" to done, unless the person has opened or closed it.
+     * @default true */
+    collapseWhenDone?: boolean;
+    /** The locale for the duration's digits, e.g. "de-CH". Defaults to the browser's. */
+    locale?: string;
+}
+/**
+ * An agent's reasoning and plan: a "Thinking…" header that opens to the reasoning and a list of steps on a thin line,
+ * each with its status. It stays open while the agent works and folds to "Thought for 12 s" when it's done.
+ */
+export declare const ChainOfThought: import("react").ForwardRefExoticComponent<ChainOfThoughtProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Chat/ChatConversation.d.cts

@@ -0,0 +1,48 @@
+import { type HTMLAttributes, type MutableRefObject, type ReactNode } from "react";
+export interface ChatConversationProps extends HTMLAttributes<HTMLDivElement> {
+    /** The messages: ChatMessages, a ChatLoader, anything else in the column. */
+    children?: ReactNode;
+    /** Shown in place of the messages while there are none: a greeting, suggestions, an EmptyState. */
+    empty?: ReactNode;
+    /** Docked under the messages and lined up with them, outside the log: usually a PromptInput. It stays in view while
+     * the messages scroll, and Jump to latest floats above it. */
+    footer?: ReactNode;
+    /** Names the conversation for screen readers.
+     * @default "Conversation" */
+    "aria-label"?: string;
+    /** The id of a visible heading that names the conversation, in place of aria-label. */
+    "aria-labelledby"?: string;
+    /** `comfortable` keeps the messages in a 720px column in the middle, for reading; `full` lets them use the whole
+     * width, for a narrow side panel.
+     * @default "comfortable" */
+    width?: "comfortable" | "full";
+    /** The words on the button that appears once the reader scrolls up.
+     * @default "Jump to latest" */
+    jumpLabel?: string;
+    /** How that button counts the messages that arrived while the reader was scrolled up.
+     * @default (count) => `${count} new` */
+    formatNewCount?(count: number): string;
+}
+export interface ChatConversationHandle {
+    /** Scrolls to the newest message and follows new content again: smoothly, or at once under reduced motion. Call it
+     * when the person sends a message, so they see their own words and the answer. */
+    scrollToBottom(options?: {
+        behavior?: ScrollBehavior;
+    }): void;
+}
+/** What messages inside a conversation need from it. */
+interface ChatConversationContextValue {
+    /** True once the first messages have painted: messages that mount after that animate in. */
+    ready: MutableRefObject<boolean>;
+    /** A message mounted; it counts as new while the reader is scrolled up. Returns the cleanup for when it goes. */
+    register(id: string): () => void;
+}
+/** @internal */
+export declare const ChatConversationContext: import("react").Context<ChatConversationContextValue | null>;
+/**
+ * The scrolling column of a chat. It follows the newest content while the reader is at the bottom (new messages, an
+ * answer that's still streaming), stops as soon as they scroll up to read, and offers a "Jump to latest" button to
+ * come back. It's a polite live region (role="log"), so screen readers hear messages as they're added.
+ */
+export declare const ChatConversation: import("react").ForwardRefExoticComponent<ChatConversationProps & import("react").RefAttributes<ChatConversationHandle>>;
+export {};

package/dist/components/Chat/ChatConversation.d.ts

@@ -0,0 +1,48 @@
+import { type HTMLAttributes, type MutableRefObject, type ReactNode } from "react";
+export interface ChatConversationProps extends HTMLAttributes<HTMLDivElement> {
+    /** The messages: ChatMessages, a ChatLoader, anything else in the column. */
+    children?: ReactNode;
+    /** Shown in place of the messages while there are none: a greeting, suggestions, an EmptyState. */
+    empty?: ReactNode;
+    /** Docked under the messages and lined up with them, outside the log: usually a PromptInput. It stays in view while
+     * the messages scroll, and Jump to latest floats above it. */
+    footer?: ReactNode;
+    /** Names the conversation for screen readers.
+     * @default "Conversation" */
+    "aria-label"?: string;
+    /** The id of a visible heading that names the conversation, in place of aria-label. */
+    "aria-labelledby"?: string;
+    /** `comfortable` keeps the messages in a 720px column in the middle, for reading; `full` lets them use the whole
+     * width, for a narrow side panel.
+     * @default "comfortable" */
+    width?: "comfortable" | "full";
+    /** The words on the button that appears once the reader scrolls up.
+     * @default "Jump to latest" */
+    jumpLabel?: string;
+    /** How that button counts the messages that arrived while the reader was scrolled up.
+     * @default (count) => `${count} new` */
+    formatNewCount?(count: number): string;
+}
+export interface ChatConversationHandle {
+    /** Scrolls to the newest message and follows new content again: smoothly, or at once under reduced motion. Call it
+     * when the person sends a message, so they see their own words and the answer. */
+    scrollToBottom(options?: {
+        behavior?: ScrollBehavior;
+    }): void;
+}
+/** What messages inside a conversation need from it. */
+interface ChatConversationContextValue {
+    /** True once the first messages have painted: messages that mount after that animate in. */
+    ready: MutableRefObject<boolean>;
+    /** A message mounted; it counts as new while the reader is scrolled up. Returns the cleanup for when it goes. */
+    register(id: string): () => void;
+}
+/** @internal */
+export declare const ChatConversationContext: import("react").Context<ChatConversationContextValue | null>;
+/**
+ * The scrolling column of a chat. It follows the newest content while the reader is at the bottom (new messages, an
+ * answer that's still streaming), stops as soon as they scroll up to read, and offers a "Jump to latest" button to
+ * come back. It's a polite live region (role="log"), so screen readers hear messages as they're added.
+ */
+export declare const ChatConversation: import("react").ForwardRefExoticComponent<ChatConversationProps & import("react").RefAttributes<ChatConversationHandle>>;
+export {};

package/dist/components/Chat/ChatLoader.d.cts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+export interface ChatLoaderProps {
+    /** Words in place of the dots, with a shimmer across them: "Thinking…", "Reading the codebase…". */
+    label?: ReactNode;
+    /** Just the dots or the label, without a message's avatar and spacing: for inside a message, a step or a status bar.
+     * @default false */
+    inline?: boolean;
+    /** The agent's name above, as on its messages: "Acme agent". */
+    name?: ReactNode;
+    /** The agent's bot tile by default; any node in its place, or null for none. */
+    avatar?: ReactNode;
+    /** What screen readers hear while the dots show. With a `label`, they hear the label.
+     * @default "Working…" */
+    srLabel?: string;
+    className?: string;
+}
+/**
+ * The agent is working and nothing has arrived yet: three dots that pulse in turn, or a shimmering label such as
+ * "Thinking…". It sits in the conversation like the agent's next message, so the answer takes its place without a jump.
+ */
+export declare function ChatLoader({ label, inline, name, avatar, srLabel, className }: ChatLoaderProps): import("react").JSX.Element;

package/dist/components/Chat/ChatLoader.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+export interface ChatLoaderProps {
+    /** Words in place of the dots, with a shimmer across them: "Thinking…", "Reading the codebase…". */
+    label?: ReactNode;
+    /** Just the dots or the label, without a message's avatar and spacing: for inside a message, a step or a status bar.
+     * @default false */
+    inline?: boolean;
+    /** The agent's name above, as on its messages: "Acme agent". */
+    name?: ReactNode;
+    /** The agent's bot tile by default; any node in its place, or null for none. */
+    avatar?: ReactNode;
+    /** What screen readers hear while the dots show. With a `label`, they hear the label.
+     * @default "Working…" */
+    srLabel?: string;
+    className?: string;
+}
+/**
+ * The agent is working and nothing has arrived yet: three dots that pulse in turn, or a shimmering label such as
+ * "Thinking…". It sits in the conversation like the agent's next message, so the answer takes its place without a jump.
+ */
+export declare function ChatLoader({ label, inline, name, avatar, srLabel, className }: ChatLoaderProps): import("react").JSX.Element;