@parallelworks/ui 0.44.0 → 0.45.0

package/dist/ai/components/ChatSidebar.js

@@ -1,20 +1,19 @@
-import { FaRegFileImage } from "../../icons/fa/FaRegFileImage.js";
-import { FaSearch } from "../../icons/fa/FaSearch.js";
-import { FaUsers } from "../../icons/fa/FaUsers.js";
-import { TbEdit } from "../../icons/tb/TbEdit.js";
-import { useRelativeTime } from "../../components/relativeTime.js";
+import { cx } from "../../cx.js";
+import { ImageIcon, NewChatIcon, UsersIcon } from "../../icons.js";
+import { EmptyState } from "../../components/EmptyState.js";
+import { RelativeTime } from "../../components/relativeTime.js";
+import { SearchInput } from "../../components/SearchInput.js";
 import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
 import { ManageProvidersLink } from "./ComposerChrome.js";
 import { FOCUS_SIDEBAR_SEARCH_EVENT } from "../core/events.js";
-import { SidebarPlaceholder, SidebarRow, SidebarRowTitle } from "../ui/sidebar.js";
+import { SidebarRow, SidebarRowTitle } from "../ui/sidebar.js";
 import { ConversationSidebar } from "../ui/ConversationSidebar.js";
 import { groupConversationsByDate, useConversationActions } from "./conversationActions.js";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
 //#region src/ai/components/ChatSidebar.tsx
-function ConversationRow({ conv, isCurrent, updated, menuItems, openMenu, onOpen }) {
+function ConversationRow({ conv, isCurrent, menuItems, openMenu, onOpen }) {
 	const { LinkComponent, strings } = useChatConfig();
 	const t = strings.sidebar;
 	return /* @__PURE__ */ jsx(SidebarRow, {
@@ -28,11 +27,14 @@ function ConversationRow({ conv, isCurrent, updated, menuItems, openMenu, onOpen
 			},
 			className: "flex min-w-0 flex-1 items-center gap-1.5 py-1 text-left",
 			onClick: onOpen,
-			children: [conv.isOwner === false && /* @__PURE__ */ jsx(FaUsers, {
+			children: [conv.isOwner === false && /* @__PURE__ */ jsx(UsersIcon, {
 				className: "h-3 w-3 shrink-0 theme-muted-text",
 				title: t.sharedWithYou
 			}), /* @__PURE__ */ jsx(SidebarRowTitle, {
-				time: updated,
+				time: /* @__PURE__ */ jsx(RelativeTime, {
+					value: conv.updatedAt ?? conv.createdAt,
+					format: "compact"
+				}),
 				children: conv.title || t.untitled
 			})]
 		})
@@ -44,7 +46,6 @@ function ChatSidebar({ actions = true, top }) {
 	const { adapter, navigation, activeConversationId, conversations, sidebar, sidebarPresentation, drawerOpen, setSidebar, setDrawerOpen, toggleSidebar, isLoading, loadConversations, clearCurrentConversation } = useChat();
 	const attachmentsAvailable = !!adapter.attachments;
 	const { menuItems, openMenu, overlays } = useConversationActions();
-	const { compact } = useRelativeTime();
 	const drawer = sidebarPresentation === "drawer";
 	const sidebarCollapsed = !drawer && sidebar !== "expanded";
 	const closeDrawer = () => setDrawerOpen(false);
@@ -107,13 +108,15 @@ function ChatSidebar({ actions = true, top }) {
 		renderRow: (conv) => /* @__PURE__ */ jsx(ConversationRow, {
 			conv,
 			isCurrent: activeConversationId === conv.id,
-			updated: compact(conv.updatedAt ?? conv.createdAt),
 			menuItems: menuItems(conv),
 			openMenu,
 			onOpen: closeDrawer
 		}),
 		loading: isLoading,
-		placeholder: /* @__PURE__ */ jsx(SidebarPlaceholder, { children: conversations.length === 0 ? tSidebar.noConversations : strings.chrome.noMatches }),
+		placeholder: /* @__PURE__ */ jsx(EmptyState, {
+			variant: "bare",
+			title: conversations.length === 0 ? tSidebar.noConversations : strings.chrome.noMatches
+		}),
 		cycle: {
 			current: filteredConversations.find((conv) => conv.id === activeConversationId),
 			onSelect: (conv) => navigation.toConversation(conv.id)
@@ -125,8 +128,8 @@ function ChatSidebar({ actions = true, top }) {
 				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: 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: [/* @__PURE__ */ jsx(NewChatIcon, { 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: tSidebar.newChat
 				})]
 			}), attachmentsAvailable && /* @__PURE__ */ jsxs(LinkComponent, {
@@ -134,30 +137,19 @@ function ChatSidebar({ actions = true, top }) {
 				className: "flex items-center h-9 px-2 gap-3 rounded-lg transition-colors hover:chat-tint",
 				title: tSidebar.attachments,
 				onClick: closeDrawer,
-				children: [/* @__PURE__ */ jsx(FaRegFileImage, { className: "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: [/* @__PURE__ */ jsx(ImageIcon, { 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"),
 					children: tSidebar.attachments
 				})]
 			})]
 		}), !sidebarCollapsed && conversations.length > 0 && /* @__PURE__ */ jsx("div", {
 			className: "px-2 pb-2",
-			children: /* @__PURE__ */ jsxs("div", {
-				className: "relative",
-				children: [/* @__PURE__ */ jsx(FaSearch, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 theme-muted-text pointer-events-none" }), /* @__PURE__ */ jsx("input", {
-					ref: searchInputRef,
-					type: "text",
-					value: search,
-					onChange: (e) => setSearch(e.target.value),
-					onKeyDown: (e) => {
-						if (e.key === "Escape" && search) {
-							e.stopPropagation();
-							setSearch("");
-						}
-					},
-					placeholder: strings.chrome.searchPlaceholder,
-					"aria-label": strings.chrome.searchLabel,
-					className: "w-full h-9 pl-8 pr-2 text-sm rounded-lg border border-transparent chat-tint theme-text placeholder:theme-muted-text transition-colors focus:outline-none focus:border-(--theme-border) focus:bg-(--theme-panel-bg)"
-				})]
+			children: /* @__PURE__ */ jsx(SearchInput, {
+				ref: searchInputRef,
+				value: search,
+				onValueChange: setSearch,
+				label: strings.chrome.searchLabel,
+				placeholder: strings.chrome.searchPlaceholder
 			})
 		})] })] }),
 		footer: /* @__PURE__ */ jsx(ManageProvidersLink, {})

