@cueplusplus/ui 0.13.0

package/dist/elements/prompt-library.js

@@ -0,0 +1,117 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { field, paper } from "./surfaces.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BookmarkIcon } from "lucide-react";
+//#region src/elements/prompt-library.tsx
+/**
+* Prompts you saved, searchable, with their variables shown before you insert one.
+*
+* @example
+* import { PromptLibrary } from "@cueplusplus/ui/elements";
+*
+* <PromptLibrary
+*   prompts={prompts}
+*   query={query}
+*   selectedId={selectedId}
+*   onQueryChange={setQuery}
+*   onSelect={setSelectedId}
+*   onInsert={insert}
+* />
+*/
+function PromptLibrary({ prompts, query, selectedId, onQueryChange, onSelect, onInsert, className, ...props }) {
+	const listId = useId();
+	const optionId = (id) => `${listId}-${id}`;
+	const matches = prompts.filter((prompt) => prompt.name.toLowerCase().includes(query.toLowerCase()));
+	const selected = matches.find((prompt) => prompt.id === selectedId);
+	const move = (delta) => {
+		if (matches.length === 0) return;
+		const at = matches.findIndex((prompt) => prompt.id === selectedId);
+		const next = matches[((at === -1 ? delta > 0 ? -1 : 0 : at) + delta + matches.length) % matches.length];
+		if (next) onSelect?.(next.id);
+	};
+	const onKeyDown = (event) => {
+		if (event.nativeEvent.isComposing) return;
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			move(1);
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			move(-1);
+		} else if (event.key === "Enter" && selected) {
+			event.preventDefault();
+			onInsert?.(selected.id);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "prompt-library",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-2 rounded-(--radius-overlay) p-3", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: cn(field, "flex items-center gap-2 rounded-(--radius-surface) px-2.5 py-1.5"),
+				children: [/* @__PURE__ */ jsx(BookmarkIcon, { className: "text-fg-subtle size-3.5 shrink-0" }), /* @__PURE__ */ jsx("input", {
+					value: query,
+					onChange: (event) => onQueryChange?.(event.target.value),
+					onKeyDown,
+					placeholder: "Search prompts",
+					"aria-label": "Search saved prompts",
+					role: "combobox",
+					"aria-expanded": matches.length > 0,
+					"aria-controls": listId,
+					"aria-autocomplete": "list",
+					"aria-activedescendant": selected ? optionId(selected.id) : void 0,
+					className: "text-fg-muted placeholder:text-fg-subtle min-w-0 flex-1 bg-transparent text-(length:--cue-text-body) outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent"
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				id: listId,
+				role: "listbox",
+				"aria-label": "Saved prompts",
+				className: "flex flex-col",
+				children: matches.map((prompt) => /* @__PURE__ */ jsxs("button", {
+					id: optionId(prompt.id),
+					type: "button",
+					role: "option",
+					tabIndex: -1,
+					"aria-selected": prompt.id === selectedId,
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: () => onSelect?.(prompt.id),
+					onDoubleClick: () => onInsert?.(prompt.id),
+					className: cn("flex items-center gap-2 rounded-(--radius-surface) px-2 py-1.5 text-start transition-colors", prompt.id === selectedId ? "bg-surface-1" : "hover:bg-surface-1"),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate text-(length:--cue-text-body)",
+						children: prompt.name
+					}), prompt.variables.length > 0 && /* @__PURE__ */ jsxs("span", {
+						className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle shrink-0"),
+						children: [prompt.variables.length, " vars"]
+					})]
+				}, prompt.id))
+			}),
+			matches.length === 0 && /* @__PURE__ */ jsxs("span", {
+				className: "text-fg-subtle block px-2 py-3 text-center text-(length:--cue-text-ui) break-words",
+				children: [
+					"Nothing matches “",
+					query,
+					"”"
+				]
+			}),
+			selected && /* @__PURE__ */ jsxs("div", {
+				className: cn("bg-fg/[0.06]", "cue-elements-fade-in cue-elements-animate-in flex flex-col gap-2 rounded-(--radius-surface) p-2.5 duration-200"),
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-fg-muted text-(length:--cue-text-ui) leading-(--cue-leading-ui) break-words",
+					children: selected.body
+				}), selected.variables.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "flex flex-wrap gap-1",
+					children: selected.variables.map((variable) => /* @__PURE__ */ jsx("span", {
+						className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "bg-bg text-fg-muted rounded-(--radius-control) px-1.5 py-0.5"),
+						children: `{${variable}}`
+					}, variable))
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { PromptLibrary };

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

