@cossistant/react 0.0.20 → 0.0.23

package/hooks/use-new-message-sound.js

@@ -0,0 +1,34 @@
+import { useSoundEffect } from "./use-sound-effect.js";
+import { useCallback } from "react";
+
+//#region src/hooks/use-new-message-sound.ts
+const NEW_MESSAGE_SOUND_PATH = "/sounds/new-message.wav";
+/**
+* Hook to play a sound when a new message arrives.
+*
+* @param options - Optional configuration for volume and playback speed
+* @returns Function to play the new message sound
+*
+* @example
+* const playNewMessageSound = useNewMessageSound({ volume: 0.8, playbackRate: 1.1 });
+*
+* useEffect(() => {
+*   if (hasNewMessage) {
+*     playNewMessageSound();
+*   }
+* }, [hasNewMessage]);
+*/
+function useNewMessageSound(options) {
+	const { play } = useSoundEffect(NEW_MESSAGE_SOUND_PATH, {
+		loop: false,
+		volume: options?.volume ?? .7,
+		playbackRate: options?.playbackRate ?? 1
+	});
+	return useCallback(() => {
+		play();
+	}, [play]);
+}
+
+//#endregion
+export { useNewMessageSound };
+//# sourceMappingURL=use-new-message-sound.js.map

package/hooks/use-new-message-sound.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-new-message-sound.js","names":[],"sources":["../../src/hooks/use-new-message-sound.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useSoundEffect } from \"./use-sound-effect\";\n\n// Use a path that can be served from public directory\nconst NEW_MESSAGE_SOUND_PATH = \"/sounds/new-message.wav\";\n\n/**\n * Hook to play a sound when a new message arrives.\n *\n * @param options - Optional configuration for volume and playback speed\n * @returns Function to play the new message sound\n *\n * @example\n * const playNewMessageSound = useNewMessageSound({ volume: 0.8, playbackRate: 1.1 });\n *\n * useEffect(() => {\n *   if (hasNewMessage) {\n *     playNewMessageSound();\n *   }\n * }, [hasNewMessage]);\n */\nexport function useNewMessageSound(options?: {\n\tvolume?: number;\n\tplaybackRate?: number;\n}): () => void {\n\tconst { play } = useSoundEffect(NEW_MESSAGE_SOUND_PATH, {\n\t\tloop: false,\n\t\tvolume: options?.volume ?? 0.7,\n\t\tplaybackRate: options?.playbackRate ?? 1.0,\n\t});\n\n\treturn useCallback(() => {\n\t\tplay();\n\t}, [play]);\n}\n"],"mappings":";;;;AAIA,MAAM,yBAAyB;;;;;;;;;;;;;;;;AAiB/B,SAAgB,mBAAmB,SAGpB;CACd,MAAM,EAAE,SAAS,eAAe,wBAAwB;EACvD,MAAM;EACN,QAAQ,SAAS,UAAU;EAC3B,cAAc,SAAS,gBAAgB;EACvC,CAAC;AAEF,QAAO,kBAAkB;AACxB,QAAM;IACJ,CAAC,KAAK,CAAC"}

package/hooks/use-sound-effect.d.ts

@@ -0,0 +1,30 @@
+//#region src/hooks/use-sound-effect.d.ts
+type UseSoundEffectOptions = {
+  loop?: boolean;
+  volume?: number;
+  playbackRate?: number;
+};
+type UseSoundEffectReturn = {
+  play: () => void;
+  stop: () => void;
+  isPlaying: boolean;
+  isLoading: boolean;
+  error: Error | null;
+};
+/**
+ * Hook to play sound effects using the Web Audio API.
+ *
+ * @param soundPath - Path to the sound file (relative to public directory or absolute URL)
+ * @param options - Configuration options for the sound
+ * @returns Object with play, stop functions and state
+ *
+ * @example
+ * const { play, stop, isPlaying } = useSoundEffect('/sounds/notification.wav', {
+ *   loop: false,
+ *   volume: 0.5
+ * });
+ */
+declare function useSoundEffect(soundPath: string, options?: UseSoundEffectOptions): UseSoundEffectReturn;
+//#endregion
+export { UseSoundEffectOptions, UseSoundEffectReturn, useSoundEffect };
+//# sourceMappingURL=use-sound-effect.d.ts.map

package/hooks/use-sound-effect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sound-effect.d.ts","names":[],"sources":["../../src/hooks/use-sound-effect.ts"],"sourcesContent":[],"mappings":";KAEY,qBAAA;EAAA,IAAA,CAAA,EAAA,OAAA;EAMA,MAAA,CAAA,EAAA,MAAA;EAqBI,YAAA,CAAA,EAAA,MAAc;;KArBlB,oBAAA;;;;;SAKJ;;;;;;;;;;;;;;;iBAgBQ,cAAA,8BAEN,wBACP"}

package/hooks/use-sound-effect.js

@@ -0,0 +1,104 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+//#region src/hooks/use-sound-effect.ts
+/**
+* Hook to play sound effects using the Web Audio API.
+*
+* @param soundPath - Path to the sound file (relative to public directory or absolute URL)
+* @param options - Configuration options for the sound
+* @returns Object with play, stop functions and state
+*
+* @example
+* const { play, stop, isPlaying } = useSoundEffect('/sounds/notification.wav', {
+*   loop: false,
+*   volume: 0.5
+* });
+*/
+function useSoundEffect(soundPath, options = {}) {
+	const { loop = false, volume = 1, playbackRate = 1 } = options;
+	const [isPlaying, setIsPlaying] = useState(false);
+	const [isLoading, setIsLoading] = useState(true);
+	const [error, setError] = useState(null);
+	const audioContextRef = useRef(null);
+	const audioBufferRef = useRef(null);
+	const sourceNodeRef = useRef(null);
+	const gainNodeRef = useRef(null);
+	useEffect(() => {
+		let mounted = true;
+		const initAudio = async () => {
+			try {
+				if (!audioContextRef.current) audioContextRef.current = new (window.AudioContext || window.webkitAudioContext)();
+				const response = await fetch(soundPath);
+				if (!response.ok) throw new Error(`Failed to load sound: ${response.statusText}`);
+				const arrayBuffer = await response.arrayBuffer();
+				const audioBuffer = await audioContextRef.current.decodeAudioData(arrayBuffer);
+				if (mounted) {
+					audioBufferRef.current = audioBuffer;
+					setIsLoading(false);
+				}
+			} catch (err) {
+				if (mounted) {
+					setError(err instanceof Error ? err : /* @__PURE__ */ new Error("Failed to load sound"));
+					setIsLoading(false);
+				}
+			}
+		};
+		initAudio();
+		return () => {
+			mounted = false;
+		};
+	}, [soundPath]);
+	const play = useCallback(() => {
+		const audioContext = audioContextRef.current;
+		const audioBuffer = audioBufferRef.current;
+		if (!(audioContext && audioBuffer && !isLoading && !error)) return;
+		if (sourceNodeRef.current) try {
+			sourceNodeRef.current.stop();
+		} catch {}
+		const source = audioContext.createBufferSource();
+		source.buffer = audioBuffer;
+		source.loop = loop;
+		source.playbackRate.value = playbackRate;
+		const gainNode = audioContext.createGain();
+		gainNode.gain.value = volume;
+		source.connect(gainNode);
+		gainNode.connect(audioContext.destination);
+		sourceNodeRef.current = source;
+		gainNodeRef.current = gainNode;
+		source.onended = () => {
+			if (!loop) setIsPlaying(false);
+		};
+		source.start(0);
+		setIsPlaying(true);
+	}, [
+		loop,
+		volume,
+		playbackRate,
+		isLoading,
+		error
+	]);
+	const stop = useCallback(() => {
+		if (sourceNodeRef.current) {
+			try {
+				sourceNodeRef.current.stop();
+				sourceNodeRef.current.disconnect();
+			} catch {}
+			sourceNodeRef.current = null;
+		}
+		setIsPlaying(false);
+	}, []);
+	useEffect(() => () => {
+		stop();
+	}, [stop]);
+	return {
+		play,
+		stop,
+		isPlaying,
+		isLoading,
+		error
+	};
+}
+
+//#endregion
+export { useSoundEffect };
+//# sourceMappingURL=use-sound-effect.js.map

