@alexkroman1/aai-ui 0.12.3 → 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/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/button.js

@@ -1,6 +1,8 @@
+import { useTheme } from "../context.js";
 import clsx from "clsx";
-import { jsx } from "preact/jsx-runtime";
+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

@@ -1,8 +1,8 @@
-import type * as preact from "preact";
+import type { ReactNode } from "react";
 /**
  * The main chat interface for a voice agent session.
- * Displays a header (with title and {@link StateIndicator}), an
- * {@link ErrorBanner}, the {@link MessageList}, and session {@link Controls}.
+ * 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}.
  *
@@ -20,10 +20,19 @@ import type * as preact from "preact";
  * </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({ className }: {
+export declare function ChatView({ icon, title, className, }: {
+    icon?: ReactNode;
+    title?: string;
     className?: string;
-}): preact.JSX.Element;
+}): ReactNode;

package/dist/components/chat-view.js

@@ -1,16 +1,23 @@
-import { useClientConfig } from "../client-context.js";
-import { useSession } from "../signals.js";
+import { useSession, useTheme } from "../context.js";
 import { Controls } from "./controls.js";
-import { ErrorBanner } from "./error-banner.js";
 import { MessageList } from "./message-list.js";
-import { StateIndicator } from "./state-indicator.js";
 import clsx from "clsx";
-import { jsx, jsxs } from "preact/jsx-runtime";
+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 title and {@link StateIndicator}), an
-* {@link ErrorBanner}, the {@link MessageList}, and session {@link Controls}.
+* 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}.
 *
@@ -28,30 +35,64 @@ import { jsx, jsxs } from "preact/jsx-runtime";
 * </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({ className }) {
-	const { session } = useSession();
-	const { title } = useClientConfig();
+function ChatView({ icon, title, className }) {
+	const session = useSession();
+	const theme = useTheme();
 	return /* @__PURE__ */ jsxs("div", {
-		class: clsx("flex flex-col h-screen max-w-130 mx-auto bg-aai-bg text-aai-text font-aai text-sm", className),
+		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", {
-				class: "flex items-center gap-3 px-4 py-3 border-b border-aai-border shrink-0",
-				children: [title ? /* @__PURE__ */ jsx("span", {
-					class: "text-sm font-semibold text-aai-primary",
-					children: title
-				}) : /* @__PURE__ */ jsx("pre", {
-					class: "font-aai-mono text-[10px] leading-[1.1] font-bold text-aai-primary m-0",
-					children: "▄▀█ ▄▀█ █\n█▀█ █▀█ █"
-				}), /* @__PURE__ */ jsx("div", {
-					class: "ml-auto",
-					children: /* @__PURE__ */ jsx(StateIndicator, { state: session.state })
-				})]
+				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(ErrorBanner, { error: session.error }),
 			/* @__PURE__ */ jsx(MessageList, {}),
 			/* @__PURE__ */ jsx(Controls, {})
 		]

package/dist/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/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";
+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/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

@@ -1,18 +1,68 @@
-import { useAutoScroll, useSession } from "../signals.js";
-import { MessageBubble } from "./message-bubble.js";
-import { ThinkingIndicator } from "./thinking-indicator.js";
-import { ToolCallBlock } from "./tool-call-block.js";
-import { Transcript } from "./transcript.js";
+import { useSession, useTheme } from "../context.js";
+import { t as ToolCallBlock } from "../tool-call-block-CCuChsFm.js";
 import clsx from "clsx";
-import { useComputed } from "@preact/signals";
-import { jsx, jsxs } from "preact/jsx-runtime";
+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 via {@link useAutoScroll}.
+* auto-scrolls to the latest content.
 *
 * Must be rendered inside a {@link SessionProvider}.
 *
@@ -26,47 +76,70 @@ import { jsx, jsxs } from "preact/jsx-runtime";
 * @public
 */
 function MessageList({ className }) {
-	const { session } = useSession();
+	const session = useSession();
+	const theme = useTheme();
 	const scrollRef = useAutoScroll();
-	const showThinking = useComputed(() => {
-		if (session.state.value !== "thinking") return false;
-		const last = session.toolCalls.value.at(-1);
+	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.value.at(-1);
+		const lastMsg = session.messages.at(-1);
 		return !lastMsg || lastMsg.role === "user" || Boolean(last);
-	});
-	const messages = session.messages.value;
-	const toolCalls = session.toolCalls.value;
+	}, [
+		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 }, `msg-${i}`));
+		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.toolCallId));
+			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.toolCallId));
+		items.push(/* @__PURE__ */ jsx(ToolCallBlock, { toolCall: tc }, tc.callId));
 		tci++;
 		tc = toolCalls[tci];
 	}
