@cueplusplus/ui 0.13.0

package/dist/elements/retrieval-chunks.js

@@ -0,0 +1,81 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ShimmerLabel, field, mono, paper } from "./surfaces.js";
+import { pct, take } from "./range.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DatabaseIcon } from "lucide-react";
+//#region src/elements/retrieval-chunks.tsx
+/**
+* The passages a retrieval answer stands on, scored, before the answer itself arrives.
+*
+* @example
+* import { RetrievalChunks } from "@cueplusplus/ui/elements";
+*
+* <RetrievalChunks
+*   query="how does draft restore work"
+*   chunks={chunks}
+*   visibleCount={3}
+*   searching={false}
+* />
+*/
+function RetrievalChunks({ query, chunks, visibleCount, searching, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "retrieval-chunks",
+		className: cn("flex w-full max-w-sm flex-col gap-2.5", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				className: cn(field, "text-fg-muted inline-flex w-fit items-center gap-1.5 rounded-full px-3.5 py-2 text-(length:--cue-text-ui)"),
+				children: [/* @__PURE__ */ jsx(DatabaseIcon, { className: "text-fg-subtle size-3" }), query]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "text-fg-muted text-(length:--cue-text-ui)",
+				children: searching ? /* @__PURE__ */ jsx(ShimmerLabel, {
+					className: "relative inline-block leading-none",
+					children: "Retrieving"
+				}) : /* @__PURE__ */ jsxs("span", {
+					className: "cue-elements-fade-in cue-elements-animate-in duration-300",
+					children: [chunks.length, " passages above threshold"]
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex min-h-[7rem] flex-col gap-1.5",
+				children: take(chunks, visibleCount).map((chunk) => /* @__PURE__ */ jsxs("div", {
+					className: cn(paper, "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both flex flex-col gap-1.5 rounded-(--radius-overlay) px-3.5 py-2.5 duration-300"),
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-baseline gap-2",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "text-fg min-w-0 flex-1 truncate text-(length:--cue-text-body) font-medium",
+									children: chunk.source
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: cn(mono, "text-fg-subtle shrink-0"),
+									children: chunk.locator
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: cn(mono, "shrink-0 tabular-nums", chunk.score >= .8 ? "text-ok" : "text-fg-subtle"),
+									children: chunk.score.toFixed(2)
+								})
+							]
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "text-fg-muted line-clamp-2 text-(length:--cue-text-ui) leading-(--cue-leading-ui)",
+							children: chunk.text
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "bg-surface-2 h-[2px] w-full overflow-hidden rounded-full",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "block h-full rounded-full bg-stream/70 transition-[width] duration-500",
+								style: { width: `${pct(chunk.score, 1)}%` }
+							})
+						})
+					]
+				}, chunk.id))
+			})
+		]
+	});
+}
+//#endregion
+export { RetrievalChunks };

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

