@alexkroman1/aai-ui 0.16.0 → 0.18.0

package/dist/client-config.d.ts

@@ -66,7 +66,33 @@ export declare const CLIENT_CONFIG_ATTEMPT_TIMEOUT_MS = 10000;
  *
  * @internal
  */
-export declare function loadClientConfig(platformUrl: string, fetchFn?: typeof globalThis.fetch, presentedTicket?: string): Promise<ClientConfigResponse | null>;
+export declare function loadClientConfig(platformUrl: string, fetchFn?: typeof globalThis.fetch, presentedTicket?: string, signal?: AbortSignal): Promise<ClientConfigResponse | null>;
+/**
+ * Options for {@link fetchClientConfig}.
+ *
+ * @input
+ * @public
+ */
+export type FetchClientConfigOptions = {
+    /**
+     * The agent's base URL. **Defaults to the page's own origin and path**, which
+     * is the agent that served the page and the only case a browser has. Pass
+     * one for a page reading a DIFFERENT agent; the endpoint is resolved
+     * relative to it.
+     */
+    platformUrl?: string | undefined;
+    /**
+     * Fetch implementation, for tests and for a caller that supplies its own
+     * credentials. Defaults to the global `fetch`.
+     */
+    fetch?: typeof globalThis.fetch | undefined;
+    /**
+     * Abandons the lookup — a component that unmounts before the answer, say.
+     * An abandoned lookup resolves to the agent default like every other one that produced no
+     * answer; the built-in 10 s deadline applies either way.
+     */
+    signal?: AbortSignal | undefined;
+};
 /**
  * Fetch the agent's declared `name`, `greeting` and front door; any failure
  * yields the agent default (`{}`).
@@ -86,14 +112,7 @@ export declare function loadClientConfig(platformUrl: string, fetchFn?: typeof g
  * treat every field as optional, because an agent that declared none is a
  * normal agent.
  *
- * @param platformUrl - The agent's base URL. **Defaults to the page's own
- * origin and path** (`pageBaseUrl()`), which is the agent that served the page
- * and the only case a browser has — the argument was required while the default
- * sat one module away in this same package, so every caller wrote
- * `location.origin + location.pathname` for itself. Pass one for a page reading
- * a DIFFERENT agent. The endpoint is resolved relative to it.
- * @param fetchFn - Fetch implementation, for tests and for a caller that
- * supplies its own credentials. Defaults to the global `fetch`.
+ * @param options - Where to look and how; see {@link FetchClientConfigOptions}.
  * @returns The agent's config, or `{}` when the lookup produced no answer.
  *
  * @example
@@ -116,4 +135,4 @@ export declare function loadClientConfig(platformUrl: string, fetchFn?: typeof g
  *
  * @public
  */
-export declare function fetchClientConfig(platformUrl?: string, fetchFn?: typeof globalThis.fetch): Promise<ClientConfigResponse>;
+export declare function fetchClientConfig(options?: FetchClientConfigOptions): Promise<ClientConfigResponse>;

package/dist/components/_form-readiness.d.ts

@@ -28,9 +28,10 @@
  * outside a provider reports nothing pending, so every hand-written form is
  * unaffected and `Form` keeps working outside this package.
  */
+import { type Provider } from "react";
 /** What a child calls to say whether its own fields are ready. */
 type Readiness = (key: string, pending: boolean) => void;
