@alexkroman1/aai-ui 1.8.3 → 1.9.0

package/dist/_colors-DJUordGv.js

@@ -0,0 +1,19 @@
+//#region components/_colors.ts
+/** Muted text — subtitles, secondary labels, thinking dots (fg-muted). */
+const TEXT_MUTED = "#57534B";
+/** Faint text — live transcripts, state indicator, start-screen subtitle (warm-500). */
+const TEXT_FAINT = "#6F6A60";
+/** Subtle surface tint — message bubbles, tool-call blocks. */
+const SURFACE_TINT = "rgba(20,18,12,0.03)";
+/** Error red tuned for warm light surfaces. */
+const ERROR_COLOR = "#B3261E";
+/**
+* Derive the user-bubble fill/edge from the theme primary (the mock's
+* indigo-50 background with an indigo-100 border), so custom themes keep a
+* coherent tinted bubble instead of a hardcoded indigo.
+*/
+function primaryTint(primary, surface, pct) {
+	return `color-mix(in srgb, ${primary} ${pct}%, ${surface})`;
+}
+//#endregion
+export { primaryTint as a, TEXT_MUTED as i, SURFACE_TINT as n, TEXT_FAINT as r, ERROR_COLOR as t };

package/dist/_utils-5cs73OrA.js

@@ -0,0 +1,16 @@
+//#region _utils.ts
+/** Parse a JSON string, returning the input unchanged when it isn't valid JSON. */
+function tryParseJSON(str) {
+	if (!str) return str;
+	try {
+		return JSON.parse(str);
+	} catch {
+		return str;
+	}
+}
+/** Truncate a string to `max` characters, appending an ellipsis when cut. */
+function truncate(s, max = 80) {
+	return s.length > max ? `${s.slice(0, max)}...` : s;
+}
+//#endregion
+export { tryParseJSON as n, truncate as t };

package/dist/_utils.d.ts

@@ -0,0 +1,4 @@
+/** Parse a JSON string, returning the input unchanged when it isn't valid JSON. */
+export declare function tryParseJSON(str: string | undefined): unknown;
+/** Truncate a string to `max` characters, appending an ellipsis when cut. */
+export declare function truncate(s: string, max?: number): string;

package/dist/aai-logo-B8lDmsut.js

