@cueplusplus/ui 0.2.0 → 0.5.0

package/dist/elements/terminal-block.d.ts

@@ -0,0 +1,29 @@
+import { ComponentProps } from "react";
+//#region src/elements/terminal-block.d.ts
+/**
+ * Command output that streams line by line and ends with an exit status.
+ *
+ * @example
+ * import { TerminalBlock } from "@cueplusplus/ui/elements";
+ *
+ * <TerminalBlock
+ *   command="pnpm test"
+ *   lines={["PASS  thread.test.ts", "Tests: 2 passed"]}
+ *   visibleCount={2}
+ *   done
+ * />
+ */
+declare function TerminalBlock({ command, lines, visibleCount, done, variant, className, ...props }: Omit<ComponentProps<"div">, "children" | "command" | "lines" | "visibleCount" | "done" | "variant"> & {
+  /** Command string shown in the terminal header. */
+  command: string;
+  /** Output lines available to stream into the body. */
+  lines: readonly string[];
+  /** How many output lines from the start are currently shown. */
+  visibleCount: number;
+  /** When true the header shows exit 0; otherwise a spinner keeps spinning. */
+  done: boolean;
+  /** paper matches the surrounding surfaces; ink renders the classic dark terminal slab. */
+  variant?: "paper" | "ink";
+}): import("react").JSX.Element;
+//#endregion
+export { TerminalBlock };

package/dist/elements/terminal-block.js

@@ -0,0 +1,54 @@
+"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";
+import { CheckIcon, Loader2Icon } from "lucide-react";
+//#region src/elements/terminal-block.tsx
+/**
+* Command output that streams line by line and ends with an exit status.
+*
+* @example
+* import { TerminalBlock } from "@cueplusplus/ui/elements";
+*
+* <TerminalBlock
+*   command="pnpm test"
+*   lines={["PASS  thread.test.ts", "Tests: 2 passed"]}
+*   visibleCount={2}
+*   done
+* />
+*/
+function TerminalBlock({ command, lines, visibleCount, done, variant = "paper", className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "terminal-block",
+		className: cn(variant === "ink" ? "bg-sunken" : paper, "w-full max-w-md overflow-hidden rounded-(--radius-overlay) font-mono text-(length:--cue-text-ui)", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between px-4 pt-3 pb-1.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-fg",
+				children: command
+			}), done ? /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1",
+				children: [/* @__PURE__ */ jsx(CheckIcon, { className: "size-3 text-ok" }), /* @__PURE__ */ jsx("span", {
+					className: cn(mono, "text-fg-subtle"),
+					children: "exit 0"
+				})]
+			}) : /* @__PURE__ */ jsx(Loader2Icon, { className: cn("size-3 animate-spin motion-reduce:animate-none", "text-fg-subtle") })]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: cn("flex min-h-[8.5rem] flex-col gap-1 px-4 pt-1 pb-3.5", "text-fg-muted"),
+			children: [take(lines, visibleCount).map((line, i) => {
+				const isLast = i === lines.length - 1;
+				return /* @__PURE__ */ jsx("div", {
+					className: cn("cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both duration-300", isLast && "text-fg"),
+					children: line
+				}, `${i}-${line}`);
+			}), !done && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "inline-block h-3 w-1.5 animate-pulse bg-stream/70 motion-reduce:animate-none"
+			})]
+		})]
+	});
+}
+//#endregion
+export { TerminalBlock };

package/dist/elements/thinking-indicator.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps } from "react";
+//#region src/elements/thinking-indicator.d.ts
+/**
+ * A live status line that names what the agent is doing right now, with elapsed time.
+ *
+ * @example
+ * import { ThinkingIndicator } from "@cueplusplus/ui/elements";
+ *
+ * <ThinkingIndicator label="Reading thread.tsx" elapsed="12s" />
+ */
+declare function ThinkingIndicator({ label, elapsed, className, ...props }: Omit<ComponentProps<"div">, "children" | "label" | "elapsed"> & {
+  /** What the agent is doing right now. Swapping it replays the entrance animation. */
+  label: string;
+  /** Elapsed time rendered in mono next to the label. Omit to hide the timer. */
+  elapsed?: string;
+}): import("react").JSX.Element;
+//#endregion
+export { ThinkingIndicator };

package/dist/elements/thinking-indicator.js

