@openwarelabs/blocks 0.9.0 → 0.10.1

package/dist/blog/Blog01/Blog01.types.d.cts

@@ -0,0 +1,55 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction } from "../../shared/shared.types.cjs";
+/** Who wrote a post. */
+export interface Blog01Author {
+    /** Their name, which also gives the avatar's initials. */
+    name: string;
+    /** A line under it: "Product lead". */
+    jobTitle?: ReactNode;
+    /** A photo URL; the initials show without one. */
+    avatar?: string;
+}
+/** A post in the grid. */
+export interface Blog01Post {
+    /** The post's title, which links to it. */
+    title: ReactNode;
+    /** Where the post is. The whole card opens it. */
+    href: string;
+    /** A sentence or two under the title. */
+    excerpt?: ReactNode;
+    /** Its category, shown as a tag and matched against `categories` by the filter: "Product". */
+    category?: string;
+    /** When it was published, as people read it: "8 Oct 2026". */
+    date: ReactNode;
+    /** The same date for machines, as in <time dateTime>: "2026-10-08". */
+    dateTime?: string;
+    /** How long it takes to read: "4 min read". */
+    readingTime?: ReactNode;
+    /** Who wrote it, along the card's foot. */
+    author?: Blog01Author;
+    /** The image at the card's top, which fills a 16:10 frame: an `<img alt="">` or a drawing. */
+    cover?: ReactNode;
+}
+/** The words around the posts that aren't content, in English unless you pass your own. */
+export interface Blog01Labels {
+    /** The filter's first option, which shows every post. @default "All" */
+    all?: string;
+    /** The filter's accessible name. @default "Show posts about" */
+    filter?: string;
+}
+export interface Blog01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A short line in a Chip above the title, such as "Blog". */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence under the title. */
+    description?: ReactNode;
+    /** The posts, newest first, three to a row. */
+    posts: Blog01Post[];
+    /** Categories to filter the posts by, beside the heading; "All" comes first. Leave out for no filter. */
+    categories?: string[];
+    /** A button under the posts: "Browse every post". */
+    moreAction?: BlockAction;
+    /** Words that aren't content (field labels, names for screen readers, messages), in English unless you pass your own. */
+    labels?: Blog01Labels;
+}

package/dist/blog/Blog01/Blog01.types.d.ts

@@ -0,0 +1,55 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction } from "../../shared/shared.types.js";
+/** Who wrote a post. */
+export interface Blog01Author {
+    /** Their name, which also gives the avatar's initials. */
+    name: string;
+    /** A line under it: "Product lead". */
+    jobTitle?: ReactNode;
+    /** A photo URL; the initials show without one. */
+    avatar?: string;
+}
+/** A post in the grid. */
+export interface Blog01Post {
+    /** The post's title, which links to it. */
+    title: ReactNode;
+    /** Where the post is. The whole card opens it. */
+    href: string;
+    /** A sentence or two under the title. */
+    excerpt?: ReactNode;
+    /** Its category, shown as a tag and matched against `categories` by the filter: "Product". */
+    category?: string;
+    /** When it was published, as people read it: "8 Oct 2026". */
+    date: ReactNode;
+    /** The same date for machines, as in <time dateTime>: "2026-10-08". */
+    dateTime?: string;
+    /** How long it takes to read: "4 min read". */
+    readingTime?: ReactNode;
+    /** Who wrote it, along the card's foot. */
+    author?: Blog01Author;
+    /** The image at the card's top, which fills a 16:10 frame: an `<img alt="">` or a drawing. */
+    cover?: ReactNode;
+}
+/** The words around the posts that aren't content, in English unless you pass your own. */
+export interface Blog01Labels {
+    /** The filter's first option, which shows every post. @default "All" */
+    all?: string;
+    /** The filter's accessible name. @default "Show posts about" */
+    filter?: string;
+}
+export interface Blog01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A short line in a Chip above the title, such as "Blog". */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence under the title. */
+    description?: ReactNode;
+    /** The posts, newest first, three to a row. */
+    posts: Blog01Post[];
+    /** Categories to filter the posts by, beside the heading; "All" comes first. Leave out for no filter. */
+    categories?: string[];
+    /** A button under the posts: "Browse every post". */
+    moreAction?: BlockAction;
+    /** Words that aren't content (field labels, names for screen readers, messages), in English unless you pass your own. */
+    labels?: Blog01Labels;
+}

package/dist/blog/Blog02/Blog02.d.cts

