@cueplusplus/ui 0.2.0 → 0.5.0

package/dist/elements/mcp-server-panel.js

@@ -0,0 +1,115 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mono, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon, PlugIcon } from "lucide-react";
+//#region src/elements/mcp-server-panel.tsx
+const DOT = {
+	connected: "bg-ok",
+	connecting: "bg-surface-3 animate-pulse",
+	"needs-auth": "bg-warn",
+	failed: "bg-danger"
+};
+const LABEL = {
+	connected: "connected",
+	connecting: "connecting",
+	"needs-auth": "needs auth",
+	failed: "failed"
+};
+/**
+* Which servers are connected, what each one brought, and which is still waiting on
+* you.
+*
+* @example
+* import { McpServerPanel } from "@cueplusplus/ui/elements";
+*
+* <McpServerPanel
+*   servers={servers}
+*   expandedId={expandedId}
+*   onToggle={setExpandedId}
+*   onAuthorize={startOAuth}
+* />
+*/
+function McpServerPanel({ servers, expandedId, onToggle, onAuthorize, className, ...props }) {
+	const connected = servers.filter((server) => server.status === "connected").length;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "mcp-server-panel",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-1 rounded-(--radius-overlay) p-3", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-baseline justify-between px-1 pb-1",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-(length:--cue-text-body) font-medium",
+				children: "Servers"
+			}), /* @__PURE__ */ jsxs("span", {
+				className: cn(mono, "text-fg-subtle tabular-nums"),
+				children: [
+					connected,
+					" of ",
+					servers.length,
+					" connected"
+				]
+			})]
+		}), servers.map((server) => {
+			const expanded = expandedId === server.id;
+			return /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-expanded": expanded,
+					onClick: () => onToggle?.(server.id),
+					className: "hover:bg-surface-1 flex items-center gap-2.5 rounded-(--radius-surface) px-1.5 py-2 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", expanded && "rotate-90") }),
+						/* @__PURE__ */ jsx(PlugIcon, { className: "text-fg-subtle size-3.5 shrink-0" }),
+						/* @__PURE__ */ jsx("span", {
+							className: "min-w-0 flex-1 truncate text-(length:--cue-text-body)",
+							children: server.name
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: cn(mono, "text-fg-subtle shrink-0"),
+							children: [server.tools.length, " tools"]
+						}),
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: cn("size-1.5 shrink-0 rounded-full", DOT[server.status])
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: LABEL[server.status]
+						})
+					]
+				}), expanded && /* @__PURE__ */ jsxs("div", {
+					className: "cue-elements-fade-in cue-elements-slide-in-from-top-1 cue-elements-animate-in flex flex-col gap-1.5 px-1.5 ps-8 pb-2 duration-200",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle"),
+								children: server.transport
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle"),
+								children: ["· ", LABEL[server.status]]
+							}),
+							server.status === "needs-auth" && onAuthorize && /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => onAuthorize?.(server.id),
+								className: "ms-auto rounded-full bg-warn/15 px-2 py-0.5 text-(length:--cue-text-label) font-medium text-warn transition-[background-color,scale] duration-150 hover:bg-warn/25 active:scale-[0.96]",
+								children: "Authorize"
+							})
+						]
+					}), /* @__PURE__ */ jsx("div", {
+						className: "flex flex-wrap gap-1",
+						children: server.tools.map((tool) => /* @__PURE__ */ jsx("span", {
+							className: cn("bg-fg/[0.06]", "font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-muted rounded-(--radius-control) px-1.5 py-0.5"),
+							children: tool
+						}, tool))
+					})]
+				})]
+			}, server.id);
+		})]
+	});
+}
+//#endregion
+export { McpServerPanel };

package/dist/elements/memory-chips.d.ts

