@cueplusplus/ui 0.3.0 → 0.5.0

package/dist/elements/settings-panel.d.ts

@@ -0,0 +1,52 @@
+import { ComponentProps } from "react";
+//#region src/elements/settings-panel.d.ts
+interface SettingToggle {
+  /** What `onToggle` is called with, and the row's key. Keep it unique. */
+  key: string;
+  /** The capability's name, on the switch's own line. */
+  label: string;
+  /** One line saying what turning it on actually does. */
+  detail: string;
+  /** Whether it is on. The panel holds no state; this is the caller's. */
+  on: boolean;
+}
+/**
+ * Model, system prompt, temperature, and what the assistant is allowed to do.
+ *
+ * @example
+ * import { SettingsPanel } from "@cueplusplus/ui/elements";
+ *
+ * <SettingsPanel
+ *   model={model}
+ *   models={models}
+ *   systemPrompt={prompt}
+ *   temperature={0.7}
+ *   toggles={toggles}
+ *   onModelChange={setModel}
+ * />
+ */
+declare function SettingsPanel({ model, models, systemPrompt, temperature, toggles, onModelChange, onSystemPromptChange, onTemperatureChange, onToggle, className, ...props }: Omit<ComponentProps<"div">, "children" | "model" | "models" | "systemPrompt" | "temperature" | "toggles" | "onModelChange" | "onSystemPromptChange" | "onTemperatureChange" | "onToggle"> & {
+  /** Selected model. */
+  model: string;
+  /**
+   * Models offered in the segmented control. Keep it to a few; more wants the model
+   * picker.
+   */
+  models: readonly string[];
+  /** Current system prompt. */
+  systemPrompt: string;
+  /** Current temperature, 0 to 2. */
+  temperature: number;
+  /** Capability switches with a line each explaining what they turn on. */
+  toggles: readonly SettingToggle[];
+  /** Called when the model changes. */
+  onModelChange?: (model: string) => void;
+  /** Called as the prompt is edited. */
+  onSystemPromptChange?: (prompt: string) => void;
+  /** Called as the slider moves. */
+  onTemperatureChange?: (temperature: number) => void;
+  /** Called with the switched capability's key. */
+  onToggle?: (key: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { SettingToggle, SettingsPanel };

package/dist/elements/settings-panel.js

@@ -0,0 +1,107 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { field, mono, paper } from "./surfaces.js";
+import { clamp } from "./range.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/settings-panel.tsx
+/**
+* Model, system prompt, temperature, and what the assistant is allowed to do.
+*
+* @example
+* import { SettingsPanel } from "@cueplusplus/ui/elements";
+*
+* <SettingsPanel
+*   model={model}
+*   models={models}
+*   systemPrompt={prompt}
+*   temperature={0.7}
+*   toggles={toggles}
+*   onModelChange={setModel}
+* />
+*/
+function SettingsPanel({ model, models, systemPrompt, temperature, toggles, onModelChange, onSystemPromptChange, onTemperatureChange, onToggle, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "settings-panel",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-4 rounded-(--radius-overlay) p-4", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn(mono, "text-fg-subtle"),
+					children: "model"
+				}), /* @__PURE__ */ jsx("div", {
+					className: cn(field, "flex gap-0.5 rounded-full p-0.5"),
+					children: models.map((option) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-pressed": option === model,
+						onClick: () => onModelChange?.(option),
+						className: cn("flex-1 rounded-full py-1 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.97]", option === model ? "bg-bg text-fg" : "text-fg-muted hover:text-fg-muted"),
+						children: option
+					}, option))
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn(mono, "text-fg-subtle"),
+					children: "system prompt"
+				}), /* @__PURE__ */ jsx("textarea", {
+					value: systemPrompt,
+					onChange: (event) => onSystemPromptChange?.(event.target.value),
+					rows: 3,
+					"aria-label": "System prompt",
+					className: cn(field, "text-fg-muted focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent resize-none rounded-(--radius-surface) px-3 py-2 text-(length:--cue-text-ui) leading-relaxed outline-none")
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "flex items-baseline justify-between",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cn(mono, "text-fg-subtle"),
+						children: "temperature"
+					}), /* @__PURE__ */ jsx("span", {
+						className: cn(mono, "text-fg-muted tabular-nums"),
+						children: clamp(temperature, 0, 2).toFixed(1)
+					})]
+				}), /* @__PURE__ */ jsx("input", {
+					type: "range",
+					min: 0,
+					max: 2,
+					step: .1,
+					value: clamp(temperature, 0, 2),
+					"aria-label": "Temperature",
+					onChange: (event) => onTemperatureChange?.(Number(event.target.value)),
+					className: "accent-fg-muted h-1 w-full cursor-pointer"
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-col gap-2.5",
+				children: toggles.map((toggle) => /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "flex min-w-0 flex-1 flex-col",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate text-(length:--cue-text-body)",
+							children: toggle.label
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-fg-subtle truncate text-(length:--cue-text-ui)",
+							children: toggle.detail
+						})]
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						role: "switch",
+						"aria-checked": toggle.on,
+						"aria-label": toggle.label,
+						onClick: () => onToggle?.(toggle.key),
+						className: cn("flex h-5 w-9 shrink-0 items-center rounded-full p-0.5 transition-colors duration-200", toggle.on ? "bg-accent" : "bg-surface-3"),
+						children: /* @__PURE__ */ jsx("span", { className: cn("bg-bg size-4 rounded-full transition-transform duration-200 motion-reduce:transition-none", toggle.on && "translate-x-4") })
+					})]
+				}, toggle.key))
+			})
+		]
+	});
+}
+//#endregion
+export { SettingsPanel };

