@parallelworks/ui 0.41.0 → 0.42.0

package/README.md

@@ -176,6 +176,31 @@ animations) and streamdown's classes next to the theme contract:
 
 The prebuilt `@parallelworks/ui/styles.css` already includes both.
 
+## Form state
+
+`DynamicForm` keeps its values in react-hook-form, a peer dependency, so the
+host and the library share one instance. A host that reads or drives the form
+creates it and passes it in:
+
+```tsx
+const form = useForm()
+const { isDirty } = useFormState({ control: form.control })
+
+<DynamicForm form={form} formJSONs={inputs} initialValues={saved} />
+```
+
+`form.getValues()`, `form.reset()` and `formState.isDirty` then work as
+react-hook-form documents them. Without `form`, the form keeps its own;
+`onValuesChange` reports each change either way. `missingFields` marks fields
+as `required` errors.
+
+Each field subscribes only to what it reads, so typing renders the edited
+field and whatever reads it, not the whole form. A host field component,
+passed through `fields` or `slots.formFields`, binds the same way: its own
+value with `useFieldValue(field.name)` (or `useController`), another input's
+with `useFieldAt(path)` or `useWatch`, and a pick from a list with
+`useChoiceField`, which applies `autoselect` and `secondaryField`.
+
 ## Form layouts
 
 `DynamicForm` accepts an optional `$meta.layout` in `formJSONs`. A layout arranges

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

@@ -1,4 +1,3 @@
-export default function AllocationSelector({ variant, }?: {
-    /** 'bare' drops the border, for a toolbar that reads as text. */
-    variant?: 'default' | 'bare';
-}): import("react").JSX.Element | null;
+/** Which allocation an organization model bills, with its spend so far. Shows
+ *  only for an organization model, and picks the first allocation for it. */
+export default function AllocationSelector(): import("react").JSX.Element | null;

package/dist/ai/components/AllocationSelector.js

@@ -1,55 +1,59 @@
+import { FaAngleDown } from "../../icons/fa/FaAngleDown.js";
+import { Select } from "../../components/Select.js";
+import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
-import Dropdown from "../ui/Dropdown.js";
+import { chipClassName } from "../ui/chip.js";
 import { isOrgModel } from "../utils.js";
-import { useEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
 import useSWR from "swr";
 //#region src/ai/components/AllocationSelector.tsx
-function AllocationSelector({ variant = "default" } = {}) {
-	const bare = variant === "bare";
+var money = (amount) => `$${amount.toFixed(2)}`;
+/** Which allocation an organization model bills, with its spend so far. Shows
+*  only for an organization model, and picks the first allocation for it. */
+function AllocationSelector() {
 	const { adapter, selectedProvider, selectedAllocation, setSelectedAllocation } = useChat();
+	const t = useChatConfig().strings.allocationPicker;
 	const isOrgProvider = isOrgModel(selectedProvider);
 	const allocationsAdapter = adapter.allocations;
 	const { data: allocations } = useSWR(isOrgProvider && allocationsAdapter ? ["ai-chat-allocations"] : null, () => allocationsAdapter?.list());
+	const first = allocations?.[0];
 	useEffect(() => {
-		const first = allocations?.[0];
-		if (isOrgProvider && first && !selectedAllocation) setSelectedAllocation(first.name);
-	}, [
-		isOrgProvider,
-		allocations,
-		selectedAllocation,
-		setSelectedAllocation
-	]);
-	useEffect(() => {
-		if (!isOrgProvider && selectedAllocation) setSelectedAllocation(null);
+		if (!isOrgProvider) {
+			if (selectedAllocation) setSelectedAllocation(null);
+		} else if (first && !selectedAllocation) setSelectedAllocation(first.name);
 	}, [
 		isOrgProvider,
+		first,
 		selectedAllocation,
 		setSelectedAllocation
 	]);
 	if (!isOrgProvider || !allocations?.length) return null;
-	const options = allocations.map((alloc) => ({
-		label: alloc.name,
-		value: alloc.name
-	}));
 	const selected = allocations.find((a) => a.name === selectedAllocation);
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-2",
-		children: [/* @__PURE__ */ jsx(Dropdown, {
-			options,
-			value: selectedAllocation ?? "",
-			onChange: (v) => setSelectedAllocation(v || null),
-			variant,
-			textBoxClassName: bare ? "rounded-full h-8 px-2.5 text-[13px] hover:chat-tint" : "h-8 rounded-lg border theme-border text-xs px-2",
-			placeholder: "Select allocation"
-		}), selected && /* @__PURE__ */ jsxs("span", {
+		className: "flex min-w-0 items-center gap-2",
+		children: [/* @__PURE__ */ jsx(Select, {
+			"aria-label": t.choose,
+			items: allocations.map((a) => ({
+				value: a.name,
+				label: a.name
+			})),
+			value: selectedAllocation,
+			onValueChange: setSelectedAllocation,
+			trigger: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: chipClassName,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: selected?.name ?? t.placeholder
+				}), /* @__PURE__ */ jsx(FaAngleDown, {
+					className: "h-3 w-3 shrink-0",
+					"aria-hidden": "true"
+				})]
+			})
+		}), selected && /* @__PURE__ */ jsx("span", {
 			className: "text-xs tabular-nums theme-muted-text whitespace-nowrap",
-			children: [
-				"$",
-				(selected.used ?? 0).toFixed(2),
-				" / $",
-				selected.total.toFixed(2)
-			]
+			children: t.usage(money(selected.used ?? 0), money(selected.total))
 		})]
 	});
 }

