@openwarelabs/ui 0.3.1 → 0.5.0

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

@@ -0,0 +1,93 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface ChatAgentAvatarProps {
+    /** sm 24px, md 28px beside a message, lg 36px in a page or panel header: the sizes of Avatar.
+     * @default "md" */
+    size?: "sm" | "md" | "lg";
+    /** Give it when the avatar stands alone; beside the agent's name, leave it out and it's hidden from screen readers. */
+    label?: string;
+    className?: string;
+}
+/**
+ * The agent's avatar: a bot icon on a tinted circle, in the sizes of Avatar. Messages and the loader show it by
+ * default; use it wherever else the agent appears, such as a chat's header.
+ */
+export declare function ChatAgentAvatar({ size, label, className }: ChatAgentAvatarProps): import("react").JSX.Element;
+/**
+ * Whether this message or loader should animate in: only when it arrives in a conversation that's already showing,
+ * not for the history it opens with.
+ * @internal
+ */
+export declare function useChatEntrance(): boolean;
+export type ChatMessageFrom = "user" | "assistant" | "system";
+export type ChatMessageStatus = "streaming" | "done" | "error";
+export interface ChatMessageProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /** Who it's from. `user`: the person, in a bubble on the right. `assistant`: the agent, full width beside its
+     * avatar. `system`: a muted line in the middle, between hairlines, for things that happened ("Maya changed the
+     * model to Claude Sonnet"). */
+    from: ChatMessageFrom;
+    /** The message. A person's plain text keeps its line breaks; give an agent's formatted answer as Prose, and put
+     * paragraphs in Text so blocks sit 12px apart. */
+    children?: ReactNode;
+    /** Shown above the message: "Acme agent", "Maya Chen". Left out, screen readers hear "You" or "Agent" instead. */
+    name?: ReactNode;
+    /** The agent's bot tile by default; any node (an Avatar) in its place, or null for none. A person's message shows one
+     * only when you give it. */
+    avatar?: ReactNode;
+    /** When it was sent, as a Date or an ISO string. It shows as a short local time, with the full date on hover. */
+    time?: Date | string;
+    /** The locale for the time, such as "en-GB". Defaults to the browser's. */
+    locale?: string;
+    /** `streaming` while the text is still arriving: a soft caret blinks after it and the message is aria-busy.
+     * `error` shows a line saying what went wrong, with Retry when you pass `onRetry`.
+     * @default "done" */
+    status?: ChatMessageStatus;
+    /** What went wrong, for `status="error"`.
+     * @default "The answer didn't finish." for the agent, "Couldn't send this message." for a person */
+    error?: ReactNode;
+    /** Shows a Retry button on the error line. */
+    onRetry?(): void;
+    /** The Retry button's words, for another language.
+     * @default "Retry" */
+    retryLabel?: string;
+    /** Actions under the message, usually a ChatMessageActions. They wait until the message has finished streaming. */
+    actions?: ReactNode;
+    /** `hover` shows the actions while the message is hovered or has focus, and always on touch screens. `always` keeps
+     * them in view, for the latest answer.
+     * @default "hover" */
+    showActions?: "hover" | "always";
+}
+/**
+ * One message in a conversation: the person's in a bubble on the right, the agent's across the full width with its
+ * avatar, name and time, or a system line in the middle. It shows a caret while the answer streams, an error with
+ * Retry when it fails, and its actions on hover.
+ */
+export declare const ChatMessage: import("react").ForwardRefExoticComponent<ChatMessageProps & import("react").RefAttributes<HTMLElement>>;
+export type ChatRating = "up" | "down";
+export interface ChatMessageActionsProps {
+    /** The message as plain text. Shows Copy, which copies it and says "Copied" for two seconds. */
+    copyText?: string;
+    /** Shows Edit, for the person's own messages. */
+    onEdit?(): void;
+    /** Shows Retry, to ask for the answer again. */
+    onRetry?(): void;
+    /** Shows Good response and Bad response. Called with the one pressed, or null when the pressed one is pressed again. */
+    onRate?(rating: ChatRating | null): void;
+    /** Which rating is pressed, when you keep it yourself. */
+    rating?: ChatRating | null;
+    /** The starting rating when uncontrolled.
+     * @default null */
+    defaultRating?: ChatRating | null;
+    /** More actions after these: ghost, sm, icon-only Buttons, each in a Tooltip with its aria-label. */
+    children?: ReactNode;
+    /** The buttons' words, for another language. */
+    labels?: Partial<Record<"copy" | "copied" | "edit" | "retry" | "good" | "bad", string>>;
+    /** Names the toolbar for screen readers.
+     * @default "Message actions" */
+    "aria-label"?: string;
+    className?: string;
+}
+/**
+ * The row of small actions under a message: Copy, Edit, Retry, and Good or Bad response. Only the ones you give a
+ * callback (or `copyText`) appear. It's a toolbar: one tab stop, with the arrow keys moving between the buttons.
+ */
+export declare function ChatMessageActions({ copyText: text, onEdit, onRetry, onRate, rating, defaultRating, children, labels, "aria-label": ariaLabel, className, }: ChatMessageActionsProps): import("react").JSX.Element;

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

