@cueplusplus/ui 0.13.0

package/dist/elements/transcript-rules.js

@@ -0,0 +1,95 @@
+"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/transcript-rules.tsx
+/**
+* The rule that says the day changed: a label centred between two hairlines.
+*
+* One row, placed by the caller. That is the difference between this and
+* `DaySeparator`, which takes a whole message list and inserts its own rules:
+* a transcript assembled from a row union — the shape every shipping agent UI
+* converged on — needs the boundary as a *member of that union*, not as a
+* component that owns the list around it.
+*
+* It is a `role="separator"` carrying its label as an accessible name, and the
+* text inside it is `aria-hidden`. A reader hears "Today, separator" once
+* rather than twice, and the hairlines are never announced at all.
+*
+* @example
+* import { TimeBoundary } from "@cueplusplus/ui/elements";
+*
+* <TimeBoundary label="Today" dateTime="2026-08-22" />
+*/
+const TimeBoundary = React.forwardRef(function TimeBoundary({ label, dateTime, className, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "separator",
+		"aria-label": label,
+		"data-slot": "time-boundary",
+		className: cn("flex w-full items-center gap-2.5 py-1", className),
+		...elementProps,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "bg-border h-px flex-1"
+			}),
+			dateTime === void 0 ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: cn(mono, "text-fg-subtle shrink-0"),
+				children: label
+			}) : /* @__PURE__ */ jsx("time", {
+				"aria-hidden": true,
+				dateTime,
+				className: cn(mono, "text-fg-subtle shrink-0"),
+				children: label
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "bg-border h-px flex-1"
+			})
+		]
+	});
+});
+/**
+* The rule that says "you have read down to here": an accented line with its
+* label at the end.
+*
+* The second row of Cursor's union that no catalogue ships, and the one with a
+* rule of its own that is easy to get wrong: it marks where the reader *was*,
+* so it does not move while they read. A divider that chased the last-seen
+* message would vanish the moment it appeared, which is why this component
+* takes no messages, no counts and no scroll position — the caller decides
+* where it goes and when it leaves, and the row is only ever the mark.
+*
+* Accented rather than neutral, and asymmetric rather than centred, so it can
+* never be mistaken for a {@link TimeBoundary} two rows above it.
+*
+* @example
+* import { UnreadDivider } from "@cueplusplus/ui/elements";
+*
+* <UnreadDivider />
+* @example
+* <UnreadDivider label="New since you left" />
+*/
+const UnreadDivider = React.forwardRef(function UnreadDivider({ label = "New", className, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "separator",
+		"aria-label": label,
+		"data-slot": "unread-divider",
+		className: cn("flex w-full items-center gap-2.5 py-1", className),
+		...elementProps,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "bg-accent/40 h-px flex-1"
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: cn(mono, "text-accent shrink-0 tracking-[0.15em] uppercase"),
+			children: label
+		})]
+	});
+});
+//#endregion
+export { TimeBoundary, UnreadDivider };

package/dist/elements/turn-footer.d.ts

