@cueplusplus/ui 0.20.0 → 0.21.0

package/dist/elements/tool-group.js

@@ -1,8 +1,9 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { mono, paper } from "./surfaces.js";
+import { mono } from "./surfaces.js";
+import { ToolStateMark } from "./tool-state.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { CheckIcon, ChevronRightIcon, Loader2Icon, XIcon } from "lucide-react";
+import { ChevronRightIcon, Loader2Icon } from "lucide-react";
 //#region src/elements/tool-group.tsx
 /**
 * Calls that went out together, collapsed to one row until you want the detail.
@@ -17,54 +18,77 @@ import { CheckIcon, ChevronRightIcon, Loader2Icon, XIcon } from "lucide-react";
 *   onOpenChange={setOpen}
 * />
 */
-function ToolGroup({ label, tools, open, onOpenChange, className, ...props }) {
+function ToolGroup({ label, tools, open, onOpenChange, variant = "card", className, ...props }) {
 	const running = tools.filter((tool) => tool.state === "running").length;
 	const failed = tools.filter((tool) => tool.state === "failed").length;
+	const refused = tools.filter((tool) => tool.state === "refused").length;
+	const live = open ? void 0 : tools.find((tool) => tool.state === "running");
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "tool-group",
-		className: cn(paper, "flex w-full max-w-sm flex-col overflow-hidden rounded-overlay", className),
+		"data-variant": variant,
+		className: cn(variant === "card" && "bg-surface-1 border border-border", "flex w-full flex-col overflow-hidden", variant === "card" && "max-w-sm rounded-overlay", className),
 		...props,
-		children: [/* @__PURE__ */ jsxs("button", {
-			type: "button",
-			"aria-expanded": open,
-			onClick: () => onOpenChange?.(!open),
-			className: "hover:bg-surface-1 flex items-center gap-2.5 px-3.5 py-2.5 text-start transition-colors",
-			children: [
-				/* @__PURE__ */ jsx(ChevronRightIcon, { className: cn("text-fg-subtle size-3 shrink-0 transition-transform duration-200 motion-reduce:transition-none", open && "rotate-90") }),
-				/* @__PURE__ */ jsx("span", {
-					className: "min-w-0 flex-1 truncate text-(length:--cue-text-body)",
-					children: label
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: cn(mono, "text-fg-subtle shrink-0 tabular-nums"),
-					children: running > 0 ? `${tools.length - running}/${tools.length}` : failed > 0 ? `${failed} failed` : `${tools.length} done`
-				}),
-				running > 0 ? /* @__PURE__ */ jsx(Loader2Icon, { className: "text-fg-subtle size-3.5 shrink-0 animate-spin motion-reduce:animate-none" }) : failed > 0 ? /* @__PURE__ */ jsx(XIcon, { className: "size-3.5 shrink-0 text-danger" }) : /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5 shrink-0 text-ok" })
-			]
-		}), open && /* @__PURE__ */ jsx("div", {
-			className: "border-border cue-elements-fade-in cue-elements-slide-in-from-top-1 cue-elements-animate-in flex flex-col border-t duration-200",
-			children: tools.map((tool) => /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2.5 px-3.5 py-2",
+		children: [
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"aria-expanded": open,
+				onClick: () => onOpenChange?.(!open),
+				className: "hover:bg-surface-1 flex items-center gap-2.5 px-3.5 py-2.5 text-start transition-colors",
 				children: [
+					/* @__PURE__ */ jsx(ChevronRightIcon, { className: cn("text-fg-subtle size-3 shrink-0 transition-transform duration-brisk motion-reduce:transition-none", open && "rotate-90") }),
 					/* @__PURE__ */ jsx("span", {
-						className: "flex size-3.5 shrink-0 items-center justify-center",
-						children: tool.state === "running" ? /* @__PURE__ */ jsx(Loader2Icon, { className: "text-fg-subtle size-3 animate-spin motion-reduce:animate-none" }) : tool.state === "failed" ? /* @__PURE__ */ jsx(XIcon, { className: "size-3 text-danger" }) : /* @__PURE__ */ jsx(CheckIcon, { className: "size-3 text-ok" })
+						className: "min-w-0 flex-1 truncate text-(length:--cue-text-body)",
+						children: label
 					}),
 					/* @__PURE__ */ jsx("span", {
-						className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-muted shrink-0"),
-						children: tool.name
+						className: cn(mono, "text-fg-subtle shrink-0 tabular-nums"),
+						children: running > 0 ? `${tools.length - running}/${tools.length}` : failed > 0 ? `${failed} failed` : refused > 0 ? `${refused} refused` : `${tools.length} done`
 					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "text-fg-muted min-w-0 flex-1 truncate text-(length:--cue-text-body)",
-						children: tool.target
-					}),
-					tool.durationMs !== void 0 && /* @__PURE__ */ jsxs("span", {
-						className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle shrink-0 tabular-nums"),
-						children: [tool.durationMs, "ms"]
+					running > 0 ? /* @__PURE__ */ jsx(Loader2Icon, { className: "text-fg-subtle size-3.5 shrink-0 animate-spin motion-reduce:animate-none" }) : /* @__PURE__ */ jsx(ToolStateMark, {
+						state: failed > 0 ? "failed" : refused > 0 ? "refused" : "done",
+						animated: false,
+						className: "size-3.5 shrink-0"
 					})
 				]
-			}, tool.id))
-		})]
+			}),
+			live !== void 0 && /* @__PURE__ */ jsxs("p", {
+				"data-slot": "tool-group-live",
+				className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle -mt-1.5 truncate px-3.5 pb-2 ps-9"),
+				children: [
+					live.name,
+					" ",
+					live.target
+				]
+			}),
+			open && /* @__PURE__ */ jsx("div", {
+				className: "border-border cue-elements-fade-in cue-elements-slide-in-from-top-1 cue-elements-animate-in flex flex-col border-t duration-brisk",
+				children: tools.map((tool) => /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2.5 px-3.5 py-2",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "flex size-3.5 shrink-0 items-center justify-center",
+							children: tool.state === "running" ? /* @__PURE__ */ jsx(Loader2Icon, { className: "text-fg-subtle size-3 animate-spin motion-reduce:animate-none" }) : /* @__PURE__ */ jsx(ToolStateMark, {
+								state: tool.state,
+								animated: false,
+								className: "size-3"
+							})
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-muted shrink-0"),
+							children: tool.name
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-fg-muted min-w-0 flex-1 truncate text-(length:--cue-text-body)",
+							children: tool.target
+						}),
+						tool.durationMs !== void 0 && /* @__PURE__ */ jsxs("span", {
+							className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle shrink-0 tabular-nums"),
+							children: [tool.durationMs, "ms"]
+						})
+					]
+				}, tool.id))
+			})
+		]
 	});
 }
 //#endregion

