@alexkroman1/aai-ui 0.12.2 → 1.0.2

package/dist/_react-test-utils.d.ts

@@ -0,0 +1,86 @@
+/**
+ * Test utilities for React-based component tests.
+ * No dependency on @preact/signals.
+ */
+import type { SessionCore, SessionSnapshot } from "./session-core.ts";
+import type { AgentState, ChatMessage, SessionError, ToolCallInfo } from "./types.ts";
+/**
+ * Create a mock SessionCore for React component tests.
+ *
+ * Returns a `SessionCore`-compatible object with mutable snapshot. Call
+ * `core.update(partial)` to mutate the snapshot and notify subscribers,
+ * triggering React re-renders.
+ */
+export declare function createMockSessionCore(overrides?: Partial<{
+    state: AgentState;
+    messages: ChatMessage[];
+    toolCalls: ToolCallInfo[];
+    userTranscript: string | null;
+    agentTranscript: string | null;
+    error: SessionError | null;
+    started: boolean;
+    running: boolean;
+}>): SessionCore & {
+    update(partial: Partial<SessionSnapshot>): void;
+};
+/** Default voice options for tests. */
+export declare function voiceOpts(overrides?: Partial<import("./audio.ts").VoiceIOOptions>): {
+    sttSampleRate: number;
+    ttsSampleRate: number;
+    captureWorkletSrc: string;
+    playbackWorkletSrc: string;
+    onMicData: (pcm16: ArrayBuffer) => void;
+    onPlaybackProgress?: (samplesPlayed: number) => void;
+};
+export declare class MockMessagePort {
+    onmessage: ((e: MessageEvent) => void) | null;
+    posted: unknown[];
+    postMessage(data: unknown, _transfer?: Transferable[]): void;
+    simulateMessage(data: unknown): void;
+}
+export declare class MockAudioNode {
+    connected: (MockAudioNode | MockAudioWorkletNode)[];
+    connect(dest: MockAudioNode | MockAudioWorkletNode): void;
+    disconnect(): void;
+}
+export declare class MockGainNode extends MockAudioNode {
+    gain: {
+        value: number;
+        setTargetAtTime(value: number, _startTime: number, _tc: number): void;
+    };
+}
+export declare class MockAudioWorkletNode {
+    port: MockMessagePort;
+    connected: MockAudioNode[];
+    name: string;
+    options: unknown;
+    constructor(_ctx: MockAudioContext, name: string, options?: unknown);
+    connect(dest: MockAudioNode): void;
+    disconnect(): void;
+}
+export declare class MockAudioContext {
+    sampleRate: number;
+    state: AudioContextState;
+    currentTime: number;
+    destination: MockAudioNode;
+    audioWorklet: {
+        modules: string[];
+        addModule(url: string): Promise<void>;
+    };
+    closed: boolean;
+    constructor(opts?: {
+        sampleRate?: number;
+    });
+    resume(): Promise<void>;
+    createMediaStreamSource(_stream: unknown): MockAudioNode;
+    createGain(): MockGainNode;
+    close(): Promise<void>;
+}
+export type AudioMockContext = {
+    lastContext: () => MockAudioContext;
+    workletNodes: () => MockAudioWorkletNode[];
+};
+export declare function installAudioMocks(): AudioMockContext & {
+    restore: () => void;
+};
+export declare function findWorkletNode(nodes: MockAudioWorkletNode[], name: string): MockAudioWorkletNode;

package/dist/audio.js

@@ -45,8 +45,9 @@ async function createVoiceIO(opts) {
 	});
 	mic.connect(capNode);
 	const chunkSizeBytes = Math.floor(sttSampleRate * MIC_BUFFER_SECONDS) * 2;