package/dist/elements/shared-conversation.d.ts

@@ -0,0 +1,39 @@
+import { ComponentProps } from "react";
+//#region src/elements/shared-conversation.d.ts
+/** One turn of a published transcript: who said it, and what they said. */
+interface SharedTurn {
+  /** The row's key, and what a deep link into the transcript would name. */
+  id: string;
+  /** Who is speaking. The person gets a bubble, the model gets plain text. */
+  role: "user" | "assistant";
+  /** The turn itself, rendered verbatim. */
+  text: string;
+}
+/**
+ * A read-only transcript someone sent you, with a way to pick it up yourself.
+ *
+ * @example
+ * import { SharedConversation } from "@cueplusplus/ui/elements";
+ *
+ * <SharedConversation
+ *   title="Draft restore across threads"
+ *   sharedBy="harry"
+ *   sharedAt="2 days ago"
+ *   turns={turns}
+ *   onContinue={fork}
+ * />
+ */
+declare function SharedConversation({ title, sharedBy, sharedAt, turns, onContinue, className, ...props }: Omit<ComponentProps<"div">, "children" | "title" | "sharedBy" | "sharedAt" | "turns" | "onContinue"> & {
+  /** Name of the shared thread. */
+  title: string;
+  /** Who shared it. */
+  sharedBy: string;
+  /** Pre-formatted share time. */
+  sharedAt: string;
+  /** The transcript, read only. */
+  turns: readonly SharedTurn[];
+  /** Called to fork the transcript into the reader's own thread. */
+  onContinue?: () => void;
+}): import("react").JSX.Element;
+//#endregion
+export { SharedConversation, SharedTurn };

package/dist/elements/shared-conversation.js