package/dist/elements/tool-state.d.ts

@@ -0,0 +1,13 @@
+//#region src/elements/tool-state.d.ts
+/**
+ * Where a tool call got to: still running, finished, failed, or refused before
+ * it ran (cue-ui-51). The four a transcript has to tell apart at a glance.
+ */
+type ToolState = "running" | "done" | "failed" | "refused";
+/**
+ * What kind of nothing an empty result is (cue-ui-52): the call ran and
+ * returned nothing, it was refused, or it was never answered.
+ */
+type ToolAbsence = "none" | "refused" | "unanswered";
+//#endregion
+export { ToolAbsence, ToolState };

package/dist/elements/tool-state.js

@@ -0,0 +1,44 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { BanIcon, CheckIcon, XIcon } from "lucide-react";
+//#region src/elements/tool-state.tsx
+/**
+* A tool call's vocabulary: where it got to, what kind of nothing an empty
+* result is, and the mark a settled call ends its row with (cue-ui-51, 52).
+*
+* cue's own, shared by the vendored `ToolCall` and `ToolGroup` through
+* `scripts/elements-sync` rules. It is a module of its own, not part of
+* `surfaces.tsx`, because the mark draws lucide icons and `surfaces.tsx` is
+* imported by subpaths, `./elements/markdown` among them, that must not pull
+* `lucide-react` in.
+*/
+/** The sentence an empty result shows for each absence. */
+const ABSENCE_TEXT = {
+	none: "No result",
+	refused: "Refused",
+	unanswered: "Not answered"
+};
+/**
+* One state out of `state` and the deprecated `running` flag: `state` wins,
+* and without it `running` decides between running and done.
+*/
+function resolveToolState(state, running) {
+	return state ?? (running ? "running" : "done");
+}
+/**
+* The mark a settled call ends its row with: a check when done, a cross in the
+* danger ink when it failed, and a muted ban when it was refused. A running
+* call draws none, because its label already shimmers.
+*/
+function ToolStateMark({ state, animated = true, className }) {
+	if (state === "running") return null;
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "tool-state-mark",
+		"data-state": state,
+		className: "contents",
+		children: state === "done" ? /* @__PURE__ */ jsx(CheckIcon, { className: cn(animated && "cue-elements-fade-in cue-elements-zoom-in-90 cue-elements-animate-in duration-brisk", "text-ok", className) }) : state === "failed" ? /* @__PURE__ */ jsx(XIcon, { className: cn("text-danger", className) }) : /* @__PURE__ */ jsx(BanIcon, { className: cn("text-fg-muted", className) })
+	});
+}
+//#endregion
+export { ABSENCE_TEXT, ToolStateMark, resolveToolState };

package/dist/elements/tool-timeline.js