-export declare const FormReadinessProvider: import("react").Provider<Readiness | undefined>;
+export declare const FormReadinessProvider: Provider<Readiness | undefined>;
 /**
  * Track which children are still waiting for their fields.
  *

package/dist/components/audio-result.d.ts

@@ -4,6 +4,7 @@ import type { UseDownloadUrlResult } from "../use-download-url.ts";
  * A one-cue caption track for {@link AudioResult}: the words the clip speaks,
  * spanning its whole length.
  *
+ * @input
  * @public
  */
 export type AudioResultCaptions = {
@@ -19,6 +20,7 @@ export type AudioResultCaptions = {
 /**
  * Props of {@link AudioResult}.
  *
+ * @input
  * @public
  */
 export type AudioResultProps = {

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

@@ -2,6 +2,7 @@ import type { ReactNode } from "react";
 /**
  * Props for {@link BulletList}.
  *
+ * @input
  * @public
  */
 export type BulletListProps = {

package/dist/components/button.d.ts

@@ -1,4 +1,4 @@
-import type { ButtonHTMLAttributes, ReactNode } from "react";
+import type { ButtonHTMLAttributes, JSX, ReactNode } from "react";
 /**
  * Visual style of a {@link Button} (design-system "website refresh":
  * rectangular, ALL-CAPS, tracked labels).
@@ -55,4 +55,4 @@ export declare function Button({ variant, size, className, children, style, ...r
     className?: string;
     /** Button label / content. */
     children?: ReactNode;
-} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className">): import("react").JSX.Element;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className">): JSX.Element;

package/dist/components/button.js

@@ -1,4 +1,4 @@
-import { useTheme } from "../context.js";
+import { u as useTheme } from "../context-BF0KsI9X.js";
 import { a as inkTint, i as focusRingStyle, n as FOCUS_RING, o as primaryTint } from "../_colors-CpZO-88A.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";

package/dist/components/chat-view.js

@@ -1,3 +1,2 @@
-import { t as ChatView } from "../chat-view-DIwPoAEG.js";
-import "../context.js";
+import { t as ChatView } from "../chat-view-BwKpF0MN.js";
 export { ChatView };

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

@@ -3,6 +3,7 @@ import type { AgentState } from "../types.ts";
 /**
  * Props of {@link ConsoleShell}.
  *
+ * @input
  * @public
  */
 export type ConsoleShellProps = {
@@ -67,11 +68,13 @@ export type ConsoleShellProps = {
  *       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>
- *         ))}
+ *         {items.map((item) =>
+ *           item.kind === "message" ? (
+ *             <li key={item.message.id}>{item.message.content}</li>
+ *           ) : item.kind === "tool" ? (
+ *             <li key={item.toolCall.callId}>{item.toolCall.name}</li>
+ *           ) : null,
+ *         )}
  *       </ul>
  *     </ConsoleShell>
  *   );

package/dist/components/controls.d.ts

@@ -2,6 +2,7 @@ import { type FunctionComponent, type MemoExoticComponent } from "react";
 /**
  * Props of {@link Controls}.
  *
+ * @input
  * @public
  */
 export type ControlsProps = {

package/dist/components/controls.js

@@ -1,6 +1,6 @@
-import { useSessionCore, useSessionSelector } from "../context.js";
+import { c as useSessionSelector, o as useSessionCore } from "../context-BF0KsI9X.js";
 import { Button } from "./button.js";
-import { n as SessionUrlChips } from "../url-chips-oyy_Eiqh.js";
+import { n as SessionUrlChips } from "../url-chips-C_SHU6fq.js";
 import { memo } from "react";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/conversation-view.d.ts

@@ -6,6 +6,7 @@ import type { UseUserTranscriptResult } from "../use-user-transcript.ts";
 /**
  * Props of {@link ConversationView}.
  *
+ * @input
  * @public
  */
 export type ConversationViewProps = {

package/dist/components/facts.d.ts

@@ -2,6 +2,7 @@ import type { ReactNode } from "react";
 /**
  * Props for {@link Facts}.
  *
+ * @input
  * @public
  */
 export type FactsProps = {

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

@@ -1,5 +1,5 @@
-import type { InputHTMLAttributes, ReactNode, SelectHTMLAttributes, TextareaHTMLAttributes } from "react";
-import type { FieldShell, FileReadMode } from "./form-types.ts";
+import type { InputHTMLAttributes, JSX, ReactNode, SelectHTMLAttributes, TextareaHTMLAttributes } from "react";
+import type { FieldShell, FileReadMode, FileValueShape, TextSplitMode } from "./form-types.ts";
 /**
  * Label + control + hint, in the layout every field here uses.
  *
@@ -36,7 +36,7 @@ export declare function Field({ label, hint, htmlFor, className, children, }: {
     className?: string | undefined;
     /** The control itself. */
     children: ReactNode;
-}): import("react").JSX.Element;
+}): JSX.Element;
 /**
  * A single-line text input.
  *
@@ -47,7 +47,7 @@ export declare function Field({ label, hint, htmlFor, className, children, }: {
  *
  * @public
  */
-export declare function TextField(props: FieldShell & Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "className">): import("react").JSX.Element;
+export declare function TextField(props: FieldShell & Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "className">): JSX.Element;
 /**
  * A number input. Contributes a NUMBER to {@link FormValues}, or nothing when
  * left empty.
@@ -60,18 +60,28 @@ export declare function TextField(props: FieldShell & Omit<InputHTMLAttributes<H
  *
  * @public
  */