package/hooks/use-sound-effect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sound-effect.js","names":[],"sources":["../../src/hooks/use-sound-effect.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nexport type UseSoundEffectOptions = {\n\tloop?: boolean;\n\tvolume?: number;\n\tplaybackRate?: number;\n};\n\nexport type UseSoundEffectReturn = {\n\tplay: () => void;\n\tstop: () => void;\n\tisPlaying: boolean;\n\tisLoading: boolean;\n\terror: Error | null;\n};\n\n/**\n * Hook to play sound effects using the Web Audio API.\n *\n * @param soundPath - Path to the sound file (relative to public directory or absolute URL)\n * @param options - Configuration options for the sound\n * @returns Object with play, stop functions and state\n *\n * @example\n * const { play, stop, isPlaying } = useSoundEffect('/sounds/notification.wav', {\n *   loop: false,\n *   volume: 0.5\n * });\n */\nexport function useSoundEffect(\n\tsoundPath: string,\n\toptions: UseSoundEffectOptions = {}\n): UseSoundEffectReturn {\n\tconst { loop = false, volume = 1.0, playbackRate = 1.0 } = options;\n\n\tconst [isPlaying, setIsPlaying] = useState(false);\n\tconst [isLoading, setIsLoading] = useState(true);\n\tconst [error, setError] = useState<Error | null>(null);\n\n\tconst audioContextRef = useRef<AudioContext | null>(null);\n\tconst audioBufferRef = useRef<AudioBuffer | null>(null);\n\tconst sourceNodeRef = useRef<AudioBufferSourceNode | null>(null);\n\tconst gainNodeRef = useRef<GainNode | null>(null);\n\n\t// Initialize audio context and load sound\n\tuseEffect(() => {\n\t\tlet mounted = true;\n\n\t\tconst initAudio = async () => {\n\t\t\ttry {\n\t\t\t\t// Create audio context if it doesn't exist\n\t\t\t\tif (!audioContextRef.current) {\n\t\t\t\t\taudioContextRef.current = new (\n\t\t\t\t\t\twindow.AudioContext ||\n\t\t\t\t\t\t(\n\t\t\t\t\t\t\twindow as typeof window & {\n\t\t\t\t\t\t\t\twebkitAudioContext?: typeof AudioContext;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t).webkitAudioContext\n\t\t\t\t\t)();\n\t\t\t\t}\n\n\t\t\t\t// Load the audio file\n\t\t\t\tconst response = await fetch(soundPath);\n\t\t\t\tif (!response.ok) {\n\t\t\t\t\tthrow new Error(`Failed to load sound: ${response.statusText}`);\n\t\t\t\t}\n\n\t\t\t\tconst arrayBuffer = await response.arrayBuffer();\n\t\t\t\tconst audioBuffer =\n\t\t\t\t\tawait audioContextRef.current.decodeAudioData(arrayBuffer);\n\n\t\t\t\tif (mounted) {\n\t\t\t\t\taudioBufferRef.current = audioBuffer;\n\t\t\t\t\tsetIsLoading(false);\n\t\t\t\t}\n\t\t\t} catch (err) {\n\t\t\t\tif (mounted) {\n\t\t\t\t\tsetError(\n\t\t\t\t\t\terr instanceof Error ? err : new Error(\"Failed to load sound\")\n\t\t\t\t\t);\n\t\t\t\t\tsetIsLoading(false);\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tinitAudio();\n\n\t\treturn () => {\n\t\t\tmounted = false;\n\t\t};\n\t}, [soundPath]);\n\n\t// Play sound\n\tconst play = useCallback(() => {\n\t\tconst audioContext = audioContextRef.current;\n\t\tconst audioBuffer = audioBufferRef.current;\n\n\t\tconst canPlay = audioContext && audioBuffer && !isLoading && !error;\n\n\t\tif (!canPlay) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Stop any currently playing sound\n\t\tif (sourceNodeRef.current) {\n\t\t\ttry {\n\t\t\t\tsourceNodeRef.current.stop();\n\t\t\t} catch {\n\t\t\t\t// Ignore errors if already stopped\n\t\t\t}\n\t\t}\n\n\t\t// Create new source node\n\t\tconst source = audioContext.createBufferSource();\n\t\tsource.buffer = audioBuffer;\n\t\tsource.loop = loop;\n\t\tsource.playbackRate.value = playbackRate;\n\n\t\t// Create gain node for volume control\n\t\tconst gainNode = audioContext.createGain();\n\t\tgainNode.gain.value = volume;\n\n\t\t// Connect nodes: source -> gain -> destination\n\t\tsource.connect(gainNode);\n\t\tgainNode.connect(audioContext.destination);\n\n\t\t// Store references\n\t\tsourceNodeRef.current = source;\n\t\tgainNodeRef.current = gainNode;\n\n\t\t// Handle end event\n\t\tsource.onended = () => {\n\t\t\tif (!loop) {\n\t\t\t\tsetIsPlaying(false);\n\t\t\t}\n\t\t};\n\n\t\t// Start playback\n\t\tsource.start(0);\n\t\tsetIsPlaying(true);\n\t}, [loop, volume, playbackRate, isLoading, error]);\n\n\t// Stop sound\n\tconst stop = useCallback(() => {\n\t\tif (sourceNodeRef.current) {\n\t\t\ttry {\n\t\t\t\tsourceNodeRef.current.stop();\n\t\t\t\tsourceNodeRef.current.disconnect();\n\t\t\t} catch {\n\t\t\t\t// Ignore errors if already stopped\n\t\t\t}\n\t\t\tsourceNodeRef.current = null;\n\t\t}\n\t\tsetIsPlaying(false);\n\t}, []);\n\n\t// Cleanup on unmount\n\tuseEffect(\n\t\t() => () => {\n\t\t\tstop();\n\t\t},\n\t\t[stop]\n\t);\n\n\treturn {\n\t\tplay,\n\t\tstop,\n\t\tisPlaying,\n\t\tisLoading,\n\t\terror,\n\t};\n}\n"],"mappings":";;;;;;;;;;;;;;;;AA6BA,SAAgB,eACf,WACA,UAAiC,EAAE,EACZ;CACvB,MAAM,EAAE,OAAO,OAAO,SAAS,GAAK,eAAe,MAAQ;CAE3D,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CACjD,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,CAAC,OAAO,YAAY,SAAuB,KAAK;CAEtD,MAAM,kBAAkB,OAA4B,KAAK;CACzD,MAAM,iBAAiB,OAA2B,KAAK;CACvD,MAAM,gBAAgB,OAAqC,KAAK;CAChE,MAAM,cAAc,OAAwB,KAAK;AAGjD,iBAAgB;EACf,IAAI,UAAU;EAEd,MAAM,YAAY,YAAY;AAC7B,OAAI;AAEH,QAAI,CAAC,gBAAgB,QACpB,iBAAgB,UAAU,KACzB,OAAO,gBAEN,OAGC,qBACA;IAIJ,MAAM,WAAW,MAAM,MAAM,UAAU;AACvC,QAAI,CAAC,SAAS,GACb,OAAM,IAAI,MAAM,yBAAyB,SAAS,aAAa;IAGhE,MAAM,cAAc,MAAM,SAAS,aAAa;IAChD,MAAM,cACL,MAAM,gBAAgB,QAAQ,gBAAgB,YAAY;AAE3D,QAAI,SAAS;AACZ,oBAAe,UAAU;AACzB,kBAAa,MAAM;;YAEZ,KAAK;AACb,QAAI,SAAS;AACZ,cACC,eAAe,QAAQ,sBAAM,IAAI,MAAM,uBAAuB,CAC9D;AACD,kBAAa,MAAM;;;;AAKtB,aAAW;AAEX,eAAa;AACZ,aAAU;;IAET,CAAC,UAAU,CAAC;CAGf,MAAM,OAAO,kBAAkB;EAC9B,MAAM,eAAe,gBAAgB;EACrC,MAAM,cAAc,eAAe;AAInC,MAAI,EAFY,gBAAgB,eAAe,CAAC,aAAa,CAAC,OAG7D;AAID,MAAI,cAAc,QACjB,KAAI;AACH,iBAAc,QAAQ,MAAM;UACrB;EAMT,MAAM,SAAS,aAAa,oBAAoB;AAChD,SAAO,SAAS;AAChB,SAAO,OAAO;AACd,SAAO,aAAa,QAAQ;EAG5B,MAAM,WAAW,aAAa,YAAY;AAC1C,WAAS,KAAK,QAAQ;AAGtB,SAAO,QAAQ,SAAS;AACxB,WAAS,QAAQ,aAAa,YAAY;AAG1C,gBAAc,UAAU;AACxB,cAAY,UAAU;AAGtB,SAAO,gBAAgB;AACtB,OAAI,CAAC,KACJ,cAAa,MAAM;;AAKrB,SAAO,MAAM,EAAE;AACf,eAAa,KAAK;IAChB;EAAC;EAAM;EAAQ;EAAc;EAAW;EAAM,CAAC;CAGlD,MAAM,OAAO,kBAAkB;AAC9B,MAAI,cAAc,SAAS;AAC1B,OAAI;AACH,kBAAc,QAAQ,MAAM;AAC5B,kBAAc,QAAQ,YAAY;WAC3B;AAGR,iBAAc,UAAU;;AAEzB,eAAa,MAAM;IACjB,EAAE,CAAC;AAGN,uBACa;AACX,QAAM;IAEP,CAAC,KAAK,CACN;AAED,QAAO;EACN;EACA;EACA;EACA;EACA;EACA"}

package/hooks/use-typing-sound.d.ts

@@ -0,0 +1,18 @@
+//#region src/hooks/use-typing-sound.d.ts
+/**
+ * Hook to play a looping typing sound while someone is typing.
+ *
+ * @param isTyping - Whether someone is currently typing
+ * @param options - Optional configuration for volume and playback speed
+ *
+ * @example
+ * const { isTyping } = useTypingIndicator();
+ * useTypingSound(isTyping, { volume: 1.0, playbackRate: 1.2 });
+ */
+declare function useTypingSound(isTyping: boolean, options?: {
+  volume?: number;
+  playbackRate?: number;
+}): void;
+//#endregion
+export { useTypingSound };
+//# sourceMappingURL=use-typing-sound.d.ts.map

package/hooks/use-typing-sound.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-typing-sound.d.ts","names":[],"sources":["../../src/hooks/use-typing-sound.ts"],"sourcesContent":[],"mappings":";;AAiBA;;;;;;;;;iBAAgB,cAAA"}

package/hooks/use-typing-sound.js

@@ -0,0 +1,38 @@
+import { useSoundEffect } from "./use-sound-effect.js";
+import { useEffect } from "react";
+
+//#region src/hooks/use-typing-sound.ts
+const TYPING_SOUND_PATH = "/sounds/typing-loop.wav";
+/**
+* Hook to play a looping typing sound while someone is typing.
+*
+* @param isTyping - Whether someone is currently typing
+* @param options - Optional configuration for volume and playback speed
+*
+* @example
+* const { isTyping } = useTypingIndicator();
+* useTypingSound(isTyping, { volume: 1.0, playbackRate: 1.2 });
+*/
+function useTypingSound(isTyping, options) {
+	const { play, stop, isPlaying } = useSoundEffect(TYPING_SOUND_PATH, {
+		loop: true,
+		volume: options?.volume ?? 1.2,
+		playbackRate: options?.playbackRate ?? 1
+	});
+	useEffect(() => {
+		if (isTyping && !isPlaying) play();
+		else if (!isTyping && isPlaying) stop();
+	}, [
+		isTyping,
+		isPlaying,
+		play,
+		stop
+	]);
+	useEffect(() => () => {
+		stop();
+	}, [stop]);
+}
+
+//#endregion
+export { useTypingSound };
+//# sourceMappingURL=use-typing-sound.js.map

package/hooks/use-typing-sound.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-typing-sound.js","names":[],"sources":["../../src/hooks/use-typing-sound.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useSoundEffect } from \"./use-sound-effect\";\n\n// Use a data URL or base64 encoded sound, or a CDN URL\n// For now, we'll use a path that can be served from public directory\nconst TYPING_SOUND_PATH = \"/sounds/typing-loop.wav\";\n\n/**\n * Hook to play a looping typing sound while someone is typing.\n *\n * @param isTyping - Whether someone is currently typing\n * @param options - Optional configuration for volume and playback speed\n *\n * @example\n * const { isTyping } = useTypingIndicator();\n * useTypingSound(isTyping, { volume: 1.0, playbackRate: 1.2 });\n */\nexport function useTypingSound(\n\tisTyping: boolean,\n\toptions?: { volume?: number; playbackRate?: number }\n): void {\n\tconst { play, stop, isPlaying } = useSoundEffect(TYPING_SOUND_PATH, {\n\t\tloop: true,\n\t\tvolume: options?.volume ?? 1.2,\n\t\tplaybackRate: options?.playbackRate ?? 1.0,\n\t});\n\n\tuseEffect(() => {\n\t\tif (isTyping && !isPlaying) {\n\t\t\tplay();\n\t\t} else if (!isTyping && isPlaying) {\n\t\t\tstop();\n\t\t}\n\t}, [isTyping, isPlaying, play, stop]);\n\n\t// Cleanup on unmount\n\tuseEffect(\n\t\t() => () => {\n\t\t\tstop();\n\t\t},\n\t\t[stop]\n\t);\n}\n"],"mappings":";;;;AAKA,MAAM,oBAAoB;;;;;;;;;;;AAY1B,SAAgB,eACf,UACA,SACO;CACP,MAAM,EAAE,MAAM,MAAM,cAAc,eAAe,mBAAmB;EACnE,MAAM;EACN,QAAQ,SAAS,UAAU;EAC3B,cAAc,SAAS,gBAAgB;EACvC,CAAC;AAEF,iBAAgB;AACf,MAAI,YAAY,CAAC,UAChB,OAAM;WACI,CAAC,YAAY,UACvB,OAAM;IAEL;EAAC;EAAU;EAAW;EAAM;EAAK,CAAC;AAGrC,uBACa;AACX,QAAM;IAEP,CAAC,KAAK,CACN"}

