@cueplusplus/ui 0.3.0 → 0.5.0

package/dist/elements/conversation-search.js

@@ -0,0 +1,88 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ghostButton, mono, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronUpIcon, SearchIcon } from "lucide-react";
+//#region src/elements/conversation-search.tsx
+/**
+* Find inside a long thread, with every hit marked down the scrollbar.
+*
+* @example
+* import { ConversationSearch } from "@cueplusplus/ui/elements";
+*
+* <ConversationSearch
+*   query={query}
+*   hits={hits}
+*   activeIndex={0}
+*   onQueryChange={setQuery}
+*   onStep={step}
+* />
+*/
+function ConversationSearch({ query, hits, activeIndex, onQueryChange, onStep, className, ...props }) {
+	const index = hits.length === 0 ? -1 : Math.min(Math.max(activeIndex, 0), hits.length - 1);
+	const active = index === -1 ? void 0 : hits[index];
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "conversation-search",
+		className: cn("flex w-full max-w-sm gap-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-1 flex-col gap-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: cn(paper, "flex items-center gap-2 rounded-full py-1.5 pr-1.5 pl-3"),
+				children: [
+					/* @__PURE__ */ jsx(SearchIcon, { className: "text-fg-subtle size-3.5 shrink-0" }),
+					/* @__PURE__ */ jsx("input", {
+						value: query,
+						onChange: (event) => onQueryChange?.(event.target.value),
+						placeholder: "Find in conversation",
+						"aria-label": "Find in conversation",
+						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("span", {
+						className: cn(mono, "text-fg-subtle shrink-0 tabular-nums"),
+						children: hits.length === 0 ? "0" : `${index + 1}/${hits.length}`
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": "Previous match",
+						onClick: () => onStep?.(-1),
+						className: cn(ghostButton, "size-6 shrink-0"),
+						children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-3.5" })
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": "Next match",
+						onClick: () => onStep?.(1),
+						className: cn(ghostButton, "size-6 shrink-0"),
+						children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3.5" })
+					})
+				]
+			}), active && /* @__PURE__ */ jsxs("div", {
+				className: cn("bg-fg/[0.06]", "cue-elements-fade-in cue-elements-animate-in rounded-(--radius-surface) px-3 py-2 text-(length:--cue-text-ui) leading-relaxed duration-200"),
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-fg-muted",
+						children: active.before
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-fg rounded-(--radius-control) bg-warn/35 px-0.5",
+						children: active.match
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-fg-muted",
+						children: active.after
+					})
+				]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "bg-surface-1 relative w-1.5 shrink-0 rounded-full",
+			children: hits.map((hit, i) => /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: cn("absolute inset-x-0 h-1 rounded-full transition-colors duration-200", i === index ? "bg-warn" : "bg-warn/35"),
+				style: { top: `${hit.position}%` }
+			}, hit.id))
+		})]
+	});
+}
+//#endregion
+export { ConversationSearch };

package/dist/elements/cost-meter.d.ts

@@ -0,0 +1,33 @@
+import { ComponentProps } from "react";
+//#region src/elements/cost-meter.d.ts
+/** One model's share of the spend: what it read, what it wrote, and what that came to. */
+interface CostLine {
+  /** Model this line accounts for. */
+  model: string;
+  /** Input tokens consumed. The element divides by 1000 for display. */
+  inputTokens: number;
+  /** Output tokens produced. */
+  outputTokens: number;
+  /** Pre-formatted. The element never does currency math. */
+  cost: string;
+  /** Fraction of the run's cost, 0 to 1. Drives the stacked bar. */
+  share: number;
+}
+/**
+ * What the run spent, split by model, against the session total.
+ *
+ * @example
+ * import { CostMeter } from "@cueplusplus/ui/elements";
+ *
+ * <CostMeter runCost="$2.76" sessionCost="$18.40" lines={lines} />
+ */
+declare function CostMeter({ runCost, sessionCost, lines, className, ...props }: Omit<ComponentProps<"div">, "children" | "runCost" | "sessionCost" | "lines"> & {
+  /** Pre-formatted cost of this run. */
+  runCost: string;
+  /** Pre-formatted cumulative cost. */
+  sessionCost: string;
+  /** Per-model breakdown, ordered largest first so the bar reads left to right. */
+  lines: readonly CostLine[];
+}): import("react").JSX.Element;
+//#endregion
+export { CostLine, CostMeter };