@@ -0,0 +1,3 @@
+import type { Blog02Props } from "./Blog02.types.cjs";
+/** One post large, with its cover, excerpt, figures and author, and the next few in a row below it. */
+export declare function Blog02({ title, allLink, featured, posts, className, ...props }: Blog02Props): import("react").JSX.Element;

package/dist/blog/Blog02/Blog02.d.ts

@@ -0,0 +1,3 @@
+import type { Blog02Props } from "./Blog02.types.js";
+/** One post large, with its cover, excerpt, figures and author, and the next few in a row below it. */
+export declare function Blog02({ title, allLink, featured, posts, className, ...props }: Blog02Props): import("react").JSX.Element;

package/dist/blog/Blog02/Blog02.types.d.cts

@@ -0,0 +1,51 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.cjs";
+/** Who wrote a post. */
+export interface Blog02Author {
+    /** Their name, which also gives the avatar's initials. */
+    name: string;
+    /** A line under it, on the featured post: "Customer success". */
+    jobTitle?: ReactNode;
+    /** A photo URL; the initials show without one. */
+    avatar?: string;
+}
+/** A figure on the featured post, such as "Deploys a day: 2.3". */
+export interface Blog02Fact {
+    /** What it measures, under the figure. */
+    label: ReactNode;
+    /** The figure. */
+    value: ReactNode;
+}
+/** A post: the featured one, or one of those below it. */
+export interface Blog02Post {
+    /** The post's title, which links to it. */
+    title: ReactNode;
+    /** Where the post is. The whole post opens it. */
+    href: string;
+    /** Its category: a tag on the featured post, a word before the date on the others. */
+    category?: ReactNode;
+    /** When it was published, as people read it: "15 Sep 2026". */
+    date: ReactNode;
+    /** The same date for machines, as in <time dateTime>: "2026-09-15". */
+    dateTime?: string;
+    /** Who wrote it. */
+    author?: Blog02Author;
+    /** The post's image, which fills its frame: an `<img alt="">` or a drawing. A 16:10 thumbnail on the smaller posts. */
+    cover?: ReactNode;
+    /** A sentence or two under the title. Featured post only. */
+    excerpt?: ReactNode;
+    /** Up to three figures in a row under the excerpt. Featured post only. */
+    facts?: Blog02Fact[];
+    /** How long it takes to read: "6 min read". Featured post only. */
+    readingTime?: ReactNode;
+}
+export interface Blog02Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The section's heading. */
+    title: ReactNode;
+    /** A link beside it, with an arrow: "All posts". */
+    allLink?: BlockLink;
+    /** The post in the large card: its cover on the left, the story on the right. */
+    featured: Blog02Post;
+    /** The next few posts in a row below it, with a small cover beside each title. Three fit best. */
+    posts?: Blog02Post[];
+}

package/dist/blog/Blog02/Blog02.types.d.ts

@@ -0,0 +1,51 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.js";
+/** Who wrote a post. */
+export interface Blog02Author {
+    /** Their name, which also gives the avatar's initials. */
+    name: string;
+    /** A line under it, on the featured post: "Customer success". */
+    jobTitle?: ReactNode;
+    /** A photo URL; the initials show without one. */
+    avatar?: string;
+}
+/** A figure on the featured post, such as "Deploys a day: 2.3". */
+export interface Blog02Fact {
+    /** What it measures, under the figure. */
+    label: ReactNode;
+    /** The figure. */
+    value: ReactNode;
+}
+/** A post: the featured one, or one of those below it. */
+export interface Blog02Post {
+    /** The post's title, which links to it. */
+    title: ReactNode;
+    /** Where the post is. The whole post opens it. */
+    href: string;
+    /** Its category: a tag on the featured post, a word before the date on the others. */
+    category?: ReactNode;
+    /** When it was published, as people read it: "15 Sep 2026". */
+    date: ReactNode;
+    /** The same date for machines, as in <time dateTime>: "2026-09-15". */
+    dateTime?: string;
+    /** Who wrote it. */
+    author?: Blog02Author;
+    /** The post's image, which fills its frame: an `<img alt="">` or a drawing. A 16:10 thumbnail on the smaller posts. */
+    cover?: ReactNode;
+    /** A sentence or two under the title. Featured post only. */
+    excerpt?: ReactNode;
+    /** Up to three figures in a row under the excerpt. Featured post only. */
+    facts?: Blog02Fact[];
+    /** How long it takes to read: "6 min read". Featured post only. */
+    readingTime?: ReactNode;
+}
+export interface Blog02Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The section's heading. */
+    title: ReactNode;
+    /** A link beside it, with an arrow: "All posts". */
+    allLink?: BlockLink;
+    /** The post in the large card: its cover on the left, the story on the right. */
+    featured: Blog02Post;
+    /** The next few posts in a row below it, with a small cover beside each title. Three fit best. */
+    posts?: Blog02Post[];
+}