package/index.d.ts

@@ -19,15 +19,17 @@ import { UseConversationsOptions, UseConversationsResult, useConversations } fro
 import { CreateConversationVariables, UseCreateConversationOptions, UseCreateConversationResult, useCreateConversation } from "./hooks/use-create-conversation.js";
 import { UseHomePageOptions, UseHomePageReturn, useHomePage } from "./hooks/use-home-page.js";
 import { UseMessageComposerOptions, UseMessageComposerReturn, useMessageComposer } from "./hooks/use-message-composer.js";
+import { useNewMessageSound } from "./hooks/use-new-message-sound.js";
 import { UseRealtimeSupportOptions, UseRealtimeSupportResult, useRealtimeSupport } from "./hooks/use-realtime-support.js";
 import { UseScrollMaskOptions, UseScrollMaskReturn, useScrollMask } from "./hooks/use-scroll-mask.js";
 import { SendMessageOptions, SendMessageResult, UseSendMessageOptions, UseSendMessageResult, useSendMessage } from "./hooks/use-send-message.js";
+import { UseSoundEffectOptions, UseSoundEffectReturn, useSoundEffect } from "./hooks/use-sound-effect.js";
+import { useTypingSound } from "./hooks/use-typing-sound.js";
 import { UseVisitorReturn, useVisitor } from "./hooks/use-visitor.js";
 import { WindowVisibilityFocusState, useWindowVisibilityFocus } from "./hooks/use-window-visibility-focus.js";
 import "./hooks/index.js";
 import { IdentifySupportVisitor, IdentifySupportVisitorProps } from "./identify-visitor.js";
 import { SupportConfig, SupportConfigProps } from "./support-config.js";