package/dist/elements/cost-meter.js

@@ -0,0 +1,75 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mono, paper } from "./surfaces.js";
+import { pct } from "./range.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/cost-meter.tsx
+/**
+* What the run spent, split by model, against the session total.
+*
+* @example
+* import { CostMeter } from "@cueplusplus/ui/elements";
+*
+* <CostMeter runCost="$2.76" sessionCost="$18.40" lines={lines} />
+*/
+function CostMeter({ runCost, sessionCost, lines, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "cost-meter",
+		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 items-baseline gap-2",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-(length:--cue-text-title) font-medium tracking-tight tabular-nums",
+						children: runCost
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: cn(mono, "text-fg-subtle"),
+						children: "this run"
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: cn(mono, "text-fg-subtle ms-auto tabular-nums"),
+						children: [sessionCost, " session"]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "bg-surface-2 flex h-1.5 w-full overflow-hidden rounded-full",
+				children: lines.map((line, i) => /* @__PURE__ */ jsx("span", {
+					className: cn("h-full transition-[width] duration-500 motion-reduce:transition-none", i === 0 ? "bg-stream" : i === 1 ? "bg-stream/55" : "bg-surface-3"),
+					style: { width: `${pct(line.share, 1)}%` }
+				}, line.model))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-col gap-1.5",
+				children: lines.map((line) => /* @__PURE__ */ jsxs("div", {
+					className: "flex items-baseline gap-2",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "text-fg-muted min-w-0 flex-1 truncate text-(length:--cue-text-body)",
+							children: line.model
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: cn(mono, "text-fg-subtle shrink-0 tabular-nums"),
+							children: [
+								(line.inputTokens / 1e3).toFixed(1),
+								"k in ·",
+								" ",
+								(line.outputTokens / 1e3).toFixed(1),
+								"k out"
+							]
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: cn(mono, "text-fg-muted shrink-0 tabular-nums"),
+							children: line.cost
+						})
+					]
+				}, line.model))
+			})
+		]
+	});
+}
+//#endregion
+export { CostMeter };

package/dist/elements/data-table.d.ts

@@ -0,0 +1,31 @@
+import { ComponentProps } from "react";
+//#region src/elements/data-table.d.ts
+/** One row of the table: a model, the context it holds, and what it costs. */
+interface ModelUsage {
+  /** The model's name, and the row's key. Its first letter becomes the row's monogram. */
+  name: string;
+  /** The context window, already formatted — `200K`. This element does no arithmetic. */
+  context: string;
+  /** The price, already formatted — `$3/M`. Set in tabular figures so the column lines up. */
+  cost: string;
+}
+interface DataTableProps extends Omit<ComponentProps<"div">, "children"> {
+  /** Table rows with model name, context window, and cost. */
+  rows: readonly ModelUsage[];
+  /** Identity key that remounts the body so row entrance can replay. */
+  cycle: number;
+}
+/**
+ * A small comparison table the model can answer with directly.
+ *
+ * @example
+ * import { DataTable } from "@cueplusplus/ui/elements";
+ *
+ * <DataTable
+ *   rows={[{ name: "Sonnet", context: "200k", cost: "$3" }]}
+ *   cycle={0}
+ * />
+ */
+declare function ElementsDataTable({ rows, cycle, className, ...props }: DataTableProps): import("react").JSX.Element;
+//#endregion
+export { DataTableProps, ElementsDataTable, ModelUsage };

package/dist/elements/data-table.js

