@alexkroman1/aai-ui 1.9.2 → 1.10.0

package/dist/{_colors-DJUordGv.js → _colors-DYX7XRTr.js}

@@ -1,4 +1,12 @@
 //#region components/_colors.ts
+/**
+* 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.
+*/
 /** Muted text — subtitles, secondary labels, thinking dots (fg-muted). */
 const TEXT_MUTED = "#57534B";
 /** Faint text — live transcripts, state indicator, start-screen subtitle (warm-500). */

package/dist/{_utils-5cs73OrA.js → _utils-CN1yVgYS.js}

@@ -1,12 +1,9 @@
+import { safeJsonParse } from "@alexkroman1/aai";
 //#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;
-	}
+	return safeJsonParse(str) ?? str;
 }
 /** Truncate a string to `max` characters, appending an ellipsis when cut. */
 function truncate(s, max = 80) {

package/dist/audio.d.ts

@@ -19,6 +19,12 @@ export type VoiceIOOptions = {
     playbackWorkletSrc: string;
     /** Callback invoked with buffered PCM16 microphone data to send to the server. */
     onMicData: (pcm16: ArrayBuffer) => void;
+    /**
+     * Called when an AudioWorklet processor throws and is killed by the browser
+     * (the node produces no further audio or messages), so the session can
+     * transition out of listening/speaking instead of looking healthy forever.
+     */
+    onError?: ((err: Error) => void) | undefined;
 };
 /**
  * Audio I/O interface for voice capture and playback.

package/dist/audio.js

@@ -1,5 +1,19 @@
 import { MIC_BUFFER_SECONDS } from "./types.js";
 //#region audio.ts
+/** How often {@link VoiceIO.done} checks that the AudioContext is still rendering. */
+const DONE_POLL_INTERVAL_MS = 1e3;
+/**
+* Hard cap on waiting for playback to drain. The playback worklet buffers up
+* to 60s of audio, so the longest legitimate drain is just under that — a
+* wait past this means the processor died without reporting 'stop'.
+*/
+const DONE_MAX_WAIT_MS = 65e3;
+/**
+* Bounded wait for the capture worklet's 'stopped' ack during close(). The
+* ack follows the final flush, so waiting for it keeps the tail of speech
+* from being dropped; the timeout covers a dead worklet.
+*/
+const CAPTURE_STOP_ACK_TIMEOUT_MS = 250;
 /**
 * 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
@@ -18,9 +32,10 @@ async function decodeAudioToPcm16(data, targetRate) {
 	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;
+	let i = 0;
+	for (const sample of f32) {
+		const s = Math.max(-1, Math.min(1, sample));
+		pcm[i++] = s < 0 ? s * 32768 : s * 32767;
 	}
 	return pcm;
 }
@@ -36,7 +51,7 @@ async function decodeAudioToPcm16(data, targetRate) {
 * @throws If microphone access is denied or AudioWorklet registration fails.
 */
 async function createVoiceIO(opts) {
-	const { sttSampleRate, ttsSampleRate, captureWorkletSrc, playbackWorkletSrc, onMicData } = opts;
+	const { sttSampleRate, ttsSampleRate, captureWorkletSrc, playbackWorkletSrc, onMicData, onError } = opts;
 	const contextRate = ttsSampleRate;
 	const ctx = new AudioContext({
 		sampleRate: contextRate,
@@ -77,10 +92,19 @@ async function createVoiceIO(opts) {
 		}
 	});
 	mic.connect(capNode);
+	capNode.onprocessorerror = () => {
+		const err = /* @__PURE__ */ new Error("Audio capture worklet crashed");
+		console.error("[aai-ui]", err.message);
+		onError?.(err);
+	};
 	capNode.port.postMessage({ event: "start" });
+	let onCaptureStopped = null;
 	capNode.port.onmessage = (e) => {
-		if (e.data.event !== "chunk") return;
-		onMicData(e.data.buffer);
+		if (e.data.event === "chunk") onMicData(e.data.buffer);
+		else if (e.data.event === "stopped") {
+			onCaptureStopped?.();
+			onCaptureStopped = null;
+		}
 	};
 	let playNode = null;
 	let onPlaybackStop = null;
@@ -91,10 +115,18 @@ async function createVoiceIO(opts) {
 		node.connect(ctx.destination);
 		node.port.onmessage = (e) => {
 			if (e.data.event === "stop") {
+				if (e.data.reason === "interrupt") return;
 				onPlaybackStop?.();
 				onPlaybackStop = null;
 			}
 		};
+		node.onprocessorerror = () => {
+			const err = /* @__PURE__ */ new Error("Audio playback worklet crashed");
+			console.error("[aai-ui]", err.message);
+			onPlaybackStop?.();
+			onPlaybackStop = null;
+			onError?.(err);
+		};
 		playNode = node;
 		return node;
 	}
@@ -111,17 +143,38 @@ async function createVoiceIO(opts) {
 			if (!playNode) return Promise.resolve();
 			if (ctx.state !== "running") return Promise.resolve();
 			return new Promise((resolve) => {
-				onPlaybackStop = resolve;
+				onPlaybackStop?.();
+				const settle = () => {
+					clearInterval(poll);
+					clearTimeout(cap);
+					if (onPlaybackStop === settle) onPlaybackStop = null;
+					resolve();
+				};
+				const poll = setInterval(() => {
+					if (ctx.state !== "running") settle();
+				}, DONE_POLL_INTERVAL_MS);
+				const cap = setTimeout(settle, DONE_MAX_WAIT_MS);
+				onPlaybackStop = settle;
 				playNode?.port.postMessage({ event: "done" });
 			});
 		},
 		flush() {
-			if (playNode) playNode.port.postMessage({ event: "interrupt" });
+			if (!playNode) return;
+			onPlaybackStop?.();
+			onPlaybackStop = null;
+			playNode.port.postMessage({ event: "interrupt" });
 		},
 		async close() {
 			if (lifecycle.signal.aborted) return;
 			lifecycle.abort();
-			capNode.port.postMessage({ event: "stop" });
+			await new Promise((resolve) => {
+				const cap = setTimeout(resolve, CAPTURE_STOP_ACK_TIMEOUT_MS);
+				onCaptureStopped = () => {
+					clearTimeout(cap);
+					resolve();
+				};
+				capNode.port.postMessage({ event: "stop" });
+			});
 			mic.disconnect();
 			capNode.disconnect();
 			if (playNode) playNode.disconnect();

package/dist/{chat-view-C1XbqDk0.js → chat-view-u3yBAlig.js}

@@ -1,12 +1,12 @@
-import { useSession, useSessionCore, useSessionSelector, useTheme } from "./context.js";
+import { 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 { r as TEXT_FAINT, t as ERROR_COLOR } from "./_colors-DYX7XRTr.js";
 import { t as AaiLogo } from "./aai-logo-B8lDmsut.js";
-import { r as SessionUrlChips, t as Controls } from "./controls-BngrPbOC.js";
+import { r as SessionUrlChips, t as Controls } from "./controls-B2EPUJDU.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 { memo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { errorMessage } from "@alexkroman1/aai";
 //#region components/text-controls.tsx
@@ -22,7 +22,7 @@ import { errorMessage } from "@alexkroman1/aai";
 *
 * @public
 */
-function TextControls({ className }) {
+const TextControls = memo(function TextControls({ className }) {
 	const recording = useSessionSelector((s) => s.recording);
 	const state = useSessionSelector((s) => s.state);
 	const core = useSessionCore();
@@ -91,7 +91,7 @@ function TextControls({ className }) {
 			children: uploadError
 		})]
 	});
-}
+});
 //#endregion
 //#region components/chat-view.tsx
 /** @jsxImportSource react */