-import { Page, PageProps } from "./primitives/page.js";
 import { index_d_exports } from "./primitives/index.js";
 import { CossistantContextValue, CossistantProviderProps, SupportContext, SupportProvider, SupportProviderProps, UseSupportValue, useSupport } from "./provider.js";
 import { RealtimeAuthConfig, RealtimeContextValue, RealtimeProvider, RealtimeProviderProps, useRealtimeConnection } from "./realtime/provider.js";
@@ -36,6 +38,7 @@ import { SupportRealtimeProvider } from "./realtime/support-provider.js";
 import { applyConversationTypingEvent, clearTypingFromTimelineItem, clearTypingState, setTypingState } from "./realtime/typing-store.js";
 import { RealtimeEventHandler, RealtimeEventHandlerEntry, RealtimeEventHandlersMap, RealtimeEventMeta, useRealtime } from "./realtime/use-realtime.js";
 import "./realtime/index.js";
+import { CustomPage } from "./support/router.js";
 import { Text, useSupportText } from "./support/text/index.js";
 import { BubbleSlotProps, ContainerSlotProps, RouterSlotProps } from "./support/types.js";
 import { CoButton } from "./support/components/button.js";
@@ -43,4 +46,4 @@ import { Header } from "./support/components/header.js";
 import { WebSocketContextValue, WebSocketProvider, useWebSocket } from "./support/context/websocket.js";
 import { useSupportConfig, useSupportNavigation, useSupportStore } from "./support/store/support-store.js";
 import { DefaultRoutes, NavigationState, RouteRegistry, Support, SupportPage, SupportProps } from "./support/index.js";
-export { BubbleSlotProps, CoButton as Button, CONVERSATION_AUTO_SEEN_DELAY_MS, ContainerSlotProps, ConversationItem, ConversationLifecycleState, ConversationPreviewAssignedAgent, ConversationPreviewLastMessage, ConversationPreviewTypingParticipant, ConversationPreviewTypingState, ConversationTimelineTypingParticipant, ConversationTypingParticipant, CossistantContextValue, CossistantProviderProps, CreateConversationVariables, DefaultRoutes, GroupedMessage, Header, IdentifySupportVisitor, IdentifySupportVisitorProps, NavigationState, Page, PageProps, index_d_exports as Primitives, RealtimeAuthConfig, RealtimeContextValue, RealtimeEventHandler, RealtimeEventHandlerEntry, RealtimeEventHandlersMap, RealtimeEventMeta, RealtimeProvider, RealtimeProviderProps, RouteRegistry, RouterSlotProps, SendMessageOptions, SendMessageResult, Support, SupportConfig, SupportConfigProps, SupportContext, SupportLocale, SupportPage, SupportProps, SupportProvider, SupportProviderProps, SupportRealtimeProvider, SupportTextContentOverrides, Text, TimelineEventItem, TimelineToolItem, UseClientResult, UseComposerRefocusOptions, UseComposerRefocusReturn, UseConversationAutoSeenOptions, UseConversationHistoryPageOptions, UseConversationHistoryPageReturn, UseConversationLifecycleOptions, UseConversationLifecycleReturn, UseConversationOptions, UseConversationPageOptions, UseConversationPageReturn, UseConversationPreviewOptions, UseConversationPreviewReturn, UseConversationResult, UseConversationTimelineItemsOptions, UseConversationTimelineItemsResult, UseConversationTimelineOptions, UseConversationTimelineReturn, UseConversationsOptions, UseConversationsResult, UseCreateConversationOptions, UseCreateConversationResult, UseGroupedMessagesOptions, UseGroupedMessagesProps, UseHomePageOptions, UseHomePageReturn, UseMessageComposerOptions, UseMessageComposerReturn, UseMultimodalInputOptions, UseMultimodalInputReturn, UseRealtimeSupportOptions, UseRealtimeSupportResult, UseScrollMaskOptions, UseScrollMaskReturn, UseSendMessageOptions, UseSendMessageResult, UseSupportValue, UseVisitorReturn, WebSocketContextValue, WebSocketProvider, WindowVisibilityFocusState, applyConversationSeenEvent, applyConversationTypingEvent, clearTypingFromTimelineItem, clearTypingState, hydrateConversationSeen, setTypingState, upsertConversationSeen, useClient, useClientQuery, useComposerRefocus, useConversation, useConversationAutoSeen, useConversationHistoryPage, useConversationLifecycle, useConversationPage, useConversationPreview, useConversationSeen, useConversationTimeline, useConversationTimelineItems, useConversationTyping, useConversations, useCreateConversation, useDebouncedConversationSeen, useDefaultMessages, useGroupedMessages, useHomePage, useMessageComposer, useMultimodalInput, useRealtime, useRealtimeConnection, useRealtimeSupport, useScrollMask, useSendMessage, useSupport, useSupportConfig, useSupportNavigation, useSupportStore, useSupportText, useVisitor, useWebSocket, useWindowVisibilityFocus };
+export { BubbleSlotProps, CoButton as Button, CONVERSATION_AUTO_SEEN_DELAY_MS, ContainerSlotProps, ConversationItem, ConversationLifecycleState, ConversationPreviewAssignedAgent, ConversationPreviewLastMessage, ConversationPreviewTypingParticipant, ConversationPreviewTypingState, ConversationTimelineTypingParticipant, ConversationTypingParticipant, CossistantContextValue, CossistantProviderProps, CreateConversationVariables, CustomPage, DefaultRoutes, GroupedMessage, Header, IdentifySupportVisitor, IdentifySupportVisitorProps, NavigationState, index_d_exports as Primitives, RealtimeAuthConfig, RealtimeContextValue, RealtimeEventHandler, RealtimeEventHandlerEntry, RealtimeEventHandlersMap, RealtimeEventMeta, RealtimeProvider, RealtimeProviderProps, RouteRegistry, RouterSlotProps, SendMessageOptions, SendMessageResult, Support, SupportConfig, SupportConfigProps, SupportContext, SupportLocale, SupportPage, SupportProps, SupportProvider, SupportProviderProps, SupportRealtimeProvider, SupportTextContentOverrides, Text, TimelineEventItem, TimelineToolItem, UseClientResult, UseComposerRefocusOptions, UseComposerRefocusReturn, UseConversationAutoSeenOptions, UseConversationHistoryPageOptions, UseConversationHistoryPageReturn, UseConversationLifecycleOptions, UseConversationLifecycleReturn, UseConversationOptions, UseConversationPageOptions, UseConversationPageReturn, UseConversationPreviewOptions, UseConversationPreviewReturn, UseConversationResult, UseConversationTimelineItemsOptions, UseConversationTimelineItemsResult, UseConversationTimelineOptions, UseConversationTimelineReturn, UseConversationsOptions, UseConversationsResult, UseCreateConversationOptions, UseCreateConversationResult, UseGroupedMessagesOptions, UseGroupedMessagesProps, UseHomePageOptions, UseHomePageReturn, UseMessageComposerOptions, UseMessageComposerReturn, UseMultimodalInputOptions, UseMultimodalInputReturn, UseRealtimeSupportOptions, UseRealtimeSupportResult, UseScrollMaskOptions, UseScrollMaskReturn, UseSendMessageOptions, UseSendMessageResult, UseSoundEffectOptions, UseSoundEffectReturn, UseSupportValue, UseVisitorReturn, WebSocketContextValue, WebSocketProvider, WindowVisibilityFocusState, applyConversationSeenEvent, applyConversationTypingEvent, clearTypingFromTimelineItem, clearTypingState, hydrateConversationSeen, setTypingState, upsertConversationSeen, useClient, useClientQuery, useComposerRefocus, useConversation, useConversationAutoSeen, useConversationHistoryPage, useConversationLifecycle, useConversationPage, useConversationPreview, useConversationSeen, useConversationTimeline, useConversationTimelineItems, useConversationTyping, useConversations, useCreateConversation, useDebouncedConversationSeen, useDefaultMessages, useGroupedMessages, useHomePage, useMessageComposer, useMultimodalInput, useNewMessageSound, useRealtime, useRealtimeConnection, useRealtimeSupport, useScrollMask, useSendMessage, useSoundEffect, useSupport, useSupportConfig, useSupportNavigation, useSupportStore, useSupportText, useTypingSound, useVisitor, useWebSocket, useWindowVisibilityFocus };