-export declare function NumberField(props: FieldShell & Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "className" | "type">): import("react").JSX.Element;
+export declare function NumberField(props: FieldShell & Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "className" | "type">): 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.
+ * **`split="lines"` contributes a `string[]`** — one entry per non-blank line,
+ * trimmed — which is the control for a schema's `z.array(z.string())`: "one
+ * point per line". `document-redline-workflow` reshaped the textarea's string
+ * by hand on submit; the field does it now, so `<WorkflowFields>` can render
+ * it for a `string[]` property and a hand-written one can match. See
+ * {@link TextSplitMode}.
+ *
+ * @param props - {@link FieldShell} props, `split`, and `<textarea>` attributes.
  *
  * @public
  */
-export declare function TextAreaField({ name, label, hint, className, rows, ...rest }: FieldShell & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "name" | "className">): import("react").JSX.Element;
+export declare function TextAreaField({ name, label, hint, className, rows, split, ...rest }: FieldShell & {
+    /** How the text is contributed — see above. Default `"none"`, the string. */
+    split?: TextSplitMode | undefined;
+} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "name" | "className">): JSX.Element;
 /**
  * A dropdown.
  *
@@ -94,7 +104,7 @@ export declare function SelectField({ name, label, hint, className, options, chi
         value: string;
         label: string;
     })[];
-} & Omit<SelectHTMLAttributes<HTMLSelectElement>, "name" | "className">): import("react").JSX.Element;
+} & Omit<SelectHTMLAttributes<HTMLSelectElement>, "name" | "className">): JSX.Element;
 /**
  * A checkbox. Contributes a BOOLEAN to {@link FormValues}.
  *
@@ -106,7 +116,7 @@ export declare function SelectField({ name, label, hint, className, options, chi
  *
  * @public
  */
-export declare function CheckboxField({ name, label, hint, className, ...rest }: FieldShell & Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "className" | "type">): import("react").JSX.Element;
+export declare function CheckboxField({ name, label, hint, className, ...rest }: FieldShell & Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "className" | "type">): JSX.Element;
 /**
  * A file picker. Contributes a {@link FileValue} (or an array, with `multiple`)
  * to {@link FormValues} — or nothing when no file was chosen.
@@ -126,17 +136,26 @@ export declare function CheckboxField({ name, label, hint, className, ...rest }:
  * {@link FileReadMode} for the four values; `upload` is shorthand for
  * `read="upload"`.
  *
+ * **`as="namedText"` contributes `{ name, text }`** ({@link NamedTextValue})
+ * instead of the metadata-bearing {@link FileValue}, and implies
+ * `read="text"`: the shape a schema declares for a draft to redline or a
+ * config to apply, and the one `<WorkflowFields>` renders for an object
+ * property of exactly that shape. `document-redline-workflow` reshaped the
+ * `FileValue` by hand on submit; the field does it now.
+ *
  * 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>`
+ * @param props - {@link FieldShell} props, `read`/`upload`/`as`, and `<input>`
  * attributes.
  *
  * @public
  */
