@cueplusplus/ui 0.20.1 → 0.21.0

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)",

package/dist/index.d.ts

@@ -105,7 +105,9 @@ import { Accordion, AccordionHeaderProps, AccordionItemProps, AccordionPanelProp
 import { SpaceStep, Stack, StackAlign, StackJustify, StackProps } from "./layout/stack.js";
 import { Bento, BentoColumns, BentoMinHeight, BentoRootProps, BentoRowSpan, BentoRows, BentoSpan, BentoTileProps } from "./layout/bento.js";
 import { Breadcrumb, BreadcrumbItem, BreadcrumbProps } from "./layout/breadcrumb.js";
+import { PaneSeam, PaneSeamEdge, PaneSeamOrientation, PaneSeamProps } from "./layout/pane-seam.js";
 import { Reveal, RevealProps } from "./layout/reveal.js";
+import { SplitPane, SplitPaneLayout, SplitPaneProps } from "./layout/split-pane.js";
 import { Card, CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardRootProps, CardTitleProps } from "./layout/card.js";
 import { Collapsible, CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps, Disclosure, DisclosureProps } from "./layout/collapsible.js";
 import { DescriptionList, DescriptionListDetailProps, DescriptionListLayout, DescriptionListRootProps, DescriptionListTermProps } from "./layout/description-list.js";
@@ -152,4 +154,4 @@ import { StillProvider, StillProviderProps, useStill } from "./system/still.js";
 import { FrameClockOptions, useFrameClock } from "./system/frame-clock.js";
 import { FontScope, FontScopeProps } from "./system/font-scope.js";
 import { DEFAULT_PAINT, DEFAULT_STYLE_SET, DensityEntry, DensityLevel, FontEntry, FontName, Mode, PAINTS, Paint, STYLE_SETS, StyleSet, ThemeManifest, ThemeName } from "./system/index.js";
-export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, type AgentColorOptions, AgentPile, type AgentPileEntry, type AgentPileProps, type AgentPileSize, AlertDialog, type AlertDialogActionProps, type AlertDialogCancelProps, type AlertDialogContentProps, type AlertDialogDescriptionProps, type AlertDialogFooterProps, type AlertDialogRootProps, type AlertDialogTitleProps, type AlertDialogTriggerProps, AnnouncementBar, type AnnouncementBarAction, type AnnouncementBarProps, AppBar, type AppBarActionsProps, type AppBarBrandProps, type AppBarLinkProps, type AppBarNavProps, type AppBarRegister, type AppBarRootProps, type AppBarSeparatorProps, AppShell, type AppShellAsideProps, type AppShellBarProps, type AppShellBodyProps, type AppShellContentProps, type AppShellNavTriggerProps, type AppShellRootProps, type AppShellScrollerProps, type AppShellSidebarProps, AppWindowFrame, type AppWindowFrameProps, type AskAnswer, AskBox, type AskBoxProps, type AskDanger, type AskKind, type AskOption, AudienceIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Band, type BandProps, type BandSeparation, type BandWidth, type BarOverflow, Bento, type BentoColumns, type BentoMinHeight, type BentoRootProps, type BentoRowSpan, type BentoRows, type BentoSpan, type BentoTileProps, type BrandAssetProps, type BrandSize, type BrandTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, CliToolIcon, CodeBlock, type CodeBlockProps, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, Composer, type ComposerProps, type ComposerSubmitKey, Container, type ContainerProps, type ContainerWidth, ContextMenu, type ContextMenuContentProps, type ContextMenuRootProps, type ContextMenuTriggerProps, type ControlSize, type ControlVariantProps, CopyButton, type CopyButtonProps, CueLogotype, type CueLogotypeProps, CueMark, type CueMarkProps, CuePortalFrame, type CuePortalFrameProps, DEFAULT_PAINT, DEFAULT_STORAGE_KEY, DEFAULT_STYLE_SET, DataRow, type DataRowDisclosure, type DataRowRootProps, type DataRowSlotProps, DataTree, type DataTreeItem, type DataTreeProps, type DataTreeRowState, DelegationCard, type DelegationCardProps, type DelegationDirection, type DelegationStatus, Density, type DensityEntry, type DensityLevel, type DensityProps, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Dialog, type DialogCloseProps, type DialogContentProps, type DialogDescriptionProps, type DialogFooterProps, type DialogRootProps, type DialogTitleProps, type DialogTriggerProps, Disclosure, type DisclosureProps, Drawer, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerRootProps, type DrawerSwipeDirection, type DrawerTitleProps, type DrawerTriggerProps, DropdownMenu, type DropdownMenuCheckboxItemProps, type DropdownMenuContentProps, type DropdownMenuGroupProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuRootProps, type DropdownMenuSeparatorProps, type DropdownMenuTriggerProps, EmptyState, type EmptyStateProps, EnvVarInput, type EnvVarInputProps, Eyebrow, type EyebrowProps, Field, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, type FieldIssue, FieldLabel, type FieldLabelProps, type FieldProps, type FilePartition, type FilePartitionOptions, type FileRejectReason, type FileRejection, FileUpload, type FileUploadProps, FolderIcon, type FontEntry, type FontFamilies, type FontName, FontScope, type FontScopeProps, Footer, type FooterProps, type FormControlSize, type FrameClockOptions, Frames, type FramesHeight, type FramesItemProps, type FramesLayout, type FramesRootProps, GlossObject, type GlossObjectProps, Grid, type GridColumns, type GridProps, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, Halftone, type HalftoneProps, Hero, type HeroProps, HoverCard, type HoverCardContentProps, type HoverCardRootProps, type HoverCardTriggerProps, IconButton, type IconButtonProps, InfoTip, type InfoTipProps, Input, InputGroup, type InputGroupProps, type InputProps, Inspector, type InspectorFooterProps, type InspectorRootProps, type InspectorRowProps, type InspectorSectionProps, Item, type ItemProps, Kbd, type KbdProps, Keyword, type KeywordProps, Ledger, type LedgerEmptyProps, type LedgerGroupProps, type LedgerRootProps, type LedgerTierProps, Link, type LinkProps, LogoStrip, type LogoStripProps, McpServerIcon, Menubar, type MenubarContentProps, type MenubarMenuProps, type MenubarRootProps, type MenubarTriggerProps, Message, MessageList, type MessageListProps, type MessageProps, type MessageRole, Meter, type MeterProps, type MeterProvenance, type MeterTone, type Mode, Motif, type MotifProps, type MotifVariant, MultiSelect, type MultiSelectProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, NumberField, type NumberFieldProps, OTPField, type OTPFieldProps, OVERLAY_SIDE_OFFSET, PAINTS, PageShell, type PageShellProps, type PageWidth, Pagination, type PaginationEntry, type PaginationProps, type Paint, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, ParticleLogo, type ParticleLogoProps, ParticleMark, type ParticleMarkProps, PasswordInput, type PasswordInputProps, type PersistedPreferences, Plussie, type PlussieExpression, type PlussieProps, Popover, type PopoverCloseProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverRootProps, type PopoverTitleProps, type PopoverTriggerProps, type PrepaintDefaults, type PrepaintOptions, Preview, type PreviewAxis, type PreviewGround, type PreviewPresentation, type PreviewProps, type PreviewResizeOptions, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type RatingSize, type ResolvedMode, Reveal, type RevealProps, Ribbon, type RibbonProps, Row, type RowProps, STYLE_SETS, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, ScrubInput, type ScrubInputProps, SeamCell, type SeamCellProps, SeamGrid, type SeamGridProps, type SeamGround, SeamList, type SeamListProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetCloseProps, type SheetContentProps, type SheetDescriptionProps, type SheetFooterProps, type SheetRootProps, type SheetTitleProps, type SheetTriggerProps, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, Skeleton, type SkeletonProps, SkillIcon, Slider, type SliderProps, type SpaceStep, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackAlign, StackIcon, type StackJustify, type StackProps, StacksMatrixIcon, Stat, StatBand, type StatBandProps, type StatBandStat, type StatProps, type StatTone, StatusBar, type StatusBarGroupProps, type StatusBarItemProps, type StatusBarProminence, type StatusBarProps, type StatusBarTone, StatusDot, type StatusDotProps, type StatusTone, Stepper, type StepperProps, type StepperState, type StepperStep, StillProvider, type StillProviderProps, type StyleSet, Switch, type SwitchProps, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, type TableCaptionProps, type TableCellProps, type TableGroupRowProps, type TableHeadProps, type TableRootProps, type TableRowProps, TableScrollRegion, type TableScrollRegionProps, type TableSectionProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TagsInput, type TagsInputProps, TerminalFrame, type TerminalFrameLine, type TerminalFrameProps, type TerminalLine, type TerminalLineTone, type TerminalScript, type TerminalStep, TextScramble, type TextScrambleProps, Textarea, type TextareaProps, type ThemeContextValue, type ThemeManifest, type ThemeName, ThemeProvider, type ThemeProviderProps, type ThemeRegistry, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, TitleBar, type TitleBarProps, Toast, type ToastManager, type ToastOptions, type ToastProviderProps, type ToastTone, type ToastViewportProps, Toggle, ToggleGroup, type ToggleGroupProps, type ToggleProps, type TokenOverrides, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarRootProps, type ToolbarSeparatorProps, Tooltip, type TooltipContentProps, type TooltipProviderProps, type TooltipRootProps, type TooltipTriggerProps, Tree, type TreeGuide, type TreeItem, type TreeProps, type TreeRow, type TreeVisibility, TreeVisibilityToggle, type TreeVisibilityToggleProps, TwoStepButton, type TwoStepButtonProps, type TwoStepTone, type UploadFile, type UploadStatus, UsageChart, type UsageChartPoint, type UsageChartProps, type UsageChartTone, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, isSafeTokenValue, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useFrameClock, useSidebar, useStill, useTheme, useThemes, useToast };
+export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, type AgentColorOptions, AgentPile, type AgentPileEntry, type AgentPileProps, type AgentPileSize, AlertDialog, type AlertDialogActionProps, type AlertDialogCancelProps, type AlertDialogContentProps, type AlertDialogDescriptionProps, type AlertDialogFooterProps, type AlertDialogRootProps, type AlertDialogTitleProps, type AlertDialogTriggerProps, AnnouncementBar, type AnnouncementBarAction, type AnnouncementBarProps, AppBar, type AppBarActionsProps, type AppBarBrandProps, type AppBarLinkProps, type AppBarNavProps, type AppBarRegister, type AppBarRootProps, type AppBarSeparatorProps, AppShell, type AppShellAsideProps, type AppShellBarProps, type AppShellBodyProps, type AppShellContentProps, type AppShellNavTriggerProps, type AppShellRootProps, type AppShellScrollerProps, type AppShellSidebarProps, AppWindowFrame, type AppWindowFrameProps, type AskAnswer, AskBox, type AskBoxProps, type AskDanger, type AskKind, type AskOption, AudienceIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Band, type BandProps, type BandSeparation, type BandWidth, type BarOverflow, Bento, type BentoColumns, type BentoMinHeight, type BentoRootProps, type BentoRowSpan, type BentoRows, type BentoSpan, type BentoTileProps, type BrandAssetProps, type BrandSize, type BrandTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, CliToolIcon, CodeBlock, type CodeBlockProps, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, Composer, type ComposerProps, type ComposerSubmitKey, Container, type ContainerProps, type ContainerWidth, ContextMenu, type ContextMenuContentProps, type ContextMenuRootProps, type ContextMenuTriggerProps, type ControlSize, type ControlVariantProps, CopyButton, type CopyButtonProps, CueLogotype, type CueLogotypeProps, CueMark, type CueMarkProps, CuePortalFrame, type CuePortalFrameProps, DEFAULT_PAINT, DEFAULT_STORAGE_KEY, DEFAULT_STYLE_SET, DataRow, type DataRowDisclosure, type DataRowRootProps, type DataRowSlotProps, DataTree, type DataTreeItem, type DataTreeProps, type DataTreeRowState, DelegationCard, type DelegationCardProps, type DelegationDirection, type DelegationStatus, Density, type DensityEntry, type DensityLevel, type DensityProps, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Dialog, type DialogCloseProps, type DialogContentProps, type DialogDescriptionProps, type DialogFooterProps, type DialogRootProps, type DialogTitleProps, type DialogTriggerProps, Disclosure, type DisclosureProps, Drawer, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerRootProps, type DrawerSwipeDirection, type DrawerTitleProps, type DrawerTriggerProps, DropdownMenu, type DropdownMenuCheckboxItemProps, type DropdownMenuContentProps, type DropdownMenuGroupProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuRootProps, type DropdownMenuSeparatorProps, type DropdownMenuTriggerProps, EmptyState, type EmptyStateProps, EnvVarInput, type EnvVarInputProps, Eyebrow, type EyebrowProps, Field, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, type FieldIssue, FieldLabel, type FieldLabelProps, type FieldProps, type FilePartition, type FilePartitionOptions, type FileRejectReason, type FileRejection, FileUpload, type FileUploadProps, FolderIcon, type FontEntry, type FontFamilies, type FontName, FontScope, type FontScopeProps, Footer, type FooterProps, type FormControlSize, type FrameClockOptions, Frames, type FramesHeight, type FramesItemProps, type FramesLayout, type FramesRootProps, GlossObject, type GlossObjectProps, Grid, type GridColumns, type GridProps, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, Halftone, type HalftoneProps, Hero, type HeroProps, HoverCard, type HoverCardContentProps, type HoverCardRootProps, type HoverCardTriggerProps, IconButton, type IconButtonProps, InfoTip, type InfoTipProps, Input, InputGroup, type InputGroupProps, type InputProps, Inspector, type InspectorFooterProps, type InspectorRootProps, type InspectorRowProps, type InspectorSectionProps, Item, type ItemProps, Kbd, type KbdProps, Keyword, type KeywordProps, Ledger, type LedgerEmptyProps, type LedgerGroupProps, type LedgerRootProps, type LedgerTierProps, Link, type LinkProps, LogoStrip, type LogoStripProps, McpServerIcon, Menubar, type MenubarContentProps, type MenubarMenuProps, type MenubarRootProps, type MenubarTriggerProps, Message, MessageList, type MessageListProps, type MessageProps, type MessageRole, Meter, type MeterProps, type MeterProvenance, type MeterTone, type Mode, Motif, type MotifProps, type MotifVariant, MultiSelect, type MultiSelectProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, NumberField, type NumberFieldProps, OTPField, type OTPFieldProps, OVERLAY_SIDE_OFFSET, PAINTS, PageShell, type PageShellProps, type PageWidth, Pagination, type PaginationEntry, type PaginationProps, type Paint, PaneSeam, type PaneSeamEdge, type PaneSeamOrientation, type PaneSeamProps, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, ParticleLogo, type ParticleLogoProps, ParticleMark, type ParticleMarkProps, PasswordInput, type PasswordInputProps, type PersistedPreferences, Plussie, type PlussieExpression, type PlussieProps, Popover, type PopoverCloseProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverRootProps, type PopoverTitleProps, type PopoverTriggerProps, type PrepaintDefaults, type PrepaintOptions, Preview, type PreviewAxis, type PreviewGround, type PreviewPresentation, type PreviewProps, type PreviewResizeOptions, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type RatingSize, type ResolvedMode, Reveal, type RevealProps, Ribbon, type RibbonProps, Row, type RowProps, STYLE_SETS, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, ScrubInput, type ScrubInputProps, SeamCell, type SeamCellProps, SeamGrid, type SeamGridProps, type SeamGround, SeamList, type SeamListProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetCloseProps, type SheetContentProps, type SheetDescriptionProps, type SheetFooterProps, type SheetRootProps, type SheetTitleProps, type SheetTriggerProps, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, Skeleton, type SkeletonProps, SkillIcon, Slider, type SliderProps, type SpaceStep, Sparkline, type SparklineProps, Spinner, type SpinnerProps, SplitPane, type SplitPaneLayout, type SplitPaneProps, Stack, type StackAlign, StackIcon, type StackJustify, type StackProps, StacksMatrixIcon, Stat, StatBand, type StatBandProps, type StatBandStat, type StatProps, type StatTone, StatusBar, type StatusBarGroupProps, type StatusBarItemProps, type StatusBarProminence, type StatusBarProps, type StatusBarTone, StatusDot, type StatusDotProps, type StatusTone, Stepper, type StepperProps, type StepperState, type StepperStep, StillProvider, type StillProviderProps, type StyleSet, Switch, type SwitchProps, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, type TableCaptionProps, type TableCellProps, type TableGroupRowProps, type TableHeadProps, type TableRootProps, type TableRowProps, TableScrollRegion, type TableScrollRegionProps, type TableSectionProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TagsInput, type TagsInputProps, TerminalFrame, type TerminalFrameLine, type TerminalFrameProps, type TerminalLine, type TerminalLineTone, type TerminalScript, type TerminalStep, TextScramble, type TextScrambleProps, Textarea, type TextareaProps, type ThemeContextValue, type ThemeManifest, type ThemeName, ThemeProvider, type ThemeProviderProps, type ThemeRegistry, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, TitleBar, type TitleBarProps, Toast, type ToastManager, type ToastOptions, type ToastProviderProps, type ToastTone, type ToastViewportProps, Toggle, ToggleGroup, type ToggleGroupProps, type ToggleProps, type TokenOverrides, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarRootProps, type ToolbarSeparatorProps, Tooltip, type TooltipContentProps, type TooltipProviderProps, type TooltipRootProps, type TooltipTriggerProps, Tree, type TreeGuide, type TreeItem, type TreeProps, type TreeRow, type TreeVisibility, TreeVisibilityToggle, type TreeVisibilityToggleProps, TwoStepButton, type TwoStepButtonProps, type TwoStepTone, type UploadFile, type UploadStatus, UsageChart, type UsageChartPoint, type UsageChartProps, type UsageChartTone, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, isSafeTokenValue, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useFrameClock, useSidebar, useStill, useTheme, useThemes, useToast };