package/dist/ai/components/ChatStage.js

@@ -12,7 +12,7 @@ function ChatStage({ heading, subheading, children }) {
 			children: [heading && /* @__PURE__ */ jsxs("div", {
 				className: "mx-auto mb-6 max-w-[var(--chat-column,50rem)] px-8 text-center",
 				children: [/* @__PURE__ */ jsx("h1", {
-					className: "text-[1.75rem] leading-tight font-medium tracking-[-0.02em] text-balance text-(--theme-panel)",
+					className: "text-[1.75rem] leading-tight font-medium tracking-[-0.02em] text-balance text-(--theme-app)",
 					children: heading
 				}), subheading && /* @__PURE__ */ jsx("p", {
 					className: "mt-2 text-sm theme-muted-text",

package/dist/ai/components/ComposerChrome.js

@@ -1,5 +1,4 @@
-import { IoSettingsOutline } from "../../icons/io5/IoSettingsOutline.js";
-import { PiPlugsConnectedFill } from "../../icons/pi/PiPlugsConnectedFill.js";
+import { ConnectIcon, SettingsIcon } from "../../icons.js";
 import { useChatConfig } from "../core/config.js";
 import AllocationSelector from "./AllocationSelector.js";
 import ModelSelector from "./ModelSelector.js";
@@ -55,7 +54,7 @@ function ManageProvidersLink() {
 		},
 		className: "flex min-w-0 items-center gap-2 rounded-md px-2 py-1.5 text-xs theme-muted-text transition-colors hover:chat-tint hover:theme-text",
 		title: strings.sidebar.manageProviders,
-		children: [/* @__PURE__ */ jsx(IoSettingsOutline, { className: "h-3.5 w-3.5 shrink-0" }), /* @__PURE__ */ jsx("span", {
+		children: [/* @__PURE__ */ jsx(SettingsIcon, { className: "h-3.5 w-3.5 shrink-0" }), /* @__PURE__ */ jsx("span", {
 			className: "truncate",
 			children: strings.sidebar.manageProviders
 		})]
@@ -70,7 +69,7 @@ function ConnectToolsLink() {
 			href: extraLinks.connectTools
 		},
 		className: "flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] theme-muted-text transition-colors hover:theme-muted-panel hover:theme-text",
-		children: [/* @__PURE__ */ jsx(PiPlugsConnectedFill, { className: "h-3 w-3" }), strings.sidebar.connectTools]
+		children: [/* @__PURE__ */ jsx(ConnectIcon, { className: "h-3 w-3" }), strings.sidebar.connectTools]
 	});
 }
 //#endregion

package/dist/ai/components/DragOverlay.js

@@ -1,17 +1,19 @@
-import { clsx } from "clsx";
+import { cx } from "../../cx.js";
+import { useChatConfig } from "../core/config.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/DragOverlay.tsx
 function DragOverlay({ className }) {
+	const t = useChatConfig().strings.attachmentUpload;
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("absolute inset-0 z-50 flex items-center justify-center bg-blue-500/10 border-2 border-dashed border-blue-500 backdrop-blur-sm pointer-events-none", className),
+		className: cx("absolute inset-0 z-50 flex items-center justify-center bg-blue-500/10 border-2 border-dashed border-blue-500 backdrop-blur-sm pointer-events-none", className),
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "text-center",
 			children: [/* @__PURE__ */ jsx("p", {
 				className: "text-lg font-medium text-blue-600",
-				children: "Drop files here"
+				children: t.dropFilesHere
 			}), /* @__PURE__ */ jsx("p", {
 				className: "text-sm text-blue-500/80",
-				children: "Release to upload"
+				children: t.releaseToUpload
 			})]
 		})
 	});

package/dist/ai/components/ModelSelector.js

@@ -1,13 +1,11 @@
-import { FaChevronDown } from "../../icons/fa/FaChevronDown.js";
-import { FaCloud } from "../../icons/fa/FaCloud.js";
-import { FaExclamationTriangle } from "../../icons/fa/FaExclamationTriangle.js";
-import { FaUndoAlt } from "../../icons/fa/FaUndoAlt.js";
+import { cx } from "../../cx.js";
+import { ChevronDownIcon, CloudIcon, RetryIcon, WarningIcon } from "../../icons.js";
+import { useStrings } from "../../components/Provider.js";
 import { Combobox } from "../../components/Combobox.js";
 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 { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 //#region src/ai/components/ModelSelector.tsx
@@ -23,7 +21,7 @@ function CspIcon({ cspKind, className }) {
 	const { slots } = useChatConfig();
 	const custom = slots.providerIcon?.(cspKind, className);
 	if (custom) return /* @__PURE__ */ jsx(Fragment, { children: custom });
-	return /* @__PURE__ */ jsx(FaCloud, { className: clsx("text-purple-500", className) });
+	return /* @__PURE__ */ jsx(CloudIcon, { className: cx("text-purple-500", className) });
 }
 function getProviderKeyFromModelId(modelId) {
 	const idx = modelId.indexOf("/");
@@ -55,13 +53,14 @@ function groupModelsByProvider(models) {
 function ModelSelector({ targetSession }) {
 	const { providers, models, unreachableSessions, providerIssues, selectedProvider, setSelectedProvider, isLoadingModels, hasLoadedModels, modelsError, refreshModels, currentUser } = useChat();
 	const { strings } = useChatConfig();
+	const { common } = useStrings();
 	const t = strings.modelPicker;
 	const targetSessionFound = !!targetSession && models.some((m) => m.id.startsWith(`session:${targetSession}/`));
 	const targetSessionStatus = !targetSession ? null : isLoadingModels ? "connecting" : hasLoadedModels && !targetSessionFound ? "offline" : null;
 	const groups = useMemo(() => {
 		const status = (label, description) => ({
 			label,
-			icon: /* @__PURE__ */ jsx(FaCloud, { className: "h-3 w-3 text-amber-500" }),
+			icon: /* @__PURE__ */ jsx(CloudIcon, { className: "h-3 w-3 text-amber-500" }),
 			description,
 			items: []
 		});
@@ -106,20 +105,20 @@ function ModelSelector({ targetSession }) {
 		t
 	]);
 	if (isLoadingModels && models.length === 0 && !targetSession) return /* @__PURE__ */ jsx("span", {
-		className: clsx(chipClassName, "cursor-default animate-pulse"),
+		className: cx(chipClassName, "cursor-default animate-pulse"),
 		children: t.loading
 	});
 	if (modelsError && models.length === 0) return /* @__PURE__ */ jsxs("span", {
-		className: clsx(chipClassName, "cursor-default text-(--theme-error)"),
+		className: cx(chipClassName, "cursor-default text-(--theme-error)"),
 		children: [t.failed, /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			onClick: () => refreshModels(),
-			className: "flex items-center gap-1 text-xs text-(--theme-element) hover:underline",
-			children: [/* @__PURE__ */ jsx(FaUndoAlt, { className: "h-2.5 w-2.5" }), t.retry]
+			className: "flex items-center gap-1 text-xs text-(--theme-accent) hover:underline",
+			children: [/* @__PURE__ */ jsx(RetryIcon, { className: "h-2.5 w-2.5" }), common.retry]
 		})]
 	});
 	if (groups.length === 0 && hasLoadedModels) return /* @__PURE__ */ jsx("span", {
-		className: clsx(chipClassName, "cursor-default"),
+		className: cx(chipClassName, "cursor-default"),
 		children: t.none
 	});
 	const selected = models.find((m) => m.id === selectedProvider);
@@ -144,11 +143,11 @@ function ModelSelector({ targetSession }) {
 					className: "max-w-[45%] shrink-0 truncate text-xs",
 					children: selected.provider
 				}),
-				issue && /* @__PURE__ */ jsx(FaExclamationTriangle, { className: "h-3.5 w-3.5 shrink-0 text-amber-500" })
+				issue && /* @__PURE__ */ jsx(WarningIcon, { className: "h-3.5 w-3.5 shrink-0 text-amber-500" })
 			] }) : /* @__PURE__ */ jsx("span", {
-				className: clsx("truncate", targetSessionStatus === "connecting" && "animate-pulse"),
+				className: cx("truncate", targetSessionStatus === "connecting" && "animate-pulse"),
 				children: targetSessionStatus === "connecting" ? t.connecting : t.select
-			}), /* @__PURE__ */ jsx(FaChevronDown, { className: "h-3 w-3 shrink-0" })]
+			}), /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3 w-3 shrink-0" })]
 		})
 	});
 }

