@cueplusplus/ui 0.13.0

package/dist/elements/elicitation-form.js

@@ -0,0 +1,106 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { field, inkButton, mono, paper } from "./surfaces.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, PlugIcon, XIcon } from "lucide-react";
+//#region src/elements/elicitation-form.tsx
+/**
+* A server pausing mid-tool-call to ask you for the fields it still needs.
+*
+* @example
+* import { ElicitationForm } from "@cueplusplus/ui/elements";
+*
+* <ElicitationForm
+*   server="github-mcp"
+*   message="Confirm where the release notes should be published."
+*   fields={fields}
+*   state="request"
+*   onAccept={send}
+*   onDecline={decline}
+* />
+*/
+function ElicitationForm({ server, message, fields, state, onAccept, onDecline, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "elicitation-form",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-3.5 rounded-(--radius-overlay) p-4", 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-7 shrink-0 items-center justify-center rounded-(--radius-surface)",
+						children: /* @__PURE__ */ jsx(PlugIcon, { className: "size-3.5" })
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate text-(length:--cue-text-body) font-medium",
+						children: server
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: cn(mono, "text-fg-subtle shrink-0"),
+						children: "needs input"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-fg-muted text-(length:--cue-text-ui) leading-(--cue-leading-ui)",
+				children: message
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-col gap-2.5",
+				children: fields.map((item) => /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: cn(mono, "text-fg-subtle"),
+						children: [item.label, item.required && /* @__PURE__ */ jsx("span", {
+							className: "text-fg-subtle",
+							children: " *"
+						})]
+					}), item.kind === "choice" ? /* @__PURE__ */ jsx("div", {
+						className: "flex flex-wrap gap-1.5",
+						children: item.options?.map((option) => /* @__PURE__ */ jsx("span", {
+							className: cn("rounded-full px-2.5 py-1 text-(length:--cue-text-ui) transition-colors", option === item.value ? "bg-accent text-accent-fg" : cn(field, "text-fg-muted")),
+							children: option
+						}, option))
+					}) : item.kind === "toggle" ? /* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: cn("flex h-4 w-7 items-center rounded-full p-0.5 transition-colors duration-200", item.value === "true" ? "bg-accent" : "bg-surface-3"),
+							children: /* @__PURE__ */ jsx("span", { className: cn("bg-bg size-3 rounded-full transition-transform duration-200 motion-reduce:transition-none", item.value === "true" && "translate-x-3") })
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-fg-muted text-(length:--cue-text-ui)",
+							children: item.value === "true" ? "On" : "Off"
+						})]
+					}) : /* @__PURE__ */ jsx("span", {
+						className: cn(field, "text-fg-muted rounded-(--radius-surface) px-2.5 py-1.5 text-(length:--cue-text-ui)"),
+						children: item.value
+					})]
+				}, item.name))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex h-8 items-center justify-end gap-2",
+				children: state === "request" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onDecline,
+					className: "text-fg-muted hover:bg-surface-2 hover:text-fg h-8 rounded-full px-3.5 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.96]",
+					children: "Decline"
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onAccept,
+					className: cn(inkButton, "flex h-8 items-center rounded-full px-3.5 text-(length:--cue-text-ui) font-medium"),
+					children: "Send"
+				})] }) : /* @__PURE__ */ jsx("span", {
+					className: "cue-elements-fade-in cue-elements-animate-in text-fg-muted flex items-center gap-2 text-(length:--cue-text-ui) duration-300",
+					children: state === "accepted" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5 text-ok" }),
+						"Sent to ",
+						server
+					] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XIcon, { className: "text-fg-muted size-3.5" }), "Declined"] })
+				}, state)
+			})
+		]
+	});
+}
+//#endregion
+export { ElicitationForm };

package/dist/elements/empty-state.d.ts