@@ -0,0 +1,30 @@
+import { ComponentProps } from "react";
+//#region src/elements/memory-chips.d.ts
+type MemoryChange = "added" | "updated" | "existing";
+interface MemoryChip {
+  /** Stable identity, reported back by onForget. */
+  id: string;
+  /** The remembered fact, in the assistant's words. */
+  text: string;
+  /** existing is neutral; added and updated are tinted and counted in the header. */
+  change: MemoryChange;
+}
+/**
+ * What it now remembers about you, written during the turn and removable.
+ *
+ * @example
+ * import { MemoryChips } from "@cueplusplus/ui/elements";
+ *
+ * <MemoryChips chips={chips} onForget={forget} />
+ */
+declare function MemoryChips({ chips, onForget, className, ...props }: Omit<ComponentProps<"div">, "children" | "chips" | "onForget"> & {
+  /**
+   * What is remembered. Anything not marked existing is counted as new this turn and
+   * tinted.
+   */
+  chips: readonly MemoryChip[];
+  /** Called to drop a fact. Every chip is removable, including ones it just learned. */
+  onForget?: (id: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { MemoryChange, MemoryChip, MemoryChips };

package/dist/elements/memory-chips.js

@@ -0,0 +1,43 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { field, ghostButton, mono } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BrainIcon, XIcon } from "lucide-react";
+//#region src/elements/memory-chips.tsx
+/**
+* What it now remembers about you, written during the turn and removable.
+*
+* @example
+* import { MemoryChips } from "@cueplusplus/ui/elements";
+*
+* <MemoryChips chips={chips} onForget={forget} />
+*/
+function MemoryChips({ chips, onForget, className, ...props }) {
+	const fresh = chips.filter((chip) => chip.change !== "existing").length;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "memory-chips",
+		className: cn("flex w-full max-w-sm flex-col gap-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1.5",
+			children: [/* @__PURE__ */ jsx(BrainIcon, { className: "text-fg-subtle size-3.5" }), /* @__PURE__ */ jsx("span", {
+				className: cn(mono, "text-fg-subtle"),
+				children: fresh > 0 ? `remembered ${fresh}` : "memory"
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap gap-1.5",
+			children: chips.map((chip) => /* @__PURE__ */ jsxs("span", {
+				className: cn("cue-elements-fade-in cue-elements-zoom-in-95 cue-elements-animate-in cue-elements-fill-mode-both group flex items-center gap-1 rounded-full py-1 pr-1 pl-2.5 text-(length:--cue-text-ui) duration-300", chip.change === "existing" ? cn(field, "text-fg-muted") : "bg-stream/15 text-stream"),
+				children: [chip.text, /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": `Forget "${chip.text}"`,
+					onClick: () => onForget?.(chip.id),
+					className: cn(ghostButton, "size-4"),
+					children: /* @__PURE__ */ jsx(XIcon, { className: "size-2.5" })
+				})]
+			}, chip.id))
+		})]
+	});
+}
+//#endregion
+export { MemoryChips };

package/dist/elements/message-actions.d.ts

@@ -0,0 +1,38 @@
+import { ComponentProps } from "react";
+//#region src/elements/message-actions.d.ts
+type Reaction = "up" | "down" | null;
+interface MessageActionsProps extends Omit<ComponentProps<"div">, "children"> {
+  /** When true the copy button shows a green check confirmation. */
+  copied: boolean;
+  /** Active thumbs reaction, or null when none is selected. */
+  reaction: Reaction;
+  /** When true the regenerate icon spins to show work in progress. */
+  regenerating: boolean;
+  /** Called when the copy control is pressed. */
+  onCopy: () => void;
+  /** Called when the user toggles thumbs up or thumbs down. */
+  onReactionChange: (reaction: Reaction) => void;
+  /** Called when the regenerate control is pressed. */
+  onRegenerate: () => void;
+  /** Called when the overflow menu control is pressed. */
+  onMore: () => void;
+}
+/**
+ * Copy, rate, and regenerate. Each action confirms itself with a small state change.
+ *
+ * @example
+ * import { MessageActions } from "@cueplusplus/ui/elements";
+ *
+ * <MessageActions
+ *   copied={false}
+ *   reaction={null}
+ *   regenerating={false}
+ *   onCopy={() => {}}
+ *   onReactionChange={setReaction}
+ *   onRegenerate={() => {}}
+ *   onMore={() => {}}
+ * />
+ */
+declare function MessageActions({ copied, reaction, regenerating, onCopy, onReactionChange, onRegenerate, onMore, className, ...props }: MessageActionsProps): import("react").JSX.Element;
+//#endregion
+export { MessageActions, MessageActionsProps, Reaction };