@@ -0,0 +1,159 @@
+import { RevertLabels, RevertScope } from "./vocabulary.js";
+import * as React from "react";
+//#region src/elements/revert-dock.d.ts
+/** How far back a restore from this point would reach. */
+interface RevertReach {
+  /** Files changed since the point. Omit when it is not counted. */
+  files?: number;
+  /** Messages written since the point. Omit when it is not counted. */
+  messages?: number;
+}
+/**
+ * What a restore would undo, in one line: `6 files · 12 messages since this point`.
+ *
+ * The number that makes the decision. "Restore" on its own asks a person to
+ * agree to something whose size they cannot see, and the two counts are exactly
+ * the two axes the scopes act on — which is why they are formatted together
+ * here and drawn on the summary line a collapsed dock shows.
+ *
+ * @example
+ * formatRevertSummary({ files: 6, messages: 12 }); // "6 files · 12 messages since this point"
+ * formatRevertSummary({ files: 1 });               // "1 file since this point"
+ * formatRevertSummary({});                         // "Nothing since this point"
+ */
+declare function formatRevertSummary({ files, messages }: RevertReach): string;
+interface RevertDockProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+  /** What the point is called: `Six fixtures addressed`, `Before the patch`. */
+  label?: string;
+  /** Files changed since the point. Omit when it is not counted. */
+  files?: number;
+  /** Messages written since the point. Omit when it is not counted. */
+  messages?: number;
+  /**
+   * The summary line, replacing the one {@link formatRevertSummary} would
+   * build.
+   */
+  summary?: string;
+  /**
+   * Which axes this product can actually restore, in the order they are
+   * offered. `REVERT_SCOPES` (all three) by default; Roo and Cline each ship
+   * two, and a runtime with no workspace to put back ships `["conversation"]`.
+   */
+  scopes?: readonly RevertScope[];
+  /** Whether the scopes are showing, or only the summary line. */
+  open: boolean;
+  /** Called when the dock is expanded or collapsed. */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * The scope waiting to be confirmed, or `null` for the step before that.
+   *
+   * The gate. Pressing a scope reports it here and nothing else happens; the
+   * restore itself is a second, separate press. Keeping it a prop rather than
+   * internal state is what lets a test — or a replay — sit in the armed state
+   * and look at it.
+   */
+  confirming?: RevertScope | null;
+  /**
+   * Called when a scope is armed, and again with `null` every way the dock
+   * leaves the armed state: `Keep everything`, `Escape`, folding the dock away,
+   * and the restore itself.
+   */
+  onConfirmingChange?: (scope: RevertScope | null) => void;
+  /**
+   * Do it. Called **only** from the confirm control, never from the control
+   * that picks a scope, and at most once per arm.
+   */
+  onRestore?: (scope: RevertScope) => void;
+  /**
+   * Copy for the dock's own six strings, merged over `REVERT_LABELS` —
+   * including `warning`, the sentence this element refuses to render without.
+   */
+  labels?: Partial<RevertLabels>;
+  /** What each scope is called, merged over `REVERT_SCOPE_LABELS`. */
+  scopeLabels?: Partial<Record<RevertScope, string>>;
+  /** What each scope does, merged over `REVERT_SCOPE_DESCRIPTIONS`. */
+  scopeDescriptions?: Partial<Record<RevertScope, string>>;
+}
+/**
+ * Put it back — and say, in the interface, that this cannot be taken back.
+ *
+ * The second of the two docks nobody ships, and the only destructive control in
+ * this family. Four things make it that rather than a button called Restore.
+ *
+ * The **axis**: a run changes the files and the conversation about them, and
+ * putting one back is not putting the other back. Every product in the study
+ * that has checkpoints has this axis, and every one of them names it in its
+ * copy — `Restore Files` against `Restore Files & Task`, `Reset Code` against
+ * `Reset Chat`. So the scopes are the controls: each one says what it does and
+ * what it costs, and the two sentences come from `REVERT_SCOPE_LABELS` and
+ * `REVERT_SCOPE_DESCRIPTIONS`, which a console can extend.
+ *
+ * The **gate**: `onRestore` fires from one control only, the one that answers
+ * "Discard all changes up to this checkpoint?". Picking a scope arms the dock
+ * and does nothing else. `This action cannot be undone.` is on the screen the
+ * whole time the dock is open, above both steps — an irreversibility that lives
+ * only in a props table is an irreversibility somebody meets for the first time
+ * afterwards.
+ *
+ * The **geometry**, which is the half a gate cannot do on its own: arming must
+ * not put the destructive control where the hand already is. This dock used to
+ * swap the scope list for the confirm inside the same box, and measured in
+ * Chromium at the bench's own 448 px the whole of `Discard and restore`
+ * (x13–170, y131–161) landed inside `Restore conversation` (x13–435,
+ * y121–175) — true at 280, 320, 360, 448, 520, 640 and 800 px and at all five
+ * densities, so a double click on a scope armed the dock with its first press
+ * and destroyed the work with its second. Now nothing above the confirm moves:
+ * the scope list stays exactly where it was, dimmed and `disabled` — so the
+ * coordinates that armed the dock hold a control that no longer answers a
+ * click — and the question is *appended under* it, a hairline and two lines of
+ * copy below the last scope. Three defences, not one: the arming control stops
+ * taking presses, the destructive control is somewhere else, and it refuses
+ * presses for {@link SETTLE_MS} after it arrives. It fires once per arm.
+ *
+ * And the **way out**, which is `TwoStepButton`'s ruling rather than a second
+ * one: focus lands on `Keep everything` when the dock arms, never on the
+ * destructive half — so a stuck Enter cannot walk through both steps, and a
+ * reader whose button was just unmounted is not left on `<body>`; `Keep
+ * everything` hands focus back to the scope that armed it; `Escape` disarms
+ * from inside the panel and stops there, so an armed dock inside a dialog does
+ * not also close the dialog, *and* from the document while the dock is armed,
+ * because a press on a disabled control drops focus to `<body>` and an exit
+ * that only listens to its own subtree is no exit at all after a double click;
+ * and folding the dock away disarms it, because an armed state nobody can see
+ * is one somebody re-opens into. Focus moves on the *transition* into the armed
+ * state only — a page that renders three of these as stills steals nothing.
+ *
+ * Two of that button's four exits are deliberately not taken. There is no
+ * **timeout**: an inline two-step's armed state is two words, and four seconds
+ * is longer than reading them, while this one is a question, a scope, what it
+ * costs and a sentence about irreversibility — a panel that disarms itself
+ * while it is being read teaches people to hurry past exactly the copy that
+ * matters. And there is no **blur exit**: `confirming` is the caller's state,
+ * so leaving would rewrite a prop the caller owns on a gesture as ordinary as
+ * tabbing into the transcript, and an armed dock is a labelled panel in the
+ * page rather than a button lying in wait.
+ *
+ * State is a prop, as everywhere here: `open` and `confirming` are the caller's,
+ * which is what lets the armed state be benched, tested and replayed instead of
+ * being a thing that only exists between two clicks.
+ *
+ * @example
+ * import { RevertDock } from "@cueplusplus/ui/elements";
+ *
+ * <RevertDock
+ *   label="Six fixtures addressed"
+ *   files={6}
+ *   messages={12}
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   confirming={armed}
+ *   onConfirmingChange={setArmed}
+ *   onRestore={(scope) => restore(scope)}
+ * />
+ * @example
+ * // A runtime with no workspace to put back: one axis, and it says so.
+ * <RevertDock label="Before the plan" messages={9} scopes={["conversation"]} open />
+ */
+declare const RevertDock: React.ForwardRefExoticComponent<RevertDockProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { RevertDock, RevertDockProps, RevertReach, formatRevertSummary };