@@ -0,0 +1,74 @@
+import { TurnActionLabels } from "./vocabulary.js";
+import * as React from "react";
+//#region src/elements/turn-footer.d.ts
+/**
+ * A turn's time, at the three levels Cursor shows it at.
+ *
+ * Three, and each answers a different question. The label answers "how long
+ * ago" at a glance; the title answers "exactly when" on hover, where it costs
+ * nothing; the subtitle answers "how long did it take", which is the only one
+ * of the three that is about the *agent* rather than about the clock.
+ */
+interface TurnTimestamp {
+  /** The glanceable one, always shown: `2m ago`. */
+  label: string;
+  /** The exact one, carried on the row's `title` attribute: `Today at 2:14 PM`. */
+  title?: string;
+  /** How long the work took: `Worked for 2m 15s`. Shown beside the label. */
+  subtitle?: string;
+}
+interface TurnFooterProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+  /** Copy the turn. The control exists only when this is given. */
+  onCopy?: () => void;
+  /** Whether the clipboard has it: the copy glyph crossfades to a check. */
+  copied?: boolean;
+  /** Quote this turn into the composer. The control exists only when this is given. */
+  onReply?: () => void;
+  /** Branch the conversation from this turn. The control exists only when this is given. */
+  onFork?: () => void;
+  /** Open the overflow menu — Cursor hangs "Copy request ID" off it. */
+  onMore?: () => void;
+  /** When the turn happened and how long it took. See {@link TurnTimestamp}. */
+  timestamp?: TurnTimestamp;
+  /**
+   * The accessible names of the four controls, merged over
+   * `TURN_ACTION_LABELS`. Partial on purpose: a console localising two of them
+   * should not have to restate the other three.
+   */
+  labels?: Partial<TurnActionLabels>;
+  /** What the group of controls is called. Defaults to `Turn actions`. */
+  label?: string;
+}
+/**
+ * The row under a finished turn: copy, reply, fork, and when it happened.
+ *
+ * Every control is opt-in — passing no handler draws no button — because the
+ * four are not one set. A read-only shared transcript has a copy button and
+ * nothing else; a console with branching has all four. A footer that drew
+ * disabled controls for the ones a product does not have would be a row of
+ * things nobody can press.
+ *
+ * The controls are drawn plainly rather than revealed on hover. Revealing them
+ * is a decision about the *turn*, not about this row: Cursor keys it off the
+ * turn's own hover state and Cline's stylesheet explains why the reveal must be
+ * instant — "a fade on hover chrome reads as lag, not polish" — and float over
+ * what follows rather than reserving space. Both are two lines of CSS on the
+ * turn, and neither is something this component can decide from inside itself.
+ *
+ * @example
+ * import { TurnFooter } from "@cueplusplus/ui/elements";
+ *
+ * <TurnFooter
+ *   onCopy={copy}
+ *   copied={copied}
+ *   onReply={quote}
+ *   onFork={branch}
+ *   timestamp={{ label: "2m ago", title: "Today at 2:14 PM", subtitle: "Worked for 2m 15s" }}
+ * />
+ * @example
+ * // A shared transcript: one control, and the time it was written.
+ * <TurnFooter onCopy={copy} timestamp={{ label: "14 March" }} />
+ */
+declare const TurnFooter: React.ForwardRefExoticComponent<TurnFooterProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { TurnFooter, TurnFooterProps, TurnTimestamp };

package/dist/elements/turn-footer.js

@@ -0,0 +1,101 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ghostButton, iconSwap, iconSwapIn, iconSwapOut, mono } from "./surfaces.js";
+import { TURN_ACTION_LABELS } from "./vocabulary.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon, CornerUpLeftIcon, EllipsisIcon, GitBranchIcon } from "lucide-react";
+//#region src/elements/turn-footer.tsx
+/**
+* The row under a finished turn: copy, reply, fork, and when it happened.
+*
+* Every control is opt-in — passing no handler draws no button — because the
+* four are not one set. A read-only shared transcript has a copy button and
+* nothing else; a console with branching has all four. A footer that drew
+* disabled controls for the ones a product does not have would be a row of
+* things nobody can press.
+*
+* The controls are drawn plainly rather than revealed on hover. Revealing them
+* is a decision about the *turn*, not about this row: Cursor keys it off the
+* turn's own hover state and Cline's stylesheet explains why the reveal must be
+* instant — "a fade on hover chrome reads as lag, not polish" — and float over
+* what follows rather than reserving space. Both are two lines of CSS on the
+* turn, and neither is something this component can decide from inside itself.
+*
+* @example
+* import { TurnFooter } from "@cueplusplus/ui/elements";
+*
+* <TurnFooter
+*   onCopy={copy}
+*   copied={copied}
+*   onReply={quote}
+*   onFork={branch}
+*   timestamp={{ label: "2m ago", title: "Today at 2:14 PM", subtitle: "Worked for 2m 15s" }}
+* />
+* @example
+* // A shared transcript: one control, and the time it was written.
+* <TurnFooter onCopy={copy} timestamp={{ label: "14 March" }} />
+*/
+const TurnFooter = React.forwardRef(function TurnFooter({ onCopy, copied = false, onReply, onFork, onMore, timestamp, labels, label = "Turn actions", className, ...elementProps }, ref) {
+	const copy = {
+		...TURN_ACTION_LABELS,
+		...labels
+	};
+	const buttonClassName = cn(ghostButton, "size-7");
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "group",
+		"aria-label": label,
+		"data-slot": "turn-footer",
+		className: cn("flex w-full items-center gap-1", className),
+		...elementProps,
+		children: [
+			onCopy === void 0 ? null : /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"aria-label": copied ? copy.copied : copy.copy,
+				onClick: onCopy,
+				className: cn(buttonClassName, "grid place-items-center", copied && "text-ok"),
+				children: [/* @__PURE__ */ jsx(CopyIcon, { className: cn(iconSwap, "size-3.5", copied ? iconSwapOut : iconSwapIn) }), /* @__PURE__ */ jsx(CheckIcon, { className: cn(iconSwap, "size-3.5", copied ? iconSwapIn : iconSwapOut) })]
+			}),
+			onReply === void 0 ? null : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": copy.reply,
+				onClick: onReply,
+				className: buttonClassName,
+				children: /* @__PURE__ */ jsx(CornerUpLeftIcon, { className: "size-3.5" })
+			}),
+			onFork === void 0 ? null : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": copy.fork,
+				onClick: onFork,
+				className: buttonClassName,
+				children: /* @__PURE__ */ jsx(GitBranchIcon, { className: "size-3.5" })
+			}),
+			onMore === void 0 ? null : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": copy.more,
+				onClick: onMore,
+				className: buttonClassName,
+				children: /* @__PURE__ */ jsx(EllipsisIcon, { className: "size-3.5" })
+			}),
+			timestamp === void 0 ? null : /* @__PURE__ */ jsxs("span", {
+				"data-slot": "turn-timestamp",
+				title: timestamp.title,
+				className: cn(mono, "text-fg-subtle ms-auto flex min-w-0 items-baseline gap-1.5"),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "shrink-0",
+					children: timestamp.label
+				}), timestamp.subtitle === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "shrink-0",
+					children: "·"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "min-w-0 truncate",
+					children: timestamp.subtitle
+				})] })]
+			})
+		]
+	});
+});
+//#endregion
+export { TurnFooter };

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