package/dist/elements/message-actions.js

@@ -0,0 +1,71 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ghostButton, iconSwap, iconSwapIn, iconSwapOut } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon, EllipsisIcon, RefreshCwIcon, ThumbsDownIcon, ThumbsUpIcon } from "lucide-react";
+//#region src/elements/message-actions.tsx
+/**
+* Copy, rate, and regenerate. Each action confirms itself with a small state change.
+*
+* @example
+* import { MessageActions } from "@cueplusplus/ui/elements";
+*
+* <MessageActions
+*   copied={false}
+*   reaction={null}
+*   regenerating={false}
+*   onCopy={() => {}}
+*   onReactionChange={setReaction}
+*   onRegenerate={() => {}}
+*   onMore={() => {}}
+* />
+*/
+function MessageActions({ copied, reaction, regenerating, onCopy, onReactionChange, onRegenerate, onMore, className, ...props }) {
+	const buttonClassName = cn(ghostButton, "size-7");
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "message-actions",
+		className: cn("flex items-center gap-1", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"aria-label": copied ? "Copied response" : "Copy response",
+				onClick: onCopy,
+				className: cn(buttonClassName, "grid place-items-center", copied && "text-ok"),
+				children: [/* @__PURE__ */ jsx(CopyIcon, { className: cn(iconSwap, "size-3.5", copied ? iconSwapOut : iconSwapIn) }), /* @__PURE__ */ jsx(CheckIcon, { className: cn(iconSwap, "size-3.5", copied ? iconSwapIn : iconSwapOut) })]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Mark response helpful",
+				"aria-pressed": reaction === "up",
+				onClick: () => onReactionChange(reaction === "up" ? null : "up"),
+				className: cn(buttonClassName, reaction === "up" && "bg-surface-2 text-fg"),
+				children: /* @__PURE__ */ jsx(ThumbsUpIcon, { className: "size-3.5" })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Mark response unhelpful",
+				"aria-pressed": reaction === "down",
+				onClick: () => onReactionChange(reaction === "down" ? null : "down"),
+				className: cn(buttonClassName, reaction === "down" && "bg-surface-2 text-fg"),
+				children: /* @__PURE__ */ jsx(ThumbsDownIcon, { className: "size-3.5" })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Regenerate response",
+				onClick: onRegenerate,
+				className: buttonClassName,
+				children: /* @__PURE__ */ jsx(RefreshCwIcon, { className: cn("size-3.5", regenerating && "animate-spin motion-reduce:animate-none") })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "More response actions",
+				onClick: onMore,
+				className: buttonClassName,
+				children: /* @__PURE__ */ jsx(EllipsisIcon, { className: "size-3.5" })
+			})
+		]
+	});
+}
+//#endregion
+export { MessageActions };

package/dist/elements/message-attachment.d.ts