@@ -0,0 +1,101 @@
+import { QueueLabels } from "./vocabulary.js";
+import * as React from "react";
+//#region src/elements/queue-dock.d.ts
+/** A turn typed while a run was still out, waiting its place in the queue. */
+interface QueuedFollowUp {
+  /** Identifies the entry, and what every callback reports. */
+  id: string;
+  /** What they typed. One line in the dock, however long it is in the composer. */
+  text: string;
+}
+/**
+ * The dock's summary line: `3 queued messages`.
+ *
+ * opencode's pluralised summary, and the reason it is a function rather than a
+ * template is the singular: `1 queued messages` is the tell that a queue was
+ * built by somebody who never had exactly one thing in it. Zero has an answer
+ * too, for the callers that show the dock's line somewhere the dock itself is
+ * not — a status bar, a tooltip — even though {@link QueueDock} draws nothing
+ * at all when the queue is empty.
+ *
+ * @example
+ * formatQueueSummary(3); // "3 queued messages"
+ * formatQueueSummary(1); // "1 queued message"
+ * formatQueueSummary(0); // "Nothing queued"
+ */
+declare function formatQueueSummary(count: number): string;
+interface QueueDockProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+  /**
+   * The turns waiting to send, in the order they will drain. Ordering is the
+   * caller's: Cursor lets a person drag one up the list, and a component that
+   * sorted the array it was given could not be dragged.
+   */
+  messages: readonly QueuedFollowUp[];
+  /** Whether the entries are showing, or only the summary line. */
+  open: boolean;
+  /** Called when the dock is expanded or collapsed. */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Put this turn back in the composer to be rewritten. The control exists
+   * only when this is given.
+   */
+  onEdit?: (id: string) => void;
+  /**
+   * Send this turn now rather than waiting for the run to finish — Cursor's
+   * `Send now`, Zed's steer button. The control exists only when this is given.
+   */
+  onSendNow?: (id: string) => void;
+  /**
+   * Drop this turn before it ever sends. The control exists only when this is
+   * given.
+   */
+  onRemove?: (id: string) => void;
+  /**
+   * The summary line, replacing the one {@link formatQueueSummary} would build
+   * — for a dock that counts something else: `2 follow-ups`, `3 steps queued`.
+   */
+  summary?: string;
+  /**
+   * Copy for the five controls, merged over `QUEUE_LABELS`. Partial: overriding
+   * `sendNow` does not cost you the other four.
+   */
+  labels?: Partial<QueueLabels>;
+}
+/**
+ * What you typed while it was still working, stacked and still yours to change.
+ *
+ * The dock over the composer, and one of the two elements the teardown found
+ * missing everywhere. Its whole reason to exist is the three things you can do
+ * to a queued turn *before* it sends: rewrite it now that you have seen what
+ * the run did, jump it to the front, or drop it. A queue you can only watch is
+ * a queue you will let send something you no longer mean.
+ *
+ * It folds. Four queued turns above a composer is a wall, so the collapsed
+ * state is one line — `4 queued messages` — and the entries come back on a
+ * click. Open state is a prop like everything else in this family, so a
+ * scripted replay of the dock is arithmetic rather than a component with a mind
+ * of its own.
+ *
+ * An empty queue draws **nothing**: no line, no empty state, no rule. Every
+ * product in the study does the same, and it is the right answer — a dock that
+ * announces it has nothing in it is a permanent strip of chrome apologising for
+ * itself.
+ *
+ * @example
+ * import { QueueDock } from "@cueplusplus/ui/elements";
+ *
+ * <QueueDock
+ *   messages={queued}
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   onEdit={(id) => lift(id)}
+ *   onSendNow={(id) => steer(id)}
+ *   onRemove={(id) => drop(id)}
+ * />
+ * @example
+ * // Read-only: the same dock in a shared transcript, with nothing to press.
+ * <QueueDock messages={queued} open />
+ */
+declare const QueueDock: React.ForwardRefExoticComponent<QueueDockProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { QueueDock, QueueDockProps, QueuedFollowUp, formatQueueSummary };