package/dist/blog/Blog03/Blog03.d.cts

@@ -0,0 +1,3 @@
+import type { Blog03Props } from "./Blog03.types.cjs";
+/** A changelog: releases down a timeline, the date and version on the left, the headline and its changes by group on the right. */
+export declare function Blog03({ eyebrow, title, description, links, releases, initialCount, labels, className, ...props }: Blog03Props): import("react").JSX.Element;

package/dist/blog/Blog03/Blog03.d.ts

@@ -0,0 +1,3 @@
+import type { Blog03Props } from "./Blog03.types.js";
+/** A changelog: releases down a timeline, the date and version on the left, the headline and its changes by group on the right. */
+export declare function Blog03({ eyebrow, title, description, links, releases, initialCount, labels, className, ...props }: Blog03Props): import("react").JSX.Element;

package/dist/blog/Blog03/Blog03.types.d.cts

@@ -0,0 +1,66 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BadgeVariant } from "@openwarelabs/ui";
+/** A group of a release's changes under a badge, such as New, Improved or Fixed. */
+export interface Blog03Change {
+    /** The group's badge: "New". */
+    label: string;
+    /** The badge's colour: "active" for new, "success" for improved, "neutral" for fixed.
+     * @default "neutral" */
+    variant?: BadgeVariant;
+    /** The changes, a sentence each. */
+    items: ReactNode[];
+}
+/** A release on the timeline. */
+export interface Blog03Release {
+    /** Its version, shown in code type after `labels.versionPrefix`: "2.14". */
+    version: string;
+    /** When it shipped, as people read it: "8 Oct 2026". */
+    date: ReactNode;
+    /** The same date for machines, as in <time dateTime>: "2026-10-08". */
+    dateTime?: string;
+    /** The headline change. */
+    title: ReactNode;
+    /** A sentence or two about it. */
+    summary?: ReactNode;
+    /** A picture of the headline change under the summary: a screenshot, or a drawing of it. */
+    visual?: ReactNode;
+    /** The changes, group by group. */
+    changes?: Blog03Change[];
+}
+/** A way to follow the changelog, beside the heading. */
+export interface Blog03Link {
+    /** The link's words: "RSS feed". */
+    label: ReactNode;
+    /** Where it goes. */
+    href: string;
+    /** A 15px icon before the words. */
+    icon?: ReactNode;
+}
+/** The words around the releases that aren't content, in English unless you pass your own. */
+export interface Blog03Labels {
+    /** What goes before each version. @default "v" */
+    versionPrefix?: string;
+    /** The badge on the newest release. @default "Latest" */
+    latest?: string;
+    /** The button that shows the rest, given how many are hidden. @default `Show ${count} older releases` */
+    showOlder?(count: number): string;
+    /** A group's list's accessible name. @default `${label} in ${version}` */
+    changes?(label: string, version: string): string;
+}
+export interface Blog03Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A short line in a Chip above the title, such as "Changelog". */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence under the title. */
+    description?: ReactNode;
+    /** Ways to follow along, beside the heading: a feed, an email. */
+    links?: Blog03Link[];
+    /** The releases, newest first, down a timeline. */
+    releases: Blog03Release[];
+    /** How many releases show before the button that shows the rest.
+     * @default 3 */
+    initialCount?: number;
+    /** Words that aren't content (field labels, names for screen readers, messages), in English unless you pass your own. */
+    labels?: Blog03Labels;
+}

package/dist/blog/Blog03/Blog03.types.d.ts