@@ -0,0 +1,68 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { inkButton, mono, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { LinkIcon } from "lucide-react";
+//#region src/elements/shared-conversation.tsx
+/**
+* A read-only transcript someone sent you, with a way to pick it up yourself.
+*
+* @example
+* import { SharedConversation } from "@cueplusplus/ui/elements";
+*
+* <SharedConversation
+*   title="Draft restore across threads"
+*   sharedBy="harry"
+*   sharedAt="2 days ago"
+*   turns={turns}
+*   onContinue={fork}
+* />
+*/
+function SharedConversation({ title, sharedBy, sharedAt, turns, onContinue, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "shared-conversation",
+		className: cn(paper, "flex w-full max-w-sm flex-col overflow-hidden rounded-(--radius-overlay)", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2.5 px-4 pt-3.5 pb-3",
+				children: [/* @__PURE__ */ jsx(LinkIcon, { className: "text-fg-subtle size-3.5 shrink-0" }), /* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 flex-col",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "truncate text-(length:--cue-text-body) font-medium",
+						children: title
+					}), /* @__PURE__ */ jsxs("span", {
+						className: cn(mono, "text-fg-subtle truncate"),
+						children: [
+							"shared by ",
+							sharedBy,
+							" · ",
+							sharedAt
+						]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "border-border flex flex-col gap-2.5 border-t px-4 py-3.5",
+				children: turns.map((turn) => /* @__PURE__ */ jsx("div", {
+					className: cn("text-(length:--cue-text-body) leading-relaxed", turn.role === "user" ? "bg-surface-1 ms-auto max-w-[85%] rounded-(--radius-overlay) px-3 py-2" : "text-fg-muted"),
+					children: turn.text
+				}, turn.id))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "border-border flex items-center gap-2 border-t px-4 py-3",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn(mono, "text-fg-subtle"),
+					children: "read only"
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onContinue,
+					className: cn(inkButton, "ms-auto flex h-8 items-center rounded-full px-3.5 text-(length:--cue-text-ui) font-medium"),
+					children: "Continue in your own chat"
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { SharedConversation };

package/dist/elements/sources.d.ts

@@ -0,0 +1,33 @@
+//#region src/elements/sources.d.ts
+/** One citation behind an answer: the site it came from, and what the page is called. */
+interface Source {
+  /** The site, as a bare host. Also the card's key, so one domain appears once. */
+  domain: string;
+  /** The page's own title, clamped to two lines on the card. */
+  title: string;
+}
+interface SourcesProps {
+  /** Citation cards revealed when the sources pill expands. */
+  sources: readonly Source[];
+  /** Whether the source list is expanded under the pill. */
+  open: boolean;
+  /** Called when the user expands or collapses the sources. */
+  onOpenChange: (open: boolean) => void;
+  /** Extra classes merged onto the root. */
+  className?: string;
+}
+/**
+ * Citations collapsed into a pill, expanding into scannable source cards.
+ *
+ * @example
+ * import { Sources } from "@cueplusplus/ui/elements";
+ *
+ * <Sources
+ *   sources={[{ domain: "docs.example.com", title: "Composer guide" }]}
+ *   open
+ *   onOpenChange={setOpen}
+ * />
+ */
+declare function Sources({ sources, open, onOpenChange, className }: SourcesProps): import("react").JSX.Element;
+//#endregion
+export { Source, Sources, SourcesProps };

package/dist/elements/sources.js

@@ -0,0 +1,61 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { collapsePanel, fieldInteractive, mono, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Collapsible } from "@base-ui/react/collapsible";
+import { ChevronDownIcon } from "lucide-react";
+//#region src/elements/sources.tsx
+/**
+* Citations collapsed into a pill, expanding into scannable source cards.
+*
+* @example
+* import { Sources } from "@cueplusplus/ui/elements";
+*
+* <Sources
+*   sources={[{ domain: "docs.example.com", title: "Composer guide" }]}
+*   open
+*   onOpenChange={setOpen}
+* />
+*/
+function Sources({ sources, open, onOpenChange, className }) {
+	return /* @__PURE__ */ jsxs(Collapsible.Root, {
+		"data-slot": "sources",
+		open,
+		onOpenChange,
+		className: cn("w-full max-w-sm", className),
+		children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
+			className: cn(fieldInteractive, "group/trigger text-fg-muted hover:text-fg inline-flex w-fit items-center gap-1.5 rounded-full px-3.5 py-2 text-(length:--cue-text-ui) outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent"),
+			children: [
+				/* @__PURE__ */ jsx("span", { children: "Sources" }),
+				/* @__PURE__ */ jsx("span", {
+					className: cn(mono, "text-fg-subtle tabular-nums"),
+					children: sources.length
+				}),
+				/* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3 opacity-60 transition-transform duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-[panel-open]/trigger:rotate-180 motion-reduce:transition-none" })
+			]
+		}), /* @__PURE__ */ jsx(Collapsible.Panel, {
+			className: cn(collapsePanel, "outline-none"),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "grid grid-cols-2 gap-2 pt-2.5",
+				children: sources.map((source) => /* @__PURE__ */ jsxs("div", {
+					className: cn(paper, "flex flex-col gap-1.5 rounded-(--radius-overlay) p-3 transition-transform hover:-translate-y-px"),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1.5",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "bg-surface-2 text-fg-muted flex size-4 shrink-0 items-center justify-center rounded-(--radius-control) text-(length:--cue-text-micro) font-medium",
+							children: source.domain.charAt(0).toUpperCase()
+						}), /* @__PURE__ */ jsx("span", {
+							className: cn(mono, "text-fg-subtle truncate"),
+							children: source.domain
+						})]
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-fg line-clamp-2 text-(length:--cue-text-body) leading-snug font-medium",
+						children: source.title
+					})]
+				}, source.domain))
+			})
+		})]
+	});
+}
+//#endregion
+export { Sources };