package/index.js

@@ -1,15 +1,14 @@
 import { useClientQuery } from "./hooks/private/use-client-query.js";
 import { useClient } from "./hooks/private/use-rest-client.js";
 import { applyConversationSeenEvent, hydrateConversationSeen, upsertConversationSeen } from "./realtime/seen-store.js";
-import { SupportConfig } from "./support-config.js";
+import { RealtimeProvider, useRealtimeConnection } from "./realtime/provider.js";
 import { applyConversationTypingEvent, clearTypingFromTimelineItem, clearTypingState, setTypingState } from "./realtime/typing-store.js";
+import { useRealtime } from "./realtime/use-realtime.js";
+import { SupportRealtimeProvider } from "./realtime/support-provider.js";
+import { SupportConfig } from "./support-config.js";
 import { useScrollMask } from "./hooks/use-scroll-mask.js";
-import { Page } from "./primitives/page.js";
 import { useSupportConfig, useSupportNavigation, useSupportStore } from "./support/store/support-store.js";
 import { primitives_exports } from "./primitives/index.js";
-import { RealtimeProvider, useRealtimeConnection } from "./realtime/provider.js";
-import { useRealtime } from "./realtime/use-realtime.js";
-import { SupportRealtimeProvider } from "./realtime/support-provider.js";
 import { CoButton } from "./support/components/button.js";
 import { Header } from "./support/components/header.js";
 import { Text, useSupportText } from "./support/text/index.js";
@@ -22,10 +21,13 @@ import { useMultimodalInput } from "./hooks/private/use-multimodal-input.js";
 import { useSendMessage } from "./hooks/use-send-message.js";
 import { useMessageComposer } from "./hooks/use-message-composer.js";
 import { useConversationPage } from "./hooks/use-conversation-page.js";
+import { useSoundEffect } from "./hooks/use-sound-effect.js";
+import { useNewMessageSound } from "./hooks/use-new-message-sound.js";
 import { useGroupedMessages } from "./hooks/private/use-grouped-messages.js";
 import { useConversationSeen, useDebouncedConversationSeen } from "./hooks/use-conversation-seen.js";
 import { useConversationTyping } from "./hooks/use-conversation-typing.js";
 import { useConversationTimeline } from "./hooks/use-conversation-timeline.js";
+import { useTypingSound } from "./hooks/use-typing-sound.js";
 import { useComposerRefocus } from "./hooks/use-composer-refocus.js";
 import { useVisitor } from "./hooks/use-visitor.js";
 import { useConversations } from "./hooks/use-conversations.js";
@@ -40,4 +42,4 @@ import { useCreateConversation } from "./hooks/use-create-conversation.js";
 import { useRealtimeSupport } from "./hooks/use-realtime-support.js";
 import { IdentifySupportVisitor } from "./identify-visitor.js";
 
-export { CoButton as Button, CONVERSATION_AUTO_SEEN_DELAY_MS, Header, IdentifySupportVisitor, Page, primitives_exports as Primitives, RealtimeProvider, Support, SupportConfig, SupportContext, SupportProvider, SupportRealtimeProvider, Text, WebSocketProvider, applyConversationSeenEvent, applyConversationTypingEvent, clearTypingFromTimelineItem, clearTypingState, hydrateConversationSeen, setTypingState, upsertConversationSeen, useClient, useClientQuery, useComposerRefocus, useConversation, useConversationAutoSeen, useConversationHistoryPage, useConversationLifecycle, useConversationPage, useConversationPreview, useConversationSeen, useConversationTimeline, useConversationTimelineItems, useConversationTyping, useConversations, useCreateConversation, useDebouncedConversationSeen, useDefaultMessages, useGroupedMessages, useHomePage, useMessageComposer, useMultimodalInput, useRealtime, useRealtimeConnection, useRealtimeSupport, useScrollMask, useSendMessage, useSupport, useSupportConfig, useSupportNavigation, useSupportStore, useSupportText, useVisitor, useWebSocket, useWindowVisibilityFocus };
+export { CoButton as Button, CONVERSATION_AUTO_SEEN_DELAY_MS, Header, IdentifySupportVisitor, primitives_exports as Primitives, RealtimeProvider, Support, SupportConfig, SupportContext, SupportProvider, SupportRealtimeProvider, Text, WebSocketProvider, applyConversationSeenEvent, applyConversationTypingEvent, clearTypingFromTimelineItem, clearTypingState, hydrateConversationSeen, setTypingState, upsertConversationSeen, useClient, useClientQuery, useComposerRefocus, useConversation, useConversationAutoSeen, useConversationHistoryPage, useConversationLifecycle, useConversationPage, useConversationPreview, useConversationSeen, useConversationTimeline, useConversationTimelineItems, useConversationTyping, useConversations, useCreateConversation, useDebouncedConversationSeen, useDefaultMessages, useGroupedMessages, useHomePage, useMessageComposer, useMultimodalInput, useNewMessageSound, useRealtime, useRealtimeConnection, useRealtimeSupport, useScrollMask, useSendMessage, useSoundEffect, useSupport, useSupportConfig, useSupportNavigation, useSupportStore, useSupportText, useTypingSound, useVisitor, useWebSocket, useWindowVisibilityFocus };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cossistant/react",
   "type": "module",
-  "version": "0.0.20",
+  "version": "0.0.23",
   "private": false,
   "author": "Cossistant team",
   "description": "Headless React SDK for building AI-powered support/chat widgets. Hooks + primitives, WS-driven, TypeScript-first. Next.js-ready, Tailwind optional.",