package/dist/ai/components/PastedText.js

@@ -1,42 +1,46 @@
-import { FiFile } from "../../icons/fi/FiFile.js";
-import { FiX } from "../../icons/fi/FiX.js";
-import { ImSpinner5 } from "../../icons/im/ImSpinner5.js";
+import { cx } from "../../cx.js";
+import { FileIcon, RemoveIcon } from "../../icons.js";
+import { Loader } from "../../components/Loader.js";
+import { formatBytes } from "../../format.js";
 import { useChatConfig } from "../core/config.js";
-import { formatFileSize } from "../utils.js";
 import Markdown from "../ui/Markdown.js";
 import { fencePaste } from "../core/pasteLanguage.js";
 import { splitPastes } from "../core/pastes.js";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1 } from "react";
 //#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 }) {
 	const t = useChatConfig().strings.paste;
-	const detail = error ?? (saving ? t.saving : `${t.lines(lines)} · ${formatFileSize(bytes)}`);
+	const detail = error ?? (saving ? t.saving : `${t.lines(lines)} · ${formatBytes(bytes)}`);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-testid": "paste-file-card",
-		className: clsx("inline-flex max-w-full items-center gap-2.5 rounded-xl px-3 py-2 align-top whitespace-normal", "bg-(--theme-panel-bg)", error ? "border border-red-500" : "chat-hairline"),
+		className: cx("inline-flex max-w-full items-center gap-2.5 rounded-xl px-3 py-2 align-top whitespace-normal", "bg-(--theme-panel-bg)", error ? "border border-red-500" : "chat-hairline"),
 		children: [
-			/* @__PURE__ */ jsx(FiFile, { className: "h-5 w-5 flex-shrink-0 theme-muted-text" }),
+			/* @__PURE__ */ jsx(FileIcon, { className: "h-5 w-5 flex-shrink-0 theme-muted-text" }),
 			/* @__PURE__ */ jsxs("div", {
 				className: "min-w-0 text-left leading-tight",
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "truncate text-sm font-medium theme-text",
 					children: id ? `paste-${id}.txt` : t.title
 				}), /* @__PURE__ */ jsx("div", {
-					className: clsx("truncate text-xs", error ? "text-red-500" : "theme-muted-text"),
+					className: cx("truncate text-xs", error ? "text-red-500" : "theme-muted-text"),
 					children: detail
 				})]
 			}),