+	const userTranscript = session.userTranscript;
 	return /* @__PURE__ */ jsx("div", {
 		role: "log",
-		class: clsx("flex-1 overflow-y-auto [scrollbar-width:none] bg-aai-surface", className),
+		className: clsx("flex-1 overflow-y-auto [scrollbar-width:none]", className),
+		style: { background: theme.surface },
 		children: /* @__PURE__ */ jsxs("div", {
-			class: "flex flex-col gap-4.5 p-4",
+			className: "flex flex-col gap-4.5 p-4",
 			children: [
 				items,
-				session.agentUtterance.value && /* @__PURE__ */ jsx(MessageBubble, { message: {
-					role: "assistant",
-					content: session.agentUtterance.value
-				} }),
-				/* @__PURE__ */ jsx(Transcript, { userUtterance: session.userUtterance }),
-				showThinking.value && /* @__PURE__ */ jsx(ThinkingIndicator, {}),
+				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 })
 			]
 		})

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

@@ -1,4 +1,4 @@
-import type { ComponentChildren } from "preact";
+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 />`.
@@ -12,10 +12,10 @@ import type { ComponentChildren } from "preact";
  *
  * @public
  */
-export declare function SidebarLayout({ sidebar, children, width, side, className, }: {
-    sidebar: ComponentChildren;
-    children: ComponentChildren;
-    width?: string | undefined;
-    side?: "left" | "right" | undefined;
+export declare function SidebarLayout({ sidebar, children, sidebarWidth, sidebarPosition, className, }: {
+    sidebar: ReactNode;
+    children: ReactNode;
+    sidebarWidth?: string | undefined;
+    sidebarPosition?: "left" | "right" | undefined;
     className?: string;
-}): import("preact").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/sidebar-layout.js

@@ -1,6 +1,8 @@
+import { useTheme } from "../context.js";
 import clsx from "clsx";
-import { jsx, jsxs } from "preact/jsx-runtime";
+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 />`.
@@ -14,21 +16,26 @@ import { jsx, jsxs } from "preact/jsx-runtime";
 *
 * @public
 */
-function SidebarLayout({ sidebar, children, width = "20rem", side = "left", className }) {
+function SidebarLayout({ sidebar, children, sidebarWidth = "18rem", sidebarPosition = "left", className }) {
+	const theme = useTheme();
 	const sidebarEl = /* @__PURE__ */ jsx("div", {
-		class: clsx("flex-shrink-0 flex flex-col overflow-y-auto", side === "left" ? "border-r border-aai-border" : "border-l border-aai-border"),
-		style: { width },
+		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", {
-		class: clsx("flex h-screen bg-aai-bg", className),
+		className: clsx("flex h-screen", className),
+		style: { background: theme.bg },
 		children: [
-			side === "left" && sidebarEl,
+			sidebarPosition === "left" && sidebarEl,
 			/* @__PURE__ */ jsx("div", {
-				class: "flex-1 min-w-0",
+				className: "flex-1 min-w-0",
 				children
 			}),
-			side === "right" && sidebarEl
+			sidebarPosition === "right" && sidebarEl
 		]
 	});
 }

package/dist/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;