@parallelworks/ui 0.40.1 → 0.42.0

package/dist/ai/core/parts.js

@@ -90,6 +90,33 @@ function applyPartDelta(parts, delta) {
 function isStreamedText(part) {
 	return part?.kind === "text" || part?.kind === "reasoning";
 }
+/** The wire history for an assistant turn whose tool calls the gateway ran:
+*  the calls, each result, then the answer. A turn with no finished tool
+*  calls comes back as the answer alone. */
+function toolTurnMessages(parts, answer) {
+	const calls = (parts ?? []).filter((p) => p.kind === "tool_call" && p.status !== "running" && p.result !== void 0);
+	if (calls.length === 0) return [answer];
+	return [
+		{
+			role: "assistant",
+			content: null,
+			tool_calls: calls.map((c) => ({
+				id: c.id,
+				type: "function",
+				function: {
+					name: c.name,
+					arguments: c.args
+				}
+			}))
+		},
+		...calls.map((c) => ({
+			role: "tool",
+			tool_call_id: c.id,
+			content: c.result
+		})),
+		...answer.content ? [answer] : []
+	];
+}
 /** A turn can end (completed or stopped) with tool calls still marked
 *  running — the transport died before their tool_end arrived. A stored
 *  message must not spin forever, so close them out as interrupted. */
@@ -101,4 +128,4 @@ function finalizeParts(parts) {
 	} : p);
 }
 //#endregion
-export { applyPartDelta, finalizeParts };
+export { applyPartDelta, finalizeParts, toolTurnMessages };

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

@@ -1,2 +1,9 @@
+import type { ChatStrings } from '../strings.js';
 import type { ChatModel, ProviderIssue } from '../types.js';
 export declare function providerIssueFor(issues: ProviderIssue[], model: Pick<ChatModel, 'provider_name' | 'provider_owner'> | undefined): ProviderIssue | undefined;
+type IssueStrings = ChatStrings['providerIssue'];
+/** A short name for what went wrong, such as beside the provider's heading. */
+export declare function issueLabel(t: IssueStrings, issue: ProviderIssue): string;
+/** What went wrong and what to do about it: the provider's own message when it sent one. */
+export declare function issueDetail(t: IssueStrings, issue: ProviderIssue): string;
+export {};

package/dist/ai/core/providerIssues.js

@@ -3,5 +3,13 @@ function providerIssueFor(issues, model) {
 	if (!model?.provider_name) return;
 	return issues.find((issue) => issue.provider_name === model.provider_name && (issue.provider_owner ?? "") === (model.provider_owner ?? ""));
 }
+/** A short name for what went wrong, such as beside the provider's heading. */
+function issueLabel(t, issue) {
+	return issue.status === "unauthorized" ? t.keyRejected : t.unreachable;
+}
+/** What went wrong and what to do about it: the provider's own message when it sent one. */
+function issueDetail(t, issue) {
+	return issue.message || (issue.status === "unauthorized" ? t.keyRejectedHint : t.unreachableHint);
+}
 //#endregion
-export { providerIssueFor };
+export { issueDetail, issueLabel, providerIssueFor };

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

@@ -11,4 +11,8 @@ export declare function useKeyboardShortcuts(options?: UseKeyboardShortcutsOptio
     handleCopyLastResponse: () => Promise<void>;
     handleStopGeneration: () => void;
 };
+/** Escape pressed in a dialog, a drawer, a menu or an open list closes that
+ *  layer and nothing else. Those layers dismiss from a listener on the
+ *  document too, so stopping propagation can't keep the event from here. */
+export declare function escapeClosesLayer(target: EventTarget | null): boolean;
 export {};

package/dist/ai/core/useKeyboardShortcuts.js