@@ -0,0 +1,36 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ShimmerLabel } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/thinking-indicator.tsx
+/**
+* A live status line that names what the agent is doing right now, with elapsed time.
+*
+* @example
+* import { ThinkingIndicator } from "@cueplusplus/ui/elements";
+*
+* <ThinkingIndicator label="Reading thread.tsx" elapsed="12s" />
+*/
+function ThinkingIndicator({ label, elapsed, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "thinking-indicator",
+		className: cn("text-fg-muted flex items-center gap-2.5 text-(length:--cue-text-body)", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "size-1.5 shrink-0 animate-pulse rounded-full bg-stream motion-reduce:animate-none"
+			}),
+			/* @__PURE__ */ jsx(ShimmerLabel, {
+				className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in relative inline-block leading-none duration-300",
+				children: label
+			}, label),
+			elapsed !== void 0 && /* @__PURE__ */ jsx("span", {
+				className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle tabular-nums"),
+				children: elapsed
+			})
+		]
+	});
+}
+//#endregion
+export { ThinkingIndicator };

package/dist/elements/thread-list.d.ts

@@ -0,0 +1,35 @@
+import { ComponentProps } from "react";
+//#region src/elements/thread-list.d.ts
+interface ThreadItem {
+  /** What the conversation is about, truncated to one line. */
+  title: string;
+  /** Pre-formatted age of the last message. The element does no date maths. */
+  time: string;
+  /** Whether the row carries the unread dot. */
+  unread?: boolean;
+}
+/**
+ * Conversation history with unread marks and actions that wait for hover.
+ *
+ * @example
+ * import { ThreadList } from "@cueplusplus/ui/elements";
+ *
+ * <ThreadList
+ *   threads={[
+ *     { title: "Composer polish", time: "2m", unread: true },
+ *     { title: "Runtime migration", time: "1h" },
+ *   ]}
+ *   activeIndex={activeIndex}
+ *   onActiveIndexChange={setActiveIndex}
+ * />
+ */
+declare function ThreadList({ threads, activeIndex, onActiveIndexChange, className, ...props }: Omit<ComponentProps<"div">, "children" | "threads" | "activeIndex" | "onActiveIndexChange"> & {
+  /** Conversation rows with title, time, and optional unread mark. */
+  threads: readonly ThreadItem[];
+  /** Index of the currently selected thread. An index outside the list selects nothing. */
+  activeIndex: number;
+  /** Called when the user clicks a thread row. */
+  onActiveIndexChange?: (index: number) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { ThreadItem, ThreadList };

package/dist/elements/thread-list.js

@@ -0,0 +1,68 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { field, mono } from "./surfaces.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { PencilIcon, Trash2Icon } from "lucide-react";
+//#region src/elements/thread-list.tsx
+/**
+* Conversation history with unread marks and actions that wait for hover.
+*
+* @example
+* import { ThreadList } from "@cueplusplus/ui/elements";
+*
+* <ThreadList
+*   threads={[
+*     { title: "Composer polish", time: "2m", unread: true },
+*     { title: "Runtime migration", time: "1h" },
+*   ]}
+*   activeIndex={activeIndex}
+*   onActiveIndexChange={setActiveIndex}
+* />
+*/
+function ThreadList({ threads, activeIndex, onActiveIndexChange, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "thread-list",
+		className: cn("flex w-full max-w-[240px] flex-col gap-0.5", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn(mono, "text-fg-subtle px-3 pb-1.5"),
+			children: "Today"
+		}), threads.map((thread, i) => {
+			const active = i === activeIndex;
+			return /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"aria-current": active || void 0,
+				onClick: () => onActiveIndexChange?.(i),
+				className: cn("group flex w-full items-center justify-between gap-2 rounded-(--radius-surface) px-3 py-2 text-start text-(length:--cue-text-body) transition-colors", active ? field : "hover:bg-surface-1"),
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "flex-1 truncate",
+						children: thread.title
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: cn(mono, "text-fg-subtle flex items-center gap-1.5 tabular-nums group-hover:hidden"),
+						children: [thread.unread && !active && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: "size-1.5 rounded-full bg-stream"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: "unread"
+						})] }), thread.time]
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "hidden items-center gap-0.5 group-hover:flex",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-fg-muted hover:bg-surface-2 hover:text-fg rounded-full p-1",
+							children: /* @__PURE__ */ jsx(PencilIcon, { className: "size-3" })
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-fg-muted hover:bg-surface-2 hover:text-fg rounded-full p-1",
+							children: /* @__PURE__ */ jsx(Trash2Icon, { className: "size-3" })
+						})]
+					})
+				]
+			}, thread.title);
+		})]
+	});
+}
+//#endregion
+export { ThreadList };

package/dist/elements/thread-search.d.ts