@@ -0,0 +1,66 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BadgeVariant } from "@openwarelabs/ui";
+/** A group of a release's changes under a badge, such as New, Improved or Fixed. */
+export interface Blog03Change {
+    /** The group's badge: "New". */
+    label: string;
+    /** The badge's colour: "active" for new, "success" for improved, "neutral" for fixed.
+     * @default "neutral" */
+    variant?: BadgeVariant;
+    /** The changes, a sentence each. */
+    items: ReactNode[];
+}
+/** A release on the timeline. */
+export interface Blog03Release {
+    /** Its version, shown in code type after `labels.versionPrefix`: "2.14". */
+    version: string;
+    /** When it shipped, as people read it: "8 Oct 2026". */
+    date: ReactNode;
+    /** The same date for machines, as in <time dateTime>: "2026-10-08". */
+    dateTime?: string;
+    /** The headline change. */
+    title: ReactNode;
+    /** A sentence or two about it. */
+    summary?: ReactNode;
+    /** A picture of the headline change under the summary: a screenshot, or a drawing of it. */
+    visual?: ReactNode;
+    /** The changes, group by group. */
+    changes?: Blog03Change[];
+}
+/** A way to follow the changelog, beside the heading. */
+export interface Blog03Link {
+    /** The link's words: "RSS feed". */
+    label: ReactNode;
+    /** Where it goes. */
+    href: string;
+    /** A 15px icon before the words. */
+    icon?: ReactNode;
+}
+/** The words around the releases that aren't content, in English unless you pass your own. */
+export interface Blog03Labels {
+    /** What goes before each version. @default "v" */
+    versionPrefix?: string;
+    /** The badge on the newest release. @default "Latest" */
+    latest?: string;
+    /** The button that shows the rest, given how many are hidden. @default `Show ${count} older releases` */
+    showOlder?(count: number): string;
+    /** A group's list's accessible name. @default `${label} in ${version}` */
+    changes?(label: string, version: string): string;
+}
+export interface Blog03Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A short line in a Chip above the title, such as "Changelog". */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence under the title. */
+    description?: ReactNode;
+    /** Ways to follow along, beside the heading: a feed, an email. */
+    links?: Blog03Link[];
+    /** The releases, newest first, down a timeline. */
+    releases: Blog03Release[];
+    /** How many releases show before the button that shows the rest.
+     * @default 3 */
+    initialCount?: number;
+    /** Words that aren't content (field labels, names for screen readers, messages), in English unless you pass your own. */
+    labels?: Blog03Labels;
+}

package/dist/blog/Blog04/Blog04.d.cts

@@ -0,0 +1,3 @@
+import type { Blog04Props } from "./Blog04.types.cjs";
+/** An article's page: the title, author and date, a wide cover, then the text at a readable width with On this page beside it. */
+export declare function Blog04({ backLink, category, topic, title, description, author, date, dateTime, readingTime, cover, children, sections, tags, shareUrl, labels, className, ...props }: Blog04Props): import("react").JSX.Element;

package/dist/blog/Blog04/Blog04.d.ts

@@ -0,0 +1,3 @@
+import type { Blog04Props } from "./Blog04.types.js";
+/** An article's page: the title, author and date, a wide cover, then the text at a readable width with On this page beside it. */
+export declare function Blog04({ backLink, category, topic, title, description, author, date, dateTime, readingTime, cover, children, sections, tags, shareUrl, labels, className, ...props }: Blog04Props): import("react").JSX.Element;

package/dist/blog/Blog04/Blog04.types.d.cts

@@ -0,0 +1,64 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.cjs";
+/** Who wrote the article. */
+export interface Blog04Author {
+    /** Their name, which also gives the avatar's initials. */
+    name: string;
+    /** A line under it: "Product lead". */
+    jobTitle?: ReactNode;
+    /** A photo URL; the initials show without one. */
+    avatar?: string;
+}
+/** A heading in the article, for On this page. */
+export interface Blog04Section {
+    /** The id of the heading in the article's text, which the link scrolls to. */
+    id: string;
+    /** The link's words, usually the heading's. */
+    title: ReactNode;
+}
+/** The words around the article that aren't content, in English unless you pass your own. */
+export interface Blog04Labels {
+    /** The heading over the list of sections, beside the text and in the fold above it. @default "On this page" */
+    contents?: string;
+    /** The tags' accessible name. @default "Topics" */
+    topics?: string;
+    /** The button that copies `shareUrl`. @default "Copy link" */
+    copyLink?: string;
+    /** What it says once it has. @default "Link copied" */
+    linkCopied?: string;
+}
+export interface Blog04Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A link back above the title, with an arrow: "All posts". */
+    backLink?: BlockLink;
+    /** The article's category, as a tag above the title: "Product". */
+    category?: ReactNode;
+    /** A word beside it: "Agents". */
+    topic?: ReactNode;
+    /** The article's title: the page's h1. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** Who wrote it. */
+    author?: Blog04Author;
+    /** When it was published, as people read it: "8 Oct 2026". */
+    date?: ReactNode;
+    /** The same date for machines, as in <time dateTime>: "2026-10-08". */
+    dateTime?: string;
+    /** How long it takes to read: "4 min read". */
+    readingTime?: ReactNode;
+    /** A wide image under the header, which fills a 12:5 frame (16:10 on phones): an `<img alt="">` or a drawing. */
+    cover?: ReactNode;
+    /**
+     * The text, at a readable width: `Text variant="prose"` paragraphs, `h2` headings (with the ids in `sections`), lists,
+     * a `blockquote`, a `CodeBlock`.
+     */
+    children: ReactNode;
+    /** The article's headings, listed in On this page beside the text (folded above it on smaller screens), the one being read marked. */
+    sections?: Blog04Section[];
+    /** Tags at the end of the text: "Agents", "Reviews". */
+    tags?: ReactNode[];
+    /** The article's address, which Copy link copies, at the end of the text and under On this page. */
+    shareUrl?: string;
+    /** Words that aren't content (field labels, names for screen readers, messages), in English unless you pass your own. */
+    labels?: Blog04Labels;
+}

