@alexkroman1/aai-ui 6.10.1 → 7.0.0

package/dist/components/console-shell.d.ts

@@ -1,15 +1,11 @@
 import type { ReactNode } from "react";
 import type { AgentState } from "../types.ts";
 /**
- * The design-system "console" chrome for the chat shell:
- * a 760px column on the cream page with a header
- * (logo + live-status eyebrow), an optional error banner, the main content
- * on a raised white card, and a footer row beneath it.
+ * Props of {@link ConsoleShell}.
  *
- *
- * @internal
+ * @public
  */
-export declare function ConsoleShell({ icon, title, state, pulsing, error, children, footer, className, }: {
+export type ConsoleShellProps = {
     /** Element rendered in place of the logo in the header. */
     icon?: ReactNode | undefined;
     /** Title string for the header. */
@@ -18,11 +14,76 @@ export declare function ConsoleShell({ icon, title, state, pulsing, error, child
     state: AgentState;
     /** Whether the status dot pulses. */
     pulsing: boolean;
-    /** Error banner text; `null`/`undefined` hides the banner. */
+    /**
+     * Error banner text; `null`/`undefined` hides the banner.
+     *
+     * Pass `session.error?.message` — the banner is announced, which a
+     * hand-rolled `<div>` in a custom chrome is not. See the `role="alert"`
+     * comment below for why that matters more here than it looks.
+     */
     error?: string | null | undefined;
-    /** Card content. */
+    /** Card content — normally a {@link MessageList}. */
     children: ReactNode;
     /** Row rendered beneath the card (controls). */
     footer: ReactNode;
+    /** Additional CSS class names for the root element, appended to its own. */
     className?: string | undefined;
-}): ReactNode;
+};
+/**
+ * The design-system "console" chrome: a 760px column on the themed page with a
+ * header (icon + live-status eyebrow), an announced error banner, the main
+ * content on a raised card, and a footer row beneath it.
+ *
+ * {@link ChatView} is this shell with `<MessageList>` inside it and
+ * `<Controls>` under it, and until now that was the only way to get it — the
+ * shell itself was internal, so a client wanting its own conversation markup
+ * had to rebuild the chrome as well. Each one that did re-derived the error
+ * banner WITHOUT `role="alert"`, which is the one part of this component a
+ * reviewer cannot see is missing: per the `fatalError` latch in
+ * `session-core.ts`, the banner is the only remaining signal once the state
+ * eyebrow goes back to reading like a live session, and a screen reader is
+ * never told an unannounced one appeared.
+ *
+ * Reach for it when the conversation is yours and the frame is not. Reach for
+ * `<ChatView>` when both are ours.
+ *
+ * Must be rendered inside the providers `client()` installs.
+ *
+ * @example A custom conversation in the stock chrome
+ * ```tsx
+ * import {
+ *   ConsoleShell,
+ *   Controls,
+ *   useConversation,
+ *   useSessionSelector,
+ * } from "@alexkroman1/aai-ui";
+ *
+ * function Console() {
+ *   const state = useSessionSelector((s) => s.state);
+ *   const error = useSessionSelector((s) => s.error);
+ *   const { items } = useConversation();
+ *   return (
+ *     <ConsoleShell
+ *       title="Dispatch"
+ *       state={state}
+ *       pulsing={state === "listening"}
+ *       error={error?.message}
+ *       footer={<Controls />}
+ *     >
+ *       <ul>
+ *         {items.map((item) => (
+ *           <li key={item.kind === "message" ? item.message.id : item.toolCall.callId}>
+ *             {item.kind === "message" ? item.message.content : item.toolCall.name}
+ *           </li>
+ *         ))}
+ *       </ul>
+ *     </ConsoleShell>
+ *   );
+ * }
+ * ```
+ *
+ * @param props - See {@link ConsoleShellProps}.
+ *
+ * @public
+ */
+export declare function ConsoleShell({ icon, title, state, pulsing, error, children, footer, className, }: ConsoleShellProps): ReactNode;

package/dist/components/controls.d.ts

@@ -1,3 +1,16 @@
+import { type FunctionComponent, type MemoExoticComponent } from "react";
+/**
+ * Props of {@link Controls}.
+ *
+ * @public
+ */
+export type ControlsProps = {
+    /**
+     * Additional CSS class names, appended to the container's own layout
+     * classes rather than replacing them.
+     */
+    className?: string;
+};
 /**
  * Session control buttons: **Stop / Resume** and **New Conversation**.
  *
@@ -13,10 +26,8 @@
  * }
  * ```
  *
- * @param className - Additional CSS class names applied to the container.
+ * @param props - Container props.
  *
  * @public
  */
-export declare const Controls: import("react").MemoExoticComponent<({ className }: {
-    className?: string;
-}) => import("react").JSX.Element>;
+export declare const Controls: MemoExoticComponent<FunctionComponent<ControlsProps>>;

package/dist/components/controls.js

@@ -1,3 +1,49 @@
-import "../context.js";
-import { t as Controls } from "../controls-CjG91QJ4.js";
+import { useSessionCore, useSessionSelector } from "../context.js";
+import { Button } from "./button.js";
+import { n as SessionUrlChips } from "../url-chips-DpM7Oocj.js";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+//#region components/controls.tsx
+/** @jsxImportSource react */
+/**
+* Session control buttons: **Stop / Resume** and **New Conversation**.
+*
+* Reads session state from {@link useSession}. Must be rendered inside a
+* `SessionProvider`.
+*
+* @example
+* ```tsx
+* import { Controls } from "@alexkroman1/aai-ui";
+*
+* function Footer() {
+*   return <Controls className="justify-end" />;
+* }
+* ```
+*
+* @param props - Container props.
+*
+* @public
+*/
+const Controls = memo(function Controls({ className }) {
+	const running = useSessionSelector((s) => s.running);
+	const { toggle, reset } = useSessionCore();
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("flex flex-wrap items-center gap-3 shrink-0", className),
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				variant: "secondary",
+				onClick: toggle,
+				children: running ? "Stop" : "Resume"
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				onClick: reset,
+				children: "New Conversation"
+			}),
+			/* @__PURE__ */ jsx(SessionUrlChips, { className: "basis-full sm:basis-auto sm:ml-auto sm:max-w-[60%]" })
+		]
+	});
+});
+//#endregion
 export { Controls };