@@ -0,0 +1,67 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mono, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/data-table.tsx
+/**
+* A small comparison table the model can answer with directly.
+*
+* @example
+* import { DataTable } from "@cueplusplus/ui/elements";
+*
+* <DataTable
+*   rows={[{ name: "Sonnet", context: "200k", cost: "$3" }]}
+*   cycle={0}
+* />
+*/
+function ElementsDataTable({ rows, cycle, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "data-table",
+		className: cn(paper, "w-full max-w-sm overflow-hidden rounded-(--radius-overlay) text-(length:--cue-text-body)", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center px-4 pt-3 pb-2",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: cn(mono, "text-fg-subtle flex-1"),
+						children: "Model"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: cn(mono, "text-fg-subtle w-16 text-end"),
+						children: "Context"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: cn(mono, "text-fg-subtle w-16 text-end"),
+						children: "Cost"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", { className: "bg-surface-2 mx-4 h-px" }),
+			/* @__PURE__ */ jsx("div", { children: rows.map((row, index) => /* @__PURE__ */ jsxs("div", {
+				className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both hover:bg-surface-1 flex items-center gap-2.5 px-4 py-2.5 transition-colors duration-300",
+				style: { animationDelay: `${index * 80}ms` },
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "bg-surface-2 text-fg-muted flex size-5 shrink-0 items-center justify-center rounded-(--radius-control) text-(length:--cue-text-micro) font-medium",
+						children: row.name[0]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-fg flex-1 truncate",
+						children: row.name
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: cn(mono, "text-fg-muted w-16 text-end tabular-nums"),
+						children: row.context
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: cn(mono, "text-fg-muted w-16 text-end tabular-nums"),
+						children: row.cost
+					})
+				]
+			}, row.name)) }, cycle)
+		]
+	});
+}
+//#endregion
+export { ElementsDataTable };

package/dist/elements/day-separator.d.ts

@@ -0,0 +1,34 @@
+import { ComponentProps } from "react";
+//#region src/elements/day-separator.d.ts
+interface DatedMessage {
+  /** Stable identity for the row key. */
+  id: string;
+  /**
+   * Pre-formatted day label. Compared against the previous message to decide where a
+   * rule goes.
+   */
+  day: string;
+  /** Pre-formatted time, revealed on hover. */
+  time: string;
+  /** Who sent it. User turns sit right in a bubble, assistant turns run flush left. */
+  role: "user" | "assistant";
+  /** Message body. */
+  text: string;
+}
+/**
+ * Chronology in a long thread: days marked, times on hover.
+ *
+ * @example
+ * import { DaySeparator } from "@cueplusplus/ui/elements";
+ *
+ * <DaySeparator messages={messages} />
+ */
+declare function DaySeparator({ messages, className, ...props }: Omit<ComponentProps<"div">, "children" | "messages"> & {
+  /**
+   * Turns in order. A separator is inserted wherever day changes from the previous
+   * message, so grouping needs no pre-processing.
+   */
+  messages: readonly DatedMessage[];
+}): import("react").JSX.Element;
+//#endregion
+export { DatedMessage, DaySeparator };

package/dist/elements/day-separator.js

@@ -0,0 +1,50 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mono } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/day-separator.tsx
+/**
+* Chronology in a long thread: days marked, times on hover.
+*
+* @example
+* import { DaySeparator } from "@cueplusplus/ui/elements";
+*
+* <DaySeparator messages={messages} />
+*/
+function DaySeparator({ messages, className, ...props }) {
+	let lastDay = "";
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "day-separator",
+		className: cn("flex w-full max-w-sm flex-col gap-2", className),
+		...props,
+		children: messages.map((message) => {
+			const newDay = message.day !== lastDay;
+			lastDay = message.day;
+			return /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2",
+				children: [newDay && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2.5 py-1",
+					children: [
+						/* @__PURE__ */ jsx("span", { className: "bg-surface-2 h-px flex-1" }),
+						/* @__PURE__ */ jsx("span", {
+							className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle"),
+							children: message.day
+						}),
+						/* @__PURE__ */ jsx("span", { className: "bg-surface-2 h-px flex-1" })
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: cn("group flex items-baseline gap-2", message.role === "user" && "flex-row-reverse"),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cn("max-w-[80%] text-(length:--cue-text-body) leading-relaxed break-words", message.role === "user" ? "bg-surface-1 rounded-(--radius-overlay) px-3.5 py-2" : "text-fg-muted"),
+						children: message.text
+					}), /* @__PURE__ */ jsx("span", {
+						className: cn(mono, "text-transparent group-hover:text-fg-subtle shrink-0 tabular-nums transition-colors"),
+						children: message.time
+					})]
+				})]
+			}, message.id);
+		})
+	});
+}
+//#endregion
+export { DaySeparator };

package/dist/elements/diagram.d.ts

