@parallelworks/ui 0.77.0 → 0.78.0

package/dist/ai/components/ChatEmptyState.js

@@ -1,6 +1,6 @@
 import { AddIcon, CloudIcon } from "../../icons.js";
-import { keyedByContent } from "../../components/keys.js";
 import { useStrings } from "../../components/Provider.js";
+import { keyedByContent } from "../../components/keys.js";
 import { Button } from "../../components/Button.js";
 import { Callout } from "../../components/Callout.js";
 import { useChatConfig } from "../core/config.js";
@@ -13,8 +13,8 @@ import DragOverlay from "./DragOverlay.js";
 import ChatInput from "./ChatInput.js";
 import ChatStage, { StageList } from "./ChatStage.js";
 import ProviderIssueBanner from "./ProviderIssueBanner.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/ChatEmptyState.tsx
 function pickRandom(arr, count) {
 	return [...arr].sort(() => Math.random() - .5).slice(0, count);
@@ -132,7 +132,7 @@ function ChatEmptyState({ targetSession }) {
 								disabled: isLoading || isLoadingModels || models.length === 0,
 								placeholder: isLoadingModels ? tInput.placeholderLoading : hasLoadedModels && models.length === 0 ? tInput.placeholderNoProviders : tInput.placeholder,
 								settingsLeft: /* @__PURE__ */ jsx(ConnectToolsLink, {}),
-								settingsRight: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ComposerUsage, { children: slots.composerUsage }), /* @__PURE__ */ jsx(ComposerControls, { targetSession })] })
+								settingsRight: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ComposerUsage, { children: slots.composerUsage }), /* @__PURE__ */ jsx(ComposerControls, { targetSession })] })
 							}),
 							prompts.length > 0 && !(hasLoadedModels && models.length === 0) && /* @__PURE__ */ jsx(StageList, { children: keyedByContent(prompts, (p) => p).map(({ key, item: prompt }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
 								type: "button",

package/dist/ai/components/ChatInput.js

@@ -11,8 +11,8 @@ import DragOverlay from "./DragOverlay.js";
 import { PasteFileCard } from "./PastedText.js";
 import { SlashMenu, useSlashMenu } from "./SlashMenu.js";
 import { usePasteCards } from "./usePasteCards.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/ChatInput.tsx
 /** An optional box that is still empty should not wear the filled look of
 *  one waiting to send something. */
@@ -230,9 +230,7 @@ function ChatInput({ onSend, disabled = false, placeholder, conversationId, onEd
 					className: "relative",
 					children: [slash && slashMenu.open && /* @__PURE__ */ jsx(SlashMenu, {
 						label: slash.label,
-						listId: slashMenu.listId,
-						matches: slashMenu.matches,
-						active: slashMenu.active,
+						menu: slashMenu,
 						onChoose: (name) => {
 							slashMenu.choose(name);
 							textareaRef.current?.focus();
@@ -290,7 +288,7 @@ function ChatInput({ onSend, disabled = false, placeholder, conversationId, onEd
 						]
 					})]
 				}),
-				(settingsLeft || uploadedCount > 0) && /* @__PURE__ */ jsx(ComposerSettings, { left: /* @__PURE__ */ jsxs(Fragment, { children: [settingsLeft, uploadedCount > 0 && /* @__PURE__ */ jsx("span", {
+				(settingsLeft || uploadedCount > 0) && /* @__PURE__ */ jsx(ComposerSettings, { left: /* @__PURE__ */ jsxs(Fragment$1, { children: [settingsLeft, uploadedCount > 0 && /* @__PURE__ */ jsx("span", {
 					className: "text-[11px] theme-muted-text",
 					children: t.filesAttached(uploadedCount)
 				})] }) }),

package/dist/ai/components/ChatLayout.js

@@ -5,8 +5,8 @@ import { useChat } from "../core/ChatProvider.js";
 import { KeyboardShortcutsProvider } from "../core/KeyboardShortcutsProvider.js";
 import { SidebarToggle } from "../ui/sidebar.js";
 import ChatSidebar from "./ChatSidebar.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/ChatLayout.tsx
 /** The list at its default width beside the narrowest thread that still
 *  reads comfortably; narrower than that, 'auto' moves the list to a drawer. */

package/dist/ai/components/ChatMessage.js

@@ -17,8 +17,8 @@ import BranchNavigator from "./BranchNavigator.js";
 import { UserMessageText } from "./PastedText.js";
 import { replyText } from "../core/useKeyboardShortcuts.js";
 import MessageAttachments from "./MessageAttachments.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { DateTime } from "luxon";
 //#region src/ai/components/ChatMessage.tsx
 /** A message action: the chat's square, tinted from the ink on hover. */

package/dist/ai/components/ChatMessageList.js

@@ -9,8 +9,8 @@ import Markdown from "../ui/Markdown.js";
 import { Reasoning, ReasoningBody } from "./Reasoning.js";
 import AgentMessageParts from "./agent/AgentMessageParts.js";
 import ChatMessage_default from "./ChatMessage.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/ChatMessageList.tsx
 function ChatMessageList({ messages, allMessages, streamingMessage: streamingMessageProp, queuedMessages, onRemoveQueued, canRemoveQueued, queueDelivery = "afterReply", editingMessageId, showAuthor, currentUsername, onNavigateBranch, onEditMessage, onSaveEdit, onCancelEdit, onRegenerateMessage, onRetryMessage, onOpenReasoning, onApprovalAnswer, inputElement, isStreaming: isStreamingProp, flush, label, footer, workingIndicator = true }) {
 	const { adapter, isStreaming: providerStreaming } = useChat();
@@ -268,7 +268,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage: streamingMes
 								children: [
 									removable ? /* @__PURE__ */ jsx(ClockIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(CheckIcon, { className: "h-3 w-3" }),
 									/* @__PURE__ */ jsx("span", { children: status }),
-									onRemoveQueued && removable && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+									onRemoveQueued && removable && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 										"aria-hidden": "true",
 										children: "·"
 									}), /* @__PURE__ */ jsx("button", {

package/dist/ai/components/ChatSidebar.js

@@ -10,8 +10,8 @@ import { FOCUS_SIDEBAR_SEARCH_EVENT } from "../core/events.js";
 import { SidebarEmpty, SidebarRow, SidebarRowBody } from "../ui/sidebar.js";
 import { ConversationSidebar } from "../ui/ConversationSidebar.js";
 import { groupConversationsByDate, useConversationActions } from "./conversationActions.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/ChatSidebar.tsx
 function ConversationRow({ conv, isCurrent, menuItems, openMenu, onOpen }) {
 	const { LinkComponent, strings } = useChatConfig();
@@ -122,7 +122,7 @@ function ChatSidebar({ actions = true, top }) {
 			current: filteredConversations.find((conv) => conv.id === activeConversationId),
 			onSelect: (conv) => navigation.toConversation(conv.id)
 		},
-		top: (top || actions) && /* @__PURE__ */ jsxs(Fragment, { children: [top?.({ collapsed: sidebarCollapsed }), actions && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		top: (top || actions) && /* @__PURE__ */ jsxs(Fragment$1, { children: [top?.({ collapsed: sidebarCollapsed }), actions && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-0.5 px-2 pt-2 pb-1",
 			children: [/* @__PURE__ */ jsxs(LinkComponent, {
 				target: { kind: "newChat" },
@@ -155,7 +155,7 @@ function ChatSidebar({ actions = true, top }) {
 		})] })] }),
 		footer: /* @__PURE__ */ jsx(ManageProvidersLink, {})
 	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [(drawer || sidebar !== "hidden") && list, overlays] });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [(drawer || sidebar !== "hidden") && list, overlays] });
 }
 //#endregion
 export { ChatSidebar as default };

package/dist/ai/components/ChatThread.js

@@ -5,8 +5,8 @@ import { ComposerControls, ComposerUsage, ConnectToolsLink } from "./ComposerChr
 import ProviderIssueBanner from "./ProviderIssueBanner.js";
 import { ShareButton, ToolResultsSharedNote } from "./ShareDialog.js";
 import SessionView from "./SessionView.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/ChatThread.tsx
 function ChatThread({ conversationId }) {
 	const { adapter, currentUser, currentConversation, loadConversation, loadProviders, sendMessage, retryMessage, answerToolApproval, tools, isLoadingConversation, navigateToBranch, queuedMessages, removeQueuedMessage } = useChat();
@@ -57,12 +57,12 @@ function ChatThread({ conversationId }) {
 		currentUsername: currentUser.username,
 		loading: isLoadingConversation && !currentConversation,
 		dropFiles: !!adapter.attachments,
-		banners: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(BlockedGroupBanner, {}), /* @__PURE__ */ jsx(ProviderIssueBanner, {})] }),
+		banners: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(BlockedGroupBanner, {}), /* @__PURE__ */ jsx(ProviderIssueBanner, {})] }),
 		composer: {
 			disabled: isLoadingConversation || !canWrite,
 			...canWrite ? {} : { placeholder: strings.thread.viewOnly },
-			settingsLeft: /* @__PURE__ */ jsxs(Fragment, { children: [currentConversation && currentConversation.isOwner !== false ? /* @__PURE__ */ jsx(ShareButton, { conversationId }) : tools.length > 0 && /* @__PURE__ */ jsx(ToolResultsSharedNote, {}), /* @__PURE__ */ jsx(ConnectToolsLink, {})] }),
-			settingsRight: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ComposerUsage, { children: slots.composerUsage }), /* @__PURE__ */ jsx(ComposerControls, {})] })
+			settingsLeft: /* @__PURE__ */ jsxs(Fragment$1, { children: [currentConversation && currentConversation.isOwner !== false ? /* @__PURE__ */ jsx(ShareButton, { conversationId }) : tools.length > 0 && /* @__PURE__ */ jsx(ToolResultsSharedNote, {}), /* @__PURE__ */ jsx(ConnectToolsLink, {})] }),
+			settingsRight: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ComposerUsage, { children: slots.composerUsage }), /* @__PURE__ */ jsx(ComposerControls, {})] })
 		}
 	});
 }