@@ -0,0 +1,93 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface ChatAgentAvatarProps {
+    /** sm 24px, md 28px beside a message, lg 36px in a page or panel header: the sizes of Avatar.
+     * @default "md" */
+    size?: "sm" | "md" | "lg";
+    /** Give it when the avatar stands alone; beside the agent's name, leave it out and it's hidden from screen readers. */
+    label?: string;
+    className?: string;
+}
+/**
+ * The agent's avatar: a bot icon on a tinted circle, in the sizes of Avatar. Messages and the loader show it by
+ * default; use it wherever else the agent appears, such as a chat's header.
+ */
+export declare function ChatAgentAvatar({ size, label, className }: ChatAgentAvatarProps): import("react").JSX.Element;
+/**
+ * Whether this message or loader should animate in: only when it arrives in a conversation that's already showing,
+ * not for the history it opens with.
+ * @internal
+ */
+export declare function useChatEntrance(): boolean;
+export type ChatMessageFrom = "user" | "assistant" | "system";
+export type ChatMessageStatus = "streaming" | "done" | "error";
+export interface ChatMessageProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /** Who it's from. `user`: the person, in a bubble on the right. `assistant`: the agent, full width beside its
+     * avatar. `system`: a muted line in the middle, between hairlines, for things that happened ("Maya changed the
+     * model to Claude Sonnet"). */
+    from: ChatMessageFrom;
+    /** The message. A person's plain text keeps its line breaks; give an agent's formatted answer as Prose, and put
+     * paragraphs in Text so blocks sit 12px apart. */
+    children?: ReactNode;
+    /** Shown above the message: "Acme agent", "Maya Chen". Left out, screen readers hear "You" or "Agent" instead. */
+    name?: ReactNode;
+    /** The agent's bot tile by default; any node (an Avatar) in its place, or null for none. A person's message shows one
+     * only when you give it. */
+    avatar?: ReactNode;
+    /** When it was sent, as a Date or an ISO string. It shows as a short local time, with the full date on hover. */
+    time?: Date | string;
+    /** The locale for the time, such as "en-GB". Defaults to the browser's. */
+    locale?: string;
+    /** `streaming` while the text is still arriving: a soft caret blinks after it and the message is aria-busy.
+     * `error` shows a line saying what went wrong, with Retry when you pass `onRetry`.
+     * @default "done" */
+    status?: ChatMessageStatus;
+    /** What went wrong, for `status="error"`.
+     * @default "The answer didn't finish." for the agent, "Couldn't send this message." for a person */
+    error?: ReactNode;
+    /** Shows a Retry button on the error line. */
+    onRetry?(): void;
+    /** The Retry button's words, for another language.
+     * @default "Retry" */
+    retryLabel?: string;
+    /** Actions under the message, usually a ChatMessageActions. They wait until the message has finished streaming. */
+    actions?: ReactNode;
+    /** `hover` shows the actions while the message is hovered or has focus, and always on touch screens. `always` keeps
+     * them in view, for the latest answer.
+     * @default "hover" */
+    showActions?: "hover" | "always";
+}
+/**
+ * One message in a conversation: the person's in a bubble on the right, the agent's across the full width with its
+ * avatar, name and time, or a system line in the middle. It shows a caret while the answer streams, an error with
+ * Retry when it fails, and its actions on hover.
+ */
+export declare const ChatMessage: import("react").ForwardRefExoticComponent<ChatMessageProps & import("react").RefAttributes<HTMLElement>>;
+export type ChatRating = "up" | "down";
+export interface ChatMessageActionsProps {
+    /** The message as plain text. Shows Copy, which copies it and says "Copied" for two seconds. */
+    copyText?: string;
+    /** Shows Edit, for the person's own messages. */
+    onEdit?(): void;
+    /** Shows Retry, to ask for the answer again. */
+    onRetry?(): void;
+    /** Shows Good response and Bad response. Called with the one pressed, or null when the pressed one is pressed again. */
+    onRate?(rating: ChatRating | null): void;
+    /** Which rating is pressed, when you keep it yourself. */
+    rating?: ChatRating | null;
+    /** The starting rating when uncontrolled.
+     * @default null */
+    defaultRating?: ChatRating | null;
+    /** More actions after these: ghost, sm, icon-only Buttons, each in a Tooltip with its aria-label. */
+    children?: ReactNode;
+    /** The buttons' words, for another language. */
+    labels?: Partial<Record<"copy" | "copied" | "edit" | "retry" | "good" | "bad", string>>;
+    /** Names the toolbar for screen readers.
+     * @default "Message actions" */
+    "aria-label"?: string;
+    className?: string;
+}
+/**
+ * The row of small actions under a message: Copy, Edit, Retry, and Good or Bad response. Only the ones you give a
+ * callback (or `copyText`) appear. It's a toolbar: one tab stop, with the arrow keys moving between the buttons.
+ */
+export declare function ChatMessageActions({ copyText: text, onEdit, onRetry, onRate, rating, defaultRating, children, labels, "aria-label": ariaLabel, className, }: ChatMessageActionsProps): import("react").JSX.Element;