@@ -36,7 +36,7 @@ function useKeyboardShortcuts(options = {}) {
 		const handleKeyDown = (e) => {
 			const cmdKey = isMac() ? e.metaKey : e.ctrlKey;
 			if (e.key === "Escape") {
-				handleStopGeneration();
+				if (!escapeClosesLayer(e.target)) handleStopGeneration();
 				return;
 			}
 			if (cmdKey && e.shiftKey && e.key === "O") {
@@ -71,5 +71,11 @@ function useKeyboardShortcuts(options = {}) {
 		handleStopGeneration
 	};
 }
+/** Escape pressed in a dialog, a drawer, a menu or an open list closes that
+*  layer and nothing else. Those layers dismiss from a listener on the
+*  document too, so stopping propagation can't keep the event from here. */
+function escapeClosesLayer(target) {
+	return target instanceof Element && (target.matches("[aria-expanded=\"true\"]") || !!target.closest("[role=\"dialog\"], [role=\"alertdialog\"], [role=\"menu\"]"));
+}
 //#endregion
-export { lastAssistantContent, lastUserMessage, useKeyboardShortcuts };
+export { escapeClosesLayer, lastAssistantContent, lastUserMessage, useKeyboardShortcuts };

package/dist/ai/index.d.ts

@@ -41,7 +41,6 @@ export { useKeyboardShortcuts } from './core/useKeyboardShortcuts.js';
 export { type ChatStrings, defaultChatStrings } from './strings.js';
 export * from './types.js';
 export { ConversationSidebar, type ConversationSidebarGroup, useResizableSidebarWidth, } from './ui/ConversationSidebar.js';
-export { type DropdownOption, default as Dropdown } from './ui/Dropdown.js';
 export { NoticeBar, NoticeCard, type NoticeTone, OutputCard } from './ui/Notice.js';
 export { RenameDialog, type RowDialogStrings, SidebarDrawer, SidebarGroupHeading, SidebarPanel, SidebarPlaceholder, SidebarRailItem, SidebarRow, SidebarRowTitle, SidebarToggle, useRowDialogs, } from './ui/sidebar.js';
 export { formatFileSize, isMac, isOrgModel } from './utils.js';

package/dist/ai/index.js

@@ -12,7 +12,6 @@ import { defaultChatStrings } from "./strings.js";
 import { resolveChatConfig, useChatConfig } from "./core/config.js";
 import { providerIssueFor } from "./core/providerIssues.js";
 import { ChatProvider, useChat } from "./core/ChatProvider.js";
-import Dropdown from "./ui/Dropdown.js";
 import { formatFileSize, isMac, isOrgModel } from "./utils.js";
 import AllocationSelector from "./components/AllocationSelector.js";
 import AttachmentManager from "./components/AttachmentManager.js";
@@ -46,4 +45,4 @@ import ChatLayout, { CHAT_COLUMN_SCOPE, ConversationLayout, DRAWER_BELOW_PX } fr
 import ChatMessage_default from "./components/ChatMessage.js";
 import ChatMessageList from "./components/ChatMessageList.js";
 import ChatThread from "./components/ChatThread.js";
-export { AGENT_COLOR_NAMES, ActivityLine, AgentMessageParts, AllocationSelector, ApprovalBlock, AttachmentManager, AttachmentUpload, BlockedGroupBanner, BranchNavigator, CHAT_COLUMN_SCOPE, ChatAdapterError, ChatEmptyState, ChatInput, ChatLayout, ChatMessageList, ChatMessage_default as ChatMessageView, ChatProvider, ChatSidebar, ChatStage, ChatThread, ComposerContext, ComposerControls, ComposerSettings, ComposerUsage, ConnectToolsLink, ConversationLayout, ConversationSidebar, DEFAULT_PERMISSION_MODE, DRAWER_BELOW_PX, DragOverlay, Dropdown, FOCUS_SIDEBAR_SEARCH_EVENT, INTERRUPTED_NOTICE, KeyboardShortcutsProvider, MAX_EDIT_DIFF_LINES, MAX_WRITE_DIFF_LINES, ManageProvidersLink, ModelSelector, NAMED_PERMISSION_MODES, NoticeBar, NoticeCard, OutputCard, PermissionPicker, ProviderIssueBanner, RenameDialog, ShareButton, ShareDialog, SidebarDrawer, SidebarGroupHeading, SidebarPanel, SidebarPlaceholder, SidebarRailItem, SidebarRow, SidebarRowTitle, SidebarToggle, agentColorHex, agentTypeLabel, applyPartDelta, askQuestionFromArgs, bashExitCode, chatReducer, clampPermissionMode, classifyPseudoUserMessage, clip, compactCount, computeEditDiff, computeWriteRows, defaultChatStrings, durationToAbsHumanDuration, editSummary, finalizeParts, firstNonEmptyLine, formatElapsed, formatFileSize, fullToolArgs, getGreeting, getProviderKeyFromModelId, groupConversationsByDate, hiddenTranscriptTool, initialState, interruptionNotice, isEditDiffTool, isGroupableTool, isMac, isNamedPermissionMode, isOrgModel, languageForPath, lineDelta, parseEditArgs, parseSubagentNotice, pasteInlineMaxBytes, permissionModesUpTo, planFromArgs, plural, providerIssueFor, resolveChatConfig, resultFailed, rollupSentence, sanitizeLabel, sanitizePanelText, slashMatches, subagentDeliveryLine, summarizeToolArgs, taskCallFromArgs, thinkingHeading, tokenizeDiffLines, toolHeaderFor, toolSummary, useChat, useChatConfig, useConversationActions, useDragDrop, useKeyboardShortcuts, useResizableSidebarWidth, useRowDialogs, wordEmphasisRanges };
+export { AGENT_COLOR_NAMES, ActivityLine, AgentMessageParts, AllocationSelector, ApprovalBlock, AttachmentManager, AttachmentUpload, BlockedGroupBanner, BranchNavigator, CHAT_COLUMN_SCOPE, ChatAdapterError, ChatEmptyState, ChatInput, ChatLayout, ChatMessageList, ChatMessage_default as ChatMessageView, ChatProvider, ChatSidebar, ChatStage, ChatThread, ComposerContext, ComposerControls, ComposerSettings, ComposerUsage, ConnectToolsLink, ConversationLayout, ConversationSidebar, DEFAULT_PERMISSION_MODE, DRAWER_BELOW_PX, DragOverlay, FOCUS_SIDEBAR_SEARCH_EVENT, INTERRUPTED_NOTICE, KeyboardShortcutsProvider, MAX_EDIT_DIFF_LINES, MAX_WRITE_DIFF_LINES, ManageProvidersLink, ModelSelector, NAMED_PERMISSION_MODES, NoticeBar, NoticeCard, OutputCard, PermissionPicker, ProviderIssueBanner, RenameDialog, ShareButton, ShareDialog, SidebarDrawer, SidebarGroupHeading, SidebarPanel, SidebarPlaceholder, SidebarRailItem, SidebarRow, SidebarRowTitle, SidebarToggle, agentColorHex, agentTypeLabel, applyPartDelta, askQuestionFromArgs, bashExitCode, chatReducer, clampPermissionMode, classifyPseudoUserMessage, clip, compactCount, computeEditDiff, computeWriteRows, defaultChatStrings, durationToAbsHumanDuration, editSummary, finalizeParts, firstNonEmptyLine, formatElapsed, formatFileSize, fullToolArgs, getGreeting, getProviderKeyFromModelId, groupConversationsByDate, hiddenTranscriptTool, initialState, interruptionNotice, isEditDiffTool, isGroupableTool, isMac, isNamedPermissionMode, isOrgModel, languageForPath, lineDelta, parseEditArgs, parseSubagentNotice, pasteInlineMaxBytes, permissionModesUpTo, planFromArgs, plural, providerIssueFor, resolveChatConfig, resultFailed, rollupSentence, sanitizeLabel, sanitizePanelText, slashMatches, subagentDeliveryLine, summarizeToolArgs, taskCallFromArgs, thinkingHeading, tokenizeDiffLines, toolHeaderFor, toolSummary, useChat, useChatConfig, useConversationActions, useDragDrop, useKeyboardShortcuts, useResizableSidebarWidth, useRowDialogs, wordEmphasisRanges };

package/dist/ai/strings.d.ts

@@ -34,8 +34,27 @@ export interface ChatStrings {
         bannerUnreachable: (provider: string) => string;
     };
     modelPicker: {
+        /** Names the picker for assistive technology. */
+        choose: string;
+        select: string;
+        search: string;
+        loading: string;
+        failed: string;
+        retry: string;
+        none: string;
         /** Beside a provider another user registered and shared with the reader. */
         sharedBy: (owner: string) => string;
+        /** Beside a session whose models are still loading. */
+        connecting: string;
+        /** Beside a session whose service did not answer. */
+        notResponding: string;
+        /** Links the provider's settings from its issue banner, for its owner. */
+        manageProvider: string;
+    };
+    allocationPicker: {
+        choose: string;
+        placeholder: string;
+        usage: (used: string, total: string) => string;
     };
     queue: {
         remove: string;

package/dist/ai/strings.js

@@ -47,7 +47,24 @@ var defaultChatStrings = {
 		bannerKeyRejected: (provider) => `API key rejected for \u201c${provider}\u201d`,
 		bannerUnreachable: (provider) => `\u201c${provider}\u201d is unreachable`
 	},
-	modelPicker: { sharedBy: (owner) => `Shared by ${owner}` },
+	modelPicker: {
+		choose: "Model",
+		select: "Select a model",
+		search: "Search models…",
+		loading: "Loading models…",
+		failed: "Failed to load models",
+		retry: "Retry",
+		none: "No models available",
+		sharedBy: (owner) => `Shared by ${owner}`,
+		connecting: "Connecting…",
+		notResponding: "Not responding",
+		manageProvider: "Manage provider"
+	},
+	allocationPicker: {
+		choose: "Allocation",
+		placeholder: "Select allocation",
+		usage: (used, total) => `${used} / ${total}`
+	},
 	activity: {
 		tokens: (input, output) => `↑${input} ↓${output} tokens`,
 		stop: "Stop"

package/dist/ai/ui/Avatar.js

@@ -1,22 +1,22 @@
 import { avatarInitials } from "../../components/Avatar.js";
-import cx from "classnames";
-import { useState } from "react";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
 //#region src/ai/ui/Avatar.tsx
 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;
 	return /* @__PURE__ */ jsx("div", {
-		className: cx("relative inline-flex", className),
+		className: clsx("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)", SIZE_CLASSES),
+			className: clsx("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", SIZE_CLASSES)
+			className: clsx("rounded-full object-cover", SIZE_CLASSES)
 		})
 	});
 }

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

@@ -43,7 +43,6 @@ export declare function ConversationSidebar<T>({ label, collapsed: collapsedProp
         open: boolean;
         onClose: () => void;
         label: string;
-        closeLabel: string;
     } | undefined;
     groups: ConversationSidebarGroup<T>[];
     getKey: (item: T) => string;

package/dist/ai/ui/ConversationSidebar.js

@@ -1,8 +1,8 @@
 import { positionKeys } from "../../components/keys.js";
 import { SidebarDrawer, SidebarGroupHeading, SidebarPanel, SidebarToggle } from "./sidebar.js";
-import cx from "classnames";
-import { Fragment, useEffect, useRef, useState } from "react";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, useEffect, useRef, useState } from "react";
 var SHARED_WIDTH_STORAGE_KEY = "aiChatSidebarWidth";
 function clampSidebarWidth(width) {
 	return Math.min(480, Math.max(200, width));
@@ -121,14 +121,14 @@ function ConversationSidebar({ label, collapsed: collapsedProp, onToggle, toggle
 					if (e.key === "ArrowLeft") sized.nudge(-16);
 					else if (e.key === "ArrowRight") sized.nudge(16);
 				},
-				className: cx("absolute inset-y-0 right-0 z-10 w-1 cursor-col-resize touch-none", sized.resizing ? "bg-(--theme-element)" : "hover:bg-(--theme-border)")
+				className: clsx("absolute inset-y-0 right-0 z-10 w-1 cursor-col-resize touch-none", sized.resizing ? "bg-(--theme-element)" : "hover:bg-(--theme-border)")
 			}),
 			top,
 			collapsed && rail ? /* @__PURE__ */ jsx("ul", {
 				className: "flex min-h-0 flex-1 flex-col items-center gap-1 overflow-y-auto py-1",
 				children: rail
 			}) : /* @__PURE__ */ jsx("div", {
-				className: cx("min-h-0 flex-1 overflow-y-auto px-2 pb-2 transition-opacity duration-200", collapsed ? "pointer-events-none opacity-0" : "opacity-100"),
+				className: clsx("min-h-0 flex-1 overflow-y-auto px-2 pb-2 transition-opacity duration-200", collapsed ? "pointer-events-none opacity-0" : "opacity-100"),
 				children: loading ? /* @__PURE__ */ jsx("div", {
 					className: "space-y-3 px-2 pt-2",
 					children: positionKeys(5, "skeleton").map((key, i) => /* @__PURE__ */ jsx("div", {
@@ -146,12 +146,12 @@ function ConversationSidebar({ label, collapsed: collapsedProp, onToggle, toggle
 						children: group.label
 					}), /* @__PURE__ */ jsx("ul", {
 						className: "space-y-0.5",
-						children: group.items.map((item) => /* @__PURE__ */ jsx(Fragment, { children: renderRow(item) }, getKey(item)))
+						children: group.items.map((item) => /* @__PURE__ */ jsx(Fragment$1, { children: renderRow(item) }, getKey(item)))
 					})]
 				}, group.key))
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: cx("flex shrink-0 items-center gap-1 p-1.5", collapsed ? "justify-center" : footer ? "justify-between" : "justify-end"),
+				className: clsx("flex shrink-0 items-center gap-1 p-1.5", collapsed ? "justify-center" : footer ? "justify-between" : "justify-end"),
 				children: [!collapsed && footer, /* @__PURE__ */ jsx(SidebarToggle, {
 					collapsed,
 					onToggle,
@@ -166,7 +166,6 @@ function ConversationSidebar({ label, collapsed: collapsedProp, onToggle, toggle
 		open: drawer.open,
 		onClose: drawer.onClose,
 		label: drawer.label,
-		closeLabel: drawer.closeLabel,
 		children: panel
 	}) : panel;
 }

package/dist/ai/ui/Markdown.js

@@ -1,8 +1,8 @@
 import { useChatConfig } from "../core/config.js";
 import { rehypeCodeBreaks } from "./codeBreaks.js";
-import cx from "classnames";
-import { useEffect, useState } from "react";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 import { code } from "@streamdown/code";
 import { math } from "@streamdown/math";
 import { Streamdown, defaultRehypePlugins } from "streamdown";
@@ -67,7 +67,7 @@ function Markdown({ children, isStreaming }) {
 			components: {
 				a: ({ node, ...props }) => /* @__PURE__ */ jsx("a", {
 					...props,
-					className: cx("link wrap-break-word", props.className),
+					className: clsx("link wrap-break-word", props.className),
 					target: "_blank",
 					rel: "noopener noreferrer"
 				}),

package/dist/ai/ui/Notice.js

@@ -1,7 +1,7 @@
 import { FiAlertCircle } from "../../icons/fi/FiAlertCircle.js";
 import { IoMdClose } from "../../icons/io/IoMdClose.js";
 import { IoInformationCircleOutline } from "../../icons/io5/IoInformationCircleOutline.js";
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/ui/Notice.tsx
 var barTone = {
@@ -34,13 +34,13 @@ function NoticeBar({ tone, title, children, action, onAction, testId }) {
 	const Icon = tone === "danger" || tone === "warning" ? FiAlertCircle : IoInformationCircleOutline;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-testid": testId,
-		className: cx("flex shrink-0 items-start gap-3 border-b px-6 py-3", barTone[tone]),
+		className: clsx("flex shrink-0 items-start gap-3 border-b px-6 py-3", barTone[tone]),
 		children: [
-			/* @__PURE__ */ jsx(Icon, { className: cx("mt-0.5 h-4 w-4 shrink-0", iconTone[tone]) }),
+			/* @__PURE__ */ jsx(Icon, { className: clsx("mt-0.5 h-4 w-4 shrink-0", iconTone[tone]) }),
 			/* @__PURE__ */ jsxs("div", {
 				className: "min-w-0 flex-1",
 				children: [/* @__PURE__ */ jsx("p", {
-					className: cx("text-sm font-medium", titleTone[tone]),
+					className: clsx("text-sm font-medium", titleTone[tone]),
 					children: title
 				}), children && /* @__PURE__ */ jsx("p", {
 					className: "mt-0.5 text-xs theme-muted-text",
@@ -64,7 +64,7 @@ function OutputCard({ title, text, onDismiss, dismissLabel, testId }) {
 		className: "relative my-3 rounded-lg border theme-border theme-muted-panel px-3 py-2",
 		children: [
 			/* @__PURE__ */ jsx("p", {
-				className: cx("font-mono text-[11px] theme-muted-text", onDismiss && "pr-6"),
+				className: clsx("font-mono text-[11px] theme-muted-text", onDismiss && "pr-6"),
 				children: title
 			}),
 			/* @__PURE__ */ jsx("pre", {
@@ -87,7 +87,7 @@ function OutputCard({ title, text, onDismiss, dismissLabel, testId }) {
 function NoticeCard({ tone = "neutral", children, onDismiss, dismissLabel, testId }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-testid": testId,
-		className: cx("flex items-start gap-2 rounded-lg border px-3 py-2 text-xs", cardTone[tone]),
+		className: clsx("flex items-start gap-2 rounded-lg border px-3 py-2 text-xs", cardTone[tone]),
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "flex-1",
 			children

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

@@ -0,0 +1,4 @@
+/** A picker under the composer, beside send. */
+export declare const chipClassName = "inline-flex min-w-0 items-center cursor-pointer outline-none transition-colors theme-muted-text hover:theme-text focus-visible:ring-1 focus-visible:ring-(--theme-element) disabled:cursor-not-allowed disabled:opacity-50 h-8 max-w-[280px] gap-1.5 rounded-full px-2.5 text-[13px] hover:chat-tint";
+/** A smaller picker for secondary settings, such as the agent's permissions. */
+export declare const smallChipClassName = "inline-flex min-w-0 items-center cursor-pointer outline-none transition-colors theme-muted-text hover:theme-text focus-visible:ring-1 focus-visible:ring-(--theme-element) disabled:cursor-not-allowed disabled:opacity-50 gap-1 rounded-md px-1.5 py-0.5 text-[11px] hover:theme-muted-panel";

package/dist/ai/ui/chip.js

@@ -0,0 +1,8 @@
+//#region src/ai/ui/chip.ts
+var chipBase = "inline-flex min-w-0 items-center cursor-pointer outline-none transition-colors theme-muted-text hover:theme-text focus-visible:ring-1 focus-visible:ring-(--theme-element) disabled:cursor-not-allowed disabled:opacity-50";
+/** A picker under the composer, beside send. */
+var chipClassName = `${chipBase} h-8 max-w-[280px] gap-1.5 rounded-full px-2.5 text-[13px] hover:chat-tint`;
+/** A smaller picker for secondary settings, such as the agent's permissions. */
+var smallChipClassName = `${chipBase} gap-1 rounded-md px-1.5 py-0.5 text-[11px] hover:theme-muted-panel`;
+//#endregion
+export { chipClassName, smallChipClassName };

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

@@ -1,5 +1,6 @@
 import { type CSSProperties, type ReactNode } from 'react';
-import { type OpenMenu, type RowMenuItem } from '../../list/index.js';
+import type { OpenMenu } from '../../components/ContextMenu.js';
+import type { MenuEntry } from '../../components/MenuEntries.js';
 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. */
@@ -16,12 +17,12 @@ export declare function SidebarPanel({ collapsed, width, railWidth, resizing, la
 /** The list over the content of a layout too narrow to keep it beside the
  *  content. Place it in a positioned container: the drawer covers that
  *  container, not the window, so an embedded chat keeps to its own panel.
- *  Tapping outside or Escape closes it, and focus returns where it was. */
-export declare function SidebarDrawer({ open, onClose, label, closeLabel, children, }: {
+ *  A tap outside, Escape or a swipe to the left closes it, and focus returns
+ *  where it was. */
+export declare function SidebarDrawer({ open, onClose, label, children, }: {
     open: boolean;
     onClose: () => void;
     label: string;
-    closeLabel: string;
     children: ReactNode;
 }): import("react").JSX.Element;
 export declare function SidebarToggle({ collapsed, onToggle, openLabel, closeLabel, className, }: {
@@ -53,7 +54,7 @@ export declare function SidebarRowTitle({ children, time, }: {
  *  while its menu is up, and the menu opens from its button or a right-click. */
 export declare function SidebarRow({ selected, menuItems, openMenu, className, children, }: {
     selected: boolean;
-    menuItems: RowMenuItem[];
+    menuItems: MenuEntry[];
     openMenu: OpenMenu;
     className?: string;
     children: ReactNode;

package/dist/ai/ui/sidebar.js

@@ -1,10 +1,11 @@
 import { TbLayoutSidebar } from "../../icons/tb/TbLayoutSidebar.js";
 import { ConfirmModal } from "../../components/ConfirmModal.js";
+import { MoreButton, rowContextMenuProps, useRowMenuActive } from "../../list/rowMenu.js";
 import { focusOnMount } from "../../components/focus.js";
-import { MoreButton, rowContextMenuProps, useRowMenuActive } from "../../list/RowContextMenu.js";
-import cx from "classnames";
-import { useEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Drawer } from "@base-ui/react/drawer";
 //#region src/ai/ui/sidebar.tsx
 var SIDEBAR_RAIL_WIDTH_PX = 48;
 var HIGHLIGHT_SELECTED = "bg-[color-mix(in_oklab,var(--theme-accent)_12%,transparent)]";
@@ -14,7 +15,7 @@ var HIGHLIGHT_HOVER = "hover:bg-[color-mix(in_oklab,var(--theme-panel)_5%,transp
 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),
+		className: clsx("relative h-full flex shrink-0 flex-col bg-(--theme-muted-panel-bg) overflow-hidden", !resizing && "transition-[width] duration-300 ease-in-out", className),
 		style: {
 			width: collapsed ? railWidth : width,
 			...style
@@ -25,37 +26,32 @@ function SidebarPanel({ collapsed, width = 256, railWidth = SIDEBAR_RAIL_WIDTH_P
 /** The list over the content of a layout too narrow to keep it beside the
 *  content. Place it in a positioned container: the drawer covers that
 *  container, not the window, so an embedded chat keeps to its own panel.
-*  Tapping outside or Escape closes it, and focus returns where it was. */
-function SidebarDrawer({ open, onClose, label, closeLabel, children }) {
-	const panelRef = useRef(null);
-	useEffect(() => {
-		if (!open) return;
-		const returnTo = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-		panelRef.current?.focus();
-		return () => returnTo?.focus();
-	}, [open]);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
-		type: "button",
-		tabIndex: -1,
-		"aria-label": closeLabel,
-		onClick: onClose,
-		className: cx("absolute inset-0 z-20 bg-black/40 transition-opacity duration-300", open ? "opacity-100" : "pointer-events-none opacity-0")
-	}), /* @__PURE__ */ jsx("div", {
-		ref: panelRef,
-		role: "dialog",
-		"aria-modal": "true",
-		"aria-label": label,
-		tabIndex: -1,
-		inert: !open,
-		onKeyDown: (e) => {
-			if (e.key === "Escape") {
-				e.stopPropagation();
-				onClose();
-			}
-		},
-		className: cx("absolute inset-y-0 left-0 z-30 flex w-[min(20rem,85%)] shadow-xl transition-transform duration-300 ease-in-out focus:outline-none", open ? "translate-x-0" : "-translate-x-full"),
-		children
-	})] });
+*  A tap outside, Escape or a swipe to the left closes it, and focus returns
+*  where it was. */
+function SidebarDrawer({ open, onClose, label, children }) {
+	const container = useRef(null);
+	return /* @__PURE__ */ jsxs(Drawer.Root, {
+		open,
+		onOpenChange: (next) => !next && onClose(),
+		swipeDirection: "left",
+		modal: "trap-focus",
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: container,
+			className: "contents"
+		}), /* @__PURE__ */ jsxs(Drawer.Portal, {
+			container,
+			keepMounted: true,
+			className: "contents",
+			children: [/* @__PURE__ */ jsx(Drawer.Backdrop, { className: "absolute inset-0 z-20 bg-black/40 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0" }), /* @__PURE__ */ jsx(Drawer.Viewport, {
+				className: "absolute inset-y-0 left-0 z-30 flex w-[min(20rem,85%)]",
+				children: /* @__PURE__ */ jsx(Drawer.Popup, {
+					"aria-label": label,
+					className: "flex w-full shadow-xl outline-none [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-300 ease-in-out data-ending-style:[transform:translateX(-100%)] data-starting-style:[transform:translateX(-100%)] data-swiping:select-none data-swiping:duration-0",
+					children
+				})
+			})]
+		})]
+	});
 }
 function SidebarToggle({ collapsed, onToggle, openLabel, closeLabel, className }) {
 	const label = collapsed ? openLabel : closeLabel;
@@ -65,14 +61,14 @@ function SidebarToggle({ collapsed, onToggle, openLabel, closeLabel, className }
 		title: label,
 		"aria-label": label,
 		"aria-expanded": !collapsed,
-		className: cx("flex h-7 w-7 items-center justify-center rounded-md theme-muted-text transition-colors hover:theme-muted-panel hover:theme-text", className),
+		className: clsx("flex h-7 w-7 items-center justify-center rounded-md theme-muted-text transition-colors hover:theme-muted-panel hover:theme-text", className),
 		children: /* @__PURE__ */ jsx(TbLayoutSidebar, { className: "h-4 w-4" })
 	});
 }
 function SidebarGroupHeading({ children, tone = "default", testId }) {
 	return /* @__PURE__ */ jsx("h4", {
 		"data-testid": testId,
-		className: cx("mt-5 mb-1 whitespace-nowrap px-2 text-xs font-medium", tone === "attention" ? "text-amber-700 dark:text-amber-300" : "theme-muted-text"),
+		className: clsx("mt-5 mb-1 whitespace-nowrap px-2 text-xs font-medium", tone === "attention" ? "text-amber-700 dark:text-amber-300" : "theme-muted-text"),
 		children
 	});
 }
@@ -104,11 +100,11 @@ function SidebarRowTitle({ children, time }) {
 function SidebarRow({ selected, menuItems, openMenu, className, children }) {
 	const { active, openMenu: openRowMenu } = useRowMenuActive(openMenu);
 	return /* @__PURE__ */ jsxs("li", {
-		className: cx("group relative flex items-center justify-between rounded-lg px-2 py-[3px] transition-colors duration-150", selected || active ? HIGHLIGHT_SELECTED : HIGHLIGHT_HOVER, className),
+		className: clsx("group relative flex items-center justify-between rounded-lg px-2 py-[3px] transition-colors duration-150", selected || active ? HIGHLIGHT_SELECTED : HIGHLIGHT_HOVER, className),
 		...rowContextMenuProps(openRowMenu, menuItems),
 		children: [children, /* @__PURE__ */ jsx(MoreButton, {
-			active,
-			onOpen: (x, y) => openRowMenu(x, y, menuItems)
+			open: active,
+			onOpen: (button) => openRowMenu(button, menuItems)
 		})]
 	});
 }
@@ -122,7 +118,7 @@ function SidebarRailItem({ selected, label, onSelect, testId, tooltipProps, chil
 		"aria-current": selected ? "page" : void 0,
 		onClick: onSelect,
 		...tooltipProps,
-		className: cx("flex h-7 w-7 items-center justify-center rounded-md transition-colors", HIGHLIGHT_HOVER, selected && HIGHLIGHT_SELECTED),
+		className: clsx("flex h-7 w-7 items-center justify-center rounded-md transition-colors", HIGHLIGHT_HOVER, selected && HIGHLIGHT_SELECTED),
 		children
 	}) });
 }
@@ -181,7 +177,7 @@ function useRowDialogs({ strings, nameOf, onDelete, onRename }) {
 			setName(nameOf(item));
 			setToRename(item);
 		},
-		dialogs: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ConfirmModal, {
+		dialogs: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ConfirmModal, {
 			open: toDelete !== null,
 			onClose: () => setToDelete(null),
 			align: "center",

package/dist/components/ActionMenu.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import { type MenuEntry, type MenuSearch } from './MenuEntries.js';
+/** A trigger that opens a menu, such as a header's "New" or "…" button. */
+export declare function ActionMenu({ items, label, search, align, triggerClassName, children, }: {
+    items: MenuEntry[];
+    /** Names the trigger, which usually shows only an icon, and labels its tooltip. */
+    label: string;
+    search?: MenuSearch | undefined;
+    align?: 'start' | 'center' | 'end';
+    triggerClassName?: string | undefined;
+    /** The trigger's content. */
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/ActionMenu.js

@@ -0,0 +1,30 @@
+import { MenuPopup } from "./Menu.js";
+import { Tooltip } from "./Tooltip.js";
+import { MenuEntries, MenuFilter } from "./MenuEntries.js";
+import { Menu } from "@base-ui/react/menu";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ActionMenu.tsx
+/** A trigger that opens a menu, such as a header's "New" or "…" button. */
+function ActionMenu({ items, label, search, align, triggerClassName, children }) {
+	return /* @__PURE__ */ jsx(MenuFilter, {
+		search,
+		children: (query) => /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(Tooltip, {
+			content: label,
+			children: /* @__PURE__ */ jsx(Menu.Trigger, {
+				"aria-label": label,
+				className: triggerClassName,
+				children
+			})
+		}), /* @__PURE__ */ jsx(MenuPopup, {
+			align,
+			className: "min-w-52",
+			children: /* @__PURE__ */ jsx(MenuEntries, {
+				entries: items,
+				search,
+				query
+			})
+		})] })
+	});
+}
+//#endregion
+export { ActionMenu };

package/dist/components/Avatar.js

@@ -1,7 +1,7 @@
 import { useStrings } from "./Provider.js";
-import cx from "classnames";
-import { useState } from "react";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 //#region src/components/Avatar.tsx
 var SIZE_CLASSES = {
 	xs: "w-4 h-4 text-[9px]",
@@ -30,19 +30,19 @@ function Avatar({ src, name, size = "md", status, className }) {
 	const [erroredUrl, setErroredUrl] = useState(null);
 	const showImage = !!src && erroredUrl !== src;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx("relative inline-flex", className),
+		className: clsx("relative inline-flex", className),
 		children: [showImage ? /* @__PURE__ */ jsx("img", {
 			src,
 			alt: name || strings.common.userAvatar,
 			loading: "lazy",
 			onError: () => setErroredUrl(src),
-			className: cx("rounded-full object-cover", SIZE_CLASSES[size])
+			className: clsx("rounded-full object-cover", SIZE_CLASSES[size])
 		}) : /* @__PURE__ */ jsx("div", {
-			className: cx("rounded-full flex items-center justify-center font-medium", "bg-gradient-to-br from-[var(--gradient-start,var(--theme-element))] to-[var(--gradient-mid,var(--theme-link))] text-white", SIZE_CLASSES[size]),
+			className: clsx("rounded-full flex items-center justify-center font-medium", "bg-gradient-to-br from-[var(--gradient-start,var(--theme-element))] to-[var(--gradient-mid,var(--theme-link))] text-white", SIZE_CLASSES[size]),
 			children: size === "xs" ? avatarInitials(name).charAt(0) : avatarInitials(name)
 		}), status && /* @__PURE__ */ jsx("span", {
 			"data-testid": "online-indicator",
-			className: cx("absolute bottom-0 right-0 block rounded-full ring-2 ring-(--theme-app-bg)", STATUS_CLASSES[status], size === "xs" || size === "sm" ? "w-1.5 h-1.5" : "w-2.5 h-2.5")
+			className: clsx("absolute bottom-0 right-0 block rounded-full ring-2 ring-(--theme-app-bg)", STATUS_CLASSES[status], size === "xs" || size === "sm" ? "w-1.5 h-1.5" : "w-2.5 h-2.5")
 		})]
 	});
 }

package/dist/components/Breadcrumbs.js

@@ -1,5 +1,5 @@
-import React, { createContext, useContext, useEffect, useLayoutEffect, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
+import React, { createContext, useContext, useEffect, useLayoutEffect, useMemo } from "react";
 //#region src/components/Breadcrumbs.tsx
 var BreadcrumbContext = createContext({
 	breadcrumbs: [],