package/dist/elements/queue-dock.js

@@ -0,0 +1,132 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { field, ghostButton, mono, paper } from "./surfaces.js";
+import { QUEUE_LABELS } from "./vocabulary.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon, PencilIcon, SendHorizontalIcon, XIcon } from "lucide-react";
+//#region src/elements/queue-dock.tsx
+/**
+* The dock's summary line: `3 queued messages`.
+*
+* opencode's pluralised summary, and the reason it is a function rather than a
+* template is the singular: `1 queued messages` is the tell that a queue was
+* built by somebody who never had exactly one thing in it. Zero has an answer
+* too, for the callers that show the dock's line somewhere the dock itself is
+* not — a status bar, a tooltip — even though {@link QueueDock} draws nothing
+* at all when the queue is empty.
+*
+* @example
+* formatQueueSummary(3); // "3 queued messages"
+* formatQueueSummary(1); // "1 queued message"
+* formatQueueSummary(0); // "Nothing queued"
+*/
+function formatQueueSummary(count) {
+	if (!Number.isFinite(count) || count <= 0) return "Nothing queued";
+	const whole = Math.floor(count);
+	return `${whole} queued message${whole === 1 ? "" : "s"}`;
+}
+/**
+* What you typed while it was still working, stacked and still yours to change.
+*
+* The dock over the composer, and one of the two elements the teardown found
+* missing everywhere. Its whole reason to exist is the three things you can do
+* to a queued turn *before* it sends: rewrite it now that you have seen what
+* the run did, jump it to the front, or drop it. A queue you can only watch is
+* a queue you will let send something you no longer mean.
+*
+* It folds. Four queued turns above a composer is a wall, so the collapsed
+* state is one line — `4 queued messages` — and the entries come back on a
+* click. Open state is a prop like everything else in this family, so a
+* scripted replay of the dock is arithmetic rather than a component with a mind
+* of its own.
+*
+* An empty queue draws **nothing**: no line, no empty state, no rule. Every
+* product in the study does the same, and it is the right answer — a dock that
+* announces it has nothing in it is a permanent strip of chrome apologising for
+* itself.
+*
+* @example
+* import { QueueDock } from "@cueplusplus/ui/elements";
+*
+* <QueueDock
+*   messages={queued}
+*   open={open}
+*   onOpenChange={setOpen}
+*   onEdit={(id) => lift(id)}
+*   onSendNow={(id) => steer(id)}
+*   onRemove={(id) => drop(id)}
+* />
+* @example
+* // Read-only: the same dock in a shared transcript, with nothing to press.
+* <QueueDock messages={queued} open />
+*/
+const QueueDock = React.forwardRef(function QueueDock({ messages, open, onOpenChange, onEdit, onSendNow, onRemove, summary, labels, className, ...elementProps }, ref) {
+	if (messages.length === 0) return null;
+	const copy = {
+		...QUEUE_LABELS,
+		...labels
+	};
+	const said = summary ?? formatQueueSummary(messages.length);
+	const actionClassName = cn(ghostButton, "size-6 shrink-0");
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "queue-dock",
+		"data-open": String(open),
+		className: cn(paper, "flex w-full flex-col rounded-(--radius-overlay)", className),
+		...elementProps,
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": open,
+			title: open ? copy.collapse : copy.expand,
+			onClick: () => onOpenChange?.(!open),
+			className: "hover:bg-surface-2 flex items-center gap-2.5 rounded-(--radius-overlay) px-3 py-2 text-start transition-colors focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent 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")
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-fg-muted min-w-0 flex-1 truncate text-(length:--cue-text-ui)",
+				children: said
+			})]
+		}), open ? /* @__PURE__ */ jsx("ul", {
+			"data-slot": "queue-dock-entries",
+			className: "flex flex-col gap-1 px-2 pb-2",
+			children: messages.map((message, index) => /* @__PURE__ */ jsxs("li", {
+				className: cn(field, "flex items-center gap-2 rounded-(--radius-control) py-1.5 pe-1.5 ps-2.5"),
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: cn(mono, "text-fg-subtle w-3 shrink-0 tabular-nums"),
+						children: index + 1
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-fg-muted min-w-0 flex-1 truncate text-(length:--cue-text-ui)",
+						children: message.text
+					}),
+					onEdit === void 0 ? null : /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": `${copy.edit}: ${message.text}`,
+						onClick: () => onEdit(message.id),
+						className: actionClassName,
+						children: /* @__PURE__ */ jsx(PencilIcon, { className: "size-3" })
+					}),
+					onSendNow === void 0 ? null : /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": `${copy.sendNow}: ${message.text}`,
+						onClick: () => onSendNow(message.id),
+						className: actionClassName,
+						children: /* @__PURE__ */ jsx(SendHorizontalIcon, { className: "size-3" })
+					}),
+					onRemove === void 0 ? null : /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": `${copy.remove}: ${message.text}`,
+						onClick: () => onRemove(message.id),
+						className: actionClassName,
+						children: /* @__PURE__ */ jsx(XIcon, { className: "size-3" })
+					})
+				]
+			}, message.id))
+		}) : null]
+	});
+});
+//#endregion
+export { QueueDock, formatQueueSummary };