@@ -0,0 +1,84 @@
+import { useTheme } from "./context.js";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region components/aai-logo.tsx
+/** @jsxImportSource react */
+/**
+* The AssemblyAI wordmark (design-system "website refresh" asset).
+*
+* The mark keeps its brand blues; the letterforms inherit the theme's text
+* color so the logo works on the cream default and custom themes alike.
+*
+* @param size - Rendered height in px. Defaults to 20.
+* @internal
+*/
+const AaiLogo = memo(function AaiLogo({ size = 20 }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		role: "img",
+		"aria-label": "AssemblyAI",
+		height: size,
+		viewBox: "0 0 141 24",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		style: {
+			display: "block",
+			color: useTheme().text
+		},
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M37.698 16.7132L38.9234 13.4518H44.334L45.5782 16.7132H47.897L42.9766 3.51665H40.3939L35.4546 16.7132H37.698ZM41.6193 5.85433L43.7307 11.6042H39.5267L41.6193 5.85433Z",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M48.9176 13.5272C48.9741 15.6198 50.7462 16.8263 53.329 16.8263C55.6667 16.8263 57.4199 15.6575 57.4199 13.81C57.4199 11.6608 55.6289 11.2083 53.4232 10.9444C52.0282 10.7936 51.1044 10.6805 51.1044 9.77558C51.1044 9.00264 51.8962 8.51249 53.1028 8.51249C54.3093 8.51249 55.1388 9.13461 55.2519 10.0207H57.2502C57.1183 8.04118 55.4404 6.94775 53.065 6.94775C50.7462 6.9289 49.1061 8.11659 49.1061 9.94525C49.1061 11.9436 50.8405 12.4149 53.0462 12.6788C54.5355 12.8673 55.4216 12.9428 55.4216 13.9796C55.4216 14.7526 54.5921 15.2427 53.329 15.2427C51.8585 15.2427 50.9913 14.5263 50.9159 13.5272H48.9176Z",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M58.9645 13.5272C59.021 15.6198 60.7931 16.8263 63.3759 16.8263C65.7135 16.8263 67.4668 15.6575 67.4668 13.81C67.4668 11.6608 65.6758 11.2083 63.4701 10.9444C62.0751 10.7936 61.1513 10.6805 61.1513 9.77558C61.1513 9.00264 61.9431 8.51249 63.1497 8.51249C64.3562 8.51249 65.1857 9.13461 65.2988 10.0207H67.2971C67.1652 8.04118 65.4873 6.94775 63.1119 6.94775C60.7931 6.9289 59.153 8.11659 59.153 9.94525C59.153 11.9436 60.8874 12.4149 63.0931 12.6788C64.5824 12.8673 65.4685 12.9428 65.4685 13.9796C65.4685 14.7526 64.639 15.2427 63.3759 15.2427C61.9054 15.2427 61.0382 14.5263 60.9628 13.5272H58.9645Z",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M74.1913 16.8263C76.5855 16.8263 78.2068 15.3747 78.5462 13.4706H76.5101C76.2273 14.5452 75.3224 15.1673 74.0782 15.1673C72.4757 15.1673 71.4389 14.0927 71.3823 12.4526V12.3206H78.6593C78.697 12.0567 78.7158 11.7928 78.7158 11.5477C78.6593 8.71986 76.7929 6.94775 74.0028 6.94775C71.1561 6.94775 69.252 8.92723 69.252 11.9059C69.252 14.8657 71.1561 16.8263 74.1913 16.8263ZM71.4577 10.8313C71.6085 9.4551 72.7208 8.5879 74.0216 8.5879C75.4355 8.5879 76.4347 9.39854 76.6044 10.8313H71.4577Z",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M92.0314 6.94775C90.4478 6.94775 89.3544 7.64529 88.7322 8.70101C88.1478 7.45676 87.0167 6.94775 85.7536 6.94775C84.302 6.96661 83.4725 7.60758 82.9258 8.32396L82.6995 7.06087H80.9274V16.7132H82.9635V11.5477C82.9635 9.83214 83.8307 8.70101 85.2257 8.70101C86.5642 8.70101 87.2618 9.58706 87.2618 11.2838V16.7132H89.3167V11.4911C89.3167 9.75673 90.2027 8.70101 91.5978 8.70101C92.9174 8.70101 93.615 9.58706 93.615 11.2838V16.7132H95.651V11.1518C95.651 8.09774 94.0297 6.94775 92.0314 6.94775Z",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M103.228 6.94775C101.738 6.94775 100.739 7.62643 100.098 8.49363V3.51665H98.0623V16.7132H99.8344L100.079 15.3181C100.683 16.1853 101.72 16.8263 103.228 16.8263C105.867 16.8263 107.79 14.8468 107.79 11.887C107.79 8.77642 105.867 6.94775 103.228 6.94775ZM102.888 15.1108C101.192 15.1108 100.079 13.7722 100.079 11.8682C100.079 10.0018 101.192 8.68216 102.888 8.68216C104.585 8.68216 105.716 10.0018 105.716 11.887C105.716 13.7911 104.585 15.1108 102.888 15.1108Z",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M109.987 16.7132H112.023V3.51665H109.987V16.7132Z",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M117.375 16.7697L116.998 17.7124C116.696 18.5041 116.507 18.6927 115.716 18.6927H114.283V20.4836H116.47C117.884 20.4836 118.298 19.7861 118.902 18.2214L123.275 7.06087H121.107L118.487 14.3944L115.791 7.06087H113.623L117.375 16.7697Z",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M125.769 16.7132L126.994 13.4518H132.405L133.649 16.7132H135.968L131.047 3.51665H128.465L123.525 16.7132H125.769ZM129.69 5.85433L131.801 11.6042H127.597L129.69 5.85433Z",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M137.887 16.7132H140.055V3.51665H137.887V16.7132Z",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				fillRule: "evenodd",
+				clipRule: "evenodd",
+				d: "M12.2496 0C10.4867 0 8.90488 1.08157 8.26713 2.72302L0 24H6.28017L12.7874 7.25245H12.7902C12.9534 6.84425 13.353 6.55584 13.8199 6.55584C14.2869 6.55584 14.6864 6.84425 14.8497 7.25245H15.7167V3.85532H14.1073L15.6053 0H12.2496Z",
+				fill: "#2545D3"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				fillRule: "evenodd",
+				clipRule: "evenodd",
+				d: "M8.2677 2.72302C8.87959 1.1483 10.3603 0.0888597 12.0361 0.00532694L12.034 0H12.2501H14.6661H15.4972C17.2601 0 18.8419 1.08157 19.4797 2.72302L27.7468 24H21.3592L13.3424 3.36747C12.8835 2.35631 11.864 1.65296 10.6801 1.65296C9.49331 1.65296 8.47176 2.35976 8.0144 3.37493L8.2677 2.72302Z",
+				fill: "#566DE8"
+			})
+		]
+	});
+});
+//#endregion
+export { AaiLogo as t };

