@alexkroman1/aai-ui 1.8.2 → 1.9.0

package/dist/components/chat-view.js

@@ -1,99 +1,3 @@
-import { useSession, useTheme } from "../context.js";
-import { t as AaiLogo } from "../aai-logo-BqFv6JU6.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(AaiLogo, {}),
-					/* @__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
+import "../context.js";
+import { t as ChatView } from "../chat-view-C1XbqDk0.js";
 export { ChatView };

package/dist/components/controls.d.ts

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

package/dist/components/controls.js

@@ -1,40 +1,3 @@
-import { useSession, useTheme } from "../context.js";
-import { Button } from "./button.js";
-import clsx from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region components/controls.tsx
-/** @jsxImportSource react */
-/**
-* Session control buttons: **Stop / Resume** and **New Conversation**.
-*
-* Reads session state from {@link useSession}. Must be rendered inside a
-* {@link SessionProvider}.
-*
-* @example
-* ```tsx
-* <Controls className="justify-end" />
-* ```
-*
-* @param className - Additional CSS class names applied to the container.
-*
-* @public
-*/
-function Controls({ className }) {
-	const { running, toggle, reset } = useSession();
-	const theme = useTheme();
-	return /* @__PURE__ */ jsxs("div", {
-		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 ? "Stop" : "Resume"
-		}), /* @__PURE__ */ jsx(Button, {
-			variant: "ghost",
-			onClick: reset,
-			children: "New Conversation"
-		})]
-	});
-}
-//#endregion
+import "../context.js";
+import { t as Controls } from "../controls-BngrPbOC.js";
 export { Controls };

package/dist/components/eyebrow.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+/**
+ * Eyebrow label — the design system's small outlined pill with ALL-CAPS,
+ * tracked text ("VOICE AGENT", "LISTENING", …). Used as a section label on
+ * the start screen and as the live status chip in the chat header.
+ *
+ * @internal
+ */
+export declare function Eyebrow({ children, className, style, ...rest }: {
+    children: ReactNode;
+    className?: string | undefined;
+} & Omit<React.HTMLAttributes<HTMLSpanElement>, "className">): ReactNode;

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

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

package/dist/components/message-list.js

@@ -1,5 +1,6 @@
 import { useSession, useTheme } from "../context.js";
-import { t as ToolCallBlock } from "../tool-call-block-wby_jyoY.js";
+import { a as primaryTint, i as TEXT_MUTED, r as TEXT_FAINT } from "../_colors-DJUordGv.js";
+import { t as ToolCallBlock } from "../tool-call-block-7f1GTG-P.js";
 import clsx from "clsx";
 import { useEffect, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -17,47 +18,143 @@ const DOT_STYLES = [
 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)" },
+		style: { color: TEXT_MUTED },
 		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)"
+				background: TEXT_MUTED
 			}
 		}, i))
 	});
 }
-/** Renders a single chat message as a styled bubble. */
-function MessageBubble({ message, theme }) {
-	if (message.role === "user") return /* @__PURE__ */ jsx("div", {
+/**
+* Right-aligned user bubble — a primary-tinted card (the design system's
+* indigo-50 fill with an indigo-100 edge, derived from the theme primary so
+* custom themes stay coherent). Shared by finalized messages and the live
+* transcript.
+*/
+function UserBubble({ theme, color, children }) {
+	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%]",
+			className: "max-w-[min(78%,64ch)] border px-3.5 py-2.5 rounded-md whitespace-pre-wrap wrap-break-word text-[15px] font-normal leading-[22px]",
 			style: {
-				background: "rgba(255,255,255,0.031)",
-				borderColor: theme.border,
-				color: theme.text
+				background: primaryTint(theme.primary, theme.surface, 7),
+				borderColor: primaryTint(theme.primary, theme.surface, 16),
+				color
 			},
-			children: message.content
+			children
 		})
 	});
-	return /* @__PURE__ */ jsx("div", {
-		className: "whitespace-pre-wrap wrap-break-word text-sm font-normal leading-[150%]",
-		style: { color: theme.text },
+}
+/** Renders a single chat message: labeled agent prose, or a user bubble. */
+function MessageBubble({ message, theme }) {
+	if (message.role === "user") return /* @__PURE__ */ jsx(UserBubble, {
+		theme,
+		color: theme.text,
 		children: message.content
 	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1 max-w-[82%]",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-[10px] font-medium tracking-[1.2px] uppercase leading-none",
+			style: { color: TEXT_FAINT },
+			children: "Agent"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "whitespace-pre-wrap wrap-break-word text-[15px] font-normal leading-[23px]",
+			style: { color: theme.text },
+			children: message.content
+		})]
+	});
 }