package/dist/elements/quota-banner.d.ts

@@ -0,0 +1,26 @@
+import { ComponentProps } from "react";
+//#region src/elements/quota-banner.d.ts
+/**
+ * How much is left, when it comes back, and the way to get more.
+ *
+ * @example
+ * import { QuotaBanner } from "@cueplusplus/ui/elements";
+ *
+ * <QuotaBanner used={47} limit={50} unit="messages" resetsIn="3h 12m" upgradeLabel="Upgrade" />
+ */
+declare function QuotaBanner({ used, limit, unit, resetsIn, upgradeLabel, onUpgrade, className, ...props }: Omit<ComponentProps<"div">, "children" | "used" | "limit" | "unit" | "resetsIn" | "upgradeLabel" | "onUpgrade"> & {
+  /** How much has been consumed. */
+  used: number;
+  /** The allowance. The banner turns amber at 90 percent. */
+  limit: number;
+  /** What is being counted: messages, runs, credits. */
+  unit: string;
+  /** Pre-formatted time until the window rolls over. */
+  resetsIn: string;
+  /** Label for the way out. */
+  upgradeLabel: string;
+  /** Called from the upgrade action. */
+  onUpgrade?: () => void;
+}): import("react").JSX.Element;
+//#endregion
+export { QuotaBanner };

package/dist/elements/quota-banner.js