package/dist/audio.d.ts

@@ -1,3 +1,12 @@
+/**
+ * Decode an audio file (any container/codec the browser can decode) and
+ * resample it to mono PCM16 at `targetRate` — the format the server's STT
+ * side expects on the wire. Returns the raw clip; any endpointing padding
+ * is the caller's concern (the one-shot upload path needs none).
+ *
+ * @throws If the browser cannot decode the payload.
+ */
+export declare function decodeAudioToPcm16(data: ArrayBuffer, targetRate: number): Promise<Int16Array>;
 /** Configuration for creating a {@link VoiceIO} instance. */
 export type VoiceIOOptions = {
     /** Sample rate in Hz expected by the STT engine (e.g. 16000). */
@@ -10,8 +19,6 @@ export type VoiceIOOptions = {
     playbackWorkletSrc: string;
     /** Callback invoked with buffered PCM16 microphone data to send to the server. */
     onMicData: (pcm16: ArrayBuffer) => void;
-    /** Callback invoked with the current playback position in samples. */
-    onPlaybackProgress?: (samplesPlayed: number) => void;
 };
 /**
  * Audio I/O interface for voice capture and playback.

package/dist/audio.js

@@ -1,6 +1,30 @@
 import { MIC_BUFFER_SECONDS } from "./types.js";
 //#region audio.ts
 /**
+* Decode an audio file (any container/codec the browser can decode) and
+* resample it to mono PCM16 at `targetRate` — the format the server's STT
+* side expects on the wire. Returns the raw clip; any endpointing padding
+* is the caller's concern (the one-shot upload path needs none).
+*
+* @throws If the browser cannot decode the payload.
+*/
+async function decodeAudioToPcm16(data, targetRate) {
+	const decoded = await new OfflineAudioContext(1, 1, targetRate).decodeAudioData(data);
+	const frames = Math.ceil(decoded.duration * targetRate);
+	const offline = new OfflineAudioContext(1, frames, targetRate);
+	const source = offline.createBufferSource();
+	source.buffer = decoded;
+	source.connect(offline.destination);
+	source.start();
+	const f32 = (await offline.startRendering()).getChannelData(0);
+	const pcm = new Int16Array(f32.length);
+	for (let i = 0; i < f32.length; i++) {
+		const s = Math.max(-1, Math.min(1, f32[i] ?? 0));
+		pcm[i] = s < 0 ? s * 32768 : s * 32767;
+	}
+	return pcm;
+}
+/**
 * Create a {@link VoiceIO} instance that captures microphone audio and
 * plays back TTS audio using the Web Audio API.
 *
@@ -18,18 +42,25 @@ async function createVoiceIO(opts) {
 		sampleRate: contextRate,
 		latencyHint: "playback"
 	});
-	await ctx.resume();
-	const stream = await navigator.mediaDevices.getUserMedia({ audio: {
+	const streamPromise = navigator.mediaDevices.getUserMedia({ audio: {
 		deviceId: { ideal: "default" },
 		echoCancellation: true,
 		noiseSuppression: true,
 		autoGainControl: true,
 		voiceIsolation: true
 	} });
+	let stream;
 	try {
-		await Promise.all([ctx.audioWorklet.addModule(captureWorkletSrc), ctx.audioWorklet.addModule(playbackWorkletSrc)]);
+		[stream] = await Promise.all([
+			streamPromise,
+			ctx.resume(),
+			ctx.audioWorklet.addModule(captureWorkletSrc),
+			ctx.audioWorklet.addModule(playbackWorkletSrc)
+		]);
 	} catch (err) {
-		for (const t of stream.getTracks()) t.stop();
+		streamPromise.then((s) => {
+			for (const t of s.getTracks()) t.stop();
+		}).catch(() => {});
 		await ctx.close().catch((err) => {
 			console.warn("AudioContext close failed:", err);
 		});
@@ -41,43 +72,28 @@ async function createVoiceIO(opts) {
 		channelCountMode: "explicit",
 		processorOptions: {
 			contextRate,
-			sttSampleRate
+			sttSampleRate,
+			bufferSeconds: MIC_BUFFER_SECONDS
 		}
 	});
 	mic.connect(capNode);
-	const chunkSizeBytes = Math.floor(sttSampleRate * MIC_BUFFER_SECONDS) * 2;
-	const bufSize = chunkSizeBytes * 2;
-	const capBufA = new Uint8Array(bufSize);
-	const capBufB = new Uint8Array(bufSize);
-	let capBuf = capBufA;
-	let capOffset = 0;
 	capNode.port.postMessage({ event: "start" });
 	capNode.port.onmessage = (e) => {
 		if (e.data.event !== "chunk") return;
-		const chunk = new Uint8Array(e.data.buffer);
-		capBuf.set(chunk, capOffset);
-		capOffset += chunk.byteLength;
-		if (capOffset >= chunkSizeBytes) {
-			onMicData(capBuf.buffer.slice(0, capOffset));
-			capBuf = capBuf === capBufA ? capBufB : capBufA;
-			capOffset = 0;
-		}
+		onMicData(e.data.buffer);
 	};
 	let playNode = null;
 	let onPlaybackStop = null;
 	const lifecycle = new AbortController();
-	const { onPlaybackProgress } = opts;
 	function ensurePlayNode() {
 		if (playNode) return playNode;
 		const node = new AudioWorkletNode(ctx, "playback-processor", { processorOptions: { sampleRate: contextRate } });
 		node.connect(ctx.destination);
 		node.port.onmessage = (e) => {
 			if (e.data.event === "stop") {
-				node.disconnect();
-				if (playNode === node) playNode = null;
 				onPlaybackStop?.();
 				onPlaybackStop = null;
-			} else if (e.data.event === "progress") onPlaybackProgress?.(e.data.readPos);
+			}
 		};
 		playNode = node;
 		return node;
@@ -93,6 +109,7 @@ async function createVoiceIO(opts) {
 		},
 		done() {
 			if (!playNode) return Promise.resolve();
+			if (ctx.state !== "running") return Promise.resolve();
 			return new Promise((resolve) => {
 				onPlaybackStop = resolve;
 				playNode?.port.postMessage({ event: "done" });
@@ -118,4 +135,4 @@ async function createVoiceIO(opts) {
 	return io;
 }
 //#endregion
-export { createVoiceIO };
+export { createVoiceIO, decodeAudioToPcm16 };

package/dist/chat-view-C1XbqDk0.js

@@ -0,0 +1,186 @@
+import { useSession, useSessionCore, useSessionSelector, useTheme } from "./context.js";
+import { Button } from "./components/button.js";
+import { r as TEXT_FAINT, t as ERROR_COLOR } from "./_colors-DJUordGv.js";
+import { t as AaiLogo } from "./aai-logo-B8lDmsut.js";
+import { r as SessionUrlChips, t as Controls } from "./controls-BngrPbOC.js";
+import { t as Eyebrow } from "./eyebrow-C6ZFuiz6.js";
+import { MessageList } from "./components/message-list.js";
+import clsx from "clsx";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { errorMessage } from "@alexkroman1/aai";
+//#region components/text-controls.tsx
+/** @jsxImportSource react */
+/**
+* Controls for a text-only session (`tts: none()`): a **record** toggle that
+* streams the microphone while active, an **upload** button that transcribes
+* an audio file, and **New Conversation**. Replies arrive as text in the
+* {@link MessageList} — there is no playback side.
+*
+* Rendered automatically by {@link ChatView} when the server declares the
+* session text-only; custom clients can compose it directly.
+*
+* @public
+*/
+function TextControls({ className }) {
+	const recording = useSessionSelector((s) => s.recording);
+	const state = useSessionSelector((s) => s.state);
+	const core = useSessionCore();
+	const fileInput = useRef(null);
+	const [uploading, setUploading] = useState(false);
+	const [uploadError, setUploadError] = useState(null);
+	const connected = state !== "disconnected" && state !== "connecting" && state !== "error";
+	function toggleRecording() {
+		if (recording) core.stopRecording();
+		else core.startRecording();
+	}
+	function onFileChosen(file) {
+		if (!file || uploading) return;
+		setUploading(true);
+		setUploadError(null);
+		core.sendAudioFile(file).catch((err) => {
+			setUploadError(errorMessage(err));
+		}).finally(() => {
+			setUploading(false);
+			if (fileInput.current) fileInput.current.value = "";
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("flex flex-col gap-1.5 shrink-0", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [
+				/* @__PURE__ */ jsxs(Button, {
+					variant: recording ? "default" : "secondary",
+					onClick: toggleRecording,
+					disabled: !connected || uploading,
+					"aria-pressed": recording,
+					style: recording ? { background: ERROR_COLOR } : void 0,
+					"data-testid": "record-button",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: clsx("w-2 h-2 rounded-full mr-2", recording && "animate-pulse"),
+						style: { background: recording ? "#fff" : ERROR_COLOR }
+					}), recording ? "Stop recording" : "Record"]
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					onClick: () => fileInput.current?.click(),
+					disabled: !connected || uploading,
+					"data-testid": "upload-button",
+					children: uploading ? "Transcribing…" : "Upload audio"
+				}),
+				/* @__PURE__ */ jsx("input", {
+					ref: fileInput,
+					type: "file",
+					accept: "audio/*",
+					className: "hidden",
+					onChange: (e) => onFileChosen(e.target.files?.[0]),
+					"data-testid": "upload-input"
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					onClick: core.reset,
+					children: "New Conversation"
+				}),
+				/* @__PURE__ */ jsx(SessionUrlChips, { className: "ml-auto max-w-[55%]" })
+			]
+		}), uploadError && /* @__PURE__ */ jsx("div", {
+			className: "text-[12px]",
+			style: { color: "#B3261E" },
+			"data-testid": "upload-error",
+			children: uploadError
+		})]
+	});
+}
+//#endregion
+//#region components/chat-view.tsx
+/** @jsxImportSource react */
+const PULSING_STATES = /* @__PURE__ */ new Set(["listening", "speaking"]);
+/** Indicator dot color per state, on the light refresh palette. */
+function stateColor(state, primary) {
+	switch (state) {
+		case "listening":
+		case "speaking":
+		case "ready": return primary;
+		case "thinking": return "#B98900";
+		case "error": return ERROR_COLOR;
+		default: return TEXT_FAINT;
+	}
+}
+/**
+* The main chat interface for a voice agent session — the design-system
+* "voice agent console": a 760px column on the cream page with a header
+* (logo + live-status eyebrow), the conversation on a raised white card,
+* and the session controls beneath it.
+*
+* Must be rendered inside a {@link SessionProvider}.
+*
+* @example
+* ```tsx
+* <StartScreen icon="🍕" title="Pizza Palace">
+*   <ChatView />
+* </StartScreen>
+* ```
+*
+* @param icon - Optional element rendered in place of the logo in the header.
+* @param title - Optional title string for the header.
+* @param className - Additional CSS class names applied to the root element.
+*
+* @public
+*/
+function ChatView({ icon, title, className }) {
+	const session = useSession();
+	const theme = useTheme();
+	const pulsing = PULSING_STATES.has(session.state);
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("flex flex-col h-screen w-full max-w-190 mx-auto box-border px-6 py-8 gap-5 font-aai text-sm", className),
+		style: {
+			background: theme.bg,
+			color: theme.text
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between shrink-0",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-3 min-w-0",
+					children: [icon ?? /* @__PURE__ */ jsx(AaiLogo, { size: 22 }), title && /* @__PURE__ */ jsx("span", {
+						className: "font-aai-serif text-[22px] leading-[1.2] font-normal truncate",
+						style: { color: theme.text },
+						children: title
+					})]
+				}), /* @__PURE__ */ jsxs(Eyebrow, {
+					className: "shrink-0",
+					"data-state": session.state,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "w-[7px] h-[7px] rounded-full",
+						style: {
+							background: stateColor(session.state, theme.primary),
+							animation: pulsing ? "aai-pulse 1.6s ease-in-out infinite" : "none"
+						}
+					}), session.state]
+				})]
+			}),
+			session.error && /* @__PURE__ */ jsx("div", {
+				className: "px-3.5 py-2.5 rounded-aai border text-[13px] leading-[130%] shrink-0",
+				style: {
+					borderColor: "rgba(179,38,30,0.35)",
+					background: "rgba(179,38,30,0.06)",
+					color: "#B3261E"
+				},
+				children: session.error.message
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-col flex-1 min-h-0 border rounded-lg overflow-hidden",
+				style: {
+					background: theme.surface,
+					borderColor: theme.border,
+					boxShadow: "0 1px 3px 0 rgb(20 18 12 / 0.06)"
+				},
+				children: /* @__PURE__ */ jsx(MessageList, {})
+			}),
+			session.audioOut ? /* @__PURE__ */ jsx(Controls, {}) : /* @__PURE__ */ jsx(TextControls, {})
+		]
+	});
+}
+//#endregion
+export { TextControls as n, ChatView as t };