-function useAutoScroll() {
+/**
+* Smooth-scroll to the anchor whenever the content version advances.
+*
+* The scroll runs inside `requestAnimationFrame` and is deduped per frame:
+* several snapshot updates in one frame (transcript + message + tool call)
+* trigger a single scroll after layout instead of one forced layout each.
+*/
+function useAutoScroll(contentVersion) {
 	const ref = useRef(null);
+	const scheduledRef = useRef(false);
 	useEffect(() => {
-		ref.current?.scrollIntoView({
-			behavior: "smooth",
-			block: "end"
+		if (contentVersion === 0 || scheduledRef.current) return;
+		scheduledRef.current = true;
+		requestAnimationFrame(() => {
+			scheduledRef.current = false;
+			ref.current?.scrollIntoView({
+				behavior: "smooth",
+				block: "end"
+			});
 		});
-	});
+	}, [contentVersion]);
 	return ref;
 }
 /**
+* Interleave messages and tool calls into render items, ordered by insertion
+* time. Each tool call renders immediately after its anchor message
+* (`afterMessageId`); tool calls whose anchor slid out of the retained window
+* (or that were inserted before any message existed) render first.
+*/
+function interleave(messages, toolCalls, renderMessage, renderToolCall) {
+	const items = [];
+	let tci = 0;
+	const pushToolCallsThrough = (maxAfterId) => {
+		let tc = toolCalls[tci];
+		while (tc && tc.afterMessageId <= maxAfterId) {
+			items.push(renderToolCall(tc));
+			tci++;
+			tc = toolCalls[tci];
+		}
+	};
+	const firstMessage = messages[0];
+	if (firstMessage) pushToolCallsThrough(firstMessage.id - 1);
+	for (const msg of messages) {
+		items.push(renderMessage(msg));
+		pushToolCallsThrough(msg.id);
+	}
+	pushToolCallsThrough(Number.POSITIVE_INFINITY);
+	return items;
+}
+/**
+* Build the interleaved row elements, reusing each row's element object across
+* renders while its inputs are unchanged. Returning the identical element
+* reference lets React bail out of re-rendering that row entirely — the same
+* effect as wrapping the row components in `memo()` — so appending one message
+* re-renders one row, not the whole capped list. Rows are keyed on stable ids
+* (`ChatMessage.id`, `ToolCallInfo.callId`), which survive the sliding
+* 200-message window; message and tool-call objects are referentially stable
+* across snapshots, making the identity checks below sufficient.
+*/
+function useChatItems(messages, toolCalls, theme) {
+	const cacheRef = useRef(/* @__PURE__ */ new Map());
+	return useMemo(() => {
+		const prev = cacheRef.current;
+		const next = /* @__PURE__ */ new Map();
+		const rowFor = (key, data, make) => {
+			const hit = prev.get(key);
+			const element = hit && hit.data === data && hit.theme === theme ? hit.element : make();
+			next.set(key, {
+				data,
+				theme,
+				element
+			});
+			return element;
+		};
+		const items = interleave(messages, toolCalls, (msg) => rowFor(`m${msg.id}`, msg, () => /* @__PURE__ */ jsx(MessageBubble, {
+			message: msg,
+			theme
+		}, msg.id)), (tc) => rowFor(`t${tc.callId}`, tc, () => /* @__PURE__ */ jsx(ToolCallBlock, { toolCall: tc }, tc.callId)));
+		cacheRef.current = next;
+		return items;
+	}, [
+		messages,
+		toolCalls,
+		theme
+	]);
+}
+/**
 * Scrollable list of all chat messages, tool-call blocks, live transcript,
 * streaming agent utterance, and a thinking indicator.
 *
@@ -78,7 +175,6 @@ function useAutoScroll() {
 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);
@@ -90,54 +186,28 @@ function MessageList({ className }) {
 		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;
+	const { messages, toolCalls, userTranscript, agentTranscript } = session;
+	const scrollRef = useAutoScroll(session.contentVersion);
+	const items = useChatItems(messages, toolCalls, theme);
 	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",
+			className: "flex flex-col gap-4 p-7",
 			children: [
 				items,
-				session.agentTranscript && /* @__PURE__ */ jsx(MessageBubble, {
+				agentTranscript && /* @__PURE__ */ jsx(MessageBubble, {
 					message: {
 						role: "assistant",
-						content: session.agentTranscript
+						content: 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, {})
-					})
+				userTranscript !== null && /* @__PURE__ */ jsx(UserBubble, {
+					theme,
+					color: "#6F6A60",
+					children: userTranscript ? userTranscript : /* @__PURE__ */ jsx(ThinkingDots, {})
 				}),
 				showThinking && /* @__PURE__ */ jsx(ThinkingDots, {}),
 				/* @__PURE__ */ jsx("div", { ref: scrollRef })

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

@@ -18,4 +18,4 @@ export declare function SidebarLayout({ sidebar, children, sidebarWidth, sidebar
     sidebarWidth?: string | undefined;
     sidebarPosition?: "left" | "right" | undefined;
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/components/start-screen.d.ts

@@ -1,7 +1,8 @@
 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.
+ * A centered start screen: a white card on the cream page with the logo, an
+ * eyebrow label, a serif title, subtitle, and the start CTA. Renders
+ * `children` (the main app) once the session has started.
  *
  * @example
  * ```tsx
@@ -23,4 +24,4 @@ export declare function StartScreen({ children, icon, title, subtitle, buttonTex
     subtitle?: string | undefined;
     buttonText?: string | undefined;
     className?: string | undefined;
-}): 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;
+}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;

package/dist/components/start-screen.js

@@ -1,13 +1,16 @@
-import { useSession, useTheme } from "../context.js";
+import { useSessionCore, useSessionSelector, useTheme } from "../context.js";
 import { Button } from "./button.js";
-import { t as AaiLogo } from "../aai-logo-BqFv6JU6.js";
+import "../_colors-DJUordGv.js";
+import { t as AaiLogo } from "../aai-logo-B8lDmsut.js";
+import { t as Eyebrow } from "../eyebrow-C6ZFuiz6.js";
 import clsx from "clsx";
 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.
+* A centered start screen: a white card on the cream page with the logo, an
+* eyebrow label, a serif title, subtitle, and the start CTA. Renders
+* `children` (the main app) once the session has started.
 *
 * @example
 * ```tsx
@@ -22,34 +25,37 @@ import { jsx, jsxs } from "react/jsx-runtime";
 *
 * @public
 */
-function StartScreen({ children, icon, title, subtitle, buttonText = "Start", className }) {
-	const { started, start } = useSession();
+function StartScreen({ children, icon, title, subtitle, buttonText = "Start Conversation", className }) {
+	const started = useSessionSelector((s) => s.started);
+	const { start } = useSessionCore();
 	const theme = useTheme();
 	if (started) return children;
 	return /* @__PURE__ */ jsx("div", {
 		className: clsx("flex items-center justify-center h-screen font-aai", className),
 		style: { background: theme.bg },
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col items-center gap-4 border rounded-lg px-12 py-10 max-w-sm text-center",
+			className: "flex flex-col items-center gap-5 border rounded-xl px-10 py-12 sm:px-16 sm:py-14 max-w-105 text-center",
 			style: {
 				background: theme.surface,
-				borderColor: theme.border
+				borderColor: theme.border,
+				boxShadow: "0 4px 12px -2px rgb(20 18 12 / 0.08)"
 			},
 			children: [
-				icon ?? (!title && /* @__PURE__ */ jsx(AaiLogo, { size: 20 })),
+				icon ?? /* @__PURE__ */ jsx(AaiLogo, { size: 24 }),
+				/* @__PURE__ */ jsx(Eyebrow, { children: "Voice Agent" }),
 				title && /* @__PURE__ */ jsx("h1", {
-					className: "font-semibold m-0",
-					style: { color: theme.primary },
+					className: "font-aai-serif font-normal text-[32px] leading-[1.15] tracking-[-0.2px] m-0 text-balance",
+					style: { color: theme.text },
 					children: title
 				}),
 				subtitle && /* @__PURE__ */ jsx("p", {
-					className: "text-sm m-0",
-					style: { color: "rgba(255,255,255,0.284)" },
+					className: "text-[15px] leading-[22px] m-0 max-w-75",
+					style: { color: "#57534B" },
 					children: subtitle
 				}),
 				/* @__PURE__ */ jsx(Button, {
 					size: "lg",
-					className: "mt-2 w-full",
+					className: "mt-2",
 					onClick: start,
 					children: buttonText
 				})

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

@@ -0,0 +1,14 @@
+/**
+ * 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
+ */
+export declare function TextControls({ className }: {
+    className?: string | undefined;
+}): import("react").JSX.Element;

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

@@ -1,14 +1,16 @@
 import { type ReactNode } from "react";
 import type { ToolCallInfo } from "../types.ts";
 /**
- * Renders a tool invocation with an optional icon/emoji, title, subtitle, and a
- * collapsible result viewer.
+ * Renders a tool invocation as the design system's console row: a small
+ * outlined "TOOL" chip (or the tool's configured icon), the tool name in
+ * mono, a truncated args preview, and a rotating chevron that expands the
+ * formatted result.
  *
  * Tool display is configured via `ToolConfigContext`. If no config is found
  * for a tool name, the raw tool name is shown as the title.
  *
  * While the tool call is pending a shimmer animation is shown. Once
- * complete, clicking the block expands the formatted JSON result.
+ * complete, clicking the row expands the formatted JSON result.
  *
  * @example
  * ```tsx

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

@@ -1,3 +1,3 @@
 import "../context.js";
-import { t as ToolCallBlock } from "../tool-call-block-wby_jyoY.js";
+import { t as ToolCallBlock } from "../tool-call-block-7f1GTG-P.js";
 export { ToolCallBlock };

package/dist/components/url-chips.d.ts

@@ -0,0 +1,28 @@
+/**
+ * The session's shareable UI URL.
+ *
+ * @public
+ */
+export declare function UiUrlChip({ className }: {
+    className?: string | undefined;
+}): import("react").JSX.Element;
+/**
+ * The session's programmatic WebSocket endpoint — the URL a script or backend
+ * can connect to directly instead of using this UI.
+ *
+ * @public
+ */
+export declare function ApiUrlChip({ className }: {
+    className?: string | undefined;
+}): import("react").JSX.Element;
+/**
+ * The UI and API URLs side by side. They answer the same question — "how do I
+ * reach this agent?" — so they belong together and each needs its label to be
+ * told apart. Rendered by the default shell in every session mode (S2S,
+ * pipeline, text-only).
+ *
+ * @public
+ */
+export declare function SessionUrlChips({ className }: {
+    className?: string | undefined;
+}): import("react").JSX.Element;

package/dist/context.d.ts

@@ -1,7 +1,6 @@
 import { type ReactNode } from "react";
 import type { SessionCore, SessionSnapshot } from "./session-core.ts";
 import type { ClientTheme } from "./types.ts";
-declare const DEFAULT_THEME: Required<ClientTheme>;
 export declare function SessionProvider({ value, children }: {
     value: SessionCore;
     children?: ReactNode;
@@ -13,11 +12,38 @@ export type Session = SessionSnapshot & {
     reset(): void;
     disconnect(): void;
     toggle(): void;
+    startRecording(): void;
+    stopRecording(): void;
+    sendAudioFile(file: Blob): Promise<void>;
 };
+/**
+ * Return the raw {@link SessionCore} from context without subscribing to
+ * snapshot changes. Useful for accessing stable methods (`start`, `toggle`,
+ * `reset`, …) from components that select narrow state via
+ * {@link useSessionSelector}.
+ *
+ * Not part of the package's public export surface — internal to aai-ui
+ * components.
+ */
+export declare function useSessionCore(): SessionCore;
 export declare function useSession(): Session;
-export declare function ThemeProvider({ value, children }: {
-    value?: ClientTheme;
+/**
+ * Subscribe to a narrow slice of the session snapshot.
+ *
+ * Unlike {@link useSession} — which re-renders the component on *every*
+ * snapshot change — this only triggers a re-render when the selected value
+ * changes (per `isEqual`, default `Object.is`). Use it for components that
+ * read a single field, e.g. `useSessionSelector((s) => s.running)`.
+ *
+ * The selector must be pure. It may run on every snapshot change, so keep it
+ * cheap; when it returns a derived object, pass a custom `isEqual` to avoid
+ * re-renders on referentially-new-but-equal results.
+ *
+ * @public
+ */
+export declare function useSessionSelector<T>(selector: (snapshot: SessionSnapshot) => T, isEqual?: (a: T, b: T) => boolean): T;
+export declare function ThemeProvider({ value, children, }: {
+    value?: ClientTheme | undefined;
     children?: ReactNode;
 }): import("react").FunctionComponentElement<import("react").ProviderProps<Required<ClientTheme>>>;
 export declare function useTheme(): Required<ClientTheme>;
-export { DEFAULT_THEME };