-	const capBufA = new Uint8Array(chunkSizeBytes * 2);
-	const capBufB = new Uint8Array(chunkSizeBytes * 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" });
@@ -56,11 +57,9 @@ async function createVoiceIO(opts) {
 		capBuf.set(chunk, capOffset);
 		capOffset += chunk.byteLength;
 		if (capOffset >= chunkSizeBytes) {
-			const sendBuf = capBuf;
-			const filled = capOffset;
+			onMicData(capBuf.buffer.slice(0, capOffset));
 			capBuf = capBuf === capBufA ? capBufB : capBufA;
 			capOffset = 0;
-			onMicData(sendBuf.buffer.slice(0, filled));
 		}
 	};
 	let playNode = null;

package/dist/build-default-client.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/{_components → components}/button.d.ts

@@ -1,4 +1,4 @@
-import type * as preact from "preact";
+import type { ReactNode } from "react";
 /**
  * Visual style of a {@link Button}.
  *
@@ -42,9 +42,9 @@ export type ButtonSize = "default" | "lg";
  *
  * @public
  */
-export declare function Button({ variant, size, className, children, ...rest }: {
+export declare function Button({ variant, size, className, children, style, ...rest }: {
     variant?: ButtonVariant;
     size?: ButtonSize;
     className?: string;
-    children?: preact.ComponentChildren;
-} & Omit<preact.JSX.HTMLAttributes<HTMLButtonElement>, "className">): preact.JSX.Element;
+    children?: ReactNode;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className">): import("react/jsx-runtime").JSX.Element;

package/dist/{_components → components}/button.js

@@ -1,6 +1,8 @@
+import { useTheme } from "../context.js";
 import clsx from "clsx";
-import { jsx } from "preact/jsx-runtime";
-//#region _components/button.tsx
+import { jsx } from "react/jsx-runtime";
+//#region components/button.tsx
+/** @jsxImportSource react */
 const LG_STYLE = {
 	display: "grid",
 	placeItems: "center",
@@ -33,11 +35,32 @@ const LG_STYLE = {
 *
 * @public
 */
-function Button({ variant = "default", size = "default", className, children, ...rest }) {
+function Button({ variant = "default", size = "default", className, children, style, ...rest }) {
+	const theme = useTheme();
+	let variantStyle;
+	if (variant === "default") variantStyle = {
+		background: theme.primary,
+		color: "#fff",
+		borderColor: "transparent"
+	};
+	else if (variant === "secondary") variantStyle = {
+		background: "rgba(255,255,255,0.059)",
+		color: "rgba(255,255,255,0.618)",
+		borderColor: theme.border
+	};
+	else variantStyle = {
+		background: "transparent",
+		color: "rgba(255,255,255,0.618)",
+		borderColor: theme.border
+	};
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
-		style: size === "lg" ? LG_STYLE : void 0,
-		class: 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", variant === "secondary" && "bg-aai-surface-hover text-aai-text-secondary border-aai-border", variant === "ghost" && "bg-transparent text-aai-text-secondary border-aai-border", variant === "default" && "bg-aai-primary text-white border-transparent", className),
+		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),
 		...rest,
 		children
 	});

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

@@ -0,0 +1,38 @@
+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}.
+ *
+ * Must be rendered inside a {@link SessionProvider}.
+ *
+ * @example
+ * ```tsx
+ * <StartScreen icon="🍕" title="Pizza Palace">
+ *   <ChatView />
+ * </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 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;
+}): ReactNode;

package/dist/components/chat-view.js

@@ -0,0 +1,102 @@
+import { useSession, useTheme } from "../context.js";
+import { Controls } from "./controls.js";
+import { MessageList } from "./message-list.js";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region components/chat-view.tsx
+/** @jsxImportSource react */
+const STATE_COLORS = {
+	disconnected: "rgba(255,255,255,0.422)",
+	connecting: "rgba(255,255,255,0.422)",
+	ready: "#7fd88f",
+	listening: "#56b6c2",
+	thinking: "#f5a742",
+	speaking: "#e06c75",
+	error: "#e06c75"
+};
+/**
+* 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}.
+*
+* Must be rendered inside a {@link SessionProvider}.
+*
+* @example
+* ```tsx
+* <StartScreen icon="🍕" title="Pizza Palace">
+*   <ChatView />
+* </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 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();
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("flex flex-col h-screen max-w-130 mx-auto font-aai text-sm", className),
+		style: {
+			background: theme.bg,
+			color: theme.text
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3 px-4 py-3 border-b shrink-0",
+				style: { borderColor: theme.border },
+				children: [
+					icon,
+					title ? /* @__PURE__ */ jsx("span", {
+						className: "text-sm font-semibold",
+						style: { color: theme.primary },
+						children: title
+					}) : !icon && /* @__PURE__ */ jsx("pre", {
+						className: "font-aai-mono text-[10px] leading-[1.1] font-bold m-0",
+						style: { color: theme.primary },
+						children: "▄▀█ ▄▀█ █\n█▀█ █▀█ █"
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "ml-auto",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "inline-flex items-center justify-center gap-1.5 text-[13px] font-medium leading-[130%] capitalize",
+							style: { color: "rgba(255,255,255,0.284)" },
+							"data-state": session.state,
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "w-2 h-2 rounded-full",
+								style: { background: STATE_COLORS[session.state] }
+							}), session.state]
+						})
+					})
+				]
+			}),
+			session.error && /* @__PURE__ */ jsx("div", {
+				className: "mx-4 mt-3 px-3 py-2 rounded-aai border text-[13px] leading-[130%]",
+				style: {
+					borderColor: "rgba(224,108,117,0.4)",
+					background: "rgba(224,108,117,0.08)",
+					color: "#e06c75"
+				},
+				children: session.error.message
+			}),
+			/* @__PURE__ */ jsx(MessageList, {}),
+			/* @__PURE__ */ jsx(Controls, {})
+		]
+	});
+}
+//#endregion
+export { ChatView };