package/dist/components/_colors.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Shared tints used by the default components (AssemblyAI design system,
+ * "website refresh": warm neutrals over the cream/white surfaces).
+ *
+ * These sit on top of the {@link ClientTheme} colors (which own the opaque
+ * palette) and are intentionally not themeable: they are the warm-gray text
+ * steps and ink alpha layers the refresh uses over any light surface.
+ */
+/** Soft text — button labels on muted surfaces (warm-700). */
+export declare const TEXT_SOFT = "#3D3A35";
+/** Muted text — subtitles, secondary labels, thinking dots (fg-muted). */
+export declare const TEXT_MUTED = "#57534B";
+/** Faint text — live transcripts, state indicator, start-screen subtitle (warm-500). */
+export declare const TEXT_FAINT = "#6F6A60";
+/** Raised surface tint — secondary button background. */
+export declare const SURFACE_RAISED = "rgba(20,18,12,0.05)";
+/** Subtle surface tint — message bubbles, tool-call blocks. */
+export declare const SURFACE_TINT = "rgba(20,18,12,0.03)";
+/** Error red tuned for warm light surfaces. */
+export declare const ERROR_COLOR = "#B3261E";
+/**
+ * Derive the user-bubble fill/edge from the theme primary (the mock's
+ * indigo-50 background with an indigo-100 border), so custom themes keep a
+ * coherent tinted bubble instead of a hardcoded indigo.
+ */
+export declare function primaryTint(primary: string, surface: string, pct: number): string;

