@alexkroman1/aai-ui 0.16.0 → 0.17.0

package/dist/agent-state-labels.d.ts

@@ -23,7 +23,7 @@
  * chrome exists to look like — a CRT's glow, a dispatch board's alert colours —
  * and a component would take the one part that is genuinely shared (the words)
  * hostage to the part that is not. It takes the palette as a PROP, so it does
- * not: what it shares is the exhaustive colour lookup, this record as the label
+ * not: what it shares is the colour lookup, this record as the label
  * fallback, and the pulse rule, and the three chromes that had each written
  * those fourteen lines around their own `satisfies Record<AgentState, string>`
  * keep the record and lose the lines.
@@ -32,6 +32,8 @@ import type { AgentState } from "./types.ts";
 /**
  * The default label per {@link AgentState}.
  *
+ * {@link AgentState} is open, so a lookup by a live state is `string |
+ * undefined`: fall back to the raw state for one this version has no word for.
  * Override the ones your page has a better word for and keep the rest:
  *
  * ```ts
@@ -39,8 +41,11 @@ import type { AgentState } from "./types.ts";
  * import { AGENT_STATE_LABELS } from "@alexkroman1/aai-ui";
  *
  * // A dispatch board that shouts, and renames one state.
- * const STATE_LABEL = { ...AGENT_STATE_LABELS, thinking: "Processing" };
- * const shout = (s: AgentState) => STATE_LABEL[s].toUpperCase();
+ * const STATE_LABEL: Readonly<Record<AgentState, string>> = {
+ *   ...AGENT_STATE_LABELS,
+ *   thinking: "Processing",
+ * };
+ * const shout = (s: AgentState) => (STATE_LABEL[s] ?? s).toUpperCase();
  * ```
  *
  * **Sentence case, deliberately.** A template that wants caps applies its own

package/dist/{chat-view-DIwPoAEG.js → chat-view-W6KcdjJY.js}

@@ -1,5 +1,5 @@
 import { useSessionError, useSessionStatus, useTheme } from "./context.js";
-import { t as MessageList } from "./message-list-DHZcLhRA.js";
+import { t as MessageList } from "./message-list-BsaBkBgo.js";
 import { a as inkTint, r as THINKING_COLOR, t as ERROR_COLOR } from "./_colors-CpZO-88A.js";
 import { t as Eyebrow } from "./eyebrow-UfmSz9yy.js";
 import { Controls } from "./components/controls.js";
@@ -9,6 +9,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /**
 * The default label per {@link AgentState}.
 *
+* {@link AgentState} is open, so a lookup by a live state is `string |
+* undefined`: fall back to the raw state for one this version has no word for.
 * Override the ones your page has a better word for and keep the rest:
 *
 * ```ts
@@ -16,8 +18,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * import { AGENT_STATE_LABELS } from "@alexkroman1/aai-ui";
 *
 * // A dispatch board that shouts, and renames one state.
-* const STATE_LABEL = { ...AGENT_STATE_LABELS, thinking: "Processing" };
-* const shout = (s: AgentState) => STATE_LABEL[s].toUpperCase();
+* const STATE_LABEL: Readonly<Record<AgentState, string>> = {
+*   ...AGENT_STATE_LABELS,
+*   thinking: "Processing",
+* };
+* const shout = (s: AgentState) => (STATE_LABEL[s] ?? s).toUpperCase();
 * ```
 *
 * **Sentence case, deliberately.** A template that wants caps applies its own
@@ -126,6 +131,26 @@ function SessionErrorBanner({ className }) {
 //#region src/components/session-state-dot.tsx
 /** @jsxImportSource react */
 /**
+* 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
+*/
+function stateColor(state, primary, idle) {
+	switch (state) {
+		case "listening":
+		case "speaking":
+		case "ready": return primary;
+		case "thinking": return THINKING_COLOR;
+		case "error": return ERROR_COLOR;
+		default: return idle;
+	}
+}
+/**
 * One `aai-pulse` cycle per pulsing state, in milliseconds. The two states
 * that pulse are the two in which the agent is DOING something the reader
 * cannot otherwise see — the microphone is open, or a reply is being worked
@@ -173,7 +198,7 @@ function StateDot({ color, pulseMs, className, title }) {
 * 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.
 *
@@ -211,18 +236,20 @@ function StateDot({ color, pulseMs, className, title }) {
 */
 function SessionStateDot({ colors, labels, pulse = true, className, dotClassName, labelClassName }) {
 	const state = useSessionStatus();
+	const theme = useTheme();
 	const pulseMs = pulse ? PULSE_MS[state] ?? null : null;
+	const color = colors?.[state] ?? stateColor(state, theme.primary, inkTint(theme.text, theme.bg, 65));
 	return /* @__PURE__ */ jsxs("span", {
 		className: clsx("inline-flex items-center gap-2", className),
 		"data-state": state,
 		children: [/* @__PURE__ */ jsx(StateDot, {
-			color: colors[state],
+			color,
 			pulseMs,
 			className: dotClassName ?? "w-2 h-2",
 			title: state
 		}), /* @__PURE__ */ jsx("span", {
 			className: labelClassName,
-			children: labels?.[state] ?? AGENT_STATE_LABELS[state]
+			children: labels?.[state] ?? AGENT_STATE_LABELS[state] ?? state
 		})]
 	});
 }