package/dist/components/ChatSource/ChatSource.d.cts

@@ -0,0 +1,58 @@
+import { type HTMLAttributes, type MouseEvent, type ReactNode } from "react";
+/** One source an answer drew on: a file, a pull request, a web page. ChatSource and ChatSources both take it. */
+export interface ChatSourceItem {
+    /** What it is: a function, a pull request's title, a page's title. */
+    title: ReactNode;
+    /** Where it is, in one line: "src/billing/invoice.ts · lines 40–72", "Pull request #482", "docs.stripe.com". */
+    source?: ReactNode;
+    /** A few lines from it, in the preview. ChatSources leaves it out. */
+    snippet?: ReactNode;
+    /** Where it opens. With it the citation is a link; without, a button. */
+    href?: string;
+    /** Opens `href` in a new tab, for sources outside your app.
+     * @default false */
+    external?: boolean;
+    /** A 15px icon for the kind of source, beside its title. */
+    icon?: ReactNode;
+    /** Its number, shown in the citation chip and on its card: [1], [2]. */
+    index?: number;
+}
+export interface ChatSourceProps extends ChatSourceItem {
+    /** A short name for the chip when there's no `index`: "invoice.ts", "#482". */
+    label?: string;
+    /** How a string `snippet` shows: `text` as a quote, `code` in the mono face with its line breaks kept.
+     * @default "text" */
+    snippetFormat?: "text" | "code";
+    /** The words of the preview's link to `href`.
+     * @default "Open" */
+    openLabel?: string;
+    /** Called when the chip is pressed, e.g. to show the source in a side panel. On touch, the first press opens the preview instead. */
+    onClick?(event: MouseEvent<HTMLElement>): void;
+    /** Names the chip for screen readers. Defaults to "Source 1", or the label. */
+    "aria-label"?: string;
+    /** Classes for the chip's wrapper, which also holds the preview. */
+    className?: string;
+}
+/**
+ * An inline citation in an answer: a small numbered chip that previews its source on hover, keyboard focus, or a tap,
+ * in a card above the page. The chip is a link to the source when it has an `href`; the preview describes it to screen
+ * readers without taking focus.
+ */
+export declare const ChatSource: import("react").ForwardRefExoticComponent<ChatSourceProps & import("react").RefAttributes<HTMLElement>>;
+export interface ChatSourcesProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** The sources, in the order the answer cites them. An `id` keeps each one's place as the list changes. */
+    sources: Array<ChatSourceItem & {
+        id?: string;
+    }>;
+    /** The toggle's words. Defaults to "3 sources". */
+    label?: ReactNode;
+    /** Whether the list shows. */
+    expanded?: boolean;
+    /** Whether the list starts open.
+     * @default false */
+    defaultExpanded?: boolean;
+    /** Called with the new state when the person opens or closes the list. */
+    onExpandedChange?(expanded: boolean): void;
+}
+/** The sources under an answer: a "3 sources" toggle that opens to a card for each, linking to it when it has an `href`. */
+export declare const ChatSources: import("react").ForwardRefExoticComponent<ChatSourcesProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ChatSource/ChatSource.d.ts