package/dist/elements/revert-dock.js

@@ -0,0 +1,327 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { field, fieldInteractive, ghostButton, mono, paper } from "./surfaces.js";
+import { REVERT_LABELS, REVERT_SCOPES, REVERT_SCOPE_DESCRIPTIONS, REVERT_SCOPE_LABELS } from "./vocabulary.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { HistoryIcon, RotateCcwIcon, TriangleAlertIcon } from "lucide-react";
+//#region src/elements/revert-dock.tsx
+/**
+* ms the confirm refuses a press for after the dock arms.
+*
+* The third defence, and the smallest: long enough to outlast the 200–400 ms
+* between the two halves of a double click, short enough to read as the panel
+* arriving rather than as a control that is broken.
+*
+* It runs on the *transition* into the armed state only. A dock that mounts
+* already armed — a specimen still, a replay parked on this step, a test that
+* renders `confirming="both"` — has nobody's second click in flight, and
+* disabling its confirm for the first frames of a page would be a lie about
+* why.
+*/
+const SETTLE_MS = 400;
+/**
+* What a restore would undo, in one line: `6 files · 12 messages since this point`.
+*
+* The number that makes the decision. "Restore" on its own asks a person to
+* agree to something whose size they cannot see, and the two counts are exactly
+* the two axes the scopes act on — which is why they are formatted together
+* here and drawn on the summary line a collapsed dock shows.
+*
+* @example
+* formatRevertSummary({ files: 6, messages: 12 }); // "6 files · 12 messages since this point"
+* formatRevertSummary({ files: 1 });               // "1 file since this point"
+* formatRevertSummary({});                         // "Nothing since this point"
+*/
+function formatRevertSummary({ files, messages }) {
+	const parts = [];
+	if (files !== void 0) parts.push(`${files} file${files === 1 ? "" : "s"}`);
+	if (messages !== void 0) parts.push(`${messages} message${messages === 1 ? "" : "s"}`);
+	if (parts.length === 0) return "Nothing since this point";
+	return `${parts.join(" · ")} since this point`;
+}
+/**
+* Put it back — and say, in the interface, that this cannot be taken back.
+*
+* The second of the two docks nobody ships, and the only destructive control in
+* this family. Four things make it that rather than a button called Restore.
+*
+* The **axis**: a run changes the files and the conversation about them, and
+* putting one back is not putting the other back. Every product in the study
+* that has checkpoints has this axis, and every one of them names it in its
+* copy — `Restore Files` against `Restore Files & Task`, `Reset Code` against
+* `Reset Chat`. So the scopes are the controls: each one says what it does and
+* what it costs, and the two sentences come from `REVERT_SCOPE_LABELS` and
+* `REVERT_SCOPE_DESCRIPTIONS`, which a console can extend.
+*
+* The **gate**: `onRestore` fires from one control only, the one that answers
+* "Discard all changes up to this checkpoint?". Picking a scope arms the dock
+* and does nothing else. `This action cannot be undone.` is on the screen the
+* whole time the dock is open, above both steps — an irreversibility that lives
+* only in a props table is an irreversibility somebody meets for the first time
+* afterwards.
+*
+* The **geometry**, which is the half a gate cannot do on its own: arming must
+* not put the destructive control where the hand already is. This dock used to
+* swap the scope list for the confirm inside the same box, and measured in
+* Chromium at the bench's own 448 px the whole of `Discard and restore`
+* (x13–170, y131–161) landed inside `Restore conversation` (x13–435,
+* y121–175) — true at 280, 320, 360, 448, 520, 640 and 800 px and at all five
+* densities, so a double click on a scope armed the dock with its first press
+* and destroyed the work with its second. Now nothing above the confirm moves:
+* the scope list stays exactly where it was, dimmed and `disabled` — so the
+* coordinates that armed the dock hold a control that no longer answers a
+* click — and the question is *appended under* it, a hairline and two lines of
+* copy below the last scope. Three defences, not one: the arming control stops
+* taking presses, the destructive control is somewhere else, and it refuses
+* presses for {@link SETTLE_MS} after it arrives. It fires once per arm.
+*
+* And the **way out**, which is `TwoStepButton`'s ruling rather than a second
+* one: focus lands on `Keep everything` when the dock arms, never on the
+* destructive half — so a stuck Enter cannot walk through both steps, and a
+* reader whose button was just unmounted is not left on `<body>`; `Keep
+* everything` hands focus back to the scope that armed it; `Escape` disarms
+* from inside the panel and stops there, so an armed dock inside a dialog does
+* not also close the dialog, *and* from the document while the dock is armed,
+* because a press on a disabled control drops focus to `<body>` and an exit
+* that only listens to its own subtree is no exit at all after a double click;
+* and folding the dock away disarms it, because an armed state nobody can see
+* is one somebody re-opens into. Focus moves on the *transition* into the armed
+* state only — a page that renders three of these as stills steals nothing.
+*
+* Two of that button's four exits are deliberately not taken. There is no
+* **timeout**: an inline two-step's armed state is two words, and four seconds
+* is longer than reading them, while this one is a question, a scope, what it
+* costs and a sentence about irreversibility — a panel that disarms itself
+* while it is being read teaches people to hurry past exactly the copy that
+* matters. And there is no **blur exit**: `confirming` is the caller's state,
+* so leaving would rewrite a prop the caller owns on a gesture as ordinary as
+* tabbing into the transcript, and an armed dock is a labelled panel in the
+* page rather than a button lying in wait.
+*
+* State is a prop, as everywhere here: `open` and `confirming` are the caller's,
+* which is what lets the armed state be benched, tested and replayed instead of
+* being a thing that only exists between two clicks.
+*
+* @example
+* import { RevertDock } from "@cueplusplus/ui/elements";
+*
+* <RevertDock
+*   label="Six fixtures addressed"
+*   files={6}
+*   messages={12}
+*   open={open}
+*   onOpenChange={setOpen}
+*   confirming={armed}
+*   onConfirmingChange={setArmed}
+*   onRestore={(scope) => restore(scope)}
+* />
+* @example
+* // A runtime with no workspace to put back: one axis, and it says so.
+* <RevertDock label="Before the plan" messages={9} scopes={["conversation"]} open />
+*/
+const RevertDock = React.forwardRef(function RevertDock({ label = "Revert to this point", files, messages, summary, scopes = REVERT_SCOPES, open, onOpenChange, confirming = null, onConfirmingChange, onRestore, labels, scopeLabels, scopeDescriptions, className, onKeyDown, ...elementProps }, ref) {
+	const copy = {
+		...REVERT_LABELS,
+		...labels
+	};
+	const scopeCopy = {
+		...REVERT_SCOPE_LABELS,
+		...scopeLabels
+	};
+	const scopeWhat = {
+		...REVERT_SCOPE_DESCRIPTIONS,
+		...scopeDescriptions
+	};
+	const said = summary ?? formatRevertSummary({
+		files,
+		messages
+	});
+	const ids = React.useId();
+	const warningId = `${ids}warning`;
+	const questionId = `${ids}question`;
+	const scopeId = `${ids}scope`;
+	const dock = React.useRef(null);
+	const cancel = React.useRef(null);
+	const scopeButtons = React.useRef(/* @__PURE__ */ new Map());
+	const armedBefore = React.useRef(confirming);
+	const restored = React.useRef(false);
+	const settledAt = React.useRef(0);
+	const [settling, setSettling] = React.useState(false);
+	const setDock = React.useCallback((element) => {
+		dock.current = element;
+		if (typeof ref === "function") ref(element);
+		else if (ref !== null) ref.current = element;
+	}, [ref]);
+	/**
+	* Whether this dock is still the place focus belongs.
+	*
+	* `<body>` counts: a button that has just been disabled or unmounted hands
+	* the document back its default, which is precisely the state finding 2 was
+	* about. Anything else is somewhere a person chose, and moving them out of it
+	* would be the trap rather than the fix.
+	*/
+	const holdsFocus = React.useCallback(() => {
+		const element = dock.current;
+		if (element === null) return false;
+		const active = element.ownerDocument.activeElement;
+		return active === null || active === element.ownerDocument.body || element.contains(active);
+	}, []);
+	React.useEffect(() => {
+		const before = armedBefore.current;
+		armedBefore.current = confirming;
+		if (before === confirming) return void 0;
+		restored.current = false;
+		if (confirming === null) {
+			settledAt.current = 0;
+			setSettling(false);
+			if (before !== null && holdsFocus()) scopeButtons.current.get(before)?.focus();
+			return;
+		}
+		settledAt.current = Date.now() + SETTLE_MS;
+		setSettling(true);
+		if (holdsFocus()) cancel.current?.focus();
+		const timer = setTimeout(() => {
+			settledAt.current = 0;
+			setSettling(false);
+		}, SETTLE_MS);
+		return () => clearTimeout(timer);
+	}, [confirming, holdsFocus]);
+	React.useEffect(() => {
+		if (confirming === null) return void 0;
+		const owner = dock.current?.ownerDocument ?? globalThis.document;
+		const disarm = (event) => {
+			if (event.key !== "Escape" || event.defaultPrevented) return;
+			onConfirmingChange?.(null);
+		};
+		owner.addEventListener("keydown", disarm);
+		return () => owner.removeEventListener("keydown", disarm);
+	}, [confirming, onConfirmingChange]);
+	React.useEffect(() => {
+		if (open || confirming === null) return;
+		onConfirmingChange?.(null);
+	}, [
+		confirming,
+		onConfirmingChange,
+		open
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: setDock,
+		"data-slot": "revert-dock",
+		"data-open": String(open),
+		"data-confirming": confirming ?? "none",
+		className: cn(paper, "flex w-full flex-col rounded-(--radius-overlay)", className),
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			if (event.key !== "Escape" || confirming === null) return;
+			event.stopPropagation();
+			onConfirmingChange?.(null);
+		},
+		...elementProps,
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": open,
+			title: open ? copy.collapse : copy.expand,
+			onClick: () => {
+				if (open && confirming !== null) onConfirmingChange?.(null);
+				onOpenChange?.(!open);
+			},
+			className: "hover:bg-surface-2 flex items-center gap-2.5 rounded-(--radius-overlay) px-3 py-2 text-start transition-colors focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent motion-reduce:transition-none",
+			children: [
+				/* @__PURE__ */ jsx(HistoryIcon, {
+					"aria-hidden": true,
+					className: "text-fg-subtle size-3.5 shrink-0"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-fg min-w-0 flex-1 truncate text-(length:--cue-text-ui)",
+					children: label
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"data-slot": "revert-summary",
+					className: cn(mono, "text-fg-subtle shrink-0"),
+					children: said
+				})
+			]
+		}), open ? /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2 px-3 pb-3",
+			children: [
+				/* @__PURE__ */ jsxs("p", {
+					"data-slot": "revert-warning",
+					id: warningId,
+					className: "text-warn flex items-center gap-1.5 text-(length:--cue-text-ui)",
+					children: [/* @__PURE__ */ jsx(TriangleAlertIcon, {
+						"aria-hidden": true,
+						className: "size-3.5 shrink-0"
+					}), copy.warning]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"data-slot": "revert-scopes",
+					className: "flex flex-col gap-1.5",
+					children: scopes.map((scope) => {
+						const armed = confirming === scope;
+						return /* @__PURE__ */ jsxs("button", {
+							ref: (element) => {
+								if (element === null) scopeButtons.current.delete(scope);
+								else scopeButtons.current.set(scope, element);
+							},
+							type: "button",
+							"data-scope": scope,
+							"data-armed": String(armed),
+							disabled: confirming !== null,
+							id: armed ? scopeId : void 0,
+							onClick: () => onConfirmingChange?.(scope),
+							className: cn(confirming === null ? fieldInteractive : armed ? "bg-danger/10" : cn(field, "opacity-60"), "flex flex-col items-start gap-0.5 rounded-(--radius-control) px-3 py-2 text-start outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent"),
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "text-fg text-(length:--cue-text-ui) font-medium",
+								children: scopeCopy[scope]
+							}), /* @__PURE__ */ jsx("span", {
+								className: "text-fg-subtle text-(length:--cue-text-ui)",
+								children: scopeWhat[scope]
+							})]
+						}, scope);
+					})
+				}),
+				confirming === null ? null : /* @__PURE__ */ jsxs("div", {
+					"data-slot": "revert-confirm",
+					role: "group",
+					"aria-labelledby": questionId,
+					className: "border-border flex flex-col gap-2 border-t pt-2",
+					children: [/* @__PURE__ */ jsx("p", {
+						id: questionId,
+						className: "text-fg text-(length:--cue-text-ui)",
+						children: copy.question
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx("button", {
+							ref: cancel,
+							type: "button",
+							"data-slot": "revert-cancel",
+							onClick: () => onConfirmingChange?.(null),
+							className: cn(ghostButton, "h-7 px-3 text-(length:--cue-text-ui) font-medium"),
+							children: copy.cancel
+						}), /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							"data-slot": "revert-restore",
+							"data-settling": String(settling),
+							disabled: settling,
+							"aria-describedby": scopes.includes(confirming) ? `${scopeId} ${warningId}` : warningId,
+							onClick: () => {
+								if (Date.now() < settledAt.current || restored.current) return;
+								restored.current = true;
+								onConfirmingChange?.(null);
+								onRestore?.(confirming);
+							},
+							className: "bg-danger text-danger-fg flex items-center gap-1.5 rounded-(--radius-control) px-3 py-1.5 text-(length:--cue-text-ui) font-medium outline-none transition-[opacity,scale] duration-150 enabled:hover:opacity-90 enabled:active:scale-[0.96] disabled:opacity-60 focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent motion-reduce:transition-none",
+							children: [/* @__PURE__ */ jsx(RotateCcwIcon, {
+								"aria-hidden": true,
+								className: "size-3.5"
+							}), copy.confirm]
+						})]
+					})]
+				})
+			]
+		}) : null]
+	});
+});
+//#endregion
+export { RevertDock, formatRevertSummary };