@@ -0,0 +1,48 @@
+import { ComponentProps } from "react";
+//#region src/elements/message-attachment.d.ts
+/**
+ * One file that arrived with a turn: what it is, how big, and how to draw it.
+ *
+ * @example
+ * import { MessageAttachments } from "@cueplusplus/ui/elements";
+ *
+ * <MessageAttachments
+ *   attachments={[
+ *     { id: "spec", name: "migration.pdf", size: "1.2 MB", kind: "document", pages: 14 },
+ *   ]}
+ *   onOpen={(id) => preview(id)}
+ * />
+ */
+interface MessageAttachmentItem {
+  /** Stable identity for the list key and for the callbacks that report a selection. */
+  id: string;
+  /** File name as shown. */
+  name: string;
+  /** Pre-formatted size. The element never converts bytes. */
+  size: string;
+  /** Chooses the shape: a thumbnail button, a paged document chip, or a plain file chip. */
+  kind: "image" | "document" | "file";
+  /** Page count appended to the size, for documents. */
+  pages?: number;
+  /**
+   * CSS background-image for the thumbnail, used when kind is image. A gradient stands
+   * in for a real preview.
+   */
+  swatch?: string;
+}
+/**
+ * The files a turn carried, as received rather than as staged. An image gets a preview
+ * tile that opens; anything else gets a row with its size and, for a document, its
+ * page count.
+ */
+declare function MessageAttachments({ attachments, onOpen, className, ...props }: Omit<ComponentProps<"div">, "children" | "attachments" | "onOpen"> & {
+  /**
+   * Files carried by the message. Images render as a thumbnail row, everything else as
+   * a chip.
+   */
+  attachments: readonly MessageAttachmentItem[];
+  /** Called when an attachment is opened for preview. */
+  onOpen?: (id: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { MessageAttachmentItem, MessageAttachments };

package/dist/elements/message-attachment.js

@@ -0,0 +1,63 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { field, mono, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FileTextIcon, ImageIcon, PaperclipIcon } from "lucide-react";
+//#region src/elements/message-attachment.tsx
+/**
+* The files a turn carried, as received rather than as staged. An image gets a preview
+* tile that opens; anything else gets a row with its size and, for a document, its
+* page count.
+*/
+function MessageAttachments({ attachments, onOpen, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-attachments",
+		className: cn("flex w-full max-w-sm flex-col gap-1.5", className),
+		...props,
+		children: attachments.map((item) => item.kind === "image" ? /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => onOpen?.(item.id),
+			className: cn(paper, "cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both group flex w-full items-center gap-3 overflow-hidden rounded-(--radius-overlay) p-2 text-start duration-300"),
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "size-12 shrink-0 rounded-(--radius-surface) bg-cover bg-center transition-transform duration-300 group-hover:scale-[1.04] motion-reduce:transition-none",
+					style: {
+						backgroundImage: item.swatch,
+						backgroundColor: "var(--cue-fg)"
+					}
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "flex min-w-0 flex-1 flex-col gap-0.5 pe-2",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-fg truncate text-(length:--cue-text-body)",
+						children: item.name
+					}), /* @__PURE__ */ jsx("span", {
+						className: cn(mono, "text-fg-subtle"),
+						children: item.size
+					})]
+				}),
+				/* @__PURE__ */ jsx(ImageIcon, { className: "text-fg-subtle me-2 size-3.5 shrink-0" })
+			]
+		}, item.id) : /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => onOpen?.(item.id),
+			className: cn(field, "cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both hover:bg-surface-2 flex w-full items-center gap-2.5 rounded-(--radius-overlay) px-3 py-2.5 text-start transition-colors duration-300"),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "bg-bg text-fg-muted flex size-8 shrink-0 items-center justify-center rounded-(--radius-surface)",
+				children: item.kind === "document" ? /* @__PURE__ */ jsx(FileTextIcon, { className: "size-3.5" }) : /* @__PURE__ */ jsx(PaperclipIcon, { className: "size-3.5" })
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "flex min-w-0 flex-1 flex-col gap-0.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-fg truncate text-(length:--cue-text-body)",
+					children: item.name
+				}), /* @__PURE__ */ jsxs("span", {
+					className: cn(mono, "text-fg-subtle"),
+					children: [item.size, item.pages !== void 0 && ` · ${item.pages} pages`]
+				})]
+			})]
+		}, item.id))
+	});
+}
+//#endregion
+export { MessageAttachments };

package/dist/elements/message-branches.d.ts