package/dist/elements/speaker-identity.d.ts

@@ -0,0 +1,32 @@
+import { ComponentProps } from "react";
+//#region src/elements/speaker-identity.d.ts
+type SpeakerKind = "user" | "agent" | "subagent" | "tool";
+interface SpeakerTurn {
+  /** Stable identity for the row key. */
+  id: string;
+  /**
+   * Chooses the badge shape and tone. Subagents get a round badge so they read as
+   * delegated.
+   */
+  kind: SpeakerKind;
+  /** Display name for the speaker. */
+  name: string;
+  /** Secondary fact next to the name: the model, a duration. */
+  detail?: string;
+  /** What this speaker said. */
+  text: string;
+}
+/**
+ * Who is talking, once a thread holds more than a user and one model.
+ *
+ * @example
+ * import { SpeakerIdentity } from "@cueplusplus/ui/elements";
+ *
+ * <SpeakerIdentity turns={turns} />
+ */
+declare function SpeakerIdentity({ turns, className, ...props }: Omit<ComponentProps<"div">, "children" | "turns"> & {
+  /** Turns in order, each naming who produced it. */
+  turns: readonly SpeakerTurn[];
+}): import("react").JSX.Element;
+//#endregion
+export { SpeakerIdentity, SpeakerKind, SpeakerTurn };

package/dist/elements/speaker-identity.js

@@ -0,0 +1,51 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BotIcon, UserIcon, WrenchIcon } from "lucide-react";
+//#region src/elements/speaker-identity.tsx
+const TONE = {
+	user: "bg-surface-2 text-fg-muted",
+	agent: "bg-stream/15 text-stream",
+	subagent: "bg-surface-2 text-fg-muted",
+	tool: "bg-surface-1 text-fg-subtle"
+};
+/**
+* Who is talking, once a thread holds more than a user and one model.
+*
+* @example
+* import { SpeakerIdentity } from "@cueplusplus/ui/elements";
+*
+* <SpeakerIdentity turns={turns} />
+*/
+function SpeakerIdentity({ turns, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "speaker-identity",
+		className: cn("flex w-full max-w-sm flex-col gap-3.5", className),
+		...props,
+		children: turns.map((turn) => /* @__PURE__ */ jsxs("div", {
+			className: "flex gap-2.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: cn("flex size-6 shrink-0 items-center justify-center rounded-(--radius-surface)", TONE[turn.kind], turn.kind === "subagent" && "rounded-full"),
+				children: turn.kind === "user" ? /* @__PURE__ */ jsx(UserIcon, { className: "size-3" }) : turn.kind === "tool" ? /* @__PURE__ */ jsx(WrenchIcon, { className: "size-3" }) : /* @__PURE__ */ jsx(BotIcon, { className: "size-3" })
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-0.5",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "flex items-baseline gap-1.5",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-(length:--cue-text-body) font-medium",
+						children: turn.name
+					}), turn.detail && /* @__PURE__ */ jsx("span", {
+						className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle"),
+						children: turn.detail
+					})]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-fg-muted text-(length:--cue-text-body) leading-relaxed break-words",
+					children: turn.text
+				})]
+			})]
+		}, turn.id))
+	});
+}
+//#endregion
+export { SpeakerIdentity };