package/dist/blog/Blog04/Blog04.types.d.ts

@@ -0,0 +1,64 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.js";
+/** Who wrote the article. */
+export interface Blog04Author {
+    /** Their name, which also gives the avatar's initials. */
+    name: string;
+    /** A line under it: "Product lead". */
+    jobTitle?: ReactNode;
+    /** A photo URL; the initials show without one. */
+    avatar?: string;
+}
+/** A heading in the article, for On this page. */
+export interface Blog04Section {
+    /** The id of the heading in the article's text, which the link scrolls to. */
+    id: string;
+    /** The link's words, usually the heading's. */
+    title: ReactNode;
+}
+/** The words around the article that aren't content, in English unless you pass your own. */
+export interface Blog04Labels {
+    /** The heading over the list of sections, beside the text and in the fold above it. @default "On this page" */
+    contents?: string;
+    /** The tags' accessible name. @default "Topics" */
+    topics?: string;
+    /** The button that copies `shareUrl`. @default "Copy link" */
+    copyLink?: string;
+    /** What it says once it has. @default "Link copied" */
+    linkCopied?: string;
+}
+export interface Blog04Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A link back above the title, with an arrow: "All posts". */
+    backLink?: BlockLink;
+    /** The article's category, as a tag above the title: "Product". */
+    category?: ReactNode;
+    /** A word beside it: "Agents". */
+    topic?: ReactNode;
+    /** The article's title: the page's h1. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** Who wrote it. */
+    author?: Blog04Author;
+    /** When it was published, as people read it: "8 Oct 2026". */
+    date?: ReactNode;
+    /** The same date for machines, as in <time dateTime>: "2026-10-08". */
+    dateTime?: string;
+    /** How long it takes to read: "4 min read". */
+    readingTime?: ReactNode;
+    /** A wide image under the header, which fills a 12:5 frame (16:10 on phones): an `<img alt="">` or a drawing. */
+    cover?: ReactNode;
+    /**
+     * The text, at a readable width: `Text variant="prose"` paragraphs, `h2` headings (with the ids in `sections`), lists,
+     * a `blockquote`, a `CodeBlock`.
+     */
+    children: ReactNode;
+    /** The article's headings, listed in On this page beside the text (folded above it on smaller screens), the one being read marked. */
+    sections?: Blog04Section[];
+    /** Tags at the end of the text: "Agents", "Reviews". */
+    tags?: ReactNode[];
+    /** The article's address, which Copy link copies, at the end of the text and under On this page. */
+    shareUrl?: string;
+    /** Words that aren't content (field labels, names for screen readers, messages), in English unless you pass your own. */
+    labels?: Blog04Labels;
+}

package/dist/chat/Chat01/Chat01.d.cts

@@ -0,0 +1,6 @@
+import type { Chat01Props } from "./Chat01.types.cjs";
+/**
+ * A chat with an agent that fills its frame: a header with the chat's name, then the messages, which scroll and keep
+ * the reply box docked below them. The person's messages can be copied and edited; the agent's copied and rated.
+ */
+export declare function Chat01({ title, context, messages, user, agentName, day, thinking, onSend, onStop, onNewChat, onRate, menu, menuHeading, empty, draft: draftProp, onDraftChange, locale, labels, className, ...props }: Chat01Props): import("react").JSX.Element;

package/dist/chat/Chat01/Chat01.d.ts