@@ -0,0 +1,58 @@
+import { type HTMLAttributes, type MouseEvent, type ReactNode } from "react";
+/** One source an answer drew on: a file, a pull request, a web page. ChatSource and ChatSources both take it. */
+export interface ChatSourceItem {
+    /** What it is: a function, a pull request's title, a page's title. */
+    title: ReactNode;
+    /** Where it is, in one line: "src/billing/invoice.ts · lines 40–72", "Pull request #482", "docs.stripe.com". */
+    source?: ReactNode;
+    /** A few lines from it, in the preview. ChatSources leaves it out. */
+    snippet?: ReactNode;
+    /** Where it opens. With it the citation is a link; without, a button. */
+    href?: string;
+    /** Opens `href` in a new tab, for sources outside your app.
+     * @default false */
+    external?: boolean;
+    /** A 15px icon for the kind of source, beside its title. */
+    icon?: ReactNode;
+    /** Its number, shown in the citation chip and on its card: [1], [2]. */
+    index?: number;
+}
+export interface ChatSourceProps extends ChatSourceItem {
+    /** A short name for the chip when there's no `index`: "invoice.ts", "#482". */
+    label?: string;
+    /** How a string `snippet` shows: `text` as a quote, `code` in the mono face with its line breaks kept.
+     * @default "text" */
+    snippetFormat?: "text" | "code";
+    /** The words of the preview's link to `href`.
+     * @default "Open" */
+    openLabel?: string;
+    /** Called when the chip is pressed, e.g. to show the source in a side panel. On touch, the first press opens the preview instead. */
+    onClick?(event: MouseEvent<HTMLElement>): void;
+    /** Names the chip for screen readers. Defaults to "Source 1", or the label. */
+    "aria-label"?: string;
+    /** Classes for the chip's wrapper, which also holds the preview. */
+    className?: string;
+}
+/**
+ * An inline citation in an answer: a small numbered chip that previews its source on hover, keyboard focus, or a tap,
+ * in a card above the page. The chip is a link to the source when it has an `href`; the preview describes it to screen
+ * readers without taking focus.
+ */
+export declare const ChatSource: import("react").ForwardRefExoticComponent<ChatSourceProps & import("react").RefAttributes<HTMLElement>>;
+export interface ChatSourcesProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** The sources, in the order the answer cites them. An `id` keeps each one's place as the list changes. */
+    sources: Array<ChatSourceItem & {
+        id?: string;
+    }>;
+    /** The toggle's words. Defaults to "3 sources". */
+    label?: ReactNode;
+    /** Whether the list shows. */
+    expanded?: boolean;
+    /** Whether the list starts open.
+     * @default false */
+    defaultExpanded?: boolean;
+    /** Called with the new state when the person opens or closes the list. */
+    onExpandedChange?(expanded: boolean): void;
+}
+/** The sources under an answer: a "3 sources" toggle that opens to a card for each, linking to it when it has an `href`. */
+export declare const ChatSources: import("react").ForwardRefExoticComponent<ChatSourcesProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ChatTool/ChatTool.d.cts