@@ -0,0 +1,42 @@
+import { ComponentProps } from "react";
+//#region src/elements/thread-search.d.ts
+interface SearchableThread {
+  /** Stable identity, compared against activeId. */
+  id: string;
+  /** Thread title. Filtering matches this and preview together. */
+  title: string;
+  /** Date bucket the thread falls into: Today, Yesterday, Earlier. */
+  group: string;
+  /** Second line under the title. */
+  preview: string;
+  /** Lifts the thread out of its date group into its own pinned section. */
+  pinned?: boolean;
+}
+/**
+ * History you can actually get back into: pinned first, then grouped by when.
+ *
+ * @example
+ * import { ThreadSearch } from "@cueplusplus/ui/elements";
+ *
+ * <ThreadSearch
+ *   threads={threads}
+ *   query={query}
+ *   activeId={activeId}
+ *   onQueryChange={setQuery}
+ *   onSelect={setActiveId}
+ * />
+ */
+declare function ThreadSearch({ threads, query, activeId, onQueryChange, onSelect, className, ...props }: Omit<ComponentProps<"div">, "children" | "threads" | "query" | "activeId" | "onQueryChange" | "onSelect"> & {
+  /** All threads. Filtering matches title and preview together. */
+  threads: readonly SearchableThread[];
+  /** Current search text. */
+  query: string;
+  /** Which thread is open. */
+  activeId: string;
+  /** Called as the search is typed. */
+  onQueryChange?: (query: string) => void;
+  /** Called when a thread is opened. */
+  onSelect?: (id: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { SearchableThread, ThreadSearch };

package/dist/elements/thread-search.js

@@ -0,0 +1,99 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { field, mono, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PinIcon, SearchIcon } from "lucide-react";
+//#region src/elements/thread-search.tsx
+/**
+* History you can actually get back into: pinned first, then grouped by when.
+*
+* @example
+* import { ThreadSearch } from "@cueplusplus/ui/elements";
+*
+* <ThreadSearch
+*   threads={threads}
+*   query={query}
+*   activeId={activeId}
+*   onQueryChange={setQuery}
+*   onSelect={setActiveId}
+* />
+*/
+function ThreadSearch({ threads, query, activeId, onQueryChange, onSelect, className, ...props }) {
+	const matches = threads.filter((thread) => `${thread.title} ${thread.preview}`.toLowerCase().includes(query.toLowerCase()));
+	const pinned = matches.filter((thread) => thread.pinned);
+	const groups = [...new Set(matches.filter((t) => !t.pinned).map((t) => t.group))];
+	const ordered = [...pinned, ...groups.flatMap((group) => matches.filter((thread) => !thread.pinned && thread.group === group))];
+	const move = (delta) => {
+		if (ordered.length === 0) return;
+		const at = ordered.findIndex((thread) => thread.id === activeId);
+		const next = ordered[((at === -1 ? delta > 0 ? -1 : 0 : at) + delta + ordered.length) % ordered.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);
+		}
+	};
+	const row = (thread) => /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: () => onSelect?.(thread.id),
+		className: cn("flex flex-col gap-0.5 rounded-(--radius-surface) px-2 py-1 text-start transition-colors", thread.id === activeId ? "bg-surface-1" : "hover:bg-surface-1"),
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "flex items-center gap-1.5",
+			children: [thread.pinned && /* @__PURE__ */ jsx(PinIcon, { className: "text-fg-subtle size-2.5 shrink-0" }), /* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate text-(length:--cue-text-body)",
+				children: thread.title
+			})]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "text-fg-subtle truncate text-(length:--cue-text-ui)",
+			children: thread.preview
+		})]
+	}, thread.id);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "thread-search",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-1.5 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(SearchIcon, { className: "text-fg-subtle size-3.5 shrink-0" }), /* @__PURE__ */ jsx("input", {
+					value: query,
+					onChange: (event) => onQueryChange?.(event.target.value),
+					onKeyDown,
+					placeholder: "Search threads",
+					"aria-label": "Search threads",
+					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"
+				})]
+			}),
+			pinned.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle px-2 pb-1"),
+					children: "pinned"
+				}), pinned.map(row)]
+			}),
+			groups.map((group) => /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn(mono, "text-fg-subtle px-2 pb-1"),
+					children: group
+				}), matches.filter((thread) => !thread.pinned && thread.group === group).map(row)]
+			}, group)),
+			matches.length === 0 && /* @__PURE__ */ jsxs("span", {
+				className: "text-fg-subtle px-2 py-4 text-center text-(length:--cue-text-ui)",
+				children: [
+					"No thread matches “",
+					query,
+					"”"
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { ThreadSearch };

package/dist/elements/timeline.d.ts

@@ -0,0 +1,37 @@
+import { ComponentProps } from "react";
+//#region src/elements/timeline.d.ts
+/**
+ * Which side of now an event is on: `past`, `now`, or `future`. It decides the marker
+ * and the ink, which is what lets one list carry what happened and what is still
+ * coming.
+ */
+type TimelineWhen = "past" | "now" | "future";
+/** One event on the axis: when it is, what it is, and the line under it. */
+interface TimelineEvent {
+  /** Stable identity for the row key. */
+  id: string;
+  /** past is filled, now gets a ring, future is an outline with a lighter rail. */
+  when: TimelineWhen;
+  /** Pre-formatted timestamp in the left rail. */
+  time: string;
+  /** What happened. */
+  title: string;
+  /** Optional second line under the title. */
+  detail?: string;
+}
+/**
+ * Events on a time axis, with what already happened and what is still coming.
+ *
+ * @example
+ * import { Timeline } from "@cueplusplus/ui/elements";
+ *
+ * <Timeline events={events} visibleCount={events.length} />
+ */
+declare function ElementsTimeline({ events, visibleCount, className, ...props }: Omit<ComponentProps<"div">, "children" | "events" | "visibleCount"> & {
+  /** Events in chronological order, past and scheduled together. */
+  events: readonly TimelineEvent[];
+  /** How many events have been resolved. */
+  visibleCount: number;
+}): import("react").JSX.Element;
+//#endregion
+export { ElementsTimeline, TimelineEvent, TimelineWhen };

package/dist/elements/timeline.js

@@ -0,0 +1,46 @@
+"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/timeline.tsx
+/**
+* Events on a time axis, with what already happened and what is still coming.
+*
+* @example
+* import { Timeline } from "@cueplusplus/ui/elements";
+*
+* <Timeline events={events} visibleCount={events.length} />
+*/
+function ElementsTimeline({ events, visibleCount, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "timeline",
+		className: cn(paper, "flex w-full max-w-sm flex-col rounded-(--radius-overlay) p-4", className),
+		...props,
+		children: take(events, visibleCount).map((event, i, shown) => /* @__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-[3.5rem_1rem_minmax(0,1fr)] gap-x-2 duration-300",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: cn(mono, "pt-[3px] text-end tabular-nums", event.when === "future" ? "text-fg-subtle" : "text-fg-subtle"),
+					children: event.time
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "flex flex-col items-center",
+					children: [/* @__PURE__ */ jsx("span", { className: cn("mt-1 size-2 shrink-0 rounded-full", event.when === "now" && "bg-stream ring-stream/15", event.when === "past" && "bg-surface-3", event.when === "future" && "border-border-strong border bg-transparent") }), i < shown.length - 1 && /* @__PURE__ */ jsx("span", { className: cn("w-px flex-1", event.when === "future" ? "bg-surface-2" : "bg-surface-3") })]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: cn("flex flex-col gap-0.5", i < shown.length - 1 && "pb-3"),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cn("text-(length:--cue-text-body) break-words", event.when === "future" ? "text-fg-subtle" : "text-fg", event.when === "now" && "font-medium"),
+						children: event.title
+					}), event.detail && /* @__PURE__ */ jsx("span", {
+						className: "text-fg-muted text-(length:--cue-text-ui) leading-relaxed break-words",
+						children: event.detail
+					})]
+				})
+			]
+		}, event.id))
+	});
+}
+//#endregion
+export { ElementsTimeline };