@@ -0,0 +1,25 @@
+import { ComponentProps } from "react";
+//#region src/elements/message-branches.d.ts
+interface MessageBranchesProps extends Omit<ComponentProps<"div">, "children"> {
+  /** Alternate regenerated answers the user can step through. */
+  variants: readonly string[];
+  /** Which variant is currently displayed. */
+  index: number;
+  /** Called when the previous or next branch control is pressed. */
+  onIndexChange: (index: number) => void;
+}
+/**
+ * Navigate between regenerated versions of the same answer without losing your place.
+ *
+ * @example
+ * import { MessageBranches } from "@cueplusplus/ui/elements";
+ *
+ * <MessageBranches
+ *   variants={["First answer.", "Second answer."]}
+ *   index={0}
+ *   onIndexChange={setIndex}
+ * />
+ */
+declare function MessageBranches({ variants, index, onIndexChange, className, ...props }: MessageBranchesProps): import("react").JSX.Element;
+//#endregion
+export { MessageBranches, MessageBranchesProps };

package/dist/elements/message-branches.js

@@ -0,0 +1,65 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ghostButton, mono } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+//#region src/elements/message-branches.tsx
+/**
+* Navigate between regenerated versions of the same answer without losing your place.
+*
+* @example
+* import { MessageBranches } from "@cueplusplus/ui/elements";
+*
+* <MessageBranches
+*   variants={["First answer.", "Second answer."]}
+*   index={0}
+*   onIndexChange={setIndex}
+* />
+*/
+function MessageBranches({ variants, index, onIndexChange, className, ...props }) {
+	const message = variants[index] ?? variants[0] ?? "";
+	const hasNavigation = variants.length > 1;
+	const goPrevious = () => {
+		if (!hasNavigation) return;
+		onIndexChange(index === 0 ? variants.length - 1 : index - 1);
+	};
+	const goNext = () => {
+		if (!hasNavigation) return;
+		onIndexChange(index === variants.length - 1 ? 0 : index + 1);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "message-branches",
+		className: cn("flex max-w-sm flex-col gap-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in text-fg min-h-[4.25rem] text-(length:--cue-text-body) leading-relaxed duration-300 motion-reduce:animate-none",
+			children: message
+		}, index), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1",
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Show previous response",
+					disabled: !hasNavigation,
+					onClick: goPrevious,
+					className: cn(ghostButton, "size-6"),
+					children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-3.5" })
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: cn(mono, "text-fg-subtle tabular-nums"),
+					children: variants.length === 0 ? "0 / 0" : `${index + 1} / ${variants.length}`
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Show next response",
+					disabled: !hasNavigation,
+					onClick: goNext,
+					className: cn(ghostButton, "size-6"),
+					children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-3.5" })
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { MessageBranches };

package/dist/elements/message-pair.d.ts

@@ -0,0 +1,33 @@
+import { ComponentProps } from "react";
+//#region src/elements/message-pair.d.ts
+interface MessagePairProps extends Omit<ComponentProps<"div">, "children"> {
+  /** Text shown in the user bubble on the right. */
+  userMessage: string;
+  /** Assistant reply broken into words for streaming. */
+  words: readonly string[];
+  /** How many assistant words are currently visible. */
+  visibleWords: number;
+  /** When true the newest assistant words tint blue as they arrive. */
+  streaming: boolean;
+  /**
+   * bubble wraps the user message in a surface; flat renders it as plain right-aligned
+   * text.
+   */
+  variant?: "bubble" | "flat";
+}
+/**
+ * A user bubble and a streaming assistant reply, with actions that appear on hover.
+ *
+ * @example
+ * import { MessagePair } from "@cueplusplus/ui/elements";
+ *
+ * <MessagePair
+ *   userMessage="Explain the composer."
+ *   words={["Here", "is", "a", "short", "reply."]}
+ *   visibleWords={5}
+ *   streaming={false}
+ * />
+ */
+declare function MessagePair({ userMessage, words, visibleWords, streaming, variant, className, ...props }: MessagePairProps): import("react").JSX.Element;
+//#endregion
+export { MessagePair, MessagePairProps };

package/dist/elements/message-pair.js

@@ -0,0 +1,65 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ghostButton, paper } from "./surfaces.js";
+import { take } from "./range.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CopyIcon, RefreshCwIcon } from "lucide-react";
+//#region src/elements/message-pair.tsx
+/**
+* A user bubble and a streaming assistant reply, with actions that appear on hover.
+*
+* @example
+* import { MessagePair } from "@cueplusplus/ui/elements";
+*
+* <MessagePair
+*   userMessage="Explain the composer."
+*   words={["Here", "is", "a", "short", "reply."]}
+*   visibleWords={5}
+*   streaming={false}
+* />
+*/
+function MessagePair({ userMessage, words, visibleWords, streaming, variant = "bubble", className, ...props }) {
+	const shown = take(words, visibleWords);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "message-pair",
+		className: cn("flex w-full max-w-sm flex-col gap-5", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("p", {
+			className: cn("max-w-[85%] self-end text-(length:--cue-text-body)", variant === "bubble" ? cn(paper, "rounded-(--radius-overlay) px-3.5 py-2") : "text-fg text-end"),
+			children: userMessage
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "group/message flex flex-col items-start",
+			children: [/* @__PURE__ */ jsxs("p", {
+				className: "min-h-[4.25rem] text-(length:--cue-text-body) leading-relaxed",
+				children: [shown.map((word, index) => {
+					const fresh = streaming && shown.length - 1 - index < 2;
+					return /* @__PURE__ */ jsxs("span", {
+						className: "cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both duration-500 motion-reduce:animate-none",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: cn("transition-colors duration-700 motion-reduce:transition-none", fresh && "text-stream"),
+							children: word
+						}), " "]
+					}, `${word}-${index}`);
+				}), streaming && shown.length > 0 && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "-mb-0.5 ml-0.5 inline-block h-4 w-0.5 animate-pulse rounded-full bg-stream motion-reduce:animate-none"
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1 pt-1 opacity-0 transition-opacity group-focus-within/message:opacity-100 group-hover/message:opacity-100 motion-reduce:transition-none",
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Copy response",
+					className: cn(ghostButton, "size-7"),
+					children: /* @__PURE__ */ jsx(CopyIcon, { className: "size-3.5" })
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Regenerate response",
+					className: cn(ghostButton, "size-7"),
+					children: /* @__PURE__ */ jsx(RefreshCwIcon, { className: "size-3.5" })
+				})]
+			})]
+		})]
+	});
+}
+//#endregion
+export { MessagePair };

