@cueplusplus/ui 0.3.0 → 0.5.0

package/dist/elements/read-aloud.d.ts

@@ -0,0 +1,45 @@
+import { ComponentProps } from "react";
+//#region src/elements/read-aloud.d.ts
+/**
+ * An answer played back, the spoken word lit as it goes, speed under your thumb.
+ *
+ * @example
+ * import { ReadAloud } from "@cueplusplus/ui/elements";
+ *
+ * <ReadAloud
+ *   words={words}
+ *   spokenIndex={12}
+ *   playing
+ *   rate={1}
+ *   elapsed="0:04"
+ *   duration="0:11"
+ *   onToggle={toggle}
+ *   onRateChange={cycleRate}
+ * />
+ */
+declare function ReadAloud({ words, spokenIndex, playing, rate, elapsed, duration, onToggle, onRateChange, className, ...props }: Omit<ComponentProps<"div">, "children" | "words" | "spokenIndex" | "playing" | "rate" | "elapsed" | "duration" | "onToggle" | "onRateChange"> & {
+  /**
+   * The answer split into words, so the spoken one can be lit without re-parsing the
+   * text.
+   */
+  words: readonly string[];
+  /**
+   * Index of the word being spoken. Everything before it dims, everything after stays
+   * waiting, and an index outside the text speaks none of it.
+   */
+  spokenIndex: number;
+  /** Swaps the transport button between play and pause. */
+  playing: boolean;
+  /** Playback speed, printed on the rate control. */
+  rate: number;
+  /** Pre-formatted elapsed time. */
+  elapsed: string;
+  /** Pre-formatted total duration. */
+  duration: string;
+  /** Called when playback is started or paused. */
+  onToggle?: () => void;
+  /** Called when the rate control is tapped; cycle the rate yourself. */
+  onRateChange?: () => void;
+}): import("react").JSX.Element;
+//#endregion
+export { ReadAloud };

package/dist/elements/read-aloud.js

@@ -0,0 +1,75 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { field, ghostButton, mono, paper } from "./surfaces.js";
+import { pct } from "./range.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PauseIcon, PlayIcon, Volume2Icon } from "lucide-react";
+//#region src/elements/read-aloud.tsx
+/**
+* An answer played back, the spoken word lit as it goes, speed under your thumb.
+*
+* @example
+* import { ReadAloud } from "@cueplusplus/ui/elements";
+*
+* <ReadAloud
+*   words={words}
+*   spokenIndex={12}
+*   playing
+*   rate={1}
+*   elapsed="0:04"
+*   duration="0:11"
+*   onToggle={toggle}
+*   onRateChange={cycleRate}
+* />
+*/
+function ReadAloud({ words, spokenIndex, playing, rate, elapsed, duration, onToggle, onRateChange, className, ...props }) {
+	const progress = pct(spokenIndex, words.length);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "read-aloud",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-3 rounded-(--radius-overlay) p-3.5", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-(length:--cue-text-body) leading-relaxed",
+			children: words.map((word, i) => /* @__PURE__ */ jsxs("span", {
+				className: cn("transition-colors duration-200 motion-reduce:transition-none", i < spokenIndex ? "text-fg-subtle" : i === spokenIndex ? "text-fg rounded-(--radius-control) bg-stream/15" : "text-fg-muted"),
+				children: [word, " "]
+			}, `${i}-${word}`))
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2.5",
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": playing ? "Pause" : "Play",
+					onClick: onToggle,
+					className: cn(ghostButton, "bg-surface-2 size-8 shrink-0"),
+					children: playing ? /* @__PURE__ */ jsx(PauseIcon, { className: "size-3.5" }) : /* @__PURE__ */ jsx(PlayIcon, { className: "size-3.5 translate-x-px" })
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "bg-surface-2 h-[3px] min-w-0 flex-1 overflow-hidden rounded-full",
+					children: /* @__PURE__ */ jsx("span", {
+						className: "block h-full rounded-full bg-stream transition-[width] duration-200 ease-linear motion-reduce:transition-none",
+						style: { width: `${progress}%` }
+					})
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: cn(mono, "text-fg-subtle shrink-0 tabular-nums"),
+					children: [
+						elapsed,
+						" / ",
+						duration
+					]
+				}),
+				/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-label": `Playback speed, currently ${rate} times`,
+					onClick: onRateChange,
+					className: cn(field, mono, "text-fg-muted hover:text-fg shrink-0 rounded-full px-2 py-1 tabular-nums transition-colors"),
+					children: [rate, "×"]
+				}),
+				/* @__PURE__ */ jsx(Volume2Icon, { className: "text-fg-subtle size-3.5 shrink-0" })
+			]
+		})]
+	});
+}
+//#endregion
+export { ReadAloud };