-			saving && /* @__PURE__ */ jsx(ImSpinner5, { className: "h-3.5 w-3.5 flex-shrink-0 animate-spin theme-muted-text" }),
+			saving && /* @__PURE__ */ jsx(Loader, {
+				inline: true,
+				decorative: true,
+				size: 14,
+				color: "var(--theme-muted-text-color)"
+			}),
 			onRemove && /* @__PURE__ */ jsx("button", {
 				type: "button",
 				onClick: onRemove,
 				"aria-label": t.remove,
 				title: t.remove,
 				className: "flex-shrink-0 rounded p-0.5 theme-muted-text hover:theme-text",
-				children: /* @__PURE__ */ jsx(FiX, { className: "h-3.5 w-3.5" })
+				children: /* @__PURE__ */ jsx(RemoveIcon, { className: "h-3.5 w-3.5" })
 			})
 		]
 	});
@@ -48,7 +52,7 @@ function UserMessageText({ content, pastes }) {
 	if (!pastes?.length) return /* @__PURE__ */ jsx(Fragment, { children: content });
 	const segments = splitPastes(content, pastes);
 	const shows = (seg) => typeof seg !== "string" || seg.trim() !== "";
-	const blockSpacing = (i) => clsx(segments.slice(0, i).some(shows) ? "mt-2.5" : "mt-0", segments.slice(i + 1).some(shows) ? "mb-2.5" : "mb-0");
+	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) => {
 		if (typeof segment === "string") {
 			let text = segment;
@@ -57,11 +61,11 @@ function UserMessageText({ content, pastes }) {
 			return text ? /* @__PURE__ */ jsx(Fragment$1, { children: text }, i) : null;
 		}
 		if (segment.inline && segment.text !== void 0) return /* @__PURE__ */ jsx("span", {
-			className: clsx("chat-paste-code block", blockSpacing(i)),
+			className: cx("chat-paste-code block", blockSpacing(i)),
 			children: /* @__PURE__ */ jsx(Markdown, { children: fencePaste(segment.text) })
 		}, i);
 		return /* @__PURE__ */ jsx("span", {
-			className: clsx("flex [&>*]:flex-1", blockSpacing(i)),
+			className: cx("flex [&>*]:flex-1", blockSpacing(i)),
 			children: /* @__PURE__ */ jsx(PasteFileCard, {
 				id: segment.id,
 				lines: segment.lines,

package/dist/ai/components/ProviderIssueBanner.js

@@ -1,5 +1,4 @@
-import { FaExclamationTriangle } from "../../icons/fa/FaExclamationTriangle.js";
-import { IoSettingsOutline } from "../../icons/io5/IoSettingsOutline.js";
+import { SettingsIcon, WarningIcon } from "../../icons.js";
 import { useChatConfig } from "../core/config.js";
 import { issueDetail, providerIssueFor } from "../core/providerIssues.js";
 import { useChat } from "../core/ChatProvider.js";
@@ -22,7 +21,7 @@ function ProviderIssueBanner() {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "mx-4 mt-2 flex items-start gap-3 p-3 rounded-lg bg-amber-500/10 border border-amber-500/20",
 		children: [
-			/* @__PURE__ */ jsx(FaExclamationTriangle, { className: "w-4 h-4 text-amber-500 shrink-0 mt-0.5" }),
+			/* @__PURE__ */ jsx(WarningIcon, { className: "w-4 h-4 text-amber-500 shrink-0 mt-0.5" }),
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex-1 min-w-0",
 				children: [/* @__PURE__ */ jsx("p", {
@@ -39,7 +38,7 @@ function ProviderIssueBanner() {
 					href: settingsHref
 				},
 				className: "flex shrink-0 items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-amber-700 transition-colors hover:bg-amber-500/10",
-				children: [/* @__PURE__ */ jsx(IoSettingsOutline, { className: "h-3.5 w-3.5" }), strings.modelPicker.manageProvider]
+				children: [/* @__PURE__ */ jsx(SettingsIcon, { className: "h-3.5 w-3.5" }), strings.modelPicker.manageProvider]
 			})
 		]
 	});

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

@@ -1,12 +1,18 @@
 import type { ReactNode } from 'react';
-/** The line a turn's reasoning folds under. It opens the reasoning in place,
- *  above the answer it led to, rather than in a panel the eye has to cross
- *  the page to read. */
-export declare function ReasoningToggle({ open, onToggle, shimmer, children, }: {
-    open: boolean;
-    onToggle: () => void;
+/** A turn's reasoning, folded under a line such as "Thought for 5s". It opens
+ *  in place, above the answer it led to, rather than in a panel the eye has to
+ *  cross the page to read; with `onOpenPanel` the host shows it elsewhere
+ *  instead. */
+export declare function Reasoning({ label, shimmer, open, onOpenChange, onOpenPanel, preview, children, }: {
+    label: ReactNode;
     /** While the model is still thinking the label shimmers. */
     shimmer?: boolean;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Shows the reasoning in the host's own panel in place of opening it here. */
+    onOpenPanel?: (() => void) | undefined;
+    /** Shown under the folded line, such as the latest lines while it streams. */
+    preview?: ReactNode;
     children: ReactNode;
 }): import("react").JSX.Element;
 /** The reasoning itself: smaller and quieter than the answer, hung off a

package/dist/ai/components/Reasoning.js

@@ -1,29 +1,42 @@
-import { LuChevronRight } from "../../icons/lu/LuChevronRight.js";
-import { clsx } from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../../cx.js";
+import { ChevronRightIcon } from "../../icons.js";
+import { Disclosure } from "../../components/Disclosure.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/Reasoning.tsx
-/** The line a turn's reasoning folds under. It opens the reasoning in place,
-*  above the answer it led to, rather than in a panel the eye has to cross
-*  the page to read. */
-function ReasoningToggle({ open, onToggle, shimmer = false, children }) {
-	return /* @__PURE__ */ jsxs("button", {
-		type: "button",
-		onClick: onToggle,
-		"aria-expanded": open,
-		className: "group/reasoning -ml-1 flex items-center gap-x-1 rounded-md px-1 py-0.5 text-sm theme-muted-text transition-colors hover:theme-text",
-		children: [/* @__PURE__ */ jsx("span", {
-			className: clsx(shimmer && "animate-shimmer text-shimmer"),
-			children
-		}), /* @__PURE__ */ jsx(LuChevronRight, { className: clsx("h-3.5 w-3.5 transition-transform duration-200 motion-reduce:transition-none", open && "rotate-90") })]
+var toggleClasses = "-ml-1 rounded-md px-1 py-0.5 text-sm theme-muted-text transition-colors hover:theme-text";
+/** A turn's reasoning, folded under a line such as "Thought for 5s". It opens
+*  in place, above the answer it led to, rather than in a panel the eye has to
+*  cross the page to read; with `onOpenPanel` the host shows it elsewhere
+*  instead. */
+function Reasoning({ label, shimmer = false, open, onOpenChange, onOpenPanel, preview, children }) {
+	const shown = /* @__PURE__ */ jsx("span", {
+		className: cx(shimmer && "animate-shimmer text-shimmer"),
+		children: label
 	});
+	if (onOpenPanel) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: onOpenPanel,
+		className: cx("flex items-center gap-1", toggleClasses),
+		children: [shown, /* @__PURE__ */ jsx(ChevronRightIcon, {
+			"aria-hidden": "true",
+			className: "h-3.5 w-3.5"
+		})]
+	}), preview] });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Disclosure, {
+		summary: shown,
+		open,
+		onOpenChange,
+		summaryClassName: toggleClasses,
+		children: /* @__PURE__ */ jsx(ReasoningBody, { children })
+	}), !open && preview] });
 }
 /** The reasoning itself: smaller and quieter than the answer, hung off a
 *  hairline of the accent so it reads as the assistant's aside. */
 function ReasoningBody({ className, children }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("chat-reasoning-body ml-1 mt-1.5 mb-3 pl-4 text-sm leading-relaxed theme-muted-text", className),
+		className: cx("chat-reasoning-body ml-1 mt-1.5 mb-3 pl-4 text-sm leading-relaxed theme-muted-text", className),
 		children
 	});
 }
 //#endregion