package/dist/{_components → components}/controls.d.ts

@@ -15,4 +15,4 @@
  */
 export declare function Controls({ className }: {
     className?: string;
-}): import("preact").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/{_components → components}/controls.js

@@ -1,8 +1,9 @@
-import { useSession } from "../signals.js";
+import { useSession, useTheme } from "../context.js";
 import { Button } from "./button.js";
 import clsx from "clsx";
-import { jsx, jsxs } from "preact/jsx-runtime";
-//#region _components/controls.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region components/controls.tsx
+/** @jsxImportSource react */
 /**
 * Session control buttons: **Stop / Resume** and **New Conversation**.
 *
@@ -20,12 +21,14 @@ import { jsx, jsxs } from "preact/jsx-runtime";
 */
 function Controls({ className }) {
 	const { running, toggle, reset } = useSession();
+	const theme = useTheme();
 	return /* @__PURE__ */ jsxs("div", {
-		class: clsx("flex gap-2 px-4 py-3 border-t border-aai-border shrink-0", className),
+		className: clsx("flex gap-2 px-4 py-3 border-t shrink-0", className),
+		style: { borderColor: theme.border },
 		children: [/* @__PURE__ */ jsx(Button, {
 			variant: "secondary",
 			onClick: toggle,
-			children: running.value ? "Stop" : "Resume"
+			children: running ? "Stop" : "Resume"
 		}), /* @__PURE__ */ jsx(Button, {
 			variant: "ghost",
 			onClick: reset,

package/dist/{_components → components}/message-list.d.ts

@@ -3,7 +3,7 @@
  * streaming agent utterance, and a thinking indicator.
  *
  * Messages and tool calls are interleaved in the correct order. The list
- * auto-scrolls to the latest content via {@link useAutoScroll}.
+ * auto-scrolls to the latest content.
  *
  * Must be rendered inside a {@link SessionProvider}.
  *
@@ -18,4 +18,4 @@
  */
 export declare function MessageList({ className }: {
     className?: string;
-}): import("preact").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/message-list.js

@@ -0,0 +1,149 @@
+import { useSession, useTheme } from "../context.js";
+import { t as ToolCallBlock } from "../tool-call-block-CCuChsFm.js";
+import clsx from "clsx";
+import { useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region components/message-list.tsx
+/** @jsxImportSource react */
+const DOT_STYLES = [
+	0,
+	.16,
+	.32
+].map((delay) => ({
+	animation: "aai-bounce 1.4s infinite ease-in-out both",
+	animationDelay: `${delay}s`
+}));
+/** Animated three-dot "thinking" indicator. */
+function ThinkingDots() {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center gap-2 text-sm font-medium min-h-5",
+		style: { color: "rgba(255,255,255,0.422)" },
+		children: DOT_STYLES.map((style, i) => /* @__PURE__ */ jsx("div", {
+			className: "w-1.5 h-1.5 rounded-full",
+			style: {
+				...style,
+				background: "rgba(255,255,255,0.422)"
+			}
+		}, i))
+	});
+}
+/** Renders a single chat message as a styled bubble. */
+function MessageBubble({ message, theme }) {
+	if (message.role === "user") return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col w-full items-end",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "max-w-[min(82%,64ch)] border px-3 py-2 rounded-aai whitespace-pre-wrap wrap-break-word text-sm font-normal leading-[150%]",
+			style: {
+				background: "rgba(255,255,255,0.031)",
+				borderColor: theme.border,
+				color: theme.text
+			},
+			children: message.content
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "whitespace-pre-wrap wrap-break-word text-sm font-normal leading-[150%]",
+		style: { color: theme.text },
+		children: message.content
+	});
+}
+function useAutoScroll() {
+	const ref = useRef(null);
+	useEffect(() => {
+		ref.current?.scrollIntoView({
+			behavior: "smooth",
+			block: "end"
+		});
+	});
+	return ref;
+}
+/**
+* Scrollable list of all chat messages, tool-call blocks, live transcript,
+* streaming agent utterance, and a thinking indicator.
+*
+* Messages and tool calls are interleaved in the correct order. The list
+* auto-scrolls to the latest content.
+*
+* Must be rendered inside a {@link SessionProvider}.
+*
+* @example
+* ```tsx
+* <MessageList className="flex-1" />
+* ```
+*
+* @param className - Additional CSS class names applied to the scroll container.
+*
+* @public
+*/
+function MessageList({ className }) {
+	const session = useSession();
+	const theme = useTheme();
+	const scrollRef = useAutoScroll();
+	const showThinking = useMemo(() => {
+		if (session.state !== "thinking") return false;
+		const last = session.toolCalls.at(-1);
+		if (last?.status === "pending") return false;
+		const lastMsg = session.messages.at(-1);
+		return !lastMsg || lastMsg.role === "user" || Boolean(last);
+	}, [
+		session.state,
+		session.toolCalls,
+		session.messages
+	]);
+	const { messages, toolCalls } = session;
+	const items = [];
+	let tci = 0;
+	for (const [i, msg] of messages.entries()) {
+		items.push(/* @__PURE__ */ jsx(MessageBubble, {
+			message: msg,
+			theme
+		}, `msg-${i}`));
+		let tc = toolCalls[tci];
+		while (tc && tc.afterMessageIndex <= i) {
+			items.push(/* @__PURE__ */ jsx(ToolCallBlock, { toolCall: tc }, tc.callId));
+			tci++;
+			tc = toolCalls[tci];
+		}
+	}
+	let tc = toolCalls[tci];
+	while (tc) {
+		items.push(/* @__PURE__ */ jsx(ToolCallBlock, { toolCall: tc }, tc.callId));
+		tci++;
+		tc = toolCalls[tci];
+	}
+	const userTranscript = session.userTranscript;
+	return /* @__PURE__ */ jsx("div", {
+		role: "log",
+		className: clsx("flex-1 overflow-y-auto [scrollbar-width:none]", className),
+		style: { background: theme.surface },
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4.5 p-4",
+			children: [
+				items,
+				session.agentTranscript && /* @__PURE__ */ jsx(MessageBubble, {
+					message: {
+						role: "assistant",
+						content: session.agentTranscript
+					},
+					theme
+				}),
+				userTranscript !== null && /* @__PURE__ */ jsx("div", {
+					className: "flex flex-col items-end w-full",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "max-w-[min(82%,64ch)] whitespace-pre-wrap wrap-break-word text-sm leading-[150%] border px-3 py-2 rounded-aai ml-auto",
+						style: {
+							color: "rgba(255,255,255,0.284)",
+							background: "rgba(255,255,255,0.031)",
+							borderColor: theme.border
+						},
+						children: userTranscript || /* @__PURE__ */ jsx(ThinkingDots, {})
+					})
+				}),
+				showThinking && /* @__PURE__ */ jsx(ThinkingDots, {}),
+				/* @__PURE__ */ jsx("div", { ref: scrollRef })
+			]
+		})
+	});
+}
+//#endregion
+export { MessageList };

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