package/dist/components/aai-logo.d.ts

@@ -1,11 +1,12 @@
-/** @jsxImportSource react */
-import type { ReactNode } from "react";
 /**
- * The AAI ANSI art logo, rendered as a styled `<pre>` block.
+ * The AssemblyAI wordmark (design-system "website refresh" asset).
  *
- * @param size - Font size in px. Defaults to 10.
+ * The mark keeps its brand blues; the letterforms inherit the theme's text
+ * color so the logo works on the cream default and custom themes alike.
+ *
+ * @param size - Rendered height in px. Defaults to 20.
  * @internal
  */
-export declare function AaiLogo({ size }: {
+export declare const AaiLogo: import("react").MemoExoticComponent<({ size }: {
     size?: number;
-}): ReactNode;
+}) => import("react").JSX.Element>;

package/dist/components/button.d.ts

@@ -1,23 +1,20 @@
 import type { ReactNode } from "react";
 /**
- * Visual style of a {@link Button}.
+ * Visual style of a {@link Button} (design-system "website refresh":
+ * rectangular, ALL-CAPS, tracked labels).
  *
- * - `"default"` — Primary filled button (accent background).
- * - `"secondary"` — Muted surface background with border.
- * - `"ghost"` — Transparent background with border.
- *
- * @public
+ * - `"default"` — Primary filled button (indigo background).
+ * - `"secondary"` — Outlined primary (transparent background, primary border).
+ * - `"ghost"` — Raised neutral (surface background with hairline border).
  */