package/dist/elements/reasoning-effort.d.ts

@@ -0,0 +1,36 @@
+import { ComponentProps } from "react";
+//#region src/elements/reasoning-effort.d.ts
+/** One rung of the thinking budget: what it is called, and how many tokens it buys. */
+interface EffortLevel {
+  /** Identifies the rung, and what `onSelect` reports. */
+  key: string;
+  /** The word on the segment — `Low`, `Medium`, `High`. */
+  label: string;
+  /** Tokens this rung allows, which is what the meter underneath is a fraction of. */
+  budget: number;
+}
+/**
+ * How hard to think, and how much of that budget the run actually spent.
+ *
+ * @example
+ * import { ReasoningEffort } from "@cueplusplus/ui/elements";
+ *
+ * <ReasoningEffort
+ *   levels={levels}
+ *   selectedKey="high"
+ *   spent={5200}
+ *   onSelect={setLevel}
+ * />
+ */
+declare function ReasoningEffort({ levels, selectedKey, spent, onSelect, className, ...props }: Omit<ComponentProps<"div">, "children" | "levels" | "selectedKey" | "spent" | "onSelect"> & {
+  /** Every tier on offer, each carrying its own token budget. */
+  levels: readonly EffortLevel[];
+  /** Which tier is active. Its budget becomes the denominator. */
+  selectedKey: string;
+  /** Thinking tokens used so far, filling the bar against the selected budget. */
+  spent: number;
+  /** Called when a tier is picked. */
+  onSelect?: (key: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { EffortLevel, ReasoningEffort };

package/dist/elements/reasoning-effort.js

@@ -0,0 +1,67 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { field, mono } from "./surfaces.js";
+import { pct } from "./range.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/reasoning-effort.tsx
+const fmt = (n) => n.toLocaleString("en-US");
+/**
+* How hard to think, and how much of that budget the run actually spent.
+*
+* @example
+* import { ReasoningEffort } from "@cueplusplus/ui/elements";
+*
+* <ReasoningEffort
+*   levels={levels}
+*   selectedKey="high"
+*   spent={5200}
+*   onSelect={setLevel}
+* />
+*/
+function ReasoningEffort({ levels, selectedKey, spent, onSelect, className, ...props }) {
+	const budget = levels.find((level) => level.key === selectedKey)?.budget ?? 0;
+	const used = pct(spent, budget);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "reasoning-effort",
+		className: cn("flex w-full max-w-sm flex-col gap-2.5", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-baseline justify-between",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-(length:--cue-text-body) font-medium",
+					children: "Thinking"
+				}), /* @__PURE__ */ jsxs("span", {
+					className: cn(mono, "text-fg-subtle tabular-nums"),
+					children: [
+						fmt(spent),
+						" / ",
+						fmt(budget)
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn(field, "flex gap-0.5 rounded-full p-0.5"),
+				children: levels.map((level) => {
+					const active = level.key === selectedKey;
+					return /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-pressed": active,
+						onClick: () => onSelect?.(level.key),
+						className: cn("flex-1 rounded-full py-1 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.97]", active ? "bg-bg text-fg" : "text-fg-muted hover:text-fg-muted"),
+						children: level.label
+					}, level.key);
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "bg-surface-2 h-[3px] w-full overflow-hidden rounded-full",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "block h-full rounded-full bg-stream transition-[width] duration-500 motion-reduce:transition-none",
+					style: { width: `${used}%` }
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { ReasoningEffort };

package/dist/elements/reasoning-panel.d.ts

@@ -0,0 +1,46 @@
+//#region src/elements/reasoning-panel.d.ts
+/** One beat of the model's thinking: what it turned to, and what it made of it. */
+interface ReasoningStep {
+  /** What this beat is about, in a few words. Also the row's key, so keep it unique. */
+  title: string;
+  /** The thought itself, in full. Wraps and breaks; nothing truncates it. */
+  body: string;
+}
+interface ReasoningPanelProps {
+  /** Full list of reasoning steps available to reveal. */
+  steps: ReasoningStep[];
+  /** How many steps from the start are currently shown on the timeline. */
+  visibleSteps: number;
+  /** When true the trigger shows a shimmering Thinking label and the active step pulses. */
+  streaming: boolean;
+  /** Whether the collapsible step list is expanded. */
+  open: boolean;
+  /** Called when the user expands or collapses the panel. */
+  onOpenChange: (open: boolean) => void;
+  /** Trigger label once streaming finishes, for example a summary of how long it thought. */
+  restingLabel: string;
+  /** Elapsed timer shown next to Thinking while streaming. Omit to hide it. */
+  elapsed?: string;
+  /** Extra classes merged onto the root. */
+  className?: string;
+}
+/**
+ * A collapsible trace that streams reasoning steps along a timeline, then settles into
+ * a summary.
+ *
+ * @example
+ * import { ReasoningPanel } from "@cueplusplus/ui/elements";
+ *
+ * <ReasoningPanel
+ *   steps={[{ title: "Scope", body: "Find the failing path." }]}
+ *   visibleSteps={1}
+ *   streaming
+ *   open
+ *   onOpenChange={setOpen}
+ *   restingLabel="Reasoned for 4s"
+ *   elapsed="2s"
+ * />
+ */
+declare function ReasoningPanel({ steps, visibleSteps, streaming, open, onOpenChange, restingLabel, elapsed, className }: ReasoningPanelProps): import("react").JSX.Element;
+//#endregion
+export { ReasoningPanel, ReasoningPanelProps, ReasoningStep };

package/dist/elements/reasoning-panel.js

@@ -0,0 +1,75 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ShimmerLabel, SwapLabel, collapsePanel } from "./surfaces.js";
+import { take } from "./range.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Collapsible } from "@base-ui/react/collapsible";
+import { ChevronDownIcon } from "lucide-react";
+//#region src/elements/reasoning-panel.tsx
+/**
+* A collapsible trace that streams reasoning steps along a timeline, then settles into
+* a summary.
+*
+* @example
+* import { ReasoningPanel } from "@cueplusplus/ui/elements";
+*
+* <ReasoningPanel
+*   steps={[{ title: "Scope", body: "Find the failing path." }]}
+*   visibleSteps={1}
+*   streaming
+*   open
+*   onOpenChange={setOpen}
+*   restingLabel="Reasoned for 4s"
+*   elapsed="2s"
+* />
+*/
+function ReasoningPanel({ steps, visibleSteps, streaming, open, onOpenChange, restingLabel, elapsed, className }) {
+	const shown = take(steps, visibleSteps);
+	return /* @__PURE__ */ jsxs(Collapsible.Root, {
+		"data-slot": "reasoning-panel",
+		open,
+		onOpenChange,
+		className: cn("w-full max-w-sm", className),
+		children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
+			className: "group/trigger text-fg-muted hover:text-fg flex items-center gap-1.5 py-1 text-(length:--cue-text-body) transition-[color,scale] outline-none active:scale-[0.98] focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent",
+			children: [/* @__PURE__ */ jsxs(SwapLabel, {
+				active: streaming ? 0 : 1,
+				className: "text-start",
+				children: [/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ShimmerLabel, {
+					active: streaming,
+					className: "relative inline-block leading-none",
+					children: "Thinking"
+				}), elapsed !== void 0 && /* @__PURE__ */ jsx("span", {
+					className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle tabular-nums"),
+					children: elapsed
+				})] }), /* @__PURE__ */ jsx(Fragment, { children: restingLabel })]
+			}), /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3.5 shrink-0 opacity-60 transition-transform duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-[panel-open]/trigger:rotate-180 motion-reduce:transition-none" })]
+		}), /* @__PURE__ */ jsx(Collapsible.Panel, {
+			className: cn(collapsePanel, "outline-none"),
+			children: /* @__PURE__ */ jsx("ol", {
+				className: "flex flex-col gap-4 pt-3 pb-1",
+				children: shown.map((step, i) => {
+					const active = streaming && i === shown.length - 1;
+					return /* @__PURE__ */ jsxs("li", {
+						className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both flex gap-3 duration-300",
+						children: [/* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: cn("mt-[7px] size-[5px] shrink-0 rounded-full transition-colors duration-300", active ? "animate-pulse bg-stream" : "bg-surface-3")
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "flex min-w-0 flex-1 flex-col",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "text-fg text-(length:--cue-text-body) font-medium",
+								children: step.title
+							}), /* @__PURE__ */ jsx("p", {
+								className: "text-fg-muted mt-0.5 text-(length:--cue-text-body) leading-relaxed break-words",
+								children: step.body
+							})]
+						})]
+					}, step.title);
+				})
+			})
+		})]
+	});
+}
+//#endregion
+export { ReasoningPanel };