package/dist/elements/spec-sheet.d.ts

@@ -0,0 +1,31 @@
+import { ComponentProps } from "react";
+//#region src/elements/spec-sheet.d.ts
+/** One labelled fact of a structured answer. */
+interface SpecRow {
+  /** Field name, rendered in mono on the left. */
+  label: string;
+  /** Pre-formatted value. The element never formats numbers itself. */
+  value: string;
+  /** Renders the value in full ink. Use it for the one row that answers the question. */
+  emphasis?: boolean;
+}
+/**
+ * The most common structured answer after a table: one object, labeled.
+ *
+ * @example
+ * import { SpecSheet } from "@cueplusplus/ui/elements";
+ *
+ * <SpecSheet title="Opus 5" subtitle="claude-opus-5" rows={rows} visibleCount={6} />
+ */
+declare function SpecSheet({ title, subtitle, rows, visibleCount, className, ...props }: Omit<ComponentProps<"div">, "children" | "title" | "subtitle" | "rows" | "visibleCount"> & {
+  /** What the sheet describes. */
+  title: string;
+  /** Secondary identifier: a model id, a SKU, a version. */
+  subtitle?: string;
+  /** Label and value pairs. Values are pre-formatted and right-aligned on tabular figures. */
+  rows: readonly SpecRow[];
+  /** How many rows have landed. */
+  visibleCount: number;
+}): import("react").JSX.Element;
+//#endregion
+export { SpecRow, SpecSheet };

package/dist/elements/spec-sheet.js

@@ -0,0 +1,45 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mono, paper } from "./surfaces.js";
+import { take } from "./range.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/spec-sheet.tsx
+/**
+* The most common structured answer after a table: one object, labeled.
+*
+* @example
+* import { SpecSheet } from "@cueplusplus/ui/elements";
+*
+* <SpecSheet title="Opus 5" subtitle="claude-opus-5" rows={rows} visibleCount={6} />
+*/
+function SpecSheet({ title, subtitle, rows, visibleCount, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "spec-sheet",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-3 rounded-(--radius-overlay) p-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-0.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-(length:--cue-text-body) font-medium",
+				children: title
+			}), subtitle && /* @__PURE__ */ jsx("span", {
+				className: "text-fg-muted text-(length:--cue-text-ui)",
+				children: subtitle
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col",
+			children: take(rows, visibleCount).map((row) => /* @__PURE__ */ jsxs("div", {
+				className: "border-border cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both flex items-baseline gap-3 border-t py-1.5 duration-300 first:border-t-0 first:pt-0",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn(mono, "text-fg-subtle w-24 shrink-0"),
+					children: row.label
+				}), /* @__PURE__ */ jsx("span", {
+					className: cn("min-w-0 flex-1 text-end text-(length:--cue-text-body) tabular-nums", row.emphasis ? "text-fg font-medium" : "text-fg-muted"),
+					children: row.value
+				})]
+			}, row.label))
+		})]
+	});
+}
+//#endregion
+export { SpecSheet };

package/dist/elements/stopped-run.d.ts