-export type ButtonVariant = "default" | "secondary" | "ghost";
+type ButtonVariant = "default" | "secondary" | "ghost";
 /**
  * Size preset for a {@link Button}.
  *
- * - `"default"` — Compact (height 2rem / 32 px).
- * - `"lg"` — Large with generous padding, suitable for primary CTAs.
- *
- * @public
+ * - `"default"` — Compact control (height 36 px).
+ * - `"lg"` — Primary CTA (height 44 px, generous padding).
  */
-export type ButtonSize = "default" | "lg";
+type ButtonSize = "default" | "lg";
 /**
  * A styled button with variant and size presets.
  *
@@ -47,4 +44,5 @@ export declare function Button({ variant, size, className, children, style, ...r
     size?: ButtonSize;
     className?: string;
     children?: ReactNode;
-} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className">): import("react/jsx-runtime").JSX.Element;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className">): import("react").JSX.Element;
+export {};

package/dist/components/button.js

@@ -3,14 +3,6 @@ import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region components/button.tsx
 /** @jsxImportSource react */
-const LG_STYLE = {
-	display: "grid",
-	placeItems: "center",
-	appearance: "none",
-	margin: 0,
-	padding: "12px 32px",
-	lineHeight: 1
-};
 /**
 * A styled button with variant and size presets.
 *
@@ -40,27 +32,26 @@ function Button({ variant = "default", size = "default", className, children, st
 	let variantStyle;
 	if (variant === "default") variantStyle = {
 		background: theme.primary,
-		color: "#fff",
+		color: theme.surface,
 		borderColor: "transparent"
 	};
 	else if (variant === "secondary") variantStyle = {
-		background: "rgba(255,255,255,0.059)",
-		color: "rgba(255,255,255,0.618)",
-		borderColor: theme.border
+		background: "transparent",
+		color: theme.primary,
+		borderColor: theme.primary
 	};
 	else variantStyle = {
-		background: "transparent",
-		color: "rgba(255,255,255,0.618)",
+		background: theme.surface,
+		color: theme.text,
 		borderColor: theme.border
 	};
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
 		style: {
-			...size === "lg" ? LG_STYLE : void 0,
 			...variantStyle,
 			...style
 		},
-		className: clsx(size !== "lg" && "flex items-center justify-center appearance-none m-0 h-8 px-3 py-1.5 w-fit leading-none", "rounded-aai text-sm font-medium cursor-pointer border outline-none", className),
+		className: clsx("inline-flex items-center justify-center appearance-none m-0 w-fit whitespace-nowrap", size === "lg" ? "h-11 px-7 text-xs" : "h-9 px-5 text-[11px]", "rounded-aai font-aai font-medium tracking-[1.4px] uppercase leading-none", "cursor-pointer border outline-none transition-colors duration-150", "disabled:cursor-not-allowed disabled:opacity-50", className),
 		...rest,
 		children
 	});

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

@@ -1,8 +1,9 @@
 import type { ReactNode } from "react";
 /**
- * The main chat interface for a voice agent session.
- * Displays a header (with optional icon, title, and state indicator), an
- * inline error banner, the {@link MessageList}, and session {@link Controls}.
+ * The main chat interface for a voice agent session — the design-system
+ * "voice agent console": a 760px column on the cream page with a header
+ * (logo + live-status eyebrow), the conversation on a raised white card,
+ * and the session controls beneath it.
  *
  * Must be rendered inside a {@link SessionProvider}.
  *
@@ -13,26 +14,14 @@ import type { ReactNode } from "react";
  * </StartScreen>
  * ```
  *
- * @example Pair with a sidebar
- * ```tsx
- * <SidebarLayout sidebar={<RecipeCard />}>
- *   <ChatView className="border-l" />
- * </SidebarLayout>
- * ```
- *
- * @example Custom header icon
- * ```tsx
- * <ChatView icon={<img src="/logo.svg" />} title="My Agent" />
- * ```
- *
- * @param icon - Optional element rendered before the title in the header.
+ * @param icon - Optional element rendered in place of the logo in the header.
  * @param title - Optional title string for the header.
  * @param className - Additional CSS class names applied to the root element.
  *
  * @public
  */
 export declare function ChatView({ icon, title, className, }: {
-    icon?: ReactNode;
-    title?: string;
-    className?: string;
+    icon?: ReactNode | undefined;
+    title?: string | undefined;
+    className?: string | undefined;
 }): ReactNode;