package/dist/elements/message-queue.d.ts

@@ -0,0 +1,31 @@
+import { ComponentProps } from "react";
+//#region src/elements/message-queue.d.ts
+/** A turn the person typed while a run was still out. */
+interface QueuedMessage {
+  /** Identifies the entry, and what `onCancel` reports. */
+  id: string;
+  /** What they typed, truncated to one line in the queue. */
+  text: string;
+}
+/**
+ * Turns you typed while a run was in flight, stacked and cancelable until it finishes.
+ *
+ * @example
+ * import { MessageQueue } from "@cueplusplus/ui/elements";
+ *
+ * <MessageQueue
+ *   running="Fix the converter and add a guard"
+ *   queued={[{ id: "a", text: "Also add a changeset" }]}
+ *   onCancel={(id) => drop(id)}
+ * />
+ */
+declare function MessageQueue({ running, queued, onCancel, className, ...props }: Omit<ComponentProps<"div">, "children" | "running" | "queued" | "onCancel"> & {
+  /** The turn currently in flight, shown above the queue. */
+  running: string;
+  /** Turns waiting to send, in the order they will drain once the run finishes. */
+  queued: readonly QueuedMessage[];
+  /** Called when a queued turn is removed before it ever sends. */
+  onCancel?: (id: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { MessageQueue, QueuedMessage };