@@ -0,0 +1,21 @@
+import type { 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 />`.
+ *
+ * @example
+ * ```tsx
+ * <SidebarLayout sidebar={<OrderPanel />}>
+ *   <ChatView />
+ * </SidebarLayout>
+ * ```
+ *
+ * @public
+ */
+export declare function SidebarLayout({ sidebar, children, sidebarWidth, sidebarPosition, className, }: {
+    sidebar: ReactNode;
+    children: ReactNode;
+    sidebarWidth?: string | undefined;
+    sidebarPosition?: "left" | "right" | undefined;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/sidebar-layout.js

@@ -0,0 +1,43 @@
+import { useTheme } from "../context.js";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region components/sidebar-layout.tsx
+/** @jsxImportSource 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 />`.
+*
+* @example
+* ```tsx
+* <SidebarLayout sidebar={<OrderPanel />}>
+*   <ChatView />
+* </SidebarLayout>
+* ```
+*
+* @public
+*/
+function SidebarLayout({ sidebar, children, sidebarWidth = "18rem", sidebarPosition = "left", className }) {
+	const theme = useTheme();
+	const sidebarEl = /* @__PURE__ */ jsx("div", {
+		className: "shrink-0 flex flex-col overflow-y-auto",
+		style: {
+			width: sidebarWidth,
+			...sidebarPosition === "left" ? { borderRight: `1px solid ${theme.border}` } : { borderLeft: `1px solid ${theme.border}` }
+		},
+		children: sidebar
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("flex h-screen", className),
+		style: { background: theme.bg },
+		children: [
+			sidebarPosition === "left" && sidebarEl,
+			/* @__PURE__ */ jsx("div", {
+				className: "flex-1 min-w-0",
+				children
+			}),
+			sidebarPosition === "right" && sidebarEl
+		]
+	});
+}
+//#endregion
+export { SidebarLayout };

package/dist/{_components → components}/start-screen.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentChildren } from "preact";
+import type { ReactNode } from "react";
 /**
  * A centered start screen with icon, title, subtitle, and a start button.
  * Renders `children` (the main app) once the session has started.
@@ -17,10 +17,10 @@ import type { ComponentChildren } from "preact";
  * @public
  */
 export declare function StartScreen({ children, icon, title, subtitle, buttonText, className, }: {
-    children: ComponentChildren;
-    icon?: ComponentChildren | undefined;
+    children: ReactNode;
+    icon?: ReactNode | undefined;
     title?: string | undefined;
     subtitle?: string | undefined;
     buttonText?: string | undefined;
     className?: string | undefined;
-}): import("preact").JSX.Element;
+}): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/{_components → components}/start-screen.js