@@ -0,0 +1,52 @@
+import { ComponentProps } from "react";
+//#region src/elements/empty-state.d.ts
+/**
+ * The first screen: a greeting, three ways in, and the composer front and center.
+ *
+ * @example
+ * import {
+ *   EmptyState,
+ *   EmptyStateComposer,
+ *   EmptyStateGreeting,
+ *   EmptyStateSuggestion,
+ *   EmptyStateSuggestions,
+ * } from "@cueplusplus/ui/elements";
+ *
+ * <EmptyState>
+ *   <EmptyStateGreeting>What are we building?</EmptyStateGreeting>
+ *   <EmptyStateSuggestions>
+ *     {items.map((item, i) => (
+ *       <EmptyStateSuggestion key={item} index={i} onClick={() => send(item)}>
+ *         {item}
+ *       </EmptyStateSuggestion>
+ *     ))}
+ *   </EmptyStateSuggestions>
+ *   <EmptyStateComposer placeholder="Ask anything" onSend={send} />
+ * </EmptyState>
+ */
+declare function ChatEmptyState({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+/** The one line at the top of a blank thread. A heading, so a screen reader lands on it. */
+declare function EmptyStateGreeting({ className, ...props }: ComponentProps<"h2">): import("react").JSX.Element;
+/** The row the suggestion pills wrap in. */
+declare function EmptyStateSuggestions({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+/**
+ * One thing worth asking, as a pill. `index` staggers its entrance so the row arrives
+ * left to right rather than all at once.
+ */
+declare function EmptyStateSuggestion({ index, className, style, ...props }: ComponentProps<"button"> & {
+  /** Position in the row. Staggers the entrance so the pills arrive in order. */
+  index?: number;
+}): import("react").JSX.Element;
+/**
+ * A composer-shaped invitation under the suggestions. It is a display rather than a
+ * working input — the placeholder is a string and send takes a handler — for the
+ * screen whose real composer is somewhere else.
+ */
+declare function EmptyStateComposer({ placeholder, onSend, className, style, ...props }: Omit<ComponentProps<"div">, "children" | "placeholder"> & {
+  /** Resting text in the input bar. */
+  placeholder: string;
+  /** Called from the send control. Omit it and the control renders disabled. */
+  onSend?: () => void;
+}): import("react").JSX.Element;
+//#endregion
+export { ChatEmptyState, EmptyStateComposer, EmptyStateGreeting, EmptyStateSuggestion, EmptyStateSuggestions };

package/dist/elements/empty-state.js

@@ -0,0 +1,98 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { inkButton, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUpIcon } from "lucide-react";
+//#region src/elements/empty-state.tsx
+/**
+* The first screen: a greeting, three ways in, and the composer front and center.
+*
+* @example
+* import {
+*   EmptyState,
+*   EmptyStateComposer,
+*   EmptyStateGreeting,
+*   EmptyStateSuggestion,
+*   EmptyStateSuggestions,
+* } from "@cueplusplus/ui/elements";
+*
+* <EmptyState>
+*   <EmptyStateGreeting>What are we building?</EmptyStateGreeting>
+*   <EmptyStateSuggestions>
+*     {items.map((item, i) => (
+*       <EmptyStateSuggestion key={item} index={i} onClick={() => send(item)}>
+*         {item}
+*       </EmptyStateSuggestion>
+*     ))}
+*   </EmptyStateSuggestions>
+*   <EmptyStateComposer placeholder="Ask anything" onSend={send} />
+* </EmptyState>
+*/
+function ChatEmptyState({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-state",
+		className: cn("flex w-full max-w-md flex-col items-center gap-7", className),
+		...props
+	});
+}
+/** The one line at the top of a blank thread. A heading, so a screen reader lands on it. */
+function EmptyStateGreeting({ className, ...props }) {
+	return /* @__PURE__ */ jsx("h2", {
+		"data-slot": "empty-state-greeting",
+		className: cn("cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both text-center text-(length:--cue-text-title) font-medium tracking-tight duration-500 motion-reduce:animate-none", className),
+		...props
+	});
+}
+/** The row the suggestion pills wrap in. */
+function EmptyStateSuggestions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-state-suggestions",
+		className: cn("flex flex-wrap justify-center gap-2", className),
+		...props
+	});
+}
+/**
+* One thing worth asking, as a pill. `index` staggers its entrance so the row arrives
+* left to right rather than all at once.
+*/
+function EmptyStateSuggestion({ index = 0, className, style, ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-slot": "empty-state-suggestion",
+		style: {
+			animationDelay: `${120 + index * 70}ms`,
+			...style
+		},
+		className: cn(paper, "cue-elements-fade-in cue-elements-slide-in-from-bottom-2 cue-elements-animate-in cue-elements-fill-mode-both focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent rounded-full px-4 py-2 text-(length:--cue-text-body) transition-transform duration-500 outline-none hover:-translate-y-px active:scale-[0.96] motion-reduce:animate-none", className),
+		...props
+	});
+}
+/**
+* A composer-shaped invitation under the suggestions. It is a display rather than a
+* working input — the placeholder is a string and send takes a handler — for the
+* screen whose real composer is somewhere else.
+*/
+function EmptyStateComposer({ placeholder, onSend, className, style, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "empty-state-composer",
+		style: {
+			animationDelay: "360ms",
+			...style
+		},
+		className: cn(paper, "cue-elements-fade-in cue-elements-slide-in-from-bottom-2 cue-elements-animate-in cue-elements-fill-mode-both flex h-13 w-full items-center justify-between rounded-full py-2 ps-5 pe-2.5 duration-500 motion-reduce:animate-none", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-fg-subtle text-(length:--cue-text-emphasis)",
+			children: placeholder
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": "Send",
+			onClick: onSend,
+			disabled: !onSend,
+			className: cn(inkButton, "flex size-8 items-center justify-center rounded-full disabled:pointer-events-none disabled:opacity-30"),
+			children: /* @__PURE__ */ jsx(ArrowUpIcon, { className: "size-4" })
+		})]
+	});
+}
+//#endregion
+export { ChatEmptyState, EmptyStateComposer, EmptyStateGreeting, EmptyStateSuggestion, EmptyStateSuggestions };