package/dist/elements/todo-list.d.ts

@@ -0,0 +1,42 @@
+import { ComponentProps } from "react";
+//#region src/elements/todo-list.d.ts
+/** Where one item stands: not started, being worked on, or finished. */
+type TodoStatus = "pending" | "active" | "done";
+/** One line of an agent's todo list. */
+interface TodoItem {
+  /**
+   * Stable identity across revisions. Reusing an id keeps an item in place while its
+   * text or status changes.
+   */
+  id: string;
+  /** The item as the agent phrased it. */
+  text: string;
+  /** Per-item state. More than one item may be active if the agent works in parallel. */
+  status: TodoStatus;
+}
+/**
+ * The agent's own working list, rewritten mid-run as it discovers what else is needed.
+ *
+ * @example
+ * import { TodoList } from "@cueplusplus/ui/elements";
+ *
+ * <TodoList
+ *   items={[
+ *     { id: "read", text: "Read the failing test", status: "done" },
+ *     { id: "fix", text: "Fix the converter", status: "active" },
+ *     { id: "verify", text: "Re-run the suite", status: "pending" },
+ *   ]}
+ *   revision={2}
+ * />
+ */
+declare function TodoList({ items, revision, className, ...props }: Omit<ComponentProps<"div">, "children" | "items" | "revision"> & {
+  /**
+   * The list as it stands right now. Each item carries its own status, so the agent
+   * can add, reorder, and complete items in any order between renders.
+   */
+  items: readonly TodoItem[];
+  /** Which rewrite of the list this is. Omit to show a plain done/total count instead. */
+  revision?: number;
+}): import("react").JSX.Element;
+//#endregion
+export { TodoItem, TodoList, TodoStatus };