@@ -0,0 +1,34 @@
+import { ComponentProps } from "react";
+//#region src/elements/diagram.d.ts
+/**
+ * A drawn answer with zoom, reset, and a full-bleed view; you hand it the rendered
+ * graphic.
+ *
+ * @example
+ * import { Diagram } from "@cueplusplus/ui/elements";
+ *
+ * <Diagram title="message flow" zoom={zoom} onZoomIn={zoomIn} onReset={reset}>
+ *   <MermaidSvg chart={chart} />
+ * </Diagram>
+ */
+declare function Diagram({ title, zoom, children, onZoomIn, onZoomOut, onReset, onExpand, className, ...props }: Omit<ComponentProps<"div">, "title" | "zoom" | "children" | "onZoomIn" | "onZoomOut" | "onReset" | "onExpand"> & {
+  /** What the diagram shows. */
+  title: string;
+  /** Scale factor applied to the content. 1 is fit; the header prints it as a percentage. */
+  zoom: number;
+  /**
+   * The rendered graphic. The element owns the frame and never parses or injects
+   * markup itself, so whatever renders your chart stays your choice.
+   */
+  children: React.ReactNode;
+  /** Called from the zoom-in control. Clamp the range yourself. */
+  onZoomIn?: () => void;
+  /** Called from the zoom-out control. */
+  onZoomOut?: () => void;
+  /** Called to return to the default view. */
+  onReset?: () => void;
+  /** Called to open the diagram full screen. */
+  onExpand?: () => void;
+}): import("react").JSX.Element;
+//#endregion
+export { Diagram };

package/dist/elements/diagram.js

@@ -0,0 +1,75 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ghostButton, mono, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MaximizeIcon, MinusIcon, PlusIcon, RotateCcwIcon } from "lucide-react";
+//#region src/elements/diagram.tsx
+/**
+* A drawn answer with zoom, reset, and a full-bleed view; you hand it the rendered
+* graphic.
+*
+* @example
+* import { Diagram } from "@cueplusplus/ui/elements";
+*
+* <Diagram title="message flow" zoom={zoom} onZoomIn={zoomIn} onReset={reset}>
+*   <MermaidSvg chart={chart} />
+* </Diagram>
+*/
+function Diagram({ title, zoom, children, onZoomIn, onZoomOut, onReset, onExpand, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "diagram",
+		className: cn(paper, "flex w-full max-w-md flex-col overflow-hidden rounded-(--radius-overlay)", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1 px-3 py-2",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 truncate text-(length:--cue-text-body) font-medium",
+					children: title
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: cn(mono, "text-fg-subtle shrink-0 tabular-nums"),
+					children: [Math.round(zoom * 100), "%"]
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Zoom out",
+					onClick: onZoomOut,
+					className: cn(ghostButton, "size-7 shrink-0"),
+					children: /* @__PURE__ */ jsx(MinusIcon, { className: "size-3.5" })
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Zoom in",
+					onClick: onZoomIn,
+					className: cn(ghostButton, "size-7 shrink-0"),
+					children: /* @__PURE__ */ jsx(PlusIcon, { className: "size-3.5" })
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Reset the view",
+					onClick: onReset,
+					className: cn(ghostButton, "size-7 shrink-0"),
+					children: /* @__PURE__ */ jsx(RotateCcwIcon, { className: "size-3.5" })
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Open full screen",
+					onClick: onExpand,
+					disabled: !onExpand,
+					className: cn(ghostButton, "size-7 shrink-0 disabled:pointer-events-none disabled:opacity-30"),
+					children: /* @__PURE__ */ jsx(MaximizeIcon, { className: "size-3.5" })
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "border-border flex min-h-[10rem] items-center justify-center overflow-hidden border-t p-4",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "origin-center transition-transform duration-200 ease-out motion-reduce:transition-none",
+				style: { transform: `scale(${zoom})` },
+				children
+			})
+		})]
+	});
+}
+//#endregion
+export { Diagram };

package/dist/elements/document-reference.d.ts