-export { ReasoningBody, ReasoningToggle };
+export { Reasoning, ReasoningBody };

package/dist/ai/components/ShareDialog.js

@@ -1,9 +1,11 @@
-import { BiSolidTrashAlt } from "../../icons/bi/BiSolidTrashAlt.js";
-import { PiShareBold } from "../../icons/pi/PiShareBold.js";
+import { ShareIcon, TrashIcon } from "../../icons.js";
+import { Loader } from "../../components/Loader.js";
+import { toast } from "../../components/Toast.js";
 import { Tooltip } from "../../components/Tooltip.js";
+import { useStrings } from "../../components/Provider.js";
+import { Checkbox } from "../../components/Checkbox.js";
 import { Combobox } from "../../components/Combobox.js";
 import { ConfirmModal } from "../../components/ConfirmModal.js";
-import Loader from "../../components/Loader.js";
 import { Select } from "../../components/Select.js";
 import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
@@ -15,8 +17,9 @@ function isTeamPermission(p) {
 }
 function ShareDialog({ conversationId, isOpen, onClose }) {
 	const { strings } = useChatConfig();
+	const { common } = useStrings();
 	const t = strings.shareConversation;
-	const { adapter, notify } = useChat();
+	const { adapter } = useChat();
 	const sharing = adapter.sharing;
 	const [permissions, setPermissions] = useState([]);
 	const [teams, setTeams] = useState([]);
@@ -47,7 +50,7 @@ function ShareDialog({ conversationId, isOpen, onClose }) {
 				setTeams(await sharing.listGroups());
 			} catch (error) {
 				console.error("Failed to load sharing data:", error);
-				notify.error(t.loadError);
+				toast.error(t.loadError);
 			} finally {
 				setLoading(false);
 			}
@@ -57,7 +60,6 @@ function ShareDialog({ conversationId, isOpen, onClose }) {
 		isOpen,
 		conversationId,
 		sharing,
-		notify,
 		t.loadError
 	]);
 	const handleSave = useCallback(() => {
@@ -85,10 +87,10 @@ function ShareDialog({ conversationId, isOpen, onClose }) {
 				}
 				for (const original of originalTeamPerms) if (!currentTeamPerms.find((p) => p.team === original.team) && original.id) await sharing.removePermission(conversationId, original.id);
 			} catch (error) {
-				notify.error(error instanceof Error ? error.message : String(error));
+				toast.error(error instanceof Error ? error.message : String(error));
 				return;
 			}
-			notify.success(t.saveSuccess);
+			toast.success(t.saveSuccess);
 			onClose();
 		});
 	}, [
@@ -100,7 +102,6 @@ function ShareDialog({ conversationId, isOpen, onClose }) {
 		orgCollaborateAccess,
 		originalOrgCollaborateAccess,
 		onClose,
-		notify,
 		t.saveSuccess
 	]);
 	const handleAddTeam = useCallback((teamId) => {
@@ -137,8 +138,8 @@ function ShareDialog({ conversationId, isOpen, onClose }) {
 		onClose,
 		align: "center",
 		title: t.title,
-		confirmLabel: strings.modal.save,
-		cancelLabel: strings.modal.cancel,
+		confirmLabel: common.save,
+		cancelLabel: common.cancel,
 		onConfirm: handleSave,
 		confirmDisabled: saving,
 		children: /* @__PURE__ */ jsx("div", {
@@ -147,7 +148,7 @@ function ShareDialog({ conversationId, isOpen, onClose }) {
 				className: "py-4",
 				children: /* @__PURE__ */ jsx(Loader, {
 					size: 24,
-					text: strings.modal.loading
+					label: common.loading
 				})
 			}) : /* @__PURE__ */ jsxs(Fragment, { children: [
 				/* @__PURE__ */ jsxs("div", {
@@ -159,26 +160,22 @@ function ShareDialog({ conversationId, isOpen, onClose }) {
 						className: "space-y-2",
 						children: [/* @__PURE__ */ jsxs("label", {
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ jsx("input", {
-								type: "checkbox",
+							children: [/* @__PURE__ */ jsx(Checkbox, {
 								checked: orgViewAccess,
-								onChange: (e) => {
-									setOrgViewAccess(e.target.checked);
-									if (!e.target.checked) setOrgCollaborateAccess(false);
-								},
-								className: "rounded"
+								onCheckedChange: (on) => {
+									setOrgViewAccess(on);
+									if (!on) setOrgCollaborateAccess(false);
+								}
 							}), /* @__PURE__ */ jsx("span", {
 								className: "text-sm",
 								children: t.orgCanView
 							})]
 						}), /* @__PURE__ */ jsxs("label", {
 							className: "flex items-center gap-2 ml-4",
-							children: [/* @__PURE__ */ jsx("input", {
-								type: "checkbox",
+							children: [/* @__PURE__ */ jsx(Checkbox, {
 								checked: orgCollaborateAccess,
-								onChange: (e) => setOrgCollaborateAccess(e.target.checked),
-								disabled: !orgViewAccess,
-								className: "rounded"
+								onCheckedChange: setOrgCollaborateAccess,
+								disabled: !orgViewAccess
 							}), /* @__PURE__ */ jsx("span", {
 								className: "text-sm",
 								children: t.allowCollaboration
@@ -213,13 +210,13 @@ function ShareDialog({ conversationId, isOpen, onClose }) {
 											"aria-label": perm.teamName || perm.team
 										})
 									}), /* @__PURE__ */ jsx(Tooltip, {
-										content: t.remove,
+										content: common.remove,
 										children: /* @__PURE__ */ jsx("button", {
 											type: "button",
 											onClick: () => handleRemoveTeam(perm.team),
 											className: "p-1 rounded hover:bg-red-500/10",
-											"aria-label": `${t.remove} ${perm.teamName || perm.team}`,
-											children: /* @__PURE__ */ jsx(BiSolidTrashAlt, { className: "w-3 h-3 text-red-500" })
+											"aria-label": `${common.remove} ${perm.teamName || perm.team}`,
+											children: /* @__PURE__ */ jsx(TrashIcon, { className: "w-3 h-3 text-red-500" })
 										})
 									})]
 								})]
@@ -261,7 +258,7 @@ function ShareButton({ conversationId, disabled = false }) {
 		disabled,
 		className: "flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] theme-muted-text transition-colors hover:theme-muted-panel hover:theme-text disabled:opacity-50",
 		title: strings.shareConversation.shareButton,
-		children: [/* @__PURE__ */ jsx(PiShareBold, { className: "h-3 w-3" }), strings.shareConversation.shareButton]
+		children: [/* @__PURE__ */ jsx(ShareIcon, { className: "h-3 w-3" }), strings.shareConversation.shareButton]
 	}), /* @__PURE__ */ jsx(ShareDialog, {
 		conversationId,
 		isOpen,

package/dist/ai/components/SlashMenu.js

@@ -1,5 +1,5 @@
+import { cx } from "../../cx.js";
 import { panelClassName, panelItemClassName } from "../../components/floating.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useState } from "react";
 //#region src/ai/components/SlashMenu.tsx
@@ -83,7 +83,7 @@ function SlashMenu({ label, listId, matches, active, onChoose }) {
 		role: "listbox",
 		"aria-label": label,
 		"data-testid": "slash-menu",
-		className: clsx("absolute bottom-full left-0 right-0 z-20 mb-2 overflow-hidden py-1", panelClassName),
+		className: cx("absolute bottom-full left-0 right-0 z-20 mb-2 overflow-hidden py-1", panelClassName),
 		children: matches.map((c, i) => /* @__PURE__ */ jsxs("div", {
 			id: optionId(listId, i),
 			role: "option",
@@ -92,7 +92,7 @@ function SlashMenu({ label, listId, matches, active, onChoose }) {
 			"data-highlighted": i === active || void 0,
 			onMouseDown: (e) => e.preventDefault(),
 			onClick: () => onChoose(c.name),
-			className: clsx("items-baseline gap-3", panelItemClassName),
+			className: cx("items-baseline gap-3", panelItemClassName),
 			children: [/* @__PURE__ */ jsxs("span", {
 				className: "font-mono",
 				children: ["/", c.name]