package/dist/index.js

@@ -105,7 +105,9 @@ import { Accordion } from "./layout/accordion.js";
 import { Stack } from "./layout/stack.js";
 import { Bento } from "./layout/bento.js";
 import { Breadcrumb } from "./layout/breadcrumb.js";
+import { PaneSeam } from "./layout/pane-seam.js";
 import { Reveal } from "./layout/reveal.js";
+import { SplitPane } from "./layout/split-pane.js";
 import { Card } from "./layout/card.js";
 import { Collapsible, Disclosure } from "./layout/collapsible.js";
 import { DescriptionList } from "./layout/description-list.js";
@@ -137,4 +139,4 @@ import { useTheme } from "./system/use-theme.js";
 import { useFrameClock } from "./system/frame-clock.js";
 import { FontScope } from "./system/font-scope.js";
 import { DEFAULT_PAINT, DEFAULT_STYLE_SET, PAINTS, STYLE_SETS } from "./system/index.js";
-export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, AgentPile, AlertDialog, AnnouncementBar, AppBar, AppShell, AppWindowFrame, AskBox, AudienceIcon, Autocomplete, Avatar, AvatarGroup, Band, Bento, Breadcrumb, Button, ButtonGroup, Card, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, Chip, CliToolIcon, CodeBlock, Collapsible, Combobox, CommandPalette, Composer, Container, ContextMenu, CopyButton, CueLogotype, CueMark, CuePortalFrame, DEFAULT_PAINT, DEFAULT_STORAGE_KEY, DEFAULT_STYLE_SET, DataRow, DataTree, DelegationCard, Density, DescriptionList, Dialog, Disclosure, Drawer, DropdownMenu, EmptyState, EnvVarInput, Eyebrow, Field, FieldDescription, FieldError, FieldLabel, FileUpload, FolderIcon, FontScope, Footer, Frames, GlossObject, Grid, GroupBar, Halftone, Hero, HoverCard, IconButton, InfoTip, Input, InputGroup, Inspector, Item, Kbd, Keyword, Ledger, Link, LogoStrip, McpServerIcon, Menubar, Message, MessageList, Meter, Motif, MultiSelect, NavigationMenu, NumberField, OTPField, OVERLAY_SIDE_OFFSET, PAINTS, PageShell, Pagination, Panel, PanelHeader, ParticleLogo, ParticleMark, PasswordInput, Plussie, Popover, Preview, Progress, Radio, RadioGroup, Rating, Reveal, Ribbon, Row, STYLE_SETS, ScrollArea, ScrollableTabsList, ScrubInput, SeamCell, SeamGrid, SeamList, SearchInput, SectionHeader, SegmentedControl, Select, Separator, Sheet, Sidebar, Skeleton, SkillIcon, Slider, Sparkline, Spinner, Stack, StackIcon, StacksMatrixIcon, Stat, StatBand, StatusBar, StatusDot, Stepper, StillProvider, Switch, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, TableScrollRegion, Tabs, TagsInput, TerminalFrame, TextScramble, Textarea, ThemeProvider, Timeline, TitleBar, Toast, Toggle, ToggleGroup, Toolbar, Tooltip, Tree, TreeVisibilityToggle, TwoStepButton, UsageChart, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, isSafeTokenValue, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useFrameClock, useSidebar, useStill, useTheme, useThemes, useToast };
+export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, AgentPile, AlertDialog, AnnouncementBar, AppBar, AppShell, AppWindowFrame, AskBox, AudienceIcon, Autocomplete, Avatar, AvatarGroup, Band, Bento, Breadcrumb, Button, ButtonGroup, Card, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, Chip, CliToolIcon, CodeBlock, Collapsible, Combobox, CommandPalette, Composer, Container, ContextMenu, CopyButton, CueLogotype, CueMark, CuePortalFrame, DEFAULT_PAINT, DEFAULT_STORAGE_KEY, DEFAULT_STYLE_SET, DataRow, DataTree, DelegationCard, Density, DescriptionList, Dialog, Disclosure, Drawer, DropdownMenu, EmptyState, EnvVarInput, Eyebrow, Field, FieldDescription, FieldError, FieldLabel, FileUpload, FolderIcon, FontScope, Footer, Frames, GlossObject, Grid, GroupBar, Halftone, Hero, HoverCard, IconButton, InfoTip, Input, InputGroup, Inspector, Item, Kbd, Keyword, Ledger, Link, LogoStrip, McpServerIcon, Menubar, Message, MessageList, Meter, Motif, MultiSelect, NavigationMenu, NumberField, OTPField, OVERLAY_SIDE_OFFSET, PAINTS, PageShell, Pagination, PaneSeam, Panel, PanelHeader, ParticleLogo, ParticleMark, PasswordInput, Plussie, Popover, Preview, Progress, Radio, RadioGroup, Rating, Reveal, Ribbon, Row, STYLE_SETS, ScrollArea, ScrollableTabsList, ScrubInput, SeamCell, SeamGrid, SeamList, SearchInput, SectionHeader, SegmentedControl, Select, Separator, Sheet, Sidebar, Skeleton, SkillIcon, Slider, Sparkline, Spinner, SplitPane, Stack, StackIcon, StacksMatrixIcon, Stat, StatBand, StatusBar, StatusDot, Stepper, StillProvider, Switch, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, TableScrollRegion, Tabs, TagsInput, TerminalFrame, TextScramble, Textarea, ThemeProvider, Timeline, TitleBar, Toast, Toggle, ToggleGroup, Toolbar, Tooltip, Tree, TreeVisibilityToggle, TwoStepButton, UsageChart, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, isSafeTokenValue, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useFrameClock, useSidebar, useStill, useTheme, useThemes, useToast };