@@ -0,0 +1,89 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/**
+ * Where a tool call or a step has got to. `approval` waits for a person to approve it; `cancelled` didn't run or didn't
+ * finish because a person denied it or stopped the run.
+ */
+export type ChatToolStatus = "pending" | "running" | "success" | "error" | "approval" | "cancelled";
+/** The round mark before a tool call or a step: a spinner, a check, a cross, a "!", a slash or a hollow ring, with its status as words for screen readers. */
+export declare function ChatStatusMarker({ status, icon }: {
+    status: ChatToolStatus;
+    icon?: ReactNode;
+}): import("react").JSX.Element;
+/** "380 ms", "4.2 s", "12 s", "1 min 12 s", "1 h 4 min": a duration as people say it, with the locale's digits. */
+export declare function formatDuration(ms: number, locale?: string): string;
+/** A duration in a <time> element, so it carries a machine-readable value too. */
+export declare function ChatDuration({ ms, locale, className }: {
+    ms: number;
+    locale?: string;
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * Open state that follows a status: it opens when `wantsOpen` turns true (an error, a step under way) and closes again
+ * when it turns false, unless the person has opened or closed it themselves since. A controlled `expanded` is left alone.
+ */
+export declare function useStatusExpansion({ expanded, defaultExpanded, onExpandedChange, wantsOpen, closeWhenSettled, initial, }: {
+    expanded: boolean | undefined;
+    defaultExpanded: boolean | undefined;
+    onExpandedChange: ((expanded: boolean) => void) | undefined;
+    wantsOpen: boolean;
+    closeWhenSettled?: boolean;
+    initial?: boolean;
+}): [boolean, () => void];
+/**
+ * A panel that opens and closes under a disclosure button, animating its height (a 0fr → 1fr grid row). Closed, it's
+ * inert: nothing in it can be tabbed to or read out. `bleed` lets focus rings at its edges show past the clip.
+ */
+export declare function ChatCollapse({ id, open, bleed, className, children, }: {
+    id: string;
+    open: boolean;
+    bleed?: boolean;
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface ChatToolProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** What the agent is doing, in words: "Run the test suite". */
+    title: ReactNode;
+    /** The tool it calls, shown in code type beside the title: "run_tests". */
+    name?: string;
+    /** A 15px icon for the tool, before the title. */
+    icon?: ReactNode;
+    /** Where the call has got to. Running shows a spinner and a shimmering title; `approval` asks the person to approve it;
+     * `cancelled` is for a call they denied, or one the run stopped before it finished: say which in `summary`. */
+    status: ChatToolStatus;
+    /** The result in one line: "212 tests passed", "Read 3 files". */
+    summary?: ReactNode;
+    /** How long it took, or has taken so far, in milliseconds. Shown as "4.2 s". */
+    duration?: number;
+    /** What the tool was called with: a one-line string (a command) in a Snippet, a longer one in a code block, or an
+     * object as formatted JSON. Shown under "Input". */
+    input?: string | Record<string, unknown> | unknown[];
+    /** What the tool returned: a string in a code block, or any node (a list of files, a link). Shown under "Output". */
+    output?: ReactNode;
+    /** What went wrong, shown in the danger colour under "Error". */
+    error?: ReactNode;
+    /** Whether the input and output show. Leave out to let it follow the status: closed, opening for an error or an approval. */
+    expanded?: boolean;
+    /** Whether it starts open. Defaults to open for an error or an approval and closed otherwise. */
+    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;
+    /** What it asks to do, while `status` is "approval". Defaults to "Wants to run" and the tool's name. */
+    approvalMessage?: ReactNode;
+    /** The approve button's label: name the action, e.g. "Approve and publish".
+     * @default "Approve" */
+    approveLabel?: string;
+    /** The deny button's label, e.g. "Don't publish".
+     * @default "Deny" */
+    denyLabel?: string;
+    /** Called when the person approves the call. Move `status` on from "approval" in response. */
+    onApprove?(): void;
+    /** Called when the person refuses the call. Move `status` on to "cancelled" in response. */
+    onDeny?(): void;
+    /** The locale for the duration's digits, e.g. "de-CH". Defaults to the browser's. */
+    locale?: string;
+}
+/**
+ * One tool call an agent makes: what it's doing, the tool, its status and result on one row, which opens to show the
+ * input and output. A failed call opens to its error, and a call that needs approval asks for it with Approve and Deny.
+ */
+export declare const ChatTool: import("react").ForwardRefExoticComponent<ChatToolProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ChatTool/ChatTool.d.ts

@@ -0,0 +1,89 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/**
+ * Where a tool call or a step has got to. `approval` waits for a person to approve it; `cancelled` didn't run or didn't
+ * finish because a person denied it or stopped the run.
+ */
+export type ChatToolStatus = "pending" | "running" | "success" | "error" | "approval" | "cancelled";
+/** The round mark before a tool call or a step: a spinner, a check, a cross, a "!", a slash or a hollow ring, with its status as words for screen readers. */
+export declare function ChatStatusMarker({ status, icon }: {
+    status: ChatToolStatus;
+    icon?: ReactNode;
+}): import("react").JSX.Element;
+/** "380 ms", "4.2 s", "12 s", "1 min 12 s", "1 h 4 min": a duration as people say it, with the locale's digits. */
+export declare function formatDuration(ms: number, locale?: string): string;
+/** A duration in a <time> element, so it carries a machine-readable value too. */
+export declare function ChatDuration({ ms, locale, className }: {
+    ms: number;
+    locale?: string;
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * Open state that follows a status: it opens when `wantsOpen` turns true (an error, a step under way) and closes again
+ * when it turns false, unless the person has opened or closed it themselves since. A controlled `expanded` is left alone.
+ */
+export declare function useStatusExpansion({ expanded, defaultExpanded, onExpandedChange, wantsOpen, closeWhenSettled, initial, }: {
+    expanded: boolean | undefined;
+    defaultExpanded: boolean | undefined;
+    onExpandedChange: ((expanded: boolean) => void) | undefined;
+    wantsOpen: boolean;
+    closeWhenSettled?: boolean;
+    initial?: boolean;
+}): [boolean, () => void];
+/**
+ * A panel that opens and closes under a disclosure button, animating its height (a 0fr → 1fr grid row). Closed, it's
+ * inert: nothing in it can be tabbed to or read out. `bleed` lets focus rings at its edges show past the clip.
+ */
+export declare function ChatCollapse({ id, open, bleed, className, children, }: {
+    id: string;
+    open: boolean;
+    bleed?: boolean;
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface ChatToolProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** What the agent is doing, in words: "Run the test suite". */
+    title: ReactNode;
+    /** The tool it calls, shown in code type beside the title: "run_tests". */
+    name?: string;
+    /** A 15px icon for the tool, before the title. */
+    icon?: ReactNode;
+    /** Where the call has got to. Running shows a spinner and a shimmering title; `approval` asks the person to approve it;
+     * `cancelled` is for a call they denied, or one the run stopped before it finished: say which in `summary`. */
+    status: ChatToolStatus;
+    /** The result in one line: "212 tests passed", "Read 3 files". */
+    summary?: ReactNode;
+    /** How long it took, or has taken so far, in milliseconds. Shown as "4.2 s". */
+    duration?: number;
+    /** What the tool was called with: a one-line string (a command) in a Snippet, a longer one in a code block, or an
+     * object as formatted JSON. Shown under "Input". */
+    input?: string | Record<string, unknown> | unknown[];
+    /** What the tool returned: a string in a code block, or any node (a list of files, a link). Shown under "Output". */
+    output?: ReactNode;
+    /** What went wrong, shown in the danger colour under "Error". */
+    error?: ReactNode;
+    /** Whether the input and output show. Leave out to let it follow the status: closed, opening for an error or an approval. */
+    expanded?: boolean;
+    /** Whether it starts open. Defaults to open for an error or an approval and closed otherwise. */
+    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;
+    /** What it asks to do, while `status` is "approval". Defaults to "Wants to run" and the tool's name. */
+    approvalMessage?: ReactNode;
+    /** The approve button's label: name the action, e.g. "Approve and publish".
+     * @default "Approve" */
+    approveLabel?: string;
+    /** The deny button's label, e.g. "Don't publish".
+     * @default "Deny" */
+    denyLabel?: string;
+    /** Called when the person approves the call. Move `status` on from "approval" in response. */
+    onApprove?(): void;
+    /** Called when the person refuses the call. Move `status` on to "cancelled" in response. */
+    onDeny?(): void;
+    /** The locale for the duration's digits, e.g. "de-CH". Defaults to the browser's. */
+    locale?: string;
+}
+/**
+ * One tool call an agent makes: what it's doing, the tool, its status and result on one row, which opens to show the
+ * input and output. A failed call opens to its error, and a call that needs approval asks for it with Approve and Deny.
+ */
+export declare const ChatTool: import("react").ForwardRefExoticComponent<ChatToolProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ColorPicker/ColorArea.d.cts

@@ -0,0 +1,44 @@
+export interface ColorAreaProps {
+    /** The colour as hex, "#0d9488". Given with alpha ("#0d9488cc"), it keeps the alpha. */
+    value?: string;
+    /** The starting colour when uncontrolled.
+     * @default "#312c7e" */
+    defaultValue?: string;
+    /** Called with a lowercase hex as the person drags or presses the arrow keys. */
+    onChange?(color: string): void;
+    /** Called when the person lets go or releases the key, for work too slow to do on every move. */
+    onChangeEnd?(color: string): void;
+    /** The hue to show while the colour is a grey, which has none of its own. Pass a hue ColorSlider's `onHueChange`
+     * value here to keep the two in step on greys. Without it, the area keeps the last hue it had. */
+    hue?: number;
+    /** Pixels, or any CSS width. It never grows past its container.
+     * @default 232 */
+    width?: number | string;
+    /** Pixels, or any CSS height.
+     * @default 152 */
+    height?: number | string;
+    /** Fades it; the pointer and the keys do nothing.
+     * @default false */
+    disabled?: boolean;
+    /** The locale for the percentages screen readers hear. Defaults to the browser's. */
+    locale?: string;
+    /** The form field name; the hex is submitted under it. */
+    name?: string;
+    /** Names the area for screen readers; its two sliders are "Saturation" and "Brightness" within it.
+     * @default "Colour" */
+    "aria-label"?: string;
+    /** Names the area by a visible label's id, in place of aria-label. */
+    "aria-labelledby"?: string;
+    /** Ids of a hint or an error, read out after each slider's value. */
+    "aria-describedby"?: string;
+    /** The group's id. */
+    id?: string;
+    /** Classes for the area, e.g. a size. */
+    className?: string;
+}
+/**
+ * A square of one hue: saturation across, brightness up and down. Drag the thumb, or use the arrow keys.
+ * To screen readers it's two sliders, saturation and brightness, each reading out the colour.
+ * The ref is the saturation slider's input, for focusing it.
+ */
+export declare const ColorArea: import("react").ForwardRefExoticComponent<ColorAreaProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/ColorPicker/ColorArea.d.ts

@@ -0,0 +1,44 @@
+export interface ColorAreaProps {
+    /** The colour as hex, "#0d9488". Given with alpha ("#0d9488cc"), it keeps the alpha. */
+    value?: string;
+    /** The starting colour when uncontrolled.
+     * @default "#312c7e" */
+    defaultValue?: string;
+    /** Called with a lowercase hex as the person drags or presses the arrow keys. */
+    onChange?(color: string): void;
+    /** Called when the person lets go or releases the key, for work too slow to do on every move. */
+    onChangeEnd?(color: string): void;
+    /** The hue to show while the colour is a grey, which has none of its own. Pass a hue ColorSlider's `onHueChange`
+     * value here to keep the two in step on greys. Without it, the area keeps the last hue it had. */
+    hue?: number;
+    /** Pixels, or any CSS width. It never grows past its container.
+     * @default 232 */
+    width?: number | string;
+    /** Pixels, or any CSS height.
+     * @default 152 */
+    height?: number | string;
+    /** Fades it; the pointer and the keys do nothing.
+     * @default false */
+    disabled?: boolean;
+    /** The locale for the percentages screen readers hear. Defaults to the browser's. */
+    locale?: string;
+    /** The form field name; the hex is submitted under it. */
+    name?: string;
+    /** Names the area for screen readers; its two sliders are "Saturation" and "Brightness" within it.
+     * @default "Colour" */
+    "aria-label"?: string;
+    /** Names the area by a visible label's id, in place of aria-label. */
+    "aria-labelledby"?: string;
+    /** Ids of a hint or an error, read out after each slider's value. */
+    "aria-describedby"?: string;
+    /** The group's id. */
+    id?: string;
+    /** Classes for the area, e.g. a size. */
+    className?: string;
+}
+/**
+ * A square of one hue: saturation across, brightness up and down. Drag the thumb, or use the arrow keys.
+ * To screen readers it's two sliders, saturation and brightness, each reading out the colour.
+ * The ref is the saturation slider's input, for focusing it.
+ */
+export declare const ColorArea: import("react").ForwardRefExoticComponent<ColorAreaProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/ColorPicker/ColorSlider.d.cts

@@ -0,0 +1,53 @@
+import { type ReactNode } from "react";
+/** A channel a ColorSlider changes: HSL's hue, saturation or lightness, the alpha, or red, green or blue. */
+export type ColorChannel = "hue" | "saturation" | "lightness" | "alpha" | "red" | "green" | "blue";
+export interface ColorSliderProps {
+    /** The channel it changes. Saturation and lightness are HSL's; the track shows the channel's range for the current colour. */
+    channel: ColorChannel;
+    /** The colour as hex. The alpha channel takes and returns "#rrggbbaa"; the others keep any alpha they're given. */
+    value?: string;
+    /** The starting colour when uncontrolled.
+     * @default "#312c7e" */
+    defaultValue?: string;
+    /** Called with a lowercase hex as the person drags or presses the arrow keys. */
+    onChange?(color: string): void;
+    /** Called when the person lets go or releases the key, for work too slow to do on every move. */
+    onChangeEnd?(color: string): void;
+    /** The hue to show while the colour is a grey, which has none of its own. Without it, the slider keeps the last hue it had. */
+    hue?: number;
+    /** Called with the hue as a hue slider moves, including over a grey, whose hex doesn't change. Pass it on to a
+     * ColorArea's `hue` to keep the two in step. */
+    onHueChange?(hue: number): void;
+    /** Shown above the track, and names the slider for screen readers. */
+    label?: ReactNode;
+    /** Shows the channel's value (174°, 72%, or 0 to 255 for red, green and blue) at the right of the label.
+     * Defaults to true when there's a label. */
+    showValue?: boolean;
+    /** A vertical slider is 152px tall, a ColorArea's height; set another with CSS.
+     * @default "horizontal" */
+    orientation?: "horizontal" | "vertical";
+    /** Fades it; the pointer and the keys do nothing.
+     * @default false */
+    disabled?: boolean;
+    /** The locale for the value shown and read out. Defaults to the browser's. */
+    locale?: string;
+    /** The form field name; the hex is submitted under it. */
+    name?: string;
+    /** Names the slider when there's no label. Defaults to the channel's name ("Hue", "Opacity"), unless aria-labelledby
+     * or a Field names it. */
+    "aria-label"?: string;
+    /** Names the slider by a visible label's id. */
+    "aria-labelledby"?: string;
+    /** Ids of a hint or an error, read out after the value; a Field sets it. */
+    "aria-describedby"?: string;
+    /** The input's id; a Field sets it so its label names the slider. */
+    id?: string;
+    /** Classes for the slider's outer element, e.g. a height for a vertical one. */
+    className?: string;
+}
+/**
+ * Changes one channel of a colour by dragging, over a track that shows that channel's range: a hue slider, an
+ * opacity slider over a checkerboard, or red, green and blue. It works with the keyboard like Slider.
+ * The ref is its input, for focusing it.
+ */
+export declare const ColorSlider: import("react").ForwardRefExoticComponent<ColorSliderProps & import("react").RefAttributes<HTMLInputElement>>;