package/dist/elements/end-of-turn-summary.d.ts

@@ -0,0 +1,60 @@
+import * as React from "react";
+//#region src/elements/end-of-turn-summary.d.ts
+/** What a turn did to the working tree. */
+interface ChangeSummary {
+  /** How many files the turn touched. */
+  files: number;
+  /** Lines added across them. */
+  additions?: number;
+  /** Lines removed across them. */
+  deletions?: number;
+}
+/**
+ * The whole line as one string: `3 files changed +48 −12`.
+ *
+ * The component renders the same words in the same order with the two numbers
+ * tinted, so this is for the places a string is what you need — a `title`, a
+ * desktop notification, a commit message, a collapsed turn's subtitle.
+ *
+ * @example
+ * formatChangeSummary({ files: 3, additions: 48, deletions: 12 }); // "3 files changed +48 −12"
+ * formatChangeSummary({ files: 0 });                              // "No files changed"
+ */
+declare function formatChangeSummary({ files, additions, deletions }: ChangeSummary): string;
+interface EndOfTurnSummaryProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+  /** How many files the turn touched. */
+  files: number;
+  /** Lines added across them. */
+  additions?: number;
+  /** Lines removed across them. */
+  deletions?: number;
+  /**
+   * The whole line, replacing the one {@link formatChangeSummary} would build —
+   * for a turn whose result is not a diff at all: `2 cues written`,
+   * `Nothing to change`.
+   */
+  label?: string;
+}
+/**
+ * What the turn came to, in one line: `3 files changed +48 −12`.
+ *
+ * A rollup, not a control: it says what happened and offers nothing to do about
+ * it, because the things to do about it — review, keep, reject — belong to a
+ * bar above the composer that acts on the whole run, and a per-turn row with
+ * those buttons on it is a row that can be pressed after the next turn has
+ * already changed the same files.
+ *
+ * The counts are drawn only when there are some. A turn that read four files
+ * and wrote nothing says `No files changed` and stops, rather than saying it
+ * with two zeroes.
+ *
+ * @example
+ * import { EndOfTurnSummary } from "@cueplusplus/ui/elements";
+ *
+ * <EndOfTurnSummary files={3} additions={48} deletions={12} />
+ * @example
+ * <EndOfTurnSummary files={0} />
+ */
+declare const EndOfTurnSummary: React.ForwardRefExoticComponent<EndOfTurnSummaryProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ChangeSummary, EndOfTurnSummary, EndOfTurnSummaryProps, formatChangeSummary };

package/dist/elements/end-of-turn-summary.js