package/dist/elements/recommendation-card.d.ts

@@ -0,0 +1,45 @@
+import { ComponentProps, ReactNode } from "react";
+//#region src/elements/recommendation-card.d.ts
+/**
+ * Whether the proposal is still standing (`idle`) or the person has taken it
+ * (`accepted`). The card swaps its whole action row rather than disabling it.
+ */
+type RecommendationState = "idle" | "accepted";
+/**
+ * The agent proposes a change with its confidence, and waits for a yes.
+ *
+ * @example
+ * import { RecommendationCard } from "@cueplusplus/ui/elements";
+ *
+ * <RecommendationCard
+ *   state="idle"
+ *   question="Enable draft autosave?"
+ *   confidenceLabel="high confidence"
+ *   acceptedLabel="Enabled for every thread"
+ *   onAccept={() => accept()}
+ * >
+ *   Wire{" "}
+ *   <span className="bg-surface-2 text-fg-muted rounded-(--radius-control) px-1.5 py-0.5 font-mono text-(length:--cue-text-label)">
+ *     runtime.drafts
+ *   </span>{" "}
+ *   with three lines.
+ * </RecommendationCard>
+ */
+declare function RecommendationCard({ state, question, children, confidenceLabel, acceptedLabel, onAccept, onAlternatives, className, ...props }: Omit<ComponentProps<"div">, "state" | "question" | "children" | "confidenceLabel" | "acceptedLabel" | "onAccept" | "onAlternatives"> & {
+  /** idle shows accept controls; accepted swaps in a confirmation row. */
+  state: RecommendationState;
+  /** Proposal headline the agent is asking the user about. */
+  question: string;
+  /** Supporting body explaining the recommendation. */
+  children: ReactNode;
+  /** Confidence copy shown next to the bar meter while idle. */
+  confidenceLabel: string;
+  /** Confirmation copy shown once the proposal is accepted. */
+  acceptedLabel: string;
+  /** Called when the user clicks Accept. */
+  onAccept?: () => void;
+  /** Called when the user clicks Alternatives. */
+  onAlternatives?: () => void;
+}): import("react").JSX.Element;
+//#endregion
+export { RecommendationCard, RecommendationState };