@@ -129,9 +129,11 @@ function stateColor(state, primary) {
 * @public
 */
 function ChatView({ icon, title, className }) {
-	const session = useSession();
+	const state = useSessionSelector((s) => s.state);
+	const error = useSessionSelector((s) => s.error);
+	const audioOut = useSessionSelector((s) => s.audioOut);
 	const theme = useTheme();
-	const pulsing = PULSING_STATES.has(session.state);
+	const pulsing = PULSING_STATES.has(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: {
@@ -150,24 +152,24 @@ function ChatView({ icon, title, className }) {
 					})]
 				}), /* @__PURE__ */ jsxs(Eyebrow, {
 					className: "shrink-0",
-					"data-state": session.state,
+					"data-state": state,
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "w-[7px] h-[7px] rounded-full",
 						style: {
-							background: stateColor(session.state, theme.primary),
+							background: stateColor(state, theme.primary),
 							animation: pulsing ? "aai-pulse 1.6s ease-in-out infinite" : "none"
 						}
-					}), session.state]
+					}), state]
 				})]
 			}),
-			session.error && /* @__PURE__ */ jsx("div", {
+			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
+				children: error.message
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "flex flex-col flex-1 min-h-0 border rounded-lg overflow-hidden",
@@ -178,7 +180,7 @@ function ChatView({ icon, title, className }) {
 				},
 				children: /* @__PURE__ */ jsx(MessageList, {})
 			}),