-export declare function FileField({ name, label, hint, className, read, upload, ...rest }: FieldShell & {
+export declare function FileField({ name, label, hint, className, read, upload, as, ...rest }: FieldShell & {
     read?: FileReadMode;
     /** Shorthand for `read="upload"` — see above. */
     upload?: boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "className" | "type">): import("react").JSX.Element;
+    /** The shape of a READ file's value — see above and {@link FileValueShape}. */
+    as?: FileValueShape | undefined;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "className" | "type">): JSX.Element;

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

@@ -1,6 +1,6 @@
 /**
- * What a form's controls CONTRIBUTE — the three types both halves of the form
- * code share.
+ * What a form's controls CONTRIBUTE — the types both halves of the form code
+ * share, and {@link isFileValue}, the guard that reads one back.
  *
  * Their own module because `form.tsx` (the components) and `_form-values.ts`
  * (the DOM read) both need them, and a type living in one of those would make
@@ -18,6 +18,10 @@ export type FormValues = Record<string, unknown>;
 /**
  * What a {@link FileField} contributes to {@link FormValues}.
  *
+ * `FormValues` is `Record<string, unknown>`, so a page narrows the field's
+ * value with {@link isFileValue} rather than casting it.
+ *
+ * @sealed
  * @public
  */
 export type FileValue = {
@@ -35,6 +39,30 @@ export type FileValue = {
      */
     content?: string;
 };
+/**
+ * Whether one {@link FormValues} entry is what a {@link FileField} contributed.
+ *
+ * A field with nothing chosen contributes no key at all, so the absent case is
+ * the ordinary one — this is `false` for `undefined`, not an error.
+ *
+ * @public
+ */
+export declare function isFileValue(value: unknown): value is FileValue;
+/**
+ * What a `<FileField read="text" as="namedText">` contributes: the file's name
+ * and its text, and nothing else — the shape a workflow schema declares as
+ * `z.object({ name: z.string(), text: z.string() })` for a draft, a config, a
+ * CSV of ids that belongs in the run's input rather than in an upload. A
+ * {@link FileValue} carries the browser's metadata too, which a schema then
+ * has to strip or refuse; this is the value a schema can take as it is.
+ *
+ * @sealed
+ * @public
+ */
+export type NamedTextValue = {
+    name: string;
+    text: string;
+};
 /**
  * How much of a chosen file a {@link FileField} reads.
  *
@@ -47,6 +75,23 @@ export type FileValue = {
  * @public
  */
 export type FileReadMode = "none" | "text" | "dataUrl" | "upload";
+/**
+ * The SHAPE a {@link FileField} contributes a read file as. `"file"` (the
+ * default) is a {@link FileValue}; `"namedText"` is a {@link NamedTextValue},
+ * which implies `read="text"`. Only `"namedText"` is a reshape today; the
+ * option exists so a workflow's object property has a declared control.
+ *
+ * @public
+ */
+export type FileValueShape = "file" | "namedText";
+/**
+ * How a {@link TextAreaField} contributes its text. `"none"` (the default) is
+ * the string; `"lines"` is a `string[]` — one entry per non-blank line,
+ * trimmed — the control for a schema's `z.array(z.string())`.
+ *
+ * @public
+ */
+export type TextSplitMode = "none" | "lines";
 /**
  * The props every field in `form.tsx` shares.
  *
@@ -54,6 +99,7 @@ export type FileReadMode = "none" | "text" | "dataUrl" | "upload";
  * from a documented one has to be reachable from the entry point too, which the
  * docs build enforces.
  *
+ * @input
  * @public
  */
 export type FieldShell = {

package/dist/components/form.d.ts

@@ -1,9 +1,14 @@
-import type { ButtonHTMLAttributes, FormHTMLAttributes, ReactNode } from "react";
+import type { ButtonHTMLAttributes, FormHTMLAttributes, JSX, 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, FileReadMode, FileValue, FormValues } from "./form-types.ts";
-/** Props of {@link Form}. */
+export type { FieldShell, FileReadMode, FileValue, FileValueShape, FormValues, NamedTextValue, TextSplitMode, } from "./form-types.ts";
+export { isFileValue } from "./form-types.ts";
+/**
+ * Props of {@link Form}.
+ *
+ * @input
+ */
 export type FormProps = {
     /**
      * Called with the collected values. May be async — the form stays disabled
@@ -44,7 +49,7 @@ export type FormProps = {
  *
  * @public
  */
-export declare function Form({ onSubmit, error, children, className, ...rest }: FormProps): import("react").JSX.Element;
+export declare function Form({ onSubmit, error, children, className, ...rest }: FormProps): JSX.Element;
 /**
  * The form's submit button, disabled and relabelled while a submit is in
  * flight.
@@ -93,4 +98,4 @@ export declare function SubmitButton({ children, pending, pendingLabel, size, va
     variant?: ButtonVariant | undefined;
     /** Additional CSS class names, appended to {@link Button}'s own. */
     className?: string | undefined;
-} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "disabled" | "className">): import("react").JSX.Element;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "disabled" | "className">): JSX.Element;

package/dist/components/markdown.d.ts

@@ -10,6 +10,7 @@ export type MarkdownVariant = "default" | "compact";
 /**
  * Props of {@link Markdown}.
  *
+ * @input
  * @public
  */
 export type MarkdownProps = {

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

@@ -4,6 +4,7 @@ import type { ConversationLogEntry } from "../conversation-log.ts";
 /**
  * Props of {@link MessageList}.
  *
+ * @input
  * @public
  */
 export type MessageListProps = {

package/dist/components/message-list.js

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

package/dist/components/session-controls.d.ts

@@ -1,13 +1,16 @@
 import { type ReactNode } from "react";
 /**
- * Which of the four buttons a {@link SessionControlButton} is.
+ * Which button a {@link SessionControlButton} is: one of the four today. Open
+ * (`| (string & {})`) so a button added later is not a break — a `renderButton`
+ * keeps a default look for an action it does not know.
  *
  * @public
  */
-export type SessionControlAction = "start" | "toggle" | "restart" | "end";
+export type SessionControlAction = "start" | "toggle" | "restart" | "end" | (string & {});
 /**
  * One button of {@link SessionControls}, as handed to `renderButton`.
  *
+ * @sealed
  * @public
  */
 export type SessionControlButton = {
@@ -27,6 +30,7 @@ export type SessionControlButton = {
 /**
  * The five words {@link SessionControls} renders, every one overridable.
  *
+ * @input
  * @public
  */
 export type SessionControlsLabels = {
@@ -44,6 +48,7 @@ export type SessionControlsLabels = {
 /**
  * Props of {@link SessionControls}.
  *
+ * @input
  * @public
  */
 export type SessionControlsProps = {

package/dist/components/session-error-banner.d.ts

@@ -8,6 +8,7 @@ import type { ReactNode } from "react";
  * `createElement(SessionErrorBanner, { className })` caller unable to infer the
  * props at all, and gives the reference page nothing to link to.
  *
+ * @input
  * @public
  */
 export type SessionErrorBannerProps = {

package/dist/components/session-state-dot.d.ts

@@ -1,5 +1,16 @@
 import type { ReactNode } from "react";
 import type { AgentState } from "../types.ts";
+/**
+ * Indicator dot colour per state, from the theme — `ConsoleShell`'s dot, and
+ * {@link SessionStateDot}'s for every state its `colors` does not name.
+ *
+ * `idle` is the theme's own faint ink step rather than a fixed warm grey, so
+ * the dot stays visible on a dark ground; the thinking amber and error red
+ * are semantic and stay fixed. A state this version does not know is `idle`.
+ *
+ * @internal
+ */
+export declare function stateColor(state: AgentState, primary: string, idle: string): string;
 /**
  * The dot itself: a coloured circle, pulsing or still.
  *
@@ -24,23 +35,45 @@ export declare function StateDot({ color, pulseMs, className, title, }: {
     /** Tooltip text, typically the raw state. */
     title?: string | undefined;
 }): ReactNode;
+/**
+ * The coarse colour groups {@link SessionStateDotColors} accepts beside the
+ * exact states: `idle` (disconnected, connecting, and any state this version
+ * does not know), `live` (ready, listening, speaking) and `busy` (thinking).
+ * `error` has no group: its red is semantic and is only replaced by name.
+ *
+ * @public
+ */
+export type SessionStateDotGroup = "idle" | "live" | "busy";
+/**
+ * What {@link SessionStateDot} takes as `colors`: a colour per
+ * {@link AgentState}, per {@link SessionStateDotGroup}, or any mix. An exact
+ * state wins over its group; a state neither names is painted from the theme.
+ *
+ * @input
+ * @public
+ */
+export type SessionStateDotColors = Partial<Readonly<Record<AgentState | SessionStateDotGroup, string>>>;
 /**
  * Props of {@link SessionStateDot}.
  *
+ * @input
  * @public
  */
 export type SessionStateDotProps = {
     /**
-     * The dot's colour per {@link AgentState} — the chrome's own palette. A
-     * complete record, so a state added upstream is a compile error here rather
-     * than a silently unpainted dot; `satisfies Record<AgentState, string>` on the
-     * caller's literal is the shape to write it in.
+     * The dot's colour per {@link AgentState}, per coarse group (`idle`, `live`,
+     * `busy`), or both — the chrome's own palette, see
+     * {@link SessionStateDotColors}. Any state not named either way (including
+     * one a later release adds) is painted from the mounted theme: the primary
+     * colour while live, the text colour at half strength while idle, a fixed
+     * amber while thinking, red on error.
      */
-    colors: Readonly<Record<AgentState, string>>;
+    colors?: SessionStateDotColors | undefined;
     /**
      * The words this chrome has a better term for. Anything not named falls back
      * to {@link AGENT_STATE_LABELS}, so a page overrides one member (`speaking:
-     * "Narrating"`) without restating the union.
+     * "Narrating"`) without restating the union; a state neither names is shown
+     * as its raw value.
      */
     labels?: Partial<Readonly<Record<AgentState, string>>> | undefined;
     /**
@@ -72,31 +105,20 @@ export type SessionStateDotProps = {
  * against a dot component on the grounds that it would take the shared part
  * (the words) hostage to the part that is not (the palette); this takes the
  * palette as a prop precisely so it does not. What is shared is the structure
- * — the exhaustive colour lookup, the label fallback, the pulse rule, the
+ * — the colour lookup and its theme fallback, the label fallback, the pulse rule, the
  * `useSessionStatus()` subscription that keeps the rest of the header from
  * re-rendering at STT-partial rate.
  *
  * Must be rendered inside the providers `mountClient()` installs.
  *
- * @example A dispatch board's readout: its own colours, three of its own words
+ * @example A dispatch board's readout: coarse colours, three of its own words
  * ```tsx
- * import type { AgentState } from "@alexkroman1/aai-ui";
  * import { SessionStateDot } from "@alexkroman1/aai-ui";
  *
- * const STATE_COLORS = {
- *   disconnected: "#6b7280",
- *   connecting: "#6b7280",
- *   ready: "#22c55e",
- *   listening: "#22c55e",
- *   thinking: "#eab308",
- *   speaking: "#3b82f6",
- *   error: "#6b7280",
- * } satisfies Record<AgentState, string>;
- *
  * function StatusReadout() {
  *   return (
  *     <SessionStateDot
- *       colors={STATE_COLORS}
+ *       colors={{ idle: "#6b7280", live: "#22c55e", busy: "#eab308", speaking: "#3b82f6" }}
  *       labels={{ listening: "LISTENING", thinking: "PROCESSING", speaking: "TRANSMITTING" }}
  *       labelClassName="text-[11px] uppercase"
  *     />
@@ -104,6 +126,9 @@ export type SessionStateDotProps = {
  * }
  * ```
  *
+ * With no `colors` at all the dot follows the mounted theme — a chrome that
+ * sets `mountClient({ theme })` gets a matching dot for free.
+ *
  * @param props - See {@link SessionStateDotProps}.
  *
  * @public

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { JSX, ReactNode } from "react";
 /**
  * A two-column layout with a fixed-width sidebar and a flexible main area.
  * Commonly used to pair a custom sidebar (cart, dashboard) with `<ChatView />`.
@@ -39,4 +39,4 @@ export declare function SidebarLayout({ sidebar, children, sidebarWidth, sidebar
     sidebarPosition?: "left" | "right" | undefined;
     /** Additional CSS class names for the root element, appended to its own. */
     className?: string;
-}): import("react").JSX.Element;
+}): JSX.Element;

package/dist/components/sidebar-layout.js

@@ -1,4 +1,4 @@
-import { useTheme } from "../context.js";
+import { u as useTheme } from "../context-BF0KsI9X.js";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/sidebar-layout.tsx

package/dist/components/start-screen.js

@@ -1,7 +1,7 @@
-import { useSessionCore, useSessionSelector, useTheme } from "../context.js";
+import { c as useSessionSelector, o as useSessionCore, u as useTheme } from "../context-BF0KsI9X.js";
 import { a as inkTint } from "../_colors-CpZO-88A.js";
 import { Button } from "./button.js";
-import { t as Eyebrow } from "../eyebrow-UfmSz9yy.js";
+import { t as Eyebrow } from "../eyebrow-Bp4y1rZ9.js";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/start-screen.tsx

package/dist/components/tool-call-block.d.ts

@@ -1,5 +1,5 @@
 /** @jsxImportSource react */
-import { type ReactNode } from "react";
+import { type FunctionComponent, type MemoExoticComponent } from "react";
 import type { ToolCallInfo } from "../types.ts";
 /**
  * Renders a tool invocation as the design system's console row (see
@@ -22,7 +22,7 @@ import type { ToolCallInfo } from "../types.ts";
  *
  * @internal Not exported from the package — rendered by `MessageList`.
  */
-export declare const ToolCallBlock: import("react").MemoExoticComponent<({ toolCall, className, }: {
+export declare const ToolCallBlock: MemoExoticComponent<FunctionComponent<{
     toolCall: ToolCallInfo;
     className?: string;
-}) => ReactNode>;
+}>>;

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

@@ -1,3 +1,2 @@
-import "../context.js";
-import { t as ToolCallBlock } from "../tool-call-block-uXtMOUWN.js";
+import { t as ToolCallBlock } from "../tool-call-block-C8s6AhjS.js";
 export { ToolCallBlock };

package/dist/components/tool-call-row.d.ts

@@ -9,6 +9,7 @@ export type ToolCallRowVariant = "default" | "compact";
 /**
  * Props for {@link ToolCallRow}.
  *
+ * @input
  * @public
  */
 export interface ToolCallRowProps {