@@ -0,0 +1,16 @@
+import { ComponentProps } from "react";
+//#region src/elements/typing-indicator.d.ts
+/**
+ * The classic three dots, tuned to read as presence rather than noise.
+ *
+ * @example
+ * import { TypingIndicator } from "@cueplusplus/ui/elements";
+ *
+ * <TypingIndicator />
+ */
+declare function TypingIndicator({ variant, className, ...props }: Omit<ComponentProps<"div">, "children" | "variant" | "role" | "aria-label"> & {
+  /** bubble wraps the dots in a pill; bare renders only the three dots. */
+  variant?: "bubble" | "bare";
+}): import("react").JSX.Element;
+//#endregion
+export { TypingIndicator };

package/dist/elements/typing-indicator.js

@@ -0,0 +1,51 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { paper } from "./surfaces.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/elements/typing-indicator.tsx
+const DOT_DELAYS = [
+	"-0.32s",
+	"-0.16s",
+	"0s"
+];
+/**
+* The classic three dots, tuned to read as presence rather than noise.
+*
+* @example
+* import { TypingIndicator } from "@cueplusplus/ui/elements";
+*
+* <TypingIndicator />
+*/
+function TypingIndicator({ variant = "bubble", className, ...props }) {
+	const dots = DOT_DELAYS.map((delay) => /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: "bg-surface-3 size-1.5 animate-bounce rounded-full motion-reduce:animate-none",
+		style: {
+			animationDelay: delay,
+			animationDuration: "1.1s"
+		}
+	}, delay));
+	if (variant === "bare") return /* @__PURE__ */ jsx("div", {
+		"data-slot": "typing-indicator",
+		"data-variant": "bare",
+		role: "status",
+		"aria-label": "Assistant is typing",
+		className: cn("flex gap-1", className),
+		...props,
+		children: dots
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "typing-indicator",
+		"data-variant": "bubble",
+		className: cn(paper, "w-fit rounded-full px-4 py-3.5", className),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			role: "status",
+			"aria-label": "Assistant is typing",
+			className: "flex gap-1",
+			children: dots
+		})
+	});
+}
+//#endregion
+export { TypingIndicator };

package/dist/elements/verdict-row.d.ts