-			session.audioOut ? /* @__PURE__ */ jsx(Controls, {}) : /* @__PURE__ */ jsx(TextControls, {})
+			audioOut ? /* @__PURE__ */ jsx(Controls, {}) : /* @__PURE__ */ jsx(TextControls, {})
 		]
 	});
 }

package/dist/components/_colors.d.ts

@@ -6,14 +6,10 @@
  * 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. */

package/dist/components/chat-view.js

@@ -1,3 +1,3 @@
 import "../context.js";
-import { t as ChatView } from "../chat-view-C1XbqDk0.js";
+import { t as ChatView } from "../chat-view-u3yBAlig.js";
 export { ChatView };

package/dist/components/controls.d.ts

@@ -13,6 +13,6 @@
  *
  * @public
  */
-export declare function Controls({ className }: {
+export declare const Controls: import("react").MemoExoticComponent<({ className }: {
     className?: string;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element>;

package/dist/components/controls.js

@@ -1,3 +1,3 @@
 import "../context.js";
-import { t as Controls } from "../controls-BngrPbOC.js";
+import { t as Controls } from "../controls-B2EPUJDU.js";
 export { Controls };

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

@@ -16,6 +16,6 @@
  *
  * @public
  */
-export declare function MessageList({ className }: {
+export declare const MessageList: import("react").MemoExoticComponent<({ className }: {
     className?: string;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element>;

package/dist/components/message-list.js

@@ -1,8 +1,8 @@
-import { useSession, useTheme } from "../context.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 { useSessionSelector, useTheme } from "../context.js";
+import { a as primaryTint, i as TEXT_MUTED, r as TEXT_FAINT } from "../_colors-DYX7XRTr.js";
+import { t as ToolCallBlock } from "../tool-call-block-DIxpG8GM.js";
 import clsx from "clsx";
-import { useEffect, useMemo, useRef } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region components/message-list.tsx
 /** @jsxImportSource react */
@@ -48,8 +48,15 @@ function UserBubble({ theme, color, children }) {
 		})
 	});
 }
-/** Renders a single chat message: labeled agent prose, or a user bubble. */
-function MessageBubble({ message, theme }) {
+/**
+* Renders a single chat message: labeled agent prose, or a user bubble.
+*
+* Memoized so appending one message re-renders one row, not the whole capped
+* list: message objects and the theme are referentially stable across
+* snapshots, and rows are keyed on stable ids (`ChatMessage.id`) that survive
+* the sliding 200-message window.
+*/
+const MessageBubble = memo(function MessageBubble({ message, theme }) {
 	if (message.role === "user") return /* @__PURE__ */ jsx(UserBubble, {
 		theme,
 		color: theme.text,
@@ -67,29 +74,53 @@ function MessageBubble({ message, theme }) {
 			children: message.content
 		})]
 	});
-}
+});
+/**
+* How close to the bottom (px) the container must be for auto-scroll to stay
+* engaged. Generous enough that an in-flight smooth scroll doesn't unpin.
+*/
+const NEAR_BOTTOM_PX = 96;
 /**
-* Smooth-scroll to the anchor whenever the content version advances.
+* Smooth-scroll to the anchor whenever the content version advances — but
+* only while the container is pinned near the bottom. A user who scrolled up
+* to read history isn't yanked back down by streaming updates; scrolling back
+* to the bottom re-engages the auto-scroll.
 *
 * 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.
+*
+* While a partial transcript is streaming, updates arrive faster than a
+* smooth scroll finishes — each restart leaves the animation perpetually
+* mid-flight — so `streaming` switches to an instant jump; committed-content
+* updates keep the smooth animation.
 */
-function useAutoScroll(contentVersion) {
-	const ref = useRef(null);
+function useAutoScroll(contentVersion, streaming) {
+	const anchorRef = useRef(null);
+	const pinnedRef = useRef(true);
 	const scheduledRef = useRef(false);
+	const streamingRef = useRef(streaming);
+	streamingRef.current = streaming;
+	const onScroll = useCallback((event) => {
+		const el = event.currentTarget;
+		pinnedRef.current = el.scrollTop + el.clientHeight >= el.scrollHeight - NEAR_BOTTOM_PX;
+	}, []);
 	useEffect(() => {
-		if (contentVersion === 0 || scheduledRef.current) return;
+		if (contentVersion === 0 || scheduledRef.current || !pinnedRef.current) return;
 		scheduledRef.current = true;
 		requestAnimationFrame(() => {
 			scheduledRef.current = false;
-			ref.current?.scrollIntoView({
-				behavior: "smooth",
+			if (!pinnedRef.current) return;
+			anchorRef.current?.scrollIntoView({
+				behavior: streamingRef.current ? "instant" : "smooth",
 				block: "end"
 			});
 		});
 	}, [contentVersion]);
-	return ref;
+	return {
+		anchorRef,
+		onScroll
+	};
 }
 /**
 * Interleave messages and tool calls into render items, ordered by insertion
@@ -118,43 +149,6 @@ function interleave(messages, toolCalls, renderMessage, renderToolCall) {
 	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.
 *
@@ -172,27 +166,39 @@ function useChatItems(messages, toolCalls, theme) {
 *
 * @public
 */
-function MessageList({ className }) {
-	const session = useSession();
+const MessageList = memo(function MessageList({ className }) {
+	const state = useSessionSelector((s) => s.state);
+	const messages = useSessionSelector((s) => s.messages);
+	const toolCalls = useSessionSelector((s) => s.toolCalls);
+	const userTranscript = useSessionSelector((s) => s.userTranscript);
+	const agentTranscript = useSessionSelector((s) => s.agentTranscript);
+	const contentVersion = useSessionSelector((s) => s.contentVersion);
 	const theme = useTheme();
 	const showThinking = useMemo(() => {
-		if (session.state !== "thinking") return false;
-		const last = session.toolCalls.at(-1);
+		if (state !== "thinking") return false;
+		const last = toolCalls.at(-1);
 		if (last?.status === "pending") return false;
-		const lastMsg = session.messages.at(-1);
+		const lastMsg = messages.at(-1);
 		return !lastMsg || lastMsg.role === "user" || Boolean(last);
 	}, [
-		session.state,
-		session.toolCalls,
-		session.messages
+		state,
+		toolCalls,
+		messages
+	]);
+	const { anchorRef, onScroll } = useAutoScroll(contentVersion, userTranscript !== null);
+	const items = useMemo(() => interleave(messages, toolCalls, (msg) => /* @__PURE__ */ jsx(MessageBubble, {
+		message: msg,
+		theme
+	}, msg.id), (tc) => /* @__PURE__ */ jsx(ToolCallBlock, { toolCall: tc }, tc.callId)), [
+		messages,
+		toolCalls,
+		theme
 	]);
-	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 },
+		onScroll,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-4 p-7",
 			children: [
@@ -210,10 +216,10 @@ function MessageList({ className }) {
 					children: userTranscript ? userTranscript : /* @__PURE__ */ jsx(ThinkingDots, {})
 				}),
 				showThinking && /* @__PURE__ */ jsx(ThinkingDots, {}),
-				/* @__PURE__ */ jsx("div", { ref: scrollRef })
+				/* @__PURE__ */ jsx("div", { ref: anchorRef })
 			]
 		})
 	});
-}
+});
 //#endregion
 export { MessageList };