@@ -0,0 +1,75 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mono } from "./surfaces.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/end-of-turn-summary.tsx
+/** The file clause on its own: `No files changed`, `1 file changed`, `3 files changed`. */
+function filesChanged(files) {
+	if (files <= 0) return "No files changed";
+	return `${files} file${files === 1 ? "" : "s"} changed`;
+}
+/**
+* The whole line as one string: `3 files changed +48 −12`.
+*
+* The component renders the same words in the same order with the two numbers
+* tinted, so this is for the places a string is what you need — a `title`, a
+* desktop notification, a commit message, a collapsed turn's subtitle.
+*
+* @example
+* formatChangeSummary({ files: 3, additions: 48, deletions: 12 }); // "3 files changed +48 −12"
+* formatChangeSummary({ files: 0 });                              // "No files changed"
+*/
+function formatChangeSummary({ files, additions = 0, deletions = 0 }) {
+	const clause = filesChanged(files);
+	if (additions === 0 && deletions === 0) return clause;
+	return `${clause} +${additions} −${deletions}`;
+}
+/**
+* What the turn came to, in one line: `3 files changed +48 −12`.
+*
+* A rollup, not a control: it says what happened and offers nothing to do about
+* it, because the things to do about it — review, keep, reject — belong to a
+* bar above the composer that acts on the whole run, and a per-turn row with
+* those buttons on it is a row that can be pressed after the next turn has
+* already changed the same files.
+*
+* The counts are drawn only when there are some. A turn that read four files
+* and wrote nothing says `No files changed` and stops, rather than saying it
+* with two zeroes.
+*
+* @example
+* import { EndOfTurnSummary } from "@cueplusplus/ui/elements";
+*
+* <EndOfTurnSummary files={3} additions={48} deletions={12} />
+* @example
+* <EndOfTurnSummary files={0} />
+*/
+const EndOfTurnSummary = React.forwardRef(function EndOfTurnSummary({ files, additions = 0, deletions = 0, label, className, ...elementProps }, ref) {
+	const changed = additions !== 0 || deletions !== 0;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "end-of-turn-summary",
+		className: cn("text-fg-muted flex w-full items-baseline gap-2 py-1 text-(length:--cue-text-ui)", className),
+		...elementProps,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "min-w-0 truncate",
+			children: label ?? filesChanged(files)
+		}), label === void 0 && changed ? /* @__PURE__ */ jsxs("span", {
+			className: cn(mono, "shrink-0 tabular-nums"),
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "text-ok",
+					children: ["+", additions]
+				}),
+				" ",
+				/* @__PURE__ */ jsxs("span", {
+					className: "text-danger",
+					children: ["−", deletions]
+				})
+			]
+		}) : null]
+	});
+});
+//#endregion
+export { EndOfTurnSummary, formatChangeSummary };

package/dist/elements/error-state.d.ts

@@ -0,0 +1,29 @@
+import { ComponentProps } from "react";
+//#region src/elements/error-state.d.ts
+/** What a failure banner is told: what broke, the detail under it, and the way back. */
+interface ErrorStateProps extends Omit<ComponentProps<"div">, "children" | "role"> {
+  /** Primary failure headline shown in the banner. */
+  title: string;
+  /** Supporting detail under the title explaining what went wrong. */
+  detail: string;
+  /** When true the banner swaps to a spinning Retrying status instead of the error. */
+  retrying: boolean;
+  /** Called when the retry control is pressed. */
+  onRetry: () => void;
+}
+/**
+ * A quiet failure banner with a retry path, not a modal in your face.
+ *
+ * @example
+ * import { ErrorState } from "@cueplusplus/ui/elements";
+ *
+ * <ErrorState
+ *   title="Request failed"
+ *   detail="The model timed out."
+ *   retrying={false}
+ *   onRetry={() => {}}
+ * />
+ */
+declare function ErrorState({ title, detail, retrying, onRetry, className, ...props }: ErrorStateProps): import("react").JSX.Element;
+//#endregion
+export { ErrorState, ErrorStateProps };

package/dist/elements/error-state.js