@@ -0,0 +1,22 @@
+import { ComponentProps } from "react";
+//#region src/elements/stopped-run.d.ts
+/**
+ * You pressed stop. The half-written answer stays, and continuing is one tap away.
+ *
+ * @example
+ * import { StoppedRun } from "@cueplusplus/ui/elements";
+ *
+ * <StoppedRun words={words} reason="stopped by you" onContinue={resume} />
+ */
+declare function StoppedRun({ words, reason, onContinue, onDiscard, className, ...props }: Omit<ComponentProps<"div">, "children" | "words" | "reason" | "onContinue" | "onDiscard"> & {
+  /** The partial answer as it stood when the run stopped. It stays on screen. */
+  words: readonly string[];
+  /** Why it ended: stopped by you, hit the token limit, timed out. */
+  reason: string;
+  /** Called to resume from where the answer left off. */
+  onContinue?: () => void;
+  /** Called to drop the partial answer. */
+  onDiscard?: () => void;
+}): import("react").JSX.Element;
+//#endregion
+export { StoppedRun };

package/dist/elements/stopped-run.js

@@ -0,0 +1,50 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { field, mono } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowRightIcon, SquareIcon } from "lucide-react";
+//#region src/elements/stopped-run.tsx
+/**
+* You pressed stop. The half-written answer stays, and continuing is one tap away.
+*
+* @example
+* import { StoppedRun } from "@cueplusplus/ui/elements";
+*
+* <StoppedRun words={words} reason="stopped by you" onContinue={resume} />
+*/
+function StoppedRun({ words, reason, onContinue, onDiscard, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "stopped-run",
+		className: cn("flex w-full max-w-sm flex-col gap-3", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("p", {
+			className: "text-fg-muted text-(length:--cue-text-body) leading-relaxed",
+			children: [words.join(" "), /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "bg-surface-3 ms-1 inline-block h-[1em] w-[2px] translate-y-[0.15em] rounded-full"
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: cn(field, mono, "text-fg-muted inline-flex items-center gap-1.5 rounded-full px-2.5 py-1"),
+					children: [/* @__PURE__ */ jsx(SquareIcon, { className: "size-2.5 fill-current" }), reason]
+				}),
+				/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: onContinue,
+					className: "text-fg-muted hover:bg-surface-2 hover:text-fg ms-auto flex h-7 items-center gap-1 rounded-full px-2.5 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.96]",
+					children: ["Continue", /* @__PURE__ */ jsx(ArrowRightIcon, { className: "size-3" })]
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onDiscard,
+					className: "text-fg-muted hover:bg-surface-2 hover:text-fg flex h-7 items-center rounded-full px-2.5 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.96]",
+					children: "Discard"
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { StoppedRun };

package/dist/elements/streaming-text.d.ts

@@ -0,0 +1,31 @@
+import { ComponentProps } from "react";
+//#region src/elements/streaming-text.d.ts
+/** A run of the answer that shares one treatment: prose, or a span set in mono. */
+interface Segment {
+  /** The run itself. Split on spaces, so the stream arrives a word at a time. */
+  text: string;
+  /** Set the run in mono on a faint chip — a path, an identifier, a command. */
+  mono?: boolean;
+}
+/**
+ * Tokens arrive softly: the newest words land in blue and settle into ink.
+ *
+ * @example
+ * import { StreamingText } from "@cueplusplus/ui/elements";
+ *
+ * <StreamingText
+ *   segments={[{ text: "Hello world" }, { text: "thread.tsx", mono: true }]}
+ *   count={3}
+ *   streaming
+ * />
+ */
+declare function StreamingText({ segments, count, streaming, className, ...props }: Omit<ComponentProps<"p">, "children" | "segments" | "count" | "streaming"> & {
+  /** Text chunks to stream, optionally marked mono for inline code chips. */
+  segments: Segment[];
+  /** How many words from the flattened segments are visible. */
+  count: number;
+  /** When true the newest words tint blue and a caret blinks at the end. */
+  streaming: boolean;
+}): import("react").JSX.Element;
+//#endregion
+export { Segment, StreamingText };