package/dist/elements/todo-list.js

@@ -0,0 +1,59 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mono } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, Loader2Icon } from "lucide-react";
+//#region src/elements/todo-list.tsx
+/**
+* The agent's own working list, rewritten mid-run as it discovers what else is needed.
+*
+* @example
+* import { TodoList } from "@cueplusplus/ui/elements";
+*
+* <TodoList
+*   items={[
+*     { id: "read", text: "Read the failing test", status: "done" },
+*     { id: "fix", text: "Fix the converter", status: "active" },
+*     { id: "verify", text: "Re-run the suite", status: "pending" },
+*   ]}
+*   revision={2}
+* />
+*/
+function TodoList({ items, revision, className, ...props }) {
+	const done = items.filter((item) => item.status === "done").length;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "todo-list",
+		className: cn("flex w-full max-w-sm flex-col gap-3", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-baseline justify-between",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-(length:--cue-text-body) font-medium",
+				children: "Todos"
+			}), /* @__PURE__ */ jsx("span", {
+				className: cn(mono, "text-fg-subtle tabular-nums"),
+				children: revision === void 0 ? `${done}/${items.length}` : `${done}/${items.length} · rev ${revision}`
+			})]
+		}), /* @__PURE__ */ jsx("ul", {
+			className: "flex flex-col gap-1",
+			children: items.map((item) => /* @__PURE__ */ jsxs("li", {
+				className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both flex items-start gap-2.5 py-0.5 text-(length:--cue-text-body) duration-300",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "flex size-4 h-5 shrink-0 items-center justify-center",
+					children: item.status === "done" ? /* @__PURE__ */ jsx("span", {
+						className: "border-border-strong bg-surface-2 flex size-3.5 items-center justify-center rounded-(--radius-control) border",
+						children: /* @__PURE__ */ jsx(CheckIcon, { className: "text-fg-muted size-2.5" })
+					}) : item.status === "active" ? /* @__PURE__ */ jsx(Loader2Icon, { className: "size-3.5 animate-spin text-stream motion-reduce:animate-none" }) : /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "border-border-strong size-3.5 rounded-(--radius-control) border"
+					})
+				}), /* @__PURE__ */ jsx("span", {
+					className: cn("min-w-0 flex-1 leading-5 break-words", item.status === "done" && "text-fg-subtle line-through decoration-[1.5px]", item.status === "active" && "text-fg", item.status === "pending" && "text-fg-muted"),
+					children: item.text
+				})]
+			}, item.id))
+		})]
+	});
+}
+//#endregion
+export { TodoList };

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

@@ -0,0 +1,41 @@
+//#region src/elements/tool-call.d.ts
+interface ToolCallProps {
+  /** Tool name shown on the collapsed trigger row. */
+  label: string;
+  /** Verb shown with a shimmer while the tool is running, for example Searching the docs. */
+  activeLabel: string;
+  /** Short chip next to the label summarizing the call target. */
+  query: string;
+  /** Request payload shown inside the expanded disclosure. */
+  request: string;
+  /** Result payload shown once the call is no longer running. */
+  result: string;
+  /** When true a spinner replaces the success check on the trigger. */
+  running: boolean;
+  /** Whether the request and result panel is expanded. */
+  open: boolean;
+  /** Called when the user expands or collapses the call. */
+  onOpenChange: (open: boolean) => void;
+  /** Extra classes merged onto the root. */
+  className?: string;
+}
+/**
+ * One tool invocation with its request and result tucked behind a disclosure.
+ *
+ * @example
+ * import { ToolCall } from "@cueplusplus/ui/elements";
+ *
+ * <ToolCall
+ *   label="Searched"
+ *   activeLabel="Searching"
+ *   query="composer props"
+ *   request='{"q":"composer"}'
+ *   result='{"hits":2}'
+ *   running={false}
+ *   open
+ *   onOpenChange={setOpen}
+ * />
+ */
+declare function ToolCall({ label, activeLabel, query, request, result, running, open, onOpenChange, className }: ToolCallProps): import("react").JSX.Element;
+//#endregion
+export { ToolCall, ToolCallProps };