package/dist/ai/components/ComposerAddMenu.js

@@ -3,6 +3,7 @@ import { AddIcon, AttachmentIcon, ConnectIcon, ToolsIcon } from "../../icons.js"
 import { panelItemClassName } from "../../components/floating.js";
 import { MenuItem, MenuLinkItem, MenuPopup, MenuSeparator, MenuSubmenuTrigger } from "../../components/Menu.js";
 import { useQueryMatch } from "../../components/search.js";
+import { useNarrow } from "../../components/useNarrow.js";
 import { Button } from "../../components/Button.js";
 import { Modal } from "../../components/Modal.js";
 import { Switch } from "../../components/Switch.js";
@@ -10,20 +11,8 @@ import { SearchInput } from "../../components/SearchInput.js";
 import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
 import { Menu } from "@base-ui/react/menu";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useId, useState, useSyncExternalStore } from "react";
-var NARROW = "(max-width: 639px)";
-function subscribeNarrow(onChange) {
-	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {};
-	const media = window.matchMedia(NARROW);
-	media.addEventListener("change", onChange);
-	return () => media.removeEventListener("change", onChange);
-}
-var isNarrow = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(NARROW).matches;
-/** A phone has no room beside the menu for a submenu, and no hover to open one. */
-function useNarrow() {
-	return useSyncExternalStore(subscribeNarrow, isNarrow, () => false);
-}
+import { useId, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 function PlusButton({ open, label, hint, className, ...props }) {
 	const name = hint ? `${label} · ${hint}` : label;
 	return /* @__PURE__ */ jsxs("button", {
@@ -162,7 +151,7 @@ function ToolsModal({ open, onClose, listed }) {
 		size: "md",
 		title: t.tools,
 		description: t.toolsDescription,
-		footer: /* @__PURE__ */ jsxs(Fragment, { children: [footerStart, /* @__PURE__ */ jsx(Button, {
+		footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [footerStart, /* @__PURE__ */ jsx(Button, {
 			variant: "primary",
 			onClick: close,
 			children: t.done
@@ -222,7 +211,7 @@ function ComposerAddMenu({ attachmentsOpen, onToggleAttachments, disabled, withT
 	const many = listed.length > 6;
 	const connect = extraLinks.connectTools;
 	const label = onToggleAttachments ? t.label : t.tools;
-	if (many && !onToggleAttachments) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PlusButton, {
+	if (many && !onToggleAttachments) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PlusButton, {
 		open: false,
 		"aria-haspopup": "dialog",
 		disabled,
@@ -254,9 +243,9 @@ function ComposerAddMenu({ attachmentsOpen, onToggleAttachments, disabled, withT
 	] }), /* @__PURE__ */ jsxs(MenuPopup, {
 		side: "inline-end",
 		className: "w-72",
-		children: [/* @__PURE__ */ jsx(ToolsList, { listed }), connect && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsx(ConnectToolsRow, { href: connect })] })]
+		children: [/* @__PURE__ */ jsx(ToolsList, { listed }), connect && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsx(ConnectToolsRow, { href: connect })] })]
 	})] }) : null;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(Menu.Trigger, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(Menu.Trigger, {
 		disabled,
 		render: /* @__PURE__ */ jsx(PlusButton, {
 			open: attachmentsOpen,
@@ -270,10 +259,10 @@ function ComposerAddMenu({ attachmentsOpen, onToggleAttachments, disabled, withT
 		children: [onToggleAttachments && /* @__PURE__ */ jsxs(MenuItem, {
 			onClick: onToggleAttachments,
 			children: [/* @__PURE__ */ jsx(AttachmentIcon, { className: "h-4 w-4 shrink-0 theme-muted-text" }), t.addFiles]
-		}), toolsEntry ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+		}), toolsEntry ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			onToggleAttachments && /* @__PURE__ */ jsx(MenuSeparator, {}),
 			/* @__PURE__ */ jsx(ToolsList, { listed }),
-			connect && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsx(ConnectToolsRow, { href: connect })] })
+			connect && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsx(ConnectToolsRow, { href: connect })] })
 		] })]
 	})] }), many && /* @__PURE__ */ jsx(ToolsModal, {
 		open: modalOpen,

package/dist/ai/components/ModelSelector.js

@@ -6,8 +6,8 @@ import { useChatConfig } from "../core/config.js";
 import { issueDetail, issueLabel, providerIssueFor } from "../core/providerIssues.js";
 import { useChat } from "../core/ChatProvider.js";
 import { chipClassName } from "../ui/chip.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/ModelSelector.tsx
 var ORG_OWNER = "org";
 /** Who registered a provider: the provider list's owner when the adapter
@@ -20,7 +20,7 @@ function providerOwner(info, model) {
 function CspIcon({ cspKind, className }) {
 	const { slots } = useChatConfig();
 	const custom = slots.providerIcon?.(cspKind, className);
-	if (custom) return /* @__PURE__ */ jsx(Fragment, { children: custom });
+	if (custom) return /* @__PURE__ */ jsx(Fragment$1, { children: custom });
 	return /* @__PURE__ */ jsx(CloudIcon, { className: cx("theme-muted-text", className) });
 }
 function getProviderKeyFromModelId(modelId) {
@@ -135,7 +135,7 @@ function ModelSelector({ targetSession, model }) {
 		trigger: /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			className: chipClassName,
-			children: [selected ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			children: [selected ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx("span", {
 					className: "truncate font-medium theme-text",
 					children: getModelLabel(selected)

package/dist/ai/components/PastedText.js

@@ -6,8 +6,8 @@ import { useChatConfig } from "../core/config.js";
 import Markdown from "../ui/Markdown.js";
 import { fencePaste } from "../core/pasteLanguage.js";
 import { splitPastes } from "../core/pastes.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1 } from "react";
+import { Fragment } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/PastedText.tsx
 /** A paste sent, or about to be sent, as its saved file. */
 function PasteFileCard({ id, lines, bytes, saving = false, error, onRemove }) {
@@ -49,16 +49,16 @@ function PasteFileCard({ id, lines, bytes, saving = false, error, onRemove }) {
 *  it reads as, one sent as its file as a card. The blank lines the composer puts around a
 *  paste would stack on the block's own spacing, so they are dropped. */
 function UserMessageText({ content, pastes }) {
-	if (!pastes?.length) return /* @__PURE__ */ jsx(Fragment, { children: content });
+	if (!pastes?.length) return /* @__PURE__ */ jsx(Fragment$1, { children: content });
 	const segments = splitPastes(content, pastes);
 	const shows = (seg) => typeof seg !== "string" || seg.trim() !== "";
 	const blockSpacing = (i) => cx(segments.slice(0, i).some(shows) ? "mt-2.5" : "mt-0", segments.slice(i + 1).some(shows) ? "mb-2.5" : "mb-0");
-	return /* @__PURE__ */ jsx(Fragment, { children: segments.map((segment, i) => {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: segments.map((segment, i) => {
 		if (typeof segment === "string") {
 			let text = segment;
 			if (i > 0) text = text.replace(/^\n+/, "");
 			if (i < segments.length - 1) text = text.replace(/\n+$/, "");
-			return text ? /* @__PURE__ */ jsx(Fragment$1, { children: text }, i) : null;
+			return text ? /* @__PURE__ */ jsx(Fragment, { children: text }, i) : null;
 		}
 		if (segment.inline && segment.text !== void 0) return /* @__PURE__ */ jsx("span", {
 			className: cx("chat-paste-code block", blockSpacing(i)),

package/dist/ai/components/SessionView.js

@@ -5,8 +5,8 @@ import ChatInput from "./ChatInput.js";
 import { escapeClosesLayer } from "../core/useKeyboardShortcuts.js";
 import ChatMessageList from "./ChatMessageList.js";
 import ChatActivity from "./ChatActivity.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/SessionView.tsx
 /** One conversation or agent session: its transcript, with the composer at
 *  the foot of the scrolling column. The host binds its own data and actions;

package/dist/ai/components/ShareDialog.js

@@ -9,8 +9,8 @@ import { ConfirmModal } from "../../components/ConfirmModal.js";
 import { Select } from "../../components/Select.js";
 import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState, useTransition } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/ShareDialog.tsx
 function isTeamPermission(p) {
 	return !!p.team && !p.entireOrganization;
@@ -150,7 +150,7 @@ function ShareDialog({ conversationId, isOpen, onClose }) {
 					size: 24,
 					label: common.loading
 				})
-			}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "border theme-border rounded-lg p-3",
 					children: [/* @__PURE__ */ jsx("h3", {
@@ -253,7 +253,7 @@ function ShareButton({ conversationId, disabled = false }) {
 	const [isOpen, setIsOpen] = useState(false);
 	const shared = useShared(conversationId, tools.length > 0 && !isOpen);
 	if (!adapter.sharing) return null;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsxs("button", {
 			type: "button",
 			onClick: () => setIsOpen(true),

package/dist/ai/components/SlashMenu.d.ts

@@ -27,11 +27,38 @@ export declare function useSlashMenu(input: string, config: SlashMenuConfig | un
         'aria-controls': string | undefined;
         'aria-activedescendant': string | undefined;
     };
+    list: {
+        active: number;
+        setActive: import("react").Dispatch<import("react").SetStateAction<number>>;
+        handleKey: (event: globalThis.KeyboardEvent | KeyboardEvent<Element>) => boolean;
+        listId: string;
+        hostProps: {
+            'aria-autocomplete': 'list';
+            'aria-controls': string | undefined;
+            'aria-activedescendant': string | undefined;
+        };
+        listProps: {
+            id: string;
+            role: 'listbox';
+        };
+        optionProps: (index: number) => {
+            id: string;
+            role: 'option';
+            tabIndex: number;
+            'aria-selected': boolean;
+            'aria-disabled': true | undefined;
+            'data-highlighted': true | undefined;
+            'data-disabled': true | undefined;
+            onMouseDown: (event: {
+                preventDefault: () => void;
+            }) => void;
+            onMouseMove: () => void;
+            onClick: () => void;
+        };
+    };
 };
-export declare function SlashMenu({ label, listId, matches, active, onChoose, }: {
+export declare function SlashMenu({ label, menu, onChoose, }: {
     label: string;
-    listId: string;
-    matches: SlashCommandOption[];
-    active: number;
+    menu: ReturnType<typeof useSlashMenu>;
     onChoose: (name: string) => void;
 }): import("react").JSX.Element;

package/dist/ai/components/SlashMenu.js

@@ -1,7 +1,6 @@
-import { cx } from "../../cx.js";
-import { panelClassName, panelItemClassName } from "../../components/floating.js";
+import { ListboxOption, ListboxPanel, useListboxNavigation } from "../../components/Listbox.js";
+import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useState } from "react";
 //#region src/ai/components/SlashMenu.tsx
 var MAX_SHOWN = 8;
 var TYPING_NAME = /^\/([\w:-]*)$/;
@@ -16,8 +15,6 @@ function slashMatches(input, commands) {
 *  from a multi-line composer, so the textarea stays a textbox that points at the list:
 *  spread `inputProps` on it. */
 function useSlashMenu(input, config, setInput) {
-	const listId = useId();
-	const [active, setActive] = useState(0);
 	const [dismissed, setDismissed] = useState(false);
 	const matches = config ? slashMatches(input, config.commands) : [];
 	const exact = matches.length === 1 && `/${matches[0]?.name}` === input;
@@ -27,80 +24,56 @@ function useSlashMenu(input, config, setInput) {
 	useEffect(() => {
 		if (startsCommand) onOpen?.();
 	}, [startsCommand, onOpen]);
+	const choose = (name) => setInput(`/${name} `);
+	const list = useListboxNavigation({
+		items: matches,
+		open,
+		onChoose: (command) => choose(command.name),
+		onDismiss: () => setDismissed(true)
+	});
 	const query = TYPING_NAME.exec(input)?.[1] ?? null;
 	const [shownQuery, setShownQuery] = useState(query);
 	if (query !== shownQuery) {
 		setShownQuery(query);
-		setActive(0);
+		list.setActive(0);
 		setDismissed(false);
 	}
-	const choose = (name) => setInput(`/${name} `);
-	const shown = Math.min(active, matches.length - 1);
 	/** True when the key belonged to the menu. */
-	const handleKey = (e) => {
-		if (!open) return false;
-		switch (e.key) {
-			case "ArrowDown":
-				setActive((i) => (i + 1) % matches.length);
-				break;
-			case "ArrowUp":
-				setActive((i) => (i - 1 + matches.length) % matches.length);
-				break;
-			case "Tab":
-			case "Enter": {
-				if (e.shiftKey) return false;
-				const pick = matches[shown];
-				if (!pick) return false;
-				choose(pick.name);
-				break;
-			}
-			case "Escape":
-				setDismissed(true);
-				break;
-			default: return false;
-		}
-		e.preventDefault();
-		return true;
-	};
+	const handleKey = (e) => list.handleKey(e);
 	return {
 		open,
 		matches,
-		active: shown,
+		active: list.active,
 		choose,
 		handleKey,
-		listId,
-		inputProps: {
-			"aria-autocomplete": "list",
-			"aria-controls": open ? listId : void 0,
-			"aria-activedescendant": open ? optionId(listId, shown) : void 0
-		}
+		listId: list.listId,
+		inputProps: list.hostProps,
+		list
 	};
 }
-var optionId = (listId, index) => `${listId}-${index}`;
-function SlashMenu({ label, listId, matches, active, onChoose }) {
+function SlashMenu({ label, menu, onChoose }) {
 	return /* @__PURE__ */ jsx("div", {
-		id: listId,
-		role: "listbox",
-		"aria-label": label,
 		"data-testid": "slash-menu",
-		className: cx("absolute bottom-full left-0 right-0 z-20 mb-2 overflow-hidden", "p-1", panelClassName),
-		children: matches.map((c, i) => /* @__PURE__ */ jsxs("div", {
-			id: optionId(listId, i),
-			role: "option",
-			tabIndex: -1,
-			"aria-selected": i === active,
-			"data-highlighted": i === active || void 0,
-			onMouseDown: (e) => e.preventDefault(),
-			onClick: () => onChoose(c.name),
-			className: cx("items-baseline gap-3", panelItemClassName),
-			children: [/* @__PURE__ */ jsxs("span", {
-				className: "font-mono",
-				children: ["/", c.name]
-			}), c.description && /* @__PURE__ */ jsx("span", {
-				className: "truncate text-xs text-(--theme-muted-text-color)",
-				children: c.description
-			})]
-		}, c.name))
+		className: "absolute bottom-full left-0 right-0 z-20 mb-2",
+		children: /* @__PURE__ */ jsx(ListboxPanel, {
+			listProps: menu.list.listProps,
+			"aria-label": label,
+			children: menu.matches.map((c, i) => {
+				const option = menu.list.optionProps(i);
+				return /* @__PURE__ */ jsx(ListboxOption, {
+					option: {
+						...option,
+						onClick: () => onChoose(c.name)
+					},
+					inline: true,
+					label: /* @__PURE__ */ jsxs("span", {
+						className: "font-mono",
+						children: ["/", c.name]
+					}),
+					description: c.description
+				}, c.name);
+			})
+		})
 	});
 }
 //#endregion

package/dist/ai/components/agent/ActivityLine.js

@@ -4,8 +4,8 @@ import { Loader } from "../../../components/Loader.js";
 import { formatCount, formatDuration } from "../../../format.js";
 import { useElapsed } from "../../../components/relativeTime.js";
 import { useChatConfig } from "../../core/config.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/agent/ActivityLine.tsx
 function randomIndex() {
 	return Math.floor(Math.random() * 1e6);

package/dist/ai/components/agent/AgentMessageParts.js

@@ -17,14 +17,14 @@ import { useChatConfig } from "../../core/config.js";
 import Markdown from "../../ui/Markdown.js";
 import { chatProseClasses } from "../../ui/prose.js";
 import { Reasoning, ReasoningBody } from "../Reasoning.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo, useEffect, useId, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { DateTime } from "luxon";
 //#region src/ai/components/agent/AgentMessageParts.tsx
 var COLLAPSED_RESULT_LINES = 12;
 function LineSpans({ text, tokens, emphasis }) {
 	const pieces = tokens ?? [{ content: text }];
-	if (!emphasis || emphasis.length === 0) return /* @__PURE__ */ jsx(Fragment, { children: pieces.map((t, i) => /* @__PURE__ */ jsx("span", {
+	if (!emphasis || emphasis.length === 0) return /* @__PURE__ */ jsx(Fragment$1, { children: pieces.map((t, i) => /* @__PURE__ */ jsx("span", {
 		style: t.color ? { color: t.color } : void 0,
 		children: t.content
 	}, i)) });
@@ -47,7 +47,7 @@ function LineSpans({ text, tokens, emphasis }) {
 		}
 		offset += t.content.length;
 	}
-	return /* @__PURE__ */ jsx(Fragment, { children: out });
+	return /* @__PURE__ */ jsx(Fragment$1, { children: out });
 }
 function DiffRows({ rows, lang }) {
 	const [tokens, setTokens] = useState(null);
@@ -188,7 +188,7 @@ function ResultBody({ part }) {
 /** A status mark, which color alone tells apart, with its status in words for
 *  a screen reader. */
 function StatusMark({ status, children }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
 		className: "contents",
 		children
@@ -262,7 +262,7 @@ function ToolCallBlock({ part, children }) {
 				onOpenChange: setExpanded,
 				disabled: isDiff,
 				summaryClassName: rowSummaryClasses,
-				summary: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ToolStatusDot, { part }), /* @__PURE__ */ jsxs("span", {
+				summary: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ToolStatusDot, { part }), /* @__PURE__ */ jsxs("span", {
 					className: "font-mono text-[13px] leading-5 min-w-0 truncate",
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "font-semibold",
@@ -320,14 +320,14 @@ function DecisionLine({ decision }) {
 			className: "flex min-w-0 flex-wrap items-baseline gap-x-1",
 			children: [
 				/* @__PURE__ */ jsx("span", { children: decisionLabel(decision, strings.agentTranscript) }),
-				decision.at && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				decision.at && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 					"aria-hidden": "true",
 					children: "·"
 				}), /* @__PURE__ */ jsx(RelativeTime, {
 					value: decision.at,
 					className: "shrink-0"
 				})] }),
-				decision.note && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				decision.note && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 					"aria-hidden": "true",
 					children: "·"
 				}), /* @__PURE__ */ jsx("span", {
@@ -362,7 +362,7 @@ function SubagentCard({ part }) {
 			onOpenChange: setExpanded,
 			disabled: !canExpand,
 			summaryClassName: rowSummaryClasses,
-			summary: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(StatusMark, {
+			summary: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(StatusMark, {
 				status: part.status === "running" ? t.running : part.status === "failed" ? t.failed : t.done,
 				children: part.status === "running" ? /* @__PURE__ */ jsx("span", {
 					className: "mt-[3px]",
@@ -437,7 +437,7 @@ function ConfirmApproval({ part, onAnswer }) {
 		path: [t.allowPath, t.denyPath],
 		call: [t.allowCall, t.denyCall]
 	}[part.subject ?? "command"];
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		part.command && /* @__PURE__ */ jsx("pre", {
 			className: "overflow-x-auto rounded-md bg-(--theme-muted-panel-bg) p-2 font-mono text-xs whitespace-pre-wrap",
 			children: part.command
@@ -525,7 +525,7 @@ function AskApproval({ part, onAnswer }) {
 		kind: "ask",
 		text
 	});
-	if (!onAnswer) return /* @__PURE__ */ jsxs(Fragment, { children: [
+	if (!onAnswer) return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		part.question && /* @__PURE__ */ jsx("div", {
 			className: "text-sm",
 			children: part.question
@@ -542,7 +542,7 @@ function AskApproval({ part, onAnswer }) {
 			children: t.approvalPending
 		})
 	] });
-	return /* @__PURE__ */ jsxs(Fragment, { children: [part.question && /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [part.question && /* @__PURE__ */ jsx("div", {
 		className: "text-sm",
 		children: part.question
 	}), own === null ? /* @__PURE__ */ jsxs("div", {
@@ -617,7 +617,7 @@ function ApprovalBlock({ part, onApprovalAnswer }) {
 function PlanApproval({ part }) {
 	const { strings } = useChatConfig();
 	const t = strings.agentTranscript;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 		className: "text-xs theme-muted-text",
 		children: t.planPending
 	}), part.plan && /* @__PURE__ */ jsx("div", {
@@ -877,7 +877,7 @@ function RollupGroup({ members, message }) {
 		children: /* @__PURE__ */ jsx(Disclosure, {
 			keepMounted: true,
 			summaryClassName: rowSummaryClasses,
-			summary: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			summary: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 				className: "text-(--theme-success) leading-none",
 				"aria-hidden": "true",
 				children: "●"