package/dist/elements/recommendation-card.js

@@ -0,0 +1,83 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { inkButton, mono, paper } from "./surfaces.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon } from "lucide-react";
+//#region src/elements/recommendation-card.tsx
+const CONFIDENCE_BARS = [
+	0,
+	1,
+	2
+];
+/**
+* The agent proposes a change with its confidence, and waits for a yes.
+*
+* @example
+* import { RecommendationCard } from "@cueplusplus/ui/elements";
+*
+* <RecommendationCard
+*   state="idle"
+*   question="Enable draft autosave?"
+*   confidenceLabel="high confidence"
+*   acceptedLabel="Enabled for every thread"
+*   onAccept={() => accept()}
+* >
+*   Wire{" "}
+*   <span className="bg-surface-2 text-fg-muted rounded-(--radius-control) px-1.5 py-0.5 font-mono text-(length:--cue-text-label)">
+*     runtime.drafts
+*   </span>{" "}
+*   with three lines.
+* </RecommendationCard>
+*/
+function RecommendationCard({ state, question, children, confidenceLabel, acceptedLabel, onAccept, onAlternatives, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "recommendation-card",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-3 rounded-(--radius-overlay) p-4", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "text-(length:--cue-text-body) font-medium",
+				children: question
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-fg-muted text-(length:--cue-text-body) leading-relaxed",
+				children
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex h-8 items-center justify-between",
+				children: state === "idle" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "flex items-end gap-0.5",
+						"aria-hidden": true,
+						children: CONFIDENCE_BARS.map((bar) => /* @__PURE__ */ jsx("span", {
+							className: "w-1 rounded-full bg-ok/70",
+							style: { height: 6 + bar * 3 }
+						}, bar))
+					}), /* @__PURE__ */ jsx("span", {
+						className: cn(mono, "text-fg-subtle"),
+						children: confidenceLabel
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onAlternatives,
+						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: "Alternatives"
+					}), /* @__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: "Accept"
+					})]
+				})] }) : /* @__PURE__ */ jsxs("div", {
+					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: [/* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5 text-ok" }), acceptedLabel]
+				}, "accepted")
+			})
+		]
+	});
+}
+//#endregion
+export { RecommendationCard };

package/dist/elements/regenerate-menu.d.ts

@@ -0,0 +1,45 @@
+import { ComponentProps } from "react";
+//#region src/elements/regenerate-menu.d.ts
+/** One model the same turn could be run again on. */
+interface RegenerateOption {
+  /** Identifies the model, and what `onPick` reports. Matching `currentId` marks the row. */
+  id: string;
+  /** The model's name. */
+  label: string;
+  /**
+   * What distinguishes it — `faster`, `deeper`, a price. Replaced by `current` on the
+   * row in use.
+   */
+  detail: string;
+}
+/**
+ * Fork the same turn to a different model instead of rolling the same dice.
+ *
+ * @example
+ * import { RegenerateMenu } from "@cueplusplus/ui/elements";
+ *
+ * <RegenerateMenu
+ *   options={options}
+ *   open={open}
+ *   currentId="sonnet"
+ *   onOpenChange={setOpen}
+ *   onPick={regenerate}
+ * />
+ */
+declare function RegenerateMenu({ options, open, currentId, onOpenChange, onPick, className, ...props }: Omit<ComponentProps<"div">, "children" | "options" | "open" | "currentId" | "onOpenChange" | "onPick"> & {
+  /** What the turn can be re-run with. */
+  options: readonly RegenerateOption[];
+  /** Whether the menu is showing. */
+  open: boolean;
+  /**
+   * Which option produced the answer on screen; it is labelled current instead of
+   * showing its detail.
+   */
+  currentId: string;
+  /** Called when the trigger is toggled. */
+  onOpenChange?: (open: boolean) => void;
+  /** Called with the chosen option. */
+  onPick?: (id: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { RegenerateMenu, RegenerateOption };

package/dist/elements/regenerate-menu.js

@@ -0,0 +1,51 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ghostButton } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RefreshCwIcon } from "lucide-react";
+//#region src/elements/regenerate-menu.tsx
+/**
+* Fork the same turn to a different model instead of rolling the same dice.
+*
+* @example
+* import { RegenerateMenu } from "@cueplusplus/ui/elements";
+*
+* <RegenerateMenu
+*   options={options}
+*   open={open}
+*   currentId="sonnet"
+*   onOpenChange={setOpen}
+*   onPick={regenerate}
+* />
+*/
+function RegenerateMenu({ options, open, currentId, onOpenChange, onPick, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "regenerate-menu",
+		className: cn("flex w-full max-w-sm flex-col gap-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-expanded": open,
+			"aria-label": "Regenerate with a different model",
+			onClick: () => onOpenChange?.(!open),
+			className: cn(ghostButton, "size-7 self-start", open && "bg-surface-2 text-fg"),
+			children: /* @__PURE__ */ jsx(RefreshCwIcon, { className: "size-3.5" })
+		}), open && /* @__PURE__ */ jsx("div", {
+			className: cn("bg-surface-2 border border-border-overlay", "cue-elements-fade-in cue-elements-zoom-in-95 cue-elements-slide-in-from-top-1 cue-elements-animate-in flex flex-col gap-0.5 rounded-(--radius-overlay) p-1.5 duration-200"),
+			children: options.map((option) => /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => onPick?.(option.id),
+				className: "hover:bg-surface-1 flex items-baseline gap-2 rounded-(--radius-surface) px-2.5 py-1.5 text-start transition-colors",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 truncate text-(length:--cue-text-body)",
+					children: option.label
+				}), /* @__PURE__ */ jsx("span", {
+					className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle shrink-0"),
+					children: option.id === currentId ? "current" : option.detail
+				})]
+			}, option.id))
+		})]
+	});
+}
+//#endregion
+export { RegenerateMenu };