@@ -1,8 +1,9 @@
-import { useSession } from "../signals.js";
+import { useSession, useTheme } from "../context.js";
 import { Button } from "./button.js";
 import clsx from "clsx";
-import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
-//#region _components/start-screen.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region components/start-screen.tsx
+/** @jsxImportSource react */
 /**
 * A centered start screen with icon, title, subtitle, and a start button.
 * Renders `children` (the main app) once the session has started.
@@ -22,19 +23,27 @@ import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
 */
 function StartScreen({ children, icon, title, subtitle, buttonText = "Start", className }) {
 	const { started, start } = useSession();
-	if (started.value) return /* @__PURE__ */ jsx(Fragment, { children });
+	const theme = useTheme();
+	if (started) return children;
 	return /* @__PURE__ */ jsx("div", {
-		class: clsx("flex items-center justify-center h-screen bg-aai-bg font-aai", className),
+		className: clsx("flex items-center justify-center h-screen font-aai", className),
+		style: { background: theme.bg },
 		children: /* @__PURE__ */ jsxs("div", {
-			class: "flex flex-col items-center gap-4 bg-aai-surface border border-aai-border rounded-lg px-12 py-10 max-w-sm text-center",
+			className: "flex flex-col items-center gap-4 border rounded-lg px-12 py-10 max-w-sm text-center",
+			style: {
+				background: theme.surface,
+				borderColor: theme.border
+			},
 			children: [
 				icon,
 				title && /* @__PURE__ */ jsx("h1", {
-					class: "font-semibold text-aai-primary m-0",
+					className: "font-semibold m-0",
+					style: { color: theme.primary },
 					children: title
 				}),
 				subtitle && /* @__PURE__ */ jsx("p", {
-					class: "text-sm text-aai-text-muted m-0",
+					className: "text-sm m-0",
+					style: { color: "rgba(255,255,255,0.284)" },
 					children: subtitle
 				}),
 				/* @__PURE__ */ jsx(Button, {