package/dist/components/start-screen.js

@@ -1,6 +1,6 @@
 import { useSessionCore, useSessionSelector, useTheme } from "../context.js";
 import { Button } from "./button.js";
-import "../_colors-DJUordGv.js";
+import "../_colors-DYX7XRTr.js";
 import { t as AaiLogo } from "../aai-logo-B8lDmsut.js";
 import { t as Eyebrow } from "../eyebrow-C6ZFuiz6.js";
 import clsx from "clsx";

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

@@ -9,6 +9,6 @@
  *
  * @public
  */
-export declare function TextControls({ className }: {
+export declare const TextControls: import("react").MemoExoticComponent<({ className, }: {
     className?: string | undefined;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element>;

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

@@ -12,6 +12,10 @@ import type { ToolCallInfo } from "../types.ts";
  * While the tool call is pending a shimmer animation is shown. Once
  * complete, clicking the row expands the formatted JSON result.
  *
+ * Memoized: tool-call objects are referentially stable across session
+ * snapshots and rows are keyed on the stable `callId`, so a list update only
+ * re-renders the rows whose tool call actually changed.
+ *
  * @example
  * ```tsx
  * <ToolCallBlock toolCall={toolCall} />
@@ -22,7 +26,7 @@ import type { ToolCallInfo } from "../types.ts";
  *
  * @public
  */
-export declare function ToolCallBlock({ toolCall, className, }: {
+export declare const ToolCallBlock: import("react").MemoExoticComponent<({ toolCall, className, }: {
     toolCall: ToolCallInfo;
     className?: string;
-}): ReactNode;
+}) => ReactNode>;

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

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

package/dist/context.d.ts

@@ -5,17 +5,9 @@ export declare function SessionProvider({ value, children }: {
     value: SessionCore;
     children?: ReactNode;
 }): import("react").FunctionComponentElement<import("react").ProviderProps<SessionCore | null>>;
-export type Session = SessionSnapshot & {
-    start(): void;
-    cancel(): void;
-    resetState(): void;
-    reset(): void;
-    disconnect(): void;
-    toggle(): void;
-    startRecording(): void;
-    stopRecording(): void;
-    sendAudioFile(file: Blob): Promise<void>;
-};
+/** The session snapshot merged with the core's control methods. Method
+ *  signatures come from {@link SessionCore} — one source of truth. */
+export type Session = SessionSnapshot & Pick<SessionCore, "start" | "cancel" | "resetState" | "reset" | "disconnect" | "toggle" | "startRecording" | "stopRecording" | "sendAudioFile">;
 /**
  * Return the raw {@link SessionCore} from context without subscribing to
  * snapshot changes. Useful for accessing stable methods (`start`, `toggle`,

package/dist/context.js

@@ -1,4 +1,5 @@
-import { createContext, createElement, useCallback, useContext, useEffect, useRef, useSyncExternalStore } from "react";
+import { createContext, createElement, useContext, useEffect, useMemo, useSyncExternalStore } from "react";
+import { useSyncExternalStoreWithSelector } from "use-sync-external-store/with-selector";
 //#region context.ts
 const DEFAULT_THEME = {
 	bg: "#FBF8F2",
@@ -27,8 +28,9 @@ function useSessionCore() {
 }
 function useSession() {
 	const core = useSessionCore();
-	return {
-		...useSyncExternalStore(core.subscribe, core.getSnapshot),
+	const snapshot = useSyncExternalStore(core.subscribe, core.getSnapshot);
+	return useMemo(() => ({
+		...snapshot,
 		start: core.start,
 		cancel: core.cancel,
 		resetState: core.resetState,
@@ -38,7 +40,7 @@ function useSession() {
 		startRecording: core.startRecording,
 		stopRecording: core.stopRecording,
 		sendAudioFile: core.sendAudioFile
-	};
+	}), [snapshot, core]);
 }
 /**
 * Subscribe to a narrow slice of the session snapshot.
@@ -56,29 +58,14 @@ function useSession() {
 */
 function useSessionSelector(selector, isEqual = Object.is) {
 	const core = useSessionCore();
-	const selectorRef = useRef(selector);
-	selectorRef.current = selector;
-	const isEqualRef = useRef(isEqual);
-	isEqualRef.current = isEqual;
-	const cacheRef = useRef({ hasValue: false });
-	const getSelection = useCallback(() => {
-		const next = selectorRef.current(core.getSnapshot());
-		const cache = cacheRef.current;
-		if (cache.hasValue && isEqualRef.current(cache.value, next)) return cache.value;
-		cacheRef.current = {
-			hasValue: true,
-			value: next
-		};
-		return next;
-	}, [core]);
-	return useSyncExternalStore(core.subscribe, getSelection);
+	return useSyncExternalStoreWithSelector(core.subscribe, core.getSnapshot, core.getSnapshot, selector, isEqual);
 }
 const ThemeCtx = createContext(DEFAULT_THEME);
 function ThemeProvider({ value, children }) {
-	const merged = value ? {
+	const merged = useMemo(() => value ? {
 		...DEFAULT_THEME,
 		...value
-	} : DEFAULT_THEME;
+	} : DEFAULT_THEME, [value]);
 	usePageBackground(merged.bg);
 	return createElement(ThemeCtx.Provider, { value: merged }, children);
 }