@@ -0,0 +1,37 @@
+import { ComponentProps } from "react";
+//#region src/elements/document-reference.d.ts
+/** One place in a document the answer leans on — the page, and what it says there. */
+interface DocumentAnchor {
+  /** Which page the quote is on. `onJump` reports it and `activePage` marks it. */
+  page: number;
+  /** The passage itself, drawn against a rule. Several anchors may share one page. */
+  quote: string;
+}
+/**
+ * A document the answer leans on, with the quoted passage and the page to jump to.
+ *
+ * @example
+ * import { DocumentReference } from "@cueplusplus/ui/elements";
+ *
+ * <DocumentReference
+ *   title="migration-0.14.pdf"
+ *   pages={14}
+ *   anchors={anchors}
+ *   activePage={4}
+ *   onJump={setPage}
+ * />
+ */
+declare function DocumentReference({ title, pages, anchors, activePage, onJump, className, ...props }: Omit<ComponentProps<"div">, "children" | "title" | "pages" | "anchors" | "activePage" | "onJump"> & {
+  /** Document name. */
+  title: string;
+  /** Total page count. */
+  pages: number;
+  /** The passages the answer drew on, each pinned to a page. */
+  anchors: readonly DocumentAnchor[];
+  /** Which anchor is highlighted. A page with no anchor highlights nothing. */
+  activePage: number;
+  /** Called with the page to open. */
+  onJump?: (page: number) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { DocumentAnchor, DocumentReference };

package/dist/elements/document-reference.js

@@ -0,0 +1,66 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { field, mono, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FileTextIcon } from "lucide-react";
+//#region src/elements/document-reference.tsx
+/**
+* A document the answer leans on, with the quoted passage and the page to jump to.
+*
+* @example
+* import { DocumentReference } from "@cueplusplus/ui/elements";
+*
+* <DocumentReference
+*   title="migration-0.14.pdf"
+*   pages={14}
+*   anchors={anchors}
+*   activePage={4}
+*   onJump={setPage}
+* />
+*/
+function DocumentReference({ title, pages, anchors, activePage, onJump, className, ...props }) {
+	const currentIndex = anchors.findIndex((anchor) => anchor.page === activePage);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "document-reference",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-3 rounded-(--radius-overlay) p-3.5", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "bg-surface-1 text-fg-muted flex size-8 shrink-0 items-center justify-center rounded-(--radius-surface)",
+				children: /* @__PURE__ */ jsx(FileTextIcon, { className: "size-3.5" })
+			}), /* @__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"),
+					children: [
+						pages,
+						" pages · ",
+						anchors.length,
+						" cited"
+					]
+				})]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-1.5",
+			children: anchors.map((anchor, i) => /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"aria-current": i === currentIndex || void 0,
+				onClick: () => onJump?.(anchor.page),
+				className: cn("flex flex-col gap-1 rounded-(--radius-surface) px-2.5 py-2 text-start transition-colors", anchor.page === activePage ? field : "hover:bg-surface-1"),
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: cn(mono, "text-fg-subtle"),
+					children: ["p. ", anchor.page]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-fg-muted border-border-strong border-s-2 ps-2 text-(length:--cue-text-ui) leading-relaxed break-words",
+					children: anchor.quote
+				})]
+			}, `${anchor.page}-${i}`))
+		})]
+	});
+}
+//#endregion
+export { DocumentReference };

package/dist/elements/draft-restore.d.ts

@@ -0,0 +1,27 @@
+import { ComponentProps } from "react";
+//#region src/elements/draft-restore.d.ts
+/**
+ * Come back to a thread and the sentence you never sent is still waiting.
+ *
+ * @example
+ * import { DraftRestore } from "@cueplusplus/ui/elements";
+ *
+ * <DraftRestore
+ *   draft="Add a regression test for draft restore"
+ *   savedAt="2 minutes ago"
+ *   onRestore={restore}
+ *   onDiscard={discard}
+ * />
+ */
+declare function DraftRestore({ draft, savedAt, onRestore, onDiscard, className, ...props }: Omit<ComponentProps<"div">, "children" | "draft" | "savedAt" | "onRestore" | "onDiscard"> & {
+  /** The unsent text, truncated to one line. */
+  draft: string;
+  /** When it was last touched, pre-formatted. */
+  savedAt: string;
+  /** Called to put the draft back in the composer. */
+  onRestore?: () => void;
+  /** Called to throw the draft away. */
+  onDiscard?: () => void;
+}): import("react").JSX.Element;
+//#endregion
+export { DraftRestore };