@@ -0,0 +1,66 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { inkButton, mono, paper } from "./surfaces.js";
+import { pct } from "./range.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/quota-banner.tsx
+/**
+* How much is left, when it comes back, and the way to get more.
+*
+* @example
+* import { QuotaBanner } from "@cueplusplus/ui/elements";
+*
+* <QuotaBanner used={47} limit={50} unit="messages" resetsIn="3h 12m" upgradeLabel="Upgrade" />
+*/
+function QuotaBanner({ used, limit, unit, resetsIn, upgradeLabel, onUpgrade, className, ...props }) {
+	const left = Math.max(0, limit - used);
+	const tight = (limit === 0 ? 0 : used / limit) >= .9;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "quota-banner",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-2.5 rounded-(--radius-overlay) p-3.5", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-baseline gap-2",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: cn("text-(length:--cue-text-body) font-medium", tight && "text-warn"),
+					children: [
+						left,
+						" ",
+						unit,
+						" left"
+					]
+				}), /* @__PURE__ */ jsxs("span", {
+					className: cn(mono, "text-fg-subtle ms-auto tabular-nums"),
+					children: ["resets in ", resetsIn]
+				})]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "bg-surface-2 h-1 w-full overflow-hidden rounded-full",
+				children: /* @__PURE__ */ jsx("span", {
+					className: cn("block h-full rounded-full transition-[width] duration-500 motion-reduce:transition-none", tight ? "bg-warn" : "bg-surface-3"),
+					style: { width: `${pct(used, limit)}%` }
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: cn(mono, "text-fg-subtle tabular-nums"),
+					children: [
+						used,
+						" of ",
+						limit,
+						" used"
+					]
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onUpgrade,
+					className: cn(inkButton, "ms-auto flex h-7 items-center rounded-full px-3 text-(length:--cue-text-ui) font-medium"),
+					children: upgradeLabel
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { QuotaBanner };

package/dist/elements/quote-reply.d.ts

@@ -0,0 +1,44 @@
+import { ComponentProps } from "react";
+//#region src/elements/quote-reply.d.ts
+/** One offer in the selection toolbar: quote the passage, or act on it. */
+interface QuoteAction {
+  /** Identifies the action, and what `onAction` reports. */
+  key: string;
+  /** The word on the button. */
+  label: string;
+  /** Which of the three glyphs it takes — the element owns the icon set, not the caller. */
+  icon: "quote" | "explain" | "rewrite";
+}
+/**
+ * Select a phrase in an answer and a toolbar offers to quote, explain, or rewrite it.
+ *
+ * @example
+ * import { QuoteReply } from "@cueplusplus/ui/elements";
+ *
+ * <QuoteReply
+ *   before="The regression happens because "
+ *   selection="the converter drops parts with no text"
+ *   after=", so the turn never lands."
+ *   actions={actions}
+ *   toolbarVisible
+ *   onAction={handle}
+ * />
+ */
+declare function QuoteReply({ before, selection, after, actions, toolbarVisible, quoted, onAction, className, ...props }: Omit<ComponentProps<"div">, "children" | "before" | "selection" | "after" | "actions" | "toolbarVisible" | "quoted" | "onAction"> & {
+  /** Text preceding the selection. */
+  before: string;
+  /** The highlighted run the actions apply to. */
+  selection: string;
+  /** Text following the selection. */
+  after: string;
+  /** What the toolbar offers. Each action names one of the three built-in icons. */
+  actions: readonly QuoteAction[];
+  /** Whether the floating toolbar is showing. Drive it from your own selection handler. */
+  toolbarVisible: boolean;
+  /** Once quoted, the text carried into the composer, shown under a rule. */
+  quoted?: string;
+  /** Called with the key of the action that was chosen. */
+  onAction?: (key: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { QuoteAction, QuoteReply };

package/dist/elements/quote-reply.js

@@ -0,0 +1,79 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PencilLineIcon, QuoteIcon, SparklesIcon } from "lucide-react";
+//#region src/elements/quote-reply.tsx
+const ICON = {
+	quote: QuoteIcon,
+	explain: SparklesIcon,
+	rewrite: PencilLineIcon
+};
+/**
+* Select a phrase in an answer and a toolbar offers to quote, explain, or rewrite it.
+*
+* @example
+* import { QuoteReply } from "@cueplusplus/ui/elements";
+*
+* <QuoteReply
+*   before="The regression happens because "
+*   selection="the converter drops parts with no text"
+*   after=", so the turn never lands."
+*   actions={actions}
+*   toolbarVisible
+*   onAction={handle}
+* />
+*/
+function QuoteReply({ before, selection, after, actions, toolbarVisible, quoted, onAction, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "quote-reply",
+		className: cn("flex w-full max-w-sm flex-col gap-2.5", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("p", {
+				className: "relative text-(length:--cue-text-body) leading-(--cue-leading-ui)",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-fg-muted",
+						children: before
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-fg rounded-(--radius-control) bg-stream/25 px-0.5",
+						children: selection
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-fg-muted",
+						children: after
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex h-9 items-start",
+				children: toolbarVisible && /* @__PURE__ */ jsx("div", {
+					className: cn("bg-surface-2 border border-border-overlay", "cue-elements-fade-in cue-elements-zoom-in-95 cue-elements-slide-in-from-top-1 cue-elements-animate-in flex items-center gap-0.5 rounded-full p-1 duration-200"),
+					children: actions.map((action) => {
+						const Icon = ICON[action.icon];
+						return /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: () => onAction?.(action.key),
+							className: "text-fg-muted hover:bg-surface-2 hover:text-fg flex h-7 items-center gap-1.5 rounded-full px-2.5 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.96]",
+							children: [/* @__PURE__ */ jsx(Icon, { className: "size-3.5" }), action.label]
+						}, action.key);
+					})
+				})
+			}),
+			quoted && /* @__PURE__ */ jsxs("div", {
+				className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in flex flex-col gap-1 duration-300",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle"),
+					children: "replying to"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "border-border-strong text-fg-muted border-s-2 ps-2.5 text-(length:--cue-text-ui) leading-(--cue-leading-ui)",
+					children: quoted
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { QuoteReply };

package/dist/elements/range.d.ts

@@ -0,0 +1,29 @@
+//#region src/elements/range.d.ts
+/**
+ * Range normalization for the numeric props the elements take.
+ *
+ * Elements are driven by a caller's state, so a prop can arrive negative, past
+ * the end of its collection, or NaN. Left raw, those reach the DOM: a negative
+ * percentage is an invalid CSS width that the browser drops, leaving a bar at
+ * its natural full width, and a negative slice length counts from the end of
+ * the array instead of returning nothing.
+ */
+/**
+ * Constrains a value to `min…max`. NaN is decided first and maps to `min`.
+ * For any other value, an empty collection can invert the bounds and `max`
+ * wins there: `clamp(3, 1, 0)` is `0`, which is what lets a floor of one item
+ * still yield none.
+ */
+declare function clamp(value: number, min: number, max: number): number;
+/** The first `count` items, for a `count` that may be out of range. */
+declare function take<T>(items: readonly T[], count: number): T[];
+/** The position `index` names in `items`, for an `index` out of range. */
+declare function indexIn<T>(items: readonly T[], index: number): number;
+/** The item at `index`, for an `index` that may be out of range. */
+declare function at<T>(items: readonly T[], index: number): T | undefined;
+/** `value` as a share of `total`, as a percentage in `0…100`. */
+declare function pct(value: number, total: number): number;
+/** A count of completed items out of `total`, in `0…total`. */
+declare function progressOf(index: number, total: number): number;
+//#endregion
+export { at, clamp, indexIn, pct, progressOf, take };

package/dist/elements/range.js

@@ -0,0 +1,45 @@
+//#region src/elements/range.ts
+/**
+* Range normalization for the numeric props the elements take.
+*
+* Elements are driven by a caller's state, so a prop can arrive negative, past
+* the end of its collection, or NaN. Left raw, those reach the DOM: a negative
+* percentage is an invalid CSS width that the browser drops, leaving a bar at
+* its natural full width, and a negative slice length counts from the end of
+* the array instead of returning nothing.
+*/
+/**
+* Constrains a value to `min…max`. NaN is decided first and maps to `min`.
+* For any other value, an empty collection can invert the bounds and `max`
+* wins there: `clamp(3, 1, 0)` is `0`, which is what lets a floor of one item
+* still yield none.
+*/
+function clamp(value, min, max) {
+	if (Number.isNaN(value)) return min;
+	return Math.min(max, Math.max(min, value));
+}
+/** The first `count` items, for a `count` that may be out of range. */
+function take(items, count) {
+	return items.slice(0, Math.floor(clamp(count, 0, items.length)));
+}
+/** The position `index` names in `items`, for an `index` out of range. */
+function indexIn(items, index) {
+	return Math.floor(clamp(index, 0, Math.max(0, items.length - 1)));
+}
+/** The item at `index`, for an `index` that may be out of range. */
+function at(items, index) {
+	if (items.length === 0) return void 0;
+	return items[indexIn(items, index)];
+}
+/** `value` as a share of `total`, as a percentage in `0…100`. */
+function pct(value, total) {
+	if (!(total > 0)) return 0;
+	return clamp(value / total * 100, 0, 100);
+}
+/** A count of completed items out of `total`, in `0…total`. */
+function progressOf(index, total) {
+	if (!(total > 0)) return 0;
+	return Math.floor(clamp(index, 0, total));
+}
+//#endregion
+export { at, clamp, indexIn, pct, progressOf, take };