@@ -0,0 +1,55 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ShimmerLabel } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleAlertIcon, RefreshCwIcon } from "lucide-react";
+//#region src/elements/error-state.tsx
+/**
+* A quiet failure banner with a retry path, not a modal in your face.
+*
+* @example
+* import { ErrorState } from "@cueplusplus/ui/elements";
+*
+* <ErrorState
+*   title="Request failed"
+*   detail="The model timed out."
+*   retrying={false}
+*   onRetry={() => {}}
+* />
+*/
+function ErrorState({ title, detail, retrying, onRetry, className, ...props }) {
+	if (retrying) return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "error-state",
+		role: "status",
+		className: cn("cue-elements-fade-in cue-elements-animate-in flex w-full max-w-sm items-center gap-2.5 text-(length:--cue-text-body) duration-300 motion-reduce:animate-none", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(RefreshCwIcon, { className: "text-fg-muted size-3.5 shrink-0 animate-spin motion-reduce:animate-none" }), /* @__PURE__ */ jsx(ShimmerLabel, {
+			className: "text-fg-muted relative inline-block",
+			children: "Retrying"
+		})]
+	}, "retrying");
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "error-state",
+		role: "alert",
+		className: cn("cue-elements-fade-in cue-elements-animate-in flex w-full max-w-sm items-start gap-2.5 rounded-(--radius-overlay) bg-danger/10 px-4 py-3 text-(length:--cue-text-body) duration-300 motion-reduce:animate-none", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(CircleAlertIcon, { className: "mt-0.5 size-4 shrink-0 text-danger/80" }),
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+				className: "font-medium text-danger",
+				children: title
+			}), /* @__PURE__ */ jsx("p", {
+				className: "mt-0.5 text-(length:--cue-text-body) leading-snug text-danger/60",
+				children: detail
+			})] }),
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: onRetry,
+				className: "ms-auto flex items-center gap-1.5 rounded-full px-3 py-1 text-(length:--cue-text-ui) font-medium text-danger transition-colors hover:bg-danger/10",
+				children: [/* @__PURE__ */ jsx(RefreshCwIcon, { className: "size-3" }), "Retry"]
+			})
+		]
+	}, "error");
+}
+//#endregion
+export { ErrorState };

package/dist/elements/feedback-dialog.d.ts

@@ -0,0 +1,36 @@
+import { ComponentProps } from "react";
+//#region src/elements/feedback-dialog.d.ts
+/**
+ * A thumbs-down that asks why, so the signal arrives with a reason attached.
+ *
+ * @example
+ * import { FeedbackDialog } from "@cueplusplus/ui/elements";
+ *
+ * <FeedbackDialog
+ *   reasons={["Not factual", "Too long"]}
+ *   selected={selected}
+ *   note={note}
+ *   sent={sent}
+ *   onToggleReason={toggle}
+ *   onNoteChange={setNote}
+ *   onSubmit={send}
+ * />
+ */
+declare function FeedbackDialog({ reasons, selected, note, sent, onToggleReason, onNoteChange, onSubmit, className, ...props }: Omit<ComponentProps<"div">, "children" | "reasons" | "selected" | "note" | "sent" | "onToggleReason" | "onNoteChange" | "onSubmit"> & {
+  /** The reason chips offered. Keep them short enough to scan in one line. */
+  reasons: readonly string[];
+  /** Which reasons are currently picked. More than one is allowed. */
+  selected: readonly string[];
+  /** Free-text detail, always optional. */
+  note: string;
+  /** Replaces the whole form with an acknowledgement once the report is filed. */
+  sent: boolean;
+  /** Called when a reason chip is picked or unpicked. */
+  onToggleReason?: (reason: string) => void;
+  /** Called as the free-text note is typed. */
+  onNoteChange?: (note: string) => void;
+  /** Called when the report is sent. */
+  onSubmit?: () => void;
+}): import("react").JSX.Element;
+//#endregion
+export { FeedbackDialog };

package/dist/elements/feedback-dialog.js