@@ -0,0 +1,89 @@
+import { VerdictLabels } from "./vocabulary.js";
+import * as React from "react";
+//#region src/elements/verdict-row.d.ts
+/** One thing the scorer thinks is probably wrong, and how sure it is. */
+interface VerdictIssue {
+  /** What the problem is, in the scorer's own words: `Missing error handling`. */
+  label: string;
+  /**
+   * How likely it is, `0`–`1`. Drawn as a whole percentage beside the label and
+   * normalised the same defensive way the score is.
+   */
+  probability: number;
+}
+/** How a verdict reads: settled, doubtful, or bad. */
+type VerdictTone = "ok" | "warn" | "danger";
+/**
+ * How many of the five stars a score earns: `0`–`5`.
+ *
+ * OpenHands' own arithmetic, defences included. A score arrives from a model
+ * over a network, so `NaN`, `Infinity` and `-3` are all things that happen, and
+ * every one of them has to become a number of stars rather than a row that
+ * throws or a rating that renders `NaN`. Non-finite scores round to nothing:
+ * a caller with no score should draw no row at all rather than a row that says
+ * the work was bad.
+ *
+ * @example
+ * verdictStars(0.82);        // 4
+ * verdictStars(1.5);         // 5 — clamped, not trusted
+ * verdictStars(Number.NaN);  // 0
+ */
+declare function verdictStars(score: number): number;
+interface VerdictRowProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+  /**
+   * What the scorer thought of the work, `0`–`1`. Clamped, and a non-finite
+   * score is worth no stars — see {@link verdictStars}.
+   */
+  score: number;
+  /**
+   * What the scorer is called. Defaults to `VERDICT_LABELS.title`
+   * (`Verification`), which is deliberately not `Critic`: the same row fits a
+   * test run, a linter or a second model.
+   */
+  title?: string;
+  /** One line of the scorer's own prose, under the rating. */
+  summary?: string;
+  /**
+   * What it thinks is probably wrong, drawn as chips with their probabilities
+   * and tinted by them. Order is the caller's — most likely first reads best.
+   */
+  issues?: readonly VerdictIssue[];
+  /** The row's three strings, merged over `VERDICT_LABELS`. */
+  labels?: Partial<VerdictLabels>;
+}
+/**
+ * What the run thought of its own work, attached to the turn that did it.
+ *
+ * The second of the two elements nothing in the field ships. A finished turn
+ * says what it changed and how long it took; whether it is any *good* is the
+ * one question the reader actually has, and every agent runtime that runs a
+ * critic, a test suite or a self-review already has an answer to it. This is
+ * that answer as a row: a rating out of five, the exact score beside it, the
+ * scorer's sentence, and the problems it thinks are most likely, each with how
+ * sure it is.
+ *
+ * Every number is defended. Scores arrive from a model, so `NaN`, `Infinity`
+ * and out-of-range values are normal traffic and all of them clamp — a verdict
+ * row is worthless if a bad payload can make it render `NaN out of 5`.
+ *
+ * Tone is stated as `data-verdict` on the element, from OpenHands' own
+ * thresholds (`ok` at 0.6, `warn` at 0.4, `danger` below), and the chips take
+ * theirs from the probability (`danger` at 0.7, `warn` at 0.5). The stars are
+ * one `role="img"` with the rating as its name rather than five glyphs a screen
+ * reader would read out one at a time.
+ *
+ * @example
+ * import { VerdictRow } from "@cueplusplus/ui/elements";
+ *
+ * <VerdictRow
+ *   score={0.82}
+ *   summary="The patch matches the plot and the cue holds."
+ *   issues={[{ label: "No fallback for a missing fixture", probability: 0.54 }]}
+ * />
+ * @example
+ * // A verdict that failed the work, from a test run rather than a model.
+ * <VerdictRow score={0.24} title="Test run" summary="3 of 41 checks failed." />
+ */
+declare const VerdictRow: React.ForwardRefExoticComponent<VerdictRowProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { VerdictIssue, VerdictRow, VerdictRowProps, VerdictTone, verdictStars };

package/dist/elements/verdict-row.js