package/dist/instruments/_ledger-disclosure.js

@@ -88,7 +88,7 @@ function LedgerDisclosure({ headingLevel, headingSlot, headingClassName, toggleS
 			children: [/* @__PURE__ */ jsx(ChevronRightGlyph, {
 				"aria-hidden": "true",
 				"data-slot": `${toggleSlot}-glyph`,
-				className: cn("size-icon-sm shrink-0 self-center transition-transform duration-150 motion-reduce:transition-none", expanded ? "rotate-90" : null)
+				className: cn("size-icon-sm shrink-0 self-center transition-transform duration-fast motion-reduce:transition-none", expanded ? "rotate-90" : null)
 			}), label]
 		})
 	}), /* @__PURE__ */ jsx("div", {

package/dist/instruments/data-tree.js

@@ -286,7 +286,7 @@ const DataTree = React.forwardRef(function DataTree({ className, items, expanded
 						setExpanded(item.id, !row.expanded);
 					},
 					className: "flex size-icon-sm shrink-0 cursor-pointer items-center justify-center text-fg-subtle",
-					children: /* @__PURE__ */ jsx(ChevronRightGlyph, { className: cn("size-icon-sm transition-transform duration-150 motion-reduce:transition-none", row.expanded ? "rotate-90" : null) })
+					children: /* @__PURE__ */ jsx(ChevronRightGlyph, { className: cn("size-icon-sm transition-transform duration-fast motion-reduce:transition-none", row.expanded ? "rotate-90" : null) })
 				}) : /* @__PURE__ */ jsx("span", {
 					"aria-hidden": "true",
 					className: "size-icon-sm shrink-0"

package/dist/instruments/meter.js

@@ -80,7 +80,7 @@ const Meter = React.forwardRef(function Meter({ className, percent, tone = "ok",
 		...elementProps,
 		children: [hasLevel ? /* @__PURE__ */ jsx("div", {
 			"data-slot": "meter-fill",
-			className: cn("absolute inset-y-0 left-0 bg-current transition-[width] duration-150 ease-out motion-reduce:transition-none", overPace ? "animate-pulse motion-reduce:animate-none" : null),
+			className: cn("absolute inset-y-0 left-0 bg-current transition-[width] duration-fast ease-out motion-reduce:transition-none", overPace ? "animate-pulse motion-reduce:animate-none" : null),
 			style: {
 				width: `${pct}%`,
 				backgroundImage: provenance === "estimated" ? ESTIMATED_HATCH : void 0

package/dist/instruments/seam-grid.js

@@ -72,7 +72,7 @@ const SeamCell = React.forwardRef(function SeamCell({ className, ground = "surfa
 		ref,
 		"data-slot": "seam-cell",
 		"data-ground": ground,
-		className: cn("min-w-0", GROUNDS[ground], flush ? null : "p-(--cue-space-5)", interactive ? "cursor-pointer transition-colors duration-150 hover:bg-surface-2 motion-reduce:transition-none" : null, className),
+		className: cn("min-w-0", GROUNDS[ground], flush ? null : "p-(--cue-space-5)", interactive ? "cursor-pointer transition-colors duration-fast hover:bg-surface-2 motion-reduce:transition-none" : null, className),
 		...elementProps
 	});
 });