package/dist/ai/components/AttachmentManager.js

@@ -1,14 +1,14 @@
-import { safeUrl } from "../../safeUrl.js";
 import { BiSolidTrashAlt } from "../../icons/bi/BiSolidTrashAlt.js";
 import { FiDownload } from "../../icons/fi/FiDownload.js";
 import { FiFile } from "../../icons/fi/FiFile.js";
+import { safeUrl } from "../../safeUrl.js";
 import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
 import { formatFileSize } from "../utils.js";
 import { attachmentsPageKey } from "./attachmentKeys.js";
-import cx from "classnames";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { DateTime } from "luxon";
 import useSWRInfinite from "swr/infinite";
 //#region src/ai/components/AttachmentManager.tsx
@@ -74,7 +74,7 @@ function AttachmentManager() {
 					}) : attachments.length === 0 ? /* @__PURE__ */ jsx("p", {
 						className: "text-center theme-muted-text py-12 text-sm",
 						children: t.empty
-					}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+					}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 						className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4",
 						children: attachments.map((att) => {
 							const downloadUrl = attachmentsAdapter.downloadUrl(att.id);
@@ -87,14 +87,14 @@ function AttachmentManager() {
 								style: { cursor: "pointer" }
 							} : {};
 							return /* @__PURE__ */ jsxs("div", {
-								className: cx("rounded-lg border theme-border overflow-hidden", isDeleting && "opacity-50 pointer-events-none"),
+								className: clsx("rounded-lg border theme-border overflow-hidden", isDeleting && "opacity-50 pointer-events-none"),
 								children: [/* @__PURE__ */ jsxs("div", {
 									className: "relative aspect-square bg-(--theme-muted-panel-bg) flex items-center justify-center",
 									...openProps,
 									children: [/* @__PURE__ */ jsx(FiFile, { className: "w-8 h-8 theme-muted-text" }), showThumbnail && /* @__PURE__ */ jsx("img", {
 										src: downloadUrl,
 										alt: att.filename || "Image",
-										className: cx("absolute inset-0 w-full h-full object-cover", thumbnail !== "loaded" && "opacity-0"),
+										className: clsx("absolute inset-0 w-full h-full object-cover", thumbnail !== "loaded" && "opacity-0"),
 										loading: "lazy",
 										onLoad: () => markThumbnail(att.id, "loaded"),
 										onError: () => markThumbnail(att.id, "broken")
@@ -108,7 +108,7 @@ function AttachmentManager() {
 											children: att.filename || "File"
 										}), /* @__PURE__ */ jsxs("p", {
 											className: "truncate theme-muted-text",
-											children: [att.size ? formatFileSize(att.size) : "", att.uploadedAt && /* @__PURE__ */ jsxs(Fragment$1, { children: [att.size ? " · " : "", DateTime.fromISO(att.uploadedAt).toRelative()] })]
+											children: [att.size ? formatFileSize(att.size) : "", att.uploadedAt && /* @__PURE__ */ jsxs(Fragment, { children: [att.size ? " · " : "", DateTime.fromISO(att.uploadedAt).toRelative()] })]
 										})]
 									}), /* @__PURE__ */ jsxs("div", {
 										className: "flex items-center gap-0.5 flex-shrink-0",

package/dist/ai/components/AttachmentUpload.js

@@ -7,9 +7,9 @@ import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
 import { formatFileSize } from "../utils.js";
 import { ATTACHMENTS_INFINITE_KEY } from "./attachmentKeys.js";
-import cx from "classnames";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { mutate } from "swr";
 //#region src/ai/components/AttachmentUpload.tsx
 var DEFAULT_MAX_FILE_SIZE = 26214400;
@@ -112,7 +112,7 @@ var AttachmentUpload = forwardRef(function AttachmentUpload({ conversationId, at
 	const handleClick = () => {
 		fileInputRef.current?.click();
 	};
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("input", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
 		ref: fileInputRef,
 		type: "file",
 		multiple: true,
@@ -127,7 +127,7 @@ var AttachmentUpload = forwardRef(function AttachmentUpload({ conversationId, at
 			children: attachments.map((attachment, index) => {
 				const Icon = getFileIcon(attachment.mimeType);
 				return /* @__PURE__ */ jsxs("div", {
-					className: cx("flex items-center gap-2 px-2 py-1 rounded border theme-border theme-muted-panel", attachment.error && "border-red-500"),
+					className: clsx("flex items-center gap-2 px-2 py-1 rounded border theme-border theme-muted-panel", attachment.error && "border-red-500"),
 					children: [
 						/* @__PURE__ */ jsx(Icon, { className: "w-4 h-4 theme-muted-text" }),
 						/* @__PURE__ */ jsx("span", {
@@ -163,7 +163,7 @@ var AttachmentUpload = forwardRef(function AttachmentUpload({ conversationId, at
 			onDragOver: handleDragOver,
 			onDragLeave: handleDragLeave,
 			onDrop: handleDrop,
-			className: cx("relative block w-full border-2 border-dashed rounded-lg p-3 text-center transition-colors", isDragging ? "border-blue-500 bg-blue-500/10" : "theme-border hover:theme-border", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
+			className: clsx("relative block w-full border-2 border-dashed rounded-lg p-3 text-center transition-colors", isDragging ? "border-blue-500 bg-blue-500/10" : "theme-border hover:theme-border", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
 			onClick: disabled ? void 0 : handleClick,
 			children: [/* @__PURE__ */ jsxs("span", {
 				className: "flex items-center justify-center gap-2 text-sm theme-muted-text",

package/dist/ai/components/BranchNavigator.js

@@ -1,8 +1,8 @@
 import { FaAngleLeft } from "../../icons/fa/FaAngleLeft.js";
 import { FaAngleRight } from "../../icons/fa/FaAngleRight.js";
 import { useChatConfig } from "../core/config.js";
-import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
 //#region src/ai/components/BranchNavigator.tsx
 function findSiblings(messages, messageId) {
 	const message = messages.find((m) => m.id === messageId);

package/dist/ai/components/ChatEmptyState.js

@@ -12,8 +12,8 @@ import DragOverlay from "./DragOverlay.js";
 import ChatInput from "./ChatInput.js";
 import ChatStage 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);
@@ -138,7 +138,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$1, { children: [slots.composerUsage, /* @__PURE__ */ jsx(ComposerControls, { targetSession })] })
+								settingsRight: /* @__PURE__ */ jsxs(Fragment, { children: [slots.composerUsage, /* @__PURE__ */ jsx(ComposerControls, { targetSession })] })
 							}),
 							prompts.length > 0 && !(hasLoadedModels && models.length === 0) && /* @__PURE__ */ jsx("ul", {
 								className: "mx-auto max-w-[var(--chat-column,50rem)] px-8",

package/dist/ai/components/ChatInput.js

@@ -11,9 +11,9 @@ import DragOverlay from "./DragOverlay.js";
 import { PasteFileCard } from "./PastedText.js";
 import { SlashMenu, useSlashMenu } from "./SlashMenu.js";
 import { usePasteCards } from "./usePasteCards.js";
-import cx from "classnames";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, 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. */
@@ -35,10 +35,10 @@ function AttachButton({ open, disabled, label, onClick }) {
 		onClick,
 		disabled,
 		"aria-expanded": open,
-		className: cx("flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full transition-colors", open ? "theme-text chat-tint-strong" : "theme-muted-text hover:theme-text hover:chat-tint", "disabled:opacity-50 disabled:cursor-not-allowed"),
+		className: clsx("flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full transition-colors", open ? "theme-text chat-tint-strong" : "theme-muted-text hover:theme-text hover:chat-tint", "disabled:opacity-50 disabled:cursor-not-allowed"),
 		"aria-label": label,
 		title: label,
-		children: /* @__PURE__ */ jsx(GoPlus, { className: cx("h-5 w-5 transition-transform duration-200", open && "rotate-45") })
+		children: /* @__PURE__ */ jsx(GoPlus, { className: clsx("h-5 w-5 transition-transform duration-200", open && "rotate-45") })
 	});
 }
 function SendButton({ onClick, enabled, emphasised, label, testId }) {
@@ -47,7 +47,7 @@ function SendButton({ onClick, enabled, emphasised, label, testId }) {
 		onClick,
 		disabled: !enabled,
 		"data-testid": testId,
-		className: cx("flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full transition-[background-color,color,transform] duration-150 active:scale-95", emphasised ? "theme-element hover:opacity-90" : "chat-send-idle", !enabled && "cursor-not-allowed active:scale-100"),
+		className: clsx("flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full transition-[background-color,color,transform] duration-150 active:scale-95", emphasised ? "theme-element hover:opacity-90" : "chat-send-idle", !enabled && "cursor-not-allowed active:scale-100"),
 		"aria-label": label,
 		title: label,
 		children: /* @__PURE__ */ jsx(FaArrowUp, { className: "h-4 w-4" })
@@ -228,6 +228,7 @@ var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeh
 					className: "relative",
 					children: [slash && slashMenu.open && /* @__PURE__ */ jsx(SlashMenu, {
 						label: slash.label,
+						listId: slashMenu.listId,
 						matches: slashMenu.matches,
 						active: slashMenu.active,
 						onChoose: (name) => {
@@ -248,7 +249,7 @@ var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeh
 								})
 							}),
 							/* @__PURE__ */ jsxs("div", {
-								className: cx(!toolbar && "flex items-end gap-2 pr-2 pb-2"),
+								className: clsx(!toolbar && "flex items-end gap-2 pr-2 pb-2"),
 								children: [/* @__PURE__ */ jsx("div", {
 									className: "max-h-[200px] min-w-0 flex-1 overflow-y-auto",
 									children: /* @__PURE__ */ jsx("textarea", {
@@ -257,11 +258,12 @@ var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeh
 										onChange: (e) => setInputAndPersist(e.target.value),
 										onKeyDown: handleKeyDown,
 										onPaste: handlePaste,
+										...slashMenu.inputProps,
 										placeholder: effectivePlaceholder,
 										"aria-label": inputLabel ?? effectivePlaceholder,
 										disabled,
 										rows: 1,
-										className: cx("theme-text block w-full resize-none overflow-hidden", "bg-transparent border-0 px-4", toolbar ? "pt-3.5 pb-1" : "pt-3 pb-1", "placeholder:theme-muted-text", "focus:outline-none focus:ring-0", "disabled:opacity-50 disabled:cursor-not-allowed", "text-[1rem] leading-relaxed")
+										className: clsx("theme-text block w-full resize-none overflow-hidden", "bg-transparent border-0 px-4", toolbar ? "pt-3.5 pb-1" : "pt-3 pb-1", "placeholder:theme-muted-text", "focus:outline-none focus:ring-0", "disabled:opacity-50 disabled:cursor-not-allowed", "text-[1rem] leading-relaxed")
 									})
 								}), !toolbar && action]
 							}),
@@ -286,7 +288,7 @@ var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeh
 						]
 					})]
 				}),
-				(settingsLeft || uploadedCount > 0) && /* @__PURE__ */ jsx(ComposerSettings, { left: /* @__PURE__ */ jsxs(Fragment$1, { children: [settingsLeft, uploadedCount > 0 && /* @__PURE__ */ jsx("span", {
+				(settingsLeft || uploadedCount > 0) && /* @__PURE__ */ jsx(ComposerSettings, { left: /* @__PURE__ */ jsxs(Fragment, { children: [settingsLeft, uploadedCount > 0 && /* @__PURE__ */ jsx("span", {
 					className: "text-[11px] theme-muted-text",
 					children: t.filesAttached(uploadedCount)
 				})] }) }),

package/dist/ai/components/ChatLayout.js

@@ -4,9 +4,9 @@ import { useChat } from "../core/ChatProvider.js";
 import { KeyboardShortcutsProvider } from "../core/KeyboardShortcutsProvider.js";
 import { SidebarToggle } from "../ui/sidebar.js";
 import ChatSidebar from "./ChatSidebar.js";
-import cx from "classnames";
-import { useLayoutEffect, useRef, useState } from "react";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
 //#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. */
@@ -51,10 +51,9 @@ function ConversationLayout({ sidebar, children, sidebarMode = "inline", drawerB
 	const { strings } = useChatConfig();
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
-		className: cx("flex h-full", drawer && "relative overflow-hidden"),
+		className: clsx("flex h-full", drawer && "relative overflow-hidden"),
 		children: [sidebar, /* @__PURE__ */ jsxs("main", {
-			inert: drawer && drawerOpen,
-			className: cx("flex min-w-0 flex-1 flex-col", CHAT_COLUMN_SCOPE),
+			className: clsx("flex min-w-0 flex-1 flex-col", CHAT_COLUMN_SCOPE),
 			children: [drawer && (drawerToggle || drawerBar) && /* @__PURE__ */ jsxs("div", {
 				className: "flex shrink-0 items-center gap-2 bg-(--theme-panel-bg) px-2 pt-2",
 				children: [drawerToggle && /* @__PURE__ */ jsx(SidebarToggle, {

package/dist/ai/components/ChatMessage.js

@@ -1,4 +1,3 @@
-import { safeUrl } from "../../safeUrl.js";
 import { BiError } from "../../icons/bi/BiError.js";
 import { FaCheck } from "../../icons/fa/FaCheck.js";
 import { FaEdit } from "../../icons/fa/FaEdit.js";
@@ -7,6 +6,7 @@ import { FiCopy } from "../../icons/fi/FiCopy.js";
 import { FiDownload } from "../../icons/fi/FiDownload.js";
 import { FiFile } from "../../icons/fi/FiFile.js";
 import { MdRefresh } from "../../icons/md/MdRefresh.js";
+import { safeUrl } from "../../safeUrl.js";
 import { durationToAbsHumanDuration } from "../../duration.js";
 import { useChatConfig } from "../core/config.js";
 import { formatFileSize } from "../utils.js";
@@ -17,9 +17,9 @@ import AgentMessageParts from "./agent/AgentMessageParts.js";
 import BranchNavigator from "./BranchNavigator.js";
 import { UserMessageText } from "./PastedText.js";
 import { Avatar } from "../ui/Avatar.js";
-import cx from "classnames";
-import { memo, useEffect, useRef, useState } from "react";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useRef, useState } from "react";
 import { DateTime, Duration } from "luxon";
 //#region src/ai/components/ChatMessage.tsx
 function formatDuration(ms) {
@@ -102,7 +102,7 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 	};
 	const hasParts = !!message.parts?.length;
 	if (hasParts && !message.content) return /* @__PURE__ */ jsx("div", {
-		className: cx("group py-3 w-full", !flush && "px-4"),
+		className: clsx("group py-3 w-full", !flush && "px-4"),
 		children: /* @__PURE__ */ jsx(AgentMessageParts, {
 			message,
 			isStreaming,
@@ -123,7 +123,7 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 	};
 	return /* @__PURE__ */ jsx("div", {
 		role: "none",
-		className: cx("group w-full", isUser ? "pt-8 pb-5" : "py-3", !flush && "px-4"),
+		className: clsx("group w-full", isUser ? "pt-8 pb-5" : "py-3", !flush && "px-4"),
 		onMouseEnter: () => setShowActions(true),
 		onMouseLeave: () => setShowActions(false),
 		onFocus: () => setShowActions(true),
@@ -153,9 +153,9 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 				})]
 			})]
 		}) : /* @__PURE__ */ jsx("div", {
-			className: cx("flex gap-3 w-full", isRightAligned ? "flex-row-reverse" : "flex-row"),
+			className: clsx("flex gap-3 w-full", isRightAligned ? "flex-row-reverse" : "flex-row"),
 			children: /* @__PURE__ */ jsxs("div", {
-				className: cx("flex-1 min-w-0 space-y-1", isRightAligned && "relative flex flex-col items-end"),
+				className: clsx("flex-1 min-w-0 space-y-1", isRightAligned && "relative flex flex-col items-end"),
 				children: [
 					showReasoningButton && /* @__PURE__ */ jsxs("div", {
 						className: "mb-2",
@@ -191,21 +191,21 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 							name: otherAuthor.name || otherAuthor.username,
 							className: "flex-shrink-0 mb-0.5"
 						}), /* @__PURE__ */ jsx("div", {
-							className: cx("px-4 py-2.5 chat-ink rounded-[1.25rem] max-w-[80%] inline-block whitespace-pre-wrap wrap-break-word text-[1rem] leading-6 chat-tint", hasPastes && "chat-bubble-roomy"),
+							className: clsx("px-4 py-2.5 chat-ink rounded-[1.25rem] max-w-[80%] inline-block whitespace-pre-wrap wrap-break-word text-[1rem] leading-6 chat-tint", hasPastes && "chat-bubble-roomy"),
 							children: /* @__PURE__ */ jsx(UserMessageText, {
 								content: message.content,
 								pastes: message.pastes
 							})
 						})]
 					}) : isUser ? /* @__PURE__ */ jsx("div", {
-						className: cx("px-4 py-2.5 chat-ink rounded-[1.25rem] max-w-[80%] inline-block whitespace-pre-wrap wrap-break-word text-[1rem] leading-6 chat-bubble-user", hasPastes && "chat-bubble-roomy"),
+						className: clsx("px-4 py-2.5 chat-ink rounded-[1.25rem] max-w-[80%] inline-block whitespace-pre-wrap wrap-break-word text-[1rem] leading-6 chat-bubble-user", hasPastes && "chat-bubble-roomy"),
 						children: /* @__PURE__ */ jsx(UserMessageText, {
 							content: message.content,
 							pastes: message.pastes
 						})
 					}) : /* @__PURE__ */ jsx("div", {
 						ref: contentRef,
-						className: cx(chatProseClasses, collapsed && "chat-message-clamp"),
+						className: clsx(chatProseClasses, collapsed && "chat-message-clamp"),
 						children: /* @__PURE__ */ jsx(Markdown, {
 							isStreaming,
 							children: message.content
@@ -303,7 +303,7 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 						})
 					}),
 					!isStreaming && !isEditing && /* @__PURE__ */ jsxs("div", {
-						className: cx("chat-actions flex items-center gap-0.5 transition-opacity duration-150", isRightAligned ? "absolute right-0 top-full -mr-1.5 mt-0.5" : "-ml-1.5 mt-2", isRightAligned && (showActions ? "opacity-100" : "opacity-0 pointer-events-none")),
+						className: clsx("chat-actions flex items-center gap-0.5 transition-opacity duration-150", isRightAligned ? "absolute right-0 top-full -mr-1.5 mt-0.5" : "-ml-1.5 mt-2", isRightAligned && (showActions ? "opacity-100" : "opacity-0 pointer-events-none")),
 						children: [
 							/* @__PURE__ */ jsx("button", {
 								type: "button",
@@ -332,7 +332,7 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 								onNavigate: onNavigateBranch
 							}),
 							(timestamp || !isUser && (message.model || totalTokens)) && /* @__PURE__ */ jsxs("span", {
-								className: cx("chat-meta flex items-center gap-2 ml-2 text-xs tabular-nums theme-muted-text transition-opacity duration-150 select-none", showActions ? "opacity-100" : "opacity-0"),
+								className: clsx("chat-meta flex items-center gap-2 ml-2 text-xs tabular-nums theme-muted-text transition-opacity duration-150 select-none", showActions ? "opacity-100" : "opacity-0"),
 								children: [
 									timestamp && /* @__PURE__ */ jsx("span", {
 										title: timestamp.toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS),

package/dist/ai/components/ChatMessageList.js

@@ -7,9 +7,9 @@ import Markdown from "../ui/Markdown.js";
 import { ReasoningBody, ReasoningToggle } from "./Reasoning.js";
 import AgentMessageParts from "./agent/AgentMessageParts.js";
 import ChatMessage_default from "./ChatMessage.js";
-import cx from "classnames";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Duration } from "luxon";
 //#region src/ai/components/ChatMessageList.tsx
 function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessages, onRemoveQueued, canRemoveQueued, queueDelivery = "afterReply", editingMessageId, showAuthor, currentUsername, onNavigateBranch, onEditMessage, onSaveEdit, onCancelEdit, onRegenerateMessage, onRetryMessage, onOpenReasoning, onApprovalAnswer, inputElement, isStreaming: isStreamingProp, flush, label, footer, workingIndicator = true }) {
@@ -151,7 +151,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 		children: [
 			/* @__PURE__ */ jsx("div", { className: "flex-1" }),
 			footer && /* @__PURE__ */ jsx("div", {
-				className: cx("w-full max-w-[var(--chat-column,50rem)] mx-auto", !flush && "px-4"),
+				className: clsx("w-full max-w-[var(--chat-column,50rem)] mx-auto", !flush && "px-4"),
 				children: footer
 			}),
 			inputElement && /* @__PURE__ */ jsx("div", {
@@ -202,7 +202,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 					isStreaming && streamingReasoning && /* @__PURE__ */ jsx("div", {
 						className: "animate-chat-enter",
 						children: /* @__PURE__ */ jsxs("div", {
-							className: cx("pt-3", !flush && "px-4"),
+							className: clsx("pt-3", !flush && "px-4"),
 							children: [/* @__PURE__ */ jsx(ReasoningToggle, {
 								open: reasoningOpen,
 								shimmer: isThinking,
@@ -225,7 +225,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 						})
 					}, "thinking"),
 					isStreaming && streamingParts.length > 0 && /* @__PURE__ */ jsx("div", {
-						className: cx("animate-chat-enter py-1", !flush && "px-4"),
+						className: clsx("animate-chat-enter py-1", !flush && "px-4"),
 						children: /* @__PURE__ */ jsx(AgentMessageParts, {
 							message: {
 								id: "streaming-parts",
@@ -238,7 +238,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 					showWorkingIndicator && /* @__PURE__ */ jsx("div", {
 						className: "animate-chat-enter",
 						children: /* @__PURE__ */ jsx("div", {
-							className: cx("py-3", !flush && "px-4"),
+							className: clsx("py-3", !flush && "px-4"),
 							children: /* @__PURE__ */ jsx("div", {
 								className: "animate-shimmer text-shimmer text-sm",
 								children: tThinking.ellipsis
@@ -261,7 +261,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 						const removable = canRemoveQueued?.(msg.id) ?? true;
 						const status = !removable ? strings.queue.handedOver : queueDelivery === "nextStep" ? strings.queue.waitingNextStep : strings.queue.waiting;
 						return /* @__PURE__ */ jsxs("div", {
-							className: cx("animate-chat-enter", removable && "chat-queued"),
+							className: clsx("animate-chat-enter", removable && "chat-queued"),
 							children: [/* @__PURE__ */ jsx(ChatMessage_default, {
 								message: msg,
 								allMessages,
@@ -270,11 +270,11 @@ function ChatMessageList({ messages, allMessages, streamingMessage, queuedMessag
 								onOpenAttachment
 							}), /* @__PURE__ */ jsxs("div", {
 								"data-testid": "queued-status",
-								className: cx("-mt-4 mb-2 flex items-center justify-end gap-2 text-xs theme-muted-text", !flush && "px-4"),
+								className: clsx("-mt-4 mb-2 flex items-center justify-end gap-2 text-xs theme-muted-text", !flush && "px-4"),
 								children: [
 									removable ? /* @__PURE__ */ jsx(FiClock, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(FaCheck, { className: "h-3 w-3" }),
 									/* @__PURE__ */ jsx("span", { children: status }),
-									onRemoveQueued && removable && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+									onRemoveQueued && removable && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 										"aria-hidden": "true",
 										children: "·"
 									}), /* @__PURE__ */ jsx("button", {

package/dist/ai/components/ChatSidebar.js

@@ -10,9 +10,9 @@ import { FOCUS_SIDEBAR_SEARCH_EVENT } from "../core/events.js";
 import { SidebarPlaceholder, SidebarRow, SidebarRowTitle } from "../ui/sidebar.js";
 import { ConversationSidebar } from "../ui/ConversationSidebar.js";
 import { groupConversationsByDate, useConversationActions } from "./conversationActions.js";
-import cx from "classnames";
+import { clsx } from "clsx";
+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, updated, menuItems, openMenu, onOpen }) {
 	const { LinkComponent, strings } = useChatConfig();
@@ -91,8 +91,7 @@ function ChatSidebar({ actions = true, top }) {
 		drawer: drawer ? {
 			open: drawerOpen,
 			onClose: closeDrawer,
-			label: tSidebar.drawerLabel,
-			closeLabel: tSidebar.closeSidebar
+			label: tSidebar.drawerLabel
 		} : void 0,
 		onToggle: toggleSidebar,
 		toggleLabels: {
@@ -119,15 +118,15 @@ function ChatSidebar({ actions = true, top }) {
 			current: filteredConversations.find((conv) => conv.id === activeConversationId),
 			onSelect: (conv) => navigation.toConversation(conv.id)
 		},
-		top: (top || actions) && /* @__PURE__ */ jsxs(Fragment$1, { children: [top?.({ collapsed: sidebarCollapsed }), actions && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		top: (top || actions) && /* @__PURE__ */ jsxs(Fragment, { children: [top?.({ collapsed: sidebarCollapsed }), actions && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-0.5 px-2 pt-2 pb-1",
 			children: [/* @__PURE__ */ jsxs("button", {
 				type: "button",
 				onClick: handleNewChat,
 				className: "flex items-center h-9 px-2 gap-3 rounded-lg font-medium transition-colors hover:chat-tint",
 				title: tSidebar.newChat,
-				children: [/* @__PURE__ */ jsx(TbEdit, { className: cx("flex-shrink-0", "w-4 h-4") }), /* @__PURE__ */ jsx("span", {
-					className: cx("text-sm transition-opacity duration-200", sidebarCollapsed ? "opacity-0 w-0 overflow-hidden" : "opacity-100"),
+				children: [/* @__PURE__ */ jsx(TbEdit, { className: clsx("flex-shrink-0", "w-4 h-4") }), /* @__PURE__ */ jsx("span", {
+					className: clsx("text-sm transition-opacity duration-200", sidebarCollapsed ? "opacity-0 w-0 overflow-hidden" : "opacity-100"),
 					children: tSidebar.newChat
 				})]
 			}), attachmentsAvailable && /* @__PURE__ */ jsxs(LinkComponent, {
@@ -136,7 +135,7 @@ function ChatSidebar({ actions = true, top }) {
 				title: tSidebar.attachments,
 				onClick: closeDrawer,
 				children: [/* @__PURE__ */ jsx(FaRegFileImage, { className: "flex-shrink-0 w-4 h-4" }), /* @__PURE__ */ jsx("span", {
-					className: cx("text-sm transition-opacity duration-200", sidebarCollapsed ? "opacity-0 w-0 overflow-hidden" : "opacity-100"),
+					className: clsx("text-sm transition-opacity duration-200", sidebarCollapsed ? "opacity-0 w-0 overflow-hidden" : "opacity-100"),
 					children: tSidebar.attachments
 				})]
 			})]
@@ -163,7 +162,7 @@ function ChatSidebar({ actions = true, top }) {
 		})] })] }),
 		footer: /* @__PURE__ */ jsx(ManageProvidersLink, {})
 	});
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [(drawer || sidebar !== "hidden") && list, overlays] });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [(drawer || sidebar !== "hidden") && list, overlays] });
 }
 //#endregion
 export { ChatSidebar as default };

package/dist/ai/components/ChatThread.js

@@ -8,8 +8,8 @@ import ChatInput from "./ChatInput.js";
 import ProviderIssueBanner from "./ProviderIssueBanner.js";
 import { ShareButton } from "./ShareDialog.js";
 import ChatMessageList from "./ChatMessageList.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/ChatThread.tsx
 function ChatThread({ conversationId }) {
 	const chatInputRef = useRef(null);
@@ -92,7 +92,7 @@ function ChatThread({ conversationId }) {
 			disabled: true,
 			conversationId,
 			settingsLeft: /* @__PURE__ */ jsx(ConnectToolsLink, {}),
-			settingsRight: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ComposerUsage, { children: slots.composerUsage }), /* @__PURE__ */ jsx(ComposerControls, {})] })
+			settingsRight: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ComposerUsage, { children: slots.composerUsage }), /* @__PURE__ */ jsx(ComposerControls, {})] })
 		})]
 	});
 	return /* @__PURE__ */ jsx("div", {
@@ -126,8 +126,8 @@ function ChatThread({ conversationId }) {
 						placeholder: currentConversation?.canCollaborate === false ? strings.thread.viewOnly : void 0,
 						conversationId,
 						onEditLastMessage: handleEditLastMessage,
-						settingsLeft: /* @__PURE__ */ jsxs(Fragment$1, { children: [currentConversation?.isOwner !== false && /* @__PURE__ */ jsx(ShareButton, { conversationId }), /* @__PURE__ */ jsx(ConnectToolsLink, {})] }),
-						settingsRight: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ComposerUsage, { children: slots.composerUsage }), /* @__PURE__ */ jsx(ComposerControls, {})] })
+						settingsLeft: /* @__PURE__ */ jsxs(Fragment, { children: [currentConversation?.isOwner !== false && /* @__PURE__ */ jsx(ShareButton, { conversationId }), /* @__PURE__ */ jsx(ConnectToolsLink, {})] }),
+						settingsRight: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ComposerUsage, { children: slots.composerUsage }), /* @__PURE__ */ jsx(ComposerControls, {})] })
 					})
 				})
 			]

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

@@ -17,8 +17,8 @@ export declare function ComposerSettings({ left, children }: {
 export declare function ComposerUsage({ children }: {
     children: ReactNode;
 }): import("react").JSX.Element | null;
-/** The two selectors every surface carries, bare so they read as text beside
- *  whatever the surface puts next to them. */
+/** The two selectors every surface carries, reading as text beside whatever
+ *  the surface puts next to them. */
 export declare function ComposerControls({ targetSession }: {
     targetSession?: string | null | undefined;
 }): import("react").JSX.Element;