@@ -0,0 +1,150 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { field, mono, paper } from "./surfaces.js";
+import { VERDICT_LABELS } from "./vocabulary.js";
+import { clamp } from "./range.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { StarIcon } from "lucide-react";
+//#region src/elements/verdict-row.tsx
+/** What the stars and the chips paint at each tone. */
+const TONE_INK = {
+	ok: "text-ok",
+	warn: "text-warn",
+	danger: "text-danger"
+};
+/**
+* How many of the five stars a score earns: `0`–`5`.
+*
+* OpenHands' own arithmetic, defences included. A score arrives from a model
+* over a network, so `NaN`, `Infinity` and `-3` are all things that happen, and
+* every one of them has to become a number of stars rather than a row that
+* throws or a rating that renders `NaN`. Non-finite scores round to nothing:
+* a caller with no score should draw no row at all rather than a row that says
+* the work was bad.
+*
+* @example
+* verdictStars(0.82);        // 4
+* verdictStars(1.5);         // 5 — clamped, not trusted
+* verdictStars(Number.NaN);  // 0
+*/
+function verdictStars(score) {
+	if (!Number.isFinite(score)) return 0;
+	return Math.round(clamp(score, 0, 1) * 5);
+}
+/** A probability as a verdict states it: whole percents. */
+function percent(value) {
+	if (!Number.isFinite(value)) return 0;
+	return Math.round(clamp(value, 0, 1) * 100);
+}
+/**
+* What the run thought of its own work, attached to the turn that did it.
+*
+* The second of the two elements nothing in the field ships. A finished turn
+* says what it changed and how long it took; whether it is any *good* is the
+* one question the reader actually has, and every agent runtime that runs a
+* critic, a test suite or a self-review already has an answer to it. This is
+* that answer as a row: a rating out of five, the exact score beside it, the
+* scorer's sentence, and the problems it thinks are most likely, each with how
+* sure it is.
+*
+* Every number is defended. Scores arrive from a model, so `NaN`, `Infinity`
+* and out-of-range values are normal traffic and all of them clamp — a verdict
+* row is worthless if a bad payload can make it render `NaN out of 5`.
+*
+* Tone is stated as `data-verdict` on the element, from OpenHands' own
+* thresholds (`ok` at 0.6, `warn` at 0.4, `danger` below), and the chips take
+* theirs from the probability (`danger` at 0.7, `warn` at 0.5). The stars are
+* one `role="img"` with the rating as its name rather than five glyphs a screen
+* reader would read out one at a time.
+*
+* @example
+* import { VerdictRow } from "@cueplusplus/ui/elements";
+*
+* <VerdictRow
+*   score={0.82}
+*   summary="The patch matches the plot and the cue holds."
+*   issues={[{ label: "No fallback for a missing fixture", probability: 0.54 }]}
+* />
+* @example
+* // A verdict that failed the work, from a test run rather than a model.
+* <VerdictRow score={0.24} title="Test run" summary="3 of 41 checks failed." />
+*/
+const VerdictRow = React.forwardRef(function VerdictRow({ score, title, summary, issues, labels, className, ...elementProps }, ref) {
+	const copy = {
+		...VERDICT_LABELS,
+		...labels
+	};
+	const stars = verdictStars(score);
+	const scored = Number.isFinite(score) ? clamp(score, 0, 1) : 0;
+	const tone = scored >= .6 ? "ok" : scored >= .4 ? "warn" : "danger";
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "verdict-row",
+		"data-verdict": tone,
+		className: cn(paper, "flex w-full flex-col gap-2 rounded-(--radius-overlay) px-3 py-2.5", className),
+		...elementProps,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-fg min-w-0 flex-1 truncate text-(length:--cue-text-ui) font-medium",
+						children: title ?? copy.title
+					}),
+					/* @__PURE__ */ jsx("span", {
+						role: "img",
+						"data-slot": "verdict-row-rating",
+						"aria-label": copy.rating.replace("{n}", String(stars)),
+						className: cn("flex shrink-0 items-center gap-0.5", TONE_INK[tone]),
+						children: [
+							0,
+							1,
+							2,
+							3,
+							4
+						].map((index) => /* @__PURE__ */ jsx(StarIcon, {
+							"aria-hidden": true,
+							className: cn("size-3.5", index < stars ? "fill-current" : "opacity-25")
+						}, index))
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: cn(mono, "shrink-0 tabular-nums", TONE_INK[tone]),
+						children: [percent(scored), "%"]
+					})
+				]
+			}),
+			summary === void 0 ? null : /* @__PURE__ */ jsx("p", {
+				className: "text-fg-muted text-(length:--cue-text-ui)",
+				children: summary
+			}),
+			issues === void 0 || issues.length === 0 ? null : /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn(mono, "text-fg-subtle"),
+					children: copy.issues
+				}), /* @__PURE__ */ jsx("ul", {
+					"data-slot": "verdict-row-issues",
+					className: "flex flex-wrap gap-1.5",
+					children: issues.map((issue) => {
+						const odds = percent(issue.probability);
+						const chip = odds >= 70 ? "danger" : odds >= 50 ? "warn" : "neutral";
+						return /* @__PURE__ */ jsxs("li", {
+							"data-color": chip,
+							className: cn(field, "flex max-w-full items-baseline gap-1.5 rounded-(--radius-control) px-2 py-0.5 text-(length:--cue-text-ui)", chip === "danger" ? "text-danger" : chip === "warn" ? "text-warn" : "text-fg-muted"),
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "min-w-0 truncate",
+								children: issue.label
+							}), /* @__PURE__ */ jsxs("span", {
+								className: cn(mono, "shrink-0 tabular-nums opacity-80"),
+								children: [odds, "%"]
+							})]
+						}, issue.label);
+					})
+				})]
+			})
+		]
+	});
+});
+//#endregion
+export { VerdictRow, verdictStars };