@@ -230,25 +257,6 @@ function SessionStateDot({ colors, labels, pulse = true, className, dotClassName
 //#region src/components/console-shell.tsx
 /** @jsxImportSource react */
 /**
-* Indicator dot color per state.
-*
-* `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.
-*
-* @internal
-*/
-function stateColor(state, primary, idle) {
-	switch (state) {
-		case "listening":
-		case "speaking":
-		case "ready": return primary;
-		case "thinking": return THINKING_COLOR;
-		case "error": return ERROR_COLOR;
-		default: return idle;
-	}
-}
-/**
 * 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.
@@ -294,11 +302,13 @@ function stateColor(state, primary, idle) {
 *       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/{client-config-C7fQrioM.js → client-config-CzvWmw4X.js}

@@ -69,11 +69,12 @@ const CLIENT_CONFIG_ATTEMPT_TIMEOUT_MS = 1e4;
 *
 * @internal
 */
-async function loadClientConfig(platformUrl, fetchFn, presentedTicket) {
+async function loadClientConfig(platformUrl, fetchFn, presentedTicket, signal) {
 	const doFetch = fetchFn ?? ((input, init) => globalThis.fetch(input, init));
+	const deadline = AbortSignal.timeout(CLIENT_CONFIG_ATTEMPT_TIMEOUT_MS);
 	try {
 		const resp = await doFetch(buildAgentUrl(platformUrl, CLIENT_CONFIG_PATH).href, {
-			signal: AbortSignal.timeout(CLIENT_CONFIG_ATTEMPT_TIMEOUT_MS),
+			signal: signal === void 0 ? deadline : AbortSignal.any([deadline, signal]),
 			...presentedTicket === void 0 ? {} : { headers: { [SESSION_TICKET_HEADER]: presentedTicket } }
 		});
 		if (!resp.ok) return null;
@@ -102,14 +103,7 @@ async function loadClientConfig(platformUrl, fetchFn, presentedTicket) {
 * 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
@@ -132,8 +126,9 @@ async function loadClientConfig(platformUrl, fetchFn, presentedTicket) {
 *
 * @public
 */
-async function fetchClientConfig(platformUrl = pageBaseUrl(), fetchFn) {
-	return await loadClientConfig(platformUrl, fetchFn) ?? AGENT_DEFAULT;
+async function fetchClientConfig(options = {}) {
+	const { platformUrl = pageBaseUrl(), fetch: fetchFn, signal } = options;
+	return await loadClientConfig(platformUrl, fetchFn, void 0, signal) ?? AGENT_DEFAULT;
 }
 //#endregion
 export { fetchClientConfig as n, loadClientConfig as r, buildAgentUrl as t };

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/chat-view.js

@@ -1,3 +1,3 @@
-import { t as ChatView } from "../chat-view-DIwPoAEG.js";
+import { t as ChatView } from "../chat-view-W6KcdjJY.js";
 import "../context.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/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,4 +1,4 @@
-import type { InputHTMLAttributes, ReactNode, SelectHTMLAttributes, TextareaHTMLAttributes } from "react";
+import type { InputHTMLAttributes, JSX, ReactNode, SelectHTMLAttributes, TextareaHTMLAttributes } from "react";
 import type { FieldShell, FileReadMode } 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,7 +60,7 @@ 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.
  *
@@ -71,7 +71,7 @@ export declare function NumberField(props: FieldShell & Omit<InputHTMLAttributes
  *
  * @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, ...rest }: FieldShell & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "name" | "className">): JSX.Element;
 /**
  * A dropdown.
  *
@@ -94,7 +94,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 +106,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.
@@ -139,4 +139,4 @@ export declare function FileField({ name, label, hint, className, read, upload,
     read?: FileReadMode;
     /** Shorthand for `read="upload"` — see above. */
     upload?: boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "className" | "type">): import("react").JSX.Element;
+} & 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,15 @@ 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;
 /**
  * How much of a chosen file a {@link FileField} reads.
  *
@@ -54,6 +67,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 { 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,3 @@
 import "../context.js";
-import { t as MessageList } from "../message-list-DHZcLhRA.js";
+import { t as MessageList } from "../message-list-BsaBkBgo.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.
  *
@@ -27,20 +38,22 @@ export declare function StateDot({ color, pulseMs, className, title, }: {
 /**
  * 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} — the chrome's own palette. Any
+     * state not named (including one a later release adds) is painted the way
+     * `ConsoleShell` paints it, from the theme: the primary colour while live, a
+     * fixed amber while thinking, red on error, a faint ink otherwise.
      */
-    colors: Readonly<Record<AgentState, string>>;
+    colors?: Partial<Readonly<Record<AgentState, string>>> | 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,7 +85,7 @@ 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.
  *

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;