@@ -88,8 +88,8 @@
     "*.css"
   ],
   "dependencies": {
-    "@cossistant/core": "0.0.20",
-    "@cossistant/types": "0.0.20",
+    "@cossistant/core": "0.0.23",
+    "@cossistant/types": "0.0.23",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "nanoid": "^5.1.5",

package/primitives/avatar/image.d.ts

@@ -15,7 +15,7 @@ type AvatarImageProps = Omit<React$1.ImgHTMLAttributes<HTMLImageElement>, "src"
  * Controlled `<img>` that syncs its loading status back to the avatar context
  * so fallbacks know when to display.
  */
-declare const AvatarImage: React$1.ForwardRefExoticComponent<Omit<React$1.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt"> & {
+declare const AvatarImage: React$1.ForwardRefExoticComponent<Omit<React$1.ImgHTMLAttributes<HTMLImageElement>, "alt" | "src"> & {
   src: string;
   alt?: string;
   asChild?: boolean;

package/primitives/bubble.js

@@ -1,5 +1,5 @@
-import { useRenderElement } from "../utils/use-render-element.js";
 import { useTypingStore } from "../realtime/typing-store.js";
+import { useRenderElement } from "../utils/use-render-element.js";
 import { useSupportConfig } from "../support/store/support-store.js";
 import { useSupport } from "../provider.js";
 import * as React$1 from "react";

package/primitives/index.d.ts

@@ -7,9 +7,7 @@ import { SupportBubble } from "./bubble.js";
 import { Button } from "./button.js";
 import { ConversationTimeline, ConversationTimelineContainer, ConversationTimelineEmpty, ConversationTimelineLoading } from "./conversation-timeline.js";
 import { FileInput, MultimodalInput, SupportInput } from "./multimodal-input.js";
-import { Page, PageProps } from "./page.js";
-import { PageRegistryProvider, usePageRegistry, useRegisterPage } from "./page-registry.js";
-import { Router, RouterProps } from "./router.js";
+import { PageDefinition, Router, RouterProps } from "./router.js";
 import { TimelineItem, TimelineItemContent, TimelineItemTimestamp } from "./timeline-item.js";
 import { TimelineItemGroup, TimelineItemGroupAvatar, TimelineItemGroupContent, TimelineItemGroupHeader, TimelineItemGroupReadIndicator, TimelineItemGroupSeenIndicator } from "./timeline-item-group.js";
 import { SupportWindow } from "./window.js";
@@ -17,8 +15,8 @@ import "./index.parts.js";
 
 //#region src/primitives/index.d.ts
 declare namespace index_d_exports {
-  export { Avatar, AvatarFallback, AvatarImage, SupportBubble as Bubble, Button, SupportConfig as Config, ConversationTimeline, ConversationTimelineContainer, ConversationTimelineEmpty, ConversationTimelineLoading, FileInput, SupportInput as Input, MultimodalInput, Page, PageProps, PageRegistryProvider, Router, RouterProps, TimelineItem, TimelineItemContent, TimelineItemGroup, TimelineItemGroupAvatar, TimelineItemGroupContent, TimelineItemGroupHeader, TimelineItemGroupReadIndicator, TimelineItemGroupSeenIndicator, TimelineItemTimestamp, TypingIndicator, TypingIndicatorProps, TypingParticipant, TypingParticipantType, SupportWindow as Window, usePageRegistry, useRegisterPage };
+  export { Avatar, AvatarFallback, AvatarImage, SupportBubble as Bubble, Button, SupportConfig as Config, ConversationTimeline, ConversationTimelineContainer, ConversationTimelineEmpty, ConversationTimelineLoading, FileInput, SupportInput as Input, MultimodalInput, PageDefinition, Router, RouterProps, TimelineItem, TimelineItemContent, TimelineItemGroup, TimelineItemGroupAvatar, TimelineItemGroupContent, TimelineItemGroupHeader, TimelineItemGroupReadIndicator, TimelineItemGroupSeenIndicator, TimelineItemTimestamp, TypingIndicator, TypingIndicatorProps, TypingParticipant, TypingParticipantType, SupportWindow as Window };
 }
 //#endregion
-export { Avatar, AvatarFallback, AvatarImage, SupportBubble as Bubble, Button, SupportConfig as Config, ConversationTimeline, ConversationTimelineContainer, ConversationTimelineEmpty, ConversationTimelineLoading, FileInput, SupportInput as Input, MultimodalInput, Page, PageProps, PageRegistryProvider, Router, RouterProps, TimelineItem, TimelineItemContent, TimelineItemGroup, TimelineItemGroupAvatar, TimelineItemGroupContent, TimelineItemGroupHeader, TimelineItemGroupReadIndicator, TimelineItemGroupSeenIndicator, TimelineItemTimestamp, TypingIndicator, TypingIndicatorProps, TypingParticipant, TypingParticipantType, SupportWindow as Window, index_d_exports, usePageRegistry, useRegisterPage };
+export { Avatar, AvatarFallback, AvatarImage, SupportBubble as Bubble, Button, SupportConfig as Config, ConversationTimeline, ConversationTimelineContainer, ConversationTimelineEmpty, ConversationTimelineLoading, FileInput, SupportInput as Input, MultimodalInput, PageDefinition, Router, RouterProps, TimelineItem, TimelineItemContent, TimelineItemGroup, TimelineItemGroupAvatar, TimelineItemGroupContent, TimelineItemGroupHeader, TimelineItemGroupReadIndicator, TimelineItemGroupSeenIndicator, TimelineItemTimestamp, TypingIndicator, TypingIndicatorProps, TypingParticipant, TypingParticipantType, SupportWindow as Window, index_d_exports };
 //# sourceMappingURL=index.d.ts.map

package/primitives/index.js

@@ -1,15 +1,13 @@
 import { __export } from "../_virtual/rolldown_runtime.js";
+import { SupportConfig } from "../support-config.js";
 import { Avatar } from "./avatar/avatar.js";
 import { AvatarFallback } from "./avatar/fallback.js";
 import { AvatarImage } from "./avatar/image.js";
 import { TypingIndicator } from "../support/components/typing-indicator.js";
-import { SupportConfig } from "../support-config.js";
 import { SupportBubble } from "./bubble.js";
 import { Button } from "./button.js";
 import { ConversationTimeline, ConversationTimelineContainer, ConversationTimelineEmpty, ConversationTimelineLoading } from "./conversation-timeline.js";
 import { FileInput, MultimodalInput, SupportInput } from "./multimodal-input.js";
-import { PageRegistryProvider, usePageRegistry, useRegisterPage } from "./page-registry.js";
-import { Page } from "./page.js";
 import { Router } from "./router.js";
 import { TimelineItem, TimelineItemContent, TimelineItemTimestamp } from "./timeline-item.js";
 import { TimelineItemGroup, TimelineItemGroupAvatar, TimelineItemGroupContent, TimelineItemGroupHeader, TimelineItemGroupReadIndicator, TimelineItemGroupSeenIndicator } from "./timeline-item-group.js";
@@ -30,8 +28,6 @@ var primitives_exports = /* @__PURE__ */ __export({
 	FileInput: () => FileInput,
 	Input: () => SupportInput,
 	MultimodalInput: () => MultimodalInput,
-	Page: () => Page,
-	PageRegistryProvider: () => PageRegistryProvider,
 	Router: () => Router,
 	TimelineItem: () => TimelineItem,
 	TimelineItemContent: () => TimelineItemContent,
@@ -43,11 +39,9 @@ var primitives_exports = /* @__PURE__ */ __export({
 	TimelineItemGroupSeenIndicator: () => TimelineItemGroupSeenIndicator,
 	TimelineItemTimestamp: () => TimelineItemTimestamp,
 	TypingIndicator: () => TypingIndicator,
-	Window: () => SupportWindow,
-	usePageRegistry: () => usePageRegistry,
-	useRegisterPage: () => useRegisterPage
+	Window: () => SupportWindow
 });
 
 //#endregion
-export { Avatar, AvatarFallback, AvatarImage, SupportBubble as Bubble, Button, SupportConfig as Config, ConversationTimeline, ConversationTimelineContainer, ConversationTimelineEmpty, ConversationTimelineLoading, FileInput, SupportInput as Input, MultimodalInput, Page, PageRegistryProvider, Router, TimelineItem, TimelineItemContent, TimelineItemGroup, TimelineItemGroupAvatar, TimelineItemGroupContent, TimelineItemGroupHeader, TimelineItemGroupReadIndicator, TimelineItemGroupSeenIndicator, TimelineItemTimestamp, TypingIndicator, SupportWindow as Window, primitives_exports, usePageRegistry, useRegisterPage };
+export { Avatar, AvatarFallback, AvatarImage, SupportBubble as Bubble, Button, SupportConfig as Config, ConversationTimeline, ConversationTimelineContainer, ConversationTimelineEmpty, ConversationTimelineLoading, FileInput, SupportInput as Input, MultimodalInput, Router, TimelineItem, TimelineItemContent, TimelineItemGroup, TimelineItemGroupAvatar, TimelineItemGroupContent, TimelineItemGroupHeader, TimelineItemGroupReadIndicator, TimelineItemGroupSeenIndicator, TimelineItemTimestamp, TypingIndicator, SupportWindow as Window, primitives_exports };
 //# sourceMappingURL=index.js.map

package/primitives/index.parts.d.ts

@@ -8,10 +8,8 @@ import { SupportBubble } from "./bubble.js";
 import { Button } from "./button.js";
 import { ConversationTimeline, ConversationTimelineContainer, ConversationTimelineEmpty, ConversationTimelineLoading } from "./conversation-timeline.js";
 import { FileInput, MultimodalInput, SupportInput } from "./multimodal-input.js";
-import { Page, PageProps } from "./page.js";
-import { PageRegistryProvider, usePageRegistry, useRegisterPage } from "./page-registry.js";
-import { Router, RouterProps } from "./router.js";
+import { PageDefinition, Router, RouterProps } from "./router.js";
 import { TimelineItem, TimelineItemContent, TimelineItemTimestamp } from "./timeline-item.js";
 import { TimelineItemGroup, TimelineItemGroupAvatar, TimelineItemGroupContent, TimelineItemGroupHeader, TimelineItemGroupReadIndicator, TimelineItemGroupSeenIndicator } from "./timeline-item-group.js";
 import { SupportWindow } from "./window.js";
-export { Avatar, AvatarFallback, AvatarImage, SupportBubble as Bubble, Button, SupportConfig as Config, ConversationTimeline, ConversationTimelineContainer, ConversationTimelineEmpty, ConversationTimelineLoading, FileInput, SupportInput as Input, MultimodalInput, Page, type PageProps, PageRegistryProvider, Router, type RouterProps, TimelineItem, TimelineItemContent, TimelineItemGroup, TimelineItemGroupAvatar, TimelineItemGroupContent, TimelineItemGroupHeader, TimelineItemGroupReadIndicator, TimelineItemGroupSeenIndicator, TimelineItemTimestamp, TypingIndicator, type TypingIndicatorProps, type TypingParticipant, type TypingParticipantType, SupportWindow as Window, usePageRegistry, useRegisterPage };
+export { Avatar, AvatarFallback, AvatarImage, SupportBubble as Bubble, Button, SupportConfig as Config, ConversationTimeline, ConversationTimelineContainer, ConversationTimelineEmpty, ConversationTimelineLoading, FileInput, SupportInput as Input, MultimodalInput, type PageDefinition, Router, type RouterProps, TimelineItem, TimelineItemContent, TimelineItemGroup, TimelineItemGroupAvatar, TimelineItemGroupContent, TimelineItemGroupHeader, TimelineItemGroupReadIndicator, TimelineItemGroupSeenIndicator, TimelineItemTimestamp, TypingIndicator, type TypingIndicatorProps, type TypingParticipant, type TypingParticipantType, SupportWindow as Window };

package/primitives/index.parts.js

@@ -1,17 +1,15 @@
+import { SupportConfig } from "../support-config.js";
 import { Avatar } from "./avatar/avatar.js";
 import { AvatarFallback } from "./avatar/fallback.js";
 import { AvatarImage } from "./avatar/image.js";
 import { TypingIndicator } from "../support/components/typing-indicator.js";
-import { SupportConfig } from "../support-config.js";
 import { SupportBubble } from "./bubble.js";
 import { Button } from "./button.js";
 import { ConversationTimeline, ConversationTimelineContainer, ConversationTimelineEmpty, ConversationTimelineLoading } from "./conversation-timeline.js";
 import { FileInput, MultimodalInput, SupportInput } from "./multimodal-input.js";
-import { PageRegistryProvider, usePageRegistry, useRegisterPage } from "./page-registry.js";
-import { Page } from "./page.js";
 import { Router } from "./router.js";
 import { TimelineItem, TimelineItemContent, TimelineItemTimestamp } from "./timeline-item.js";
 import { TimelineItemGroup, TimelineItemGroupAvatar, TimelineItemGroupContent, TimelineItemGroupHeader, TimelineItemGroupReadIndicator, TimelineItemGroupSeenIndicator } from "./timeline-item-group.js";
 import { SupportWindow } from "./window.js";
 
-export { Avatar, AvatarFallback, AvatarImage, SupportBubble as Bubble, Button, SupportConfig as Config, ConversationTimeline, ConversationTimelineContainer, ConversationTimelineEmpty, ConversationTimelineLoading, FileInput, SupportInput as Input, MultimodalInput, Page, PageRegistryProvider, Router, TimelineItem, TimelineItemContent, TimelineItemGroup, TimelineItemGroupAvatar, TimelineItemGroupContent, TimelineItemGroupHeader, TimelineItemGroupReadIndicator, TimelineItemGroupSeenIndicator, TimelineItemTimestamp, TypingIndicator, SupportWindow as Window, usePageRegistry, useRegisterPage };
+export { Avatar, AvatarFallback, AvatarImage, SupportBubble as Bubble, Button, SupportConfig as Config, ConversationTimeline, ConversationTimelineContainer, ConversationTimelineEmpty, ConversationTimelineLoading, FileInput, SupportInput as Input, MultimodalInput, Router, TimelineItem, TimelineItemContent, TimelineItemGroup, TimelineItemGroupAvatar, TimelineItemGroupContent, TimelineItemGroupHeader, TimelineItemGroupReadIndicator, TimelineItemGroupSeenIndicator, TimelineItemTimestamp, TypingIndicator, SupportWindow as Window };

package/primitives/router.d.ts

@@ -1,35 +1,34 @@
 import React from "react";
+import { RouteRegistry } from "@cossistant/core";
 
 //#region src/primitives/router.d.ts
+type PageDefinition<K extends keyof RouteRegistry = keyof RouteRegistry> = {
+  name: K;
+  component: React.ComponentType<{
+    params?: RouteRegistry[K];
+  }>;
+};
 type RouterProps = {
-  /**
-   * Current page name to render
-   */
-  page: string;
-  /**
-   * Params to pass to the page component
-   */
-  params?: unknown;
-  /**
-   * Fallback component when page is not found
-   */
+  page: keyof RouteRegistry;
+  params?: RouteRegistry[keyof RouteRegistry];
+  pages: PageDefinition[];
   fallback?: React.ComponentType<{
     params?: unknown;
   }>;
-  /**
-   * Children (Page components for registration)
-   */
-  children?: React.ReactNode;
 };
 /**
- * Router that renders registered pages based on current page name.
+ * Type-safe router that renders pages based on current page name.
+ * Pages are matched synchronously without effects or registries.
  *
  * @example
- * <Router page={currentPage} params={params} fallback={NotFoundPage}>
- *   <Page name="HOME" component={HomePage} />
- * </Router>
+ * const pages = [
+ *   { name: "HOME", component: HomePage },
+ *   { name: "SETTINGS", component: SettingsPage }
+ * ];
+ *
+ * <Router page={currentPage} params={params} pages={pages} fallback={NotFoundPage} />
  */
 declare const Router: React.FC<RouterProps>;
 //#endregion
-export { Router, RouterProps };
+export { PageDefinition, Router, RouterProps };
 //# sourceMappingURL=router.d.ts.map

package/primitives/router.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"router.d.ts","names":[],"sources":["../../src/primitives/router.tsx"],"sourcesContent":[],"mappings":";;;KAGY,WAAA;;AAAZ;AA8BA;;;;;;;;;aAhBY,KAAA,CAAM;;;;;;aAKN,KAAA,CAAM;;;;;;;;;;cAWL,QAAQ,KAAA,CAAM,GAAG"}
+{"version":3,"file":"router.d.ts","names":[],"sources":["../../src/primitives/router.tsx"],"sourcesContent":[],"mappings":";;;;KAIY,+BACK,sBAAsB;QAEhC;EAHK,SAAA,EAIA,KAAA,CAAM,aAJQ,CAAA;IACT,MAAA,CAAA,EAG0B,aAH1B,CAGwC,CAHxC,CAAA;EAAsB,CAAA,CAAA;CAEhC;AACoC,KAI/B,WAAA,GAJ+B;EAAc,IAAA,EAAA,MAK5C,aAL4C;EAA7C,MAAM,CAAA,EAMR,aANQ,CAAA,MAMY,aANZ,CAAA;EAAa,KAAA,EAOvB,cAPuB,EAAA;EAInB,QAAA,CAAA,EAIA,KAAA,CAAM,aAJK,CAAA;IACV,MAAA,CAAA,EAAA,OAAA;EACH,CAAA,CAAA;CAAoB;;;;AAiB9B;;;;;;;;;cAAa,QAAQ,KAAA,CAAM,GAAG"}

package/primitives/router.js

@@ -1,20 +1,26 @@
-import { usePageRegistry } from "./page-registry.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/primitives/router.tsx
 /**
-* Router that renders registered pages based on current page name.
+* Type-safe router that renders pages based on current page name.
+* Pages are matched synchronously without effects or registries.
 *
 * @example
-* <Router page={currentPage} params={params} fallback={NotFoundPage}>
-*   <Page name="HOME" component={HomePage} />
-* </Router>
+* const pages = [
+*   { name: "HOME", component: HomePage },
+*   { name: "SETTINGS", component: SettingsPage }
+* ];
+*
+* <Router page={currentPage} params={params} pages={pages} fallback={NotFoundPage} />
 */
-const Router = ({ page, params, fallback: Fallback, children }) => {
-	const PageComponent = usePageRegistry().get(page);
-	if (PageComponent) return /* @__PURE__ */ jsxs(Fragment, { children: [children, /* @__PURE__ */ jsx(PageComponent, { params })] });
-	if (Fallback) return /* @__PURE__ */ jsxs(Fragment, { children: [children, /* @__PURE__ */ jsx(Fallback, { params })] });
-	return /* @__PURE__ */ jsx(Fragment, { children });
+const Router = ({ page, params, pages, fallback: Fallback }) => {
+	const matchedPage = pages.find((p) => p.name === page);
+	if (matchedPage) {
+		const Component = matchedPage.component;
+		return /* @__PURE__ */ jsx(Component, { params });
+	}
+	if (Fallback) return /* @__PURE__ */ jsx(Fallback, { params });
+	return null;
 };
 
 //#endregion

package/primitives/router.js.map

@@ -1 +1 @@
-{"version":3,"file":"router.js","names":["Router: React.FC<RouterProps>"],"sources":["../../src/primitives/router.tsx"],"sourcesContent":["import type React from \"react\";\nimport { usePageRegistry } from \"./page-registry\";\n\nexport type RouterProps = {\n\t/**\n\t * Current page name to render\n\t */\n\tpage: string;\n\n\t/**\n\t * Params to pass to the page component\n\t */\n\tparams?: unknown;\n\n\t/**\n\t * Fallback component when page is not found\n\t */\n\tfallback?: React.ComponentType<{ params?: unknown }>;\n\n\t/**\n\t * Children (Page components for registration)\n\t */\n\tchildren?: React.ReactNode;\n};\n\n/**\n * Router that renders registered pages based on current page name.\n *\n * @example\n * <Router page={currentPage} params={params} fallback={NotFoundPage}>\n *   <Page name=\"HOME\" component={HomePage} />\n * </Router>\n */\nexport const Router: React.FC<RouterProps> = ({\n\tpage,\n\tparams,\n\tfallback: Fallback,\n\tchildren,\n}) => {\n\tconst registry = usePageRegistry();\n\n\t// Render children first (they register pages via useEffect)\n\t// Page components return null, so this is effectively a no-op render\n\n\t// Get the page component from registry\n\tconst PageComponent = registry.get(page);\n\n\tif (PageComponent) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{children}\n\t\t\t\t<PageComponent params={params} />\n\t\t\t</>\n\t\t);\n\t}\n\n\t// Fall back if provided\n\tif (Fallback) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{children}\n\t\t\t\t<Fallback params={params} />\n\t\t\t</>\n\t\t);\n\t}\n\n\treturn <>{children}</>;\n};\n"],"mappings":";;;;;;;;;;;;AAiCA,MAAaA,UAAiC,EAC7C,MACA,QACA,UAAU,UACV,eACK;CAOL,MAAM,gBANW,iBAAiB,CAMH,IAAI,KAAK;AAExC,KAAI,cACH,QACC,4CACE,UACD,oBAAC,iBAAsB,SAAU,IAC/B;AAKL,KAAI,SACH,QACC,4CACE,UACD,oBAAC,YAAiB,SAAU,IAC1B;AAIL,QAAO,gCAAG,WAAY"}
+{"version":3,"file":"router.js","names":["Router: React.FC<RouterProps>"],"sources":["../../src/primitives/router.tsx"],"sourcesContent":["import type { RouteRegistry } from \"@cossistant/core\";\nimport type React from \"react\";\n\n// Type-safe page definition that extracts params from RouteRegistry\nexport type PageDefinition<\n\tK extends keyof RouteRegistry = keyof RouteRegistry,\n> = {\n\tname: K;\n\tcomponent: React.ComponentType<{ params?: RouteRegistry[K] }>;\n};\n\n// Router props that maintain type safety\nexport type RouterProps = {\n\tpage: keyof RouteRegistry;\n\tparams?: RouteRegistry[keyof RouteRegistry];\n\tpages: PageDefinition[];\n\tfallback?: React.ComponentType<{ params?: unknown }>;\n};\n\n/**\n * Type-safe router that renders pages based on current page name.\n * Pages are matched synchronously without effects or registries.\n *\n * @example\n * const pages = [\n *   { name: \"HOME\", component: HomePage },\n *   { name: \"SETTINGS\", component: SettingsPage }\n * ];\n *\n * <Router page={currentPage} params={params} pages={pages} fallback={NotFoundPage} />\n */\nexport const Router: React.FC<RouterProps> = ({\n\tpage,\n\tparams,\n\tpages,\n\tfallback: Fallback,\n}) => {\n\t// Find matching page (synchronous, no effects!)\n\tconst matchedPage = pages.find((p) => p.name === page);\n\n\tif (matchedPage) {\n\t\tconst Component = matchedPage.component;\n\t\treturn <Component params={params} />;\n\t}\n\n\t// Fall back if provided\n\tif (Fallback) {\n\t\treturn <Fallback params={params} />;\n\t}\n\n\treturn null;\n};\n"],"mappings":";;;;;;;;;;;;;;;AA+BA,MAAaA,UAAiC,EAC7C,MACA,QACA,OACA,UAAU,eACL;CAEL,MAAM,cAAc,MAAM,MAAM,MAAM,EAAE,SAAS,KAAK;AAEtD,KAAI,aAAa;EAChB,MAAM,YAAY,YAAY;AAC9B,SAAO,oBAAC,aAAkB,SAAU;;AAIrC,KAAI,SACH,QAAO,oBAAC,YAAiB,SAAU;AAGpC,QAAO"}

package/realtime/index.js

@@ -1,6 +1,6 @@
 import { applyConversationSeenEvent, hydrateConversationSeen, upsertConversationSeen } from "./seen-store.js";
-import { applyConversationTypingEvent, clearTypingFromTimelineItem, clearTypingState, setTypingState } from "./typing-store.js";
 import { RealtimeProvider, useRealtimeConnection } from "./provider.js";
+import { applyConversationTypingEvent, clearTypingFromTimelineItem, clearTypingState, setTypingState } from "./typing-store.js";
 import { useRealtime } from "./use-realtime.js";
 import { SupportRealtimeProvider } from "./support-provider.js";