@parallelworks/ui 0.20.0 → 0.21.0

package/dist/ai/core/ChatProvider.js

@@ -43,6 +43,29 @@ function generateTitleFromMessage(content) {
 function errorText(error) {
 	return error instanceof Error ? error.message : String(error);
 }
+function attachmentRefs(ids, meta) {
+	if (!ids?.length) return;
+	const uploadedAt = DateTime.now().toISO();
+	return ids.map((id) => ({
+		id,
+		filename: meta?.[id]?.filename ?? "",
+		contentType: meta?.[id]?.contentType ?? "",
+		size: meta?.[id]?.size ?? 0,
+		uploadedAt
+	}));
+}
+function heldSendArgs(held) {
+	const last = held.at(-1);
+	if (!last) return null;
+	const preceding = held.slice(0, -1).map(({ id: _id, ...rest }) => rest);
+	return [
+		last.content,
+		last.attachmentIds.length > 0 ? last.attachmentIds : void 0,
+		void 0,
+		Object.keys(last.attachmentMeta).length > 0 ? last.attachmentMeta : void 0,
+		preceding.length > 0 ? preceding : void 0
+	];
+}
 var ChatContext = createContext(void 0);
 function useChat() {
 	const context = useContext(ChatContext);
@@ -251,7 +274,7 @@ function ChatProvider({ adapter, currentUser, navigation, notify, activeConversa
 		state.currentConversation,
 		navigation
 	]);
-	const sendMessage = useCallback(async (content, attachmentIds, parentId, attachmentMeta, _precedingMessages) => {
+	const sendMessage = useCallback(async (content, attachmentIds, parentId, attachmentMeta, precedingMessages) => {
 		if (isSendingRef.current) {
 			const convId = currentConversationIdRef.current;
 			if (!convId) return false;
@@ -260,31 +283,6 @@ function ChatProvider({ adapter, currentUser, navigation, notify, activeConversa
 				notify.error(`You can queue up to ${MAX_QUEUED_MESSAGES} messages while waiting for a response`);
 				return false;
 			}
-			for (const pm of _precedingMessages ?? []) {
-				const pmId = crypto.randomUUID();
-				pendingQueueRef.current.push({
-					id: pmId,
-					...pm
-				});
-				dispatch({
-					type: "ADD_QUEUED_MESSAGE",
-					message: {
-						id: pmId,
-						role: "user",
-						content: pm.content,
-						timestamp: DateTime.now().toISO(),
-						author: currentUser,
-						attachments: pm.attachmentIds.length ? pm.attachmentIds.map((id) => ({
-							id,
-							filename: pm.attachmentMeta[id]?.filename ?? "",
-							contentType: pm.attachmentMeta[id]?.contentType ?? "",
-							size: pm.attachmentMeta[id]?.size ?? 0,
-							uploadedAt: DateTime.now().toISO()
-						})) : void 0
-					},
-					conversationId: convId
-				});
-			}
 			const queuedId = crypto.randomUUID();
 			pendingQueueRef.current.push({
 				id: queuedId,
@@ -300,19 +298,14 @@ function ChatProvider({ adapter, currentUser, navigation, notify, activeConversa
 					content,
 					timestamp: DateTime.now().toISO(),
 					author: currentUser,
-					attachments: attachmentIds?.map((id) => ({
-						id,
-						filename: attachmentMeta?.[id]?.filename ?? "",
-						contentType: attachmentMeta?.[id]?.contentType ?? "",
-						size: attachmentMeta?.[id]?.size ?? 0,
-						uploadedAt: DateTime.now().toISO()
-					}))
+					attachments: attachmentRefs(attachmentIds, attachmentMeta)
 				},
 				conversationId: convId
 			});
 			return true;
 		}
-		if (!isSelectedModelAvailable) {
+		const modelString = state.selectedProvider;
+		if (!isSelectedModelAvailable || !modelString) {
 			notify.error("Please select a provider first");
 			return false;
 		}
@@ -321,7 +314,7 @@ function ChatProvider({ adapter, currentUser, navigation, notify, activeConversa
 			const held = pendingQueueRef.current;
 			pendingQueueRef.current = [];
 			dispatch({ type: "CLEAR_QUEUED_MESSAGES" });
-			_precedingMessages = [...held.map(({ id: _id, ...rest }) => rest), ..._precedingMessages ?? []];
+			precedingMessages = [...held.map(({ id: _id, ...rest }) => rest), ...precedingMessages ?? []];
 		}
 		let conversationId = currentConversationIdRef.current;
 		let isNewConversation = false;
@@ -357,20 +350,14 @@ function ChatProvider({ adapter, currentUser, navigation, notify, activeConversa
 		startStreaming(targetConversationId);
 		let lastBranchId = parentId || state.currentConversation?.activeBranchId || null;
 		const precedingApiMessages = [];
-		if (_precedingMessages?.length) for (const pm of _precedingMessages) {
+		if (precedingMessages?.length) for (const pm of precedingMessages) {
 			const pmId = crypto.randomUUID();
 			const pmMessage = {
 				id: pmId,
 				parentId: lastBranchId,
 				role: "user",
 				content: pm.content,
-				attachments: pm.attachmentIds?.length ? pm.attachmentIds.map((id) => ({
-					id,
-					filename: pm.attachmentMeta[id]?.filename ?? "",
-					contentType: pm.attachmentMeta[id]?.contentType ?? "",
-					size: pm.attachmentMeta[id]?.size ?? 0,
-					uploadedAt: DateTime.now().toISO()
-				})) : void 0,
+				attachments: attachmentRefs(pm.attachmentIds, pm.attachmentMeta),
 				timestamp: DateTime.now().toISO(),
 				author: currentUser
 			};
@@ -382,7 +369,7 @@ function ChatProvider({ adapter, currentUser, navigation, notify, activeConversa
 			precedingApiMessages.push({
 				role: "user",
 				content: pm.content,
-				attachment_ids: pm.attachmentIds?.length ? pm.attachmentIds : void 0
+				attachment_ids: pm.attachmentIds.length ? pm.attachmentIds : void 0
 			});
 			lastBranchId = pmId;
 		}
@@ -392,13 +379,7 @@ function ChatProvider({ adapter, currentUser, navigation, notify, activeConversa
 			parentId: lastBranchId,
 			role: "user",
 			content,
-			attachments: attachmentIds?.map((id) => ({
-				id,
-				filename: attachmentMeta?.[id]?.filename ?? "",
-				contentType: attachmentMeta?.[id]?.contentType ?? "",
-				size: attachmentMeta?.[id]?.size ?? 0,
-				uploadedAt: (/* @__PURE__ */ new Date()).toISOString()
-			})),
+			attachments: attachmentRefs(attachmentIds, attachmentMeta),
 			timestamp: (/* @__PURE__ */ new Date()).toISOString(),
 			author: currentUser
 		};
@@ -455,7 +436,6 @@ function ChatProvider({ adapter, currentUser, navigation, notify, activeConversa
 		let sendSucceeded = false;
 		let wasAborted = false;
 		try {
-			const modelString = state.selectedProvider;
 			const useResponses = state.models.find((m) => m.id === modelString)?.supports_responses === true;
 			let thinkingStart = null;
 			const markStreamStart = () => {
@@ -557,17 +537,14 @@ function ChatProvider({ adapter, currentUser, navigation, notify, activeConversa
 			});
 			if (wasAborted) isSendingRef.current = false;
 			else if (sendSucceeded) {
-				const queued = pendingQueueRef.current;
+				const next = heldSendArgs(pendingQueueRef.current);
 				pendingQueueRef.current = [];
 				dispatch({ type: "CLEAR_QUEUED_MESSAGES" });
-				if (queued.length > 0) {
-					const lastQueued = queued[queued.length - 1];
-					const preceding = queued.slice(0, -1);
-					setTimeout(() => {
-						isSendingRef.current = false;
-						sendMessageRef.current?.(lastQueued.content, lastQueued.attachmentIds.length > 0 ? lastQueued.attachmentIds : void 0, void 0, Object.keys(lastQueued.attachmentMeta).length > 0 ? lastQueued.attachmentMeta : void 0, preceding.length > 0 ? preceding : void 0);
-					}, 0);
-				} else isSendingRef.current = false;
+				if (next) setTimeout(() => {
+					isSendingRef.current = false;
+					sendMessageRef.current?.(...next);
+				}, 0);
+				else isSendingRef.current = false;
 			} else isSendingRef.current = false;
 		}
 	}, [
@@ -688,7 +665,7 @@ function ChatProvider({ adapter, currentUser, navigation, notify, activeConversa
 		});
 		dispatch({ type: "CLEAR_STREAMING_CONTENT" });
 		if (!conversationId || !hasContent) return;
-		const lastUserMessage = [...state.currentConversation?.messages || []].reverse().find((m) => m.role === "user");
+		const lastUserMessage = (state.currentConversation?.messages || []).findLast((m) => m.role === "user");
 		const messageId = stoppedMessageId || crypto.randomUUID();
 		dispatch({
 			type: "ADD_MESSAGE",
@@ -743,13 +720,11 @@ function ChatProvider({ adapter, currentUser, navigation, notify, activeConversa
 	}, []);
 	const flushQueuedMessages = useCallback(() => {
 		if (isSendingRef.current) return;
-		const held = pendingQueueRef.current;
-		if (held.length === 0) return;
+		const next = heldSendArgs(pendingQueueRef.current);
+		if (!next) return;
 		pendingQueueRef.current = [];
 		dispatch({ type: "CLEAR_QUEUED_MESSAGES" });
-		const last = held[held.length - 1];
-		const preceding = held.slice(0, -1).map(({ id: _id, ...rest }) => rest);
-		sendMessageRef.current?.(last.content, last.attachmentIds.length > 0 ? last.attachmentIds : void 0, void 0, Object.keys(last.attachmentMeta).length > 0 ? last.attachmentMeta : void 0, preceding.length > 0 ? preceding : void 0);
+		sendMessageRef.current?.(...next);
 	}, []);
 	const clearCurrentConversation = useCallback(() => {
 		currentConversationIdRef.current = null;

package/dist/ai/core/KeyboardShortcutsProvider.js

@@ -2,7 +2,7 @@ import { useKeyboardShortcuts } from "./useKeyboardShortcuts.js";
 import { Fragment, jsx } from "react/jsx-runtime";
 //#region src/ai/core/KeyboardShortcutsProvider.tsx
 function KeyboardShortcutsProvider({ children }) {
-	useKeyboardShortcuts({ enabled: true });
+	useKeyboardShortcuts();
 	return /* @__PURE__ */ jsx(Fragment, { children });
 }
 //#endregion

package/dist/ai/core/chatReducer.d.ts

@@ -28,9 +28,6 @@ export type ChatAction = {
 } | {
     type: 'SET_CURRENT_CONVERSATION';
     conversation: Conversation | null;
-} | {
-    type: 'UPDATE_CURRENT_CONVERSATION_TITLE';
-    title: string;
 } | {
     type: 'SET_PROVIDERS';
     providers: ProviderInfo[];
@@ -57,9 +54,6 @@ export type ChatAction = {
     type: 'SET_STREAMING';
     isStreaming: boolean;
     conversationId?: string;
-} | {
-    type: 'SET_THINKING';
-    isThinking: boolean;
 } | {
     type: 'APPEND_STREAMING_CONTENT';
     content: string;

package/dist/ai/core/chatReducer.js

@@ -36,7 +36,7 @@ function chatReducer(state, action) {
 					const messages = action.conversation.messages || [];
 					for (let i = messages.length - 1; i >= 0; i--) {
 						const msg = messages[i];
-						if (msg.role === "assistant" && msg.model) {
+						if (msg?.role === "assistant" && msg.model) {
 							if (!state.hasLoadedModels || state.models.some((m) => m.id === msg.model)) restoredProvider = msg.model;
 							break;
 						}
@@ -72,15 +72,6 @@ function chatReducer(state, action) {
 				thinkingStartTime: null,
 				queuedMessages: []
 			};
-		case "UPDATE_CURRENT_CONVERSATION_TITLE":
-			if (!state.currentConversation) return state;
-			return {
-				...state,
-				currentConversation: {
-					...state.currentConversation,
-					title: action.title
-				}
-			};
 		case "SET_PROVIDERS": return {
 			...state,
 			providers: action.providers
@@ -119,11 +110,6 @@ function chatReducer(state, action) {
 				...state,
 				isStreaming: action.isStreaming
 			};
-		case "SET_THINKING": return {
-			...state,
-			isThinking: action.isThinking,
-			thinkingStartTime: action.isThinking ? Date.now() : state.thinkingStartTime
-		};
 		case "APPEND_STREAMING_CONTENT":
 			if (state.currentConversation?.id !== action.conversationId) return state;
 			return {

package/dist/ai/core/useKeyboardShortcuts.d.ts

@@ -1,10 +1,12 @@
 import type { ChatMessage } from '../types.js';
+export declare function lastAssistantContent(messages: ChatMessage[]): string | null;
+export declare function lastUserMessage(messages: ChatMessage[]): ChatMessage | null;
 interface UseKeyboardShortcutsOptions {
     enabled?: boolean;
 }
 export declare function useKeyboardShortcuts(options?: UseKeyboardShortcutsOptions): {
     getLastUserMessage: () => ChatMessage | null;
-    getLastAssistantMessage: () => string | null | undefined;
+    getLastAssistantMessage: () => string | null;
     handleNewConversation: () => void;
     handleCopyLastResponse: () => Promise<void>;
     handleStopGeneration: () => void;

package/dist/ai/core/useKeyboardShortcuts.js

@@ -3,19 +3,17 @@ import { isMac } from "../utils.js";
 import { FOCUS_SIDEBAR_SEARCH_EVENT } from "./events.js";
 import { useCallback, useEffect } from "react";
 //#region src/ai/core/useKeyboardShortcuts.ts
+function lastAssistantContent(messages) {
+	return messages.findLast((m) => m.role === "assistant" && m.content)?.content ?? null;
+}
+function lastUserMessage(messages) {
+	return messages.findLast((m) => m.role === "user") ?? null;
+}
 function useKeyboardShortcuts(options = {}) {
 	const { enabled = true } = options;
 	const { currentConversation, isStreaming, stopStreaming, clearCurrentConversation, navigation, notify } = useChat();
-	const getLastAssistantMessage = useCallback(() => {
-		const messages = currentConversation?.messages || [];
-		for (let i = messages.length - 1; i >= 0; i--) if (messages[i].role === "assistant" && messages[i].content) return messages[i].content;
-		return null;
-	}, [currentConversation?.messages]);
-	const getLastUserMessage = useCallback(() => {
-		const messages = currentConversation?.messages || [];
-		for (let i = messages.length - 1; i >= 0; i--) if (messages[i].role === "user") return messages[i];
-		return null;
-	}, [currentConversation?.messages]);
+	const getLastAssistantMessage = useCallback(() => lastAssistantContent(currentConversation?.messages ?? []), [currentConversation?.messages]);
+	const getLastUserMessage = useCallback(() => lastUserMessage(currentConversation?.messages ?? []), [currentConversation?.messages]);
 	const handleNewConversation = useCallback(() => {
 		clearCurrentConversation();
 		navigation.toNewChat();
@@ -74,4 +72,4 @@ function useKeyboardShortcuts(options = {}) {
 	};
 }
 //#endregion
-export { useKeyboardShortcuts };
+export { lastAssistantContent, lastUserMessage, useKeyboardShortcuts };

package/dist/ai/core/useSSEStream.d.ts

@@ -15,7 +15,6 @@ interface UseSSEStreamResult {
     /** Stop the animation loop, flush remaining content */
     stopAnimationLoop: () => {
         unrevealed: string;
-        conversationId: string | null;
     };
     /** Reset all animation refs (used when navigating away) */
     resetAnimationRefs: () => void;

package/dist/ai/core/useSSEStream.js

@@ -49,23 +49,6 @@ function useSSEStream(dispatch) {
 		streamingConversationIdRef.current = conversationId;
 		streamActiveRef.current = true;
 	}, []);
-	const stopAnimationLoop = useCallback(() => {
-		const conversationId = streamingConversationIdRef.current;
-		streamActiveRef.current = false;
-		if (streamRafRef.current !== null) {
-			cancelAnimationFrame(streamRafRef.current);
-			streamRafRef.current = null;
-		}
-		const unrevealed = targetStreamContentRef.current.slice(revealedLengthRef.current);
-		targetStreamContentRef.current = "";
-		revealedLengthRef.current = 0;
-		lastFrameTimeRef.current = 0;
-		lastDispatchTimeRef.current = 0;
-		return {
-			unrevealed,
-			conversationId
-		};
-	}, []);
 	const resetAnimationRefs = useCallback(() => {
 		streamActiveRef.current = false;
 		if (streamRafRef.current !== null) {
@@ -77,6 +60,11 @@ function useSSEStream(dispatch) {
 		lastFrameTimeRef.current = 0;
 		lastDispatchTimeRef.current = 0;
 	}, []);
+	const stopAnimationLoop = useCallback(() => {
+		const unrevealed = targetStreamContentRef.current.slice(revealedLengthRef.current);
+		resetAnimationRefs();
+		return { unrevealed };
+	}, [resetAnimationRefs]);
 	useEffect(() => {
 		return () => {
 			if (streamRafRef.current !== null) cancelAnimationFrame(streamRafRef.current);

package/dist/ai/strings.d.ts

@@ -71,7 +71,6 @@ export interface ChatStrings {
         share: string;
         delete: string;
         sharedWithYou: string;
-        moreOptions: string;
         openSidebar: string;
         closeSidebar: string;
         newChat: string;

package/dist/ai/strings.js

@@ -78,7 +78,6 @@ var defaultChatStrings = {
 		share: "Share",
 		delete: "Delete",
 		sharedWithYou: "Shared with you",
-		moreOptions: "More options",
 		openSidebar: "Open sidebar",
 		closeSidebar: "Close sidebar",
 		newChat: "New chat",

package/dist/ai/types.d.ts

@@ -13,6 +13,7 @@ export interface AttachmentRef {
     conversationId?: string;
     messageId?: string;
 }
+export type AttachmentMeta = Record<string, Pick<AttachmentRef, 'filename' | 'contentType' | 'size'>>;
 export interface FunctionCall {
     name: string;
     arguments: string;
@@ -206,7 +207,6 @@ export interface Allocation {
 export interface ChatNavigation {
     toConversation(id: string): void;
     toNewChat(): void;
-    toAttachments(): void;
 }
 export interface ChatNotify {
     success(message: string): void;

package/dist/ai/ui/Avatar.d.ts

@@ -1,8 +1,7 @@
 interface AvatarProps {
     src?: string | undefined;
     name?: string;
-    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
     className?: string;
 }
-export declare function Avatar({ src, name, size, className }: AvatarProps): import("react").JSX.Element;
+export declare function Avatar({ src, name, className }: AvatarProps): import("react").JSX.Element;
 export {};

package/dist/ai/ui/Avatar.js

@@ -1,33 +1,22 @@
+import { avatarInitials } from "../../components/Avatar.js";
 import cx from "classnames";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/ai/ui/Avatar.tsx
-var sizeClasses = {
-	sm: "w-6 h-6 text-xs",
-	md: "w-8 h-8 text-sm",
-	lg: "w-10 h-10 text-base",
-	xl: "w-12 h-12 text-lg",
-	"2xl": "w-16 h-16 text-xl"
-};
-function Avatar({ src, name, size = "md", className }) {
+var SIZE_CLASSES = "w-6 h-6 text-xs";
+function Avatar({ src, name, className }) {
 	const [erroredUrl, setErroredUrl] = useState(null);
 	const errored = erroredUrl !== null && erroredUrl === src;
-	const initials = useMemo(() => {
-		if (!name) return "?";
-		const parts = name.split(/[\s.]+/).filter(Boolean);
-		if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
-		return parts[0]?.[0]?.toUpperCase() || "?";
-	}, [name]);
 	return /* @__PURE__ */ jsx("div", {
 		className: cx("relative inline-flex", className),
 		children: !src || errored ? /* @__PURE__ */ jsx("div", {
-			className: cx("rounded-full flex items-center justify-center font-medium", "bg-(--theme-element,#3b82f6) text-(--theme-element-text,#ffffff)", sizeClasses[size]),
-			children: initials
+			className: cx("rounded-full flex items-center justify-center font-medium", "bg-(--theme-element,#3b82f6) text-(--theme-element-text,#ffffff)", SIZE_CLASSES),
+			children: avatarInitials(name)
 		}) : /* @__PURE__ */ jsx("img", {
 			src,
 			alt: name || "User avatar",
 			onError: () => setErroredUrl(src),
-			className: cx("rounded-full object-cover", sizeClasses[size])
+			className: cx("rounded-full object-cover", SIZE_CLASSES)
 		})
 	});
 }

package/dist/ai/ui/Markdown.d.ts

@@ -1,8 +1,6 @@
-import { type ControlsConfig } from 'streamdown';
 interface MarkdownProps {
     children: string;
     isStreaming?: boolean;
-    controls?: ControlsConfig;
 }
-export default function Markdown({ children, isStreaming, controls }: MarkdownProps): import("react").JSX.Element;
+export default function Markdown({ children, isStreaming }: MarkdownProps): import("react").JSX.Element;
 export {};

package/dist/ai/ui/Markdown.js

@@ -37,7 +37,7 @@ function loadMermaid() {
 }
 var shikiTheme = ["github-light", "github-dark"];
 var rehypePlugins = [...Object.values(defaultRehypePlugins), rehypeCodeBreaks];
-function Markdown({ children, isStreaming, controls }) {
+function Markdown({ children, isStreaming }) {
 	const { markdownComponents } = useChatConfig();
 	const needsMermaid = !!children && children.includes("```mermaid");
 	const [, setMermaidReady] = useState(() => !!pluginsWithMermaid);
@@ -58,7 +58,6 @@ function Markdown({ children, isStreaming, controls }) {
 			mode: isStreaming ? "streaming" : "static",
 			...isStreaming === void 0 ? {} : { isAnimating: isStreaming },
 			...isStreaming ? { caret: "block" } : {},
-			...controls === void 0 ? {} : { controls },
 			plugins,
 			rehypePlugins,
 			shikiTheme,

package/dist/ai/ui/sidebar.d.ts

@@ -1,6 +1,5 @@
 import { type CSSProperties, type ReactNode } from 'react';
 import { type OpenMenu, type RowMenuItem } from '../../list/index.js';
-export declare const SIDEBAR_RAIL_WIDTH_PX = 48;
 export declare const SIDEBAR_DEFAULT_WIDTH_PX = 256;
 /** The column a conversation list lives in: it animates between its width
  *  and a rail, unless a drag is setting the width right now. */

package/dist/ai/ui/sidebar.js

@@ -5,11 +5,13 @@ import { MoreButton, rowContextMenuProps, useRowMenuActive } from "../../list/Ro
 import cx from "classnames";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ai/ui/sidebar.tsx
+var SIDEBAR_RAIL_WIDTH_PX = 48;
 var HIGHLIGHT_SELECTED = "bg-[color-mix(in_oklab,var(--theme-panel)_8%,transparent)]";
 var HIGHLIGHT_HOVER = "hover:bg-[color-mix(in_oklab,var(--theme-panel)_5%,transparent)]";
 /** The column a conversation list lives in: it animates between its width
 *  and a rail, unless a drag is setting the width right now. */
-function SidebarPanel({ collapsed, width = 256, railWidth = 48, resizing = false, label, className, style, children }) {
+function SidebarPanel({ collapsed, width = 256, railWidth = SIDEBAR_RAIL_WIDTH_PX, resizing = false, label, className, style, children }) {
 	return /* @__PURE__ */ jsx("aside", {
 		"aria-label": label,
 		className: cx("relative h-full flex shrink-0 flex-col bg-(--theme-muted-panel-bg) overflow-hidden", !resizing && "transition-[width] duration-300 ease-in-out", className),

package/dist/ai/utils.js

@@ -10,7 +10,7 @@ function formatFileSize(bytes) {
 		"TB"
 	];
 	const i = Math.floor(Math.log(bytes) / Math.log(k));
-	return Number.parseFloat((bytes / k ** i).toFixed(2)) + " " + sizes[i];
+	return `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
 }
 function isMac() {
 	return navigator.platform.toUpperCase().includes("MAC");

package/dist/components/Avatar.js

@@ -19,8 +19,10 @@ var STATUS_CLASSES = {
 /** Up to two initials: the first and last word of a name split on spaces and dots. */
 function avatarInitials(name) {
 	const parts = (name ?? "").split(/[\s.]+/).filter(Boolean);
-	if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
-	return parts[0]?.[0]?.toUpperCase() || "?";
+	const first = parts[0]?.charAt(0);
+	const last = parts.at(-1)?.charAt(0);
+	if (parts.length >= 2 && first && last) return (first + last).toUpperCase();
+	return first?.toUpperCase() || "?";
 }
 function Avatar({ src, name, size = "md", status, className }) {
 	const strings = useStrings();

package/dist/components/BareModal.js

@@ -37,14 +37,10 @@ function BareModal({ open, onClose, ariaLabel, className, onPanelKeyDown, onPane
 			return;
 		}
 		const focusable = panel.querySelectorAll(FOCUSABLE);
-		if (focusable.length === 0) {
-			e.preventDefault();
-			onPanelKeyDown?.(e);
-			return;
-		}
 		const first = focusable[0];
 		const last = focusable[focusable.length - 1];
 		if (!first || !last) {
+			e.preventDefault();
 			onPanelKeyDown?.(e);
 			return;
 		}

package/dist/components/Breadcrumbs.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useEffect, useLayoutEffect } from "react";
+import React, { createContext, useContext, useEffect, useLayoutEffect, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Breadcrumbs.tsx
 var BreadcrumbContext = createContext({
@@ -22,20 +22,27 @@ function BreadcrumbProvider({ children }) {
 	const [titleActionSlot, setTitleActionSlot] = React.useState(null);
 	const [rightActionSlot, setRightActionSlot] = React.useState(null);
 	const claimedPath = React.useRef(null);
+	const value = useMemo(() => ({
+		breadcrumbs,
+		setBreadcrumbs,
+		rightsideBreadcrumb,
+		setRightsideBreadcrumb,
+		hidden,
+		setHidden,
+		titleActionSlot,
+		setTitleActionSlot,
+		rightActionSlot,
+		setRightActionSlot,
+		claimedPath
+	}), [
+		breadcrumbs,
+		rightsideBreadcrumb,
+		hidden,
+		titleActionSlot,
+		rightActionSlot
+	]);
 	return /* @__PURE__ */ jsx(BreadcrumbContext.Provider, {
-		value: {
-			breadcrumbs,
-			setBreadcrumbs,
-			rightsideBreadcrumb,
-			setRightsideBreadcrumb,
-			hidden,
-			setHidden,
-			titleActionSlot,
-			setTitleActionSlot,
-			rightActionSlot,
-			setRightActionSlot,
-			claimedPath
-		},
+		value,
 		children
 	});
 }

package/dist/components/CollapsiblePanel.d.ts

@@ -6,15 +6,13 @@ interface IControlledCollapsiblePanelProps {
     setOpen?: React.Dispatch<React.SetStateAction<boolean>>;
     onClick?: (() => void) | undefined;
     wrapperElement?: React.ElementType | undefined;
-    shown?: boolean;
-    setShown?: (shown: boolean) => void;
     customizedButton?: React.ReactNode;
     /** Rendered right after the title, outside the toggle button. */
     titleAction?: React.ReactNode;
     className?: string | undefined;
 }
 export declare function ControlledCollapsiblePanel({ title, children, open, setOpen, onClick, wrapperElement, customizedButton, titleAction, className, }: IControlledCollapsiblePanelProps): React.JSX.Element;
-export declare function UncontrolledCollapsiblePanel({ title, children, onClick, wrapperElement, initialState, className, customizedButton, }: Omit<IControlledCollapsiblePanelProps, 'setOpen' | 'open'> & {
+export declare function UncontrolledCollapsiblePanel({ title, children, onClick, wrapperElement, initialState, className, customizedButton, titleAction, }: Omit<IControlledCollapsiblePanelProps, 'setOpen' | 'open'> & {
     initialState?: boolean | undefined;
 }): React.JSX.Element;
 type MaybeCollapsibleProps = {

package/dist/components/CollapsiblePanel.js

@@ -4,14 +4,13 @@ import React, { useCallback } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import AnimateHeight from "react-animate-height";
 //#region src/components/CollapsiblePanel.tsx
-var noop = () => {};
-function ControlledCollapsiblePanel({ title = "", children, open, setOpen, onClick = noop, wrapperElement, customizedButton = null, titleAction, className }) {
+function ControlledCollapsiblePanel({ title = "", children, open, setOpen, onClick, wrapperElement, customizedButton = null, titleAction, className }) {
 	const toggleOpen = useCallback(() => {
-		if (onClick) onClick();
+		onClick?.();
 		setOpen?.((open) => !open);
 	}, [setOpen, onClick]);
 	const contentId = React.useId();
-	const Wrapper = wrapperElement ? wrapperElement : React.Fragment;
+	const Wrapper = wrapperElement ?? React.Fragment;
 	return React.isValidElement(title) ? /* @__PURE__ */ jsxs(Fragment$1, { children: [title, /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(AnimateHeight, {
 		duration: 300,
 		height: open ? "auto" : 0,
@@ -46,7 +45,7 @@ function ControlledCollapsiblePanel({ title = "", children, open, setOpen, onCli
 		})]
 	});
 }
-function UncontrolledCollapsiblePanel({ title, children, onClick, wrapperElement, initialState = true, className, customizedButton = null }) {
+function UncontrolledCollapsiblePanel({ title, children, onClick, wrapperElement, initialState = true, className, customizedButton = null, titleAction }) {
 	const [open, setOpen] = React.useState(initialState);
 	const passTitle = typeof title === "function" ? title(open, setOpen) : title;
 	return /* @__PURE__ */ jsx(ControlledCollapsiblePanel, {
@@ -57,6 +56,7 @@ function UncontrolledCollapsiblePanel({ title, children, onClick, wrapperElement
 		wrapperElement,
 		className,
 		customizedButton,
+		titleAction,
 		children
 	});
 }

package/dist/components/Dropdown.d.ts

@@ -4,10 +4,6 @@ export interface IProps {
     options: (ICategory | IOptions | string)[];
     onActiveChange?: (option: unknown) => void;
     onChange: React.Dispatch<SetStateAction<unknown>>;
-    onRangeChange?: (range: {
-        min: number;
-        max: number;
-    }) => void;
     value: IOptions | string | Record<string, unknown>;
     id?: string | undefined;
     ariaLabel?: string | undefined;