package/dist/components/form-fields.d.ts

@@ -0,0 +1,142 @@
+import type { InputHTMLAttributes, ReactNode, SelectHTMLAttributes, TextareaHTMLAttributes } from "react";
+import type { FieldShell, FileRead } from "./form-types.ts";
+/**
+ * Label + control + hint, in the layout every field here uses.
+ *
+ * Exported so a caller's own control gets the same shell rather than an
+ * approximation of it.
+ *
+ * @example
+ * ```tsx
+ * import { Field, Form } from "@alexkroman1/aai-ui";
+ *
+ * function ColorForm() {
+ *   return (
+ *     <Form onSubmit={() => undefined}>
+ *       <Field label="Accent" hint="Any CSS color." htmlFor="accent">
+ *         <input id="accent" name="accent" type="color" />
+ *       </Field>
+ *     </Form>
+ *   );
+ * }
+ * ```
+ *
+ * @param props - Field-shell props.
+ *
+ * @public
+ */
+export declare function Field({ label, hint, htmlFor, className, children, }: {
+    /** Visible label. Omitted leaves the control unlabelled. */
+    label?: string | undefined;
+    /** One line of guidance under the control. */
+    hint?: string | undefined;
+    /** Id of the control this labels. */
+    htmlFor?: string | undefined;
+    /** Additional CSS class names for the wrapper, appended to its own. */
+    className?: string | undefined;
+    /** The control itself. */
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * A single-line text input.
+ *
+ * Accepts every `<input>` attribute except `name` and `className`, which this
+ * component owns, plus the shared {@link FieldShell} props.
+ *
+ * @param props - {@link FieldShell} props plus `<input>` attributes.
+ *
+ * @public
+ */
+export declare function TextField({ name, label, hint, className, ...rest }: FieldShell & Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "className">): import("react").JSX.Element;
+/**
+ * A number input. Contributes a NUMBER to {@link FormValues}, or nothing when
+ * left empty.
+ *
+ * Accepts every `<input>` attribute except `name`, `className` and `type`,
+ * plus the shared {@link FieldShell} props — so `min`, `max` and `step` are
+ * passed straight through.
+ *
+ * @param props - {@link FieldShell} props plus `<input>` attributes.
+ *
+ * @public
+ */
+export declare function NumberField({ name, label, hint, className, ...rest }: FieldShell & Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "className" | "type">): import("react").JSX.Element;
+/**
+ * A multi-line text input.
+ *
+ * Accepts every `<textarea>` attribute except `name` and `className`, plus the
+ * shared {@link FieldShell} props. `rows` defaults to 4.
+ *
+ * @param props - {@link FieldShell} props plus `<textarea>` attributes.
+ *
+ * @public
+ */
+export declare function TextAreaField({ name, label, hint, className, rows, ...rest }: FieldShell & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "name" | "className">): import("react").JSX.Element;
+/**
+ * A dropdown.
+ *
+ * `options` is the short form — a list of strings, or of
+ * `{ value, label }` pairs when the two differ. Pass `children` instead for
+ * full control over the `<option>` elements; `children` wins when both are
+ * given.
+ *
+ * Otherwise accepts every `<select>` attribute except `name` and `className`,
+ * plus the shared {@link FieldShell} props. Note `multiple` works and
+ * contributes an ARRAY (`[]` when nothing is chosen).
+ *
+ * @param props - {@link FieldShell} props, `options`, and `<select>`
+ * attributes.
+ *
+ * @public
+ */
+export declare function SelectField({ name, label, hint, className, options, children, ...rest }: FieldShell & {
+    options?: readonly (string | {
+        value: string;
+        label: string;
+    })[];
+} & Omit<SelectHTMLAttributes<HTMLSelectElement>, "name" | "className">): import("react").JSX.Element;
+/**
+ * A checkbox. Contributes a BOOLEAN to {@link FormValues}.
+ *
+ * Accepts every `<input>` attribute except `name`, `className` and `type`,
+ * plus the shared {@link FieldShell} props. The label renders beside the box
+ * rather than above it, so `hint` is the place for guidance.
+ *
+ * @param props - {@link FieldShell} props plus `<input>` attributes.
+ *
+ * @public
+ */
+export declare function CheckboxField({ name, label, hint, className, ...rest }: FieldShell & Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "className" | "type">): import("react").JSX.Element;
+/**
+ * A file picker. Contributes a {@link FileValue} (or an array, with `multiple`)
+ * to {@link FormValues} — or nothing when no file was chosen.
+ *
+ * **`upload` is what a workflow input wants.** A run's input is serialized into
+ * the run record and replayed from it on every resume, so a file's BYTES cannot
+ * travel in it. With `upload` the field contributes the `File` itself,
+ * `useWorkflowSubmit` stores it through `POST /workflows/uploads` before
+ * starting the run, and the input carries the upload id — which a step reads
+ * windows of with `readUpload`. Declaring the property in the workflow's
+ * `uploads` list makes `<WorkflowFields>` render exactly this, so a declared
+ * form needs no file markup at all.
+ *
+ * **Without it the field describes the file and does not read it.** `read`
+ * exists for the cases where the bytes really are small and really are the
+ * input — a CSV of ids, a config — and the size is the author's to check. See
+ * {@link FileRead} for the four values; `upload` is shorthand for
+ * `read="upload"`.
+ *
+ * Otherwise accepts every `<input>` attribute except `name`, `className` and
+ * `type`, plus the shared {@link FieldShell} props — so `accept` and
+ * `multiple` are passed straight through.
+ *
+ * @param props - {@link FieldShell} props, `read`/`upload`, and `<input>`
+ * attributes.
+ *
+ * @public
+ */
+export declare function FileField({ name, label, hint, className, read, upload, ...rest }: FieldShell & {
+    read?: FileRead;
+    /** Shorthand for `read="upload"` — see above. */
+    upload?: boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "className" | "type">): import("react").JSX.Element;

package/dist/components/form-types.d.ts

@@ -63,5 +63,11 @@ export type FieldShell = {
     label?: string | undefined;
     /** One line of guidance under the control. */
     hint?: string | undefined;
+    /**
+     * Additional CSS class names for the field's WRAPPER (label + control +
+     * hint), appended to its own layout classes. The control itself takes the
+     * shared field styling; pass `style` or a `data-` hook through the native
+     * attributes to reach it.
+     */
     className?: string | undefined;
 };

package/dist/components/form.d.ts

@@ -1,6 +1,7 @@
-import type { FormHTMLAttributes, InputHTMLAttributes, ReactNode, SelectHTMLAttributes, TextareaHTMLAttributes } from "react";
-import { type ButtonSize } from "./button.tsx";
-import type { FieldShell, FileRead, FormValues } from "./form-types.ts";
+import type { ButtonHTMLAttributes, FormHTMLAttributes, ReactNode } from "react";
+import { type ButtonSize, type ButtonVariant } from "./button.tsx";
+import type { FormValues } from "./form-types.ts";
+export { CheckboxField, Field, FileField, NumberField, SelectField, TextAreaField, TextField, } from "./form-fields.tsx";
 export type { FieldShell, FileRead, FileValue, FormValues } from "./form-types.ts";
 /** Props of {@link Form}. */
 export type FormProps = {
@@ -38,93 +39,45 @@ export type FormProps = {
  * }
  * ```
  *
- * @public
- */
-export declare function Form({ onSubmit, error, children, className, ...rest }: FormProps): import("react").JSX.Element;
-/**
- * Label + control + hint, in the layout every field here uses.
- *
- * Exported so a caller's own control gets the same shell rather than an
- * approximation of it.
+ * @param props - See {@link FormProps}. Every `<form>` attribute except
+ * `onSubmit` and `className` is passed through.
  *
  * @public
  */
-export declare function Field({ label, hint, htmlFor, className, children, }: {
-    label?: string | undefined;
-    hint?: string | undefined;
-    /** Id of the control this labels. */
-    htmlFor?: string | undefined;
-    className?: string | undefined;
-    children: ReactNode;
-}): import("react").JSX.Element;
-/**
- * A single-line text input.
- *
- * @public
- */
-export declare function TextField({ name, label, hint, className, ...rest }: FieldShell & Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "className">): import("react").JSX.Element;
-/**
- * A number input. Contributes a NUMBER to {@link FormValues}, or nothing when
- * left empty.
- *
- * @public
- */
-export declare function NumberField({ name, label, hint, className, ...rest }: FieldShell & Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "className" | "type">): import("react").JSX.Element;
-/**
- * A multi-line text input.
- *
- * @public
- */
-export declare function TextAreaField({ name, label, hint, className, rows, ...rest }: FieldShell & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "name" | "className">): import("react").JSX.Element;
-/**
- * A dropdown. Pass `options`, or `children` for full control over the
- * `<option>` elements.
- *
- * @public
- */
-export declare function SelectField({ name, label, hint, className, options, children, ...rest }: FieldShell & {
-    options?: readonly (string | {
-        value: string;
-        label: string;
-    })[];
-} & Omit<SelectHTMLAttributes<HTMLSelectElement>, "name" | "className">): import("react").JSX.Element;
+export declare function Form({ onSubmit, error, children, className, ...rest }: FormProps): import("react").JSX.Element;
 /**
- * A checkbox. Contributes a BOOLEAN to {@link FormValues}.
+ * The form's submit button, disabled and relabelled while a submit is in
+ * flight.
  *
- * @public
- */
-export declare function CheckboxField({ name, label, hint, className, ...rest }: FieldShell & Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "className" | "type">): import("react").JSX.Element;
-/**
- * A file picker. Contributes a {@link FileValue} (or an array, with `multiple`)
- * to {@link FormValues} — or nothing when no file was chosen.
+ * Accepts all standard `<button>` HTML attributes except `type` and `disabled`,
+ * in addition to the props below — so `aria-label` on an icon-only submit,
+ * `form`, `id`, `title` and `onClick` all work here exactly as they do on
+ * {@link Button}. `type` and `disabled` stay owned: this component sets both
+ * from `pending`, and letting a caller set either is how a form gets a submit
+ * button that does not submit.
  *
- * **`upload` is what a workflow input wants.** A run's input is serialized into
- * the run record and replayed from it on every resume, so a file's BYTES cannot
- * travel in it. With `upload` the field contributes the `File` itself,
- * `useWorkflowSubmit` stores it through `POST /workflows/uploads` before
- * starting the run, and the input carries the upload id — which a step reads
- * windows of with `readUpload`. Declaring the property in the workflow's
- * `uploads` list makes `<WorkflowFields>` render exactly this, so a declared
- * form needs no file markup at all.
+ * @example
+ * ```tsx
+ * import { Form, SubmitButton, TextField } from "@alexkroman1/aai-ui";
  *
- * **Without it the field describes the file and does not read it.** `read`
- * exists for the cases where the bytes really are small and really are the
- * input — a CSV of ids, a config — and the size is the author's to check.
+ * function Digest({ pending }: { pending: boolean }) {
+ *   return (
+ *     <Form onSubmit={() => undefined}>
+ *       <TextField name="url" label="Link" required />
+ *       <SubmitButton pending={pending} variant="secondary" size="lg">
+ *         Summarize
+ *       </SubmitButton>
+ *     </Form>
+ *   );
+ * }
+ * ```
  *
- * @public
- */
-export declare function FileField({ name, label, hint, className, read, upload, ...rest }: FieldShell & {
-    read?: FileRead;
-    /** Shorthand for `read="upload"` — see above. */
-    upload?: boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "className" | "type">): import("react").JSX.Element;
-/**
- * The form's submit button, disabled and relabelled while a submit is in
- * flight.
+ * @param props - Button props.
  *
  * @public
  */
-export declare function SubmitButton({ children, pending, pendingLabel, size, className, }: {
+export declare function SubmitButton({ children, pending, pendingLabel, size, variant, className, ...rest }: {
+    /** Button label. Replaced by `pendingLabel` while `pending`. */
     children?: ReactNode;
     /**
      * Whether the WORK this form started is still going. Separate from the
@@ -132,7 +85,12 @@ export declare function SubmitButton({ children, pending, pendingLabel, size, cl
      * outlives its `POST`, and the button should stay busy until the run is done.
      */
     pending?: boolean;
+    /** Label shown in place of `children` while `pending`. Defaults to `"Working…"`. */
     pendingLabel?: string;
+    /** Size preset, passed through to {@link Button}. */
     size?: ButtonSize | undefined;
+    /** Visual style, passed through to {@link Button}. Defaults to `"default"`. */
+    variant?: ButtonVariant | undefined;
+    /** Additional CSS class names, appended to {@link Button}'s own. */
     className?: string | undefined;
-}): import("react").JSX.Element;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "disabled" | "className">): import("react").JSX.Element;

package/dist/components/markdown.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import { type FunctionComponent, type MemoExoticComponent } from "react";
 /**
  * Type scale for {@link Markdown}: `"default"` is the deployed agent UI's
  * scale, `"compact"` a notch smaller for denser surfaces (the studio's chat
@@ -7,6 +7,23 @@ import { type ReactNode } from "react";
  * @public
  */
 export type MarkdownVariant = "default" | "compact";
+/**
+ * Props of {@link Markdown}.
+ *
+ * @public
+ */
+export type MarkdownProps = {
+    /**
+     * The Markdown source. Required — this is the prose to render, normally one
+     * agent message or the streaming tail of one.
+     */
+    text: string;
+    /**
+     * Type scale. Defaults to `"default"`, the deployed agent UI's scale; pass
+     * `"compact"` for a denser surface. Colors are unaffected either way.
+     */
+    variant?: MarkdownVariant;
+};
 /**
  * Agent prose, rendered as Markdown.
  *
@@ -23,9 +40,18 @@ export type MarkdownVariant = "default" | "compact";
  * Memoized alongside `MessageBubble`: message content is referentially
  * stable across snapshots, so only the streaming row re-parses.
  *
+ * @example
+ * ```tsx
+ * import { Markdown, useSessionSelector } from "@alexkroman1/aai-ui";
+ *
+ * // The agent's reply as it streams, rendered rather than shown as literal
+ * // asterisks and backticks.
+ * function LiveReply() {
+ *   const text = useSessionSelector((snapshot) => snapshot.agentTranscript);
+ *   return text === null ? null : <Markdown text={text} variant="compact" />;
+ * }
+ * ```
+ *
  * @public
  */
-export declare const Markdown: import("react").MemoExoticComponent<({ text, variant, }: {
-    text: string;
-    variant?: MarkdownVariant;
-}) => ReactNode>;
+export declare const Markdown: MemoExoticComponent<FunctionComponent<MarkdownProps>>;

package/dist/components/message-list.d.ts

@@ -1,3 +1,22 @@
+/** @jsxImportSource react */
+import { type FunctionComponent, type MemoExoticComponent } from "react";
+/**
+ * Props of {@link MessageList}.
+ *
+ * @public
+ */
+export type MessageListProps = {
+    /**
+     * Additional CSS class names for the outer scroll container, appended to its
+     * own rather than replacing them.
+     *
+     * The container is an {@link AutoScroll}, so it must end up with a BOUNDED
+     * height (`flex-1 min-h-0`, `h-full`, a fixed height). Unbounded, it grows
+     * with the conversation and never scrolls, so nothing pins to the newest
+     * message.
+     */
+    className?: string;
+};
 /**
  * Scrollable list of all chat messages, tool-call blocks, live transcript,
  * streaming agent utterance, and a thinking indicator.
@@ -16,10 +35,8 @@
  * }
  * ```
  *
- * @param className - Additional CSS class names applied to the outer list container.
+ * @param props - Container props.
  *
  * @public
  */
-export declare const MessageList: import("react").MemoExoticComponent<({ className }: {
-    className?: string;
-}) => import("react").JSX.Element>;
+export declare const MessageList: MemoExoticComponent<FunctionComponent<MessageListProps>>;

package/dist/components/message-list.js

@@ -1,3 +1,3 @@
-import { t as MessageList } from "../message-list-CpPV7dGx.js";
+import { t as MessageList } from "../message-list-DHddO4QC.js";
 import "../context.js";
 export { MessageList };

package/dist/components/sidebar-layout.d.ts

@@ -20,12 +20,23 @@ import type { ReactNode } from "react";
  * }
  * ```
  *
+ * @param props - Layout props.
+ *
  * @public
  */
 export declare function SidebarLayout({ sidebar, children, sidebarWidth, sidebarPosition, className, }: {
+    /** The sidebar pane — a cart, a dashboard, a run history. */
     sidebar: ReactNode;
+    /** The main pane, normally a `<ChatView />`. */
     children: ReactNode;
+    /**
+     * Width of the sidebar as a CSS length. Defaults to `"18rem"`, and applies
+     * from the `md` breakpoint up: below it the two panes stack, because a fixed
+     * width that never shrinks leaves a phone-width main pane unreadable.
+     */
     sidebarWidth?: string | undefined;
+    /** Which side the sidebar sits on. Defaults to `"left"`. */
     sidebarPosition?: "left" | "right" | undefined;
+    /** Additional CSS class names for the root element, appended to its own. */
     className?: string;
 }): import("react").JSX.Element;

package/dist/components/sidebar-layout.js

@@ -24,6 +24,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * }
 * ```
 *
+* @param props - Layout props.
+*
 * @public
 */
 function SidebarLayout({ sidebar, children, sidebarWidth = "18rem", sidebarPosition = "left", className }) {

package/dist/components/start-screen.d.ts

@@ -17,13 +17,21 @@ import type { ReactNode } from "react";
  * }
  * ```
  *
+ * @param props - Start-screen props.
+ *
  * @public
  */
 export declare function StartScreen({ children, icon, title, subtitle, buttonText, className, }: {
+    /** The app, rendered once the session has started. */
     children: ReactNode;
+    /** Element rendered in place of the logo on the card. */
     icon?: ReactNode | undefined;
+    /** The card's serif title. Defaults to the agent's declared name. */
     title?: string | undefined;
+    /** A line under the title. */
     subtitle?: string | undefined;
+    /** Label of the start CTA. Defaults to `"Start Conversation"`. */
     buttonText?: string | undefined;
+    /** Additional CSS class names for the root element, appended to its own. */
     className?: string | undefined;
 }): ReactNode;

package/dist/components/start-screen.js

@@ -25,6 +25,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * }
 * ```
 *
+* @param props - Start-screen props.
+*
 * @public
 */
 function StartScreen({ children, icon, title, subtitle, buttonText = "Start Conversation", className }) {

package/dist/components/tool-call-block.js

@@ -1,3 +1,3 @@
 import "../context.js";
-import { t as ToolCallBlock } from "../tool-call-block-D6pTEPrT.js";
+import { t as ToolCallBlock } from "../tool-call-block-DoF-cSIZ.js";
 export { ToolCallBlock };