@parallelworks/ui 0.77.0 → 0.79.0

package/dist/ai/components/SlashMenu.js

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

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

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

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

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

package/dist/ai/components/conversationActions.js

@@ -1,13 +1,13 @@
+import { useContextMenu } from "../../components/ContextMenu.js";
 import { toast } from "../../components/Toast.js";
 import { useStrings } from "../../components/Provider.js";
-import { useContextMenu } from "../../components/ContextMenu.js";
 import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
 import { useRowDialogs, useSessionMenu } from "../ui/sidebar.js";
 import { conversationToMarkdown, downloadText, exportFilename } from "../core/exportConversation.js";
 import ShareDialog from "./ShareDialog.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { DateTime } from "luxon";
 //#region src/ai/components/conversationActions.tsx
 /** Conversations by how long ago they last changed, the time each row shows,
@@ -73,7 +73,7 @@ function useConversationActions() {
 	return {
 		menuItems,
 		openMenu,
-		overlays: /* @__PURE__ */ jsxs(Fragment, { children: [
+		overlays: /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			contextMenu,
 			dialogs,
 			sharing && /* @__PURE__ */ jsx(ShareDialog, {

package/dist/ai/core/ChatProvider.js

@@ -6,8 +6,8 @@ import { ChatConfigProvider, resolveChatConfig } from "./config.js";
 import { providerIssueFor } from "./providerIssues.js";
 import { ReportSidebarPresentationContext, useControllable, useOwnSidebar } from "./sidebarState.js";
 import { useSSEStream } from "./useSSEStream.js";
-import { jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
 import { DateTime } from "luxon";
 //#region src/ai/core/ChatProvider.tsx
 function generateTitleFromMessage(content) {

package/dist/ai/core/config.js

@@ -1,7 +1,7 @@
 import { AppLink } from "../../components/AppLink.js";
 import { defaultChatStrings } from "../strings.js";
-import { jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/ai/core/config.tsx
 function hrefFor(target) {
 	switch (target.kind) {

package/dist/ai/ui/ConversationSidebar.js

@@ -1,12 +1,12 @@
 import { cx } from "../../cx.js";
-import { positionKeys } from "../../components/keys.js";
 import { usePersistedState } from "../../components/Provider.js";
+import { positionKeys } from "../../components/keys.js";
 import { LoadingRegion, Skeleton } from "../../components/Skeleton.js";
 import { useSplitter } from "../../components/splitter.js";
 import { Drawer } from "../../components/Drawer.js";
 import { SidebarGroupHeading, SidebarPanel, SidebarToggle } from "./sidebar.js";
+import { Fragment, useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, useEffect, useRef } from "react";
 /** A conversation list's drawer on a layout too narrow to keep it beside the
 *  content: it covers the chat's own positioned container, not the window, and
 *  stays mounted so the list keeps its scroll and search between openings. */
@@ -101,7 +101,7 @@ 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$1, { children: renderRow(item) }, getKey(item)))
+						children: group.items.map((item) => /* @__PURE__ */ jsx(Fragment, { children: renderRow(item) }, getKey(item)))
 					})]
 				}, group.key))
 			}),

package/dist/ai/ui/sidebar.js

@@ -1,17 +1,17 @@
 import { cx } from "../../cx.js";
+import { EmptyState } from "../../components/EmptyState.js";
 import { DownloadIcon, RenameIcon, ShareIcon, SidebarIcon, TrashIcon } from "../../icons.js";
 import { Tooltip } from "../../components/Tooltip.js";
 import { useStrings } from "../../components/Provider.js";
 import { AppLink, isPlainClick } from "../../components/AppLink.js";
-import { EmptyState } from "../../components/EmptyState.js";
 import { menuDivider } from "../../components/MenuEntries.js";
 import { IconButton } from "../../components/IconButton.js";
 import { fieldBox } from "../../components/fieldBox.js";
 import { focusOnMount } from "../../components/focus.js";
 import { ConfirmModal } from "../../components/ConfirmModal.js";
 import { MoreButton, rowContextMenuProps, useRowMenuActive } from "../../list/rowMenu.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/ui/sidebar.tsx
 var SIDEBAR_RAIL_WIDTH_PX = 48;
 var HIGHLIGHT_SELECTED = "bg-[color-mix(in_oklab,var(--theme-accent)_12%,transparent)]";
@@ -214,7 +214,7 @@ function useRowDialogs({ strings, nameOf, onDelete, onRename }) {
 			setName(nameOf(item));
 			setToRename(item);
 		},
-		dialogs: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ConfirmModal, {
+		dialogs: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ConfirmModal, {
 			open: toDelete !== null,
 			onClose: () => setToDelete(null),
 			align: "center",