@@ -33,7 +33,7 @@ function ToolTimeline({ steps, visibleSteps, streaming, open, onOpenChange, rest
 		className: cn("w-full max-w-sm", className),
 		children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
 			className: `group/trigger text-fg-muted hover:text-fg flex items-center gap-1.5 rounded-control py-1 text-(length:--cue-text-body) transition-colors outline-none ${FOCUS_RING}`,
-			children: [/* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-3.5 shrink-0 opacity-60 transition-transform duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-[panel-open]/trigger:rotate-90 motion-reduce:transition-none" }), /* @__PURE__ */ jsxs(SwapLabel, {
+			children: [/* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-3.5 shrink-0 opacity-60 transition-transform duration-brisk ease-[cubic-bezier(0.32,0.72,0,1)] group-data-[panel-open]/trigger:rotate-90 motion-reduce:transition-none" }), /* @__PURE__ */ jsxs(SwapLabel, {
 				active: streaming ? 0 : 1,
 				className: "text-start tabular-nums",
 				children: [/* @__PURE__ */ jsx(ShimmerLabel, {
@@ -50,7 +50,7 @@ function ToolTimeline({ steps, visibleSteps, streaming, open, onOpenChange, rest
 					const Icon = step.icon;
 					const active = streaming && index === shown.length - 1;
 					return /* @__PURE__ */ jsxs("div", {
-						className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both text-fg-muted flex items-center gap-2 text-(length:--cue-text-body) duration-300",
+						className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both text-fg-muted flex items-center gap-2 text-(length:--cue-text-body) duration-base",
 						children: [
 							/* @__PURE__ */ jsx(Icon, { className: "text-fg-subtle size-3.5 shrink-0" }),
 							/* @__PURE__ */ jsx(ShimmerLabel, {

package/dist/elements/trace-waterfall.js

@@ -38,7 +38,7 @@ function TraceWaterfall({ spans, totalMs, visibleCount, className, ...props }) {
 				const left = pct(item.startMs, span);
 				const width = Math.max(1.5, pct(item.durationMs, span));
 				return /* @__PURE__ */ jsxs("div", {
-					className: "cue-elements-fade-in cue-elements-slide-in-from-left-1 cue-elements-animate-in cue-elements-fill-mode-both grid grid-cols-[7.5rem_1fr_2.5rem] items-center gap-2 duration-300",
+					className: "cue-elements-fade-in cue-elements-slide-in-from-left-1 cue-elements-animate-in cue-elements-fill-mode-both grid grid-cols-[7.5rem_1fr_2.5rem] items-center gap-2 duration-base",
 					children: [
 						/* @__PURE__ */ jsx("span", {
 							className: "text-fg-muted min-w-0 truncate text-(length:--cue-text-ui)",
@@ -48,7 +48,7 @@ function TraceWaterfall({ spans, totalMs, visibleCount, className, ...props }) {
 						/* @__PURE__ */ jsx("span", {
 							className: "relative flex h-4 min-w-0 items-center",
 							children: /* @__PURE__ */ jsx("span", {
-								className: cn("absolute h-[7px] rounded-full transition-[width] duration-500 ease-out motion-reduce:transition-none", TONE[item.status], item.status === "running" && "animate-pulse"),
+								className: cn("absolute h-[7px] rounded-full transition-[width] duration-slow ease-out motion-reduce:transition-none", TONE[item.status], item.status === "running" && "animate-pulse"),
 								style: {
 									insetInlineStart: `${left}%`,
 									width: `${width}%`

package/dist/elements/unsupported-request-card.d.ts

@@ -0,0 +1,31 @@
+import { UnsupportedRequestLabels } from "./vocabulary.js";
+import * as React from "react";
+//#region src/elements/unsupported-request-card.d.ts
+interface UnsupportedRequestCardProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+  /** What the agent asked for, in its words: `Pick a file`, `Open a browser`. */
+  title: string;
+  /** The request's kind as the protocol names it, printed in mono so it can be reported. */
+  kind?: string;
+  /** A supporting line: which agent asked, or what it was doing. */
+  detail?: string;
+  /** Called when the person clears the card. Dismiss is drawn only when this is set. */
+  onDismiss?: () => void;
+  /** Replace any of the card's own copy. */
+  labels?: Partial<UnsupportedRequestLabels>;
+}
+/**
+ * A request this client cannot answer, said plainly, with no answer offered.
+ *
+ * @example
+ * import { UnsupportedRequestCard } from "@cueplusplus/ui/elements";
+ *
+ * <UnsupportedRequestCard
+ *   title="Pick a file"
+ *   kind="file-picker"
+ *   detail="Asked by the coding agent"
+ *   onDismiss={() => dismiss(request.id)}
+ * />
+ */
+declare const UnsupportedRequestCard: React.ForwardRefExoticComponent<UnsupportedRequestCardProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { UnsupportedRequestCard, UnsupportedRequestCardProps };

package/dist/elements/unsupported-request-card.js

@@ -0,0 +1,80 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mono, paper } from "./surfaces.js";
+import { UNSUPPORTED_REQUEST_LABELS } from "./vocabulary.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleSlashIcon } from "lucide-react";
+//#region src/elements/unsupported-request-card.tsx
+/**
+* A request this client cannot answer, said plainly, with no answer offered.
+*
+* @example
+* import { UnsupportedRequestCard } from "@cueplusplus/ui/elements";
+*
+* <UnsupportedRequestCard
+*   title="Pick a file"
+*   kind="file-picker"
+*   detail="Asked by the coding agent"
+*   onDismiss={() => dismiss(request.id)}
+* />
+*/
+const UnsupportedRequestCard = React.forwardRef(function UnsupportedRequestCard({ title, kind, detail, onDismiss, labels, className, ...elementProps }, ref) {
+	const copy = {
+		...UNSUPPORTED_REQUEST_LABELS,
+		...labels
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "unsupported-request-card",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-3.5 rounded-overlay p-4", className),
+		...elementProps,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "bg-surface-1 text-fg-muted flex size-9 shrink-0 items-center justify-center rounded-surface",
+						children: /* @__PURE__ */ jsx(CircleSlashIcon, {
+							"aria-hidden": true,
+							className: "size-4"
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 flex-col",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "text-(length:--cue-text-body) font-medium",
+							children: title
+						}), detail === void 0 ? null : /* @__PURE__ */ jsx("p", {
+							className: "text-fg-muted text-(length:--cue-text-ui)",
+							children: detail
+						})]
+					}),
+					kind === void 0 ? null : /* @__PURE__ */ jsx("span", {
+						className: cn(mono, "text-fg-subtle ms-auto shrink-0 truncate"),
+						children: kind
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: "text-fg-muted text-(length:--cue-text-ui)",
+				children: [
+					copy.cannot,
+					" ",
+					copy.where
+				]
+			}),
+			onDismiss === void 0 ? null : /* @__PURE__ */ jsx("div", {
+				className: "flex h-8 items-center justify-end",
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onDismiss,
+					className: "text-fg-muted hover:bg-surface-2 hover:text-fg h-8 rounded-full px-3.5 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-fast active:scale-[0.96]",
+					children: copy.dismiss
+				})
+			})
+		]
+	});
+});
+//#endregion
+export { UnsupportedRequestCard };

package/dist/elements/vocabulary.d.ts

@@ -498,6 +498,55 @@ declare const PERMISSION_LABELS: {
 };
 /** The six pieces of copy a {@link PermissionScopes} draws for itself. */
 type PermissionLabels = Record<keyof typeof PERMISSION_LABELS, string>;
+/** The copy an {@link EventFeed} draws for itself. */
+declare const EVENT_FEED_LABELS: {
+  /** The chip that keeps every kind. */
+  readonly all: "All";
+  /** The accessible name of the row of chips. */
+  readonly filter: "Filter events";
+  /** What the feed says when the filter keeps nothing. */
+  readonly empty: "No events";
+};
+/** The three pieces of copy an {@link EventFeed} draws for itself. */
+type EventFeedLabels = Record<keyof typeof EVENT_FEED_LABELS, string>;
+/**
+ * Where a person's answer to an agent's request has got to (cue-ui-57).
+ *
+ * Delivery, not outcome. `sent` says the answer arrived, and it does not say
+ * the tool then ran: a card that drew "done" when the answer was merely
+ * delivered would be making a claim on the agent's behalf. The outcome is the
+ * card's own `state`, and once there is one it wins.
+ */
+declare const REQUEST_DELIVERIES: readonly ["sending", "sent", "failed"];
+/** One of {@link REQUEST_DELIVERIES}. */
+type RequestDelivery = (typeof REQUEST_DELIVERIES)[number];
+/**
+ * What a request card says about its answer's delivery. `failed` asks for the
+ * retry, because the card draws its decisions again beside it.
+ */
+declare const DELIVERY_LABELS: Record<RequestDelivery, string>;
+/** The copy a {@link QuestionCard} draws for itself. */
+declare const QUESTION_LABELS: {
+  /** The button that sends the answer. */
+  readonly send: "Send";
+  /** The button that declines to answer, drawn only when the question can be skipped. */
+  readonly skip: "Skip";
+  /** The field's placeholder when the caller names none. */
+  readonly placeholder: "Type your answer";
+};
+/** The three pieces of copy a {@link QuestionCard} draws for itself. */
+type QuestionLabels = Record<keyof typeof QUESTION_LABELS, string>;
+/** The copy an {@link UnsupportedRequestCard} draws for itself. */
+declare const UNSUPPORTED_REQUEST_LABELS: {
+  /** What the card says about itself. */
+  readonly cannot: "This app can't answer this request.";
+  /** Where the person can answer it instead. */
+  readonly where: "Answer it where the agent is running.";
+  /** The button that clears the card, drawn only when the caller can. */
+  readonly dismiss: "Dismiss";
+};
+/** The three pieces of copy an {@link UnsupportedRequestCard} draws for itself. */
+type UnsupportedRequestLabels = Record<keyof typeof UNSUPPORTED_REQUEST_LABELS, string>;
 /**
  * How dangerous the runtime says this call is — OpenHands' `SecurityRisk`, in
  * its own four values.
@@ -609,4 +658,4 @@ declare const ANNOUNCEMENTS: {
 /** The nine templates a {@link LiveRegionAnnouncer} is usually fed. */
 type Announcements = Record<keyof typeof ANNOUNCEMENTS, string>;
 //#endregion
-export { AGENT_MODES, AGENT_MODE_DESCRIPTIONS, AGENT_MODE_LABELS, ANNOUNCEMENTS, AgentMode, Announcements, CLAMP_LABELS, COMPACTION_LABELS, COMPACTION_STATES, CONTEXT_CATEGORY_LABELS, CONTEXT_LABELS, CONTEXT_STAT_LABELS, ClampLabels, CompactionState, ContextLabels, PERMISSION_LABELS, PERMISSION_SCOPE_LABELS, PermissionLabels, QUEUE_LABELS, QueueLabels, REVERT_LABELS, REVERT_SCOPES, REVERT_SCOPE_DESCRIPTIONS, REVERT_SCOPE_LABELS, RISK_LABELS, RevertLabels, RevertScope, SECURITY_RISKS, SecurityRisk, TAIL_ACTIONS, TURN_ACTION_LABELS, TailAction, TurnActionLabels, VERB_TRIADS, VERDICT_LABELS, VerbKind, VerbTense, VerbTriad, VerdictLabels, verbFor };
+export { AGENT_MODES, AGENT_MODE_DESCRIPTIONS, AGENT_MODE_LABELS, ANNOUNCEMENTS, AgentMode, Announcements, CLAMP_LABELS, COMPACTION_LABELS, COMPACTION_STATES, CONTEXT_CATEGORY_LABELS, CONTEXT_LABELS, CONTEXT_STAT_LABELS, ClampLabels, CompactionState, ContextLabels, DELIVERY_LABELS, EVENT_FEED_LABELS, EventFeedLabels, PERMISSION_LABELS, PERMISSION_SCOPE_LABELS, PermissionLabels, QUESTION_LABELS, QUEUE_LABELS, QuestionLabels, QueueLabels, REQUEST_DELIVERIES, REVERT_LABELS, REVERT_SCOPES, REVERT_SCOPE_DESCRIPTIONS, REVERT_SCOPE_LABELS, RISK_LABELS, RequestDelivery, RevertLabels, RevertScope, SECURITY_RISKS, SecurityRisk, TAIL_ACTIONS, TURN_ACTION_LABELS, TailAction, TurnActionLabels, UNSUPPORTED_REQUEST_LABELS, UnsupportedRequestLabels, VERB_TRIADS, VERDICT_LABELS, VerbKind, VerbTense, VerbTriad, VerdictLabels, verbFor };

package/dist/elements/vocabulary.js

@@ -495,6 +495,55 @@ const PERMISSION_LABELS = {
 	/** What the always-allow answer says when there is no rule to name. */
 	fallback: "Yes, and don't ask again"
 };
+/** The copy an {@link EventFeed} draws for itself. */
+const EVENT_FEED_LABELS = {
+	/** The chip that keeps every kind. */
+	all: "All",
+	/** The accessible name of the row of chips. */
+	filter: "Filter events",
+	/** What the feed says when the filter keeps nothing. */
+	empty: "No events"
+};
+/**
+* Where a person's answer to an agent's request has got to (cue-ui-57).
+*
+* Delivery, not outcome. `sent` says the answer arrived, and it does not say
+* the tool then ran: a card that drew "done" when the answer was merely
+* delivered would be making a claim on the agent's behalf. The outcome is the
+* card's own `state`, and once there is one it wins.
+*/
+const REQUEST_DELIVERIES = [
+	"sending",
+	"sent",
+	"failed"
+];
+/**
+* What a request card says about its answer's delivery. `failed` asks for the
+* retry, because the card draws its decisions again beside it.
+*/
+const DELIVERY_LABELS = {
+	sending: "Sending",
+	sent: "Sent",
+	failed: "Not sent. Try again."
+};
+/** The copy a {@link QuestionCard} draws for itself. */
+const QUESTION_LABELS = {
+	/** The button that sends the answer. */
+	send: "Send",
+	/** The button that declines to answer, drawn only when the question can be skipped. */
+	skip: "Skip",
+	/** The field's placeholder when the caller names none. */
+	placeholder: "Type your answer"
+};
+/** The copy an {@link UnsupportedRequestCard} draws for itself. */
+const UNSUPPORTED_REQUEST_LABELS = {
+	/** What the card says about itself. */
+	cannot: "This app can't answer this request.",
+	/** Where the person can answer it instead. */
+	where: "Answer it where the agent is running.",
+	/** The button that clears the card, drawn only when the caller can. */
+	dismiss: "Dismiss"
+};
 /**
 * How dangerous the runtime says this call is — OpenHands' `SecurityRisk`, in
 * its own four values.
@@ -608,4 +657,4 @@ const ANNOUNCEMENTS = {
 	answer: "The agent answered: {text}"
 };
 //#endregion
-export { AGENT_MODES, AGENT_MODE_DESCRIPTIONS, AGENT_MODE_LABELS, ANNOUNCEMENTS, CLAMP_LABELS, COMPACTION_LABELS, COMPACTION_STATES, CONTEXT_CATEGORY_LABELS, CONTEXT_LABELS, CONTEXT_STAT_LABELS, PERMISSION_LABELS, PERMISSION_SCOPE_LABELS, QUEUE_LABELS, REVERT_LABELS, REVERT_SCOPES, REVERT_SCOPE_DESCRIPTIONS, REVERT_SCOPE_LABELS, RISK_LABELS, SECURITY_RISKS, TAIL_ACTIONS, TURN_ACTION_LABELS, VERB_TRIADS, VERDICT_LABELS, verbFor };
+export { AGENT_MODES, AGENT_MODE_DESCRIPTIONS, AGENT_MODE_LABELS, ANNOUNCEMENTS, CLAMP_LABELS, COMPACTION_LABELS, COMPACTION_STATES, CONTEXT_CATEGORY_LABELS, CONTEXT_LABELS, CONTEXT_STAT_LABELS, DELIVERY_LABELS, EVENT_FEED_LABELS, PERMISSION_LABELS, PERMISSION_SCOPE_LABELS, QUESTION_LABELS, QUEUE_LABELS, REQUEST_DELIVERIES, REVERT_LABELS, REVERT_SCOPES, REVERT_SCOPE_DESCRIPTIONS, REVERT_SCOPE_LABELS, RISK_LABELS, SECURITY_RISKS, TAIL_ACTIONS, TURN_ACTION_LABELS, UNSUPPORTED_REQUEST_LABELS, VERB_TRIADS, VERDICT_LABELS, verbFor };

package/dist/elements/voice-conversation.js

@@ -51,7 +51,7 @@ function VoiceConversation({ mode, amplitude, transcript, muted, onToggleMute, o
 				children: [
 					/* @__PURE__ */ jsx("span", {
 						"aria-hidden": true,
-						className: cn("absolute rounded-full transition-[transform,opacity] duration-200 ease-out motion-reduce:transition-none", mode === "speaking" ? "bg-stream/15" : "bg-surface-1"),
+						className: cn("absolute rounded-full transition-[transform,opacity] duration-brisk ease-out motion-reduce:transition-none", mode === "speaking" ? "bg-stream/15" : "bg-surface-1"),
 						style: {
 							width: "6rem",
 							height: "6rem",
@@ -61,7 +61,7 @@ function VoiceConversation({ mode, amplitude, transcript, muted, onToggleMute, o
 					}),
 					/* @__PURE__ */ jsx("span", {
 						"aria-hidden": true,
-						className: cn("absolute rounded-full transition-[transform,opacity] duration-150 ease-out motion-reduce:transition-none", mode === "speaking" ? "bg-stream/25" : "bg-surface-2"),
+						className: cn("absolute rounded-full transition-[transform,opacity] duration-fast ease-out motion-reduce:transition-none", mode === "speaking" ? "bg-stream/25" : "bg-surface-2"),
 						style: {
 							width: "4.25rem",
 							height: "4.25rem",
@@ -70,7 +70,7 @@ function VoiceConversation({ mode, amplitude, transcript, muted, onToggleMute, o
 					}),
 					/* @__PURE__ */ jsx("span", {
 						"aria-hidden": true,
-						className: cn("relative size-10 rounded-full transition-[transform,background-color] duration-150 ease-out motion-reduce:transition-none", mode === "connecting" && "bg-surface-3 animate-pulse", mode === "listening" && "bg-accent", mode === "thinking" && "bg-surface-3 animate-pulse", mode === "speaking" && "bg-stream"),
+						className: cn("relative size-10 rounded-full transition-[transform,background-color] duration-fast ease-out motion-reduce:transition-none", mode === "connecting" && "bg-surface-3 animate-pulse", mode === "listening" && "bg-accent", mode === "thinking" && "bg-surface-3 animate-pulse", mode === "speaking" && "bg-stream"),
 						style: { transform: `scale(${active ? .9 + level * .2 : .85})` }
 					})
 				]
@@ -88,7 +88,7 @@ function VoiceConversation({ mode, amplitude, transcript, muted, onToggleMute, o
 			/* @__PURE__ */ jsx("div", {
 				className: "flex min-h-[4.5rem] w-full flex-col gap-1.5",
 				children: transcript.map((turn) => /* @__PURE__ */ jsxs("div", {
-					className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both flex gap-2 text-(length:--cue-text-ui) leading-(--cue-leading-ui) duration-300",
+					className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both flex gap-2 text-(length:--cue-text-ui) leading-(--cue-leading-ui) duration-base",
 					children: [/* @__PURE__ */ jsx("span", {
 						className: cn(mono, "w-8 shrink-0", turn.role === "user" ? "text-fg-subtle" : "text-stream/70"),
 						children: turn.role === "user" ? "you" : "ai"
@@ -113,7 +113,7 @@ function VoiceConversation({ mode, amplitude, transcript, muted, onToggleMute, o
 					"aria-label": "End the call",
 					onClick: onEnd,
 					disabled: !onEnd,
-					className: "flex size-10 items-center justify-center rounded-full bg-danger text-danger-fg transition-[opacity,scale] duration-150 hover:opacity-90 active:scale-[0.96] disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none",
+					className: "flex size-10 items-center justify-center rounded-full bg-danger text-danger-fg transition-[opacity,scale] duration-fast hover:opacity-90 active:scale-[0.96] disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none",
 					children: /* @__PURE__ */ jsx(PhoneOffIcon, { className: "size-4" })
 				})]
 			})

package/dist/elements/web-preview.js

@@ -50,7 +50,7 @@ function WebPreview({ origin, loading, children, onReload, onOpenExternal, class
 			className: "border-border relative min-h-[9rem] border-t",
 			children: [/* @__PURE__ */ jsx("div", {
 				"aria-hidden": loading,
-				className: cn("transition-opacity duration-300 motion-reduce:transition-none", loading && "invisible opacity-0"),
+				className: cn("transition-opacity duration-base motion-reduce:transition-none", loading && "invisible opacity-0"),
 				children
 			}), loading && /* @__PURE__ */ jsx("div", {
 				className: "absolute inset-0 flex items-center justify-center",

package/dist/elements/web-search.js

@@ -35,14 +35,14 @@ function WebSearch({ query, results, visibleResults, searching, cycle, className
 					className: "relative inline-block leading-none",
 					children: "Searching"
 				}) : /* @__PURE__ */ jsx("span", {
-					className: "cue-elements-fade-in cue-elements-animate-in duration-300",
+					className: "cue-elements-fade-in cue-elements-animate-in duration-base",
 					children: "Read 3 sources"
 				})
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "flex min-h-[5.75rem] flex-col",
 				children: take(results, visibleResults).map((result) => /* @__PURE__ */ jsxs("div", {
-					className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both hover:bg-surface-1 -mx-2.5 flex items-center gap-2.5 rounded-surface px-2.5 py-1.5 transition-colors duration-300",
+					className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both hover:bg-surface-1 -mx-2.5 flex items-center gap-2.5 rounded-surface px-2.5 py-1.5 transition-colors duration-base",
 					children: [
 						/* @__PURE__ */ jsx("span", {
 							className: "bg-surface-2 text-fg-muted flex size-4 shrink-0 items-center justify-center rounded-control text-(length:--cue-text-micro) font-medium",

package/dist/elements/work-collapse.js

@@ -115,7 +115,7 @@ const WorkCollapse = React.forwardRef(function WorkCollapse({ durationMs, toolCa
 			className: `hover:bg-surface-1 -mx-2 flex items-center gap-2.5 rounded-control px-2 py-1 text-start transition-colors ${FOCUS_RING} motion-reduce:transition-none`,
 			children: [/* @__PURE__ */ jsx(ChevronRightIcon, {
 				"aria-hidden": true,
-				className: cn("text-fg-subtle size-3 shrink-0 transition-transform duration-200 motion-reduce:transition-none", open && "rotate-90")
+				className: cn("text-fg-subtle size-3 shrink-0 transition-transform duration-brisk motion-reduce:transition-none", open && "rotate-90")
 			}), /* @__PURE__ */ jsx(ShimmerLabel, {
 				active: running,
 				className: "text-fg-muted min-w-0 flex-1 truncate text-(length:--cue-text-ui)",

package/dist/forms/file-upload.js

@@ -145,7 +145,7 @@ const FileUpload = React.forwardRef(function FileUpload({ className, zoneClassNa
 					setDragging(false);
 					intake(event.dataTransfer?.files ?? null);
 				},
-				className: cn(`flex w-full cursor-pointer flex-col items-center justify-center gap-(--cue-space-1) ${FIELD_RADIUS} border border-dashed border-border bg-sunken px-(--cue-space-4) py-(--cue-space-5) font-mono text-(length:--cue-text-ui) text-fg-muted outline-none transition-colors duration-150 hover:border-border-strong hover:text-fg ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-40 data-[dragging=true]:border-accent data-[dragging=true]:bg-accent-soft data-[dragging=true]:text-fg motion-reduce:transition-none`, zoneClassName),
+				className: cn(`flex w-full cursor-pointer flex-col items-center justify-center gap-(--cue-space-1) ${FIELD_RADIUS} border border-dashed border-border bg-sunken px-(--cue-space-4) py-(--cue-space-5) font-mono text-(length:--cue-text-ui) text-fg-muted outline-none transition-colors duration-fast hover:border-border-strong hover:text-fg ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-40 data-[dragging=true]:border-accent data-[dragging=true]:bg-accent-soft data-[dragging=true]:text-fg motion-reduce:transition-none`, zoneClassName),
 				children: [/* @__PURE__ */ jsx("span", { children: label }), hint === void 0 ? null : /* @__PURE__ */ jsx("span", {
 					className: "text-(length:--cue-text-label) text-fg-subtle",
 					children: hint

package/dist/forms/rating.js

@@ -11,7 +11,7 @@ const MARK_SIZES = {
 	md: "size-icon-md",
 	lg: "size-[calc(var(--cue-icon-md)*1.35)]"
 };
-const MARK_CLASSES = `flex cursor-pointer items-center justify-center border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-150 outline-none hover:text-accent ${FOCUS_RING_OFFSET_2} disabled:pointer-events-none disabled:opacity-40 aria-checked:text-accent`;
+const MARK_CLASSES = `flex cursor-pointer items-center justify-center border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast outline-none hover:text-accent ${FOCUS_RING_OFFSET_2} disabled:pointer-events-none disabled:opacity-40 aria-checked:text-accent`;
 /**
 * A 0–N rating, drawn as marks.
 *

package/dist/forms/select.js

@@ -72,7 +72,7 @@ const Select$1 = React.forwardRef(function Select$2({ items, value, defaultValue
 				alignItemWithTrigger: false,
 				children: /* @__PURE__ */ jsx(Select.Popup, {
 					"data-slot": "select-popup",
-					className: cn(`min-w-(--anchor-width) origin-(--transform-origin) overflow-hidden rounded-overlay ${STROKE_SURFACE_2} ${LISTBOX_PAD} ${ELEVATION_2} outline-none`, "transition-[opacity,scale] duration-100 ease-out motion-reduce:transition-none", "data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0", "data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0", popupClassName),
+					className: cn(`min-w-(--anchor-width) origin-(--transform-origin) overflow-hidden rounded-overlay ${STROKE_SURFACE_2} ${LISTBOX_PAD} ${ELEVATION_2} outline-none`, "transition-[opacity,scale] duration-instant ease-out motion-reduce:transition-none", "data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0", "data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0", popupClassName),
 					children: /* @__PURE__ */ jsx(Select.List, {
 						className: "max-h-(--available-height) overflow-y-auto",
 						children: items.map((item) => /* @__PURE__ */ jsxs(Select.Item, {

package/dist/forms/switch.js

@@ -56,11 +56,11 @@ const Switch$1 = React.forwardRef(function Switch$2({ className, label, size = "
 		ref,
 		"data-slot": "switch",
 		"aria-labelledby": hasLabel ? labelId : void 0,
-		className: cn(`relative inline-flex shrink-0 items-center rounded-full border ${SWITCH_EDGE} bg-surface-3 p-0 outline-none transition-colors duration-150 motion-reduce:transition-none`, geometry.track, "data-[checked]:border-accent data-[checked]:bg-accent", `${FOCUS_RING}`, `data-[disabled]:pointer-events-none ${DATA_DISABLED_OPACITY} ${SWITCH_DISABLED_TRACK}`, "data-[invalid]:border-danger", className),
+		className: cn(`relative inline-flex shrink-0 items-center rounded-full border ${SWITCH_EDGE} bg-surface-3 p-0 outline-none transition-colors duration-fast motion-reduce:transition-none`, geometry.track, "data-[checked]:border-accent data-[checked]:bg-accent", `${FOCUS_RING}`, `data-[disabled]:pointer-events-none ${DATA_DISABLED_OPACITY} ${SWITCH_DISABLED_TRACK}`, "data-[invalid]:border-danger", className),
 		...elementProps,
 		children: /* @__PURE__ */ jsx(Switch.Thumb, {
 			"data-slot": "switch-thumb",
-			className: cn(`absolute top-1/2 left-px -translate-y-1/2 rounded-full ${SWITCH_THUMB} transition-transform duration-150 motion-reduce:transition-none`, geometry.thumb, SWITCH_THUMB_CHECKED, SWITCH_THUMB_DISABLED)
+			className: cn(`absolute top-1/2 left-px -translate-y-1/2 rounded-full ${SWITCH_THUMB} transition-transform duration-fast motion-reduce:transition-none`, geometry.thumb, SWITCH_THUMB_CHECKED, SWITCH_THUMB_DISABLED)
 		})
 	});
 	if (!hasLabel) return control;

package/dist/forms/toggle.js

@@ -16,7 +16,7 @@ import { Toggle } from "@base-ui/react/toggle";
 * the highlighted menu row. A solid accent block on a 22px control reads as a
 * second, louder button and drowns the labels beside it.
 */
-const toggleVariants = cva(`inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-[0.4em] whitespace-nowrap rounded-control border ${TOGGLE_EDGE} bg-transparent ${CONTROL_FACE} font-medium ${TOGGLE_INK} transition-colors duration-150 outline-none ${TOGGLE_HOVER_GROUND} ${TOGGLE_HOVER_INK} ${TOGGLE_HOVER_EDGE} ${FOCUS_RING} ${TOGGLE_PRESSED_GROUND} ${TOGGLE_PRESSED_EDGE} ${TOGGLE_PRESSED_INK} data-[disabled]:pointer-events-none ${DATA_DISABLED_OPACITY} ${TOGGLE_DISABLED}`, {
+const toggleVariants = cva(`inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-[0.4em] whitespace-nowrap rounded-control border ${TOGGLE_EDGE} bg-transparent ${CONTROL_FACE} font-medium ${TOGGLE_INK} transition-colors duration-fast outline-none ${TOGGLE_HOVER_GROUND} ${TOGGLE_HOVER_INK} ${TOGGLE_HOVER_EDGE} ${FOCUS_RING} ${TOGGLE_PRESSED_GROUND} ${TOGGLE_PRESSED_EDGE} ${TOGGLE_PRESSED_INK} data-[disabled]:pointer-events-none ${DATA_DISABLED_OPACITY} ${TOGGLE_DISABLED}`, {
 	variants: {
 		size: {
 			sm: "text-(length:--cue-text-label)",