@@ -0,0 +1,6 @@
+import type { Chat01Props } from "./Chat01.types.js";
+/**
+ * A chat with an agent that fills its frame: a header with the chat's name, then the messages, which scroll and keep
+ * the reply box docked below them. The person's messages can be copied and edited; the agent's copied and rated.
+ */
+export declare function Chat01({ title, context, messages, user, agentName, day, thinking, onSend, onStop, onNewChat, onRate, menu, menuHeading, empty, draft: draftProp, onDraftChange, locale, labels, className, ...props }: Chat01Props): import("react").JSX.Element;

package/dist/chat/Chat01/Chat01.types.d.cts

@@ -0,0 +1,95 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { ChatRating } from "@openwarelabs/ui";
+import type { BlockMenuItem } from "../../shared/shared.types.cjs";
+/** One message in the thread. */
+export interface Chat01Message {
+    /** Unique in the thread. */
+    id: string;
+    /** The person's own message, or the agent's reply. */
+    from: "user" | "assistant";
+    /** When it was sent, shown beside the name. */
+    time: Date | string;
+    /** The words as plain text: what Copy copies, what Edit puts back in the box, and what a reply shows while it streams in. */
+    text: string;
+    /** How a reply shows, when that's more than its text: code in blocks, a pull request. */
+    body?: ReactNode;
+    /** `streaming` while a reply is still arriving: the box shows Stop until it's done. */
+    status?: "streaming" | "done";
+}
+/** An idea to start from in an empty thread: choosing it puts its words in the box. */
+export interface Chat01Suggestion {
+    /** The words it puts in the box. */
+    label: string;
+    /** A 16px icon before them, usually from lucide-react. */
+    icon?: ReactNode;
+}
+/** What an empty thread shows: a title, a line, and ideas to start from. */
+export interface Chat01Empty {
+    /** A 20px icon over the title, usually from lucide-react. */
+    icon?: ReactNode;
+    /** "Ask the Acme agent". */
+    title: ReactNode;
+    /** What the agent can do. */
+    description?: ReactNode;
+    /** Ideas to start from. */
+    suggestions?: Chat01Suggestion[];
+}
+export interface Chat01Labels {
+    /** The new chat button's name. @default "New chat" */
+    newChat?: string;
+    /** The menu button's name. @default "More" */
+    more?: string;
+    /** The menu's name for screen readers. @default "Chat" */
+    menu?: string;
+    /** The box's placeholder. @default "Reply to the agent…" */
+    placeholder?: string;
+    /** Names the box for screen readers. @default "Reply to the agent" */
+    input?: string;
+    /** A muted line under the box. @default how to send and start a new line */
+    hint?: ReactNode;
+    /** What the agent is doing while the reply hasn't started. @default "Thinking…" */
+    thinking?: string;
+    /** Names the ideas for screen readers. @default "Ideas to start from" */
+    suggestions?: string;
+}
+export interface Chat01Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> {
+    /** The chat's name, as the page's h1. */
+    title: ReactNode;
+    /** A caption under it, after a green dot: the agent and what it's working in. */
+    context?: ReactNode;
+    /** The messages, oldest first. */
+    messages: Chat01Message[];
+    /** The person, beside their messages. */
+    user: {
+        name: string;
+        avatar?: string;
+    };
+    /** The agent's name, beside its replies and while it thinks. @default "Agent" */
+    agentName?: string;
+    /** A line above the first message, such as the day. */
+    day?: ReactNode;
+    /** Shows the agent thinking, before its reply starts. */
+    thinking?: boolean;
+    /** Called with the text when the person sends a message. The box clears itself. */
+    onSend?(text: string): void;
+    /** Called by Stop while the agent is thinking or replying. */
+    onStop?(): void;
+    /** Shows a new chat button in the header; called when it's pressed. The box clears and takes focus. */
+    onNewChat?(): void;
+    /** Called when the person rates a reply. */
+    onRate?(message: Chat01Message, rating: ChatRating | null): void;
+    /** More actions in a menu in the header: earlier chats, a link to what the chat made. */
+    menu?: BlockMenuItem[];
+    /** A small heading at the top of the menu: "Earlier chats". */
+    menuHeading?: ReactNode;
+    /** What an empty thread shows. */
+    empty?: Chat01Empty;
+    /** The text in the box, when you keep it yourself. */
+    draft?: string;
+    /** Called with the text in the box on every change. */
+    onDraftChange?(draft: string): void;
+    /** The locale for the messages' times, such as "en-GB". Defaults to the browser's. */
+    locale?: string;
+    /** Words that aren't content (names for screen readers, the box's placeholder), in English unless you pass your own. */
+    labels?: Chat01Labels;
+}