@@ -0,0 +1,81 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { field, inkButton, mono, paper } from "./surfaces.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ThumbsDownIcon } from "lucide-react";
+//#region src/elements/feedback-dialog.tsx
+/**
+* A thumbs-down that asks why, so the signal arrives with a reason attached.
+*
+* @example
+* import { FeedbackDialog } from "@cueplusplus/ui/elements";
+*
+* <FeedbackDialog
+*   reasons={["Not factual", "Too long"]}
+*   selected={selected}
+*   note={note}
+*   sent={sent}
+*   onToggleReason={toggle}
+*   onNoteChange={setNote}
+*   onSubmit={send}
+* />
+*/
+function FeedbackDialog({ reasons, selected, note, sent, onToggleReason, onNoteChange, onSubmit, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "feedback-dialog",
+		className: cn(paper, "flex w-full max-w-sm rounded-(--radius-overlay) p-4", sent ? "items-center gap-2.5 text-(length:--cue-text-body)" : "flex-col gap-3", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			role: "status",
+			className: sent ? "cue-elements-fade-in cue-elements-animate-in flex items-center gap-2.5 duration-300" : "sr-only",
+			children: sent && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CheckIcon, { className: "size-4 shrink-0 text-ok" }), "Thanks. That helps us tune the model."] })
+		}), sent ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2.5",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "bg-surface-1 text-fg-muted flex size-7 shrink-0 items-center justify-center rounded-(--radius-surface)",
+						children: /* @__PURE__ */ jsx(ThumbsDownIcon, { className: "size-3.5" })
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-(length:--cue-text-body) font-medium",
+						children: "What went wrong?"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: cn(mono, "text-fg-subtle ms-auto"),
+						children: "optional"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap gap-1.5",
+				children: reasons.map((reason) => {
+					const active = selected.includes(reason);
+					return /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-pressed": active,
+						onClick: () => onToggleReason?.(reason),
+						className: cn("rounded-full px-2.5 py-1 text-(length:--cue-text-ui) transition-[background-color,color,scale] duration-150 active:scale-[0.96]", active ? "bg-accent text-accent-fg" : cn(field, "text-fg-muted hover:text-fg")),
+						children: reason
+					}, reason);
+				})
+			}),
+			/* @__PURE__ */ jsx("textarea", {
+				value: note,
+				onChange: (event) => onNoteChange?.(event.target.value),
+				rows: 2,
+				placeholder: "Anything else?",
+				"aria-label": "Anything else?",
+				className: cn(field, "text-fg-muted placeholder:text-fg-subtle 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) outline-none")
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onSubmit,
+				className: cn(inkButton, "flex h-8 items-center justify-center self-end rounded-full px-3.5 text-(length:--cue-text-ui) font-medium"),
+				children: "Send feedback"
+			})
+		] })]
+	});
+}
+//#endregion
+export { FeedbackDialog };

package/dist/elements/file-tree.d.ts

@@ -0,0 +1,45 @@
+import { ComponentProps } from "react";
+//#region src/elements/file-tree.d.ts
+/** One row of a changed-file tree, already flattened: the tree's shape lives in `depth`. */
+interface FileTreeNode {
+  /** Full path, which is what identifies the row. */
+  path: string;
+  /** The last segment, which is what the row shows. */
+  name: string;
+  /** How deep the row sits, in indent steps. The list is flat; this is the only nesting. */
+  depth: number;
+  /** Whether the row is a folder or a file. */
+  kind: "folder" | "file";
+  /** Lines added, shown as a green count. Omit for a row with no diff. */
+  additions?: number;
+  /** Lines removed, shown as a red count. Omit for a row with no diff. */
+  deletions?: number;
+}
+/**
+ * Everything a run touched, as a tree, with the churn spelled out per file.
+ *
+ * @example
+ * import { FileTree } from "@cueplusplus/ui/elements";
+ *
+ * <FileTree
+ *   nodes={nodes}
+ *   visibleCount={nodes.length}
+ *   totalAdditions={78}
+ *   totalDeletions={9}
+ * />
+ */
+declare function FileTree({ nodes, visibleCount, totalAdditions, totalDeletions, className, ...props }: Omit<ComponentProps<"div">, "children" | "nodes" | "visibleCount" | "totalAdditions" | "totalDeletions"> & {
+  /**
+   * Flat list in display order. Nesting comes from each node's depth, not from
+   * children arrays.
+   */
+  nodes: readonly FileTreeNode[];
+  /** How many nodes have landed. Raise it as the run touches more files. */
+  visibleCount: number;
+  /** Added lines across the whole change. */
+  totalAdditions: number;
+  /** Removed lines across the whole change. */
+  totalDeletions: number;
+}): import("react").JSX.Element;
+//#endregion
+export { FileTree, FileTreeNode };