package/dist/elements/reviewable-diff.d.ts

@@ -0,0 +1,45 @@
+import { DiffLine } from "./code-diff.js";
+import { ComponentProps } from "react";
+//#region src/elements/reviewable-diff.d.ts
+/** What the reviewer has decided about one hunk, `pending` until they act. */
+type HunkDecision = "pending" | "kept" | "discarded";
+/** One reviewable block of a diff: its range, its rows, and the decision standing on it. */
+interface DiffHunk {
+  /** Stable identity, reported back by onKeep and onDiscard. */
+  id: string;
+  /** Unified-diff range header, shown in mono. */
+  range: string;
+  /** Discarded hunks stay visible at reduced opacity so the review reads as a whole. */
+  decision: HunkDecision;
+  /** Reuses the DiffLine shape from the code diff element. */
+  lines: readonly DiffLine[];
+}
+/**
+ * The same diff, but each hunk is a decision: keep it, discard it, apply what
+ * survived.
+ *
+ * @example
+ * import { ReviewableDiff } from "@cueplusplus/ui/elements";
+ *
+ * <ReviewableDiff
+ *   filename="composer.tsx"
+ *   hunks={hunks}
+ *   onKeep={(id) => decide(id, "kept")}
+ *   onDiscard={(id) => decide(id, "discarded")}
+ *   onApply={commit}
+ * />
+ */
+declare function ReviewableDiff({ filename, hunks, onKeep, onDiscard, onApply, className, ...props }: Omit<ComponentProps<"div">, "children" | "filename" | "hunks" | "onKeep" | "onDiscard" | "onApply"> & {
+  /** File the hunks belong to. */
+  filename: string;
+  /** Each hunk carries its own decision. Apply stays disabled until none are pending. */
+  hunks: readonly DiffHunk[];
+  /** Called when a hunk is accepted. */
+  onKeep?: (id: string) => void;
+  /** Called when a hunk is rejected. */
+  onDiscard?: (id: string) => void;
+  /** Called when the reviewed set is committed. Only kept hunks should be written. */
+  onApply?: () => void;
+}): import("react").JSX.Element;
+//#endregion
+export { DiffHunk, HunkDecision, ReviewableDiff };